Créer un site Web de restaurant avec WordPress + Elementor (plugins gratuits)

1. 2 Introduction: Et bienvenue dans un autre cours de conception Web Wordpress génial avec moi, Ken Messa Si c'est la première fois que vous me voyez, j'enseigne aux gens comment créer belles pages de destination et des sites Web entièrement fonctionnels avec Wordpress et des plugins Wordpress gratuits. Et dans ce cours, je vais vous montrer comment créer un site Web de restaurant entièrement fonctionnel à partir de zéro en utilisant Wordpress Elementor et d'autres plugins gratuits Vous n'aurez rien à payer pour que votre site Web soit opérationnel. À la fin de ce cours, vous aurez un site Web que vous pourrez commencer à utiliser immédiatement pour recevoir les commandes et les réservations pour votre restaurant. Et l'ensemble du système de commande et de réservation sera intégré à une application mobile gratuite que vous pourrez télécharger depuis l'App Store ou le Playstore et commencer à recevoir commandes lorsque les clients passent leurs commandes sur le site Web que vous créez actuellement Mais avant d'aller plus loin, je voudrais vous parler un peu de moi. environ cinq ans, j'ai eu besoin d'un site Web pour présenter et vendre mes services de conception graphique. Je travaillais comme graphiste depuis quelques années, mais je voulais devenir indépendant. J'ai donc voulu créer un site Web sur lequel je pourrais vendre mes modèles et services de conception graphique , par exemple sur Free Peek ou Shadow Stock C'est alors que je suis tombée sur Elementor et que j'ai été pressée j'ai réalisé que je pouvais créer mon propre site Web et j'ai donc décidé de l'essayer Mais je ne savais pas que cette découverte répondrait non seulement à mes besoins personnels, mais qu'elle ouvrirait également un tout nouveau chapitre de ma carrière. Après avoir regardé quelques tutoriels Elemento et créé mon propre site Web, quelque chose de magique s'est produit demandes ont commencé à affluer de la part de personnes me demandant de créer des sites Web pour eux. J'ai donc passé quelques années travailler pour des clients de conception Web, créer plusieurs sites Web pour plusieurs entreprises. Aujourd'hui, et voilà, je ne m'occupe plus de projets pour les clients, mais je consacre plutôt mon temps à partager mon expertise élémentaire avec vous tous Et comme je l'ai mentionné, une fois de plus, nous aborderons tout ce que vous devez savoir pour créer un site Web complet avec Wordpress. agisse de créer une page d' accueil accueillante, présenter votre menu ou de partager l'histoire de votre restaurant Et même en intégrant un système de commande et de réservation entièrement fonctionnel pour que vous puissiez commencer à prendre des commandes. aborderons immédiatement les aspects pratiques de Wordpress et d'Elementor Et je vais vous guider étape par étape alors que nous donnons vie à la présence en ligne de votre restaurant. À la fin de ce cours, vous aurez non seulement les compétences nécessaires pour créer un site Web de restaurant, mais également les compétences nécessaires pour utiliser la presse Web pour créer un large éventail de sites Web. Parce que je sais que certains d'entre vous sont peut-être exactement là où j'étais avant de savoir comment créer des sites Web. Vous voulez savoir comment créer sites Web pour vous-même au lieu de payer des centaines ou des milliers de dollars aux gens pour le faire. Parce que vous avez probablement plusieurs idées pour différents sites Web et plateformes en ligne, mais vous ne savez pas comment vous y prendre vous-même. Certains d'entre vous voudront peut-être même se lancer dans le secteur de la conception Web et être payés pour créer des sites Web pour les clients. Ainsi, à la fin de ce cours, vous aurez une base solide sur la façon de créer le site Web de votre choix. Ce cours est pour toi. D'ailleurs, ce cours répond à une demande faite par l' une de mes élèves, Bridget Xi Merci à Bridget d'avoir fait cette demande. Si quelqu'un d'autre a une idée de site Web qu'il aimerait que nous créions lors du prochain cours, hésitez pas à la déposer dans l' onglet de discussion situé sous ce lecteur vidéo. J'ai hâte de voir ce que tu vas créer. Donc, si vous êtes aussi enthousiaste que moi, je vous verrai dans la prochaine leçon. 2. Démonstration du projet: Nous voulons maintenant jeter un œil à notre projet de classe. L'un des meilleurs moyens d'acquérir une compétence est de créer quelque chose. C'est ce que nous allons créer, ce site Web ici. Je veux juste vous faire une petite visite du site Web. Pendant que je préparais ce cours, j'ai créé ce site Web à l'avance. Je l'ai construite pour une seule raison : nous avons quelque chose à examiner Lorsque nous créons la section des héros ici, nous pouvons y jeter un œil, puis passer sur Wordpress et commencer à la créer. Lorsque nous examinons ce que nous construisons, nous avons un point de référence. D'autres cours ou classes peuvent avoir une approche dans laquelle vous vous contentez de le suivre Vous construisez juste quelque chose à partir de nulle part. Vous ne savez pas exactement ce que vous construisez dans cette classe. Nous aurons l'occasion de revenir sur ce site Web de référence, jeter un œil à la section que nous sommes en train de créer, de voir son style et de revenir à notre éditeur C'est la section des héros, et si je la recharge, vous remarquerez à quel point elle est bien animée Chaque élément est animé , y compris l'image d'arrière-plan. Et lorsque nous commençons à faire défiler le site, vous remarquerez que nous avons un en-tête autocollant qui reste haut, peu importe où nous nous trouvons sur le site Web, ce qui est une fonctionnalité intéressante Vous ne voulez pas que votre barre Nab soit masquée lorsque vous faites défiler Chaque élément ici est animé. Si je le recharge une fois de plus, faisons défiler la page vers le bas, jusqu'en bas Nous allons voir comment faire tout cela. Je pense que cela donne de la vie à votre site Web , de sorte qu'il ne s'agit pas simplement d'un site Web statique. L'autre chose que je veux vous montrer, c'est que ces boutons situés ici ouvrent le système de commande et de réservation. Si nous cliquons sur ce menu ouvert et que nous commandons, le menu s'ouvrira et je vous montrerai comment créer ce système. Un client peut venir ici et choisir, peut-être qu'il veut juste un café. Ils sélectionneront le café et pourront partager des instructions spéciales. Je veux qu'on l'ait. Je viens peut-être avec deux invités, nous serons trois. Nous pouvons l'ajouter au panier. Et je faisais déjà quelques tests avec. C'est pourquoi j'ai deux articles sur ma carte. Laissez-moi retirer cette pizza. Le client peut fournir toutes ces informations ici. Mode de commande, retrait, c'est bon. Réservez ce temps disponible dès que possible. Nous pouvons le modifier. Je les avais déjà définis lors du test et c'est pourquoi ils sont déjà enregistrés dans notre mode de paiement. Ici, ce sera en espèces ou par carte au comptoir de ramassage, gardez-le. Nous sommes maintenant prêts à passer commande. Si je clique, veuillez récupérer une commande. Je passe ma commande sur mon téléphone, ici. C'est l'application dont je vous parlais. Vous aurez cette application si vous exploitez le site Web du restaurant. Voici la commande en attente. Et j'ai un bouton vert ici pour accepter la commande. Mais je devrais également être en mesure d'appeler la personne et de confirmer avec elle. Peut-être que si je veux qu'ils payent avant que nous acceptions la commande, nous pouvons le faire. Si j'accepte ici, je dois indiquer le délai de livraison ou le temps d'attente, peut-être 30 minutes, l' heure , ce qui signifie qu'ils devraient venir le chercher au bout de 30 minutes. Maintenant que j'ai accepté cette commande, voici ce que le client verra sur la plateforme. commande confirmée dans les 30 minutes. Laisse-moi clore ça. Nous avons également les réservations de tables, nombre de personnes, peut-être un rendez-vous pour trois personnes demain. Disons que nous arrivons à 10 h 30. Nous avons une réunion, peut-être que nous avons des commentaires particuliers Ensuite, aimeriez-vous commander à l'avance et avoir votre plat préféré prêt à l'arrivée ? Oui, commandez maintenant pour que je puisse passer ma commande. Peut-être du café, des instructions spéciales. Nous allons être trois à ajouter au panier, puis nous pourrons aller au panier et répéter les mêmes instructions ici. Réservation de table. Sauvegardez ça. Non, attendez. Réservation et commande de table. Table pour trois personnes, 1030. Économisez de l'argent sur ce mode de paiement. Nous pouvons maintenant passer notre commande. Il y a à nouveau un message sur l'application. Et n'oubliez pas que cette application est 100% gratuite. Je vais revenir en arrière pour voir la commande en attente et je peux appuyer sur Accepter ici, sur le bouton vert. Je peux aller de l'avant et accepter cela. Maintenant, ici sur l'écran, le client verra que sa commande, sa réservation a été confirmée. Fermons ça. Maintenant que nous faisons défiler , nous verrons bien sûr comment créer chaque section de cette page. Nous avons un petit menu ici, nous exposons certains de nos plats. Et je vais vous montrer comment créer ce menu à l'aide d'un plugin vraiment génial. Il s'agit du même bouton pour charger ce menu afin de permettre au client de passer une commande. Il s'agit du même bouton de réservation pour effectuer une réservation. Maintenant, on les appelle des appels à l'action. Chaque page de destination doit comporter des appels à l'action, car c'est le but d'une page de destination. Pour inciter l'utilisateur à effectuer une action. Dans ce cas, il s'agit de passer une commande ou d'effectuer une réservation. Et voici une galerie. Nous pouvons cliquer sur Ouvrir la galerie. Il s'ouvrira dans un nouvel onglet, et je vais vous montrer comment procéder. Nous serons redirigés vers la page de la galerie ici. Nous aurons des images de différentes activités. Nous pouvons les voir dans différentes catégories, personnel, tables de cuisine, ou toutes. Nous y voilà. Nous avons la page à propos, gros, tout tourne autour de la mise en page. Nous verrons également comment créer cette page. Il possède les mêmes boutons d'appel à l'action car ils sont importants. Nous avons un formulaire d' inscription à la newsletter ici s'ils veulent se tenir au courant de ce qui se passe dans le restaurant. Bien entendu, permettez-moi de passer à la page de contact. Ils peuvent entrer en contact avec la direction ou l' administrateur du site Web. Il ne s'agit que d'un site Web de base, mais il contient tout ce dont vous avez besoin sur un site Web de restaurant pour gérer votre entreprise avec succès. J'ai deux objectifs à ce sujet. Je veux vous aider à créer un véritable site Web que vous pourrez utiliser pour votre restaurant si tel est votre objectif. Mais cela vous permettra également d'acquérir les compétences nécessaires pour créer des sites Web Wordpress. Vous allez comprendre le Wordpress et le flux de travail élémentaire pour créer des sites Web. n'est qu'un bref aperçu du projet sur lequel nous allons travailler. Et une fois votre projet terminé, n'oubliez pas de prendre une capture d'écran de votre page de destination et de la partager avec le reste de la communauté ici. Il vous suffit de vous rendre directement en dessous de ce lecteur vidéo dans l'onglet Projets et ressources. Voici un exemple d'un de mes cours précédents. Il s'agit de l'onglet Projets et ressources. Et voici des exemples de certains des projets que les étudiants ont publiés ici. N'hésitez donc pas à prendre une capture d'écran de votre page de destination et à la partager avec la communauté. Obtenez des commentaires de la part d'autres étudiants et de votre professeur. Et je crois qu'en faisant cela, nous serons tous en mesure de grandir ensemble. Donc, si vous êtes prêt et impatient de commencer, passons à l'achat d' un domaine et à l'hébergement de votre site Web, car votre site Web doit se trouver quelque part en ligne. Je te verrai bientôt. 3. Acheter un hébergement et un nom de domaine: Bon retour. Vous avez maintenant vu ce que nous allons construire. Il est temps de discuter de l'endroit où votre site Web sera hébergé. Chaque site Web que vous visitez ou consultez en ligne est stocké quelque part sur un serveur. C'est pourquoi le site Web est accessible aux personnes du monde entier. Si je clique sur un lien qui me mène à votre restaurant, les pages Web du restaurant seront chargées à partir du serveur fourni par votre hébergeur. C'est la page d'accueil de votre site Web. Je suis ici sur le site WordPress.org, et je suis spécifiquement sur la page d'hébergement Wordpress a ses hébergeurs recommandés. Allez-y, lisez cette page. C'est l'hébergement Slash de WordPress.org. Comme vous pouvez le constater, nous avons trois hébergeurs recommandés par WordPress.org : Bluehost, Dream Host et WordPress.com. Si nous ouvrons Bluehost, et WordPress.com. Si nous nous Bluehost dispose d'un hébergement Wordpress. Permettez-moi de cliquer dessus, ou peut-être de monter ici. Wordpress, hébergement Wordpress. Voici les tarifs des différents forfaits proposés par Blue Host. C'est 5,4 5$. Chaque mois, vous bénéficiez d'un stockage SSD de 40 Go et vous pouvez héberger trois sites Web. Dans le cadre de ce plan d'hébergement, vous pouvez avoir trois sites Web différents sous le même plan d'hébergement. Allons-y et regardons Dream Host. Passons à l'hébergement Wordpress, un hébergement Wordpress imbattable Regardons les prix, passez à 2,95€ pour plus de fonctionnalités et de spécifications de texte Nombre de sites Web ici, vous pouvez en obtenir un pour 8,95, vous pouvez obtenir un nombre illimité de sites Web Vous pouvez avoir un nombre illimité de sites Web sur ce service d'hébergement pour ces autres, c'est juste un. Allez-y et passez en revue tout cela ensuite. Jetons un coup d' œil à la troisième option qu'ils proposent : WordPress.com. Maintenant, ne confondez pas WordPress.com avec WordPress.org WordPress.com est une plateforme qui vous permet créer un site Web dessus, et elle s'occupe de qu'ils proposent : WordPress.com. Maintenant, ne confondez pas WordPress.com avec WordPress.org WordPress.com est une plateforme qui vous permet de créer un site Web dessus, et elle s'occupe de votre hébergement. Il héberge vos sites Web pour vous. WordPress.org est l' organisation qui fournit le Wordpress que vous téléchargez à votre hébergeur Par exemple, si vous créez un site Web sur Bluehost, vous devez télécharger et installer Wordpress Vous pouvez l'obtenir sur WordPress.org Si nous allons sur la page d'accueil, vous pouvez voir obtenir Maintenant, si je voulais construire Wordpress sur mon hébergeur local qui se trouve ici sur ma machine juste à des fins de développement, pour expérimenter, avant de trouver un hébergeur, je peux télécharger Wordpress ici. Mais si je veux créer un site Web et le lancer en ligne, je dois avoir un hébergeur. Et lorsque j'achète un plan, l'hébergeur me donne accès au panel. Chaque hébergeur met à votre disposition un panel. Et c'est à l'intérieur du panneau que vous allez installer Wordpress, et je vais vous montrer comment faire. Nous avons également un service qui n'est pas répertorié par WePress.org car n'oubliez sont que des recommandations Mais il existe de nombreux autres hébergeurs Web qui sont vraiment géniaux. Personnellement, j'ai quelques sites Web hébergés sous le nom de Chip. Passons maintenant à l'hébergement mutualisé. Très bien, donc si vous débutez et que vous ne faites que tester votre site Web, c'est le plan que j'utilise lorsque je lance une idée d'entreprise et que je veux tester le terrain. Stella plus 2,98€ par mois. Tout d'abord, vous obtenez un nom de domaine gratuit, un site Web illimité. Cela signifie que vous pouvez avoir Mike.com Vous pouvez avoir Ferguson.com Nouveau site de gym .com Vous pouvez avoir plusieurs sites Web hébergés dans plusieurs Supposons que ce ne sont que des sites Web que vous testez. Vous n'avez pas besoin de plans d'hébergement distincts pour tester des idées. Vous pouvez simplement les tester dans le cadre d' un seul plan d'hébergement pour lequel vous payez 2,98€ par mois Alors. Une fois que l'un d' entre eux démarre vraiment et qu' il commence à très bien fonctionner, vous pouvez désormais obtenir un hébergement dédié séparément. C'est ce que je fais. C'est ce que je recommande personnellement. Mais vous êtes libre de choisir n'importe quel autre hébergeur parmi ces autres hébergeurs. Tout tourne autour de l'hébergement Web. J'aurais suivi une leçon séparée sur l'achat d'un domaine. Mais l'achat d'un domaine est assez simple. Tu viens juste de voir Name Chip. Et je n'ai aucune affiliation avec Name Chip. Je ne reçois aucun argent de leur part. C'est juste le service que j'utilise personnellement. Vous pouvez accéder aux domaines, recherche de noms de domaine et à la recherche de votre nom. Supposons que Bebistra.com Si j'appuie sur Enter, différentes options et leurs prix seront Et je peux ajouter au panier et acheter le domaine que je veux. Vous pouvez obtenir des domaines très bon marché ici. Faites simplement preuve de créativité avec vos noms de domaine si celui que vous voulez est trop cher, comme Betbstra.com, comme vous pouvez le voir, c'est un nom de domaine premium qui coûte 34, 99 C'est beaucoup d'argent. Mais disons, comme vous pouvez le voir, s'agit pas d'un domaine premium. Il n'est que 10.28 Faites preuve de créativité et cherchez des moyens d'obtenir un nom de domaine bon marché avec lequel vous pourrez vivre En gros, il s' agit d'acheter hébergement Web et un nom de domaine pour votre site Web. Dans la leçon suivante, nous verrons comment installer Wordpress dans votre panneau une fois que vous aurez acheté votre hébergement Web et un nom de domaine. Je te verrai bientôt. 4. Installer WordPress: Bienvenue. Il est maintenant temps d' installer Wordpress dans notre panel. Maintenant, quel que soit le message Web que vous avez décidé d'utiliser, si vous n'utilisez pas de puce nominative, l'installation de Wordpress est à peu près la même. Nous devons accéder au panneau, puis nous connecter notre panneau et y installer Wordpress pour que je puisse accéder à mon panneau. À l'intérieur de la puce nominative, je dois d'abord me connecter à ma puce nominative, me connecter. Il ne vous reste plus qu'à vous connecter à votre publication sur le Web. Je dois vérifier cela. Permettez-moi de vérifier très rapidement. C'est bon. Soumets-le. Nous y voilà. Je vais accéder directement à ma liste d'hôtes. Voici une liste des différents packs d'hébergement. Comme vous pouvez le constater, je n'en ai acheté qu'un. Je vais aller au panel de. Si je me suis connecté à mon compte nominatif, c' pour pouvoir me connecter à mon panel en cliquant dessus. Votre hébergeur peut vous fournir un moyen d'accéder à la page de connexion de votre panneau C afin que vous n'ayez pas à passer par votre compte d'hébergeur. Mais c'est ainsi que je l'ai fait. Maintenant, pour en revenir à mon panel, quel que soit votre hébergeur, votre panneau C aura la plupart de ces fonctionnalités ici. Et l'une de ces fonctionnalités est ce Wordpress. Ce sera sous le programme d'installation de Staculus Apps. Je vais cliquer sur Wordpress et serai redirigé vers le service Softaculus Comme vous pouvez le voir, ce softaculus sera redirigé directement vers la page de présentation de Wordpress Voici maintenant mes installations actuelles. Comme vous pouvez le voir, j'ai une installation Wordpress sous ce domaine. Nous pouvons en installer un nouveau. Je vais procéder à l'installation. Maintenant, j'ai quelques noms de domaine, l'un d'eux étant VFX Port.com et c'est celui que je vais utiliser dans le menu déroulant Si vous avez un certificat SSL, vous pouvez choisir HTTPS et j'aime bien avoir ce préfixe WWW. Cliquez à l'extérieur, il vérifiera et confirmera que vous disposez d'un certificat SSL. Comme vous pouvez le constater, il s'agit de la version de Wordpress que nous avons actuellement. Bien entendu, je vais laisser cet espace vide car je ne veux pas que l'extension wwwfport.com soit coupée par une barre oblique sur mon nom de domaine extension wwwfport.com soit coupée par une barre oblique sur mon nom de Ce sera juste vifport.com Ensuite, donnons un nom à notre site Web Je vais lui donner un restaurant. Donnons-lui un bref slogan ou une brève description. Les meilleurs repas de la ville. Ce sont les identifiants de connexion que vous utiliserez pour vous connecter directement à votre tableau de bord Wordpress si vous ne souhaitez pas passer par le panneau C. Il vous suffit donc d'accéder à votre identifiant de domaine et vous serez redirigé vers la page de connexion. Et puis il s'agit d'un e-mail d'administrateur par défaut généré par spectaculars Dans cet e-mail d'administrateur, vous recevrez toutes les alertes ou notifications du système, de votre hébergeur concernant votre site Web, peut-être des alertes de sécurité ou quoi que ce soit de ce genre. Je vais laisser tout le reste intact, mais nous pouvons ouvrir l'onglet avancé et si vous souhaitez sauvegarder votre site Web de temps en temps, laissez-le. Par défaut, vous pouvez dire peut-être une fois par semaine, rotation de sauvegarde, peut-être deux copies. Cela signifie qu'à tout moment, vous aurez toujours deux copies de votre site Web, une version plus ancienne et la version sauvegardée la plus ancienne. Sur ce, je veux également les vérifier. Ce sont des plugins qui seront préinstallés avec votre Wordpress. Je n'ai besoin d'aucun d' entre eux car il existe meilleures alternatives une fois que nous avons commencé installer les plug-ins. Vous pouvez ensuite un e-mail pour recevoir une notification une fois votre installation terminée. Mais ce n'est pas une installation massive, c'est une installation optionnelle. Voilà, maintenant Wordpress est installé. Comme vous pouvez le voir, il s' agit de notre domaine, notre URL administrative. Cela nous mènera au tableau de bord Wordpress. Si je clique dessus, nous y voilà. Nous avons maintenant installé Wordpress avec succès. Comme vous pouvez le voir, il s' agit de la version 6.4 0.2 et nous sommes maintenant prêts à démarrer avec le site Web. Je te verrai dans la prochaine leçon. 5. Installer Elementor: Il est maintenant temps d'installer Elementor, car nous construisons le site Web avec lui Passons directement aux plug-ins. Je vais commencer par cliquer sur plugins afin que nous puissions être redirigés vers la liste des plugins déjà installés. Je souhaite sélectionner les deux en cochant cette case ici. Supprimer Appliquer. Nous n'en avons pas besoin. Nous avons maintenant une feuille blanche. Je vais aller de l'avant et ajouter. Nous allons être redirigés vers le Wordpress. Branchez le répertoire ici, je vais chercher un élément, bien sûr, c'est le premier d'elemento.com avec plus de 5 millions d' installations actives installées Maintenant, si vous êtes nouveau sur Elementor, comme vous pouvez le voir, nous avons d'autres plugins créés pour étendre la puissance d'Elementor Il s'agit de sociétés tierces comme WP Developer Unlimited, WP Royal. Ce sont des développeurs tiers qui ont créé plus d'éléments à ajouter gratuitement à votre plugin Elementor Et nous allons utiliser un certain nombre de ces plugins fur et à mesure que nous progresserons avec l'installation d' Elementor Je vais appuyer sur Activer et je serai redirigé vers l'assistant de configuration d'Elementor Maintenant, si vous souhaitez profiter de certains de ces avantages, vous pouvez créer un compte sur elemento.com Mais vous n'avez pas besoin de créer un compte pour utiliser Elementor, je vais simplement ignorer Vous pouvez choisir de continuer avec le thème hello, créé spécifiquement par élément, par l'équipe d'Elemento pour travailler avec Elementor Mais nous allons utiliser un bien meilleur thème Wordpress appelé astra Et nous allons l' installer dans la prochaine leçon. Je vais aller de l'avant et ignorer cela. C'est le nom que nous avons donné à notre site Web lorsque nous l'avons créé. Nous n'avons pas besoin de le modifier, mais si vous le souhaitez, vous pouvez le modifier dès maintenant. Je vais juste cliquer sur le suivant. Vous pouvez ajouter un logo dès maintenant si vous le souhaitez, mais nous le ferons plus tard. Je vais sauter maintenant. Nous avons terminé. Vous pouvez modifier un canevas vierge avec l'éditeur élémentaire, choisir un modèle conçu par des professionnels ou importer des modèles que vous avez déjà créés dans un autre projet. Mais nous pouvons également cliquer sur Ignorer ou fermer cette fenêtre. Permettez-moi d'appuyer sur Skip, mais nous serons toujours redirigés vers une page Elementor vierge Son éditeur, comme vous pouvez le voir, elementary est en cours de chargement. Maintenant, c'est une page blanche. Nous allons le supprimer. Mais pour l'instant, regardons ce que nous avons ici. Exploitez le pouvoir de l'élément I. Cela nous fournit des fonctionnalités d'IA. Au fur et à mesure que nous créons notre site Web, nous pouvons tirer parti des fonctionnalités de l'IA. Allons-y et disons «   continuez ». Allons-y. Comme je l'ai dit, il ne s'agit que d'une page blanche. Allons ici et disons « sortie ». Si nous disons « quitter » parce que nous n'avons pas publié cette page, il se peut qu'on nous le dise ou qu'on nous demande si nous voulons vraiment quitter. Maintenant, ici, nous pouvons choisir où nous voulons être redirigés chaque fois que nous cliquons sur ce bouton de sortie. Et j'aime être redirigé vers le tableau de bord WP parce que c'est le seul endroit où je voudrais aller. Oui, laissons-le, car nous ne voulons pas enregistrer les modifications. Nous avons été redirigés vers le tableau de bord Wordpress chaque fois. Désormais, lorsque nous appuierons sur le bouton de sortie, notre éditeur sera redirigé vers le tableau de bord, ce que nous voulons. Comme vous pouvez le constater, nous avons Elementor et des modèles. Ces deux éléments ont été ajoutés à cette liste après l' installation d'Elementor Si nous passons à Elementor nous avons des intégrations, des fonctionnalités avancées Vous n'avez pas vraiment besoin de toucher à aucun de ces paramètres. Personnellement, je ne modifie aucun de ces paramètres. Je vais juste de l'avant et je commence directement. Voici comment installer l'élément. Dans la leçon suivante, nous allons voir comment installer le thème Astra Je te verrai bientôt. 6. Installer un thème WordPress: Il est maintenant temps d'installer un thème Wordpress. Chaque fois que vous souhaitez travailler sur un projet Wordpress, vous devez avoir un thème installé. Maintenant, nous le faisons en accédant aux thèmes d'apparence. Par défaut, chaque fois que vous installez Wordpress, celui-ci aura un thème préinstallé et le thème portera le nom de l'année au cours de laquelle vous avez installé Wordpress. Cette année, le thème actif est 2024. L'année dernière, nous avons eu 2023, et l'année précédente, nous avons eu 2022. Mais ce ne sont pas ceux que nous allons utiliser. Nous allons ajouter un nouveau thème et nous serons redirigés vers le répertoire des thèmes. Tout comme nous avons été redirigés vers le répertoire des plug-ins. Comme je l'ai mentionné, le thème Astra est notre thème de prédilection. Il est juste livré avec de très belles fonctionnalités que j'aime vraiment utiliser. Et vous verrez pourquoi Astra est maintenant installé, mais il n'est pas encore actif. Cliquez sur Activer. Nous y voilà. Comme c'est maintenant activé. Commencez avec un modèle prêt à l'emploi, bla, bla, bla. Non, fermons ça parce que nous allons tout construire à partir de zéro. Nous n'allons pas utiliser de modèles prédéfinis. Bien, maintenant, comme vous pouvez le voir, Active est le thème Astra En gros, c'est comment installer un thème Wordpress. Dans la leçon suivante, commençons à travailler sur la page d'accueil. Je te verrai bientôt. 7. Aperçu de l'espace de travail d'Elementor: Maintenant que nous avons installé notre thème et que nous avons installé Elementor, allons avoir un bref aperçu de l'espace de travail Elementor Passons directement à Pages. Voici la liste de toutes les pages Web que nous avons. Maintenant, lorsque nous avons installé Wordpress, il était livré avec deux pages Web préinstallées. Comme vous pouvez le constater, le projet de politique de confidentialité est un brouillon et un exemple de page Web devez sélectionner ces deux éléments, accéder à ce menu déroulant et passer à la corbeille. En d'autres termes, supprimez-les. Il nous reste maintenant un exemple de page d'éléments qui a été générée lors de l'assistant de configuration d'Elementa C'est une bonne page à utiliser pour avoir aperçu de l'espace de travail élémentaire Maintenant, pour accéder à l' éditeur d'éléments, nous avons deux options. Nous pouvons cliquer sur Modifier avec Elementa ici, ou nous pouvons aller sur Modifier ici Vous trouverez la même modification avec l'option Elementor. Je vais simplement cliquer dessus, je serai redirigé vers le front-end où nous pouvons maintenant jeter un œil à l' espace de travail élémentaire ici. C'est ici que se trouve notre site Web. Tout ce que nous construirons se trouvera ici. C'est comme notre boîte à outils. Il contient tout ce dont nous avons besoin. Il s'agit d'éléments que nous pouvons intégrer à notre site Web pour les utiliser. C'est pourquoi il s' appelle Elementor. Il nous fournit des éléments. Nous avons maintenant des panneaux contenant différents éléments. Si je les réduis tous, permettez-moi de clore. Ce sont tous les panneaux qu' Elemento nous fournit. Si nous les développons, il s'agit d'un élément conteneur, car l'année dernière, element est passé à un système basé sur des conteneurs pour créer vos pages Web. Et nous verrons comment utiliser ces conteneurs. Si je le réduis, nous avons le panneau de base. Il contient les éléments les plus couramment utilisés que vous pouvez trouver sur n'importe quel site Web. Nous avons un élément de titre. Si nous le faisons glisser juste là, comme vous pouvez le voir, c'est un titre sur lequel nous pouvons double-cliquer et le modifier. Laisse-moi fermer ça. Nous avons un éditeur de texte, un bouton, un séparateur, nous avons une entretoise Nous verrons comment utiliser la plupart d'entre eux. Si nous réduisons le panneau de base et que nous élargissons le panneau professionnel, vous remarquerez que ces éléments ont un petit verrou dans le coin supérieur droit. Cela signifie essentiellement qu'ils ne sont pas gratuits. Vous ne pouvez pas le faire glisser et le mettre ici. Lorsque vous essayez de le faire glisser, cette fenêtre contextuelle s'affiche pour vous demander de procéder à la mise à niveau. Maintenant, la bonne chose à propos Elementor, c'est que lorsque nous avons installé Elementor, nous avons vu d'autres plugins tiers fournissant des éléments supplémentaires Vous n'avez pas à vous inquiéter de ne pas avoir accès à ces éléments professionnels. Vous pouvez toujours accéder aux éléments qui peuvent faire la plupart de ces choses en installant les modules complémentaires liés aux éléments tiers que nous avons vus lors de l'installation d'Elementor Et nous verrons comment procéder, car nous avons dit que nous allions utiliser certains de ces plug-ins tiers. Si je réduis le panel pro, nous avons le panel général. Ici, vous trouverez des éléments gratuits, vous pouvez glisser-déposer des éléments ici. Laisse-moi résumer, laisse-moi revenir ici. Bien sûr, nous allons jeter un œil à tout cela et vous allez voir comment nous les utilisons. Vous avez maintenant remarqué que si, par exemple, je le fais glisser ici, cela modifie les paramètres de l' élément spécifique que vous venez ou de l' élément que vous avez actuellement sélectionné sur votre espace de travail. Si nous sélectionnons, il s'agit toujours d'un titre de modification car il s'agit d'un titre. Si je sélectionne cette option, souvenez-vous qu'il s'agissait d'un carrousel d'images, cela change pour modifier le carrousel d' images Cela signifie que ces paramètres concernent ce carrousel d'images spécifique Si je le duplique en cliquant avec le bouton droit de la souris, en le dupliquant et en le sélectionnant, ces paramètres concernent ce carrousel d' images spécifique Si je sélectionne, ces paramètres s' appliquent à ce carrousel d'images spécifique Maintenant, lorsque ces paramètres sont affichés ici et que nous voulons ajouter d'autres éléments, nous pouvons simplement cliquer sur cette icône pour faire apparaître à nouveau la liste des éléments. Et tu peux y faire glisser ce que tu veux. Notez que ce bouton est devenu le bouton Modifier car nous venons de le supprimer. C'est l' élément actif en ce moment, une autre chose que je veux que nous examinions est un navigateur Si j'appuie sur la touche Ctrl, nous avons un navigateur ici Il s'agit essentiellement d'un aperçu de ce que nous avons ici dans cet espace. Comme vous pouvez le constater, nous avons trois conteneurs. Nous avons ce conteneur, voici un autre conteneur, et voici un autre conteneur. Il s'agit de trois conteneurs. Dans le troisième conteneur, nous avons un carrousel d'images et un bouton Comme vous pouvez le constater, le carrousel d'images et le bouton. Dans ce second conteneur, nous n'avons qu'une cellule de carro image Si je le réduis et que je l'agrandis, nous avons une cellule de carro image Nous avons ici deux éléments de titre. Si je le réduis et que j' agrandis ce conteneur, nous avons deux éléments de titre. C'est le Navigator. Et vous pouvez simplement fermer ce contrôle. Vous pouvez l'afficher n'importe où sur l'écran. Et il flottera votre écran pour que vous puissiez en voir d'autres parties. Tiens, laisse-moi juste le mettre là et le fermer. Nous avons ici l'icône du mode réactif. Il s'agit du bouton sur lequel nous sommes utilisés pour rendre notre site Web adaptatif sur différentes tailles d'appareils. Voici un historique, une liste des modifications que nous avons apportées à notre site Web. Et nous pouvons sélectionner un point dans le temps et y revenir. Cela change l' état de votre site Web rapport à l'état dans lequel il se trouvait lorsque vous avez effectué cette modification. Il supprime toutes les modifications apportées par la suite. C'est une façon d' annuler de nombreuses modifications que vous avez apportées et qui ne vous plaisent pas. Nous pouvons revenir au moment où l'édition a commencé et le site Web est vide parce que c'est ce qu'il était à l'époque et nous verrons à quoi servent tous ces autres. En gros, il ne s'agit que d' un bref aperçu de l'espace de travail élémentaire au fur et à mesure que nous progressons . Au fur et à mesure que nous travaillerons sur différentes pages Web, les différentes sections, vous vous habituerez à utiliser tous ces outils dans la leçon suivante Commençons maintenant par la section des héros. Je te verrai bientôt. 8. Section de héros - Image de fond: Nous venons d'avoir un bref aperçu de l'espace de travail élémentaire, mais nous n'avons plus besoin de cette page. Je vais juste aller sur ce menu de hamburgers, puis sortir. Nous allons dire « quitter car nous n'avons pas besoin de sauvegarder les modifications. Il sera redirigé vers le tableau de bord comme nous l'avons dit précédemment. Revenons maintenant aux pages. Nous pouvons le supprimer car nous n'en avons pas besoin. Ajoutons maintenant une nouvelle page en cliquant sur ce bouton. Et donnons-lui un nom. Appelons cela la page d'accueil. Passons maintenant au modèle et choisissons Elementor Full Width Passons aux paramètres d'Astra, car nous sommes en train de configurer la page et son apparence est déterminée par le thème que vous utilisez Passons aux paramètres d'Astra. Ce sont les paramètres de Wordpress, mais ce sont les paramètres d' Astra. Ce que nous voulons, c'est toute la largeur ici. Ne vous inquiétez pas pour ces paramètres. Ils ne s'appliquent que lorsque la mise en page est définie sur normale ou étroite. Nous ne nous en soucions pas car nous l' avons réglé sur toute la largeur. Le même cas s'applique à la barre latérale. Nous ne voulons pas que notre page Web ait une barre latérale, nous l'avons définie sur aucune barre latérale. Passons ensuite aux éléments désactivés. Nous ne voulons pas l' en-tête ou le pied de page Astra, nous allons créer nos propres en-têtes et les pieds Et que nous pouvons simplement laisser intact ou simplement le désactiver, mais cela n'a pas vraiment d'importance. Ici, il a publié, publié. La page est maintenant prête. Nous pouvons maintenant cliquer sur Modifier avec Elementor et nous serons redirigés vers le front-end où nous pourrons maintenant commencer à le créer Maintenant, souvenez-vous d'une chose que vous avez dite, c'est qu'Elementor utilise désormais un système de conception Web basé sur des conteneurs Nous allons utiliser des conteneurs pour construire nos différentes sections. Si vous cliquez sur cette icône plus ici, il y aura des structures prédéfinies que vous pourrez utiliser. Nous allons opter pour celui-ci pour la section des héros. Si je passe ici, Si je passe ici, c'est ce que j'ai construit hier alors que je le préparais. Voici la section des héros. Chaque page de destination doit comporter une section de héros accrocheuse composée de trois éléments principaux. Un titre résumant en quoi consiste la page Web et en quoi consiste votre site Web ou votre entreprise Une brève description expliquant le titre, les boutons d' appel à l'action Ce sont les trois éléments que vous devez avoir dans votre section héros. Ce que nous voulons faire, c'est d'abord avoir cette image de fond notre section héros, puis ajouter un titre avec ce texte et les boutons. Commençons par l' image d'arrière-plan de cette leçon. Pour en revenir, voici ce que nous avons. Et si j'ai sélectionné « Modifier le conteneur », cela signifie que nous modifierons l'intégralité du conteneur. Nous allons entrer dans le style, le type d' arrière-plan, sélectionner cela. Et sous image, nous allons télécharger une image à utiliser comme image de fond. Je dirais télécharger des fichiers fichiers sélectionnés seront redirigés vers ce dossier appelé Website Assets. Je vais le fournir sous forme de dossier zip afin que vous puissiez suivre ces images que j'ai préparées spécifiquement pour ce cours. Regardez juste en dessous de ce lecteur vidéo dans l'onglet Projets et ressources. Double-cliquez dessus et je veux utiliser cette image de section de héros. Il mesure 1920 x 108 pixels, c'est de la Full HD. Je vais double-cliquer dessus, et maintenant c'est actif. Je vais dire sélectionner. Maintenant, c'est ajouté. Tant que nous avons encore sélectionné le contenant, nous devons venir dire « répétez ». Aucune répétition, de sorte que cette image ne se répète pas. Nous voulons également le couvrir. Pour remplir le conteneur entier, nous devons revenir à la disposition intérieure, changer cette hauteur en VH et dire 100 Maintenant, il remplit tout l' espace comme ça. La deuxième chose que nous voulons faire est d'ajouter cette couche foncée car la nôtre est très lumineuse Tant que cette option est toujours sélectionnée, faisons coïncider le style, réduisons l'arrière-plan, puis développons l'arrière-plan, superposons, type d'arrière-plan, sélectionnons la couleur Cette fois, nous voulons le faire glisser vers le coin le plus sombre. Nous pouvons augmenter l'intensité du noir dans la mesure où nous le voulons. Je vais m'en tenir à 0,77 mais n'hésitez pas à jouer avec l'obscurité et à dire mise à jour Cela nous donne maintenant l' occasion d'en savoir plus sur ces modifications apportées à l'aperçu. Si nous voulons voir ce que nous avons, nous pouvons prévisualiser les modifications et cela ouvrira un nouvel onglet que nous pourrons voir. Nous avons maintenant une très belle image de fond sur notre section héros. Voici comment ajouter une image d' arrière-plan. Dans la leçon suivante, voyons comment ajouter ce texte. Je te verrai bientôt. 9. Section héros - Texte: Il est maintenant temps d'ajouter le texte de la section des héros. Commençons par le titre, Savoureux repas. Et je vais simplement les copier parce que j' aime bien le libellé que nous avons utilisé. Si je reviens ici, retournons voir notre rédacteur en chef. N'oubliez pas d' ajouter d'autres éléments. Tout ce que nous avons à faire est de cliquer sur cette icône là-haut pour que les panneaux s' affichent. Et nous voulons ajouter un titre. Je vais glisser-déposer un titre juste là. Comme vous pouvez le voir, il est aligné à gauche par défaut, nous pouvons donc l'aligner au milieu, comme ça. Nous pouvons maintenant modifier ce texte. Je veux utiliser les plats savoureux. Je vais le copier. Tasty Meals, double-cliquez ici et collez-le dedans. Maintenant, si je n'ai pas double-cliqué dessus et que je ne l'ai pas collé ici, c'est parce qu'il sera livré avec le formatage qu' il avait à l' endroit d'où vous l'avez copié que tu ne veux pas ? Laisse-moi juste annuler ça. Parce que, comme vous pouvez le voir, regardez tout le formatage, tout est du CSS et vous ne le voulez pas. Si je le fais, si vous le collez ici, il n'aura pas le formatage qu'il avait. Bien, la prochaine chose que nous voulons faire est d'ajouter un éditeur de texte qui est essentiellement un paragraphe. Comme vous pouvez le voir, cela est devenu un éditeur de texte car c'est l'élément actif. Tout d'abord, nous pouvons entrer dans le style et l'aligner au centre, comme ça. Maintenant, vous remarquerez qu'il est gris. Bien que nous soyons encore à la mode, nous pouvons dire que le texte est de couleur blanche. Permettez-moi de passer à autre chose. Un délicieux repas de classe mondiale. Permettez-moi de copier ce contrôle C, et je pourrai simplement le dupliquer. Tant que cette option est toujours sélectionnée, je peux cliquer avec le bouton droit sur Dupliquer. Et maintenant, nous en avons deux. Je peux le sélectionner, aller ici, le coller dedans, le mettre à jour. Maintenant, bien sûr, vous remarquerez ici, dans la section finale du héros, tout est aligné verticalement au milieu. La distance entre ici et ici est similaire à la distance entre ici et le bas. C'est ce que nous voulons dans ce système basé sur des conteneurs. Lorsque nous sélectionnons le conteneur lui-même et que nous passons à la mise en page, nous pouvons désormais justifier le contenu. Nous pouvons dire que nous le voulons au centre. Comme vous pouvez le constater, cette ligne se coupe au milieu. Actuellement, par défaut, cette valeur est définie en haut. Comme vous pouvez le constater, la longue ligne coupe en haut. Nous pouvons le placer en bas, au milieu ou en haut. Nous le voulons au milieu, juste comme ça. La prochaine chose que nous voulons faire est de mettre en forme notre texte. Tout d'abord, commençons par un style intérieur de classe mondiale. Passons à la typographie. Tout d'abord, passons à la couleur du texte, changez-la en blanc. Développez cette typographie. Au fait, si vous voulez vous débarrasser d'une fenêtre contextuelle comme celle-ci, cliquez n'importe où ici, typographie, nous voulons changer cela Je ne me souviens pas du nom de cette façade. Laisse-moi juste griffonner vers le bas. Est-ce que c'est ça. Ce n'est pas ça, mais on peut l'utiliser maintenant. Nous pouvons peut-être augmenter la taille jusqu'à ce point. Apportons quelques modifications aux plats savoureux. Sélectionnez ce style, remplacez-le par la couleur de votre choix. Je vais changer cette couleur dorée, qui est jaune quelque part. C'est le code. Maintenant, n'oubliez pas qu'une fois que vous avez défini ce code, il est toujours bon de rester cohérent. Chaque fois que vous utilisez cette couleur jaunâtre, vous suffit de copier ce code et de le coller dans cet autre paramètre Maintenant que nous avons décidé que c'est notre couleur de police pour le titre, peut-être quelque chose de moins criant quelque part Revenons maintenant à la taille de la typographie. Nous voulons également changer la famille de polices en Montserrat, ma police préférée Remplaçons le poids de police en noir. C'est une audace très audacieuse. Maintenant, augmentons encore la taille, peut-être jusqu'à ce point. Maintenant, vous remarquerez qu'il y a trop d'espace ici . Tant que cette option est toujours sélectionnée, nous pouvons passer à l'option avancée pour briser la marge. Et puis, en haut, réduisons la marge jusqu'à ce qu'elle soit quelque part. Faisons de même pour le bas, afin de rapprocher la description, de la mettre à jour. Passons en revue les modifications maintenant. C'est ce que nous avons. Regardons notre référence. Je pense que nous sommes assez proches de la référence. En fait, je l'aime encore plus. Voici comment ajouter le texte dans la leçon suivante. Voyons comment ajouter des boutons et leur donner du style. Je te verrai bientôt. 10. Section de héros - Buttons: Il est maintenant temps d'ajouter les boutons qui rentrent dans notre éditeur. Allons ici, sélectionnons un bouton et déposez-le juste là. Vous remarquerez maintenant, bien sûr, dans notre référence, qu'ils sont au milieu et côte à côte. Comment s'y prend-on ? Parce que si nous le dupliquons simplement, il se trouvera en dessous de ce bouton. N'oubliez pas qu'il s'agit d'un système basé sur un conteneur, nous pouvons utiliser un conteneur. L'avantage des conteneurs est que nous pouvons choisir la direction des éléments à l'intérieur du conteneur. Si je vais ici, que je sélectionne un conteneur et que je le place juste en un conteneur et que je le place juste dessous de ce texte dans le conteneur, nous pouvons maintenant utiliser ces deux éléments Ils me permettent de simplement faire glisser et de le mettre tous les deux dans ce conteneur. Si je le sélectionne, comme vous pouvez le voir il s'agit d'un conteneur Ed, ils sont tous les deux à l'intérieur. Maintenant que le conteneur actif ici sous direction, nous pouvons dire que nous ne voulons pas qu'il descende , la direction se fasse de gauche à droite tour est joué. Et n'oubliez pas que nous pouvons également justifier le contenu. Maintenant, nous pouvons les placer à gauche, à droite ou au centre. Regardez la longue ligne qui frappe juste au milieu. Si nous le sélectionnons, nous les avons placés au milieu. Maintenant allons-y et stylons-les. Si je sélectionne ce premier bouton, nous pouvons tout d'abord modifier ce qu'il dit. Qu'est-ce que ça dit ? Ouvrez le menu et commandez. Allons-y, disons ouvrir le menu et commander. Sélectionnons le second. Réservations de tables. Réservations de tables. Nous y voilà. En sélectionnant ce premier bouton, vous pouvez accéder au style. Nous voulons lui donner la couleur dorée. N'oubliez pas que nous voulons rester cohérents. Nous allons choisir cette couleur dorée ici en sélectionnant ce style de texte. Copiez ensuite ce contrôle ou cliquez simplement avec le bouton droit de la souris et copiez. Sélectionnez ensuite ce style Go inside et le contrôle de couleur des boutons V. Collez-le dedans. Et nous y voilà. Pour celui-ci, je pense que c'est blanc, noir avec une police noire. Je vais sélectionner ce style de bouton de couleur blanche. Et la police est noire. Couleur du texte noir, juste comme ça. Pour celui-ci, la couleur du texte est également le noir. Vous remarquerez maintenant qu'il y a un certain espacement entre le bord et le texte Nous avons également ces coins arrondis pour le rayon de la bordure. Pour les coins arrondis, nous pouvons simplement lui donner un rayon de bordure de 50, comme ça. Faisons de même pour ces 50. Augmentons maintenant cet espacement. Et tout est une question de rembourrage. Brisons ce lien sur la gauche, nous pouvons lui donner 60 sur la droite. 60, 20 du bas et 20 du haut. Répétons la même chose pour cela. Détruisons ça. Tout d'abord, donnons-lui la mise à jour 602 060.20 qui prévisualise les modifications et La section des héros commence maintenant à prendre forme. Dans la leçon suivante, ajoutons un en-tête. Il s'agit de l'en-tête. Il est composé du logo et la barre de navigation, ou barre de navigation. Je te verrai dans la prochaine leçon. 11. En-tête - Ajout du logo: Il est maintenant temps d'ajouter l' en-tête ou la section de navigation. La première chose que nous voulons faire est d'ajouter le logo qui renvoie à notre poste de travail. Allons-y et sortons d'ici. Maintenant, nous n'ajoutons pas l'en-tête ici même dans la page d'accueil que nous étions en train de modifier. Nous allons sortir d' ici car nous allons utiliser un plugin différent pour créer l'en-tête. Très bien, sortons maintenant. Et maintenant, nous sommes dans le tableau de bord. Passons aux plugins, ajoutons-en de nouveaux, disons simplement Elementor N'oubliez pas que nous disons que nous avons développeurs tiers qui ont créé superbes addons Elementor qui nous permettront d' utiliser des fonctionnalités géniales qui ne sont pas disponibles avec une version gratuite d'element L'un d'eux est l'élément Element adds. Comme vous pouvez le constater, il compte plus d' un million d'installations actives, ce qui témoigne de sa popularité. Nous allons également utiliser des effets d'en-tête persistants pour les éléments, mais nous y reviendrons. Tout d'abord, activons l' élément Skit element Add qui ajoute ce menu à cette liste Nous pouvons continuer et dire « header », « footer select ». Cela sera redirigé vers cet assistant de configuration. Ce que nous voulons, c'est sélectionner les paramètres avancés ici, car cela ajoute quelques widgets supplémentaires actuellement activés. Si nous optons pour le Basic, je dirai Avancé si je le souhaite, comme vous pouvez le voir désactivé, je dis Avancé, c' est automatiquement activé. Et il en va de même pour d'autres paramètres ici. Avancé. Ensuite, disons l' étape suivante, vous pouvez partager des données de diagnostic non sensibles. Ensuite, étape suivante, enregistrez ces modifications. Maintenant, tout va bien. Passons maintenant à l' intérieur du pied de page d'en-tête. Maintenant, comme vous pouvez le constater, aucun en-tête ou pied de page n'a été créé. Je vais dire ajouter un nouveau, je vais appeler ça. Vous pouvez simplement lui donner n'importe quel nom et vous n'avez pas à le taper comme je l'ai tapé Vous pouvez simplement dire mon en-tête. Cela n'a pas vraiment d'importance. J'aime bien cet étui camel. C'est un en-tête. Lorsque nous construisons le pied de page choisira le pied Mais pour le moment, il s'agit d'un en-tête et nous voulons qu'il soit visible sur l'ensemble du site. Ces autres options ne sont disponibles que dans la version premium. Supposons que nous voulions qu'il soit actif lorsque vous effectuez une maintenance. Et vous voulez que votre menu ne soit pas visible. Vous pouvez le désactiver, mais pour le moment, nous voulons qu'il soit disponible, visible sur le site Web. Une fois cela fait, nous pouvons directement commencer à le modifier. Mais je veux tout d'abord le sauvegarder, afin que vous puissiez le voir ici. Lorsque nous créons un autre pied ou un autre en-tête, il y aura une liste ici. Maintenant, nous pouvons continuer et dire « Modifier ». La même fenêtre contextuelle apparaîtra. Modifiez le contenu. Nous y voilà. Bien sûr, comme il s'agit du générateur élémentaire, il possède toujours le même constructeur, mais nous nous trouvons maintenant dans une zone complètement différente du site Web. Nous ne sommes pas sur la page d'accueil, nous sommes sur l'éditeur d'en-têtes. Allons-y maintenant et ajoutons une section. Cette fois, nous voulons ajouter cette structure contenant deux conteneurs. Il s'agit d'un conteneur extérieur avec deux conteneurs à l'intérieur car , comme vous pouvez le voir, nous avons la Loco sur la gauche et la barre de navigation sur la droite Ce sont deux conteneurs. Tout d'abord, nous pouvons sélectionner ce conteneur et dire que 50 % que nous voulions occuper, peut-être 30 % Assurez-vous que ce paramètre est défini sur un pourcentage et non sur un pourcentage de pixels ou pourcentage de 30 %. Cela signifie qu' ils devraient être 70 %, sélectionner ce pourcentage, 70 % qu'ils occupent 100 % de l'espace dont ils disposent. Sur ce, laissez-moi sélectionner ce signe ou simplement cliquer dessus pour faire apparaître les éléments et l'image. Je vais procéder au téléchargement depuis notre dossier Assets. Voici le logo que j'ai préparé. Ouvrez Select, et c'est parti. Vous n'avez pas besoin de définir ces paramètres manuellement en le sélectionnant , en les saisissant ici. Vous pouvez également simplement venir ici et faire glisser et redimensionner à votre guise. Mettez ça à jour. Passons en revue les modifications. Voilà notre logo, bien sûr, ça a l'air bizarre parce qu' ici c'est sur un fond sombre, mais ici c'est sur fond blanc en gros. Voici comment ajouter votre logo à votre site Web. Mais avant de partir, revenons ici et sélectionnons l'élément d'image qui est le logo ici. Nous voulons en faire un lien, URL personnalisée, et j'en ferai le lien de mon site Web. Maintenant, bien sûr, vous allez copier votre URL. Copiez-le et collez-le ici. Mettez-le à jour, prévisualisez les modifications. Nous y voilà. Maintenant, lorsque vous passez la souris dessus, il est cliquable Lorsque quelqu'un clique dessus, il est redirigé vers la page d'accueil. Mais nous n'avons pas défini notre page d'accueil. Nous avons été redirigés vers la page d'accueil par défaut fournie par Wordpress, ce qui m'amène à réaliser que nous avons oublié configurer cette page d'accueil très rapidement. Passons à cette page d' aperçu et passons aux outils du tableau de bord. Aucun paramètre La lecture de la page d'accueil affiche une page statique qui est la page d'accueil que nous avons créée, enregistrez les modifications. Maintenant, si je reviens ici et que je rafraîchis avec contrôle R, puis que je prévisualise les modifications. Si nous passons la souris dessus et que nous cliquons dessus, car nous avons dit que notre page d'accueil serait redirigée vers la page d'accueil que nous avons créée Et c'est ce que nous voulons. En gros, c'est ainsi que vous pouvez ajouter le logo et le rendre cliquable Il redirige quelqu'un vers son domicile. Dans la leçon suivante, voyons comment ajouter la barre de navigation. Je te verrai bientôt. 12. En-tête - Ajouter une barre de navigation: Il est maintenant temps d' ajouter la barre de navigation. en revenir à notre éditeur, laissez-moi simplement fermer cette barre de navigation et cette partie, il ne nous reste plus qu'à cela. Il s'agit de la page d'aperçu. en revenir, allons-y et disons ici, tapons nav. Vous remarquerez ici que nous avons un menu de navigation, mais il est verrouillé car il est fourni avec le panneau d'éléments Pro. Mais maintenant, l'une des raisons pour lesquelles nous avons ajouté Elements Kit Light est qu' il dispose d'un menu de navigation gratuit. C'est pourquoi j'ai mentionné que les plugins tiers créés pour Elementor sont vraiment géniaux Ils vous permettent d' accéder gratuitement à des fonctionnalités que vous auriez autrement dû payer pour utiliser Element. Je vais faire glisser le menu de navigation de ces éléments juste là et comme vous pouvez le voir rien n'apparaît ici car c'est l'élément actif. Cela passe au menu de navigation du kit Modifier les éléments car nous modifions cet élément. Mais vous remarquerez une chose dans le menu de sélection du contenu c'est qu'aucun menu n'est répertorié ici. Ce qui signifie que nous devons créer un menu. Permettez-moi simplement de le mettre à jour. Maintenant, je veux accéder à cette page d'aperçu. Cependant, cette fuite de droite ouvre le lien dans un nouvel onglet car je veux le laisser intact et accéder au tableau de bord afin que nous puissions créer un menu. Ensuite, nous viendrons afficher ce menu ici. en revenir aux menus d' apparence du tableau de bord, nous pouvons lui donner un nom, mon menu, juste comme ça. Faisons-en le menu principal, Créer un menu. En gros, le menu est une liste des éléments que vous souhaitez afficher sous forme de barre A. Il s'agit des éléments du menu, de la page d'accueil, de la galerie et du contact. En substance, ce sont des pages Web qui nous indiquent que nous devons créer quelques pages comme vous pouvez le voir ici, permettez-moi de terminer ceci. Le gestionnaire de mots de passe, comme vous pouvez le voir ici, ajoute des éléments de menu. Les éléments de menu peuvent être des pages Web, je pense qu'ils peuvent également être des articles. Par exemple, si vous avez un billet de blog ou un article, vous pouvez en faire un élément de menu. Il peut s'agir de liens personnalisés. Il peut s'agir de catégories , comme vous le souhaitez, mais nous voulons utiliser les pages comme éléments de menu. Laissez-moi le sélectionner pour le moment. Ajouter au menu. Maintenant, comme vous pouvez le voir, nous l' avons ajouté au menu. Laissez-moi enregistrer le menu. Maintenant, si nous revenons ici et que nous cliquons avec le bouton droit sur Recharger. Rechargez cette page, cet éditeur. Si je sélectionne l'élément de navigation, ouvrez à nouveau ce menu déroulant. Maintenant, nous avons mon menu. Parce que nous avons créé un menu. Maintenant, il n'affiche que la page d'accueil, car nous n'avons qu'un seul élément de menu. Mettons-le à jour. Pour y revenir, nous devons ajouter d'autres éléments de menu. Je vais entrer dans les pages, souris dessus, puis ajouter une nouvelle page Je vais juste cliquer avec le bouton droit sur Ouvrir le lien dans un nouvel onglet. Ouvrez le lien dans un nouvel onglet. Ouvrez le lien dans un nouvel onglet. Il s'agit des trois onglets du créateur de page. Je vais appeler ça à propos de la page. Pour l'instant, allons-y et publions sans effectuer de configuration. Voici le ph de la galerie. Allons ici et disons que les contacts publient. Maintenant, si je ferme toutes ces nouvelles pages et que je viens ici pour les rafraîchir. Nous avons maintenant trois autres éléments que nous pouvons tous visualiser. Je vais ajouter ces trois éléments. Ajouter au menu. Maintenant, nous en avons trois, vous pouvez faire glisser des éléments comme ça et enregistrer le menu. Disons ce menu, fermez-le. Maintenant, si nous revenons à l' éditeur et contrôlons R, comme vous pouvez le voir, nous avons maintenant tous ces éléments de menu. Maintenant, ils doivent être sur la droite. Lorsque cette option est sélectionnée, nous pouvons dire position horizontale du menu, n'est-ce pas ? Mets-le à jour. Passons en revue les modifications. Allons-y. Maintenant, une chose que vous remarquerez à ce sujet, c'est qu'ils sont très espacés et qu'ils semblent être plus proches des bords en revenir, ce que nous pouvons faire, c'est ne pas oublier que nous avons affaire à des conteneurs. Maintenant, si nous sélectionnons le contenant extérieur qui les contient et disons pleine largeur ou si nous le faisons en pourcentage, 80 %, bien sûr, donnons également les bons pourcentages à ces deux conteneurs En sélectionnant cette option, donnons-lui peut-être 25 %. Vous devriez occuper 25 % de l'espace, et cela devrait occuper les 75 % restants, ce qui pousse le menu jusqu'au bout Mais maintenant c'est trop gros. Je vais sélectionner l' élément d'image lui-même, sélectionnez-le. Cela passe à Modifier l'image, et maintenant, sous style, nous pouvons lui donner une largeur de 50 % de cet espace, 50 %. Pour en revenir au contenu, mettons-lui une mise à jour de l'alignement à gauche. Passons en revue les modifications. Allons-y. Bien, revenons maintenant à l'intérieur des pages, nous voulons juste voir à quoi ressemble la page d'accueil. Je vais donc sélectionner Afficher, et c'est ce que nous avons. Maintenant, bien sûr, vous remarquerez qu'ici, sur notre site Web de référence, nous n'avons pas ce fond blanc laid. Comment obtenir ce fond transparent ? Lorsque vous le faites défiler, il devient noir. Comment y parvenir ? C'est ce que nous allons faire dans la prochaine leçon. Je te verrai bientôt. 13. En-tête collant transparent: Il est maintenant temps de rendre notre en-tête collant et transparent. Tout comme ici. heure actuelle, ça a l'air génial sans ce fond blanc laid. Voyons comment procéder. en revenir à notre espace de travail, passons au tableau de bord que nous voulons installer. Fermez tout. Très bien, laissez-moi entrer maintenant, laissez-moi passer au tableau de bord. Ajoutez de nouveaux plugins, ajoutez les nouveaux que nous voulons installer. Encore une fois, tapez simplement Elementor. Il apportera tous les ajouts liés à Elementor. Celui dont nous avons besoin, ce sont les effets d'en-tête adhésifs pour Elementor Comme son nom l'indique, il fournit des effets d'en-tête persistants pour vos en-têtes activent cela, maintenant il est actif Revenons maintenant au pied de page d'en-tête du kit Elements, nous avons notre édition d'en-tête avec Elementor Si je sélectionne le conteneur qui contient l'en-tête sélectionné, passez à Avancé. Si vous ne parvenez pas à sélectionner quoi que ce soit ici, oubliez pas que vous pouvez toujours appuyer sur la touche Ctrl pour faire apparaître le navigateur. Vous pouvez désormais le sélectionner ici Je peux sélectionner ce conteneur simplement en le sélectionnant. Cela change pour modifier le conteneur. Passons aux effets d' en-tête adhésifs. Activons cela. Fermons ce navigateur, mettons-le à jour. Très bien, examinons simplement les modifications à ce sujet, mais pas les modifications. Je souhaite sélectionner. Tout d'abord, vous remarquerez qu'ils ont été poussés à bout. Nous allons régler ce problème. Je savais que cela allait se produire. Maintenant, si nous choisissons ceci, si nous cliquons dessus, comme vous pouvez le voir, nous n'avons toujours pas réglé le problème. Si je reviens ici, nous voulons parler de mise à jour transparente de l'en-tête qui prévisualise les modifications. Les modifications sont maintenant effectuées. Si nous revenons à la page d'accueil, nous avons maintenant notre en-tête sans ce fond blanc, mais nous avons quelques problèmes ici. Tout d'abord, elles ont été poussées à l'extrême. Autre chose, si nous rechargeons cette page, vous remarquerez un arrière-plan blanc moche avant le chargement de ces magnifiques arrière-plans Encore une fois, sélectionnons-le. J'espère que vous avez vu que ce n'est pas ce que nous voulons, nous voulons quelque chose comme ça. Passons à notre référence. Si je recharge cette page, très beau et subtil rechargement de la Encore une fois, c'est exactement ce que nous recherchons. en revenir, la première chose que nous voulons faire est de régler ce problème ici. Allons-y, sélectionnons ce menu, This nava go to style. Nous voulons tout d'abord donner à ces éléments de menu la bonne couleur. Ils doivent accéder au style des éléments de menu, à la réduction, à l'emballage du menu, à l'élément de style des éléments de menu Développer La couleur du texte doit être blanche. Nous ne pouvons pas le voir à cause du fond blanc au survol. Nous voulons qu'il soit doré. J'espère que nous le pourrons. Si nous voulons modifier cette page dès maintenant, nous pouvons simplement aller ici. Toute page que vous avez créée avec Elementor peut être modifiée en allant ici S'il s'agit de l'édition de page, cliquez sur Modifier avec Elementor S'il s'agit de l'en-tête ou du pied de page, cliquez sur Modifier mon en-tête ou pied de page avec Si nous l'ouvrons, c'est parce que nous voulons obtenir cette couleur dorée. Je vais sélectionner cette copie de style de texte qui peut même la fermer. Maintenant, en revenant ici, souvenez-vous que nous avions sélectionné la barre de navigation. Nous sommes passés au style normal des éléments de menu. Il est blanc au survol. Il doit être de couleur dorée au survol. Maintenant, est-ce que cette couleur est dorée lorsqu'elle est active ? Chaque fois que la page est active, elle doit également être de cette couleur dorée. Mets-le à jour. Maintenant, si nous prévisualisons cela, nous ne voulons bien sûr pas prévisualiser la barre de menu, nous voulons aller sur la page d'accueil pour la voir comme ça. Maintenant, ça a l'air bien. L'autre point, c'est que nous devons les pousser vers l'intérieur. Souvenez-vous maintenant du moment où nous avons défini la transparence sur. Actif. Lorsque nous activons la transparence, celles-ci sont automatiquement mises de côté. Maintenant, ce que nous pouvons faire, essayons de sélectionner. Comme vous pouvez le voir, il est à 80 % mais il touche toujours 100 % de l'écran. Ce que nous pouvons faire, c'est ajouter un nouveau conteneur, ajouter un conteneur ici sur le côté. Nous avons maintenant trois conteneurs alignés côte à côte, mais nous voulons faire glisser ces deux conteneurs dans cet autre conteneur, vers ce nouveau conteneur. Les deux se trouvent maintenant dans le nouveau conteneur que nous venons d'ajouter. Maintenant, sélectionnons le nouveau conteneur et changeons la direction de gauche à droite. Maintenant c'est de gauche à droite, mais maintenant c'est à 100 %. Nous voulons qu'il soit 80 % en pourcentage, 80 % en largeur. Tout d'abord, disons la pleine largeur, puis le pourcentage 80 % Comme vous pouvez voir maintenant, il occupe 80 % de la largeur. Bien sûr, nous pouvons maintenant l'aligner dans ce conteneur extérieur en sélectionnant le conteneur extérieur, en allant ici et en alignant tout ce qui se trouve à l'intérieur vers le centre, comme ça Maintenant, c'est au centre du récipient extérieur. J'espère que vous comprenez maintenant que les contenants occupent toujours les pourcentages que nous leur avons donnés. Et c'est exactement ce dont nous avions besoin. Mise à jour de cet aperçu, des modifications. Maintenant, vous pouvez voir, bien situé, en allant sur la page d'accueil, exactement ce dont nous avons besoin. Mais maintenant, encore un problème. Rechargez cette page. Il y a toujours ce problème avec ce fond blanc. Ce que nous pouvons faire, c'est modifier cette modification d'arrière-plan avec Elementor sur la page d'accueil elle-même, et non sur l'en-tête Très bien, sélectionnons ce conteneur extérieur. Et comme vous pouvez le constater, je n'arrive pas à le sélectionner. Si j'appuie sur la touche Ctrl, je vais faire apparaître le navigateur. Maintenant, je peux sélectionner le conteneur. Il est maintenant sélectionné. Accédez à Effets de mouvement avancés. Nous voulons qu'elle s'estompe. Juste comme ça. Mets-le à jour. Passons maintenant en revue les modifications. C'est exactement ce dont nous avions besoin une fois de plus. Maintenant, chargeons ceci. Exactement. Cela nous amène à la fin de la liste des effets de la barre de navigation. Nous en avons terminé avec la section des héros. La prochaine chose que nous voulons faire est commencer à travailler sur la partie du corps. Je te verrai bientôt. 14. Fond d'en-tête collant: Il est maintenant temps de travailler sur la section du corps, passant à notre site Web de référence ici, comme vous pouvez le voir, nous avons cette belle image, du texte du titre, un bouton de description. Cette section à trois colonnes. En gros, ce que nous voulons faire, c'est d'abord créer ces domaines de base. Ensuite, dans la prochaine leçon, nous travaillerons sur ce menu. Dans la leçon qui suit, nous allons créer la galerie. Allons-y et commençons par les éléments de base, comme dans cette section. Pour en revenir à notre espace de travail, nous en avons terminé avec un en-tête. Mais avant de partir, souvenez-vous que si vous regardez ceci, il a un fond noir. Lorsque nous commençons à faire défiler la page, regardez le logo, il C'est quelque chose que j' ai oublié de te montrer. Si nous sélectionnons le conteneur ici et que nous accédons à Advanced. Si nous sélectionnons le conteneur ici et que nous allons dans Avancé, passons aux effets d' en-tête collants, couleur d' arrière-plan, à la couleur à laquelle nous voulons passer. Une fois le défilement commencé, nous voulons qu'il soit noir Nous voulons réduire le logo. Réduisons également l' en-tête à 70 % de sa taille, car si l'on regarde notre référence ici, il rétrécit Réduisons-le à 70 % et nous pouvons réduire le logo à peut-être 60 % pour le mettre à jour. Voyons si ce que nous avons ici doit être chargé. OK, maintenant nous n'avons plus assez de contenu ici pour faire défiler la page. Allons-y et modifions cette page avec Elementor afin de voir si nous pouvons faire défiler la page plus loin faisant défiler l'écran vers le bas, ajoutons un conteneur à double colonne alors qu'il est Passons à Advanced. Décomposons cette marge ici et donnons-lui une marge supérieure de 100. Nous pouvons donc créer un espace entre cette section et la section 100 du héros. Maintenant que nous avons cet espace, mettez-le à jour. Maintenant, si nous prévisualisons cela, nous pouvons faire défiler la page. Comme vous pouvez le constater, c'est ce que nous avons. Maintenant, cela n'est pas correctement aligné. Revenons aux paramètres d' en-tête. Nous allons sélectionner le conteneur qui contient le logo, ce conteneur ici. Alignons-le verticalement au centre comme vous l'avez vu bouger. Faisons de même pour la barre de navigation. Alignons au centre, comme dans cette mise à jour. Maintenant, si nous chargeons la page d' accueil et que nous la faisons défiler. Comme vous pouvez le constater, nous avons un bel en-tête autocollant. Maintenant que cela est fait, je pense que nous pouvons appeler cela une leçon et passer à la leçon suivante, où nous allons maintenant continuer à travailler sur les sections de base. Je vais voir. 15. Section du corps - Base 1: Vous vous souviendrez que dans la leçon précédente, nous avons ajouté une section et lui avons accordé une marge de 100. C'est de là que nous partons. Je dirais modifier avec Elementor, mais avant de modifier avec Elementor, je veux juste fermer cet en-tête Permettez-moi de passer au tableau de bord. Laissons-le là. Passons maintenant à cet onglet. Fermez celui-ci. Modifiez avec Elementor. Allons-y. Voici la section que nous avons ajoutée sur la gauche. Je veux me débarrasser de ce navigateur. Il y a un outil pratique que j'ai oublié d'activer et que je trouve toujours très utile en cliquant sur ce menu de hamburgers. Passons aux préférences utilisateur pour modifier les poignées. Maintenant, lorsque je survole ces coins, vous remarquerez que rien ne change Mais si nous activons ces poignées d'édition, cela fait apparaître des outils très pratiques qui accélèrent votre travail beaucoup plus rapidement. Au lieu de cliquer dessus avec le bouton droit de la souris et de supprimer, je peux simplement le survoler et le supprimer immédiatement Et faites-le, cela peut sembler peu, mais une fois que vous aurez commencé à utiliser l' élément encore et encore, vous vous rendrez compte que c'est très utile Je vais cliquer ici et dire que je veux faire glisser un élément d'image ici dedans. Nous voulons manger sainement. Au lieu d'ajouter un nouvel élément de titre, je peux simplement le dupliquer en le survolant. Et puis ça. Ensuite, faites-le glisser et déposez-le dedans. Laisse-moi juste le copier. Bien sûr, vous allez taper parce que vous n'avez nulle part où le copier-coller. Maintenant, bien sûr, c'est trop gros. Tant que c'est encore sélectionné, je vais passer au style. Tout d'abord, remplacez-le par la couleur foncée de votre choix. Disons 111, c'est bon. Cliquez ici pour vous en débarrasser, puis, typographie. Utilisons notre quelque part là-bas. Passons au contenu à gauche, alignons-le, passons à la typographie stylistique Réduisez la hauteur de la ligne, elle n'est pas trop espacée. Vous remarquerez maintenant que celui-ci a les mêmes paramètres de marge que nous avions à ce sujet. N'oubliez pas que nous avons réduit la marge en haut et en bas alors que cette option était encore sélectionnée. Passons au niveau avancé. Mettons-les à zéro, juste comme ça. Une autre chose que nous voulons faire est de sélectionner ce conteneur pour la justification. Mettons-le verticalement au centre. Allons-y et sélectionnons cet élément d'image. Mettons-y une belle image. Nous avons utilisé une image verticale. C'est ça. Oui, je vais double-cliquer sur l'image 2. Bien entendu, vous pouvez utiliser l'image que vous souhaitez utiliser. Sélectionnez-le. Nous y voilà. Maintenant, cela a des angles vifs et des coins arrondis. Bien que cette option soit toujours sélectionnée, je vais passer au style du rayon de bordure 20, comme ça. Cliquons également dessus et faisons glisser un éditeur de texte ou un paragraphe sous le titre. Bien sûr, n'oubliez pas que nous avons besoin d'un bouton ici. Au lieu de refaire un bouton et de le styliser, au lieu d'ajouter un bouton ici et de le styliser à nouveau, nous pouvons simplement venir ici, le dupliquer et le faire glisser ici Ensuite, tant qu'il est toujours sélectionné, nous pouvons le modifier pour en savoir plus, le mettre à jour. Maintenant, si vous voulez un peu plus espacement entre l' image et le texte, il vous suffit de sélectionner le conteneur contenant les deux conteneurs contenant le contenu différent, ce conteneur et les espaces, on peut dire 50, soit un écart de 50 entre ces deux conteneurs Mets-le à jour. Passons en revue les modifications. Nous y voilà. Cela commence à prendre forme. La prochaine partie que nous allons créer est ce Y S. C'est quelque chose que nous pouvons faire très rapidement. Allons ici. Bien sûr, nous pouvons simplement le dupliquer car il y a déjà une belle marge en haut. Nous ne voulons pas recommencer à régler. Element vous permet de ne pas vous répéter. Une fois que vous avez créé un élément, vous pouvez simplement continuer à le dupliquer et à le modifier Maintenant que nous l'avons dupliqué, il a cette marge. Mais bon, débarrassons-nous de ce conteneur d'images. Maintenant, il ne nous reste plus que ça. Bien sûr, nous pouvons le faire à 100 % et la mise en page à 100 % Comme vous pouvez le constater, elle est plus petite. En sélectionnant ce titre, mettons-le d'abord au centre. Passons à la typographie. Donnons-lui peut-être quelque chose comme 50. Revenez ensuite au contenu. Pourquoi ? Nous allons sélectionner cet éditeur de texte. Accédez au style middle align. même cas s'applique au bouton, sélectionnez-le et à l'alignement du contenu. Attendez, nous n'avons pas de bouton ici. Nous avons la section à trois colonnes. Fermez ça. Tout d' abord, mettons cela à jour. Ici. Nous pouvons ajouter un conteneur juste en dessous de l'éditeur de texte. C'est un contenant à l'intérieur du conteneur. Nous pouvons ajouter trois autres conteneurs, soit un conteneur à l'intérieur du conteneur. Nous pouvons ajouter une boîte d'icônes comme ça. Maintenant, avant de le styliser, je veux juste vous montrer pourquoi nous avons ajouté cette le curseur sur le conteneur qui boîte à icônes en passant le curseur sur le conteneur qui le contient Répliquons cela une fois de plus. Nous avons maintenant trois conteneurs à l'intérieur de ce conteneur. Tout ce que nous avons à faire est de sélectionner le conteneur qui les contient et changer la direction de gauche à droite comme ça. Mais maintenant, ce que nous voulons, c'est le sélectionner et le styliser. Entrez dans le style. Tout d'abord, nous voulons que la couleur soit, je n'ai pas sélectionné le jaune. Je vais sélectionner cette copie de style de bouton. Sélectionnez cette icône de style, puis collez-la au survol. Nous voulons qu'il soit noir. Disons que c'était 111, juste comme ça. Nous pouvons également maintenant passer à la couleur du titre de la typographie, gardons cette couleur Nous pouvons également ajouter l' espacement entre les deux. Et nous y voilà. Maintenant, c'est à vous d'en modifier le contenu. Nous pouvons changer cette icône en allant dans Contenu, en la sélectionnant. Alors peut-être choisir que devons-nous choisir ? Insérer. Nous pouvons maintenant les supprimer, puis les dupliquer deux fois, les mettre à jour. Vous pouvez maintenant en venir à cela et changer cette icône pour peut-être quelque chose d'autre, comme du poivre, et économiser de l'argent ou quelque chose du genre. Mettre à jour. Prévisualisez les modifications. Voilà, nous l'avons. Je pense que nous allons nous arrêter là pour cette leçon, juste pour ne pas la prolonger trop longtemps. Et nous allons continuer dans la prochaine leçon. Je te verrai bientôt. 16. Section du corps - De base 2: Bon retour. Il est maintenant temps de reprendre là où nous nous sommes arrêtés. N'oubliez pas que si nous passons à ici, nous sommes en train de créer cette section. C'est très simple. À l'heure actuelle, vous devez être capable de le créer, mais allons-y. en revenir à notre éditeur de, dupliquons cette section juste pour nous assurer d'avoir une marge uniforme en haut. Vous remarquerez ici que nous avons un joli rembourrage en haut et en bas Ajoutons un peu de rembourrage ici, en sélectionnant ce conteneur de manière avancée Décomposons ce rembourrage par défaut en haut. Donnons-lui 50, maintenant donnons-lui 100, bien sûr. Supprimons tout d'abord cela, revenant en arrière et en sélectionnant cette section, encore une fois pour le bas. Donnons-lui également 100 alors qu'il est encore sélectionné, passons au style, au type d' arrière-plan, donnons-lui une couleur, peut-être du gris comme ça. Qu'est-ce qu'on a d'autre ? Nous avons également ce texte. N'oubliez pas que nous ne voulons pas nous répéter. Nous pouvons simplement le dupliquer, faire glisser vers le bas et le placer juste au-dessus de Y S. Maintenant, tant qu'il est toujours sélectionné, je vais passer à la marge avancée. Réduisez la marge inférieure comme ça. Cette journée est délicieuse. Copiez-le pendant qu'il est encore sélectionné. Contenu, collez cette délicieuse pâte. Copions également ceci. Contrôle de la couleur jaune ou de la couleur dorée C. Sélectionnez la couleur de texte de ce style, collez-la dedans. Cela signifie des repas sains pour tous. Copiez-le, sélectionnez ce Y S. Collez-le dedans. C'est le Lorem ipsum. Donc c'est bon. Je pense que nos rubriques sont un peu trop grandes. Si je ne me trompe pas, réduisons-les à environ 40. Disons maintenant 45. 45, c'est bien. Sélectionnez également cette option. Revenez à 45, je crois. Maintenant, tout va bien. Mettez-le à jour dans la leçon suivante, nous allons travailler sur le menu. Nous pouvons afficher ainsi, mais avant d'y arriver, créons cette section car elle ressemble beaucoup à celle-ci. La seule chose que nous devons faire est d'ajouter cette image de fond pour revenir ici. Répliquons cela. Allons-y et sélectionnons pendant que c'est encore sélectionné, passer au style. Cette fois, ce n'est pas de la couleur, c'est l'image à laquelle nous ajoutons les fichiers de téléchargement d'images spaghettis Voyons voir, où est cette image ? Nous pouvons ajouter n'importe quelle image. Je pense que c'est ça, image 35. Nous y voilà. Sélectionnez-le. Génial Maintenant, nous pouvons venir ici pour positionner et dire en haut au centre. Nous pouvons dire qu'il n'y aura pas de répétition. Et nous pouvons le couvrir comme ça. Mais une autre chose que je ne vous ai pas montrée, c'est que lorsque vous faites défiler l'image, vous pouvez le corriger en un seul endroit de sorte que lorsque quelqu'un fait défiler l'image, il fasse défiler l'image C'est un bel effet. J'ai oublié de mettre ce site de référence. Modifions-le également en blanc, ce texte en blanc également. Mets-le à jour. Enfin, sélectionnons à nouveau le conteneur extérieur, passons à la superposition d' arrière-plan et changeons la couleur en noir Augmentons l'intensité pour faire ressortir le texte. Mets-le à jour. Nous pouvons maintenant ajouter un autre appel à l'action. Dupliquez cette copie, faites-la glisser. Déposons-le juste là, aligné au centre. Cela dit « réservations de tables », mettez-le à jour. Passons en revue les modifications. Faire défiler la page vers le bas. Nous y voilà. Comme vous pouvez le constater, il possède ce joli défilement qui affiche l'image entière au fur et à mesure que vous la parcourez. que j'aime beaucoup maintenant, pour en revenir à notre référence, comme je l'ai mentionné dans la section suivante, nous allons créer ceci. Dans la leçon. Ensuite, nous allons créer la galerie avant de passer aux autres parties. Je te verrai dans la prochaine leçon. N'allez nulle part. 17. Polices globales: Dans cette leçon, nous étions censés travailler sur ce menu. Mais je me souviens que nous n'avons pas défini les polices globales. Maintenant, regardez ce que nous avons ici sur notre site Web. C'est ce que nous examinons, la police que nous avons sur le site de référence. C'est une Montserrat, c'est la police que je préfère pour les Maintenant, celle que nous sommes en train de créer possède la police Roboto par défaut qui est fournie avec l'élément Nous voulons remplacer cela par Montserrat. En revenant ici, nous pouvons passer en revue chaque élément. Modification de la police en Monterat. En sélectionnant l'élément, en accédant à la typographie de style, tapant maintenant monat, et c' est devenu Montserrat Mais ce serait trop fastidieux car cela implique de recommencer et de répéter la même chose Mais heureusement, Elementor fournit un moyen de définir polices globales. Une fois que vous les avez définies, chaque fois que vous ajoutez un élément basé sur du texte, la police que vous avez définie sera indiquée dans les paramètres de ce site de menu de hamburgers Comme vous pouvez le constater, nous avons des couleurs et des polices globales. Je peux définir la police principale comme la police que je veux. Cela a changé pour Montserrat. Cliquez n'importe où là-dedans. Je ferai de même pour chacun d'entre eux parce que j'aime qu'ils soient Montserrat Cliquez ici, enfin, Montserrat Mettons-le à jour. Revenons à l'éditeur. Désormais, tous les fonds appartiennent à Montserrat, l'exception de ces fonds élégants que nous avons définis explicitement Comme vous pouvez le constater, tous nos fonds sont désormais monerat. Si nous ajoutons un éditeur de texte par exemple ici, ce sera toujours Montserrat Permettez-moi de le supprimer. Il s'agissait simplement de définir les fonds mondiaux et vous savez maintenant comment procéder. Je vous verrai dans la prochaine leçon lorsque nous créerons ce menu. À bientôt. 18. Menu de nourriture: Il est maintenant temps de créer un menu alimentaire, comme nous l'avons fait ici. Ce menu alimentaire a uniquement pour but de présenter certains des aliments que vous avez. Parce que n'oubliez pas que lorsqu'un client est dans votre restaurant et qu'il souhaite réellement commander, il clique sur ce bouton pour voir le menu lui-même. Attendons de voir, c'est parti. Il s'agit du menu sur lequel ils peuvent cliquer pour passer leur commande. C'est à des fins d'affichage, c'est pour l'esthétique de votre site Web. Allons-y et faisons-le. Ce que nous devons faire, c'est installer un plug in. Passons aux plugins. Ajoutez-en un nouveau. Je vais chercher le menu. Menu alimentaire. Nous y allons par Radius Theme. Il compte actuellement 3 000 installations actives. Il existe de nombreuses options ici et vous pouvez jouer avec chacune d'entre elles. Mais celui que j'ai aimé est ce thème Radius. le but précis que je viens de décrire, afficher un joli menu de quatre éléments. Allons-y et installons. Maintenant, comme vous pouvez le voir, il est compatible avec cette version de la presse. Certains d'entre eux n'ont pas été testés. Je vais procéder et l'activer. Voilà, quelques descriptions. Mais ce que nous voulons faire, c'est passer à tous les aliments. Bien sûr, nous n' avons pas de nourriture, nous pouvons donc ajouter de la nourriture ou du repas. Revenons au site ici. Je dirais du poulet grillé. Et vous pouvez en donner une longue description ici, mais nous n'avons pas besoin de mettre cette longue description ici car nous n'allons pas utiliser ce plug-in pour passer nos commandes. Nous allons utiliser un plugin différent pour le système de commande et le système de menu proprement dit. Ce que nous pouvons faire ici, c'est fournir une brève description indiquant que ce poulet est suffisant pour deux personnes. Placez-le ici. nous n' utilisons pas ce plugin pour le système de commande, c'est parce que, par exemple, sur ce site de référence, si nous cliquons sur ce poulet grillé pour être redirigé vers la page où nous sommes censés passer notre commande, c'est moche. Regardez ça, je ne sais même pas comment le modifier, car il n'est pas créé avec Elementor Nous devons le modifier avec Wordpress, Gutenberg. Et nous ne voulons pas le faire. Nous voulons ce menu qui se charge ici, où que se trouve le bouton. Nous n'avons pas besoin de cette description, mais nous avons besoin de cette courte description à des fins visuelles. Allons-y et classons-le dans une catégorie. Ajoutez une nouvelle catégorie. Nous pouvons appeler ce déjeuner ou n'importe quelle catégorie que vous voulez qu'il soit. Une fois que vous l'avez tapé , appuyez sur Entrée, nous pouvons ajouter une fonctionnalité Cette image, ici, poulet grillé. Je pense que c'est ça. Définissez l'image en vedette. Maintenant, publions-le. Je vais créer trois autres aliments. Je vais accélérer cette section, ajouter plus de nourriture. Comme vous pouvez le constater, j'ai créé trois exemples de repas et nous voulons maintenant les afficher sur notre page ici. Nous les affichons juste en dessous de cette section grise. Laisse-moi me lever, laisse-moi dupliquer celui-ci, juste comme ça. Ensuite, faites-le glisser et placez-le juste en dessous. Comme vous pouvez le voir, il y a une description textuelle, notre menu, je vais le copier. Ces modifications apportées à notre menu, je les supprimerai. En fait, juste comme ça. Maintenant, nous allons laisser ce conteneur ici. Maintenant, revenons au générateur de shortcode , ajoutons un nouveau message. Donnons-lui maintenant un nom de menu de page d' accueil qui. Donnons-lui également une mise en page, sélectionnez le type de mise en page que nous voulons lui donner. Allons-y avec ça. Allons-y catégorie par catégorie. Oui, allons-y avec cette grille Mason maintenant. Vous pouvez jouer avec tous ces paramètres, mais le plus important est de savoir comment les afficher. Ensuite, une fois que vous l' avez affiché, vous pouvez revenir et modifier quelques éléments ici. Retournez à la page, rechargez-la et voyez comment elle a été affectée par les modifications apportées à ces paramètres de mise en page Allons-y et publions. Maintenant qu'il est publié, choisissons cette copie abrégée. Passons au front end. Ici, je vais sélectionner un code court, un élément de code court, et le faire glisser dans le conteneur. Ici, je vais coller le code abrégé que nous venons de copier. Mets-le à jour. Appliquons le défilement vers le bas. Prévisualisons les modifications. En faisant défiler l'écran vers le bas, voici à quoi ressemble notre menu. Comme vous pouvez le voir, c'est différent de ce que j'ai ici car j'ai sélectionné une mise en page différente. Laisse-moi sélectionner ça. Mets-le à jour. Si vous souhaitez mettre à jour cette page, sélectionnez-la. Appliquez ensuite les modifications que nous avons apportées ici dans le backend, faisant défiler l'écran vers le bas. Maintenant, cela ressemble à ce que Il continuera à sembler en cours de chargement lorsque vous serez sur cette page d'édition. Mais lorsque vous prévisualisez les modifications, elles auront pris effet. Très bien, alors allons-y. Maintenant, bien sûr, vous remarquerez que sur notre site de référence, nous avons ce menu. Nous pouvons simplement le dupliquer. Descendons et mettons ça juste en dessous. Maintenant, nous le voulons juste en dessous. Très bien, faisons défiler la page vers le haut. Mettons-le ici pour le moment. Ensuite, je veux porter ce contenant et le placer au-dessus du bouton. Il est parfois un peu difficile de placer les éléments là où vous voulez les placer. En sélectionnant ce bouton, je peux le placer au centre de la distance, c'est trop petit. Lorsque cette option est sélectionnée, accédez à la section Marge avancée, en haut de la page. Disons 50. Ensuite, modifions également le contenu du menu ouvert. Ouvrez le menu, ne vous inquiétez pas pour ces boutons, nous allons les remplacer. Ce ne sont que des espaces réservés, car nous allons obtenir ces boutons à partir du plug-in que nous allons utiliser pour le système de menu lui-même Ce ne sont que des espaces réservés, prévisualisez les modifications en défilant vers le bas. Nous y voilà. Nous avons un bon menu. Disons également que, comme vous pouvez le voir ici, ce plat de canyon est un peu plus court que celui-ci. Je pense que cela a à voir avec l'image que nous avons utilisée. Changeons cette image. Si vous utilisez des images exactement de la même taille, elles seront de la même taille que je l'ai fait ici. Toutes ces images sont quadrillées. Je les prépare sous forme d' images carrées de même taille. Si l'une des images que vous téléchargez est plus courte que l'autre, c'est à ce moment-là que vous aurez ces artefacts comme celui-ci. Permettez-moi de remplacer cette image un autre type d'image de même taille. Comme vous pouvez le voir, 1234. Voici les images que j'ai utilisées. Permettez-moi de sélectionner cette image sélectionnée, de la mettre à jour. Actualisons simplement cette page. Rafraîchissez-le. Nous y voilà. Maintenant, c'est pareil, assurez-vous que vos images sont exactement de la même taille afin qu'elles puissent être affichées sans cette différence de taille. Voici comment créer ce menu d'affichage. Mais encore une chose que je veux faire est de désactiver ce lien. Je crois que j'ai vu, je pense que c'est quelque part ici. Lien détaillé vers la page détaillée. Désactive ça. Mettons-le à jour. Maintenant. Si nous rechargeons cette page, elle ne contient pas de lien C'est utile uniquement à des fins d'affichage, car la fonctionnalité réelle se trouvera sur ce bouton. C'est ainsi que l'on crée ce menu. C'était un peu plus long que le reste des leçons, mais c'était un vrai défi pour nous. Dans la leçon suivante, créons cette galerie ici avant de passer à la partie suivante. Je te verrai bientôt. 19. Galerie: Voyons maintenant comment créer cette galerie ici. Si vous avez suivi l'un de mes cours précédents, vous savez bien sûr comment créer cette galerie. Mais si vous recherchez une remise à niveau, allons-y Passons à notre page, nous y voilà. Nous voulons retourner voir le rédacteur en chef. Allons-y et dupliquons cette section. Faisons-le glisser et placez-le sous cette section d'arrière-plan de l'image. Bien sûr, débarrassons-nous de ce menu. Laissons ce bouton là, car ici nous avons un bouton pour ouvrir la galerie. Disons simplement galerie. Maintenant, nous ajoutons la galerie. Pour ce faire, nous devons ajouter un autre plugin lié à Elementor Revenons ici et disons plugins, ajoutons un nouvel Elementor. C'est ce qu'on appelle Essential Adds for element. Comme vous pouvez le constater, il compte 2 millions d'installations actives. Activons-le. Passons ensuite à Advanced. Avancé signifie simplement qu'un plus grand nombre de ces widgets seront disponibles dans le front-end. Ensuite, celle que nous recherchons est cette galerie filtrable Ensuite, nous pouvons dire « suivant ». Ici. Suivant. Non, merci. Nous avons maintenant terminé l'installation. Revenons maintenant au front-end ici et actualisez la page avec le contrôle R. Chaque fois que vous ajoutez un plug-in supplémentaire lié aux éléments, il est ajouté ici Si nous réduisons tous ces panneaux, souvenez-vous que nous avons ajouté l'élément K, le kit d'éléments. Voici les panneaux du kit Elements et nous avons maintenant ajouté des modules complémentaires essentiels. C'est juste pour vous montrer où vous pouvez tous les trouver. Ce sont des éléments gratuits que vous pouvez ajouter, mais bien sûr, ils contiennent également des éléments premium. Mais la galerie filtrable que nous recherchons se trouve ici Si nous faisons défiler l'écran vers le bas, nous pouvons le faire glisser et le déposer dedans Et voilà, tant que c'est encore sélectionné. Maintenant, cela devient Modifier la galerie filtrable. Tout d'abord, six éléments à montrer suffisent. Voyons quelles autres commandes filtrables, sont ces éléments ici, comme vous pouvez le voir, nous avons des tables, du personnel, une cuisine Ce sont comme les catégories d'images que vous avez. Catégories de photos, peut-être des photos du personnel, peut-être les différents types de nourriture que vous consommez. Peut-être un voyage. Quelle que soit la catégorie dans laquelle vous souhaitez placer vos photos. En revenant ici, nous pouvons créer des contrôles filtrables Je vais juste utiliser ceux que j'ai utilisés pour les tables. Nous disons à Element de classer ces images par ceci. Le deuxième ici peut être le personnel et le troisième ici peut être ce qu' étaient ces locaux. Mettez-la à jour, qu'y a-t-il de mal à cela ? Bien, tant que cette option est toujours sélectionnée. Nous pouvons maintenant créer les éléments de la galerie et ce sont les images individuelles, comme vous pouvez le voir ici, nous avons le premier élément de la galerie. Si je le sélectionne, je peux lui donner le contrôle. Le nom du contrôle ici est le nom de la catégorie ci-dessus. Si nous disons qu'il s'agit de tables, cette image ne sera affichée lorsque nous sélectionnerons le contrôle de tables. Permettez-moi de me débarrasser de ce texte parce que je ne l'aime pas, mais vous pouvez le garder si vous le souhaitez. Je supprime également le bouton de lien. Juste comme ça, il nous reste un bouton de boîte à lumière. Cela l'affiche simplement pour que vous puissiez le visualiser en mode isolé. On s'en débarrasse. Maintenant, allons-y et sélectionnons une image pour cette section. Vous pouvez choisir n'importe lequel. Voici le tableau 2, par exemple. Sélectionnez-le. Nous y voilà. Maintenant, c'est le premier élément de la galerie. Nous pouvons peut-être l'appeler table 1. Faites preuve de créativité avec ces objets. Peut-être, oh attends, ça devrait être le personnel, c'est peut-être le chef. Débarrassons-nous de ça. Débarrassons-nous du bouton de lien et sélectionnons le chef. OK, sélectionnons ce type. Sélectionnez-le, et c'est parti. Je vais ouvrir le troisième article de la galerie. Tout d'abord, sélectionnons, peut-être parlons-nous des locaux. Passons donc à la cuisine ouverte, c'est une image de la cuisine. Supprimons ces textes. Supprimez le lien, disons qu'il est contrôlé par les locaux. Il ne doit être affiché que lorsque c'est le contrôle des locaux qui est actif. Appelons cela une mise à jour de la cuisine. Je vais continuer et répéter la même chose pour ces trois, mais je vais avancer rapidement dans cette section. Je viens de terminer la création des trois autres. Si nous prévisualisons la page, passons à la section. Nous y voilà. Si nous sélectionnons des tables , les tables 1 et 10 s'affichent. Si nous montrons au personnel qu'il y aura la chef Kate, la serveuse, et Alex le barman, bien sûr, par exemple, pour Alex, le nom de l'article est Alex, et le barman tombe sous cet éditeur de texte ici même Vous remarquerez maintenant que dans notre référence, nous avons des coins arrondis. Alors allons-y et stylons-le. Tant qu'il est toujours sélectionné, je vais passer au style intérieur, je vais passer au rayon de bordure de l'article. Donnons-leur 20 maintenant qu'ils sont arrondis. Mettez ça à jour. Si nous accédons à la page d'aperçu, ils sont maintenant arrondis. Nous y voilà. Vous pouvez continuer et jouer avec tous ces autres paramètres. Maintenant que vous savez comment ajouter cette galerie filtrable, nous voulons que cette leçon soit courte Mais nous avons vraiment abordé les points les plus importants, les plus importants. Allez-y, jouez avec tous ces paramètres et voyez si vous pouvez améliorer votre galerie de filtres. C'est tout pour cette leçon. Dans la leçon suivante, nous allons voir comment créer ce pied de page. Je te verrai bientôt. 20. Le pied de page: Nous allons maintenant créer ce pied de page sans perdre plus de temps. Passons à cela en passant à notre site Web. Maintenant, bien entendu, de la même manière que nous avons créé l'en-tête séparément de la page d'accueil, nous allons créer le pied de page séparément en utilisant Element Ski Light Il est temps de sortir d'ici, mais avant de partir, disons « mise à jour ». Maintenant on peut sortir. Très bien, passons au pied de page de l'en-tête Element Skit. Maintenant disons en ajouter un nouveau, vous savez comment percer mon pied. Bien entendu, cette modification du pied de page doit être active. Allons-y et modifions-le le contenu Nous y voilà. Maintenant, bien sûr, nous allons ajouter une section à trois colonnes. Allons-y et ajoutons-le ici. Je souhaite ajouter un élément d'image. Nous pouvons mettre le logo ici. Je vais sélectionner ce logo ici. Nous allons ajouter des icônes sociales. Et j'aime bien ceux d'Elements Kit. Ces autres proviennent de l'équipe Element, mais ils proviennent d'Elements Kit. Je vais les déposer juste là. Comme vous pouvez le constater, ils sont positionnés en haut. Si je sélectionne le conteneur qui les contient, je peux modifier la justification pour qu'elle soit centrée comme ça. Je peux faire de même ici pour le logo, mais il n'est même pas visible. Maintenant, comme vous pouvez le voir ici, nous avons une image de fond, nous savons déjà comment faire. Sélectionnez le conteneur, passons au style, au type d' arrière-plan, puis sélectionnons une image. Nous voulons nous assurer de sélectionner une grande, une grande image. Oui, 19 1920 x 1080. Très bien, sélectionnez-le . Nous y voilà. Comme d'habitude, sous-tendez la position, peut-être au centre ou peut-être en haut au centre Disons que la pièce jointe par défaut est Repeat, Repeat. Disons une couverture pour la superposition d'arrière-plan. Donnons-lui cette couleur noire. Rendons-le plus sombre, juste comme ça. Bien entendu, cela signifie que nous ne pouvons pas voir les icônes sociales, sélectionner les éléments, effectuer ces modifications pour modifier les icônes sociales. Et nous avons Facebook, Twitter et Linked in. Vous pouvez en ajouter un autre si vous le souhaitez, mais nous allons nous en tenir à trois Facebook. Passons maintenant à la couleur dans des circonstances normales, à la couleur. Nous voulons donc choisir cette couleur dorée. Je veux modifier la page avec Elementor, sélectionner ces textes, passer au style, sélectionner le contrôle jaune C pour le copier et le fermer Viens ici, colle-le. Maintenant c'est jaune, mais en fait c'est la couleur du texte. Je veux que ce soit une couleur de fond blanche. C'est ce que nous voulons avoir exactement sur le fond jaune au survol. En fait, normalement, je veux que le texte soit noir comme ça. Au survol, nous voulons que l'arrière-plan soit blanc, comme ça Répétons la même chose pour Twitter. Il est noir par défaut, mais le fond est doré. Et survolez, le fond doit être blanc. Maintenant, faisons également en sorte que les liens soient noirs, dorés en attente, blancs. Mettez à jour cela, bien sûr, c'est ici que vous placerez les liens vers les différentes plateformes sociales directement vers votre profil sur cette plateforme. Collez-le ici. Pour Linked in pour Twitter, vous devez le coller ici. Et pour Facebook, passons au style. Vous pouvez également les aligner tout à droite. Vous pouvez également sélectionner le logo sur le pied de page et réduire sa taille, peut-être jusqu'à ce point Et alignez-le sur la gauche. Maintenant, juste ici. Allons-y et ajoutons un titre de texte intitulé Repas, comme aucun autre ne le copie. Collez-le dedans. Changeons la couleur de façade en blanc. Passons à la typographie. Faisons en sorte qu'il soit noir. Alignons-le au milieu. Et je pense que tout va bien maintenant. Ensuite, nous devons également ajouter un paragraphe de texte ou un éditeur de texte. Mettons-le juste là, style, couleur centrale, blanc. Mettez ça à jour. Maintenant, bien sûr, nous avons du rembourrage de haut en bas. Rembourrage ici et rembourrage là-bas, sélection du pied de page lui-même, Donnons-lui peut-être 100 et voilà, 100. Mettez ça à jour. Nous allons également sélectionner ce conteneur contenant le texte. Alignons verticalement tout au centre. Réduisons cela. Sélectionnez ce texte, ajoutez une marge inférieure pour que tout soit correctement aligné. En sélectionnant ce conteneur, encore une fois, nous pouvons définir un écart, peut-être 40, soit 440. Mettez-le à jour, prévisualisons-le. Génial, c'est notre pied de page. Nous pouvons le rendre un peu plus sombre, en revenant ici, en superposant un arrière-plan, plus sombre comme ça Faisons également de ce logo, un lien, un lien vers une URL personnalisée. Copiez ça, collons-le dedans, mettons-le à jour. Génial. Et maintenant, lorsque nous cliquons dessus, le logo sera redirigé vers la page d'accueil. Il y a une chose que j' aimerais que vous remarquiez à mesure que nous nous rapprochons de la page inférieure, faisant défiler la page jusqu'à elle. Exactement, c'est très joli Mais ce que je voulais que vous remarquiez, c'est que nous n'avons pas fixé de marge pour que le bas de cette section soit séparé. Nous devons maintenant modifier cette page d'accueil, modifier avec Elementor. Maintenant, en faisant défiler l'écran jusqu'en bas, cette section contient toutes les sélections avancées, une marge supérieure de 100 Donnons-lui également une marge inférieure de 100. Mettez à jour cet aperçu pour que tout soit uniformément espacé. Très bien, en faisant défiler l'écran vers le bas, exactement. Maintenant, nous avons un bel espacement juste là. Voici comment créer le pied de page avec le kit d'éléments. J'espère que cette leçon vous plaira. Dans la leçon suivante, définissons l'image sélectionnée. Je te verrai bientôt. 21. Définir l'image en vedette: Nous voulons faire quelque chose très rapidement, c'est-à-dire définir une image vedette pour notre page de destination. Tout cela fait partie du SEO. Pour Wordpress, c'est quelque chose de très important. Vous pouvez avoir un site Web très beau. Mais si vous ne faites pas le bon référencement, le site Web ne sera même pas visible pour Google et les autres moteurs de recherche. Vous devez définir une image vedette. en revenir, il suffit de consulter les pages. Vous sélectionnez la page, nous voulons définir une image en vedette à modifier. Et ici, vous remarquerez que nous avons un ensemble d'images en vedette, l'image vedette que nous voulons être, cela peut être une belle image vedette d'ailleurs. Définissez-la comme image vedette et mettez-la à jour. Désormais, lorsque quelqu'un recherche notre restaurant par son nom sur Google, s'il apparaît dans les résultats de recherche Google ou s'il s'agit des résultats de recherche, il affiche cette image vedette Bien entendu, c'est mieux que de simplement montrer un bref texte décrivant en quoi consiste notre restaurant. Maintenant, si vous souhaitez en savoir plus sur les raisons pour lesquelles les images en vedette sont importantes et comment configurer et optimiser votre site Web pour le référencement. J'ai un cours complet ici sur le partage des compétences, vous montrant tout ce que vous devez savoir sur le référencement Wordpress. Consultez mon profil et recherchez un cours sur le référencement Wordpress. Mais en gros, c'est ainsi que vous définissez votre image en vedette. Dans la leçon suivante, nous allons voir comment créer la page À propos. Je te verrai bientôt. 22. Page d'accueil: Il est maintenant temps de créer la page À propos. En revenant sur notre tableau de bord. Tout d'abord, permettez-moi de terminer toutes ces autres choses sur lesquelles nous travaillions. Nous y voilà et voici la page à propos. Je veux aller à l'intérieur. Remarquez que lorsque vous survolez la page d'accueil, modifier avec Elementor, mais ces autres options ne le font pas avec Et c'est parce que nous n'avons pas encore commencé à les modifier avec element. Nous venons de les créer et nous ne pas allés au front-end pour les modifier, mais une fois que nous aurons commencé à les modifier avec Elementor, lorsque vous y reviendrez, il aura cette option Nous sommes là, nous sommes en train de le modifier. N'oubliez pas que nous n'avons pas défini ici les paramètres de base que nous avons définis pour la page d'accueil. Passons à la valeur par défaut. Passons au modèle et disons Elementor pleine largeur. Passons également aux paramètres de l'astra. Dites pleine largeur, barre latérale, pas de barre latérale. Désactivons ces autres. Mettez ça à jour, génial. Éditons maintenant avec Elementor. Ce que nous voulons faire, c'est si je peux le prévisualiser, puis aller à la page d'accueil. Je veux que nous modifiions avec Elementor. Nous souhaitons réutiliser certaines de ces parties qui se trouvent sur la page d'accueil. Par exemple, si je fais défiler la page, nous pouvons choisir ceci. Je peux juste venir et dire « copier » avec le bouton droit de la souris. Si je retourne ici dans cette boîte, je peux dire Coller. C'est une façon de réutiliser les éléments. Une autre façon de réutiliser des éléments est de sélectionner ce clic droit et de dire « Enregistrer en tant que modèles ». Si je l'enregistre en tant que modèle, je peux l'appeler section d'arrière-plan de l'image, par exemple. Maintenant, il est enregistré dans mes modèles. Maintenant, si je viens ici, permettez-moi de le supprimer. Si je viens ici pour ajouter un modèle et que je vais dans mes modèles, je peux dire insérer. Cela me dira qu'il remplacera tout ce que j' ai créé ici Je dirais de postuler. Allons-y. La raison pour laquelle je voulais que nous choisissions ceci est pour que nous puissions créer quelque chose comme ça. Tout d'abord, je vais sélectionner ceci et comme vous pouvez le voir, je ne suis pas en mesure de contrôler le conteneur. Et n'oubliez pas qu'il avait une marge supérieure de 100, 100 par rapport à l'endroit où nous l'avions sélectionné sur la page d'accueil. Nous voulons supprimer cette marge pour qu'elle augmente. Notez que nous n' avons pas non plus toutes ces choses. Permettez-moi de me débarrasser de cela, cela, mais je tiens à conserver cette courte description. Je pense que ça a l'air mieux. Permettez-moi de sélectionner le conteneur lui-même et d'ajouter un peu de rembourrage en haut Faisons en sorte que ce soit 200. Bien, commençons par le mettre à zéro, puis supprimons le lien. Nous ne pouvons donc modifier qu'une seule cellule à la fois. Je veux que ce soit 200, disons 180, soit 1 800 au bas de l'échelle Disons 50. Très bien, à propos de sélectionner ce texte, collez-le. Ensuite, nous pouvons avoir peut-être juste une courte description ici, juste comme ça. Mets-le à jour. Ensuite, choisissons notre histoire. Ajoutons cette section. Ajoutons une marge de 100. Dupliquez ça. Faisons-le glisser et mettons-le dedans. Remplacez-le par cette couleur noire, 111 pour plus de cohérence. Choisissons également ce texte. Retournez ici. Editeur de texte. Collons-le là-dedans. Lorsque vous le collez, utilisez contrôle Shift V au lieu du contrôle V. Si vous le collez avec le contrôle V, il conservera le formatage qu'il avait précédemment Ensuite, tant qu'il est toujours sélectionné. Alignons-le au milieu. Qu'est-ce qu'on a d'autre ? Nous avons deux images juste en dessous, mais toujours à l'intérieur de ce conteneur, nous pouvons ajouter un conteneur , puis deux conteneurs en double. Maintenant, ils vont de haut en bas. Sélectionnons l'extérieur. Assurons-nous que c'est de gauche à droite. Juste comme ça. Maintenant, nous pouvons ajouter une image, sélectionnez ici une image de votre historique. Peut sélectionner cela. Donnons-lui ces coins arrondis à l'intérieur du style border radius 20. Maintenant, dupliquons cela. Débarrassons-nous de ça. Changeons cela. Je vais juste utiliser l'une de ces images, mais vous devez en télécharger une belle. Et voilà, Update. Passons en revue les modifications. Génial Maintenant, bien sûr, vous remarquerez que si nous actualisons cette page, elle comporte ce saut lors du rechargement Et nous voulons que ce contrôle progressif de la charge sélectionne les effets de mouvement avancés du conteneur, disons fondu, mette à jour cela. Prévisualisons les modifications comme ça. Ensuite, nous allons ajouter cette section, comme vous l'avez déjà deviné Nous pouvons le sélectionner sur la page d'accueil car nous avons créé quelque chose qui ressemble à cela. Nous l'avons déjà enregistré en tant que modèle. Entrer ici, c'est ça. Insérer, appliquer. Si on fait défiler la page, on y va. Très bien, donc la famille compte, copiez-la, sélectionnez-la, collez-la, dirigée par Olivia et Lucas. Collez ça dedans. Copiez-le, sélectionnez-le, collez-le dedans. Et bien sûr, il s'agit d'un espace réservé, nous allons avoir les boutons que nous utiliserons ici. Laissons-le là. Génial Allons-y et créons cette section. Nous voulons une section à double colonne. Bien que cette option soit toujours sélectionnée, je vais passer à la marge avancée 100 en haut. Ajoutons une image ici. C'est bon. C'est sur la droite. Sur la gauche, nous pouvons avoir ce texte. Et l'éditeur de texte, c'est Lucas, c'est juste un texte fictif, Lucas 111 La police est noire et sa taille est probablement 45. Maintenant, bien sûr, je vais sélectionner conteneur qui le contient, puis je vais tout aligner verticalement au centre. Sélectionnez une image de Lucas. Nous y voilà, ouverts. Allons-y Génial Passons au style du rayon de bordure 20 pour lui donner ce coin arrondi. Ensuite, sélectionnons ce conteneur ici dans la mise en page. Donnons-lui un espacement des colonnes d'environ 40. Génial Maintenant, dupliquons cela. Maintenant, il est dupliqué. On peut le faire glisser et le mettre de l'autre côté. Remplaçons cela par la suivante : où se trouve une bonne image ? Rencontrez Olivia, car cette servante est dirigée par Lucas et Olivia. Sélectionnez-le. Voilà, c'est Olivia. Mettez à jour qui prévisualise les modifications. Allons-y. Super génial. Nous en avons presque terminé avec la page à propos. Bien sûr, nous devons créer cette section d'inscription à la newsletter, mais cela devrait être une leçon en soi. C'est ce que nous allons faire dans la prochaine leçon. Je te verrai bientôt. 23. Formulaire d'inscription à la newsletter: Il est maintenant temps de créer ce formulaire d'inscription à la newsletter en retournant dans notre éditeur. Pour l'instant, nous allons quitter cet endroit. Nous pouvons donc accéder au back-end du tableau de bord et installer mon plugin de formulaire préféré pour Wordpress, qui s'appelle Forminator Passons à la sortie du tableau de bord. Passons à Plugins Ajouter un nouveau ici. Tapons Forminator. Voilà, par WP MU dev avec 500 000 installations, installez-le. C'est l'un des meilleurs plugins de formulaire du plugin Wordpress de Reposit Maintenant, nous y voilà. Vous le trouverez presque au bas de ce menu. Si je clique, Forminator sera redirigé vers le tableau de bord du plugin . Nous y voilà. Comme vous pouvez le constater, nous pouvons créer un formulaire, créer n'importe quel type de formulaire, ou vous pouvez créer des pôles, sondages d' opinion ou autre. Je veux que nous créions une newsletter. Formulaire d'inscription, continuer. C'est un modèle que nous avons utilisé. Formulaire d'inscription, créez-le. Maintenant, bien sûr, comme vous pouvez le voir ici même dans notre référence, ils sont côte à côte. Le prénom et l'e-mail peuvent le sélectionner, le faire glisser et le placer juste à côté du prénom. Si nous le prévisualisons, c'est à cela qu'il ressemble. Voici le bouton S'abonner. Allons-y. Vous pouvez changer ce qu'il dit en cliquant dessus et en disant peut-être rejoignez-nous » ou quelque chose comme ça, « Postulez ». Maintenant, il est dit de nous rejoindre. Joignez-vous à nous. Bien, il est maintenant temps de styliser le formulaire. Si je clique sur Publier, nous avons un code court. Et n'oubliez pas comment afficher un code court dans le front-end. Si j' arrive sur cette page et que je dis « modifier » avec Elementor faisant défiler Elementor vers le bas juste en dessous, dupliquons cela En fait, nous avons besoin des deux. Laisse-moi juste me débarrasser de l'image. Nous avons besoin des deux conteneurs, et laissez-moi m'en débarrasser. Maintenant, nous avons ces deux conteneurs Dans ce conteneur, mettons un élément de code abrégé, déposons-le dedans. Maintenant, revenez au tableau de bord, copiez ce code court et collez-le. Sélectionnez-le, puis collez-le ici. Allons-y. Mets-le à jour. Passons en revue les modifications. En faisant défiler la page, c'est parti. Nous allons également obtenir le dernier exemplaire ici. Permettez-moi de le dupliquer. Déposez-le là. Quelles sont les commandes que j'ai utilisées pour annuler ? Prenons ça et je vais le coller. Permettez-moi également de choisir le texte, éditeur de texte qui s'y trouve. Je vais le coller, le mettre à jour. Passons en revue les modifications. Génial Maintenant, ajoutons également une marge ci-dessous sur ce conteneur Advanced Bottom 100, mettez à jour cela. Passons en revue les modifications en défilant vers le bas. Un joli rembourrage est là. Maintenant, allons-y et personnalisons-le de manière à ce qu'il ressemble mieux à celui-ci dans notre tableau de bord. Si nous fermons cela, nous avons des champs suivants, nous avons une apparence ici. Vous pouvez choisir différentes apparences pour votre formulaire. J'aime le gras, mais je veux changer ces couleurs, ces couleurs. Utilisons le personnalisé au lieu du personnalisé par défaut. La première chose que je souhaite modifier est le bouton Soumettre. Je veux que cette couleur dorée revienne ici. Permettez-moi de sélectionner ce style, de copier ce code. Pour revenir ici, sélectionnez le coller dedans. Maintenant, c'est cette couleur au survol, je veux qu'elle soit 111 au point, même si ce n'est pas très important 111 vues, allons-y. Maintenant, rendons ces coins moins criants. saisie et de texte sombres Zone de saisie et de texte sombres pour la couleur de la bordure, je veux la changer en gris clair, je veux la changer en gris foncé On Focus légèrement en gris foncé. C'est bon Aperçu, c'est parti. Génial Mais maintenant, nous voulons leur donner des coins arrondis. Ils sont trop pointus. Tout d'abord, mettons cela à jour. Maintenant, formintor nous fournit un moyen d' ajouter du CSS personnalisé à nos formulaires. Si nous n' avons pas la possibilité apporter ces modifications en utilisant ces fonctionnalités ici, nous pouvons utiliser du CSS personnalisé pour d'autres Par exemple, vous avez remarqué qu'il s'agit d'un champ de saisie. Nous pouvons définir comment nous voulons que nos champs de saisie se comportent dans leur apparence dans le paramètre CSS. Nous pouvons entrer ici et dire que pour les entrées, sélectionnez les entrées. Il s'agit maintenant du sélecteur pour toutes les entrées. Nous voulons le rayon 5 de la frontière. Nous voulons que le rayon de bordure des champs de saisie ait un angle arrondi de cinq pixels. Si nous prévisualisons cela maintenant, ils ont un coin arrondi de cinq picelsf, disons 50. Comme vous pouvez le constater, il est maintenant assez arrondi. Mettons-le à jour. Passons en revue les modifications. Nous voulons que ce soit 550, c'est trop mettre à jour cela. Maintenant, nous voulons également faire de même pour le bouton, mais si vous regardez ici, bouton n'est sélectionné. C'est ce que l'on appelle des sélecteurs. Nous n'avons pas de bouton de sélection. Ce que nous pouvons faire, c'est passer au front end. Tout d'abord, permettez-moi de sélectionner ce code abrégé et de cliquer sur Appliquer. Juste pour appliquer ce que nous avons fait dans le tableau de bord en arrière-plan, en faisant défiler la page vers le Comme vous pouvez le constater, les modifications ont pris effet. Si nous le prévisualisons, en faisant défiler la page vers le bas, Maintenant, je peux cliquer avec le bouton droit sur ce bouton, puis inspecter. Dans n'importe quel navigateur, vous trouverez un élément d'inspection. Comme vous pouvez le voir, lorsque nous cliquons sur Inspecter, tout le code s'affiche lorsque nous cliquons sur Inspecter, tout le code s' y compris le sélecteur attribué au bouton Maintenant, si vous regardez ici, vous pouvez voir que le bouton est jaune. Il est très facile de savoir qu'il s'agit du bouton. Il a une couleur d'arrière-plan jaune et s'appelle le bouton Formintor Submit Si nous le sélectionnons avec le point C et que nous revenons ici, nous pouvons l'utiliser comme sélecteur Collez, ouvrez et fermez le support. Nous pouvons maintenant dire rayon de bordure de cinq pixels. Maintenant, si nous le prévisualisons, il contient maintenant ces pixels. Mets-le à jour. Maintenant, bien sûr, ça a l'air un peu moche avec tout cet espace qui reste ici. Pourquoi ne pas l'étirer jusqu'au bout et le mettre au milieu. Maintenant que nous l' avons déjà sélectionnée, nous pouvons ajouter 100 % Ce n'est pas l' orthographe de la largeur. Si nous le prévisualisons maintenant, il a cette largeur de 100%. Mettez-le à jour. Très bien, maintenant, si nous revenons à cette page et que cette option est toujours sélectionnée, nous pouvons appliquer ce que nous venons de faire dans le backend. Maintenant, si nous prévisualisons les modifications, permettez-moi de terminer. Descendons en rampant et c'est parti. Voici comment créer le formulaire d'inscription à la newsletter Formintor Dans la leçon suivante, nous allons travailler sur la page de la galerie. Je te verrai bientôt. N'allez pas trop loin. 24. Page de galerie: Il est maintenant temps de créer la page de la galerie. Ouvrons-le simplement avant de créer la page de galerie. C'est ici. Je viens remarquer que nous n'avons pas créé cette icône ici, ci-dessus dans la page à propos. Laissez-moi chercher, faisons glisser une icône juste là. C'est très facile, ces deux verres, ou nous pouvons avoir ces deux verres plus foncés. Insérer. Et bien sûr, changeons la couleur en, laissez-moi simplement choisir cette couleur à partir de ce bouton. Copiez-le et collez-le dedans. Au survol, nous pouvons le porter à 111 pour des raisons de cohérence. Juste comme ça. Mets-le à jour. Passons en revue les modifications. Allons-y. Bien sûr, si je recharge cette page, est animée mais elle se charge de manière très rigide Ne vous inquiétez pas, nous allons travailler sur les animations pour le reste des éléments du site. Parce que si vous regardez notre page ici, rechargez le site de référence, Tout est animé Nous allons travailler là-dessus, ne vous inquiétez pas, en revenant ici. Nous avons maintenant notre icône et nous sommes prêts à travailler sur la galerie. Permettez-moi de passer à la galerie. Comme vous pouvez le voir, nous avons ici cette galerie de noms qui semble moche sur l'en-tête. C'est parce qu'il s'agit de la page brute que nous avons créée, tout comme la page à propos. Nous ne l'avons pas encore modifié avec Elementor et nous n'avons pas défini ces configurations de base dans le back-end C'est pourquoi il s'agit simplement de la page Astra Wordpress par défaut. Si nous disons que la page d'édition sera redirigée directement vers le back-end où nous pourrons définir les paramètres de base tels que le modèle Elementor Toute la largeur peut entrer dans les paramètres de l'Astra. On peut dire pleine largeur, pas de barre latérale. Et bien sûr, désactivons-les. Mets-le à jour. Bien, maintenant si nous disons modifier avec Elementor, c'est maintenant une page Elementor Allons-y et débarrassons-nous de cela. Parce que nous voulons utiliser cette section de la première page, nous pouvons en faire un modèle ou simplement la copier sur toute autre page que nous voulons utiliser. J'écrirai « click and copy ». Dans notre galerie, je peux dire coller, mais je vais aussi dire enregistrer en tant que modèles afin que nous puissions l'enregistrer page par page, car nous allons également utiliser dans la page de contact. Nous ne voulons pas avoir à le copier une fois de plus. Allons-y. Changez cela en gallery Awesome. La prochaine chose que nous voulons faire est de me laisser simplement le mettre à jour. Aperçu, modifications, c'est parti. La prochaine chose que nous voulons faire est d'aller sur la page d'accueil, car nous voulons copier cette modification de la galerie avec Elementor Nous pouvons faire défiler l'écran jusqu'en bas ici. Nous voulons copier cette section entière, cliquez avec le bouton droit de la souris sur Copier. Retournez ici, cliquez avec le bouton droit de la souris sur Coller. Nous y voilà, car nous l' avions déjà conçu. Ça a déjà l'air bien. Mais maintenant, c'est une galerie unique. Quoi que nous fassions ici, cela n'affectera pas la galerie sur la page d'accueil. Permettez-moi de fermer la page d'accueil. Retournez ici maintenant. Pour gagner du temps, je ne vais pas ajouter d'autres images ici. Mais si nous réduisons la page des paramètres dans les éléments de la galerie, vous pouvez ajouter d'autres images ici en dupliquant à l'intérieur. Et peut-être l'étiqueter comme tableau huit, en sélectionnant une autre image. Permettez-moi de prendre une image aléatoire ici. Très bien, laisse-moi sélectionner ça. Et maintenant, pour gagner du temps, je vais simplement les dupliquer, puis les rendre aléatoires. Porte-clés juste là, table 10, Alex met à jour ça. Maintenant, nous avions ajouté un bouton séparé ici pour ouvrir cette page de galerie. Je vais fermer cette page et mettre à jour la page. En fait, permettez-moi tout d'abord de revenir à la page d'accueil et de modifier avec Elementor Allons faire défiler la page jusqu'en bas. Maintenant, ce bouton n' a pas de lien, et nous voulons qu'il soit redirigé vers la page de la galerie. Je vais le copier. Allez ici tant que c'est sélectionné, je vais le coller dedans. Et bien sûr, la page de la galerie possède l'extension de mise à jour de la galerie que je connais. Parce que si vous allez ici le tableau de bord et que vous accédez aux pages, si vous regardez l'édition rapide de la galerie, le slug est une galerie, est-à-dire le domaine, ce slug Vous pouvez également y jeter un coup d'œil en disant conseil edit. Si vous allez sur l'URL, vous remarquerez qu'il s'agit de la galerie de barres obliques de VF export.com C'est comme ça que fonctionne cette galerie. Si vous souhaitez l' ouvrir dans un onglet séparé, ouvrez cette roue dentée dans une nouvelle fenêtre, mettez-la à jour Si je prévisualise la page d'accueil maintenant et que je la fais défiler jusqu'en bas. Si je clique sur Ouvrir la galerie, cela ouvrira la page de galerie sur laquelle nous travaillons actuellement. Permettez-moi de clore cela parce que nous voulons revenir à la page de galerie sur laquelle nous travaillons . Maintenant, nous devons supprimer ce bouton car il était destiné à la page d'accueil. La galerie elle-même est dotée d'un bouton Charger plus. Si je réduis le bouton Charger plus des paramètres, il se chargera juste là. Si vous cliquez sur Charger, autres images que vous avez seront affichées. Je pense que nous avions plus d'images. Oh, permettez-moi de terminer cette version que nous sommes censés être ici. Si je vais dans le bouton Réduire la galerie, les objets chargent plus, il apparaîtra ici. Et si nous cliquons sur Charger plus, le reste des images sera chargé. Mais maintenant, nous devons le styliser avec style intérieur. Tout d'abord, mettons cela à jour. Actualisons ce contrôle de page R pour pouvoir le voir. Très bien, sélectionnez maintenant cette galerie et passons au bouton Style Load More. Tout d'abord, l' espacement supérieur, donnons-lui 50. Donnons-lui ce rembourrage. Publions-le. 60 à gauche, 60 à droite et 20 en bas. Donnons-lui également cette mise à jour du rayon de bordure de 50 que nous voulons également lui donner cette couleur dorée. Si nous revenons ici, nous pouvons sélectionner le copier-coller dedans. Et au vol stationnaire, nous voulons que ce soit sur un. Pour une mise à jour cohérente, examinons les modifications. Génial Parce que nous avons copié la galerie elle-même depuis la page d'accueil. Il a la marge que nous avions définie dans la page d'accueil. C'est pourquoi nous n'avons plus besoin d'en ajouter. Si nous en chargeons plus, nous pouvons voir plus d'images. C'est le poids. Nous devons modifier ces textes. Disons simplement que notre histoire en images met cela à jour. Voilà à quoi ça ressemble. Comme je l'ai dit, nous allons travailler sur les effets de mouvement. Voici comment créer la page de galerie. Dans la prochaine leçon, nous allons travailler sur la page de contact. C'est presque la fin, les gars. Félicitations pour le chemin que vous avez parcouru. Je te verrai bientôt. 25. Page de contact: Il est maintenant temps de créer la page de contact. passant à la page de contact, nous allons répéter les mêmes étapes que celles que nous avons suivies sur la page d'édition de la page de galerie. Si je peux y retourner très rapidement. heure actuelle, comme vous pouvez le voir, il s'agit de l'en-tête par défaut. C'est la valeur par défaut. Maintenant accédant à ces paramètres ici, si nous passons aux paramètres Astra, c'est pourquoi nous désactivons l'en-tête et le pied Maintenant, si nous désactivons ces deux éléments et mettons à jour la page, si nous la voyons, d'accord, nous avons toujours cette rubrique de contact qui, je pense, est une rubrique Wordpress. Pas du tout. C'est vrai. Quoi qu'il en soit, changeons le modèle en Elementor Full Width Astra, nous voulons qu'il soit en pleine largeur ici, pas de barre latérale Désactivons également la zone de bannière et mettons à jour. Très bien, modifiez avec Elementor, bien sûr. Maintenant, allons-y et ajoutons le modèle que nous avons créé, haut de page, en insérant, en appliquant. Vous pouvez modifier cette image d' arrière-plan ici et cela n'affectera pas les autres pages sur lesquelles nous avons utilisé ce modèle sur le conteneur de contrôle J'aime ce style de conteneur flottant. Sélectionnons-le. Laissez-moi sélectionner ceci, fermer cela. C'est le contact. Contactez-nous, mettez-le à jour maintenant, car nous sommes en train de créer un formulaire. Allons ici. Contacter le site de référence. Génial. Comme nous créons ce formulaire, nous devons évidemment utiliser le format. Je reviens ici dans le tableau de bord. Revenons en arrière, passons à Formulator Forms. Supposons que vous créiez un formulaire de contact. Continuez pour créer cela. Il contient quelques champs par défaut ici. Aperçu, il s'agit d'un champ de saisie. Champ de saisie. Champ de saisie, et il s'agit d'une zone de texte. Vous vous souvenez quand nous sommes arrivés ici à la question de savoir quand activer le CSS ? Nous avions le sélecteur pour la zone de texte, mais nous n'avons travaillé saisie que lors de la création de l'inscription à la newsletter Nous l' utiliserons également si nécessaire. en revenir à Fields Preview, en fait, nous sommes censés revenir à l'apparence. Passons à Bold. Passons au bouton Colors Submit, nous sommes censés lui donner ce jaune. Encore une fois, copiez-le. Collons-le dedans. Il est censé y en avoir 11111. Nous y voilà. Pour la zone de saisie de texte, nous voulons avoir cette bordure gris clair. Nous voulons avoir cette couleur légèrement plus foncée. Le même cas s'applique à then the error is okay. Prévisualisez maintenant c'est beaucoup mieux. Fermez ça, bien sûr. N'oubliez pas que nous avons dit que vous pouvez réorganiser cela si vous souhaitez, par exemple, que le prénom et l'e-mail figurent sur la même ligne Tu peux toujours le faire. Vous disposez d'une grande flexibilité. Nous avons maintenant notre code abrégé. Je vais copier ce code court, puis je vais revenir à la page « À propos » et nous en avons fini avec elle. Je vais retourner à la page de contact, en disant « ajouter ». Et je veux que nous ajoutions une double colonne. Section, je la sélectionne, ajoutons cette marge supérieure de 100. Ensuite, ajoutons un code court, un élément de code court. Collons ce code court juste là, mettons-le à jour. Passons en revue les modifications. Nous y voilà. Maintenant, ajoutons cette marge en bas, sélectionnons ce conteneur, mettons-le à jour, prévisualisons les modifications. Oui, il y a un bel espacement. Maintenant, nous devons également être cohérents et lui donner ces coins arrondis. Donc, pour y revenir, bien sûr, maintenant, comme vous pouvez le deviner, nous allons entrer dans le CSS personnalisé en apparence. Sélectionnons la zone de texte, le rayon de bordure est de cinq pixels. Laissez-moi le copier. Supposons que l'entrée doit également avoir un rayon de limite de cinq seuils de pointe Prévisualisez ça. Génial. Et maintenant, le bouton, je ne me souviens pas du nom du bouton, du nom sélectionné, c'était Forminator Submit Copiez ces cinq X. N'oubliez pas que cinq X. nous devons également leur donner une largeur de 100 % pour l'aperçu. Voilà, mettez-le à jour. Terminé. Maintenant, si nous allons ici sélectionnons ce code court et appliquons ce que nous venons de faire dans le backend, il est maintenant visible. Prévisualisons-le et fermons-le. Voilà notre formulaire qui semble vraiment génial. Maintenant, bien sûr, la seule chose qui reste, c'est que nous aimerions vous entendre coller le titre du texte, c' est une somme moindre. Prenons simplement un éditeur de texte. Sélectionnons le conteneur qui les contient et justifions-les au centre. Ils devraient être 40. Oui, c'est Monserrat, mais nous voulons qu'il soit noir. La couleur devrait également être 111 A. Et maintenant, vous remarquerez que nous avons cet accordéon ici Ajoutons donc un accordéon et je pense que je vais l'utiliser par Elements Kit Précisément. Il comporte trois champs. Par défaut, je vais développer cela et dire envoyez-moi un e-mail à restaurant.com Demandes de renseignements, demandes de renseignements à restaurant.com. Comme la séparation est trop grande, je vais maintenir la touche Maj enfoncée et appuyer sur Entrée juste pour passer à la ligne suivante Sélectionnez-les tous les deux. Développez cela et donnons-leur quelques balles. Cela devient une balle. Non, je veux que ce soient deux balles. Très bien, réduis ça. Développez le second téléphone. Plus 254-12-3458 254-12-3458 plus 1008002373. 254-12-3458 plus 1008002373. Maintenant, nous pouvons les rendre peut-être audacieux. Maintenant, réduisons cela et supprimons celui-ci. Accepte, juste comme ça. Je l'ai remis ici et j'ai maintenu touche Maj enfoncée pour passer à la ligne suivante, juste comme ça. Vous pouvez maintenant les agrandir ou les réduire si vous le souhaitez. Développons cela. Vous pouvez modifier la couleur ici si vous le souhaitez. Voyons voir, le titre 3 est de bonne taille. Sélectionnons également ce conteneur et définissons l'écart 40. Mettez ça à jour. Passons en revue les modifications. Nous y voilà. Notre page de contact est maintenant prête. On peut démonter cet accordéon. Nous sommes maintenant prêts à passer à l'étape suivante, qui consiste à ajouter les effets de mouvement sur les différentes pages, puis à rendre les pages réactives sur différentes tailles d'appareils, smartphones, tablettes. Cela fonctionne déjà bien sur un ordinateur de bureau, nous travaillons donc sur ces deux appareils. Je vous verrai donc dans la prochaine leçon. 26. Ajouter des effets de mouvement: Il est maintenant temps d'ajouter des effets de mouvement à tous ces éléments. Si je recharge cette page, comme vous pouvez le voir, cet en-tête est animé alors qu'il se charge de manière très rigide Revoyons ça encore une fois. Comme vous pouvez le constater, ce que nous voulons faire c'est les animer pour qu' ils aient un aspect artistique Commençons par cette page, en revenant à la modification de la page d'accueil. Pendant que nous sommes encore là, nous pouvons dire, en fait, que nous allons sélectionner ce conteneur dont le texte passe aux effets de mouvement avancés. Disons la décoloration. J'aime rebondir vers la gauche, juste comme ça L'autre rebondit à droite. Effets de mouvement avancés, rebondissant vers la droite, mettez cela à jour. Passons en revue les modifications. Comme vous pouvez le constater, c'est bien mieux. Bien, revenons maintenant à la page de la galerie. Celui-ci, ici. Disons modifier avec Elementor Très bien, si nous sélectionnons ce premier élément, nous pouvons accéder aux effets de mouvement avancés. On peut dire que vous pouvez jouer avec tous les autres, mais j'aime bien rebondir, suivi par celui-ci qui rebondit également Essayons autre chose. Zoomer vers la gauche. Non, je n'aime pas zoomer vers la gauche ou glisser vers la droite. L'autre glisse vers la gauche. Et puis celui-ci va rebondir. Mettons-le à jour et voyons voir. Oui, j'aime bien ça. Bien entendu, cela n'est pas visible et cela fait partie de la galerie. Il rebondira simplement en même temps que la galerie. Passons à la page à propos. Permettez-moi de terminer. Ces titres doivent être jaunes. Je pense qu'ils sont mieux jaunes. Si j'ouvre les onglets que je viens de fermer, si je sélectionne cet exemplaire doré je trouve qu'il est plus beau ainsi. Le même cas s'applique à cette mise à jour qui, pour en revenir à la mise à jour de la page de contact, je la ferme. Et maintenant, nous avons la sélection de la page À propos. Cela peut avancer. Passons aux effets de mouvement. Ça rebondit, c'est bon. Juste comme ça. En gros, je vais juste continuer à jouer avec les effets de mouvement. Je pense que maintenant tu as la solution. Je vais juste avancer rapidement pendant que je fais créativité avec les effets de mouvement, mais soyez créatif, essayez tous ces effets de mouvement que nous avons ici et voyez ce que vous pouvez trouver. Tu n'es pas forcément obligée de faire ce que je fais. Glissant vers le haut. Enfin, les gars, j'ai fini d'ajouter mes propres effets de mouvement. J'espère que vous avez pris le temps d' ajouter de manière créative de jolis effets de mouvement Comme vous pouvez le voir encore une fois, permettez-moi de le rafraîchir. Allons-y. C'est ainsi que nous allons procéder. Exactement. C'est ce que j'ai fait sur toutes les pages. C'est ainsi que vous pouvez ajouter des effets de mouvement à votre site Web. Maintenant, dans la leçon suivante, avant de rendre le site Web adaptatif sur différents appareils, ajoutons la fonctionnalité de menu. Je te verrai bientôt. 27. Setup du système de commande: Il est maintenant temps d'ajouter le système de commande, le système de commande de menus. Nous allons utiliser un plugin génial d' Oracle appelé Gloria Food Maintenant, ce plugin est génial car il vous fournit même une application grâce à laquelle vous pouvez recevoir des commandes de clients. Voyons juste la puissance de ce branchement. Allons-y, pour y revenir, je veux passer aux plugins. Ajoutez ici, je vais rechercher un ordre de menu. Nous cherchons Gloria Food. Allons-y. Ce plug-in Gloria Food est ce que nous voulons Il l'a dit, activons-le. Génial avons donc ici, et le voici, en cliquant ici. Nous sommes heureux de suivre les différentes étapes à suivre pour le configurer. Vous devrez créer un compte Gloria Food. Comme cela le suggère, j' avais déjà créé un compte Gloria Food en travaillant sur cet exemple de site Web Si je peux simplement me connecter à Gloria Food, laissez-moi simplement le faire glisser et le mettre ici Voici à quoi ressemblera votre interface. Vous pouvez créer les aliments que vous voulez. Comme je vous l'ai montré dans l'aperçu du projet, vous pouvez créer les plats que vous voulez, mais vous devez d'abord suivre ces étapes, vous devez fournir les bases du restaurant, les services et les heures d'ouverture. Paiement et paiement des taxes, taxes et prises de commandes légales, menu, tous ces détails. Ensuite, vous pouvez profiter de ce système automatisé. Cela aidera également l'application que vous allez télécharger sur le Playstore ou l'App Store à savoir de qui il s'agit et quelles commandes sont passées. Permettez-moi de me déconnecter de ce profil car je vais être redirigé pour créer un nouveau compte. Parce qu'il s'agit d'un nom de domaine différent. Ce que je veux faire, c'est me connecter à Gloria Food. Commençons par créer un compte Gloria Food. Mon restaurant Money. Au départ, je l'ai appelé Mr. Money Food. Appelons-le. Allons-y maintenant. J'utiliserai l'un de mes e-mails. Peut-être ce prénom, disons bien sûr que je vais créer un mot de passe. J'utilise un gestionnaire de mots de passe, je vais utiliser ce mot de passe. Je ne vais pas le configurer pour les clients. Créez un compte, vous pouvez partager des données de connexion non sensibles ou vous pouvez décider de ne pas les partager Sélectionnez ensuite les options que vous souhaitez configurer. Comme vous pouvez le constater, vous avez toutes ces options sauf une seule. Ce n'est pas vraiment, vraiment important ou nécessaire, mais vous pouvez également décider de payer pour continuer. Je veux vous montrer pourquoi ce plugin est tout simplement incroyable. Je l'ai découvert récemment et je le trouve tout simplement génial. Il en contient plus que ce dont vous avez besoin. Vous devez maintenant accéder à l'administrateur de Gloria Food pour configurer votre profil de restaurant Une fois la configuration terminée, vous pouvez revenir et ajouter les widgets sur votre site Web. Nous sommes maintenant redirigés vers le compte Gloria Food. Comme je l'ai mentionné, il s'agit d'une société Oracle. Il appartient à Oracle. Certains détails sont déjà préchargés. Maintenant, je vais changer de pays pour le Kenya, car c'est là je suis basé à Nairobi. Fournissez des informations précises, car c'est important. Il s'agit d'une entreprise que vous êtes en train de créer. Je dois également fournir le numéro de téléphone, le nom de la rue et le numéro. Disons Moy Avenue. Comme vous pouvez le constater, il se dirige automatiquement vers Moy Avenue à Nairobi en temps réel. Et voilà, c'est parti. Non, merci Ne dites pas ces détails. Informez les clients de votre position exacte. Je peux maintenant indiquer sur la carte exactement où je me trouve sur l'avenue Moy. Disons la maison juste à côté. Site Web du restaurant. Disposez-vous d'un vrai site Web ? Oui, nous allons utiliser VFX port.com. Nous allons fournir cela ensuite Maintenant, la cuisine que je vais proposer en montre davantage. Bien sûr, vous pouvez choisir parmi tous les. Vous pouvez toujours les modifier tous. Vous pouvez même supprimer ceux que vous avez sélectionnés ici et ajouter les vôtres. J'ajouterai juste le petit déjeuner mexicain, américain. Nous avons des émissions chinoises, plus de sushis chinois, indiens, Kb. Bien, ensuite, la plupart des restaurants à succès sélectionnent une à trois cuisines. Oh attends, laisse-moi retirer le kebab. Permettez-moi de supprimer les sushis et les indiens. Permettez-moi également de supprimer le petit-déjeuner. Disons maintenant les Américains mexicains et les Chinois. Ensuite, veuillez valider votre adresse e-mail. Je dois ouvrir mon e-mail, aller ici et valider. Validez l'adresse e-mail. Je suis sur mon autre écran maintenant. C'est bon. Donc, quand je reviens ici, il est automatiquement validé. Ensuite, proposez-vous le ramassage à votre adresse ? Oui, mon restaurant propose le ramassage. Oui ou non Proposons-nous la livraison ? C'est ce que nous faisons. Ensuite, commencez à ajouter des zones de livraison. J'ai compris. Ajoutez une autre zone de livraison. Lorsque vous cliquez dessus, vous pouvez maintenant redimensionner pour élargir votre rayon J'ai compris. Élargissons simplement le rayon à la majeure partie du quartier central des affaires de Nairobi. C'est bon. Supposons le montant minimum de CBD de la commande que vous souhaitez passer. Peut-être 2000 frais de livraison, peut-être 100 shillings. Nous devons les convertir en shillings. Nous allons changer de devise. Fermez ça. Réservation de table ? Oui, nous proposons des réservations de table. Je vais utiliser les paramètres par défaut ici. Dînez en commandant ? Oui Lorsque quelqu'un arrive sur place, il peut commander immédiatement. Proposez-vous de commander ? Oui Ensuite, comment cela fonctionne pour vos clients, permettez-leur de commander de la nourriture et des boissons lorsqu' ils sont chez vous. C'est bon. Ensuite, quand êtes-vous ouvert, ajoutez les heures. Je vais simplement utiliser la valeur par défaut, mais assurez-vous de définir vos heures de travail. Voyons les exceptions. Si vous avez des jours fériés et tout ce qui permet aux clients de demander un délai d'expédition précis, oui, vous pouvez indiquer le temps minimum à l'avance, 1 heure, le temps maximum à l'avance, quatre jours. Ils ne peuvent pas s'attendre à recevoir une livraison avant heure et ils ne peuvent pas s'attendre à recevoir leur commande s'ils le souhaitent au s'attendre à recevoir leur commande s'ils le souhaitent bout de quatre jours et tout ça. Je pense que cela va de soi. Je vais juste continuer ensuite. Vous pouvez désormais appliquer des taxes. Je dirais que les prix des menus incluent déjà les taxes, car je facturerai le prix de mes menus avec les taxes. Taxe de vente préchargée pour les frais de livraison. Si vous souhaitez ajouter des taxes aux frais de livraison, peut-être 16 % ou quelque chose du genre. Modes de paiement, oui, j'accepte la livraison sur place. Vous pouvez également accepter les cartes si vous le souhaitez, mais je pense que l'argent liquide est génial. Nom de l'entreprise suivante, entrez vos coordonnées officielles afin votre client sache d' où il achète. Enregistrement de ma société de bistrot. Permettez-moi simplement d'ajouter ces détails. 00200 Pays, Kenya. C'est bon. Ensuite, nous pouvons créer mes conditions générales à partir du modèle. Créez, c'est préchargé. Nous pouvons également créer la politique de confidentialité créée à partir de ce modèle. Ensuite, il est temps d'installer une application. 28. Application mobile du système de commande: Installation de l'application. Smartphone suivant. Si vous avez une tablette, sélectionnez tablette, je vais entrer mon numéro ensuite. Génial Maintenant, ils m'ont envoyé un SMS avec un lien pour le télécharger. Laisse-moi juste attendre. Je viens de recevoir le message. Je peux maintenant cliquer sur ce lien pour télécharger l'application. J'ai été redirigé vers l'App Store. Maintenant, bien sûr, c'est ce que vous voyez. Si vous me suivez, vous avez reçu un SMS et vous pouvez le télécharger maintenant, car j'avais déjà téléchargé une application auparavant. Je vais juste y aller et l'ouvrir ensuite. Maintenant, je ne sais pas ce que cela va me dire parce que je ai téléchargé en utilisant un autre numéro de téléphone. C'est bon. Je dois donc me déconnecter pour pouvoir me connecter avec un autre e-mail. Très bien, maintenant il est indiqué que j'ai connecté l'application avec succès. Dès que vous ouvrez l'application, elle se connecte automatiquement pour que je puisse cliquer sur Suivant. Génial C'est juste l' application qui fait tout ce bruit. Et vous pouvez fournir ce numéro du responsable des commandes dans le réseau du restaurant. Comme vous pouvez le constater, il vous enverra une commande test afin que vous puissiez voir ce que vous recevrez lorsque les clients commanderont via votre service. C'est bon. C'est facultatif , je peux donc simplement cliquer sur Suivant. Maintenant que nous l'avons, vous avez créé votre restaurant. Revenons maintenant à notre page d'accueil, voyons ce que nous avons. Si je reviens au tableau de bord ici et actualise maintenant, c'est l'assistant de configuration que nous étions censés suivre. Si je dis « configurer le profil du restaurant », bien sûr, nous l'avons déjà fait. Cela va ouvrir la voie. Oui, tout est déjà configuré. Pourquoi est-ce que cela se répète ? Et nous l'avons déjà fait. Passons simplement par les étapes. Non, je n'ai pas besoin de le fournir. Passons à la configuration du menu. Je vais juste passer directement au menu configuré ici. Vous pourrez configurer le menu du restaurant à l'avenir. Vous pouvez le modifier ensuite, tout ce que vous entrez ou modifiez est enregistré en temps réel. Ouaip. Ensuite, bien sûr, vous pouvez tous personnaliser votre hamburger. Vous pouvez ajouter différents éléments. Vous pouvez ajouter des choix supplémentaires à tous ces différents aliments et aux différentes tailles d'aliments que vous consommez. OK. Ignorez cette étape suivante. C'est bon. Alors maintenant, si nous revenons ici, avons-nous fini ? Non, pas encore. Donc, pour en revenir ici, oui, nous avons déjà un site Web. C'est bon. Reprenons donc ces étapes une fois de plus. Oui, nous proposons de commander. Nous allons maintenant devoir recommencer toutes ces étapes, je pense que nous ne faisons que les recouper. Oui Tous les paramètres que nous avons définis initialement sont corrects. Modes de paiement C'est bon Comme vous pouvez le constater, ces coches confirment tout. Ensuite, prendre les commandes. Voulez-vous que nous insérions votre menu ? Non, cela est facultatif car vous serez débité lorsque vous déciderez de le télécharger. Ici, vous pouvez créer manuellement, aucun fichier n'est chargé. Cette option est facultative. Restons-en là. édition, les ventes mobiles, les paiements, le paiement en ligne, c'est un service payant. Rechargeons cette page. Mettre en place un restaurant. Oublions tous les autres. C'est un peu étrange, car lorsque j'ai configuré le site Web de référence, j'ai suivi les mêmes étapes dans le tableau de bord de Gloria Food Et cela a été vérifié après avoir suivi toutes ces étapes. Mais pour le moment, il semble qu'il me manque un ou deux détails dans la configuration, mais pour gagner du temps, je ne pense pas que je vais passer plus de temps à essayer de déterminer quel détail j'ai oublié, mais pour le moment, nous avons tous les détails dont nous avons besoin pour ajouter un bouton de commande sur notre page Web. Dans le cadre de vos devoirs, rendez-vous sur Youtube et recherchez la chaîne officielle de Gloria Food Et découvrez comment configurer chaque détail sur le bord Gloria Food de votre compte Gloria Food afin de le faire vérifier Mais comme je l'ai dit, nous avons tous les détails dont nous avons besoin. Et dans la prochaine leçon, nous allons ajouter les boutons de commande et les boutons de réservation sur nos pages. Je vous verrai donc dans la prochaine leçon. 29. Buttons du système de commande: Maintenant, nous en avons presque terminé avec ça. Passons aux paramètres. Nous avons maintenant ces deux boutons. Si je copie ceci, voyons si nous pouvons l'afficher quelque part ici dans le front-end. Voici la page « À propos ». Laisse-moi clore ça. Passons à la page d'accueil ici. Modifiez avec Elementor, laissez-moi faire le Gloria Nous y voilà. Ajoutons un code court juste là. Je vais coller ce code court ici. C'est le code abrégé que nous avons reçu de Gloria Food. Ça y est. Maintenant, si nous mettons à jour cette page et que nous cliquons sur Aperçu. Si nous cliquons dessus, pouvons-nous charger le menu ? Bistro Yami ? Bien entendu, ce sont les aliments que nous avons sélectionnés. N'oubliez pas que vous pouvez toujours revenir en arrière et créer ces aliments. Vous pouvez passer une commande de brocolis. Vous pouvez sélectionner ce que vous voulez ici, de la mayonnaise, de l'ail, de la moutarde. Si vous avez des instructions spéciales, j'ai vraiment faim. Et vous pouvez sélectionner la quantité. Ajoutez ensuite au panier. Maintenant, une fois qu'il est ajouté à la carte, vous pouvez accéder à la carte et fournir vos coordonnées ici. Si vous suivez ces étapes ici, vous recevrez la commande sur votre téléphone. Vous aurez la possibilité d'accepter immédiatement. Maintenant, une fois que vous recevez une commande, vous verrez également une alerte indiquant la première commande. Vous souhaiterez peut-être confirmer auprès de ce client en appelant avant d'accepter cette commande sur votre téléphone. En cliquant sur Accepter, vous pouvez appeler le client car son numéro de téléphone sera affiché sur sa commande. Bien entendu, comme vous pouvez le voir sur votre téléphone en ce moment, vous pouvez voir le numéro de téléphone une fois que vous les avez appelés et que vous leur avez confirmé si vous voulez leur dire de payer avant qu'ils ne passent une commande, vous pouvez le leur dire lors de votre appel téléphonique. Et puis, s'ils paient 50 % ou 100 %, vous pouvez désormais accepter la commande sur votre application. J'espère que cela a du sens. Ce n'est pas parce que vous ne pouvez pas accepter les paiements en ligne que vous ne pouvez pas appeler un client qui a passé une commande et lui demander payer avant de pouvoir accepter sa commande sur votre application. Je pense que c'est un très bon système. Si vous deviez payer un développeur Web pour créer un tel système, cela coûterait très cher. Mais ici, vous avez un site Web qui fonctionne pleinement et vous avez également une application, une application pour téléphone portable qui fonctionne pleinement. C'est un excellent système à avoir pour le site Web de votre restaurant. Laisse-moi clore ça. En gros. C'est ainsi qu'il faut procéder. Oh, attendez. Avant de partir, je veux que nous le stylions. Tout d'abord, je vais le sélectionner , passer au style, copier ce code, puis retourner à cet endroit. Personnalisez. Nous allons maintenant pouvoir personnaliser ce bouton pour la couleur. Nous pouvons le sélectionner et le changer X, puis y coller notre code. OK, on ne peut pas le coller. Je ne sais pas pourquoi. E09 cent 48 948 exactement 48 948 exactement . Maintenant que nous le pouvons, nous pouvons également ajouter une partie de ce rayon de bordure. Comme vous pouvez le voir, c'était 50. Maintenant, il est arrondi. Nous pouvons lui donner ce rembourrage de 20, disons. Vous pouvez également modifier le texte. Ce que dit le texte, définition, menu et ordre. Maintenant, si nous actualisons cette page. Allons-y. N'oubliez pas que j'ai mentionné qu'il s'agit d'espaces réservés, donc ce sont les boutons que nous utiliserons ici Maintenant, vous remarquerez que nous avons également ces éléments de Gloria Food Au lieu d'utiliser ce bouton principal, nous pouvons simplement faire glisser ce bouton de commande ici. Nous sélectionnons cette copie, sélectionnons le style de collage. Supprimons maintenant cela. Nous avons maintenant notre bouton « Ouvrir la mise à jour ». Si nous prévisualisons les modifications, si nous utilisons maintenant ce bouton, il fonctionne parfaitement car il s'agit d'un bouton élémentaire de Gloria Food En revenant ici, nous pouvons également sélectionner une table de réservation. Réservation. Sélectionnez cette copie, sélectionnez-la, cliquez avec le bouton droit de la souris, collez le style, supprimez cette mise à jour. Prévisualisons les modifications. Regardons maintenant les réservations. Nous y voilà. Nous pouvons simplement suivre et passer notre commande. Maintenant, ces boutons sont les mêmes que ceux que j'ai utilisés ici. Il s'agit de réservations de tables. Nous pouvons le dupliquer. Je ne sais pas ce que j'ai mis ici sur le site d'origine. Laisse-moi rentrer chez moi. Ici, nous avions réservé des tables. Oui, je vais aller ici et le dupliquer. Portez-le, déposez-le juste là. Sélectionnez cette copie, sélectionnez-la, cliquez avec le bouton droit de la souris, collez le style, puis je supprimerai la copie inférieure. Passons en revue les modifications. Vous pouvez répéter ces boutons d'appel à l'action sur tout le site Web, car il est toujours très important d'avoir un appel à l'action. Maintenant pour le menu ouvert, je crois que j'avais celui-ci ici, dupliqué sur une page de destination. Vous devez inciter les gens à agir, et vous les incitez à agir en ajoutant boutons à des endroits stratégiques. Je vais sélectionner cette copie, sélectionner ce style de collage, puis je vais le supprimer. Quelqu'un regardera ces quelques repas ici. Ensuite, ils cliqueront sur Menu et commanderont. Mets-le à jour. Allons ici et voyons cela dans menu d'action et dans l'ordre. Nous y voilà encore une fois. Il y a encore une chose dont je viens de me souvenir. Ce bouton doit mener à la page À propos. Si je le sélectionne, je peux indiquer votre URL À propos. Ensuite, nous pouvons l' ouvrir dans un nouvel onglet, le mettre à jour et passer en revue les modifications. Bien, si quelqu'un veut en savoir plus sur les raisons pour lesquelles vous mangez sainement, il peut cliquer dessus et accéder à la page À propos. Tout ce que tu veux y mettre. N'oubliez pas que nous sommes censés avoir ce bouton de réservation de table. Allez-y et modifiez cette page. Vous pouvez simplement copier. Vous pouvez venir ici et dire « copier », puis «   coller » ce bouton ici. C'est un exercice rapide pour vous, ce n'est pas très difficile, alors allez-y et essayez-le. Et je pense que c'est tout ce que j'avais pour le système de commande maintenant. Je pense qu'il est temps de rendre le site web adaptatif sur différents appareils. Dans la leçon suivante, voyons comment procéder. 30. En-tête réactif: Nous sommes sur le point de terminer le cours. Le site Web a déjà l' air génial. Nous avons fini de travailler sur le système de commande, le système de réservation, mais nous devons rendre le site Web impressionnant sur différents appareils. Il s'affiche déjà bien sur les ordinateurs de bureau, mais nous devons nous assurer qu'il s'affiche bien sur les téléphones portables et les tablettes Pour commencer, appuyons sur Control Shift. Contrôlez la touche Shift sur votre clavier. Juste pour faire apparaître les outils de développement de votre navigateur. J'utilise Chrome maintenant. Voici à quoi ça ressemble sur Samsung Galaxy. Maintenant, en regardant ceci, comme vous pouvez le voir, voici notre menu. Si je clique, ça a l'air très moche. D'accord, c'est un peu difficile de travailler avec ça. Permettez-moi simplement de passer au responsive afin que nous puissions développer cela et revenir en arrière. En gros, c'est à ça que ça ressemble, comme vous pouvez le voir. Voici mon menu, Togo, voici mon logo. Le site Web n'a pas l'air très impressionnant. La première chose que nous voulons faire est rendre l'en-tête réactif, que la barre de navigation et le logo changent ici. Je veux passer la souris dessus et dire mon en-tête. Cela nous mènera à l'endroit où nous pourrons modifier l'en-tête. Nous y voilà, tout d'abord, je vais appuyer sur cette icône du mode réactif , puis je vais passer aux téléphones portables. Comme vous pouvez le voir, n'oubliez pas qu'ils sont à l'intérieur de ce conteneur, c' est-à-dire à l'intérieur de cet autre contenant. Dans ce conteneur, ils occupent tous les deux 100 % de la largeur. Si vous regardez ce petit contenant contenant le logo, c'est 100 % et ce 100 %. Et si nous choisissions le logo, revenons à l'intérieur de la mise en page et disons pourcentage et le laissons occuper 30 % Sélectionnons-le également maintenant, il devrait occuper l'espace restant. Je pense que 70 % choisissent des cellules pour cent. Comme vous pouvez le constater, 70 % ne se nourrissent pas. Si je le réduis, il le poussera là où il convient. Pense à 60. Sélectionnons-le. Tout d'abord, cela devrait occuper 100 %. D'accord, mettons cela à jour pendant une seconde. Permettez-moi de sélectionner ce conteneur contenant les deux objets avancés. Brisons les marges et le rembourrage. Permettez-moi de sélectionner le conteneur contenant le menu. Voyons si 64 % sont d'accord. Je suis d'accord avec ça. Très bien, alors allons-y. Maintenant, si nous revenons ici, actualisons cette page et passons au Samsung Galaxy Eight. Rafraîchissons-le encore une fois. Très bien, il semblerait que nous ayons affecté ce contrôle. Ce conteneur contenant ces deux conteneurs doit occuper 100 % pour le mettre à jour. Maintenant, si nous revenons ici et contrôlons le shift R pour le rafraîchir complètement. Oh attends, je pense que c'est à cause de ce texte ici , comme vous pouvez le voir. Revenons tout d'abord à la page d'accueil. Passons au téléphone portable. Permettez-moi de sélectionner ce style de typographie, de le réduire, de mettre à jour, puis de revoir la page Génial Oui, c'est la taille du texte qui le faisait occuper la moitié parce que le texte débordait à l'extérieur Nous pouvons également le réduire. Je n'arrive pas à le sélectionner. Laissez-moi juste rafraîchir parce que. L'en-tête n'a pas pris effet dans cet éditeur. Très bien, passons à nouveau en mode réactif. Maintenant, comme vous pouvez le voir, ça a l'air génial. Et je peux le sélectionner, la classe mondiale peut aussi le réduire. Nous pouvons augmenter, oh attendez la marge, les paramètres à ce sujet. Pour les délicieux repas, nous pouvons réinitialiser cela, revenir ici et augmenter la taille, mais aussi diminuer la hauteur de la ligne. Mets-le à jour. Très bien, maintenant allons-y et passons aux paramètres d'en-tête. Sélection de cet élément. L'élément. Passons à l'emballage du menu. Avant d'aller où que ce soit, changeons le style du hamburger, le style du hamburger. Comme vous pouvez le voir, nous avons le hamburger et fermer c'est le hamburger tog, voici le Togo fermé Commençons par changer ce type d'arrière-plan. Faisons en sorte qu'il soit coloré. Donnons-lui ce jaune, cet or pour sélectionner cette copie, comme ça au survol. Tout d'abord, nous ne voulons pas non plus qu'il y ait de frontière. Nous voulons que le fond passe au blanc comme ça. Mais maintenant, nous voulons que la couleur de l' icône soit noire. Ces lignes intérieures mettent cela à jour. Maintenant, si nous revenons ici et que nous le réinitialisons. Rafraîchissez ça. Allons-y. Développons maintenant ce menu. Pour l'emballage du menu. Oh attends, nous sommes censés avoir ce pourcentage maintenant. Nous pouvons l'augmenter ou le diminuer, car nous ne voulons pas qu'il occupe tout l'écran. Nous pouvons maintenant ajouter un logo mobile. Revenir au logo du menu mobile du contenu. Ajoutons notre logo là-bas. Allons-y. Maintenant, si nous cliquons dessus, il a ce logo, mais il semble étiré. Donc, pour en revenir au style intérieur, largeur du logo du menu mobile peut la réduire ou l'augmenter . Et la hauteur. Je pense que je l'aime comme cet emballage de menu. Faisons en sorte qu'il soit mobile. Emballage du menu, fond noir. Réduisez l'enveloppe du menu. Style des éléments de menu. Passons-le en blanc Au survol, il doit avoir cette couleur dorée lorsqu'il est actif, il doit également avoir cette couleur dorée Finalisons maintenant avec le hamburger togolais fermé. Nous avons le Togo fermé, la couleur de l'icône doit rester noire. Mais maintenant, le hamburger, le type de fond, cette couleur dorée Pouvons-nous l'aligner ? Rapide observation, juste ici. Lors du montage de cette vidéo, je me suis rendu compte qu'au lieu d'essayer de l'aligner vers la gauche, nous aurions dû augmenter la largeur de cet emballage de menu afin qu'il puisse être aligné de gauche à droite, comme ceci Accédez donc à la largeur de l'emballage du menu. Et augmentons cela avec, jusqu'à ce moment-là, ils sont côte à côte. En fait, élargissons-le un peu jusqu'à ce point. Alors mettons à jour. Comme je l'ai mentionné, j'enregistre cette mise à jour lors de la modification de cette leçon. Cela signifie que j'avais déjà enregistré le reste de cette leçon, les leçons restantes et la fin du menu. Les leçons restantes seront toujours cette taille et seront mal alignées Mais ne t'inquiète pas. Au moins maintenant tu sais quoi faire. Bien, on ne peut pas l' aligner sur la gauche. Disons simplement mettre à jour, actualiser en cliquant dessus pour ouvrir le menu. Bien sûr, cela ne figure pas sur le site Web final que l'utilisateur voit. C'est pour vous en tant qu'administrateur, c'est pourquoi il en fait abstraction En gros, c'est ainsi que vous pouvez configurer l'en-tête pour qu'il réponde aux différents appareils. Je vais passer en mode tablette. Bien sûr, comme vous pouvez le constater, cela n'a pas l'air génial. Attendez, passons à la tablette. Ici, dans les paramètres d'en-tête, je veux sélectionner ce conteneur, lui donner également 100 %. Maintenant , ils y resteront. Mettre à jour. Nous devons maintenant répéter les mêmes paramètres pour la version tablette. Commençons par le logo du menu mobile. Réduisons la largeur. Je pense que c'est une bonne taille. Ça a l'air bien, mais rendons-le noir. Nous voulons accéder à l' emballage du menu et le rendre noir. Ensuite, la couleur du style des éléments de menu doit être blanche. En vol stationnaire, il devrait être cet or. Juste comme ça. Mettre à jour. Aperçu. Très bien, nous allons faire un aperçu ici. Assurons-nous de le visionner sur iPad mini. Allons-y. Nous pouvons donc augmenter légèrement la taille du logo. Si je sélectionne l'élément image, vous pouvez augmenter la largeur, peut-être jusqu'à ce point, le mettre à jour. Ensuite, nous pouvons l'actualiser et voir à quoi il ressemble exactement. Je pense que j'aime son apparence actuelle. Voilà comment rendre l'en-tête réactif sur différents appareils. Dans la leçon suivante, rendons le reste de la page responsive. Je te verrai bientôt. 31. Page d'accueil réactive: Nous venons de terminer de rendre l'en-tête réactif. Je vais fermer cet éditeur. Il ne nous reste plus que la page d'accueil. N'oubliez pas qu'il s'agit de la page d'accueil. Je vais maintenant appuyer sur le contrôle R pour actualiser cette page afin de refléter le nouvel en-tête. C'est bon, allons-y. Passons maintenant en mode réactif. Passons en mode tablette. Voici à quoi ressemble le site Web sur les tablettes. Si je sélectionne les textes qui peuvent entrer dans le style, réduisez la taille comme ça. Je trouve que ça a l'air génial comme ça. Je souhaite également sélectionner le conteneur contenant tout cela. Accédez à Avancé, puis pendant que celui-ci est lié, donnez-lui un rembourrage de 20 tours Génial Passons maintenant à ceci. Je veux, sélectionnons-le, passer à la typographie de style Faisons en sorte qu'il soit de taille 40. Réduisons la taille à 1,1 Nous pouvons également réduire cet écart à 30. Disons 20 par round. Nous pouvons lui donner un rembourrage de 20. Sélectionnez ce conteneur, passez à l'option avancée 20 pour tous les niveaux. Je trouve que c'est génial, tel qu'il est. Mais nous voulons porter ce chiffre à 40 par souci d'uniformité. Répétons la même chose ici, 20 maintenant à droite et à gauche, mais 100 en haut et en bas, 2 200 100 en dessous de 20, à gauche À l'heure actuelle, 100 meilleurs comme ça. Répétons la même chose ici. 20 de niveau avancé sur tous les plans. Avast, supprime-le. Lien 2,120, 100, 20, mise à jour complète qui prévisualise les modifications Je trouve que ça a l'air génial sur tablette. Maintenant, si nous passons aux écrans mobiles, voici à quoi cela ressemble. Je pense que cela semble déjà bien avec les paramètres de la tablette qui viennent être appliqués au-dessus des paramètres du téléphone portable. Pour en revenir, passons au Samsung Galaxy. Voilà à quoi ça ressemble sur un Samsung. Je trouve que ça a l'air génial. Mais maintenant, nous n'avons pas travaillé sur la photo, alors allons-y et faisons-le. Je trouve que ça a l'air génial. Maintenant, bien sûr, nous allons faire la photo séparément. Oui, faisons la photo séparément. Disons que c'est une leçon. Je te verrai bientôt. 32. Pied de page réactif: Comme vous l'avez remarqué, la page de destination est désormais superbe, sauf pour ce qui est de la nourriture. Faisons maintenant quelque chose à propos de la transition alimentaire. y allons pas. Il suffit de cliquer ici avec le bouton droit de la souris et d'ouvrir un nouvel onglet pour ouvrir la page de destination dans un nouvel onglet. Maintenant, bien sûr, passons le curseur dessus et cliquons sur Mes aliments, car nous voulons travailler sur la nourriture dès maintenant Parce que nous en avons fini avec ça, je vais le fermer. C'est notre point de vue sur l'appareil. Voici notre photo, prête pour une retouche réactive. En sélectionnant le mode réactif, passons en mode tablette, et voilà à quoi ça ressemble. Tout d'abord, je veux sélectionner le logo et le faire à 100 %. Je veux aussi sélectionner le contenant qui les contient tous et lui donner 100, 20 premiers côté 120. Mettez ça à jour. Je trouve que cela s' affiche bien sur les écrans mobiles. Permettez-moi de le réduire un peu pour qu'il soit ajusté comme ça. Voilà à quoi ça ressemble sur les tablettes. Passons aux écrans mobiles. C'est ainsi que vous pouvez le mettre à jour. Mais nous devons les sélectionner et les placer au milieu. Mettez ça à jour. Maintenant, si nous passons à cette actualisation, commençons par le début. C'est le top. Faire défiler OK, on peut le mettre au milieu, mais on peut aussi le laisser là. Mais comme ces autres sont au milieu, ils doivent également être centrés avec le bouton. Nous allons le faire jusqu'au pied. Tout semble bon, mais maintenant c'est parti. Mais avant de terminer, permettez-moi de vous donner un aperçu. Cliquez sur le logo pour accéder à la page d'accueil, puis modifiez-le avec Elementor, passez au téléphone portable, puis faites défiler la page vers le bas pour sélectionner le texte, alignez-le au centre Ce texte est également aligné au centre. Et le bouton va également au centre. Tout le reste est centré. Si je prévisualise ce changement de contrôle, je trouve qu'il a maintenant l'air génial. Voilà comment rendre le pied de page réactif. Nous avons également apporté cet ajustement à la page d' accueil pour plus d'uniformité. Et c'est la fin de cette leçon. Voici un petit exercice, car vous avez vu comment nous avons pu rendre la page d'accueil, la page de destination réactives, destination réactives, ainsi que l'en-tête et le pied Je vais maintenant vous faire un petit exercice. C'est à vous de rendre le reste des pages réactives en utilisant les mêmes principes que nous avons utilisés pour rendre la page d' accueil réactive. s'agit d'un exercice rapide auquel vous pouvez participer et voir si vous êtes en mesure de finaliser ce site Web Nous avons déjà fait les parties les plus difficiles, maintenant c'est la partie la plus facile. Alors allez-y et terminez la galerie d'informations et les pages de contact. Cela dit, j'ai quelques points cruciaux à souligner. Je vous verrai donc dans la dernière leçon. 33. Réflexions finales: Je voudrais prendre un moment pour vous féliciter d'avoir terminé ce cours si vous êtes toujours là. Après toutes ces leçons, cela signifie que vous voulez vraiment apprendre à créer sites Web avec Wordpress ou que vous êtes vraiment sérieux au sujet du site Web de votre restaurant. Le fait que vous soyez ici signifie que vous avez terminé de créer votre site Web. Et je veux juste te remercier avoir choisi d'apprendre de moi. Bien sûr, si c'est la première fois que vous me voyez, j'ai de nombreux autres cours que vous pouvez suivre simplement en consultant mon profil ici sur le partage des compétences. Vous apprendrez à créer d'autres types de sites Web et vous pourrez améliorer considérablement vos compétences Wordpress. Cela dit, je tiens également à souligner que le site Web que nous avons créé n'est pas du référencement. Optimisé. SEO signifie optimisation pour les moteurs de recherche. Cela signifie que vous devez rendre votre site Web visible pour les moteurs de recherche tels que Google. Et lorsque les internautes consultent Google et recherchent des sites Web de restaurants à proximité, votre site Web devrait pouvoir apparaître dans les résultats de recherche. Sinon, vous serez simplement invisible et vous n'obtiendrez pas le trafic dont vous avez besoin pour développer votre activité. Vous devez donc apprendre à rendre votre site Web visible pour les moteurs de recherche. La bonne nouvelle, c'est que j'ai un cours complet ou cours sur le partage des compétences que vous pouvez suivre pour apprendre à optimiser votre site Web. Nous couvrons tout ce que vous devez savoir sur Wordpress, le référencement. Cela signifie qu'à la fin du cours, vous aurez optimisé votre site Web. Encore une chose, je veux juste vous demander une petite faveur, qui prendra moins d'une minute. Cela prendra environ 40 secondes. Pourriez-vous prendre un moment pour laisser un commentaire sur ce cours ? Dites-moi ce que vous avez pensé du cours. Qu'est-ce qui vous a plu ? Vous ferez également savoir aux autres étudiants potentiels à quoi s'attendre de ce cours. Une autre chose qui se produit lorsque vous laissez un avis est que l'algorithme Skillshare examine les différentes évaluations laissées pour chaque cours et détermine si le cours et détermine si le cours doit être présenté à un plus grand nombre d'étudiants Vous aiderez cette classe à être plus visible auprès d' plus grand nombre de futurs étudiants qui recherchent ce type de contenu qui signifiera tout pour moi. Il suffit de regarder en dessous de ce lecteur vidéo, il y a un bouton d'évaluation ou de commentaire qui permet de laisser un commentaire. Dites-moi comment j'ai performé et je l'apprécierai vraiment. Sinon, cela marque la fin de tout cela.