La Masterclass complète The 2022

1. Introduction à l'élément de cours: Très bien, alors bienvenue officiellement au cours. Et avant de commencer, lambdas vous donnent quelques points, quelques conseils et conseils sur ce à quoi vous attendre lorsque vous suivez le cours. Maintenant, ce sera le site que nous allons construire ensemble. C'est ce qu'on appelle notre voyage de passeport. C'est pour une agence de voyages fictive. Ils aident essentiellement les touristes à planifier leurs vacances de rêve, si vous voulez. Comme vous pouvez le voir maintenant sur la page d'accueil, nous avons le logo à gauche, le menu principal à droite. Je vais aussi faire fondre la bande d'arrière-plan dans l'en-tête. Ici, nous avons une image statique. Cependant, je vais vous montrer une alternative sur l' utilisation de la vidéo, notre arrière-plan à la place. Si vous préférez utiliser des vidéos, je vais vous montrer comment procéder. Pour le reste de la page d'accueil, j'aurai différentes sections avec différents types de contenu. J'aurai la section Services. Il y aura une section galerie avec des images du monde entier, une section blog mettant en valeur les une section blog mettant articles de tilde lithos du blog. Mais il va aussi falloir faire quelques paquets section que nous avons utilisé. Et enfin, nous aurons le pied de page. Nous allons également créer deux pages supplémentaires. En plus de la page d'accueil. Je vais vous montrer comment construire les limiteurs de page de blog pour tout obtenir ici. Nous avons tous les articles additionnés sur la page du blog. Ici, vous allez avoir les articles de blog. Je vais donc vous montrer comment créer ce genre de design là où vous avez, supposons deux et par-dessus. Ensuite, vous aurez les différentes publications des différentes catégories. Et enfin, je vais vous montrer comment créer la page de contact qui aura un formulaire de contact très simple. Laissez-moi juste vous montrer. Ce sera le formulaire de contact. Donc, au départ, nous allons utiliser la version gratuite d'Elemental et parce qu'elle ne dispose pas d'un grand nombre de fonctionnalités de la version payante d'Elemental. Nous allons utiliser trois plug-ins supplémentaires comme compensation. L'un sera l'élément En-tête et Pied de page par force de remue-méninges pour construire notre en-tête et notre pied de page. Nous utiliserons les plugins additionnels essentiels pour nous fournir quelques éléments supplémentaires qui seront utilisés pour créer certains types de contenu. Ensuite, nous utiliserons également le plug-in WP Forms pour notre formulaire de contact. Mais une fois que nous aurons utilisé le pool élémentaire, nous n'aurons plus besoin de ces plug-ins. Avec Elemental Pool, nous pouvons faire tellement de choses et je vais vous montrer comment les utiliser. De plus, il ne s'agit pas seulement du style et du Zan. Je vais vous montrer comment rendre le site web réactif. Ainsi, s'il est visualisé sur un appareil mobile ou sur une tablette, il sera réactif. Comme vous pouvez le constater, c'est pour mobile et il est réactif. Maintenant, je vais également vous proposer toutes les vidéos et images que j'ai utilisées. Et en fait, toutes les images, à l' exception de celle-ci, ont été éliminées en ce moment. Toutes ces autres images, ces images qu' ils ont prises moi-même parce que je voyage beaucoup. Et si vous souhaitez utiliser les images, vous pouvez le faire. Mais si vous allez l'utiliser à des fins commerciales, veuillez indiquer qu' elle pourrait alors pour mon compte Instagram, mon compte Instagram est choisi Xander, j'ai un très, très petit suivi, mais je J'essaie de développer mon suivi sur Instagram parce que je pense beaucoup de photos. Donc, si vous aimez voyager à travers le monde, voici quelques photos du monde entier. Ne manquez pas de me suivre sur les pelles Instagram de Sandra. Bienvenue à nouveau au cours. J'espère sincèrement et je crois que vous apprécierez ce cours sur l'élémental. Et le cours est divisé en plusieurs sections, comme je l'ai dit, la première section. En fait, avant de nous lancer dans le propria élémentaire lui-même, je suppose que vous êtes tout nouveau dans la création sites Web et que vous ne savez rien sur l'hébergement Web d'un domaine Web. Dans la section suivante, je vais vous montrer comment vous pouvez vous procurer un hébergeur Web et le domaine Web. Si vous en avez déjà ou si vous connaissez bien ce sujet, sautez cette section et passez directement à la section où nous commencerons à créer le site Web à l'aide la version gratuite d'Elementor. Et ensuite, dans la section suivante, nous nous concentrerons sur la conception réactive, façon de rendre ceux qui sont réactifs. Ensuite, nous aurons la version payante du pool élémentaire élémentaire. Vous pouvez également travailler avec Elemental Pool pour améliorer la fonctionnalité et la conception de votre site Web. Et puis la toute dernière section de ce cours contiendra les mises à jour sont du contenu supplémentaire où choisir spécifiquement différents types d'éléments de différents types de caractéristiques élémentaires. Et développez-vous et montrez comment vous allez jusqu'au savon le plus complet. Encore une fois, j'espère vraiment que vous apprécierez et adorerez ce cours. Merci beaucoup d'avoir regardé. Commençons maintenant. 2. Première chose: Très bien. Tout d'abord, avant de commencer, il y a quelques choses que j'aimerais que vous fassiez. Tout d'abord, et la première chose ici, c'est que je veux que vous installiez un thème appelé thème halo. C'est un simulateur. C'est en fait par Elemental d'eux-mêmes. Nous allons être accueillis avec ce thème. Alors, s'il vous plaît, installez et activez le thème. Et puis, ce que je veux que vous fassiez, c'est d'aller de l'avant et de créer des messages qui vont entrer en jeu. J'ai déjà créé environ neuf articles ici, vous pouvez voir que j' ai trois catégories différentes d'Asie, Europe et d'Amérique du Sud. Et chacune de ces catégories comporte trois postes différents. Maintenant, je vais vous fournir le fichier XML. Ils contiendront tous ces messages. Vous pouvez simplement les importer sur votre site Web. Et ensuite, pour les images également, je vais également fournir un lien vers Dropbox. Vous aurez accès à toutes ces images que vous pouvez utiliser. Beaucoup de ces images sont destinées mon propre compte Instagram, mais vous pouvez les utiliser sur votre propre site Web. La seule chose que je demande, c'est que si nous allons utiliser mes images sur votre site Web et que vous gagnez de l'argent, site Web drôle, veuillez mentionner que vous avez ces photos de mon compte Instagram, alors s'il vous plaît fais-le. Bombe Levite pour vous tous les messages contenus via un fichier XML et aussi les images que j'ai utilisées. J'ai également créé quelques pages. J'ai la page À propos, la page Articles, qui serait comme la page du blog, une page de contact, un pigeon en vedette, bien sûr, la page d'accueil. Également. Lorsque vous avez terminé, rendez-vous ici dans Paramètres, accédez à la lecture, puis définissez votre page d'accueil sur la page d'accueil. Donc, choisissez essentiellement une page statique ici. Et puis dit page d'accueil pour être à la maison. Enfin, j'ai également créé un menu. Accédez à Menus Apparence , puis créez votre menu principal. peux dire que j'ai beaucoup, beaucoup sans nom appelé MainMenu. Et j'ai ajouté à la maison des articles et des contacts. C'est donc une petite tâche que vous devez faire. Encore une fois, je vais vous fournir le fichier XML pour les publications et les pages, ainsi qu'un lien vers Dropbox pour les images utilisées. 3. Installer Elementor et paramètres généraux: Maintenant que vous avez ajouté tout le contenu nécessaire à votre science, il tente maintenant d' installer quelques plugins. Et bien sûr, le tout premier plugin que nous allons installer sera des éléments avant de le faire, j'ai trois plugins déjà actifs sur mon site, Saigon optimiseur et sécurité car j'héberge avec SiteGround. Et puis importateur WordPress, si vous avez importé le fichier XML que je vous ai fourni dans la vidéo précédente, vous auriez probablement utilisé l'entrée WordPress de notre plugin. J'ai donc fait exactement la même chose pour moi-même. C'est pourquoi j'ai le plugin actif là-bas. Mais nous allons le faire maintenant, c'est que nous allons ajouter trois plugins différents. Et le premier va évidemment être élémentaire. C'est le plug-in principal avec lequel nous allons travailler. C'est le seul ici. Et bien sûr, c'est la version gratuite d'Elemental. Mais comme il s'agit de la version gratuite d'Elementor, elle est un peu restreinte en termes de fonctionnalités disponibles. Pour compenser cela, nous allons installer deux autres plug-ins sur le tout premier plug-in ici juste à côté d'Elemental. Il s'agit des atomes essentiels pour Elemental by WPF Developer. Je vais également installer le plug-in. Et enfin, nous allons installer celui ici, qui est l' en-tête et le pied de page élémentaires accumulés par la force du brainstorming. Allons donc installer le plug-in. Et oui, je vais aller de l'avant et maintenant aux plugins installés. Cela va aller de l'avant et les activer un à la fois. Active le générateur d'en-tête et de pied de page, puis active Adams pour l'air essentiel. Mentor. Maintenant, une fois que vous avez activé les atomes essentiels pour Elementor, vous pouvez voir une page. En fait, permettez-moi d'aller de l'avant et de cliquer sur le lien ici. Parce que ce n'est pas la première fois que j' installe le plugin Essential Atoms sur ma page. Vous ne l'êtes pas, je ne vois pas la page d'accueil. Il est donc très probable que vous ayez vu une page différente où ils diront : Hé, bienvenue. Choisissez les éléments avec lesquels vous souhaitez marcher. Il suffit de cliquer sur Suivant, Suivant, Suivant, Suivant, ils vous proposeront également la mise à niveau pour payer la version payante des atomes essentiels. Il suffit d'ignorer cela. Il suffit de cliquer sur Suivant, Suivant, Suivant, puis sur Terminer. Et puis, ce serait essentiellement la page que vous verriez. Mais un peu plus tard. Jetons un coup d'œil aux éléments sont d'abord des paramètres. Qu'avons-nous exactement ici ? La première chose ici va être les types de post. Si vous travaillez avec des types de publications personnalisés, vous aurez également la possibilité de les enregistrer ici. Mais je ne travaille que sur des publications et des pages. Je vais donc garder ça pour vérifier. Maintenant, il indique les couleurs par défaut désactivées. Cocher cette case désactivera les couleurs par défaut des éléments et fera hériter élémentaire des couleurs de votre thème. Maintenant, si vous utilisez un thème avancé comme Astra ou Ocean, WP et ainsi de suite. Et vous souhaitez utiliser les couleurs de votre thème. Vous allez décocher ces deux cases ici. Mais parce que nous utilisons le thème halo, qui est un thème très, très léger, Elementor va faire tout le poids pour le style, le design et la fonctionnalité. Ce que je vais faire, c'est que je vais vraiment cocher ces deux cases. Je suis désolé. Je vais décocher ces deux cases parce que nous voulons en fait utiliser les couleurs par défaut fournies par notre élémental, donc je vais garder ces deux cases non cochées. Et enfin améliorer l'élément. Ou si vous souhaitez contribuer à Elementor, vous pouvez venir ici et cocher la boîte à cases. Je ne vais pas le faire. Passons au style. Nous en parlerons un peu plus tard. En fait, les intégrations si vous travaillez avec Google Maps et que vous devez installer la clé API, c'est exactement là que vous devez l'installer. De plus, si vous finissez par installer d'autres plug-ins comme PayPal ou Stripe ou des choses comme ça. Et vous devez les intégrer à Elemental. C'est sur cette page que vous trouverez les options pour le faire. Vous disposez de l'onglet Avancé. Nous n'avons pas besoin de changer quoi que ce soit ici. Fondamentalement, la plupart d'entre eux sont destinés à la sécurité et à notre vitesse. Si vous remarquez un problème avec Elemental, peut-être que votre site devient très, très, très lent. Vous pouvez venir ici maintenant et basculer la méthode d'impression CSS à partir de fichiers externes avec intégration interne. Mais ne faites cela que si vous rencontrez des problèmes avec votre vitesse. Et ce n'est pas parce que vous utilisez un autre plug-in gonflé ou que votre hôte Web n'est pas assez bon ou que des choses de ce genre n'ont changé cela qu'en dernier recours. Il en va de même pour le commutateur, notre méthode de chargeur d'éditeur. Si vous souhaitez résoudre des problèmes sur votre site Web, vous devez venir ici et l'activer. Le fichier non filtré télécharge élémental a un peu comme une sécurité intégrée dans laquelle si vous essayez de télécharger images sur le système élémentaire, élémental, nous allons jeter un coup d'œil et voir si oui ou non le fichier est en fait un coffre-fort à utiliser en activant cette fonctionnalité, qui consiste à activer les téléchargements de fichiers non filtrés. Vous souhaitez prendre le risque de télécharger des fichiers sur votre site Web. Je vous recommande donc de garder celui-ci désactivé. Les mêmes objectifs avec Google Fonts se chargent à nouveau, vous n'avez rien à changer ici. Il suffit de garder celui-là par défaut. Si vous souhaitez travailler avec Font Awesome For, vous pouvez entrer ici maintenant et activer cette fonctionnalité. Et enfin, vous avez des expériences. C'est ici que vous aurez accès à toutes les dernières fonctionnalités sur lesquelles Elemental travaille actuellement. Vous pouvez voir le statut de la plupart d'entre eux étant bêta, bêta, alpha, bêta, etc. Dans la plupart des cas, vous souhaitez conserver la valeur par défaut. Mais il y a une commande académique que vous activez. Et comme l'amélioration du chargement des ressources, cela vise à réduire la quantité de code sur chaque page créée avec élémental. Cela signifie que vos pages seront généralement chargées plus rapidement, même si c'est en version bêta, je l'utilise depuis un même si c'est en version bêta, je l'utilise depuis certain temps et cela semble fonctionner. Je vais donc aller de l'avant et activer le chargement amélioré des ressources. Je vais également activer le chargement amélioré de notre CSS, s'il vous plaît même à l'avenir. Sur ce site Web sur lequel vous avez travaillé, vous remarquez que vous voudrez peut-être revenir ici et désactiver cela aussi, mais je pense que ça devrait aller. Je vais donc venir ici et sauver ces changements. Ok, une autre chose que je veux mentionner très rapidement, c'est que vous avez un gestionnaire de règles. Si vous avez plusieurs types d'utilisateurs sur votre site avec différents types de rôles. Ici, vous pouvez déterminer qui peut réellement utiliser un exemple spécifique à un élémentaire. Vous ne voulez pas qu'un utilisateur ayant le rôle de contributeur travaille avec elementary common ici pour tout contribuer et simplement ne pas accéder à l'outil de modification. Avec la version payante des éléments, vous avez accès à davantage de fonctionnalités. Et ensuite, nos outils ici. Celui-ci est en fait très, très, très important, régénérer des CSS et des données. Si vous apportez des modifications telles la couleur de votre texte, qui indique si un texte vous enregistrez ces modifications et que vous ne voyez pas ces changements, prendre effet sur votre science tant qu' il ne le faut pas mise en cache depuis votre ordinateur ou depuis votre serveur. Vous voudrez peut-être venir ici et essayer régénérer des fichiers et des données. Eh bien, cela fera que cela va reconstruire la feuille de style CSS et j'espère que cela devrait résoudre le problème et que vous pourrez voir vos modifications. barre de débogage en mode sans échec de la bibliothèque de synchronisation va ignorer celle-ci pour le moment, remplacera l'URL. Si vous êtes un lien rompu sur votre site, vous souhaitez les pointer vers de nouveaux liens. Vous venez ici à l'ancien lien, allez dans la deuxième case, ajoutez le nouveau lien et je clique simplement sur l'URL de la police. Et vous avez corrigé le contrôle de version du livre et du lien. Si, pour une raison quelconque, à l' avenir, vous passez à la dernière version d'Elementor et que quelque chose se brise de votre côté, peut-être que votre site ne fonctionne pas aussi bien que U22. Vous pouvez venir ici dès maintenant et simplement revenir à la version précédente. C'est à ça que sert son avenir ici. Si vous voulez devenir un meilleur dégustateur et travailler avec les versions non officielles d'Elemental qui sont toujours en cours. Cela comporte généralement beaucoup de tourbières et de problèmes. Donc, si vous êtes intéressé à être un cornes en vrac, il y a quatre éléments ou vous pouvez venir ici maintenant et activer. Et puis à nouveau le mode de maintenance. Si votre site est en construction ou que vous effectuez des modifications immédiates, vous ne voulez pas que quiconque puisse accéder à votre site pendant cette période. Vous pouvez entrer dès maintenant et choisir bientôt ou choisir la maintenance. Ensuite, vous devrez créer une page Dolby affichée pour la maintenance ou commentaires lorsque vous choisirez ce modèle ici. Et alors que vos pages sur la maintenance sont disponibles prochainement, vous pouvez choisir qui a créé pour avoir accès à votre site Web à ce moment-là. Ensuite, importez, exportez des enfants. Vous pouvez exporter vos kits de modèles pour les utiliser sur, sur ou sur un autre site Web. Ou vous pouvez même l'importer partir d'un site XML si vous le souhaitez. Il vous suffit donc de cliquer sur les kits d'entrée , puis, ici, vous pourrez le faire. Je pourrais vous montrer comment faire cela un peu plus tard dans le cours. Enfin, enfin, les informations système. Si vous avez besoin de dépanner votre site Web et que vous allez à l'assistance élémentaire de la SEC et ils disent : «  Hé, pouvez-vous nous fournir les informations de votre configuration ? C'est ici que vous pouvez fournir toutes les informations nécessaires. Il suffit de venir ici et de télécharger les informations système, envoyer aux gars de soutien à Elemental, et ensuite ils pourront vous aider. C'est donc essentiellement pour les paramètres principaux de l'élémentaire. Merci d'avoir regardé et je vous verrai dans la prochaine classe. 4. Aperçu de Elementor: Très bien, donc avec toutes les choses ennuyeuses , citron, je vais vous montrer l'interface utilisateur élément de l'interface utilisateur et comment fonctionnent réellement les éléments. Maintenant, je suis sur mes pages ici et ce que je vais faire c'est que je vais modifier la page d'accueil. Ce que vous allez faire, c'est ce que vous verrez illuminer ici. Vous verrez Modifier avec Elementor. Ce sera ce gros bouton bleu juste ici. Allez-y et cliquons là-dessus. Et ce qui se passera ici, c'est qu'Elemental sera lancé pour marcher sur cette page particulière. C'est la page d'accueil. Maintenant, sur la gauche, vous pouvez évidemment voir la boîte pour élémental, l'interface utilisateur. Le tout premier que je veux vous montrer ici c'est les trois boutons ici, le menu essentiellement, vous cliquez ici. Vous aurez accès à des éléments tels que les paramètres du site, FIM Buildup, dont nous parlerons un peu plus tard. Mais très vite, venons ici pour utiliser les références. Et je ne sais pas pour vous. Peut-être aimez-vous le thème de la lumière. J'aime bien le thème sombre. Donc ce que je vais faire ici, c'est pour le thème de l'interface utilisateur, je vais changer de forme, détecter automatiquement. Trop sombre. Je préfère juste un fond noir et le texte blanc est tellement plus cool. À mon avis, encore une fois, c'est entièrement subjectif, mais je vais rester si sombre. Revenons en arrière. Ici. Vous pouvez trouver quelque chose dans l'élément n'importe où. Quoi qu'il en soit, les éléments si vous le souhaitez, vous pouvez afficher la page, puis quitter le tableau de bord. Mais revenons en arrière. Maintenant. Ici, vous avez des éléments, puis vous avez des éléments globaux. Global ne fonctionne qu'avec la version payante d'élément. Et c'est à ce moment que vous souhaitez enregistrer votre bloc de contenu particulier et utiliser ce même bloc sur une autre page n'importe où sur votre site Web. C'est ce à quoi se réfère fondamentalement le monde. Mais ne vous inquiétez pas, nous en parlerons un peu plus tard. Mais ce sont vos éléments. Vous avez des éléments de base comme votre intersection. Vous allez vous diriger vers l'éditeur de texte d'image. Par exemple, disons que vous vouliez ajouter une image à votre page. Il vous suffit de cliquer sur l'élément d'image, puis déposer à l'intérieur de la boîte juste là. Et à partir de là, vous pouvez choisir l'image avec laquelle vous souhaitez travailler. À titre d'exemple, permettez-moi de choisir l' image de cette fille qui tient le drapeau brésilien. Et c'est là. La chose est la plupart des éléments qu'il accueillera avec généralement 3,5 compartiments principaux. Si je conclus l' emporte, vous aurez la zone de contenu. Dans ce cas, vous pouvez ajouter des textes, des images, des fichiers vidéo, des fichiers audio, etc. Ensuite, vous aurez un style où vous pourrez faire des choses comme changer la loi sur le charbon, changer la taille, ajouter une image d'arrière-plan depuis la hauteur et ainsi de suite. Ensuite, vous aurez l'onglet Avancé. Mais vous pouvez faire des choses comme ajouter des marges, des motifs, sans espacement. Vous pouvez également ajouter des effets de mouvement, des bordures, etc. Donc, généralement, la plupart des éléments avec lesquels vous avez travaillé auront ces trois onglets ou compartiments différents. En revenant ici et que vous cliquez sur le bouton en haut, cela vous donnera accès à tous les éléments. Vous pouvez donc voir que nous avons ici les éléments de base, le bouton vidéo, l'entretoise, etc. Maintenant, vous pouvez voir ceux en liberté conditionnelle sous la version payante de la galerie de portfolio de messages élémentaires. Beaucoup d'entre eux. Vous pouvez donc le voir maintenant, parce que nous n' utilisons pas la version payante d'Elemental, nous n'avons pas accès à tous ces éléments. Mais heureusement, parce que nous travaillons avec le plug-in des modules complémentaires essentiels, nous avons accès à de nombreux éléments supplémentaires gratuitement. Vous pouvez voir ici les atomes essentiels. Vous avez des choses comme l'accordéon avancé, appel à l'action, le bouton créatif inférieur, etc. Nous allons donc aborder quelques-uns de ces éléments. Mais en revenant aux éléments ou en général, nous avons également accès à d'autres blocs. Je suis juste près de cette coordonnée. Donc, le général avec la version gratuite des éléments auxquels nous avons accès, plus d'éléments comme la boîte d'icônes, témoignage, les icônes sociales, etc. Laissez-moi fermer celui-là. Et ensuite, vous avez le site. Malheureusement, ces éléments ne sont disponibles qu'avec la version payante d'Elemental. Vous avez WooCommerce, encore une fois, disponible uniquement avec la version payante d'Elemental. Nous avons parlé des atomes essentiels. Il s'agit donc de l'autre plug-in. Nous avons installé l' en-tête et le pied de page. Ce plugin nous permettra de créer un en-tête personnalisé et le pied de page personnalisé notre site Web aura accès à éléments tels que les éléments du menu de navigation, le titre de la page, le titre du site, logo du site, et ainsi de suite. Et puis enfin, nous avons accès aux widgets WordPress comme vos pages, Callender audio a fait notre recherche, etc. C'est ça pour les éléments. Maintenant, ici, vous avez accès à quelques autres paramètres. Cela peut sembler écrasant, mais ne vous inquiétez pas, une fois que vous commencez à accueillir avec élémental, ce n'est pas aussi écrasant. En fait, il est très, très facile de travailler avec. Ici, sous paramètres. Ici, vous pouvez faire des choses comme changer le titre de la page, changer le statut de publié par Penn et réviser, ajouter votre image en vedette. Vous pouvez également choisir de masquer le titre, ce qui, en fait, faisons-le. Bon, je vais cacher le titre. Je veux dire, combien de fois allez-vous sur un site Web, puis sur la page d'accueil, il est dit «  home trivalent ». Allons donc simplement masquer le titre, puis la mise en page. Je vais expliquer celle-ci un peu plus tard fur et à mesure que nous progressons dans le cours. Ensuite, vous avez l'alarme. Désolé, vous avez la barre de progression de la lecture. Cela est fourni par le plug-in des modules complémentaires essentiels. Fondamentalement, le point ici est que vous avez peut-être vu dans certains épisodes avant où il commence à faire défiler la page, vous verrez comme une barre IDA se déplaçant horizontalement ou verticalement indiquant la quantité de lecture réelle et la quantité de contenu que vous avez encore à manger. Vous avez donc cette inspiration future. Nous allons y jeter un coup d'œil un peu plus tard. Ensuite, la table des matières passe en haut de la page. Ne vous inquiétez pas, nous en parlerons plus tard. Et puis sous style ici, vous pouvez changer le type de corps. Vous pouvez ajouter une couleur d'arrière-plan si vous le souhaitez. Vous venez ici maintenant, choisissez comme la couleur principale du bleu et ainsi de suite. Mais pour l'instant, je vais juste aller de l'avant et en décocher un. Et enfin, vous avez l'avantage où vous pouvez ajouter votre propre costume, notre code JavaScript ou un code CSS personnalisé, qui n'est malheureusement disponible qu'avec la version payante d'élémentaire. Bon, passons à autre chose. À côté de la phrase. Vous, vous avez le Navigator. Maintenant, le problème de naviguer vers est qu'une fois que vous commencez à ajouter des éléments et du contenu sur votre page, le bas du navigateur vous permettra de voir l' ensemble de la structure dans un format hiérarchique. de l'intégralité de votre page. Il peut donc être très, très facile pour nous de rechercher rapidement un élément ou un livre particulier avec lequel vous souhaitez travailler. C'est ce que la navigation ou la navigation sont importantes. Par conséquent, Next est l'histoire. Donc, si vous faites changer la couleur ou simplement si vous faites quelque chose, cela se trouve dans l'onglet Historique et vous pourrez le voir ici, dès le début, lorsque nous avons commencé à éditer, si nous avons changé la préférence de l' utilisateur pour le thème de l'interface utilisateur de lumière, de notre auto, trop sombre, vous pouvez voir que c'est juste là. Nous avons ajouté une image, nous avons touché le titre de la page afin que vous puissiez facilement venir ici et inverser l' une de ces actions. Et puis, vous avez des révisions. Les révisions, c'est un peu plus, qu'est-ce que c'est maintenant ? Un peu plus robuste. En règle générale, dans les révisions, c'est ici qu'une fois que vous aurez mis à jour et enregistré votre page, vous verrez ces changements sur votre vision s'arrête. Il est donc un peu plus robuste et agit. Donc, c'est ça la graisse. Et puis, ici, vous avez le mode réactif. Vous cliquez ici. Vous pouvez désormais choisir la vue Bureau, vue Tablet ou la vue mobile. Et ce qui est mince, c'est que vous pouvez même devenir très, très, très spécifique avec la largeur de votre écran. Par exemple, si j'ai choisi la table ici, vous voyez ces poignées à gauche et à droite. Vous pouvez réellement passer à une certaine dimension. Et bien sûr, OPIA, vous aurez la largeur et la hauteur. Si vous possédez un type spécifique d'appareil que vous souhaitez voir comment vous avez défini, il ressemblera à l'appareil en question. Nous avons des dimensions très spécifiques. Vous pouvez venir ici et modifier les dimensions de la largeur ainsi que de la hauteur. Mais je vais revenir en arrière, passer au bureau et ensuite diviser ici. Vous pouvez prévisualiser vos modifications une fois que vous les avez effectuées. Enfin, vous pouvez mettre à jour toutes les lumières sous Options d' enregistrement. Vous pouvez enregistrer en tant que brouillon ou enregistrer en tant que brin de modèle. En tant que modèle, vous pouvez réutiliser exactement le même contenu sur une autre page. C'est donc comme une ventilation de la façon dont élémentaire marche dans les coulisses, l'interface utilisateur, de la façon d'ajouter des éléments. Encore une fois, ne vous inquiétez pas si cela semble très, très écrasant, Azure commence à marcher avec élémental. Il vous sera très facile de travailler avec vous. Il s'agissait essentiellement d'un cours intensif sur l' interface utilisateur élémentaire. Merci d'avoir regardé. Rejoignez-moi au cours suivant, nous allons maintenant commencer à définir nos variables globales. Je vous verrai alors. 5. Sections Colonnes Marges et rembourrage: Je veux juste passer quelques minutes de plus vous guider à travers les concepts généraux des sections, colonnes, des éléments, des motifs et des marges. Comme je vous l'ai montré précédemment. Si vous souhaitez ajouter un élément, vous suffit de le faire glisser depuis le côté gauche , puis de le déposer simplement dans la diapositive. Maintenant, la chose est automatique lorsque vous ajoutez des éléments avec Elementor, une section et une économie seront créées pour cet élément particulier. Nous venons de tomber dans les éléments de l'éditeur de texte. Et maintenant, vous remarquerez ici que nous avons cette ligne bleue ici. Ce sera cette section qui contient la colonne qui contient l'édition de texte. Tous. Remarquez ici que vous avez ce bouton brun juste ici. Et si je le survole, il est écrit Modifier la colonne. Il s'agit maintenant de l' élément lui-même, l'outil d'édition de texte réel. Une fois de plus, la façon dont l'élémentaire marche est là, vous aurez un élément, qu'il s'agisse d'une image, d'une vidéo ou d'un bouton. Et puis une colonne se tiendra, contiendra cet élément. Dans la colonne et les éléments se trouvent à l'intérieur d'une section. C'est un peu comme une colonne de section de structure hiérarchique , puis l'élément réel. Maintenant, comme pour l'édition, l'élément dans lequel vous aurez accès au style de contenu est avancé. Vous pouvez également modifier la colonne contenant cet élément. Vous pouvez voir que j'ai survolé en bas ici, il est écrit Modifier la colonne. Vous cliquez là-dedans. Ensuite, vous aurez accès au style de mise en page et à l'avancée. Avec la mise en page, vous pouvez faire des choses comme réduire la longueur de la colonne. Vous pouvez modifier l'alignement. Vous pouvez ajouter des fluides de balise HTML. Vous pouvez styler la colonne et nous voulons ajouter un fond noir comme dans un fond rouge. Et vous voulez ajouter une image, des choses comme ça. Pour que beaucoup de choses vous puissiez tout faire avec la colonne. Maintenant, si vous cliquez avec le bouton droit sur le bouton Modifier la colonne, vous pouvez ajouter une nouvelle colonne, colonne dupliquée. Vous pouvez même copier et coller le style. Peut-être avez-vous ajouté un fond noir, vous modifiez le style de police du texte et que vous souhaitez réutiliser ce style, vous copiez simplement le style et ensuite vous pouvez percer son style ailleurs. La même chose s'applique également à cette section ici. Si je clique sur le bouton Modifier la section ici. Maintenant, vous voyez que j'ai accès au style de mise en page avancé. Comme pour la mise en page, je peux changer cela en pleine largeur. Je peux peut-être changer la taille ou la longueur de la largeur nue, très, très grande disponibilité maintenant je le ferai, je peux aussi changer la hauteur si je le voulais. Je peux faire beaucoup de choses. Il en va de même avec son style. Encore une fois, je peux ajouter une couleur d'arrière-plan. Si je le voulais. Je peux faire plusieurs choses comme ajouter des effets de mouvement et ainsi de suite. Tout comme pour l'environnement de colonne, cliquez ici sur le bouton Modifier la section. Vous pouvez vous asseoir et faire des choses comme modifier la section et je peux dupliquer. Je peux même enregistrer en tant que modèle dont nous parlerons lorsque nous utiliserons Elementor Pro. Maintenant, permettez-moi de vous parler rapidement du concept de marges et de schémas, car cela va être très, très, très important. Maintenant, j'ai une section ici contenant cet éditeur de texte écrit. Ce que je vais faire, c'est que je vais ajouter une image dans une autre section. Lambdas choisit rapidement une image avec laquelle marcher. Laissez-moi aller dans ma médiathèque. Laissez-moi choisir cette image ici. Maintenant, jetez un coup d'œil à ça. Permettez-moi d'ajouter une couleur d'arrière-plan à la section ici. Ne vous inquiétez pas, je vous montrerai tout cela un peu plus tard. Très bien. Que sont exactement les marges ? marges permettent d'ajouter de l'espace entre les sections. Donc, en ce moment, nous avons ici une section qui contient cet éditeur de texte avec le fond rouge aurait une autre section ici contenant l'image. Si je voulais créer beaucoup d'espace entre ces deux-là, je pourrais utiliser ici un élément appelé élément d'espacement. Vous pouvez dire entretoise conjuguée, puis le déposer entre ces deux sections. Mais une autre façon de le faire serait de passer à l'une ou l'autre de ces sections. Je vais aller à la première section ici. Je vais aller à Advanced et une variété de marges. Notez maintenant que par défaut, vous pouvez ajouter des marges et des motifs les quatre côtés d'une section à gauche, à droite, en haut et en bas, à droite. Maintenant, si je devais ajouter une marge en haut ou en bas, vous pouvez voir qu'elles sont enchaînées, qui signifie que tout ce que vous ajoutez au haut, il sera ajouté en bas. Si vous souhaitez ajouter des valeurs pour un côté spécifique, vous devez commencer par 0. Tout d'abord, Zero. Vous venez ici, puis vous pouvez voir que vous pouvez dissocier les valeurs. Donc maintenant, vous pouvez simplement ajouter pour les marges de droite et de gauche pour élémentaire sont définies sur Auto par défaut, vous ne pouvez pas faire un ingénieux là-dedans. Mais maintenant, remarquez que si je commence à ajouter des marges au bas de la première section, remarquez que sa section l'image n'est pas poussée vers le bas. C'est parce que je crée de l'espace entre cette première section et cette deuxième section. De plus, si je le voulais, je pourrais faire l'inverse pour la deuxième section. Je peux aller dans la section Modifier ici près de la seconde, aller à Avancé. Dissocier se développe. Et maintenant, au lieu d'un imaginaire en bas, je peux ajouter en haut. Vous pouvez donc maintenant voir que nous poussons cette section en maintenant l'image vers le bas à partir de la première section qui indique quelles sont les marges utiles. Ils sont utiles pour créer un espacement entre les sections. Un des motifs, parce qu'ils ont des motifs. Les motifs sont utilisés pour créer un espace entre un élément et sa bordure ou sa colonne. À titre d'exemple, je vais utiliser l'éditeur de texte ici. Très bien, donc je vais y aller. Je vais aller à Advanced. Et maintenant, ici, vous pouvez voir que j'ai le modèle disponible. Je vais dissocier les valeurs. Et maintenant, si je commence à ajouter du rembourrage ici, vous pouvez voir que je crée de l'espace entre l'éditeur de texte et sa propre section juste en haut. Je peux aller au fond, faire exactement la même chose. Vous pouvez donc voir maintenant que je suis en train de créer de l'espace pour mes textes, un outil dans sa propre section. C'est à cela que les motifs sont utilisés. Ils permettent de créer de l'espace pour un élément à l'intérieur de sa propre colonne ou de leur section. C'est essentiellement ce que les modèles sont utiles. C'est donc la différence entre les marges sont des modèles. marges sont utilisées pour créer de l'espace entre les sections. Les motifs sont utilisés pour créer de l'espace entre une section et l'élément qu'elle contient. J'espère que vous comprenez maintenant ce que nos marges et nos rembourrages augmentent. Encore une fois plus rapide, vous pouvez également réorganiser les sections en cliquant et en les faisant glisser. Si je voulais déplacer la section qui contient la marge, je maintiens également l' image vers le haut. Je vais simplement cliquer sur le bouton Modifier la section et le maintenir enfoncé. Maintenant, vous pouvez voir que ça me permet de bouger. Je peux le déplacer jusqu'au nez. Attendez que le tableau de bord bleu ou la ligne bleue apparaisse, puis lancez simplement une introduction au jour lumineux de l'image. Vous avez cette option ici avec elementwise ce qui vous permet de réorganiser nos sections. Vous pouvez également réorganiser les colonnes et je duplique rapidement cette colonne ici. Permettez-moi de changer cette image très rapidement pour vous donner une démonstration très, très rapide, laissez-moi choisir cette image. Je peux donc simplement cliquer à l'endroit où vous avez le bouton Modifier la colonne. Et puis on s'arrange. Ils peuvent voir où se situent comme vous pouvez le voir. Vous avez donc cette option disponible avec Elemental également. Alors ne vous inquiétez pas lorsque nous commençons à marcher avec des éléments ou que vous commencez, il commence à découvrir beaucoup plus de fonctionnalités et de fonctionnalités des éléments. Et merci d'avoir regardé. Je vous verrai dans le prochain cours. 6. Configurer nos valeurs mondiales: Bienvenue de retour. Maintenant que je vous ai montré une brève introduction à l'interface utilisateur d'Elementor. Examinons les variables globales et comment définir les types de familles de polices que vous souhaitez utiliser, les couleurs, etc. Maintenant, sur la même interface utilisateur ici, vous allez sur le bouton Menu ici, puis accédez aux paramètres de votre site. C'est vrai ? Maintenant, voici le mince. Nous pourrions définir des couleurs globales, couleurs qui peuvent être utilisées sur l'ensemble de notre site Web pour ce faire, cliquer sur les couleurs globales. Maintenant, ce serait la clause par défaut selon laquelle vous auriez un bleu, gris foncé, un gris clair, puis un citron vert. Donc ce serait pour votre tête principale votre tête fait vos en-têtes secondaires, vos textes, ce serait un corps régulier qui prend un accent est généralement pour des liens ou des boutons. Maintenant, ce que je vais faire, c'est que je vais les changer en vêtements que j'ai ici. Maintenant, pour les modifier, je vais cliquer à l'intérieur. Et si c'est une primaire, je vais aller avec du blanc. Ok, donc pourquoi ça va être FFF, FFF six Fs est essentiellement pour White Album ma principale. Et ensuite, pour le secondaire, nous allons en fait garder cela tel quel. Mais ensuite, pour les textos, on va aller avec du noir. Le noir va être six zéros. Donc 123456, c'est ce que nous appelons les valeurs hexadécimales. Ok, donc six zéros pour le noir, six F pour le blanc. Et enfin, pour les accents, qui seraient pour les liens. J'ai ma couleur ici. Permettez-moi de saisir rapidement la couleur de mon autre écran. Venez juste ici et collez ça. C'est donc une nuance d'orange, c'est essentiellement un DECA 570. Maintenant, vous pouvez également décider d' ajouter vos propres couleurs personnalisées. Il peut venir ici, cliquez sur Ajouter une couleur. Vous pouvez nommer celui-ci comme si tout pourrait donner un like ou disons la couleur spéciale. Je vais vous montrer comment cela fonctionne un peu plus tard. Appelons cela un colo spécial. Et ici, je vais cliquer sur la boîte. Et choisissons simplement quelque chose de rougeâtre. J'ai donc ma propre couleur personnalisée appelée colonne spéciale. Je vais aller de l'avant maintenant et simplement mettre à jour. Nous avons défini notre clause globale, que nous pouvons utiliser sur tout le site. Mais nous avons également accès à des polices globales. Les familles de polices sont très, très, très importantes. Alors, vérifiez cet article. Je vais baisser les polices globales. Le premier ici va être primordial. Il s'agirait de vos en-têtes principaux. Jetons maintenant un coup d' œil à mon autre écran ici, car j'ai choisi d' opter pour la famille de police des citoyens avec Oswald. Oswald est une police Google particulière que j'aime bien. Je vais choisir Oswald pour la famille de polices. Le poids ici va être de 700, il y aura un peu plus de poids. Ensuite, je vais transformer ces deux majuscules. Et puis je laisserai aux autres la hauteur de ligne, l'espacement des lettres, espacement, et ainsi de suite ceux qui sont en haut. Le prochain sera le secondaire. Et puis, encore une fois secondaire, je vais aller avec Oswald. Également tout pour le secondaire. Et puis la taille ici, je vais aller avec nos 20 pixels car il y aura un peu plus petit pixels. Et puis les poids ici seraient nos 600. Et voilà. C'est pour le secondaire. Et puis le texte, ce sera notre texte habituel. Je vais en fait passer des familles de nos deux nouveaux sables D2. Cherchons donc une nouvelle porte. J'ai dit, je suis désolé, ce n'est pas un nouveau veto Nieto. Je suis désolé. Portez même mes lunettes. Je ne vois toujours pas correctement. Des millions de capteurs seront en texte intégral. Et la taille ici serait 18 pixels et la largeur sera de 500. Et c'est le dernier point mais non le moindre, nous avons les accents. Accents va être Roboto. Restons à Roboto pour celui-là et attendons que ce soit 500. Nous ne changerons donc rien ici. Je vais aller de l'avant et mettre à jour. Le fait ici est que nous pouvons utiliser ces familles de polices, ces couleurs de police n'importe où sur notre site. À titre d'exemple. Permettez-moi de clore cela et laissez-moi aller de l'avant maintenant et ajouter un titre. Je vais donc cliquer sur glisser, déposer la tête et les éléments ici. Maintenant, jetez un coup d'œil à cela. Si je devais aller dans Style, d' accord, ici vous pouvez voir que nous avons l'option de typographie pour choisir le type de topographie qui voulait fonctionner avec toute la couleur du texte. Maintenant, jetez un coup d'œil à ces derniers. Si je clique sur cette icône ici, cette icône globale, je clique dessus. Voyez maintenant que nous pouvons choisir parmi les cinq options, textes primaires, secondaires, l'accent et même la couleur spéciale que nous avons ajoutée. C'est ainsi que vous pouvez utiliser l'octave provoquée globalement simplement fixer les mêmes objectifs avec la typographie en cliquant à nouveau ici. Et maintenant, je peux choisir soit d'aller avec les textes primaires, textes secondaires, les textes normaux ou l'accent. C'est ainsi que cela fonctionnerait. Mais laissez-moi vous montrer quelque chose d' encore plus intéressant. Si je retourne aux paramètres du site, juste en dessous du système de conception, vous avez votre style de thème. Si je clique sur la typographie ici, nous pouvons maintenant définir des familles de polices spécifiques, des couleurs, tailles pour notre balise H1 ou H2, h3, etc. Mais pour pouvoir utiliser ce système particulier, nous devons désactiver les couleurs et les polices par défaut depuis la page des paramètres. Rappelez-vous, laissez-moi rapidement mettre à jour cela. Je vais montrer de quoi je parle. Si nous revenons au backend, laissez-moi venir ici, allez à Exit to Dashboard. Si vous revenez à vos jeux élémentaires dans les paramètres Elementor, ici, nous allons devoir désactiver les couleurs et les polices par défaut afin de pouvoir utiliser ce nouvel éditeur de style de thème. Je vais donc cocher ces deux cases. Enregistrez ces modifications. Et maintenant, permettez-moi de clore ça. Permettez-moi de rafraîchir cette page à nouveau. Maintenant, jetez un coup d'œil à cela. Si je retourne ici, allez dans Paramètres du site et accompagnez-vous sur la topographie native. Maintenant, je suis en mesure de définir une couleur de texte spécifique pour le corps, la taille technique, les liens, etc. De plus, si je retourne en arrière, si je retourne au back-end habituel du laboratoire, puis que ferme ça, puis j'ajoute à nouveau mon titre ici. Si je vais au style, c'est vrai, vous n'avez pas la couleur du texte. J'ai toujours accès aux couleurs contrariées Alia. Et aussi pour la typographie, j'ai toujours accès aux textes secondaires. Fondamentalement, les mêmes options. J'ai dit, tu y auras accès. Si basique, litigieux. Retournez sur le plateau une fois de plus, puis je voulais juste le traiter. J'ai toujours accès à ces options. Revenons à la typographie de style thématique. J'ai ici des options que j'ai déjà définies. Ce que je vais faire ici, c'est ça. Bon, nous allons d'abord choisir la typographie de notre corps. Donc, juste ici pour le corps, je vais passer ici à la colonne de texte. Nous allons choisir notre noir qui sera pour le texte. Pour la typographie. Je vais simplement y aller avec des textos. Rappelez-vous que nous avons dit que les textes étaient newtoniens aux sables, taille de 18 pixels, puis le poids de 500. Ce sera pour le corps. Bien. Maintenant, pour le lien. Et il suffit de vérifier ce que j'ai ici pour le lien. Je vais aller avec la couleur, la typographie des couleurs d'accent. Je vais aussi y aller avec l' accent. Maintenant pour l'âge prévient, d'accord, ça va être un peu différent pour les F1 ce que j'ai fait ici, c'est pour la famille que je veux faire défaut. Mais la taille ici va être de 100 pixels. Très, très, très, très, très massif. Et le poids ici va être de 600. Nous allons difficilement utiliser les H sur notre site, alors ne vous inquiétez pas de la taille énorme. Je vais le garder à 100 ans. Passons maintenant au H2. Pour H2, j'ai la taille ici. Je vais cliquer sur la typographie. La taille ici, je l' ai configurée à 32 pixels. 32 pixels, et ensuite j'ai le poids ici de 700. En gros, c'est l'en-tête principal avec lequel nous allons travailler. En fait, mes excuses, je l'ai dit à 36, désolé, six pixels par six pour H2. Ensuite, pour les trois ans, jetez un coup d'œil. Pour l'âge de trois ans, la couleur ici sera la couleur d'accent, la couleur orange. La taille ici va être de 22 pixels. Ensuite, la famille ici va être primaire, ce qui serait aussi une ancienne limite a également dit que la famille de police principale ici pour être notre Oswald je serai pour le H12. Donc en gros h deux, on aurait 36 tailles et pixels, la famille d'Oswald. Il y aura des majuscules puis 708 et attend. Et enfin, j'ai aussi dit que pour le H4, même couleur serait la couleur axone. Et puis la taille ici sera notre 18 pixels. Bon, alors choisissons Oswald à nouveau. La taille ici serait de 18 pixels, la même taille que nos textes corporels. Et puis encore une fois. Le tout dernier sera l'âge de cinq ans, je ne pense pas vraiment que nous allons marcher avec ces multiples législations jusqu'à H5, puis la topographie serait la même secondaire ou primaire si vous vouloir. Et la taille ici serait de 16 pixels. Vous y allez. Je vais donc y aller maintenant et simplement mettre à jour ça. Et c'est tout maintenant, je sais que c'était une très, très longue vidéo où je parlais de prêts automobiles et d'autres choses. Mais cela indique ici que sur notre site, si vous ajoutez automatiquement un H2, il héritera des valeurs d'ici. Donc notre H2 est en ce moment, aurait la famille de polices Oswald, taille de 36 pixels et ensuite un poids de 700. Et puis il en va de même pour les trois ans, et ainsi de suite. Mou a essentiellement mis en place la chute des valeurs mondiales ou je nous frappe ainsi que nos textes corporels. Mais aussi, nous avons dit que les couleurs mondiales, que nous pouvons utiliser encore et encore. Nous avons dit que cinq d'entre eux principaux secondaires accentuent, surtout lorsque je n' utilise pas d'écologiste spécial In, voulait vous montrer comment vous pouvez audio sur des couleurs personnalisées supplémentaires si vous le souhaitez. Mais comme c'est le cas pour la configuration nos familles de polices mondiales, de couleurs et de tailles. Allemagne, toute prochaine vidéo où nous allons maintenant commencer à construire l' en-tête plein de site Web. 7. Créer nos en-tête personnalisés: Très bien, allons maintenant construire l' en-tête de notre site Web. Et c'est exactement ce à quoi ça ressemble en ce moment, et ça n'a pas l' air beau du tout. C'est ce que nous essayons d'accomplir. Vous pouvez voir l' en-tête ici, nous avons le logo à gauche, puis nous avons le menu principal à droite. Cependant, montrez-vous quelque chose comme si je devais aller à une autre page, disons la page À propos comme exemple, ici, vous pouvez voir que l'en-tête est différent. Celui-ci a un fond noir, alors que l'en-tête de la page d'accueil n'a pas du tout d'arrière-plan, il s'agit simplement de se fondre dans l'image d'arrière-plan ici, en gros, nous devons créer 82 en-têtes différents. L'un spécifiquement pour la page d'accueil, puis l' autre pour le reste de nos pages. Comment faire cela maintenant ? Avant de vous montrer cela, laissez-moi simplement faire glisser le site Web de démonstration. Avant de vous montrer comment faire cela, je veux vous montrer autre chose. Si je devais aller dans Modifier avec Elementor, je suis allé aux paramètres du site. En plus de pouvoir définir vos téléphones globaux et vos couleurs et tout cela, vous pouvez également modifier l'identité du site ici, nous avons les paramètres. Si je clique sur l'intérieur de la densité ici, nous pouvons également modifier le nom du site. Je vais appeler mon passeport de voyage. C'est le nom du site Web. Et puis le slogan sera quand le voyage rencontre l'aventure. Pour le logo, je vais choisir le logo ici. Insérons celui-là. Et puis pour l'icône Phi de l'icône, je vais choisir l' image de l'informatique avec celle avec le fond vert. Je vais l'insérer. Et voilà, nous avons l'identité de notre site. Maintenant, vous pouvez également venir ici pour en-tête et effectuer différents types de modifications, vous pouvez choisir de masquer le logo, afficher le slogan, d'augmenter la largeur du contenu ou de réduire la largeur du contenu. C'est à vous de décider. Mais comme nous allons créer nos propres en-têtes personnalisés, nous n'avons pas besoin de changer quoi que ce soit ici. Je vais donc aller de l' avant maintenant et simplement mettre à jour. Et ensuite, je vais vérifier ça. Bon, je vais revenir au backend Exit to Dashboard. Et maintenant, créons notre en-tête. Je vais venir ici voir nos parents. Ici, vous verrez des éléments ou des aliments frontaux qui sont des constructeurs. Ceci provient du plugin. Je vais cliquer là-dedans. Et maintenant, je vais cliquer sur Ajouter un nouveau. Et maintenant, appelons celui-ci l'en-tête de la page d'accueil. Ensuite, là où vous avez le type de modèle. Nous allons choisir l'en-tête, puis nous pouvons choisir, d'accord, où voudrions-nous afficher cet en-tête ? Puisque ce sera spécifiquement pour la première page, je vais choisir ici que vous avez des cibles spécifiques. Je vais choisir des pages spécifiques et inviter ici sont simplement tapés à la maison. Et voilà. Maintenant, cet en-tête ne sera affiché que sur la page d'accueil. Et ensuite, pour les rôles d'utilisateur ici, vous pouvez choisir, ok, peut-être souhaitez-vous afficher ces en-têtes uniquement pour que les utilisateurs connectés soient déconnectés ou modifiés ou que vous avez beaucoup de flexibilité. Je vais juste garder ça vide parce que nous voulions être pour tout le monde. Maintenant, vous avez cette option activée pour le modèle de mise en page pour nous. Maintenant, le problème avec Elementor est qu'en plus du modèle par défaut et un modèle fourni par votre thème, les éléments, vous donne deux modèles personnalisés. L'une est appelée données de toile élémentaires, pleine largeur et pleine largeur plus simple, ce qui signifie que votre contenu peut s'étendre jusqu' aux bords de votre écran. Donc, en gros, c'est toute la largeur que je suis comme si aucune marge n'est un motif. Elemental Canada comme des outils que vous n'aurez ni en-tête ni pied de page. Il s'agit essentiellement d'un élément vide ou de nos modèles, nous n'allons pas marcher avec un modèle de canevas. Il n'est donc pas nécessaire d' activer cette mise en page, mais je vais choisir les éléments du modèle pleine largeur. Allons-y maintenant et cliquez sur Publier. Maintenant, je vais cliquer sur Modifier avec Elementor. Ce que nous essayons de réaliser ici, c'est je ramène le site de démonstration. Il s'agira essentiellement d'une section à deux colonnes. Celui de gauche, de gauche , nous aurons le logo, tandis que la colonne à droite, nous aurons le menu principal et nous voulons également que la colonne de la colonne lumineuse contenant le menu principal ait plus de largeur. . Alors, jetez un coup d'œil. OK, juste ici, je vais cliquer sur le bouton Plus ici. Et maintenant, nous pouvons choisir notre structure. Et je vais choisir cette division ici. Celui-ci l'aura, la première colonne comportera un tiers de la section entière, tandis que la deuxième colonne aura deux tiers. Donc ici, puisque nous modifions la section, comme vous pouvez le voir, pour la largeur du contenu, nous pourrions en fait aller en pleine largeur si vous le vouliez. Mais je vais choisir Box et je vais choisir 1240 pixels. Ce n'est que ma préférence personnelle. J'ai aimé mes 1240 pixels. Maintenant, ici pour la première colonne, je vais cliquer à l'intérieur. Je vais faire défiler jusqu'ici. Et nous essayons d'ajouter le logo. Je vais donc ajouter le logo du site. Cliquez sur, déposez-le à l'intérieur. Et maintenant, nous avons notre logo. Maintenant, vous pouvez voir que le logo a texte blanc et qu'il s'agit d'un fond blanc. Mais supportez juste avec moi. Bon, je vais choisir. La taille de l'image ici, je vais être pleine pour l'instant. Continuons ensuite et cliquons sur le bouton Modifier de cette section. Très bien, j'ai cliqué là-dedans. Je vais revenir au style. Et puis il est allé là où vous avez commencé à taper. Je vais choisir le classique. Maintenant, je vais choisir la couleur noire. Maintenant, vous pouvez voir le logo, n'est-ce pas ? OK. Passons maintenant à la deuxième colonne. Nous allons ajouter nos éléments de navigation. Donc, en écrivant dans le menu de navigation, cliquez sur glisser, drogue à l'intérieur. Ensuite, vous pouvez voir que le menu principal est sélectionné par défaut. Cependant, quand il s'agit d'apporter un certain nombre de changements, remarquez ici que le menu principal restera. Le texte est en majuscules, il est en blanc. Il est également aligné à droite et au centre. Nous devons donc faire pour les choses. Revenons ici. La première chose que je vais faire est que lorsque vous modifiez le menu de navigation ici, vous avez une mise en page qui clique là. Et maintenant, nous allons choisir d'aligner sur la droite. Comme vous pouvez le constater en ce moment, c'est à droite. Passons maintenant au style. Et nous allons venir ici pour la typographie. Cliquez sur le bouton Modifier. Transformation non poilue, choisissez majuscules. OK ? Ensuite, pour la couleur du texte, cliquons sur l'icône globale juste là, puis choisissons principalement pour Blanc. Bien. Mais maintenant, comment aligner éléments du menu au milieu verticalement ? Ce que vous voulez faire ici, c'est que vous allez cliquer sur la puissance Modifier la colonne ici, ce bouton particulier ici, vous cliquez ici. Et maintenant, vous pouvez voir que nous avons l'alignement vertical. Nous allons choisir le milieu. Vous y allez. C'est ça. Mais nous n'en avons pas encore fini. Pour le logo. Cliquez sur le bouton Modifier correspondant au logo du site. Et puis l'alignement ici, on va aller à gauche. Comme si tu ne voyais pas vraiment la différence pour l'instant, mais supporte-toi juste avec moi. Nous allons choisir celui qui se trouve à gauche. Bon, allons-y maintenant et mises à jour. Voyons maintenant ce que nous avons. Consultez la page. Et voilà. Maintenant, vous pouvez voir notre page d'accueil a cet en-tête particulier ici, mais évolue ensuite vers, disons la page À propos comme exemple, vous pouvez voir que nous n' avons pas cet en-tête du tout. S'il souhaite accéder à la page de contact. Par exemple, vous pouvez voir que nous n'avons pas cet en-tête. Donc, ici même, la page d'accueil a maintenant ce document particulier avec le fond noir, le logo, puis les éléments de menu. Maintenant, pour arrondir cela, je vais en fait apporter quelques changements. Revenons à la section. Ok, et je sais que j'ai dit que la largeur du contenu était de 1240 pixels, mais j'ai fait d' autres tests, et je pense qu'il vaut mieux aller avec la pleine largeur. Allons donc en pleine largeur pour l'instant. Ensuite, cette colonne, celle qui porte le logo, nous allons le réduire à 2525 %. Alors que la colonne contenant les éléments manuels aura 75 %. Ensuite, modifions également le logo. Je vais cliquer sur Modifier le logo. Passons au style. Et ensuite, pour la largeur maximale, nous allons définir cette valeur à 75 %. Et une question que vous pourriez vous poser est pourquoi évidemment la largeur maximale et non la largeur réelle. Voici le truc. Lorsque vous définissez la largeur du logo, le logo aura toujours cette largeur. Nous sommes dégoûtés, de la taille de l'écran. Vous travaillez avec la largeur maximale. Vous dites essentiellement, Hey, le logo ne doit jamais dépasser cette largeur. Ensuite, dans les situations où la taille de l'écran n'est pas assez grande documentée , la largeur totale du logo réduit la taille de la largeur maximale est beaucoup mieux pour une conception réactive. Et vous voulez toujours être réactif. Nous allons donc régler cela à 75 pixels. Et maintenant, si nous mettons à jour, si nous regardons notre en-tête, vous pouvez voir maintenant qu'il ressemble tellement à ce que nous avons ici sur le site de démonstration. La dernière chose à faire est que nous allons dupliquer cet en-tête pour le deuxième en-tête. Donc, en gros, il a ce qu'on va faire. Bon, je vais retourner au backend. Au lieu de créer le deuxième en-tête pour le reste du site Web, nous allons simplement venir ici et vous verrez ensuite doublons EA ou ce les doublons essentiels des atomes. Je vais y aller maintenant et simplement dupliquer l'en-tête de la page d'accueil. Vous allez maintenant voir les brouillons Elementor. Allons-y et je cliquerai sur Modifier. Et ensuite, nous examinerons quelques changements ici. Nous appellerons celui-ci l'en-tête global. Vous pouvez lui donner n'importe quel autre nom que vous voulez, mais je vais appeler cet en-tête global. Et puis juste ici, des modèles, oui, c'est l'en-tête. Ensuite, l'écran est allumé. Nous allons aller sur l' ensemble du site Web. Mais pour être sûr, je vais venir ici et dire ajouter une règle d'exclusion. Nous disons, Hey, n'affichez pas celui-ci sur la page d'accueil ici. Il a une page spécifique. Je vais venir ici et simplement taper chez moi, en assurant que cet en-tête ne sera jamais affiché sur la page d'accueil. Il ne sera affiché que sur l'ensemble du site Web. Et voilà. Donc, gabarit pleine largeur également. Allons-y maintenant et cliquez sur Publier. Et voilà. Donc, pour revenir ici, rafraîchissons cette page. C'est donc l'en-tête de la page d'accueil. Mais maintenant, jetez un coup d'œil à cela. Ok, si je devais aller sur une autre page, disons la page À propos à titre d'exemple. Maintenant, vous verrez que l'en-tête en double ne s'affiche pas. Allons également à la page Articles. Vous pouvez le voir encore, l' en-tête en double ne s'affiche pas, malgré le fait que nous ayons dit que l' en-tête en double s'affiche sur chaque page sauf sur la page d'accueil, ce qui se passe exactement ici. Et croyez-moi, il m'a fallu plusieurs heures. La Chine a juste pourquoi cela ne fonctionnait pas, mais je l'ai compris. Ce que vous voulez faire, c'est simplement revenir à l' en-tête en double ici. C'est le double coup de chaque création. Ce que vous voulez faire, c'est ça, OK, essayez simplement d'initier, en fait, revenons au back-end pour ne pas être confus. D'ici, à partir ici, il suffit de cliquer sur Modifier avec Elementor. Modifiez avec Elementor. Et puis ce que vous allez faire, c'est juste ici, initier tout type de changement. Supposons que vous ajoutiez les éléments de titre ici, par exemple, d'accord, déposez-le là-dedans. Voyez-vous maintenant que le bouton de mise à jour est disponible ? Bon, je vais retourner ici, fermer ça. Le fait ici est que vous voulez apporter une sorte de modification à l' en-tête pour que ce bouton de mise à jour en descente soit déclenché. Nous pouvons maintenant mettre à jour. Et maintenant, ça devrait fonctionner. Donc, si on vous demande de revenir à la page de mes articles ici et de les actualiser maintenant. Maintenant, vous pouvez voir que l'en-tête dupliqué montre maintenant que je retourne à la page d'accueil, est exactement le même en-tête. Je vais sur la page À propos. Et bien sûr, c'est exactement le même en-tête. C'est exactement ce que vous devez faire lorsque vous essayez de dupliquer vos en-têtes et vos pieds de page sur les doublons. Il suffit d'entrer dans l' édition avec Elementor, ajouter n'importe quel élément, de supprimer cet élément juste pour déclencher le bouton de mise à jour. Mise à jour. Et maintenant, ce nouvel en-tête ou pied de page en double sera maintenant en plein effet. C'est tout pour la vidéo que nous avons créée nos deux en-têtes. Merci d'avoir regardé et je vous verrai au prochain cours. 8. Créer notre Footer mondial: Dans la vidéo précédente, nous avons créé avec succès nos deux en-têtes, un pour la page d'accueil et l'autre pour le reste du site Web. Mais maintenant, nous allons créer notre pied de page mondial. Et la bonne nouvelle ici est que nous n'avons besoin que d'un pied de page et c'est exactement ce que nous essayons de créer. Nous allons avoir cette image ici à gauche puis quelques coordonnées, des icônes des réseaux sociaux. Et puis le droit d' auteur latéral en bas. Allons de l'avant et faites-le rapidement. Je vais cliquer sur Ajouter un nouveau. Et nous allons appeler celui-ci le pied de page mondial. Sélectionner l'option ici sera Pied de page et, bien sûr, l'affichage car l'ensemble du site Web. Et nous allons changer le modèle en pleine largeur. Et on y va. Allons de l'avant Publier. Et maintenant, nous allons éditer avec Elementor. Maintenant, je veux que vous accordiez une attention particulière à une énorme différence entre l'en-tête et le pied de page et l'en-tête que nous avons ici. Nous ne disposons essentiellement que de deux colonnes. Celui de gauche tenant le logo, celui de droite tenant le code, le menu principal. Mais pour le pied de page, remarquez que c'est un peu différent. Oui, nous avons encore deux colonnes, une contenant cette image, l'autre contenant les coordonnées. Mais ici, ce texte de copyright est en fait une troisième colonne. Ce n'est pas sous cette première colonne ici. Il s'agit en fait d'une colonne distincte à elle seule. Afin de créer ce type de section multi-colonnes, nous allons utiliser un nouvel élément appelé la section E-mail de l'enquête. C'est en fait le tout premier élément que vous possédez, celui-ci ici même dans une section. Je vais cliquer sur glisser, puis le déposer à l'intérieur. abord , c' est que je vais modifier la toute première section. Si vous rencontrez des difficultés à essayer de cliquer sur la section des parents , en gros, vous pouvez toujours utiliser votre navigateur ici et vous pouvez voir ici, nous avons cette colonne de section puis l'intersection. Je vais donc cliquer sur la section maintenant. Nous allons modifier la largeur du contenu ici en pleine largeur. Et puis les colonnes s'écartent. Nous ne choisirons pas de fossé. La raison en est que si vous faites attention, vous pouvez voir maintenant la façon dont vous avez l'image, il n'y a pas d'espace, il n'y a aucune marge de remplissage. L'image se trouve directement à la bordure du bas. C'est là que nous choisissons notre écart de nœuds ici. Nous ne voulons pas avoir de lacunes du tout. va de même pour la section intérieure. Mais avant de sauter là-dedans, ajoutons une couleur d'arrière-plan. Je vais passer au type Arrière-plan. Et bien sûr, nous allons choisir d'être noirs. Je vais donc avoir un fond noir pour le pied de page. La prochaine étape va maintenant être la section ina. Je vais cliquer sur la section intérieure juste ici à partir de la navigation vers à nouveau, nous allons aller en pleine largeur. Et puis les colonnes, les colonnes s'écartent ici. Nous allons dire non plus d'écart. Très bien, génial. Maintenant, allons de l'avant et traitons la toute première colonne ici, qui aura notre image. Je vais donc déposer l'élément image là-dedans. Choisissez cette image ici. Et au cas où vous vous demandiez que c'est vraiment au Pérou. C'est un endroit appelé Horeca kina ou Cocina. Je ne sais pas exactement comment c'est basé sur la finance, essentiellement un peu comme une zone désertique. Vous pouvez faire une table d'harmonie et ainsi de suite. un endroit assez génial à découvrir. Et je vais aller de l'avant et changer celui-ci en idiot. Mais voici le plus mince, n'est-ce pas ? Nous allons changer la largeur des colonnes. Nous allons faire la première colonne ici. Nous allons vraiment le rendre un peu plus large. On va donc aller jusqu' à 63 pixels, 63 % en fait, donc 63 % puis 37 % pour la deuxième colonne. Mais nous allons changer l'image. L'image est beaucoup trop haute. Allons donc modifier l'image. Et puis nous allons aller ici pour style et nous sommes là, je vais choisir 450 pixels. Il est donc assez grand et assez large. Ok, c'est l' image juste là. Maintenant, je ne fais que fermer le navigateur. Pour la deuxième colonne, nous allons ajouter une série d'éléments différents. Le tout premier ici serait l'élément de rubrique, et celui-ci sera nos contacts. Je vais tout taper en majuscules. Contact. Ce sera un H2. Pour le style de la sagesse. Nous allons passer à la couleur du texte et choisir simplement primaire. Nous allons maintenant choisir un autre titre. Une fois encore. Je vais le déposer juste en dessous du contact juste là. Celui-ci va être un téléphone. Encore une fois, des majuscules au téléphone. Cependant, on va le faire à l'âge de trois ans. En fait, nous allons en faire un H4. Nous allons en faire un H4 et nous allons ajouter des informations. Donc ce que je vais faire ici, c'est que je cliquerai simplement avec le bouton droit de la souris , puis je dupliquerai simplement. Et maintenant, on va le faire à l'âge de cinq ans. Le numéro de téléphone réel sera un h5. Changeons donc le numéro ici à 090 espace 645, espace 3417. Ce sera le numéro de téléphone. Et je vais revenir au style et à la topographie. Nous allons vraiment choisir des textes. Je préfère ce modèle de texte, donc nous allons choisir celui-ci. Ensuite, nous allons également dupliquer le téléphone. Encore une fois, faites-le glisser ici juste en dessous du numéro de téléphone. Nous allons également dupliquer le numéro de téléphone lui-même. OK, puis faites glisser le doigt sur le téléphone NIF. Maintenant, oups, désolé, ça s'est passé jusqu'ici. Ramenons-le ici. Bon, maintenant on va modifier le téléphone, le deuxième téléphone ici. Nous allons changer celui-ci par e-mail. C'est essentiellement comment marcher intelligemment. Il suffit de dupliquer chaque fois que vous pouvez et d'apporter simplement les modifications nécessaires. Nous allons maintenant modifier le numéro de téléphone. On va changer l'e-mail. Mon e-mail est Alex. Les ports de passe deviendront incorrects. Alex sur passeport travel.com. D'accord. Oui. C'est exact. Et enfin, mais non des moindres, nous aurons une adresse. Nous allons également dupliquer l'e-mail, en ajoutant une fois de plus. Glissons-le, déposons-le ici. Modifiez également les courriels. Adresse IP. Maintenant, pour l'adresse réelle, nous allons utiliser un éditeur de texte plutôt qu'un éditeur de texte masqué, car plusieurs lignes de texte vont déposer l' éditeur de texte juste là. J'ai une adresse très intéressée ici. Je ne sais pas s'il s'agit d'une vraie adresse. Je ne m'en souviens pas. Mais c'est en r2, Emile Zola. Maintenant, je vais appuyer sur Maj Entrée, pas seulement sur anti, car si vous appuyez sur Entrée, vous aurez un double espace, utilisez la touche Maj, puis entrez. Vous disposez donc d'un interligne unique. Et maintenant, je vais taper 609002, Leon, Shift Enter à nouveau. Et puis on va taper en France et on va passer à la typographie de style. On va y aller avec des textos. Et bien sûr, la couleur du texte sera principale. Et voilà. Enfin, nous allons avoir nos icônes sur les réseaux sociaux. Très, très, très important. Les médias sociaux vont être ici en général. Ajoutons un média social. Et bien sûr, pour Facebook, nous allons changer la couleur du code efficace au code personnalisé. La couleur principale ici serait blanche, la couleur secondaire serait noire. Fondamentalement, vous aurez le fond blanc et l'icône elle-même sera noire. S'il s'agissait d'un véritable site Web que vous construisez, c'est ici que vous ajouteriez le lien à votre page Facebook. C'est pour Facebook. Faisons exactement la même chose pour Twitter. Pourquoi ce sera la couleur du paramètre noir en tant que couleur secondaire. La dernière banale est le costume de couleur fuchsia ou YouTube. La couleur primaire est blanche, le deux-points secondaires est noir. Et puis la forme ici, nous allons changer sa forme en cercle, à droite, puis en alignant, je vais l' aligner vers la gauche. Nous y sommes presque. Mais remarquez ensuite qu' il y a un certain espacement, les coordonnées réelles et ensuite l'image. Ce que vous allez faire ici c'est que nous allons accéder à la colonne contenant toutes ces informations de contact, vous cliquez ici. Passez d'abord, Alignement vertical, alignons au milieu. Ensuite, passez à Avancé, puis vous aurez éventuellement un rembourrage. Je vais dissocier ces valeurs ensemble car la chose à ces valeurs ensemble car ce sujet est par défaut, quelle que soit la valeur que vous ajoutez à votre rembourrage, haut, à droite, en bas ou à gauche. Il dupliquera un cours des trois côtés restants. Donc, nous ne voulons pas cela, nous voulons seulement ajouter du rembourrage d'un côté. Je vais donc cliquer sur ce bouton ici pour dissocier les valeurs juste au cas où vous ne le sauriez pas, Pattern est un moyen de créer de l'espace entre votre contenu et sa bordure. Nous allons ajouter du rembourrage à gauche, comme vous pouvez le voir, déjà beaucoup mieux. Et je vais aller jusqu' à 40 pixels. Nous y sommes presque. L'un d'eux que nous allons ajouter en ce moment sera celui des textes de copyright. Je vais donc faire défiler jusqu'ici. Ainsi, juste ici, sous votre en-tête et votre pied de page élémentaires, vous voyez des textes de droits d'auteur. Cliquez sur Glisser. Et je vais être très, très prudent. Nous ne le déposons pas sur cette première colonne qui contient l'image. Nous le déposons dans une clinique distincte considérée comme ligne bleue apparaissant, ce qui signifie ça, d'accord. Ce sera une colonne distincte. Notez maintenant que la ligne bleue se trouve uniquement sous l'image, sous la colonne qui contient l'image. Mais si je fais glisser ma souris un peu plus bas maintenant vous pouvez voir la ligne bleue s'étendre sur les deux colonnes. Maintenant, je vais déposer le texte des droits d'auteur là-dedans. Et c'est là. La couleur du texte ici sera évidemment la typographie principale. Nous allons utiliser le texte aligné sur le centre. Et nous allons en fait passer à la typographie, un gain. Et rendons celui-ci un peu plus petit que d'habitude. Je pense que 16 pixels sont à peu près corrects. Mais nous voulons également ajouter un peu de rembourrage. Passons donc à l'avancée. Encore une fois, nous allons dissocier les valeurs. Nous allons également ajouter un rembourrage de 20 pixels pour les dix premiers pixels pour le bas. Nous avons fait beaucoup de choses. Allons-y maintenant et mises à jour. Voyons à quoi ça ressemble. Je vais donc aller ici, rafraîchir la page. Et voilà. C'est notre pied de page juste là. Maintenant, je sais que vous pouvez voir des espaces blancs ici, mais c'est simplement parce que nous n'avons pas encore de contenu sur la page d'accueil. C'est pourquoi vous avez cet espace blanc. J'ai déjà ajouté du contenu à la page À propos. C'est donc plutôt ce à quoi ça ressemblera maintenant. Vous pouvez voir qu'il n'y a plus d'espace blanc sur un int car nous avons effectivement du contenu sur la page, mais c'est le cas. Nous avons maintenant notre pied bien construit avec l'image du Pérou, des textes de droits d'auteur, ainsi que certaines informations de contact. Merci d'avoir regardé, et bien sûr , je vous verrai dans la prochaine classe. 9. Ajouter la bannière de page d'accueil: Maintenant que nous avons créé les en-têtes et les pieds de page, il est maintenant temps pour nous de créer notre page d'accueil. Et la toute première section que nous allons construire sera la bannière que vous pouvez voir ici, nous avons l'image de fond avec les arbres tropicaux, palmiers et la plage. Et puis, bien sûr, les textes, nous voyageons avec l' aventure, puis le bouton qui indique notre livre, votre voyage maintenant. De plus, bien sûr, vous auriez remarqué que l'arrière-plan se fond essentiellement dans l'en-tête. Comment faisons-nous cela ? Eh bien, nous allons aller de l'avant et modifier la page d'accueil. Je vais dire Edit avec Elementor. Juste ici. Vous remarquerez que nous avons essentiellement deux colonnes, une en haut, celle qui contient l' endroit où on voyage signifie aventure. Ensuite, nous aurons une autre colonne contenant le carnet de boutons, votre voyage. Maintenant, ce que je vais simplement faire ici, c'est ça. Nous avons un texte de titre ici, mais au cas où vous ne verrez rien, faites simplement glisser l'élément de titre et déposez-le dans votre boîte ici. Et je vais simplement dire où nous sommes voyage et aventure. C'est le principal slogan du site Web All. Et je vais faire ça contre un seul. Mais nous allons apporter quelques modifications à la topographie elle-même. Passons donc au style. Et pour la typographie ici, je vais changer la transformation en majuscules. Et nous allons aussi faire le poids 900 juste pour le rendre très, très épais. Et ensuite, le style le rendra italique également. C'est ça pour le texte pour l'instant. Nous allons maintenant ajouter l' image d'arrière-plan pour cette section. Je vais donc cliquer sur le bouton Modifier la section ici. La largeur du contenu, nous allons conserver cette boîte, mais ensuite la largeur ici nous ferons 1240 pixels. Et notre liste de contrôle préconise la hauteur, nous allons la régler à une hauteur minimale de mille pixels parce que nous voulions vraiment montrer autant de cette image d' arrière-plan que possible. Laissez-moi en faire mille. Et maintenant, nous allons passer au style, type d'arrière-plan classique. Et je vais choisir l'image. Et ce sera le cas, je m'excuse. En fait, il y en a deux distincts ici pour l'instant. Je vais supprimer la femme qui va utiliser, nous allons utiliser la version Big Out. Celui-ci ne mesure que 859 pixels de hauteur, mais celui-ci fait 1274. Nous allons donc utiliser celui-ci. Je vais donc insérer ça. Et voilà. Maintenant, permettez-moi de vous montrer quelques astuces concernant positionnement de votre image d' arrière-plan. Vous avez différents types de positions au centre, au centre, au centre à gauche, au centre, à droite, etc. C'est donc à vous de choisir les angles de position idéaux pour votre image d'arrière-plan. Le mien ici que j'ai choisi va être en bas au centre. Ici, vous pouvez voir les palmiers, la plage aussi. Il est donc familier, c'est la meilleure position. Et puis pour la taille, vous avez plusieurs options ici, je vais aller avec du cava. La différence entre Kovach et Contain est l'affichage contenable de l'image entière. contenu n'est pas toujours la meilleure option car lorsque vous affichez l'image entière, si l'image n'est pas assez grande pour l'ensemble de l'écran, elle commencera à effectuer des études répétées. Vous pouvez voir en arrière-plan ici que l'image se répète à nouveau. Mais avec COVID, vous dites essentiellement : Hé, essayez de vous assurer que l'image couvrira tout l'écran. C'est pourquoi j'ai choisi sont couverts ici, mais je vais aussi ajouter une superposition d'arrière-plan. Alors, vérifiez encore ça. Je vais revenir en superposition. Je vais cliquer là-dedans. Je veux, je vais aller au type d'arrière-plan comme d'habitude, on va choisir une superposition noire. Et puis l'opacité ici, je suis allé avec le 0.23. Bien sûr, vous pouvez modifier cela si vous ne souhaitez pas utiliser Zope et 23. Mais maintenant, nous allons revenir aux textes réels. Revenons ici. Et bien sûr, la couleur du texte, nous allons rendre celui-ci blanc. Et c'est là, d'accord. Nous allons également modifier la taille. Je vais donc aller jusqu' à 120 pixels. Et encore une fois, c'est tout à fait subjectif. Vous pouvez rendre le vôtre un peu plus grand, un peu plus petit. Mais nous allons également modifier l'alignement. Allons au contenu. Nous allons l' aligner sur le centre. Et le voilà, nous voyageons à terme. Et ce que nous allons faire maintenant, d'ajouter notre bouton. Je vais faire glisser le bouton ici, Element et je vais le sauter juste en dessous du titre. Bien sûr, ici, nous allons dire : réservez votre voyage. Maintenant. Bien sûr, c'est ici que vous ajouteriez le lien vers une page ou un site Web XNOR comme Golden ou Booking.com. Si j'ai eu sept ans, fais-le et on pourrait juste dire livre kin dot com. Faisons simplement ça. Nous pouvons .com juste pour le plaisir. Et bien sûr, nous allons l'aligner sur le centre. La taille ici sera moyenne. Ajoutons également une icône. Je vais donc choisir la bibliothèque d'icônes ici. Cherchons un avion. Je vais choisir beaucoup, mon insert ours. Vous avez la possibilité de modifier la position de l'icône après ou avant le texte. Nous voulons continuer à le faire avant. Ensuite, l'espacement des icônes. Vous pouvez également ajouter un certain espacement entre l'icône et l'image. Je vais donc utiliser des aides juste pour lui donner un peu d'espacement. Maintenant, nous allons passer au style. C'est ici que nous allons apporter des changements majeurs. Le premier que nous allons faire ici serait la topographie, le poids des textes. Il va y en avoir 600 , puis se transformer en majuscules. Maintenant, comme il s'agit d'un lien, vous remarquerez qu' il y a l'idée soulignante, mais nous ne voulons pas celle-ci. Je vais donc aller à Style, j'y vais, je vais aller à la déclaration et ensuite n'en choisir aucune. Nous ne voulons aucun texte dans aucun des textes sous-jacents. Très bien, la typographie, la couleur, le texte, la couleur ici. On va y aller avec le blanc. Très bien ? Ensuite, pour le bouton lui-même ici, vous aurez le type d' arrière-plan et cliquons là-dedans. Et nous allons aller avec couleur classique ici serait orange. Maintenant, nous allons fixer une frontière aussi solide. Ensuite, ce que nous allons faire pour la bordure, c'est que nous allons également changer la couleur de la bordure par la couleur orange. Ensuite, nous ajouterons un rayon de bordure juste pour rendre les cercles, les bords juste un peu circulaires. On va y aller avec dix, je suis désolé, on va y aller avec 12 pixels juste ici. Et c'est tout. Je vais aller de l'avant et faire des mises à jour. Et voyons à quoi ça ressemble. Passons au tableau de bord. Cliquons ici, accédons à la page d'accueil, et voilà. Donc, en voyageant dans son éventuel éventuel, nous avons bien sûr le bouton ici qui ferait un lien vers notre booking.com. Mais alors, comment y parvenir ? où vous avez l' arrière-plan se fondant essentiellement dans la tête de l'Allemagne. Très prochaine vidéo où je vais vous montrer comment faire. 10. Mélanger l'en-tête et la bannière de page d'accueil: Comment fusionner maintenant la bannière de la page d'accueil dans notre en-tête ? Eh bien, tout comme ce que nous avons ici, ce que nous allons faire ici, c'est encore ça, nous allons revenir ici et éditons la page d'accueil Hadar. Tout d'abord, ce que je vais faire, c'est que je vais simplement supprimer le fond noir dont nous n'avons plus besoin. Je vais donc passer au style et ensuite cliquer à nouveau sur le bouton classique pour le réinitialiser à son arrière-plan par défaut, qui est essentiellement la couleur blanche. Je vais le mettre à jour. Très bien, voyons la page. Revenons au profil de la page d'accueil. Bon, maintenant, je vais maintenant modifier la page d'accueil elle-même. Je vais donc cliquer sur Modifier avec Elementor, le tout premier lien là-haut. Maintenant, permettez-moi de vous montrer le pouvoir des marges négatives pour modifier cette section contenant la bannière. Venez ici à Advanced, dissociez les valeurs des marges. Et maintenant, je vais tout simplement aller jusqu' à 222 pixels négatifs. Et voilà. Tout comme cela, nous avons pu fusionner l'en-tête avec la bannière de notre page d'accueil. Laissez-moi le mettre à jour. Voyons la page juste pour nous assurer qu'elle existe. C'est notre toute nouvelle bannière de page d'accueil et Heather, comme ça. C'est donc essentiellement le pouvoir d'ajouter des marges négatives. Cependant, permettez-moi de souligner que cela ne fonctionne bien que sur votre vue de bureau. Le fait est que si je devais aller à la vue réactive, vous verrez que des marges négatives commenceront à apparaître. Et c'est assez moche. Ici, où vous avez le mode réactif. Si je passe celui-ci en tablette, c'est encore ou ki, bien que vous puissiez maintenant voir que le menu, l'icône du hamburger ici ne regarde pas les notes. Mais si vous allez au mobile, ça devient vraiment, vraiment mauvais. Vous pouvez voir maintenant que ce n'est pas le cas. Le logo est essentiellement avec le voyage de synthèse vocale rencontre l'aventure. Et vous pouvez construire même voir l'humble avoir beaucoup d'âmes. Nous allons évidemment devoir apporter plusieurs modifications au design réactif. Il y en aura pour plus tard, mais pour l'instant, Dexter s'applique. Ça a l'air plutôt bien. Donc, Allemagne, la prochaine vidéo où je vais vous montrer bannière alternative pour la page d'accueil. 11. arrière-plan vidéo: Cela dit prémisse, je veux vous montrer une bannière de page d'accueil alternative n'est pas exactement une bannière, c'est plutôt une vidéo. Vous allez donc avoir un arrière-plan vidéo par opposition à l'image d' arrière-plan traditionnelle. C'est donc assez simple. C'est la vidéo que j'aimerais ajouter à l'arrière-plan. C'est un fait pour moi, essentiellement une contrainte de soi, mes voyages autour du mur. Je vais donc aller de l'avant et simplement saisir ce lien ici. Et nous allons modifier cette section. Maintenant, en raison des marges négatives, vous ne pourrez peut-être pas voir le bouton Modifier la section ici. Ou bien, ce que vous voulez faire, c'est simplement utiliser le navigateur. Bon, alors descendez ici, cliquez sur Naviguer POUR cliquer sur la section, et maintenant vous pouvez modifier la section. Encore une fois, la navigation tous nos boutons étant très, très utiles. Nous allons plutôt passer au style de mise en page. Et là, vous avez des antécédents. On va aller avec la vidéo. Vous cliquez sur la vidéo et vous êtes ici. Je vais coller le lien vers la vidéo YouTube. Mais vous pouvez également coller le lien vers depuis Vimeo. Ensuite, vous pouvez choisir l'heure de début, l'heure de fin. Vous pouvez choisir de jouer une fois ou d' activer le mode de confidentialité sur mobile. Si vous voulez aller avec la vidéo d'arrière-plan, je vous recommande vivement de choisir un arrière-plan. Donc, pour le fond, je vais simplement utiliser la même image. La raison est qu' il s'agit d'une vidéo, parfois elle ne peut pas être lu et parce qu'elle provient de YouTube, peut-être YouTube en tant que problème ou pour une raison ou l'autre, la vidéo ne fonctionne pas. Elemental utiliserait l' arrière-plan comme options de secours. Je vais aller de l'avant et mettre à jour. Jetons un coup d'œil à notre page. En arrivant ici, rafraîchissez la page. Et voilà. Maintenant, vous pouvez voir que nous avons la vidéo de fond. Maintenant, jouez une fin. Bien sûr, je ne vais pas nier que les vidéos ne sont pas plus puissantes qu'une image. De toute évidence, les vidéos sont beaucoup plus intéressantes. Mais veuillez noter que les vidéos présentent des inconvénients certains inconvénients, accord, cela peut ralentir votre site Web. Donc, si vous voulez utiliser une vidéo, essayez de vous assurer que la vidéo n'est pas très longue, peut-être dix secondes maximum, car plus la vidéo est longue, la longitude prend de charge et cela ralentira. sur votre site Web. Alors, s'il vous plaît, rendez les vidéos très, très courtes. Assurez-vous d'ajouter une image d'arrière-plan comme une image de fond habile au cas où la vidéo ne se chargera pas. Mais c'est l'alternative à votre page d'accueil. Mais je vous remercie d'avoir regardé et, bien sûr, je vous verrai dans la prochaine classe. 12. Créer la page d'accueil Partie 1: Bienvenue de retour. Continuons à créer la page d'accueil. Et comme vous pouvez le constater, je suis revenu à l'image d' arrière-plan traditionnelle. Mais comme je l'ai dit, si vous voulez utiliser la vidéo, c'est très bien. La prochaine section que nous allons construire sera la section deux colonnes qui aura quelques textes à gauche, une image à droite. Et la troisième section ici est très similaire. C'est juste les colonnes inversées. Dans la troisième section, nous avons l'image à gauche , puis le texte à droite. Alors, comment allons-nous y parvenir exactement ? C'est très, très simple. Nous allons aller sur une page d'accueil. Nous allons éditer. Et vous pouvez voir maintenant qu'il s'agit essentiellement de deux colonnes, 5050. Nous allons donc très facilement venir ici, créer une nouvelle section avec deux colonnes, 5050. Je vais modifier la section, assurer qu'elle est pleine largeur. Et ensuite, les colonnes GAAP ne diront pas d'écart. Très bien, donc dans la première section ici, il va y avoir des textes. Laissez-moi dessiner l' éditeur de texte ici. Lambda copie le texte fictif de Lorem Ipsum que j'ai ici. Laissez-moi simplement aller de l'avant et coller ça. Et puis nous avons aussi l'en-tête. Laissez-moi laisser tomber ça par oser. C'est un H2. Ici. Je n'ai pas vraiment créé d'en-tête, de vrai titre. Laissez-moi juste taper. Nous aimerions voyager. Juste quelque chose. C'est ça. Ensuite, pour la deuxième colonne ici, nous allons ajouter l'image, et je vais ajouter cette image que j'ai prise à Istanbul. Il s'agissait d'un groupe de nos étudiants. Je me promenais et j'ai dit : Hé, voudriez-vous que je prenne une photo de cette idée ? J'ai donc pris la photo. Assurez-vous donc de définir cette image pour qu'elle soit trompeuse. Encore une fois, nous voulons que l'image occupe toute la largeur et la hauteur de sa colonne. Mais nous devons également ajouter le bouton En savoir plus. Ce que je vais faire, bien sûr, c'est de revenir ici, faire glisser le bouton, de le déposer ici. Et puis je vais dire que j'apprends, apprends plus. Ensuite, ce lien peut accéder à la page À propos. Donc je vais simplement dire la barre oblique avant. Et c'est là. Je vais m' aligner sur le centre. Apportons quelques changements. Typographie de style. Je vais dire transformer en majuscules. La déclaration sur le non dans quelle intégration. Puis la couleur du texte. Je vais passer au noir. Maintenant, le bouton lui-même va aller avec une couleur de fond de blanc. La saisie d'arrière-plan ici va être de couleur blanche. Mais ensuite, nous allons définir une bordure de solide pour que nous puissions réellement voir le bouton. Et si vous le vouliez, vous pouvez également ajouter des vidéos de bordure. Mais je ne vais pas le faire. Une dernière chose à faire serait d'aligner notre contenu au milieu. Je vais donc cliquer sur le bouton Modifier la colonne, commentaires, Alignement vertical, se fixe au milieu. Et puis une autre chose que nous faisons pour avoir un peu d' espace à gauche et à droite est contre le texte n'est pas exactement à droite du bord de la colonne, donc nous devons ajouter un peu d'espacement. Je vais donc y retourner. Ce que nous allons faire, c'est très, très simplement, que nous allons passer à l'avance pour la même colonne. Juste ici. Nous allons dissocier les valeurs du modèle. Et puis je vais donner 50 pixels 50 pixels sur la gauche. Et c'est là. Nous avons construit notre deuxième section très facilement, puisque la troisième section est très similaire dans la conception, très similaire dans la conception, ce que nous pouvons faire est simplement de cliquer avec le bouton droit de la souris sur la protéine de section d'édition, puis de dupliquer. Et maintenant, ce que je vais simplement faire c'est que je vais faire glisser cette première colonne ici, la faire glisser jusqu' ici, changer les colonnes. Et maintenant très simplement, allons-y et modifions cette image. Je vais choisir celui que j'ai pris en Argentine. Le support s'adapte en L, couleur grasse. Et puis, bien sûr, pour les textes ici, ai-je ajouté quelque chose qui a voyagé aux meilleurs endroits comme en-tête, d'accord, alors permettez-moi de changer cet en-tête ici et de dire voyager aux meilleurs endroits. Vous y allez. Très bien, allons-y maintenant les mises à jour. Disons à quoi ressemble la page. Allez, allons-y. Ne supportez pas avec moi. Malheureusement, ce sont là les risques professionnels d' un instructeur, d'un enseignant. Parfois, votre incident commence à gâcher et finalement il est mis à jour. D'accord, merci. Maintenant, voyons la page. Défilons vers le bas et voilà. Ok, encore une chose. En prime, nous pourrions ajouter quelques animations pour que les images puissent aimer, vous savez, cette diapositive de gauche et de droite. Ce que nous pouvons faire, c'est simplement revenir en arrière et vérifier cette allégorie pour la première image, celle avec les étudiants ici, je vais modifier l'image. Accédez à Advanced Briquet, vous avez des effets de mouvement. Je vais dire animation d'entrée. Glissons-nous de la lumière. Ok, si légèrement à partir de la droite, donc en tranchant par la droite. Et puis pour cette image était simplement faire glisser l'opposé à partir de la gauche. Effets de mouvement. Ralenti, informe ou aimé. D'accord, c'était plutôt bizarre. Je ne sais pas exactement ce qu'ils ont fait. Laissez-moi refaire ça. OK. Pour une raison quelconque, la fenêtre d'image passe à la deuxième colonne. Je ne sais pas pourquoi c'est arrivé, mais d'accord, je vais juste aller de l'avant et mettre à jour. On y va. Voyons la page. Défilons vers le bas. Il fait glisser de gauche, induit en erreur et délice, et c'est là. Et c' est ainsi que notre page d'accueil commence à entrer en vigueur. Joignez-vous à moi dans la prochaine vidéo où nous allons maintenant jeter un coup d'œil à la façon dont nous allons construire la prochaine section, qui serait la conception unique du voyage. 13. Créer la page d'accueil Partie 2: Très bien, donc on passe à autre chose. Et la prochaine section sera la section unique du design voyagé, qui aura l'air un peu délicate, mais ce n'est pas si délicat. Nous avons essentiellement une très grande section avec plusieurs colonnes. Une colonne contient l'en-tête. design général unique et nous aurons l'élément séparateur des textes , puis nous aurons un élément de section intérieure avec trois colonnes, avec trois titres différents, diagrammes et quelques textes. Allons donc modifier la page d'accueil une fois de plus. Et je vais faire défiler jusqu'ici. Et le premier nœud est simplement fait pour faire glisser l'en-tête ici. Et j'ajouterai l' édition qui dit tous les créateurs de voyages uniques et uniques. Bien sûr, je vais aligner celui-ci pour décentrer. Puisque nous avons maintenant du contenu dans notre section, je vais modifier cette section. Nous allons définir la largeur à 1240 pixels. Ensuite, style, nous allons ajouter une couleur d'arrière-plan de huit GAFI. C'est donc ce genre de couleur blanc grisâtre. Je ne connais vraiment pas la couleur exacte, ce qu'on appelle ça. Mais le fait ici est que nous essayons de différencier la section juste au-dessus de la nouvelle section que nous sommes en train de créer. L'un des meilleurs moyens de différencier et de différencier les sections consiste donc à ajouter des arrière-plans de couleurs différentes. Donc je pense que le design de la truffe, je vais aussi revenir avancer. Ajoutez un peu de rembourrage. Ainsi, 50 pixels en haut, 50 pixels en bas également. Et c'est là. L'élément suivant sera les éléments séparateurs qui se trouvent juste en dessous de notre design de voyage unique. Regardez dans le centre d'Atlanta et la largeur ici serait d' environ, on y va avec 50%. Je vais peut-être que c'est un peu trop. Que diriez-vous de 40 % ? Très bien, donc pour le pourcentage, prochain sera les textes ici, serrures où il ne s'agit pas des étoiles qui ont réellement volé ce texte sur un site Web. Je ne m'en souviens pas, mais je n'ai pas trouvé ça avec ce texte. D'accord. Je ne suis pas trop, je ne suis pas si intelligent, donc je vais déposer l'éditeur de texte juste sous le séparateur et coller ce texte juste là. Et bien sûr, nous allons l' aligner sur le centre puis dernier mais non le moindre, nous avons notre section de trois colonnes ici. Nous allons donc utiliser la section ina. On va encore marcher intelligemment. En gros, chaque colonne a exactement le même design. Vous avez un diagramme, vous avez un en-tête, puis vous avez des textes. Nous allons donc simplement le faire, nous allons concevoir la toute première image de la colonne Jabbar ici. Et c'est l'image avec l'avion du monde qui peut les délinquants un ici, insérer ce média, le faire en taille réelle. Ensuite, nous allons ajouter un en-tête. Il suffit de déplacer l'image. On va faire de celui-ci un h3. J'ai un texte ici et il s'appelle, celui-ci doit être présenté. destinations, qui seront les prochaines destinations en tête d'affiche. Faisons un changement. Je vais m'aligner sur le centre, mais pour le style, nous allons changer la typographie en majuscules à la lumière normale. Et enfin, mais non le moindre, nous aurons l'outil d'édition de texte. Faisons glisser ça là-dedans. Laissez-moi juste prendre ce texte ici. Similaires à eux le texte fictif Ipsum. Je vais aller de l'avant et coller ça. Je pense que c'est exactement les mêmes textes, différents, stupides. D'accord. Eh bien, son style, ça s'est aligné sur le centre. C'est là. Ce qu' il fallait simplement faire maintenant, c'est d'entrer ici, cliquer avec le bouton droit sur le bouton Modifier la colonne et de simplement dupliquer, puis de dupliquer une fois de plus. Ensuite, nous viendrons ici et supprimerons la quatrième colonne. C'est le cas. Cela va donc venir ici maintenant, changer cette image pour le centre commercial avec la carte. Et j'ai ici les textes qui disent les guides de voyage. Ainsi, en plus de pouvoir proposer certaines destinations à leurs clients, les offres de voyage de passeport sont également des guides de voyage. Et puis le dernier ici, je vais changer l'image sur celle avec les billets d'avion. J'ai l'en-tête ici qui dit « abordable ». Un autre livre. Pour l'obtenir, c'est ça. là que tu y vas. Je vais donc aller de l'avant maintenant et simplement mettre à jour cela. Et voyons la page. Et voilà un design de voyage ionique. là que tu y vas. J'espère que vous avez apprécié cette leçon particulière, Jimmy, dans la prochaine, où nous continuerons à construire notre page d'accueil. Je vous verrai alors. 14. Ajouter la galerie de page d'accueil: Allons maintenant et ajoutons la galerie à notre page d'accueil. Maintenant, je sais que dans un site de démonstration ici, vous pouvez voir que j'ai créé une section services, mais d'un coup de ne pas faire la même chose parce que c'est très, très simple et je ne veux pas perdez trop de temps vous apprendre la même chose encore et encore. En gros, si vous souhaitez créer ce même type de section, vous aurez votre fond blanc et vous aurez trois colonnes. La première colonne ici serait la manchette ou les services. Vous aurez la colonne suivante qui utilisera l'élément de section interne pour les trois colonnes. Ensuite, vous pouvez simplement répéter cette même section pour les colonnes monétaires ici. Maintenant, l'élément que j'ai utilisé qui a l'image ici, le titre, c'est la boîte d'information. Vous le trouverez sur les modules complémentaires essentiels de l' ONU. C'est donc celui ici sur les modules complémentaires sociaux que vous verrez en boîte complète. Et c'est la seule variété, suffit donc de la glisser, de la déposer à l'intérieur. Et maintenant, vous pouvez choisir votre image. Vous allez ajouter l'outil marée, le contenu, etc. Vous pouvez donc considérer cela comme une affectation si vous souhaitez construire une structure similaire. Mais je vais aller de l'avant maintenant et créer notre galerie. Pour la galerie, il ne s'agit en fait pas d'une galerie, mais plutôt d'un carrousel d'images. Je vais aller voir le général ici. Et puis vous voyez que nous avons le carrousel d' images ici. Cliquez sur glisser, déposez-le à l'intérieur. Et je vais choisir des images. Ensuite, j'ai sélectionné six images. Laissez-moi juste jeter un coup d'œil sur mon autre écran ici. J'ai cette image, cette image, cette image ici aussi, celle-ci qui fait quatre. J'ai aussi celui-là de Cengage et celui de Verbit lot J ou K. Laissez-moi aller l'avant maintenant et créer une galerie. L'astuce ici est que toutes ces images ont exactement la même hauteur de 800 pixels que vous pouvez voir, ainsi que la largeur de 1200 pixels. Ainsi, chaque fois que vous ajoutez images à votre galerie ou à votre carrousel, veillez à ce qu'elles soient aussi proches que possible en termes de dimensions. Ils n'étaient pas obligés d'être exactement, mais ils ne devraient pas différer de plus que, disons cinq ou dix pixels, donner ou prendre. Essayez donc de faire les images aient la même taille que possible. Nous allons donc l' insérer dans la galerie. Et nous allons choisir une taille réelle. Les esclaves à montrer seraient deux à la fois. tranche à faire défiler serait également deux. Vous ne voulez pas étirer les images, car cela pourrait les rendre floues. Donc, nous garderons cela sur aucune heure de navigation approuvée ? Oui. Ou vous pourriez simplement y aller avec des points. Ils se présenteront ici, ce qui est également possible. Ensuite, le lien vous pouvez les lier à un fichier multimédia si vous le souhaitez. Mais je ne vais pas les relier. Je vais juste les laisser allumer. La légende accompagnera les titres. Il y aura donc les titres de chaque image affichée. Et c'est là. Très bien, je vais donc modifier cette session maintenant. Choisissez une largeur totale, puis un écart de colonnes, pas d'espace. Et voilà. Je vais aller de l'avant et je vais simplement mettre à jour. Et voyons notre page. Je peux faire défiler ici. Et voilà. C'est la lumière de notre galerie. Une chose que vous pouvez également faire, vous pouvez considérer cela comme une mission. Vous pouvez ajouter le bas pour Instagram. Donc, en gros, ce que vous pourriez faire, c'est encore une fois que vous passez ici pour éditer avec Elementor. Si vous avez une page Instagram sur un lien Instagram, vous pouvez simplement venir ici. vous suffit de faire glisser votre bouton, Il vous suffit de faire glisser votre bouton, de le déposer ici, puis de personnaliser et de dire voir nos photos sur Instagram. Et puis, si vous le souhaitez, vous pouvez ajouter le lien à Instagram. Encore une fois, vous avez également la possibilité de le faire. Nous allons aller de l'avant et supprimer. Une autre chose à faire est que pour votre carrousel d'images ici, vous disposerez des options supplémentaires pour la lecture automatique. Pause sur Havas, pause sur l'interaction. Donc, faites une pause en survol. Vous pouvez choisir de savoir pour celui-là simplement pour vous assurer que les énergies sont toujours colons. Bien sûr, vous pouvez définir votre boucle infinie. Votre direction peut être à gauche ou peut-être à droite. À la place. Vous avez toutes ces options et c'est vraiment très subjectif. Ok, donc je vais rester à gauche, juste des mises à jour. Et c'est là. C'est tout pour ajouter notre galerie Allemagne. Lorsque la prochaine vidéo est disponible maintenant, ajoutez notre blog. Je vous verrai alors. 15. Ajouter la section Blog: Allons maintenant et ajoutons la section blog sur notre page d'accueil. Et vous pouvez voir que c'est ce que nous essayons d'accomplir. Nous aurons notre titre, son diviseur et deux articles de blog, qui auront l'image en vedette, le titre de l'article, l'extrait, ainsi qu'un lien en savoir plus. Et puis les articles en savoir plus en bas sont en fait liés à la page du blog. Mais voici le truc. Permettez-moi de faire glisser le même site de démonstration ici, mais avec le backend, vous verrez que j'ai accès à certains éléments ici, comme la grille d'impulsions ainsi que la ligne de temps post-production. Mais si on vous demande d'aller sur mon propre site ici. Et si je fais défiler jusqu'à la section des atomes essentiels, vous verrez que je n'ai pas accès à ces éléments et que vous ne les verrez pas non plus. Et c'est parce que nous devons les activer dans le back-end. De quoi est-ce que je parle ? Permettez-moi tout d'abord de faire glisser cette page. Passons au backend, le backend WordPress actuel, et vous verrez des modules complémentaires essentiels ici. Allez-y et cliquez dessus. Et maintenant, là où vous avez des éléments, vous cliquez là-dedans. Et vous ici, c'est ici que vous pouvez activer ou désactiver des éléments que vous marcherez en largeur. Faisons donc ça. Bon, je vais en fait aller de l'avant et désactiver chaque élément ou une aldose, activer quelques-uns, ceux que nous utiliserions probablement. Je vais activer l'élément de témoignage puis juste ici sous vos éléments de contenu dynamiques, j'activerai la grille de publication ainsi que la ligne de temps de publication. Allons de l'avant et sauvegardons nos paramètres. Nous allons maintenant revenir à l'édition de la page d'accueil avec Elementor I. Si je fais défiler jusqu'à la section des modules complémentaires essentiels, vous verrez que nous avons maintenant accès à quelques-uns des éléments que je n'affiche pas. Sommes-nous encore en mesure de voir un meilleur paiement, emplois faciles, des pages de transporteur, des éléments, je ne sais pas pourquoi, mais c'est très bien. Au moins maintenant, nous avons accès à la grille de publication ainsi qu'à la chronologie de la publication. Voici donc exactement ce que nous allons faire. Tout d'abord, nous allons faire glisser notre en-tête, ce qui dirait visiter notre blog. Je vais donc faire glisser le titre ici. Je dirai donc des visites sur le blog. Alignons ça au centre. Le prochain sera le séparateur. Alors, ajoutons aussi. Je vais m'aligner sur le centre avec une largeur très, très courte d'environ, disons que 20% devraient aller bien. Maintenant, voici l' essentiel. Nous allons y retourner. Nous allons utiliser la grille de publication, la chronologie de la publication. Je vais vous montrer comment cela fonctionne lorsque nous construisons sur la page du blog. Mais je vais faire glisser la grille des poteaux juste ici, juste en dessous du séparateur. Allons-le là-dedans. OK. Maintenant, les messages par page, je vais passer de celui-ci à deux. Nous n'avons que deux pages ici. Et un petit, c'est que vous pouvez obtenir par peut-être l'auteur. Vous pouvez également choisir spécifiquement par catégorie et simplement entrer ici et taper le nom de la catégorie dont vous souhaitez afficher les publications. Ainsi, vous pouvez compenser par un message que vous pouvez commander par la date décroissante, et ainsi de suite. Vous avez accès à tous ces paramètres. Mais le principal qui veut vraiment marcher avec sera les paramètres de mise en page ici. Ici, vous n'avez qu' un modèle de mise en page, qui est le lit par défaut, ce qui est très bien. Mais les colonnes vont aussi en faire une. Maintenant, ici, la taille de l'image, nous allons aller avec le plein. Et voilà. Maintenant, les choses commencent à mieux paraître. Mais bien sûr, nous pouvons aussi faire des choses comme le spectacle notre Seigneur davantage si vous le souhaitez. Donc, lorsque vous l'activez, vous verrez ce bouton ici qui chargera également d'autres articles de blog, mais nous ne le ferons pas. Vous avez accès à un style de grille, ce qui n'est pas une grande différence entre le bon et le missionnaire. Je suppose que lorsque vous tournez plus de poteaux et que vous accueillez avec plus de colonnes, c'est là que vous verrez que la balle de différence serait prise avec la maçonnerie pour l'instant. OK. Vous avez montré un titre ? Oui. Nous voulons montrer le titre. S'ils acceptent oui, mais nous allons étendre le mot à l'exception de 50 mots. Bon, donc tu y vas, 50 lettres puis 50 lettres. Et puis ici, le bouton « Plus », oui, nous voulons le faire. Afficher les termes de publication. Nous pouvons le montrer. Il s'agirait de choses comme vos balises, vos catégories, etc. Mais nous n'allons pas le faire, alors nous allons simplement aller de l'avant et cacher ça. Maintenant. Afficher le compteur. Ce sera pour l'auteur, la date de publication. Je vais y aller et cacher ça. Mais encore une fois, c' est tout à fait subjectif. Vous êtes les bienvenus à l'affiche. Vous aurez besoin de ces informations si vous le souhaitez. Très bien, des liens ici. Vous pouvez faire des choses comme Target vide car vos images ne sont pas pleines de cela serait à des fins de référencement, sont et ainsi de suite. Très bien, passons au style et voyons ce que nous avons ici. Le style de grille de publication par défaut, vous avez le style, qui aurait les dates. Vous avez ici le style trois, qui n'aura pas la date similaire à la date par défaut. Je suppose qu'il n'y a pas eu beaucoup de différence. Et bien sûr, ici, vous pouvez faire des choses comme changer la couleur d' arrière-plan des messages, ajouter un peu plus d'espacement si vous le souhaitez. Nous allons venir ici pour la typographie des couleurs et le style. Donc, juste ici, lorsque vous survolez le titre, vous pouvez voir ici, il a cette couleur ici. Nous pouvons simplement changer cela en noir pour qu' il n'y ait pas de changement, c'est simplement un lien. Cela ne va pas changer. Mais encore une fois, très subjectif. Vous pouvez ajouter un lien par jour si vous souhaitez aborder le style. Je vais venir ici pour la typographie. Pour la déclaration. Nous pouvons y aller avec aucun, donc ce n'est pas en jeu, mais encore une fois, jusqu'à ce que vous soyez subjectif ou stylé, nous pouvons aller avec une ampoule italique. Je vais juste m'en tenir à la valeur par défaut. Très bien, c'est ça qu'une typographie. Et puis, ici, vous avez le style de coupe en vol stationnaire. ce moment, lorsque vous survolez l'image en vedette, vous avez un peu comme cette animation, cette animation qui s'estompe. Et ensuite, avec le fond noir, vous pouvez cliquer là-dedans. C'est ici que vous pouvez modifier l'animation. Donc, au lieu de s'estomper et vous pouvez peut-être faire un zoom avant là où il zoome. Ou vous pouvez faire un glissement vers le haut, pour que vous puissiez le voir. Et puis, bien sûr, vous pouvez changer la couleur de fond, peut-être en faire quelque chose de moins sombre, quelque chose comme ça. Vous pouvez également modifier l' icône. Elles seront affichées. Toutes ces options sont disponibles pour vous. Mais je vais juste laisser ça tel quel. Je viens de changer la couleur pour devenir un peu plus sombre. Et c'est bon, c'est très bien. Et c'est tout. Très bien, enfin, nous allons simplement ajouter le bouton Lire la suite. Nous allons donc faire glisser un bouton ici. Et je dirai en savoir plus. Et maintenant, ce lien va aller sur la page du blog, ainsi de suite. Grand blog aligné sur le centre. Et nous allons apporter des changements aussi bons au style. L'arrière-plan. Pour le bas sera la couleur orange, puis la couleur du texte, bien sûr, serait blanche. Passons à la topographie qui transforme les majuscules. Et disons en fait lire plus de messages. Lire plus de messages, je crois qu' ils jettent un coup d'œil. Oui, il est écrit Lire plus de messages. Nous avons donc eu plus de messages. Et c'est tout. Revenons au style. Pour la typographie, nous allons revenir dans le style ici, le curation non. Nous n'avons donc pas de bouton de ligne là-dedans. Et c'est tout. Vous pouvez ajouter vos bordures et faire d'autres choses aussi, mais je pense que cela devrait aller bien pour l'instant. Allons de l'avant et mettons à jour. Et c'est tout. Vous êtes donc les bienvenus pour le coiffer. Quoi qu'il en soit, vous n'avez pas nécessairement besoin d'utiliser exactement les mêmes couleurs ou exactement les mêmes textes et ainsi de suite. Et c'est tout. Une autre chose, une autre chose que nous devrions faire avant d'arrondir cela est d' ajouter de l'espace entre la section galerie et un blog, ainsi que le bloc et la FUTA. Revenons très vite. Et bien sûr, nous allons modifier cette section pour notre blog et nous allons ajouter un peu de rembourrage. Allons donc ici et dans la section Avancé, dissociez ces valeurs. Alors, en haut, ajoutons 50. En bas, nous allons ajouter 15. Et cela devrait suffire. Allons de l'avant la mise à jour. Encore une fois. Consultez la page. Faites défiler vers le bas, et c'est tout. Nous avons donc créé la page de blog, German vin, prochaine vidéo où nous allons construire la section des offres et des forfaits. 16. Ajouter notre appel à l'action: Allons de l'avant et ajoutons la section suivante, qui sera les offres et les forfaits. Et ce sera très, très simple, très simple. Nous allons utiliser le bouton d'appel à l' action pour les atomes essentiels. Veuillez donc vous rendre dans le backend de vos atomes essentiels. Et vous trouverez le bouton et la section des éléments marketing. Allez-y et activez l'appel à l'action. Allons de l'avant et enregistrez les paramètres. C'est ça. Je vais revenir à l'actualisation de ma page d'accueil. Maintenant, faisons défiler jusqu'ici. Éditons en fait avec Elementor abord avant de faire défiler vers le bas. Très bien, faisons défiler jusqu'ici. Et maintenant, je vais passer à mes modules complémentaires essentiels. Et où est notre bouton d'appel à l'action est juste ici. Appel à l'action. Je vais déposer ça là-dedans. Et c'est très, très simple. Tout ce que nous allons faire ici, c'est simplement changer le style de contenu de base à la grille flexible. Vous avez donc maintenant le bouton sur le blanc, puis le texte à gauche. Et bien sûr, nous allons simplement modifier le titre ici. Deux offres, des forfaits. Forfaits. Je vais changer ça en H3 avec les textes orange. Vous pouvez bien sûr changer cela en blanc ou en noir. Et pour la texture ici, je suis désolée, je ne vais pas fournir de costume à x. Nous allons le laisser tel quel. Et puis le texte du bouton lui-même, nous pouvons le modifier ici, là où vous avez textes des boutons principaux il suffit de changer celui-ci dans notre boutique maintenant. Magasinez maintenant. Et cela serait lié à un site externe ou peut-être à une autre page de votre site. Nous allons passer au style light. Et puis pour le style ici où vous avez le style de bouton principal, je vais cliquer là-dedans. Ce que vous voulez faire ici, c'est qu'il y a encore une fois, quand vous survolez sur Shop Now vous pouvez voir qu'il passe au col bleu. Personnellement, je n'aime pas ça. Donc ce que je vais faire, c'est que je vais passer pour planer sur votre perm important style hover. Ensuite, une variété où vous avez la couleur d'arrière-plan. Je vais simplement changer celle-ci en orange. Maintenant, vous pouvez voir qu'il est orange et non bleu. Nous essayons donc de rester cohérents avec le motif de couleurs que nous avons de notre côté. C'est le seul changement que je vais apporter. Allons-y maintenant la mise à jour. Voyons la page. Faites défiler vers le bas C'est là, des offres et des forfaits. Maintenant, je sais bien sûr qu'il nous faut un peu d'espacement entre les offres sur les colis et l'ampoule de pied de page. Nous allons toujours ajouter la section des commentaires. C'est donc là que nous ajouterons de l'espace et c'est tout pour ajouter la section offres sur les forfaits. Merci d'avoir regardé. Je vous verrai dans le prochain cours. 17. Ajouter la section Ajouter la section Témoignages: Enfin, nous allons ajouter la section Avis. Et bien sûr, il s'agit très souvent d'une partie très importante de tout site Web, car les clients ou les clients potentiels veulent savoir que d'autres personnes ont fait affaire avec votre entreprise et qu' ils ont aimé votre service. Nous allons donc y ajouter trois critiques de Beyond under sin, Vanessa Carlton et Raul Gonzalez. Maintenant, le problème est que nous avons déjà activé l'élément de témoignage avec le plug-in Adams essentiel. Nous avons deux choix lorsqu'il s' agit d'ajouter des témoignages. La version de Elemental vous en fournit un. Vous le trouverez sur l'idée générale, l'idée générale, vous le verrez. C'est juste ici, un témoignage juste à côté des onglets. Mais il y avait leurs modules sociaux. Nous avons également l'élément témoignage. Permettez-moi donc de vous montrer brièvement la différence avec celle des modules complémentaires essentiels. Vous avez accès au bouton d'attente ici. Le style est un peu différent. Vous pouvez voir avec le, c'est celui qui provient de la version gratuite d'élémental. Ici, vous pouvez avoir la vignette ou l'avatar de la personne qui fournit le témoignage sous le témoignage lui-même. Mais avec celui des atomes essentiels, c'est un peu différent. Alésage. Vous avez accès au bouton écrit ici et vous pouvez faire plusieurs choses comme, non, bien sûr pas comme d'habitude, modifier les alignements de mise en page, afin de sélectionner votre style. Vous pouvez même avoir des choses comme le témoignage ici en haut, vous aurez l'icône puis l'image. Vous avez toutes ces options ici. Et cela vous offre bien plus d'options que celle fournie par la version gratuite d'Elementor. Mais cela étant dit, je vais utiliser la version gratuite d' Elemental juste pour obtenir exactement le même type de structure. Bon, allons donc y aller de l'avant et faire ça. Je vais supprimer l'élément et nous ajouterons un en-tête. Et il dira des commentaires, des commentaires des anciens clients. Et bien sûr, nous allons nous aligner sur le centre. Et nous allons ajouter notre séparateur comme d'habitude. Nous allons donc ajouter le séparateur. Je pense qu'ils devraient avoir environ 25 ans. Les boucles ne sont pas 25 volts, 45 % pour les 5 %. Maintenant, nous allons ajouter l'élément ina, section car nous allons travailler avec trois colonnes. Je vais donc déposer ça là-dedans. Comme avant. Ce qui a simplement été fait ici, c'est que nous fournirons le premier formulaire de témoignage au-delà d'Anderson. Et ils vont simplement dupliquer puis modifier les noms ainsi que l'emplacement et d'autres tâches pour le reste des témoignages. Très vite, passons ici, allons voir le général. Et ajoutons le premier témoignage ici. Et c'est au-delà, au-delà d'Anderson. Maintenant, pour l'outil de type, vous pouvez simplement ajouter le pays qu'il a à la place, d'accord, donc au lieu du titre de poste de la personne, vous pouvez simplement ajouter le pays. Au-delà d'Anderson, c'est d'Islande. Et ici, je vais choisir l'image. Alors que notre ami au-delà des zones, vous pouvez voir que tout est souriant, très, très heureux. Et c'est là. Très bien, vous pouvez voir la taille du texte ici est assez petite. Donc, ce que nous allons faire ici pour le contenu, c'est que nous allons passer au style. Et là où il faut progresser ici. Allons de l'avant, puis choisissez le bouton de topographie. Maintenant, pour la taille, nous allons aller avec 18 pixels de distance. Et quoi d'autre ? C'est à peu près tout. Nous allons donc simplement y aller de l'avant et ensuite dupliquer cette section ou cette colonne et dupliquer une fois de plus. Supprimez la dernière colonne. Et alors, toujours simplement faire ici en ce moment , c'est changer draps Anderson et Vanessa Carlton, qui est souriant. Elle est très contente. Vanessa Carlton. Et Vanessa est originaire des États-Unis. Et puis nous avons notre dernier témoignage ici de Gonzalez et Roll est oui, c'est un peu souriant exactement, mais il n'est pas en colère non plus. Donc Gonzalez et il vient d'Espagne espanol. Comment épeler le spin ? Spin est le SPA IN ? OK. C'est là. Nous avons fini. Encore une chose. Ajoutons notre rembourrage à cette section. Tellement avancé, nous allons aller avec 50 et le top 50, en bas aussi. mises à jour. Et voilà, allons-y et voyons la page. Et voilà, juste en bas. C'est à peu près comment ajouter des témoignages à votre site Web. Merci d'avoir regardé et, comme toujours, je vous verrai dans le prochain cours. 18. Examen des pages d'accueil: Bon, bon retour, Felicitas Sian. Nous avons créé avec succès la première page, y compris l' en-tête et le pied de page. Et j'espère que vous apprécierez le cours jusqu'à présent. Maintenant, nous allons créer deux autres pages, la page du blog, puis la page de contact. Et maintenant, je sais que dans le menu principal, nous avons la page Fonctionnalités ainsi que la page À propos, mais je ne vais pas les construire juste pour gagner du temps. Je ne veux pas que ces coûts soient trop longs. Et aussi parce qu'à ce stade, vous avez déjà une idée du fonctionnement élémentaire. Il ne reste plus qu'à vous imaginer à quoi ressemble votre page À propos. Voulez-vous avoir une grande bannière ? Voulez-vous avoir une section à trois colonnes ? Une colonne contient une image, une autre contient des textes, une autre comporte une vidéo. Vous pouvez faire tout cela. Je vais donc vous mettre au défi trouver des idées créatives pour créer votre propre page À propos de la page fœtale en vedette ou tout autre type de page que vous pourriez construire sur votre propre site. Mais nous allons construire la page de blog spécifiquement parce qu' elle est un peu différente de vos pages statiques traditionnelles. La page du blog contient tous vos articles. Je vais vous montrer comment créer une page de blog. Et ensuite, la page de contact se construira car elle n'implique pas l'utilisation d'un plugin appelé le plugin WP forms, que beaucoup de gens ne savent pas comment utiliser. J'espère qu'une fois de plus, j'espère que vous apprécierez le cours jusqu'à présent, vous avez vous-même une merveilleuse page d'accueil. progressons pas vers la construction du reste de nos pages. Continuons. 19. Créer la page de blog: Très bien, alors allons-y maintenant et construisons la page de blog, que nous avons nommée la page Articles dans le menu principal, mais c'est en fait la page du blog. La première chose que nous allons faire ici, c'est que nous ne pouvons pas encore éditer directement avec Elementor encore éditer directement avec Elementor parce que nous devons abord modifier la page depuis le backend, à partir du travail traditionnel est back-end. Juste ici. Nous pouvons maintenant cliquer sur Modifier avec Elementor. Cela va maintenant nous donner accès à l'interface élémentaire de la page. La première chose que je vais faire, c'est que je vais venir ici pour faire sit-ins et simplement cacher le titre de la page. Ensuite, nous utiliserons simplement notre propre titre. Et nous appellerons celui-ci notre blog. On va le vendre comme un H1, aller au style. En fait, alignons sur le centre d'abord, allez au style. Et ensuite, pour la typographie, nous allons la définir comme principale. Si vous ne travaillez pas avec les polices globales, vous pouvez définir cette valeur sur environ 60 pixels ou quelque chose du genre. Assurez-vous que c'est assez gros, non ? Ensuite, nous allons ajouter notre séparateur pour le blog et nous l' alignerons sur le centre. Réglez cela à la hauteur du présent. Maintenant, jetez un coup d'œil à ça. D'accord, nous allons ajouter des publications de différentes catégories. Nous allons utiliser notre grille de messages à partir des modules complémentaires essentiels ici. Maintenant, vous avez une chronologie de publication, qui est très intéressé par ce que cela va faire, c' est qu'il affichera vos publications dans une chronologie verticale et qu'il s'agit d'un style différent. Personnellement, je n'en suis pas un grand fan, mais vous avez cette option si vous le souhaitez. Mais je ne vais pas marcher avec ça. Je vais simplement utiliser la grille de poteau. Très bien, donc je vais faire glisser la grille de pose, sauter des crêtes sous le séparateur. Et maintenant, regardez ça. La source sera évidemment nos publications, mais nous pouvons interroger en fonction de l'auteur, de la taxe Fermat, etc. Mais nous allons choisir les catégories. Ici. Je vais taper en Europe. Très bien. Nous allons prendre des messages en provenance d'Europe. La page postpayée ici serait définie sur trois, puis la mise en page est définie. Nous allons donc choisir trois colonnes pour la taille de l'image. On va aller avec plein comme d'habitude. Maintenant, vous remarquerez que parce que j'utilise des tailles différentes de mes images pour les publications, il y a un désalignement en termes de hauteurs. Comme évidemment, la mode à Istanbul a une image plus grande. Et puis, pour leurs péchés à Pittsburgh et à Glasgow, les photos sont plus courtes. Il y a un moyen de contourner cela et vous le verrez ici. Vous avez la hauteur de l'image. Vous pouvez simplement définir une hauteur fixe pour vos images. Le seul inconvénient est que parfois vous n' obtiendrez peut-être pas les meilleurs angles. Comme par exemple, vous savez, si vous rendez celui-ci plus grand que, vous risquez de passer à côté du meilleur angle de vos images et ainsi de suite. C'est donc le seul inconvénient. Idéalement, vous souhaitez utiliser des images de même largeur et hauteur pour les images mises en avant, mais ce n'est pas un problème. C'est bon. Très bien, donc on a ça. Ce qu'il faut simplement faire, c'est ajouter un titre pour indiquer que, accord, il s'agit de nos messages en Europe. Je vais donc venir ici et dire Europe. Très bien, maintenant apportons quelques changements à la pose réelle elle-même. Paramètres de mise en page. Ici. Les mots acceptés que nous allons utiliser avec 15. Afficher en savoir plus. Oui, montrez Metta. Oui, Bot Loves. Passez au style. Ce que je vais faire ici, c'est que je vais sélectionner le style numéro deux. Celui-ci nous indiquera la date A2 qui garantit l'avatar ou le nom de l'auteur. Je préfère donc ce style particulier. Maintenant, de comprendre lui-même, nous allons passer à la typographie et à l'espacement des couleurs. Encore une fois, vous avez la couleur du survol du titre. Nous l'avons fait plus tôt, je vais changer celle-ci en orange. Ainsi, lorsqu'ils survolent le lien des messages, il devient orange. Ensuite, pour la typographie, nous allons également apporter quelques changements ici. Je vais rendre cela un peu plus petit, juste pour que la majestueuse ville de Glasgow puisse être sur une seule ligne. Le style, je vais aller avec une décoration italique, aucun. Pour le bouton Lire la suite. Changeons aussi. Je vais découvrir ici avec le style de bouton Mo, la couleur du texte. On va aller avec l'orange juste pour garder les choses constantes. Et puis, bien sûr, pour la typographie, je vais cliquer ici, aller à la déclaration et ensuite m'asseoir à personne. Et c'est tout. Nous l'avons mis en place. Europe, nous avons trois postes. Ce que je veux faire maintenant, c'est simplement dupliquer l'Europe, dupliquer les Postgres ici. Je traînerai l'Europe, la deuxième, déposerai au-dessus d'ici, puis je mettrai celle-ci en Asie. Ce sera la prochaine catégorie. Maintenant, pour les Postgres proprement dits, nous allons changer les catégories ici en Asie. Laissez-moi taper Gia . Vous y allez. Et puis enfin, mais non des moindres, refaisons exactement la même chose, doublons, doublons. Maintenant, je vais traîner l'Asie. Les changements voulus en Amérique du Sud, venez ici aux Postgres. Changements, un pour l'Amérique. Rappelez-vous l'Amérique du Sud. Et c'est là. Une autre chose que nous pourrions faire est d' ajouter de l'espace entre les grilles des poteaux. Alors, jetez un œil à ça. Ok, j'irai à mon travail de troisième cycle, soit un pour l'Europe, aller à l'avancement sur le lien entre les valeurs et ensuite je vais définir le modèle le plus bas. Disons 25 pixels. Rien de trop drastique ne fera aussi la phrase pour l'Asie. Pose de 25 pixels en bas. Et puis, enfin, mais non des moindres, nous ferons aussi pour l'Amérique du Sud, sur la pose de 25 pixels inférieurs. Allons-y maintenant les mises à jour. Et voyons la page. C'est là. On va donc ajouter un peu d'espacement pour le titre du blog lui-même acheté. Jetez un coup d'œil à ça. Cela a l'air plutôt soigné et c'est plutôt cool. Permettez-moi de modifier rapidement le titre du blog. Ajoutons un peu d'espacement. Nous allons donc y aller, en fait, allez au bouton de section juste ici, en maintenant tout le contenu ira à avancé sur le lien et ils définiront simplement 50 pixels pour le haut et ensuite 50 pixels pour le bas comme bien. Ok, ou les portes. Maintenant, une fois de plus, voyons la page. Et voilà la loi, voilà. C'est la page de blog entièrement construite. Cependant, je veux vous défier. Pour rendre les choses plus intéressantes. Je vais vous montrer un exemple de ce dont je parle. À la fois avec élémental et avec les atomes essentiels sont des plugins. Vous avez accès à de nombreux éléments pour rendre vos pages plus excitantes et plus dynamiques. Par exemple, les atomes essentiels ont activé un autre élément. Et c'est l'accordéon d'image. Vous le trouverez sur les éléments créatifs ici vous verrez l'accordéon d'image. Allez-y, activez-le. Revenons maintenant à la page ici et laissez-moi vous montrer une chose que nous pourrions faire. Je vais éditer avec Elementor. Nous allons utiliser l'accordéon d'image. Maintenant, vérifiez encore ça. Je vais faire défiler vers le bas. Sont des atomes essentiels. Nous avons l' élément accordéon d'image ici. Je vais cliquer sur le glisser-déposer juste au-dessus de vous. Très bien. Avant de commencer à le modifier, je vais ajouter un autre titre juste au-dessus de l'accordéon de l'image. Et nous pouvons appeler ce dernier message. À titre d'exemple, je vais en fait ajouter un peu de rembourrage par le haut. Allons-y 25 pixels. Juste pour vous donner une certaine distance entre le titre du bloc réel et nous laisser des publications. Et je vais y jeter un coup d'œil à nouveau. Je vais aller dans mon accordéon d'image et inviter ici. Nous pouvons faire tellement de choses pour la première fois, ici, je vais cliquer à l'intérieur, changer l'image ici pour être l'un des messages. Celui-là, dans les articles de Saint-Pétersbourg, je vais choisir l'image en vedette. Insérez ça. Et maintenant, écrivain, vous verrez le rendre actif. Oui, nous voulons faire ça, je ne pourrais pas être actif pour qu'il soit lié aux publications ici en ce moment, je vais changer ce titre. Deux visites à Saint-Pétersbourg. Ce sera le titre. Et là, il y aurait les extraits. Ce serait le texte, à l' exception du texte, que nous pouvons le modifier maintenant ici, là où vous lui avez permis de lier, vous voulez montrer ceci et maintenant ici, c'est là que vous ajouteriez le lien à le poste. Laissez-moi le faire rapidement. Permettez-moi de voir la page très rapidement. Pendant des jours à Saint-Pétersbourg. Donc, ici, je vais saisir ce lien ici. Encore une fois, notez que vous n'avez pas besoin de copier le nom de domaine lui-même. Il suffit d'utiliser la barre oblique avant, puis le nom de la publication ou l' URL des publications. Je vais copier ça. Allez juste ici, revenez à Edit. Cliquez sur le tout premier accordéon d' image ici. Et maintenant, ici, le lien de titre. Je vais aller de l'avant maintenant et simplement coller ça. Cela va donc maintenant être lié à la publication ou quatre jours à Saint-Pétersbourg. Encore une fois, je pourrais faire la même chose pour la seconde. D'après ici aussi. Notre liste choisit celle du Rainbow Mountain. Et encore une fois, je peux venir ici et changer le titre de Rainbow Mountain. Un peu vite, Rainbow Mountain, et ainsi de suite. C'est pour le deuxième trimestre en conséquence, le troisième trimestre. Et je vais juste changer celui-ci par celui que Rapa Nui. Et puis, bien sûr, le dernier mais non le moindre, allons avec celui de la Turquie, de mode et de la mode à Istanbul. Insérez celui-là. C'est le cas. Je vais aller de l'avant et maintenant les mises à jour. Et maintenant, nous allons jeter un coup d' œil à la page de blog améliorée. Maintenant, regardez ça. Vous avez des articles de blog, par exemple, à Pittsburgh, vous aurez cette montagne arc-en-ciel. Ils peuvent cliquer sur celui-ci pour Rapa Nui, celle-ci pour la mode et Istanbul. Et s'ils ne sont pas intéressés, ils peuvent maintenant faire défiler vers le bas pour voir les publications d'Europe, Asie, d'Amérique du Sud, etc. Il s'agit donc d'une façon, une autre façon de rendre vos pages plus interactives, plus dynamiques. Vous pouvez également ajouter une animation, comme si vous pouvez la configurer de sorte que vous soyez peut-être des diapositives à partir de la gauche ou de la droite. Je vous ai montré comment faire cela sur la page d'accueil. Essayez donc d'être créatif. Si vous n'êtes pas satisfait de la statique de votre page, vous pouvez toujours pimenter les choses en utilisant des éléments créatifs et en ajoutant de l'animation. Et vous verrez une amélioration considérable de la dynamique de vos pages. C'est tout pour construire la page du blog. Merci beaucoup d'avoir regardé. Je vous verrai dans le prochain cours. 20. Créer la page nous de création de la page nous: J'ai juste construit la page du blog et maintenant nous allons construire une autre page très importante, et ce sera la page Contact. Idéalement, bien sûr, sur votre page de contact, vous souhaitez avoir une sorte de formulaire de contact, peut-être même une carte Google. Si vous avez un emplacement physique. Sinon, nous n'avons pas d'emplacement physique, mais nous allons ajouter un formulaire de contact. Maintenant, il existe plusieurs plugins pour créer des formulaires de contact. Et en fait, si vous utilisez la version payante d'Elemental, vous aurez l'élément de formulaire. Mais nous utilisons la version gratuite d'Elemental. Nous allons donc installer un autre plugin. Et ce plugin s'appelle les plugins WP Forms. Permettez-moi donc de taper des formulaires WP. Et c'est le seul ici. Très bien, alors allons-y l'installation. Et nous allons maintenant activer le plugin. Très bien, donc nous allons simplement cliquer sur créer votre premier formulaire ici. bien avec ce plugin particulier, c'est qu'il s'intègre très bien avec elemental. Je vais taper un nom ici. Ce sera donc le formulaire de contact. Ce sera le nom de ce formulaire. formulaire de contact est disponible ici. Vous avez nos différents modèles, allez choisir le facteur de formulaire de contact simple. Nous pouvons voir la démo ici. Vous pouvez voir que c'est la démo ici. Très, très simple. Vous aurez le nom, l'e-mail, puis les champs de message. Donc cela devrait convenir à nos objectifs, je vais aller de l'avant et simplement cliquer sur Utiliser le modèle. C'est en soi, mais je vais apporter quelques modifications au fonctionnement du plug-in tel qu'il est ici, vous avez les champs disponibles pour vous avec la version gratuite, il y a une version payante où vous avez accès à ces champs sophistiqués et aux champs de paiement, etc., mais nous n'en avons pas besoin. Donc, le gingembre que je vais faire ici serait de modifier le champ de nom. Je vais donc simplement cliquer à l'intérieur. Et ici, vous avez le format. Je préfère le format simple où vous n' avez qu' une seule ligne pour le nom. Mais vous avez forcé le milieu, dernier, le premier, le dernier, et ainsi de suite. Sur l'Advanced, vous pouvez modifier la taille du champ pour lancer deux petits, en fonction de vos goûts et de ce que vous préférez. Vous pouvez ajouter vos lunettes CSS ici. Vous avez aussi une logique intelligente, ce qui, oups, je suis désolée. J'ai oublié. Cette option n'est disponible qu'avec la version payante, pour les options de terrain. C'est ça. Vous pouvez donc revenir ici et ajouter des champs supplémentaires comme des cases à cocher déroulantes. Si vous le vouliez. Sous configuration ici, je suis désolé, sous paramètres, que ce soit ici, c'est ici que vous pouvez modifier des choses comme le nom du formulaire lui-même. Vous pouvez modifier le texte du bouton et influencer les applications. C'est ici que vous pouvez configurer les types de notifications que vous souhaitez recevoir chaque fois que quelqu'un envoie le formulaire de contact. Nous voulons être avertis ici par défaut, l'e-mail d'administration associé à votre site Web WordPress sera ici, mais vous pouvez ajouter vos propres éléments de messagerie personnalisés. te montrer quelque chose, d'accord, juste ici, où vous avez du nom. Par défaut, il sera défini sur le nom de votre site Web, mais il sera beaucoup plus logique de les définir le nom réel de la personne qui envoie le message. Donc, ici, je clique sur Afficher les balises intelligentes. Il suffit de choisir le champ Nom, ou votre prénom, LastName, en fonction du type de sentiment que vous avez pour le nom. Et puis même pour les e-mails. Nous allons simplement choisir le champ e-mail. Et je vais aller de l'avant et simplement économiser. Vous avez les conformations ici aussi bien que OK, que se passe-t-il une fois qu'ils ont rempli le formulaire de contact ? Est-ce qu'ils reçoivent un message ? Si c'est le cas, c'est ici que vous pouvez modifier le message. Vous pouvez les afficher sur une page particulière et ce sera une beauté particulière de tout créé. Vous pouvez simplement les rediriger vers une URL externe si vous le souhaitez. Nous ne ferons rien de tout ça. Allons de l'avant maintenant tout simplement pour gagner encore une fois, fermez ceci. Nous allons maintenant passer à la page de contact. Allons de l'avant et éditons d' abord la page depuis le backend WordPress. Ensuite, je vais cliquer sur Modifier avec Elementor pour que nous puissions maintenant utiliser l'interface Elementor et vérifier cela. Très bien, oups, j'ai oublié de faire une chose. Mes excuses. Nous devons activer les formulaires WP sont des extensions pour les éléments essentiels. Faisons donc rapidement cela. Je vais aller voir les atomes essentiels ici. Passons aux éléments. Et puis, ici, vous avez les éléments de style de formulaire. Vous verrez WP Forms. Allons de l'avant et maintenant, activez-le. Vous pouvez voir que vous avez accès à d'autres types de formes comme les formes fluides, Gravity Forms, qui sont en fait de très, très bonnes formes Ninja et ainsi de suite. Quoi qu'il en soit, continuons et sauvegardons nos paramètres. Et je vais fermer ça. Rafraîchissons cette page une fois de plus. Ok, donc le problème avec les formulaires WE est que même avec la version gratuite d'Elemental, vous aurez accès à l'élément. Une fois que vous avez installé et activé le plugin, vous pouvez le voir ici sur la base, vous avez des formulaires WP d'Elemental. Je vais cliquer sur glisser à l'intérieur ici. Et je vais vous montrer la différence entre celui-ci et celui fourni par les modules complémentaires essentiels. Revenons en arrière, faites défiler jusqu'ici. Ajoutons celui des modules complémentaires essentiels dans une autre section. Maintenant, vous allez voir la principale différence, d'accord ? C'est celui qui concerne les atomes essentiels. Je vais choisir le contact pour le taux de mortalité. Il s' agit de sélectionner le formulaire. Nous allons choisir ça. Maintenant, juste ici. Comparez celui-ci avec celui d'ici. Allons-y avec celui des premiers éléments. Nous allons également choisir le formulaire de contact. Le fait est que vous n' avez accès qu'au type de formulaire à choisir. Les options d'affichage sont bonnes. Vous souhaitez capturer le nom du formulaire, la description, puis avancer. n'y a rien de plus là-dedans. Cependant, pour celui qui possède des modules complémentaires essentiels, vous avez accès à beaucoup plus. Vous pouvez afficher les étiquettes de description, veuillez la tenir. Vous avez même reçu nos messages d'erreur. Vous souhaitez afficher des messages d'erreur ou souhaitez-vous les masquer ? Par exemple, si quelqu'un n'a pas rempli le champ de nom, puis appuyez sur Soumettre, vous vouliez afficher le message d'erreur ou non. Vous avez accès à de nombreuses options de style. Vous pouvez ajouter une couleur d' arrière-plan de formulaire. Vous pouvez aligner le formulaire à vos marges de largeur. Vous disposez de toutes sortes d'options de style pour les étiquettes de titre et de description, etc. Toutes ces options, vous ne les obtenez pas avec celle avec l'élément fourni par la version gratuite d'Elemental. C'est pourquoi je préfère utiliser celui fourni par les atomes essentiels. Donc, je vais aller de l'avant et fermer celle-ci par Elemental. Marchons sur celui-ci. Très, très simple. Nous n'allons pas apporter de changements énormes ici, sauf que nous allons simplement cacher le titre de l'annuaire téléphonique. Tout le monde sait qu'il s'agit d'un formulaire de contact, il n'est donc pas nécessaire de changer quoi que ce soit ici. Une chose que nous allons faire, c' est de masquer le titre de la page. Ensuite, nous ajouterons notre propre titre. Très bien, et nous allons simplement choisir celui-ci comme un H1 pour la typographie de style, qui est primordiale. Et nous allons tout simplement le plus froid Swan notre Contactez-nous. C'est ça. Nous ajouterons un peu de rembourrage aux valeurs des liens de section. On va y aller avec 50 en haut, puis 50 en dessous. En fait, j'y pense. Le livre Contactez-nous est en fait très, très volumineux. C'est bon, nous allons juste aligner celui-ci au milieu. Et nous ajouterons simplement un motif pour le formulaire lui-même. Je vais cliquer sur l'élément de formulaire. Allons à Advanced. Et nous ajouterons également du rembourrage. Il suffit de lui donner une certaine distance entre le titre réel et le formulaire lui-même. Allez-y et mettez-le à jour. C'est ce que je vais aller de l'avant maintenant et voir la page. Et c'est tout pour la page Contactez-nous. Encore une fois, vous pouvez rendre cela un peu plus excitant. Vous pouvez utiliser peut-être deux colonnes par opposition à une section. la première colonne, vous pouvez ajouter une image de quelqu'un qui peut appeler ou quelqu'un qui envoie un e-mail, ce genre de choses. Il existe donc différentes façons de modifier la page Contactez-nous et de la rendre plus excitante si vous le souhaitez. Mais c'est très, très simple, très simple, et cela correspond à nos objectifs. Merci donc d'avoir regardé et je vous verrai dans le prochain cours. 21. Introduction à l'élément de conception réactif: Très bien, techniquement, nous avons fini de construire notre site Web. Nous avons la page d'accueil, nous avons la page du blog et nous aurons également une page de contact ainsi que l' en-tête et le pied de page. Mais il y a une chose très, très importante que nous devons prendre en charge et qui sera la conception réactive. Rappelez-vous toujours que de nombreuses personnes utilisent aujourd'hui leur téléphone portable pour naviguer sur Internet. Et si quelqu'un trébuche, tombe sur votre site Web sur le téléphone portable, vous voulez vous assurer qu'il a l'air bien. Ce que nous allons faire dans la suite de cette section, c'est que je vais vous montrer comment reconstruire l'en-tête, la page d'accueil, le pied et les autres pages pour avoir l'air réactif. Ainsi, s'il est affiché sur une tablette ou sur un appareil mobile, il aura fière allure. Lambdas vous offre une démonstration très, très rapide en ce moment , c'est pour la vue tablette. Vous pouvez voir que j'ai réduit la taille de mon écran à celle d'une tablette. Et vous pouvez voir maintenant qu'il est toujours très, très, très bien. Nous n'avons aucun problème avec l'espace dans l'en-tête. Ça a l'air bien. La section des notes de témoignage semble très bien. La photo est très bien. Mais maintenant, si je fais défiler jusqu' à la plus petite taille d'écran, qui sera généralement votre téléphone portable. Permettez-moi de revenir en haut maintenant, vous pouvez voir que l'en-tête est différent. Nous avons un fond noir. Nous avons notre logo. Nous avons le menu principal ici, qui est maintenant le menu des hamburgers, que vous avez déjà vu de nombreuses fois auparavant. Et ensuite, si je fais défiler de nouveau vers le bas, vous verrez que c'est beau vous verrez que c'est beau jusqu' au pied de page. Le design réactif est donc extrêmement important. À venir, je vais vous montrer comment vous pouvez apporter des modifications à votre site Web pour qu'il soit beau sur n'importe quel appareil mobile. Lambda mentionne également rapidement que lorsqu'il s'agit d'un design réactif, il y a quelques concepts à prendre en compte. Il s'agirait de réduire les marges comme les modèles que vous avez ajoutés dans la version de bureau. Par exemple, vous vous en souvenez avec la bannière de la page d'accueil. Pour cette section, nous avons dû ajouter une marge négative scandaleuse et je pense qu'elle était de marge négative scandaleuse et je pense qu'elle était moins deux à deux pixels en ce qui concerne les versions mobiles. Donc les versions réactives, vous devrez peut-être réduire cette taille ou Mabou, ou peut-être même dans certaines situations augmenter la taille. Un ajustement aux images ou aux motifs sera nécessaire. Il arrive également que vous ayez simplement besoin de masquer des types d'éléments de réglage lorsqu'ils sont masquer des types d'éléments de réglage affichés sur un appareil mobile, car ils peuvent avoir fière allure sur le bureau. Un exemple serait qu'un éditeur vidéo aura fière allure sur le bureau. Mais sur un appareil mobile, ce n'est peut-être pas forcément génial. La même chose s'applique également aux animations. Et les mesures seront bonnes sur un ordinateur de bureau, les passerelles d'un ordinateur de bureau, mais le téléphone mobile peut avoir du mal à afficher cette animation. Le but de cette conception massive est donc le sacrifice. Vous apportez des modifications, vous supprimez certaines fonctionnalités de sorte que lorsqu'ils sont affichés sur un appareil mobile, la grille Uber sera affichée. C'est donc tout pour l'introduction très rapide à la conception réactive. Commençons maintenant avec ça. 22. En-tête réactif partie partie: Très bien, commençons donc à concevoir notre en-tête pour être réactif et Lambda vous montre les états tels qu'ils sont en ce moment. Le bureau est presque terminé. Lorsque nous commençons à minimiser l'écran de notre navigateur. Vous pouvez voir maintenant qu'à ce stade , il s'agirait de la vue tablette. Et vous pouvez voir que le logo devient beaucoup plus petit. Le menu s'est également transformé en menu traditionnel de hamburgers. Et c'est bon, mais il peut certainement être amélioré. Mais si nous allons un peu plus petits maintenant, vous pouvez voir que c'est là que les choses ont l'air vraiment, vraiment mal. Il s'agit de la vue mobile, celle du téléphone portable. Nous devions donc apporter quelques changements ici. Je vais y aller. Et en fait, avant de faire cela, laissez-moi vous montrer l'autre en-tête, l'en-tête global. Allons sur la page de contact et vous remarquerez que celle-ci est un peu meilleure. Nous avons le fond noir puis sur mobile, même si le menu des hamburgers est mal aligné sur le logo, c'est encore beaucoup mieux car nous n'avons pas d'espace blanc en haut. Très bien, je vais modifier les en-têtes de la page d'accueil. Passons à Modifier avec Elementor , puis à la page d'accueil vers le haut. Maintenant, nous allons passer au mode réactif ici. Mode réactif, passons d'abord à la table. Maintenant, je veux vous montrer quelque chose de très rapide. Très bien, laissez-moi revenir à la réactivité. Par défaut, votre menu principal ou un menu vedette activé s'est transformé en menu hamburger en mode tablette. Toutefois, notez que vous n'avez pas toujours à suivre les paramètres par défaut. ce moment, si je passe à la table, comme vous pouvez le voir, il s'est tourné vers le menu des hamburgers. Et c'est parce que si je clique et que je modifiais le menu principal de la mise en page, vous verrez les tailles d'écran de tablette de point d'arrêt positives américaines tailles d'écran de tablette de point d'arrêt de 1025 pixels et moins. Bien sûr, le menu des hamburgers tacheté. Si nous ne voulons pas le faire, je vais plutôt passer à la vue mobile. Vue sur tablette. Le menu principal sera toujours affiché et nous ne transformerons le menu de hamburgers une fois que nous aurons atteint la vue mobile. Allons-y la mise à jour. Et voyons ce que ce petit, peu de changement a fait pour nous. Consultez la page. Retournez à la page d'accueil ou au dossier. Maintenant maintenant, il s'agit vue sur tablette. Et vous pouvez voir que ce n' est pas si mal. Vous n'avez pas besoin de passer une fois au téléphone portable, au menu des hamburgers, c'est-à-dire des tablettes. Bien sûr, si vous aviez beaucoup d'éléments de menu, disons 678 éléments que les années, vous n' aurez évidemment pas assez d'espace. Mais les établissements où vous avez quatre ou cinq éléments de menu, c'est parfait pour son affichage. Ils sont en mode tablette. Il y a deux changements que je vais faire ici. Il faudrait augmenter un peu la taille du logo. Ensuite, nous pourrions essayer de réduire un peu la taille des éléments du menu. Faisons ça très vite. Je vais revenir à l'en-tête de la page d'accueil. Nous allons passer pour répondre aux VUS, pourboire une tablette. Très bien. Je vais cliquer sur le menu. Je suis désolé, le logo soit ici au logo UT passe à Style. Notez maintenant que la dimension ici a été réglée sur tablette. Comme vous pouvez le voir, tout est une tablette, une tablette SASE. Je vais donc passer la taille à 100 %. Nous allons montrer la taille réelle du logo. Maintenant, pour le menu principal, je sais que tout est en blanc. Vous ne pouvez pas voir, mais supportez juste avec moi. Je vais cliquer sur Modifier, le menu principal, aller au style. Ensuite, nous allons passer à la typographie ici. Maintenant, regardez ceci, assurez-vous que la taille ici est réglée sur tablette. On va rendre ces 114 pixels un peu plus petit que d'habitude. Nous allons faire des mises à jour. Jetons maintenant un coup d'œil. Ajoutez le nouvel en-tête de la page d'accueil et le mode réactif. Et voilà. Vous y allez. Jusqu'à présent, ça a l'air très bien. Évidemment, nous allons apporter des changements majeurs au titre de la bannière, le gagnant que nous voyageons, c'est de l'aventure. Nous allons réduire la taille, mais il suffit de faire attention à l'en-tête réel. Ok, ça a l'air bien jusqu'à la vue mobile, qui va maintenant devoir marcher. Mais pour l'instant, sur mesure, cela a l'air plutôt bien. Jetons maintenant un coup d'œil à l'en-tête de l' en-tête global global. Nous allons choisir une page, choisissons la page Articles. Et à partir de là, nous allons modifier l'en-tête global. Nous allons d'abord gérer le mode tablette. Alors venons ici à votre réactif. Allez sur tablette. Très bien, nous allons gérer les points de pain. Nous allons passer celui-ci au mobile. Et cela fera exactement la même chose pour le style. Nous allons aligner vers la droite, pour le menu principal, aligner sur le blanc, puis sur le style. Nous allons venir ici pour la typographie. Assurez-vous que cette option est réglée sur tablette. Nous allons donc également utiliser 14 pixels. Et c'est là. Ok, le prochain sera le logo. N'oublions pas, nous devons faire le logo ou 100%. Assurez-vous que cette option est réglée sur des tablettes. 100 %, fin. Nous allons maintenant passer à la vue mobile. La seule chose que nous devons faire ici serait de définir le menu de navigation au centre. En fait, nous n' aurions pas dû toucher les alignements en mode tablette, donc c'est bon, nous allons simplement reculer. Je vais aller dans Content Layout , puis l'alignement ici. Laissons-le juste au centre. Je pense qu'ils iront mieux. Très bien. C'est ça. Je vais aller de l'avant et je vais le mettre à jour. Jetons un coup d'œil à ce que nous avons. Voyons la page. Nous allons choisir la page Articles. Réduisez la taille. Qu' avons-nous ici ? Très bien, est-ce que la tablette, tablette a l'air bien. Et maintenant, ce sera la vue mobile, mais il semble y avoir un désalignement avec le logo et ensuite le menu lui-même. Résolvons donc rapidement ce problème. Revenons en arrière. Nous devons rendre le logo peut-être un peu plus petit. Je pense que c'est un peu trop gros. Apportons donc ces changements. Retournez à mobile réactif. Ok, modifions le logo en premier alignement ici, positionnons-le au centre. Disons que celui-ci est dissident. Et puis peut-être que la taille, peut-être qu'un 100% est un peu trop grande, sans y penser. Donc, ramenons cela à 75 %. Allons-y et les dates. Et voyons à quoi cela ressemblera. Revenons en arrière sur la page. article. Je minimise, ok, beaucoup mieux maintenant et maintenant vous pouvez voir l'alignement est au centre. Et c'est là. Donc, j'ai l'air beaucoup mieux, beaucoup mieux en ce moment. Bien sûr, il y aura encore quelques changements supplémentaires aux en-têtes, mais pour l'instant, au moins, c'est bien mieux que ce que nous avions initialement. en-tête de la page d'accueil et l'en-tête global ont tous deux une meilleure apparence. Nous traiterons les espaces blancs dans l' en-tête de la page d'accueil de la vidéo suivante. 23. En-tête réactif partie partie 2: Bienvenue dans la deuxième partie de la refonte de l'en-tête réactif. Et j'ai oublié de mentionner dans une vidéo précédente lorsque j'ai changé les signes des éléments de menu ici, pour une raison quelconque, cela semble avoir affecté la version de bureau. Vous pouvez voir maintenant que les textes et ne sont plus majuscules, si quelque chose comme ça se produit, si quelque chose comme ça se produit, il suffit de revenir à la modification de l'en-tête de la page d'accueil. Ce que vous voulez faire, c'est simplement accéder à l'élément de menu. Je vais donc cliquer sur de nombreux éléments ici. Allez dans Style, accédez à la typographie ici, puis cliquez dessus. C'est tout ce que vous pouvez voir ici. Il est écrit Transformer en majuscules. Donc, nous ne faisons que réaffirmer que, Hé, nous voulons que les Let's soient majuscules. Je vais donc recommencer les mises à jour et revenons en arrière, voir la page. Allons sur la page d'accueil. OK. Et voilà. Donc honnêtement, je ne sais pas très bien pourquoi cela arrive, mais juste au cas où cela vous arriverait, faites simplement ce que je viens de faire. OK. Maintenant, auparavant, nous étions en mesure de faire ressembler à ceci la vue de la tablette, ce qui n'est pas mal du tout. Mais il est maintenant temps pour nous de jeter un coup d' œil à la vue mobile. Et vous pouvez voir en ce moment que ça a l'air vraiment, vraiment mauvais est beaucoup d'espaces blancs et le logo et le menu, le menu des hamburgers en ligne, mais nous devons réparer les espaces blancs. En fait, c'est la deuxième fois que j' enregistre cette vidéo en particulier , car dans la précédente, j'ai pu réparer l'en-tête mobile pour avoir exactement le même style. vous aurez la bannière en arrière-plan. Cependant, j'ai décidé de suivre un itinéraire différent et utiliser plutôt le même type d'en-tête que pour le reste des pages, comme celui ici où vous avez le fond noir, j'ai décidé d'utiliser ces en-tête de la page d'accueil en mode mobile. La raison en est que je voulais profiter de cette opportunité pour vous montrer un truc très cool que vous pouvez utiliser chaque fois que vous travaillez avec un design réactif. Revenons à la page d'accueil. Et je veux vous montrer quelque chose, non ? Je vais passer à Edit with Elementor en modifiant l'en-tête de la page d'accueil. Voici le truc. Bon, je vais reproduire cette section d'en-tête. Je vais cliquer ici avec le bouton droit de la souris. Doublons. En gros, nous avons maintenant deux en-têtes. La différence, c'est que je vais venir ici, aller dans cette section Modifier. Je vais aller au style, type d' arrière-plan, lui donner une couleur noire. Bon, maintenant, vérifiez ça. Je vais aller à Advanced, venir ici à Responsive, puis inviter ici vous avez des options de visibilité. Quand souhaitez-vous afficher cette section en fonction d'une taille d'écran ? Je vais le cacher sur le bureau. Oui. Nous ne voulons pas encore le filmer sur le bureau car nous utilisons toujours l' en-tête de la page d'accueil sur tablette. Nous voulons également le cacher jusqu'à cela. Mais ensuite, nous voulons le montrer quand il arrive à la vue mobile. En tant que tel, je vais maintenant passer à notre en-tête d'origine et faire le contraire. Allez à Avancé, Calmez l'hétéro responsive, puis masquez sur le bureau. Personne ne veut montrer, nous voulons montrer jusqu'à cela. Mais quand je vais sur Hide on Mobile, laissez-moi aller de l'avant et maintenant les mises à jour. Et jetez un coup d'œil à ça. Allons-y maintenant, consultez la page. Allons sur la page d'accueil. Ok, vous pouvez voir que nous avons toujours le même en-tête. Mais maintenant, pour la vue tablette, vous pouvez voir que nous avons toujours le même en-tête, le même en-tête au même en-tête. Maintenant, une fois qu'il est arrivé à la vue mobile, nous avons maintenant le fond noir avec l'idée du logo du centre , puis le menu des hamburgers en bas. Ensuite, nous avons la bannière de la page d'accueil. Et voilà. C'est donc une astuce que vous pouvez utiliser chaque fois que vous travaillez avec un design réactif. Vous pouvez choisir d'afficher une section particulière sur un ordinateur de bureau. Et vous pouvez choisir d' afficher une section spécifique spécifiquement uniquement sur tablette ou sur mobile. Une question que je pourrais avoir encore est correcte, pourquoi n'ai-je pas simplement dupliqué cet en-tête particulier, puis simplement utiliser cet en-tête sur la page d'accueil , puis simplement le masquer sur le bureau. et tablette , puis affichées sur mobile. Vous pouvez avoir deux têtes affichées sur n'importe quelle page avec élémental, moins c'est comme ça que fonctionne ce plug-in. Ok, donc si vous pensez, je vais simplement dupliquer cet en-tête et afficher deux en-têtes sur la même page, cacher un sur des ordinateurs de bureau ou ils ne veulent pas d'un mobile, ça ne fonctionnera pas parce que J'ai vraiment essayé. C'est pourquoi j'ai dû accéder à l'en-tête de la page d'accueil. Ensuite, sur ce même en-tête, créez une deuxième section qui s' affichera désormais spécifiquement sur la vue mobile. Mais ce n'est pas fini. Je veux vraiment faire autre chose. voyez, vous n'avez pas toujours à aller avec cette tomate. Vous avez le logo et le centre sur le dessus, puis le menu des hamburgers ou en dessous. Nous pouvons toujours utiliser deux colonnes ici. Comment se connecter à gauche et avoir le menu sur la lumière. Faisons cela. Je vais revenir à l' édition avec Elementor, l'en-tête de la page d'accueil et palettes avec pour cette page pour charger, d'accord, quelques modifications. Le deuxième en-tête en ce moment. Mais je vais maintenant passer en mode réactif. Passons à la vue mobile. All Kn a exactement ce que nous avons. Juste ici. Je vais le faire. Je vais cliquer sur la colonne contenant le logo. Juste ici. Je vais dire 50. Ensuite, je reviendrai ici dans la colonne du logo qui contient le logo, je suis désolé, tout cela dans le menu non plus. Ensuite, changez celui par 50 pour qu' ils soient côte à côte. Maintenant, apportons quelques changements. Je vais cliquer sur le menu Edition, l' icône, descendre, frapper la mise en page. Essayons de nous aligner sur le blanc. Et ensuite, on va le faire gros. Passons au style. Ici, vous aurez le déclencheur de menu et l'icône de fermeture cliquez à l'intérieur. Et maintenant Icone Size, je vais le faire au-dessus de 40 pixels. Keda devrait être assez grand. Et puis pour le logo, modifions également le logo. La taille de l'image est définie sur pleine, alignée vers la gauche. Passons au style max avec un 100%. Bon, allons-y maintenant. mises à jour. En fait, avant de le faire, tenons. Faisons également cela. Lorsque vous cliquez sur le menu des hamburgers. Ce sera le travail accompli. Mais vous pouvez voir maintenant que nous pouvons voir le texte. Le texte est entièrement blanc, nous devons donc apporter quelques modifications ici. Voici exactement ce que je vais faire. Je vais aller voir le menu déroulant de l'enseigne ici. Et puis la couleur de fond. On va aller avec le noir, couleur du texte, on va aller avec le blanc. Et ça devrait être ça. Je ne sais pas pourquoi nous ne le voyons pas encore ici, mais c'est bon. Je vais faire des mises à jour. Revenons en arrière, voir la page. Retournez à la page d'accueil, réduisez la fenêtre. Bon, donc maintenant vous pouvez dire, OK, nous avons le logo à gauche, le menu blanc. Maintenant, si nous cliquons sur le menu ici, il s'ouvre. Bobby ne peut toujours pas voir le texte qui s'intéresse. Bon, revenons en arrière et voyons ce qui a pu se passer. Et cela va être très intéressé. Je ne sais pas très bien pourquoi nous ne voyons pas les textes. Très bien. Ne vous inquiétez pas. Je vais venir ici en mode réactif, revenir à Mobile. Cliquez sur le menu juste ici, cliquez sur le menu déroulant. Pourquoi ne voyons-nous pas le texte ? Passons au style. Revenons ici à la typographie et wow, je ne suis pas tout à fait sûr pourquoi la taille ici plutôt qu'une seule, mais ça ne devrait pas en être une. Il devrait être un peu plus grand qu'un. C'est probablement un défaut en pixels. Donc mes excuses, je vais dire pourquoi moi un pixel, parfois j'ai l'impression que l'élément essaie de m' empêcher de faire de bonnes vidéos. Je ne sais vraiment pas pourquoi. Il a dit ne pas pixeler. C'est juste, c'est juste bizarre. Quoi qu'il en soit, vous pouvez voir qu'au moins les éléments du menu s'affichent maintenant, Wow, c'est très, très intéressé, je vous dis que le design web peut être une profession très étrange, très étrange. Parfois, vous avez impression que tous ces éléments ont à l'esprit qu'ils ne reviendront pas en arrière. Très bien, maintenant je clique ici. C'est là. Maintenant, vous pouvez voir que j' ai les éléments du menu et bien sûr, vous pouvez maintenant fermer. C'est donc essentiellement pour redessiner l'en-tête réactif. En fait, je vais aller de l'avant et faire exactement la même chose pour l'en-tête global pour la vue mobile, où je ferai la première colonne 50%, puis je ferai la deuxième colonne contenant l'élément de menu sont également de 50 %. Et agrandissez également l'icône du menu hamburger un peu plus grande. Vous pouvez donc y aller de l'avant et le faire également. Mais c'est tout pour créer le réactif ou les en-têtes du site Web. Merci d'avoir regardé la prochaine vidéo de l'événement allemand où nous allons maintenant jeter un coup d'œil à la refonte du pied de page pour être un peu plus responsable. Alors, vous. 24. pied de page réactif: Jetons maintenant un coup d'œil au pied de page et essayons de le rendre réactif. Et laissez-moi d'abord passer à la vue de la tablette. Et à partir de là, il y en a deux. Ça a l'air plutôt bien. Je ne pense pas que nous ayons besoin d'apporter des modifications à la vue de la tablette. Mais une fois que nous arrivons à la vue mobile, c'est là que nous avons un peu d'espace et que le problème peut voir l'en-tête du contact est un peu trop proche de l'image. Si nous allons vraiment petits, alors c'est la même chose. Sauf que l'image en ce moment est très, très bleue. La meilleure option pour nous sur la vue mobile serait peut-être simplement de supprimer cette image. Allons de l'avant et éditons avec Elementor, le pied de page mondial. Je vais d' abord passer à une tablette réactive , juste pour confirmer. Donc en mode réactif, j' étais bon en tablette. tablette a l'air bien. Il a l'air très bien. Je ne pense pas que nous ayons besoin de changer quoi que ce soit, sauf peut-être qu'en fait, tu sais quoi ? De la vue du modèle, l'image Jody semble plutôt floue. C'est parce qu'il est un peu trop grand. Ce que nous pouvons faire, c'est cela. Nous pouvons réduire la taille de la première colonne et augmenter celle de la deuxième colonne. Voyons donc ce que nous allons faire 50. Il est 50 ans, puis celui de droite sera de 50 ans. Mais l'image est encore un peu floue. Ce n'est donc pas génial. Très bien, revenons ici. Essayons de faire quelques ajustements. Peut-être que c'est ça. Disons 66. Je pense que 66 va bien et ils vont compléter la deuxième colonne, 33 pour qu'elle soit sur la même ligne. C'est toujours très bien, je suppose. Mais qu'en est-il de la vue mobile ou de la clé ? Maintenant, il peut voir que l'image est juste trop floue. Et parfois, il est préférable de simplement bouger et de ne pas être sûr de certains types d' éléments dans la vue mobile. Donc, il suffit de le faire ici, est-ce que ça va ? Nous allons cliquer sur la colonne d'édition de colonne qui ira à Avancé. Et comme nous l'avons fait précédemment, nous allons nous cacher sur mobile et c'est tout. Allons de l'avant et mettons à jour. Jetons un coup d'œil à ce que nous allons voir cette page. Accédez à la page d'accueil. Défilons vers le bas. Ok, donc la seule chose que nous devons faire ANS pour ajouter un peu de rembourrage à l'en-tête du contact. Lambdas retournent à la vue de retour à la tablette, juste pour confirmer que c'est bon. Donc oui, les vues de modèles sont très bien. C'est la vue mobile où nous allons avoir besoin d' ajouter de l'espace dans les contacts de notre bouton. Faisons donc rapidement cela. Nous allons revenir à l'édition avec le pied de page global Elementor. Nous allons simplement ajouter un motif au pied de page lui-même. C'est ce que nous allons simplement faire. Très bien, passons en mode réactif, mobile. Ok, nous allons donc modifier cette section ici, modifier la section avancée. Et nous allons simplement ajouter un peu de rembourrage. Je suppose que le motif des 25 pixels supérieurs devrait être raisonnable. Non pas du haut, mais ils sont en fait du haut. Oui, du haut. Désolé. Allez-y. page Bates. Faites défiler la page vers le bas. Et c'est maintenant que la queue de nourriture a l'air beaucoup, beaucoup mieux. Ok, alors rejoignez-moi dans la prochaine vidéo où nous allons maintenant jeter un coup d'œil à la réactivité de la page d'accueil. Et en particulier, la bannière de la page d'accueil. 25. Page d'accueil réactive: Très bien, alors jetons un coup d' œil à rendre la page d'accueil ou réactive. Et pour la plupart, ce n'est pas si mal. Il s'agit de la vue tablette. De toute évidence, nous pouvons réduire le titre un peu plus petit. Rendez également la banane un peu plus courte en hauteur. Juste ici. Bien sûr, nous pouvons ajouter un peu de rembourrage à la balle à section de voyage et également enseigner à mieux continuer la section. Mais je pense que c'est tout ce que nous devons faire parce que le reste est plutôt bon. La section de conception unique des canaux a fière allure. La galerie est très bien. Visites, notre section blog est très bien. Il n'emballe pas les avis, tout va bien. Cependant, pour la vue mobile, qui est ce que nous sommes arrivés ici, nous allons évidemment devoir rendre le texte beaucoup, beaucoup, beaucoup, beaucoup plus petit que vous pouvez le voir. Ajoutez également du rembourrage ici aussi pour la section voyage. Et nous devons faire quelque chose au sujet du fait que nous avons les deux images de la deuxième section alignées l'une à côté de l'autre idéalement devrait être, j'adorerai voyager. Puis cette image et ensuite nos enfants, les meilleurs endroits, puis l'image de cette montagne. Nous allons donc devoir faire quelque chose à ce sujet aussi. À part cela, le reste de la page semble plutôt bon à prendre en compte. La galerie est maintenant une seule ligne, ce qui est très bien. La section blog comporte également une seule ligne. Je veux 22 rangs, je suis désolé. Ensuite, il ne paquete pas tous les avis maintenant et la propre colonne séparée, puis produit aussi comme vous pouvez le voir, cela à. Tous. Bon, donc allons de l'avant et commençons à apporter les changements. Nous allons donc éditer avec Elementor. Nous allons d'abord gérer la bannière parce que c' est le principal problème. Très bien. Tablettes réactives. Qu'avons-nous ici ? Nous allons aller de l'avant et modifier le texte. Et le texte était d'environ 120 pixels. Comme vous pouvez le voir. On va avoir deux grosses cassures, juste un peu plus petit. Disons donc 88 pixels de large. Mais n'oubliez pas que nous avons fixé une hauteur pour la section. Passons maintenant à cette section. Nous avons ici la hauteur minimale. Nous allons réduire cela autant que possible. Ne vous inquiétez pas du fait que le texte chevauche l'en-tête pour l'instant. Mais essayons de vous donner une hauteur raisonnable pour la table. Et je pense que 519, mon bébé, trop petit, disons sept cents. Sept cents semblent assez bien. À partir d'ici, n' oubliez pas que nous lui donnons également des marges négatives. Maintenant que nous avons réduit la taille de cent dix cent à 700 femmes et allez également à l'invitation Advanced ici. Ne vous laissez pas berner par le fait que vous ne voyez rien à l'intérieur des cases de marge. Il hérite en fait des marges de la vue du bureau. Alors ici, allons-y maintenant et essayons de réduire cela. Désolé, j'ai oublié de dissocier. Allons faire 10. Très bien. Je vais continuer à remonter. Cela devrait être à propos, laissez-moi juste le donner 150 moins, d'accord, je ne peux pas faire ça. Laissez-moi juste essayer ça. Moins 150. D'accord ? Je pense que c'est un peu trop. Allons-y. Allons-y. Ok, donc il devrait y avoir environ 123 haut-parleurs de loisirs , un vingt-cinq, vingt-cinq pixels. Maintenant, pour le texte lui-même ou l'en-tête, nous pourrions le rendre un peu plus petit. Et c'est tout. Que pensez-vous ? Je pense que c'est très bien. 80 pixels pour l'en-tête. Réduisez la hauteur de cette section à 700 pixels, réduisez également la marge négative. Et je pense que c'est très bien, bien que soyez prudent, voyez-vous maintenant que si nous étendons le tableau à la taille maximale de l'écran, vous pouvez voir que l'espace blanc apparaît maintenant. Donc, cela devrait nous dire maintenant que tout va bien, attendez une seconde. Nous devons augmenter les imaginations négatives, en fait, c'est une autre chose que vous devriez être aisé. Lorsque vous appliquez marges négatives et un mode réactif, assurez-vous d' appliquer des marges négatives à la plus grande taille d'écran possible. Il s'agit de la plus grande concise possible pour la vue inclinée à 1024 par 878, nous allons augmenter ou, dans ce cas, réduire la marge négative. Parce que lorsque vous êtes négatif, nous réduisons cela. C'est 158. C'est à peu près le cas, donc maintenant, si nous réduisons cela à la plus petite taille pour tablette, nous ne verrons toujours aucun espace blanc. Et c'est ça. Je pense que c'est bon pour la tablette. Apportons maintenant quelques modifications à la première ou à la deuxième section. Et cela donne maintenant, que devons-nous faire ? Pour les tablettes ? Nous pouvons ajouter un peu de rembourrage. Très bien, nous allons aller ici et c'est la section. Allons à Advanced. Et juste ici, ajoutons un peu de rembourrage. On peut aller aux 25 pixels habituels , puis à un effet pixels pour le bas. Laissez-nous refroidir ici. Nous ferons exactement la même chose ici aussi. Je vais vous montrer quelque chose de vraiment cool. 25 pixels du haut , puis 25 pixels en bas. Je, maintenant, si tu regardes ça, tu réaliseras que ça n'a pas l'air si beau. Je veux dire, vous avez une image ici, les textes, la colonne des textes est un peu trop grande. Il est un peu trop grand. C'est génial aussi avec la deuxième section. Alors, que pouvons-nous faire exactement ? La chose la plus simple que nous puissions faire serait simplement faire en sorte que chaque colonne ait une largeur de 100 %. Donc, au lieu d'avoir deux colonnes, il faudra venir côte à côte. Nous aurons deux colonnes l'une au-dessus de l'autre. Par exemple, ici même, si j'ai donné cette première colonne ici, nous allons juste en donner une ou cent, cent. Et puis nous allons donner cette colonne et aussi 100. Et c'est là. heure actuelle, même si nous étendons à la plus grande taille possible sur une tablette, je pense que ça semble correct. Cela semble bien sur un pourboire, mais assurez-vous simplement que les images sont suffisamment grandes. Un changement à faire ici serait d'ajouter peu de rembourrage à ce bouton En savoir plus. Je vais cliquer là-dedans, passer au modèle avancé et les bouddhistes ajoutent en bas. Nous ajouterons un peu de rembourrage ici. Permettez-moi de dire que 25 pixels sont peut-être un peu trop importants. Dans ce cas, peut-être 15 pixels. 15 pixels sont corrects. Et c'est là. Ok, faisons exactement le même symptôme de thème ici aussi. Je vais cliquer sur cette colonne ici. Le goto, la largeur de la colonne. Je vais lui donner 100. Et puis la deuxième colonne ici aussi, 100. D'accord, puis jetez un coup d'œil à ça. Idéalement, nous voulons avoir cette colonne juste en haut de cette colonne. Comment pouvons-nous faire cela ? Eh bien, nous allons simplement aller dans cette section, tenir ces deux colonnes, tenir ces deux colonnes aller à la section, passer ici à Advanced. N'importe quel ici sur le réactif. Vous allez voir cette option pour inverser les colonnes. On va le faire sur tablette. On va le faire et on va aussi le faire. Maintenant, vous pouvez voir que l'enfant, le meilleur contre colonne, se trouve maintenant au sommet de la montagne. Et c'est exactement comme ça qu'il faut faire. Je vais juste y aller et ajouter un peu de rembourrage au bouton du propriétaire ici. Rembourrage en bas, 2515 pixels. Je crois que c'était une fusions et acquisitions, c'est bon, alors revenons au sommet. Faites défiler vers le bas K. Nous avons beaucoup d'espaces. Très bien. Ok, ça a l'air bien, ça va bien. Essayons maintenant de réduire la taille au plus petit et de voir s' il y a quelque chose que nous devons faire ici. Ça a l'air bien. Ça a l'air parfaitement bien. Et c'est là. D'accord. C'est tout pour la vue tablette. Qu'en est-il de la vue mobile ? Passons au mobile. Très bien, donc évidemment, la banane ici, nous allons devoir réparer celle-ci. Eh bien, je suis juste en train de faire défiler vers le bas et voir le reste de la page. Le reste de la page a l'air plutôt bien. Oui, ça a l'air bien. Tout se trouve maintenant dans une seule colonne dans laquelle nous avons utilisé une colonne, puis dans la page Contact. Donc, tout ce que nous devons faire maintenant, c'est de gérer la bannière. Alors, faisons-le. Je vais faire défiler ici. Passons à la section. Très bien, la première chose que nous allons faire maintenant c'est pour les hauteurs. Il s'agit d'une hauteur minimale de 700 pixels. Il est bien entendu hérité de la vue tablette. Voyons si nous pouvons peut-être augmenter un peu la taille. En fait. Je pense que 879, essayons d' obtenir quelque chose un peu, même comme 870 pixels peut-être. Essayons d'augmenter un peu la taille jusqu'à la plus grande taille pour la vue mobile. Maintenant, vous remarquerez qu' il y a un peu trop de marge négative car vous pouvez voir la ligne bleue et vous pouvez voir que le logo apparaît ci-dessus. Donc, ce qu'il va falloir faire maintenant, c'est aller à Advanced. Et ensuite, pour les marges négatives, essayons de ne pas en avoir besoin dans des marges négatives. En fait, j'allais faire 0. Oui, passons à 0 puisque nous avons de toute façon un arrière-plan occultant. Alors, qu'est-ce que McDonald's 0 ? C'est pour mobile. Très bien, donc à partir d'ici, réduisons les hauteurs. Nous allons réduire la hauteur de la page maintenant de la bannière plutôt quelque chose de raisonnable. Voyons voir. Je pense qu'il y a 535. Qu'en est-il du 530 ? Je pense que c'est très bien. colline des cinq tiers semble très bien. Faites défiler vers le bas D'accord. Oui. Je pense que tout irait bien. Cette fabrication est très petite. Et voyez. Ok, donc les textes peuvent devenir un peu trop volumineux en fait. Alors, faisons-le. Je vais revenir éditer l'épigraphie de la rubrique. On va le faire, c'est qu'on va essayer de rendre ça aussi petit que possible. Et maintenant, si nous étendons le plus grand pour la vue mobile, ce que vous avez ici c'est, d'accord, donc cela nous amène à une nouvelle discussion. Le silicium est de la plus grande taille pour les appareils mobiles, le Texas, il serait trop petit. Si nous essayons d'augmenter la taille ici, cela semble bien sur la taille d'écran la plus élevée possible pour le mobile. Le problème que je sais, c'est que si nous réduisons la taille de l'écran à la plus petite taille possible pour mobile, maintenant que le texte est un peu trop grand, ce que vous pouvez faire dans ce type de scénario est de changer de style. unité de taille depuis les pixels jusqu'au port de vue évalué, passez en revue la VW ou l'option ici, la VW est la largeur de la fenêtre. Nous allons essayer d'ajuster la taille du texte en fonction de la largeur de la taille de l'écran. Alors, jetez un œil à ça. Je vais passer maintenant à VW. Et essayons d'y aller avec une taille de dix. Pour les plus hauts. Il s'agit de la taille d'écran la plus élevée pour mobile. Et ensuite, si nous réduisons la taille jusqu'à la plus petite, vous pouvez voir que le texte est également en train de diminuer. Au fur et à mesure que nous réduisons la taille de l'écran. C'est un conseil que je peux vous donner en ce moment, suffit de passer simplement à VW par opposition aux pixels ou K. Alors peut-être, peut-être une petite chose que nous pourrions faire. Une dernière chose que nous pourrions faire à nouveau sera de réduire un peu plus la hauteur. Disons 450 pixels. Ce devrait être le dernier changement. Essayons de le rendre plus petit. Et voilà. Ok, je pense que c'est très bien. C'est très bien à ce stade. Très bien. Vous y allez. Faisons simplement défiler vers le bas, voir ce que nous pouvons faire d'autre. C'est à peu près tout. Je pense que tout va bien. Permettez-moi de rendre celle-ci vraiment petite. Evidence, une colonne. Et voilà, ok, une dernière chose, dernière chose que nous pourrions faire est peut-être de réduire un peu la taille du bouton ici. Allons de l'avant et modifions le bas ici, nous allons passer au style. En fait, je vais aller au style. Ensuite, pour la typographie ici, passons rapidement dans leur mélange de taille. Bien sûr, cela est réglé sur mobile, et ensuite nous allons simplement aller de l'avant et peut-être en faire un. Voyons voir. Défauts et pixels, peut-être 14 pixels, ou que pouvons-nous changer d'autre ? Nous pouvons également modifier le rayon de la frontière. Ramenons celui-ci à, disons cinq pixels. Et c'est là. Bon, maintenant, nous pourrions essayer de rendre la taille trop petite. En fait, je n'ai pas testé ça. Je ne suis pas sûr que cela affecterait la vue de la tablette. va affecter la vue de la tablette et même la vue du bureau sera toujours petite. C'est à vous de décider de faire, de réduire le bouton. Tous les trois sont de tailles d'écran. Ou vous pourriez simplement y aller avec un médium. Je pense que le moyen conviendra bien pour le mobile. Très bien. C'est ça. Je vais aller de l' avant maintenant aux mises à jour. Et c'est là. Nous avons construit avec succès dans une page d'accueil réactive. Merci d'avoir regardé et bien sûr, je vous verrai dans la prochaine classe. 26. Créer l'en-tête de page d'accueil avec Elementor Pro: Très bien, commençons donc à travailler avec des éléments approuvés en reconstruisant notre en-tête. Et je vais vous montrer comment les modèles fonctionnent avec les éléments sont pro. La première que je vais faire, c'est que je vais passer au backend et allons désactiver le générateur d' en-têtes et de pieds de page élémentaires. Nous n'avons plus besoin de cela. Je vais donc désactiver et jetons un coup d'œil à l'en-tête inexistant que nous n'avons plus et, bien sûr, pas de pied de page. Maintenant, vous pouvez toujours voir les mésaventures d'une pelle et ensuite les textes corporatifs ici, c'est le thème Hello affichant ces aliments sont pour nous. Très bien, revenons ici. Et une fois que vous aurez installé et activé Elementor Pro, vous verrez ici où vous avez un modèle sur l'élémental LM, vous verrez le générateur de thème. Allez-y, cliquez ici. Et à l'heure actuelle, vous pouvez voir les différents types de modèles que nous pouvons créer. On va construire l'en-tête. Je vais donc cliquer sur plus pour ajouter l'en-tête. L'avantage d'Elementor Pro est que vous aurez accès à une très grande variété de modèles que vous pouvez utiliser. Vous pouvez les voir ici. Différents styles pour l'en-tête. Vous pouvez en voir quelques-uns, vous savez, vous aurez le logo à gauche, les icônes des réseaux sociaux à droite, le menu principal ci-dessous. Vous pouvez donc insérer rapidement n' importe lequel de ces modèles qui correspondent parfaitement au type de design souhaité. Mais je vais aller de l'avant et simplement nous construire à partir de zéro parce que je veux vous montrer comment cela fonctionne avec l' élémental par élément. Je vais donc fermer ça. Nous allons simplement reconstruire comme avant. Je vais venir ici maintenant, créer nos deux colonnes. section. L'un, il y en aura environ 30 %, l'autre environ 70 %. Et maintenant, si je vais ici au backend élémentaire, et maintenant vous pouvez voir que nous avons le logo du site ici. Je vais donc le faire glisser et le déposer à l'intérieur. Une autre chose est que vous remarquerez peut-être un changement avec l'élément élémental pro logo. C'est le fait que vous avez réellement accès aux hauteurs. Logo sur le style avec élément logo fourni par le plug-in de création d'en-tête et de pied de page élémentaire. Vous ne disposez pas de ces options, vous pouvez donc contrôler la hauteur du logo à partir d'ici. Mais nous n'allons pas encore y toucher. Je vais revenir au back-end, choisir les éléments du menu de navigation ici, le déposer ici. Et bien sûr, le menu principal choisira. Alignons les bons points importants. On va mettre celui-ci sur mobile. N'oubliez pas, passons au style de notre typographie. Nous allons le faire en majuscules. Revenons à la session principale en tenant les deux colonnes. Faisons en sorte qu'il soit pleine largeur. Pour le logo, je vais juste ajouter un fond noir. Donc, au moins temporairement, nous pouvons voir le logo. Ok, beaucoup trop gros. Revenons ici. Pour la largeur maximale, nous allons simplement choisir 75 %, comme nous l'avons fait précédemment. Savoir, étouffé pour utiliser la hauteur dans ce cas, un changement de plus. Alignons les éléments de menu à la verticale, les alignons au milieu. Et voilà. Et bien sûr, la couleur aussi. J'ai oublié ça. Changeons la couleur. Ticks ClO2 primaire. Et c'est ça. Maintenant, jetez un coup d'œil à cela. Ici, vous avez publié. Lorsque vous cliquez sur Publier, c'est ici que les éléments sont regroupés et je dirai, hé, où souhaitez-vous afficher ce modèle particulier ? Nous allons ajouter la condition, pas l'antiacide, car ce sera pour la page d'accueil. Je vais venir ici maintenant et choisir singulier. Et puis, pour les singlets, on dira , d' accord, toutes les pages individuelles, non, voulaient se diviser spécifiquement sur la première page. Je vais donc choisir celui-là. Et c'est que je vais aller l'avant et je vais simplement économiser et fermer. Et c'est tout. Allons-y maintenant et rafraîchissons. Et je vais vous montrer quelque chose de très, très intéressant. Très bien, laissez-moi faire un rafraichissement dur. Voici donc une ligne plus fine. Vous pouvez voir que nous avons les éléments du menu ici. Oh, au fait, l' effet de survol qu'il peut voir, le tiret apparent sur l'élément de menu d'âge fourni par le pool élémentaire, le menu, l' élément de menu par défaut. Vous pouvez donc modifier cela sur l'effet de survol si vous voulez ennuyer le manager ici c'est que nous ne voyons plus le logo. Nous pouvons voir les éléments du menu, mais nous ne voyons pas le logo. Que se passe-t-il ici ? C'est ici que j' aimerais vous présenter le concept de l'indice Z. Revenons ici maintenant. Tout d'abord, nous déplaçons la couleur d'arrière-plan de l'en-tête. Nous n'en avons plus besoin. Mais jetez un coup d'œil à cela. Je vais passer à l'avancée. Ici, vous avez ça. Option mais très, très importante, très puissante appelée index z. Je vais donner à celle-ci la valeur de deux mises à jour. Revenons ici. Faisons un rafraîchissement très dur. Et juste comme ça. Vous pouvez maintenant voir apparaître le logo. Planche. Attendez une seconde. Que s'est-il passé exactement ? Voir cette valeur d'indice Z ici. Chaque fois que vous avez un élément, une section chevauchant une autre section, vous pouvez indiquer à Elemental quels éléments vous souhaitez afficher en premier , ce qui ne le fera pas. Vous voulez vous présenter devant l'autre ? Dans ce cas, nous avons actuellement l'image binaire qui chevauche notre en-tête. Nous voulons que l'en-tête soit influencé afin de pouvoir voir le logo et le menu principal. En tant que tel, vous devrez attribuer un index z plus élevé à l'élément que vous souhaitez apparaître en face. Depuis que nous avons donné à l'en-tête la valeur d'index Z de deux. Permettez-moi d'aller à la section contenant notre banane. Laissez-moi donc éditer avec élémental. Passons à la section Navigateur ici, avancée. Vous pouvez voir ici que nous n'avons aucune valeur pour l'index Z pour la section contenant la bannière. Mais si je suis venu ici maintenant et que je lui donne une valeur de trois. Maintenant, vous pouvez voir que nous ne voyons plus le logo, nous ne voyons plus le menu principal. En effet, la valeur de l'indice xin de cette section contenant la banane est maintenant supérieure à deux. Mais si j'en donne un maintenant, vous pouvez voir que nous avons le menu principal et le logo. C'est exactement comme ça que fonctionne l'index Z. Maintenant, une question que vous pourriez avoir, une très bonne question est, Alex, attendez une seconde. Avant de donner la valeur de cet indice de deux à l'en-tête. Comment résoudre le menu principal ? Mais nous n'avons pas vu le logo. Je serai honnête à 100% avec vous. Je ne sais pas exactement pourquoi c'est arrivé. Je suppose qu' il y a peut-être du code dans les éléments qui donne toujours la priorité au menu principal pour toujours afficher. Encore une fois, c'est peut-être quelque chose de très, très simple qui me manque tout simplement. Je ne suis pas tout à fait sûr du bord. Excusez-moi pour cela, mais j' aimerais être honnête avec vous. Mais prenez-le simplement pour ce que c'est. Chaque fois que vous voulez introduire un type de situation où un élément se chevauche l' autre et que vous voulez que éléments automatiques derrière le spectacle devant lui donnent simplement une valeur d'index Z plus élevée. Une chose que vous avez peut-être remarquée est l'espace blanc soudain qui n'apparaît pas tout en haut. Et cela se produit parce qu' élémentaire, par défaut, dans de nombreux cas, nous ajouterons un motif de dix pixels autour des éléments. Donc, une façon de contourner ce genre de problème, c'est simplement modifier la section qui a l'espace blanc dans ce cas en ce moment, c'est mon en-tête. Laissez-moi donc modifier l'en-tête élémentaire. Je vais aller dans cette section elle-même. Alors modifiez la section, puis invitez ici où vous avez l'écart des colonnes. Je vais dire pas d'écart, pas d'écart. Mettons-nous à jour essentiellement en disant pas d'écart. Nous disons, Hé, nous ne voulons aucun modèle nulle part. Maintenant, cela va être lu hors des espaces blancs. Mais maintenant, notez que parce que nous avons dit Non, aucune lacune. Désormais, la colonne contenant un logo n'a plus de motif entre le logo et le haut de notre écran. Il suffit donc d'aller dans la colonne contenant le logo. Allez au motif avancé ici, nous donnons juste dix pixels de rembourrage en haut. Mises à jour qui résoudront le problème ou les incidences. Voici donc quelques-uns des très petits problèmes ennuyeux que vous pourriez rencontrer lorsque vous utilisez élémental et comment les contourner. Mais c'est presque fini. Nous allons plutôt créer l'en-tête mobile de notre en-tête pour la première page. Et c'est exactement la même chose que nous avons fait auparavant. Nous allons venir ici maintenant, dupliquer la section entière. Et sortons, revenons ici à la section d'édition de l'en-tête mobile. Nous allons passer au style classique de couleur noire. Et alors, de quoi avons-nous besoin ? Que devons-nous faire d'autre ? Nous devons passer au mode réactif. Allez sur mobile. Et maintenant, ici, éditez la colonne, nous allons dire 50 %. Faites la même chose pour la colonne qui contient le menu principal. Et puis dites 50 %. Nous pouvons modifier le menu ici, aligné à droite. Peut-être le rendre un peu plus gros. Passons donc au style. Venez ici sur le bouton à bascule. La taille, la rend un peu plus grande. Pour le logo également. Aller au style, largeur maximale, 100 %. Oui, nous devons aussi faire le show hide ou les options, si avancées. Allons au réactif. Pour cette section et cette section contiennent le logo et le menu de demande. Nous allons passer ici à Advanced, puis réactifs. Je vais dire cacher sur le pont, Arrêter, Cacher sur tablette, puis montrer sur mobile. Passons maintenant à l' ancien en-tête d'origine, modifions cette section. Allez dans Avancé, accédez à Responsive. Il suffit de se cacher sur mobile, et c'est tout. Allons de l'avant et mettons à jour. J'espère que je n'ai rien oublié qui est revenu ici. Rafraîchissez la page. Voyons ce que nous avons. Ok, si original ou j'ose. Et c'est une vue oblique qui a l'air bien. Et maintenant, ce sera la vue mobile. Et David est donc exactement comment faire exactement la même chose sur le produit Elementor que nous avons fait avec l'en-tête et le pied de page Elementor sont plugin. Une dernière chose avant de fermer cette vidéo, passons au back-end. Maintenant, sur les modèles. Je suis désolé, sous le générateur de thèmes plutôt que dans nos modèles sur un générateur de thèmes, c'est là que vous verrez le nouvel en-tête que vous avez créé. Vous pouvez cliquer à l'intérieur pour modifier. Encore une fois. Ensuite, si vous voulez changer de nom, c'est très, très simple. Vous descendez ici sur le bouton Paramètres puis ici, nous pouvons appeler celui-ci l'en-tête de la maison. On peut appeler ça à la maison, à la maison, à la maison. Ensuite, nous pouvons donner à l' en-tête de commande le nom global. Si vous souhaitez modifier les conditions de ce plan, la tête ou peut-être souhaitez-vous utiliser le même en-tête sur une autre page. Ici, vous avez les options de sauvegarde, vous cliquez ici. Vous aurez maintenant accès à l'écran. Notre option de conditions. C'est là que vous pouvez maintenant entrer, maintenant peut-être passer à une autre page et ainsi de suite. Et c'est essentiellement pour créer l'en-tête de la page d'accueil, fois sur le bureau et les versions mobiles à l'aide d'Elementor Pro. Merci d'avoir regardé. Je vous verrai dans le prochain cours. 27. Créer la page de contact avec Elementor Pro: Illumina vous montre comment reconstruire la page de contact à l'aide d'Elementor Pro. Et plus précisément, nous allons travailler avec l'élément élémentaire pro form. Je vais aller au backend. Et tout d'abord, je vais désactiver le plug-in WP Forms dont nous n'avons plus besoin. Je vais donc désactiver. Revenons à la page de contact. Et évidemment, quand ils vont dire n'importe quel formulaire de contact. Mais je vais passer à Edit avec Elementor maintenant. Puisque nous utilisons bien sûr les éléments sont pro, nous avons l'élément de formulaire, ce qui est absolument fantastique. Vous le trouverez sur le pro, vous voyez ici le formulaire. Je vais me laisser cliquer ici et supprimer ce bloc parce que nous n'avions plus les formes lipidiques. Mais ne prenez aucune forme, puis déposez-la simplement sur le titre Contactez-nous. Tout comme avec le plugin WP Forms par défaut, vous aurez un formulaire de contact très, très simple qui comportera trois champs de nom, e-mail, message, ici. Ce sont les champs que vous pouvez ajouter. Un autre champ comme vous cliquez sur Ajouter un article juste là où vous avez le type, vous aurez différents types de carburants. Vous pouvez ajouter l'heure du jour. Il peut même ajouter des téléchargements de fichiers. Par conséquent, si vous souhaitez que vos abonnés ou clients potentiels joignent des fichiers à vous envoyer, vous disposez de ce champ. Vous pouvez également intégrer Elemental à Google Capture. Ensuite, vous pouvez utiliser la version de recapture 1 et la version trois ici pour plus de sécurité. Et puis vous avez aussi comme le pot de miel et ainsi de suite, sans ajouter de champs supplémentaires. Donc, je vais juste laisser ces trois. Cependant, c'est bien sûr très subjectif, mais je préfère ne pas avoir les étiquettes. Je préfère juste arriver aux détenteurs de places au lieu de chaque champ indiquant de quel type de champ il s'agit. Je vais donc cacher l'étiquette. Donc, il suffit d'avoir un message électronique de nom. Maintenant, pour modifier eux-mêmes les combustibles réels, vous cliquez à l'intérieur de chaque nom d'échantillon spécifique. Je vais cliquer sur Nom et inviter ici je peux changer l'étiquette elle-même, changer l'espace réservé. Et bien sûr, nous allons le rendre nécessaire. Et puis, sous avancé, vous aurez des choses comme l'ID ainsi que le code court que nous utiliserons très, très bientôt. Il en va de même pour les e-mails ici. C'est obligatoire, puis, bien sûr tous envoient le message si nécessaire. Vous pouvez faire en sorte que ce champ soit plus petit ou plus grand selon vos goûts, et c'est tout. D'accord ? Ici, vous avez la taille d'entrée l'impute réelle pour chaque champ. Vous pouvez le rendre petit, moyen, grand. C'est entièrement à vous de choisir. Vous avez des boutons. Voulez-vous faire des boutons de taille moyenne, grande taille, mais ce n'est que le bouton d'envoi lui-même. Vous pouvez modifier le texte ici même pour le bouton Soumettre lui-même, etc. Maintenant, c'est là que les choses deviennent très, très épicées. Actions après l' envoi, que se passe-t-il une fois que l'utilisateur a cliqué sur Envoyer ? Juste ici ? Par défaut, les actions ont déjà été activées. Collectez les soumissions, que je vous montrerai dans une seconde. Ensuite, par e-mail, comme ces deux éléments sont actifs par défaut, vous avez cliqué ici sur les soumissions , puis vous avez reçu un e-mail. Collecte maintenant les soumissions que vous verriez réellement dans le backend. Permettez-moi de vous montrer rapidement. Vous verrez dans le backend, une fois que les gens commenceront à soumettre le formulaire de contact ici où vous avez des soumissions élémentaires à UCI ici, vous pourriez avoir des soumissions. Et c'est là que vous commencez à voir le nom de la personne et ainsi de suite, en fait, effectuera une expérience très, très, très bientôt. Mais c'est tout pour les soumissions. Maintenant, envoyez un e-mail ici. Vous souhaitez recevoir un e-mail indiquant que quelqu'un a soumis un formulaire de contact sur votre site Web. Ici, vous pouvez choisir l'adresse e-mail pour recevoir une pièce d'identité. Bien sûr, je vais mettre mon propre e-mail d'administrateur là. Et bien sûr, par défaut, vous devez envoyer un nouveau message à partir du nom de votre site Web. Vous pouvez bien sûr personnaliser cela. Le message contiendra alors tous les champs. Cependant, vous avez ici l'e-mail de formulaire, le nom que vous souhaitez utiliser ou choisissez les données fournies par l'utilisateur. Fondamentalement, le courrier électronique doit être l'e-mail, tout l'utilisateur. Ce que vous voulez faire ici, c'est ça, d'accord ? Vous allez dans les champs du formulaire, accédez à l'e-mail, accédez à Avancé, puis invitez ici, saisissez le code court. Alors copiez le code court, revenez ici pour envoyer un e-mail. Et n'importe qui ici, par e-mail. Il ne s'agissait pas simplement de coller l'ID de messagerie afin que vous puissiez réellement voir l'e-mail de la personne , puis le nom, faire exactement la même chose, aller dans le champ Nom Avancé, puis simplement saisissez le raccourci correspondant au champ de nom. Retournez à l'e-mail, puis indiquez ici à partir du nom. Il suffit de coller ça. Ils répondent ensuite à l'e-mail, bien sûr, parce que vous souhaitez répondre à l'adresse e-mail de la personne. Et c'est tout. Vous pouvez ajouter votre CC, vous êtes aveugle, vous êtes aveugle, copie, etc. Vous pouvez également ajouter les métadonnées ici, telles que la page visitée, la date, l'heure, etc. Sin en HTML ou en plan. C'est très, très, très subjectif. Cela dépendra de votre fournisseur de services de messagerie. Si vous avez aussi des étapes phrase lambda squiggly, montrez-vous ce que c'est. Si vous revenez à vos champs de formulaire, peut-être voulez-vous créer comme si vous alliez créer un formulaire très, très long pour une raison quelconque et vous voulez le décomposer. Lorsque vous ajoutez votre article sur le type, vous aurez une étape. Une fois que vous avez le pas maintenant, vous avez le prochain. Ainsi, après l'étape, vous pouvez recommencer à ajouter d'autres champs. Ce qui se passe donc, c'est une fois qu'ils ont rempli les faux carburants dans la première section et qu'ils cliquent sur Suivant. Il les amènera à la section suivante du formulaire, c'est essentiellement ce que les étapes, comme vous pouvez le voir, c'est la première étape ici. Ensuite, vous pouvez voir la deuxième étape sur la droite. C'est à cela que cela sert. Vos étapes sont Settings. Et puis vous avez également les options supplémentaires comme Hey, voulez-vous personnaliser les messages comme, ok, le thermo sense avec succès, vous reviendrez vers vous dans 24 heures, des choses comme ça. Vous avez cette option ici. Mais ils me laisseront oublier de revenir aux actions après la soumission, vous en avez beaucoup, En dehors des soumissions cliquées, des e-mails, vous pouvez avoir un e-mail, vous pouvez les rediriger vers un page séparée. Vous avez un webhook. Et bien sûr, si vous utilisez un logiciel de gestion des e-mails comme notre campagne active Mailchimp, vous pouvez également les connecter ici. Vous pouvez les connecter à Slack Discord, ouvrir également un message contextuel. Vous avez donc de nombreuses options à configurer. Virage alternatif. Que se passe-t-il une fois que l'utilisateur a soumis le formulaire ? C'est essentiellement ça. Allons de l'avant et fermons celui-là. Et c'est que je vais aller de l'avant maintenant et simplement mettre à jour. Et bien sûr, jetons un coup d'œil à la nouvelle page ici. Oups, mon Internet se comporte mal. Encore une fois. Mes excuses. D'accord. C'est maintenant que vous pouvez voir le nouveau formulaire de contact construit avec des éléments de citron Pro Arte. Je vais vous montrer un exemple des soumissions. Je vais mettre en pause la vidéo et simplement envoyer un message, puis vous verrez les résultats ici. Bienvenue de retour. Et comme vous pouvez le constater en ce moment, j'ai envoyé des formulaires de contact, remplis pour contacter d' un à sept navigateurs. Un de John James, puis un de Bob Billy sur yahoo.com. Maintenant, j'aurais dû le signaler précédemment. Pour le formulaire de contact, vous pouvez modifier le nom ici où vous avez le nom du formulaire. Vous pouvez voir que je vais devoir changer le mien en formulaire de contact. Et je l'ai remarqué lorsque j'ai envoyé le premier formulaire des gymnases John. Vous pouvez voir le formulaire redressé, le nouveau formulaire de Nemo. C'est pourquoi un nouveau formulaire parce que nous n'avons pas changé le nom. Donc, la deuxième fois que j'ai changé le nom en formulaire de contact, j'ai envoyé un nouveau formulaire de mobilité et c'est là que l'automne indique maintenant notre formulaire de contact. C'est donc essentiellement ça. Vous avez les identifiants, vous avez la page dans laquelle le formel a été envoyé. Et bien sûr, vous pouvez voir le message lui-même. Vous cliquez donc sur Voir ici. Vous pouvez voir le nom complet, l'e-mail, puis le message réel de l'utilisateur et de l'invité. Vous disposez des informations de métadonnées supplémentaires lorsque le message a été envoyé, quel navigateur a été utilisé, etc. C'est essentiellement comme ça que le formulaire de contact avec Elementor Pro se promène. Merci d'avoir regardé. Je vous verrai dans le prochain cours. 28. Créer le modèle unique Post: Maintenant, permettez-moi de vous montrer l'une des choses les plus cool que vous puissiez faire avec des éléments de pro et qui consiste à créer un modèle pour vos publications uniques. Avant de le faire, permettez-moi de vous montrer très rapidement comment reconstruire la page du blog. N'oubliez pas que nous avons utilisé l'élément posts des modules complémentaires essentiels de cette page. Bien sûr, les deux éléments sont pro, vous avez les éléments spécifiques pour afficher vos publications. Je vais juste vous montrer très rapidement comment cela fonctionne. Vous le trouverez sous Pro, c'est juste ici, messages. Vous le déposez là-dedans. Et bien sûr, vous pouvez choisir le numéro de peau des messages, afficher l'image, la hauteur, l'image. Vous avez toutes ces options là-dedans. Vous avez la requête que vous souhaitez extraire des publications qui sont dues dessus, regroupement à partir d'une sélection manuelle ou de pages. Souhaitez-vous inclure par terme ? De cette façon, vous pouvez désormais ajouter des éléments tels que des catégories, des balises, etc. Vous avez vos options de pagination. Vous pourriez simplement essayer des options et toutes ces choses sympas, mais ce n'est pas pour ça que nous sommes là. Permettez-moi de vous montrer comment construire le gabarit des poteaux de premier angle. Laissez-moi en choisir un publié ici même à Istanbul. C'est ce que nous avons par défaut. Et vous pouvez voir que ça n'a pas l'air beau du tout. C'est parce que le thème Hello est celui qui a été utilisé pour afficher ce post. Et c'est très, très, très moche maintenant, j'ai très spécifiquement fait de la zone de contenu de cet article très, très longtemps que vous pouvez le voir. Mais il y a une raison à cela. Je vais vous montrer exactement pourquoi j'ai choisi de le faire. Laissez-moi d'abord construire le modèle pour nos publications. Passons donc à Elemental, je suis désolé, modèles. Et puis juste ici, créateur de thèmes. Et nous allons ajouter le constructeur pour un seul post ici, en cliquant ici. Aucun modèle trouvé ne souhaite en créer un. Oui, donc je vais cliquer sur ajouter de nouveaux comme s'ils sont bien sûr avec des éléments médiocres. Vous aurez accès à une grande variété de modèles. Vous pouvez les voir ici. Les quatre messages individuels, tellement nombreux, mais je vais aller de l'avant et fermer ça. Construisons notre modèle. Désormais, par défaut, puisque nous le modèle pour un seul article, vous aurez accès à ces éléments dans la catégorie unique. s'agit de vos publications, donc évidemment n' afficheront pas le titre de la publication, donc je vais le déposer là-dedans pour le titre de la publication. Désormais, par défaut, elemental va extraire les derniers articles à utiliser comme exemple lors de la visualisation du contenu du modèle. Si vous laissez modifier la sélection, rendez-vous ici dans les paramètres. Ici, vous aurez la phrase précédente, vous cliquez ici. Et puis, ici, je peux simplement taper la mode. Et au lieu de cela, parce que c'est celui que je veux utiliser tous choisir la mode à Instanbul. Cliquez sur Appliquer et prévisualiser. Maintenant, elemental va utiliser le contenu de cet article pour notre échantillon. Bon, laissez-moi apporter quelques changements. Les inhalateurs les rendent alignés et H2 au centre. Agrandissons le texte un peu plus grand. Peut-être 58 pixels, 56 pixels aussi bien. Ajoutons un peu de rembourrage. En haut, 25 pixels, deux pixels en bas également. Très bien, Quelle est la prochaine image en vedette ? Faisons glisser ça là-dedans. Fais ça F2. Et bien sûr, vous pouvez voir l'image en vedette de l' après-session et d'Istanbul. Quelle est la prochaine étape ? Vous avez les informations de publication. Vous pouvez déposer ça là-dedans. Par défaut, il affiche l'auteur les commentaires de date et d' heure. Je ne veux pas afficher l'auteur. Je ne veux pas afficher le nom ni l'heure, alors on les déplace. Il laisse la date et les commentaires. Vous pouvez modifier ces deux-là, bien sûr, simplement cliquer sur les données comme exemple et dire par exemple l'icône, je peux simplement aller de l'avant et supprimer l'icône, en remplir une. Vous pouvez ajouter des métadonnées supplémentaires, sorte que vous cliquez sur Ajouter un élément. Et puis, ici, vous pouvez faire des choses comme ajouter des termes comme la catégorie, etc., costume et ainsi de suite. Très bien, je vais aller de l'avant et fermer ça. Nous n'avons donc que la date et les commentaires. Revenons à nos éléments ici. La prochaine fois que nous ajouterons sera la publication de notre contenu. Nous allons donc nous lancer dans le contenu de la publication, juste en dessous des informations. Permettez-moi de confirmer pourquoi cela semble grisé. Je vais juste bien. Il s'affiche ici, nous avons le contenu de la publication très, très, très long ou large. Quelle est la prochaine étape ? Qu'est-ce que nous aimons afficher ? Nous pouvons afficher la navigation postérieure. Nous avons des messages de navigation. Allons déposer ça là-dedans. Nous avons maintenant le post précédent, le prochain post, bien sûr, vous pouvez les coiffer autant que vous le souhaitez. Et enfin, nous pouvons ajouter nos commentaires de publication. Postez donc des commentaires tout en bas. Et c'est tout. Ce sera notre modèle. Maintenant, pourquoi ai-je rendu la zone de contenu très, très longue ? Je veux vous montrer comment utiliser un nouvel élément très cool appelé le tracker de progression. Vous l'avez peut-être déjà vu sur un certain blog, où vous aurez un bar vous indiquant la quantité de contenu consommée ou la quantité de contenu que vous devez lire avant de terminer le article. C'est le suivi des progrès ici. Ce que je vais faire, c'est ça, d'accord, je vais le déposer en haut, juste au-dessus du titre. Permettez-moi de partager comment cela fonctionne maintenant, vous pouvez voir l'idée de la barre de progression bouger, nous bougeons. Mais le problème, c' est qu'une fois que nous avons passé le bar à l'école, nous ne le voyons plus. Quel est l'intérêt de l'avoir si vous faites défiler vers le bas et que vous ne voyez même pas la quantité de contenu restante. Laissez-moi vous montrer un truc très, très cool. Accédez à Avancé. passant, nous modifions le tracker de progression pour obtenir des effets de mouvement avancés. Ici, nous avons du collant. Dis oui, on va le coller au sommet. Ce que cela signifie en ce moment, c'est qu'une fois que nous avons fait défiler, vous verrez que l'arc sera toujours là. Et vous pouvez voir maintenant jusqu'à ce que nous arrivions au fond, c'est à ce moment que la barre se termine. C'est donc exactement comme ça qu'il s'agit d'un effet très, très, très cool. Vous pouvez également le faire pour le bas. Ce qui, je ne pense pas fonctionnerait parce que vous devrez faire défiler vers le bas au bas de l'air. Non, en fait, ça ne fonctionne pas. Je ne l'avais jamais essayé. Alors, il suffit d' aller avec le haut. Va avec le top. Et bien sûr, sur le style, vous pouvez modifier la loi d'appel de progrès. Vous pouvez ajouter une bordure, vous pouvez avoir un rayon de bordure masqué, etc. Pour le vérificateur de progression proprement dit, la progression sera toujours relative au contenu POSTAR. Changez donc cela pour publier du contenu et non pas un contenu de publication anti-page. Vous devez vérifier nos types, dits ou horizontaux. C'est le style circulaire, qui peut voir que je n'aime pas personnellement ça, donc je vais aller à l'horizontale. Vous pouvez ajouter un pourcentage si vous le souhaitez. On dira donc vingt-cinq pour cent, trente trois pour cent, etc. Vous avez toutes ces options pour vous. C'est ça. Je vais aller de l'avant et maintenant sur Publish. Et tout comme avec un modèle, vous devrez choisir l' endroit où vous dirigez pour afficher ces modèles particuliers. Ajoutons la condition maintenant par défaut, elle dira tout au singulier. Attention, toutes les heures font référence à toutes les pages uniques incluses dans votre première page. Ce n'est donc pas tout singulier. Cliquez sur la flèche de la liste déroulante ici. Vous allez maintenant voir des messages. Il suffit de choisir des messages. C'est ça. C'est ça. C'est tout ce dont vous avez besoin. Je vais continuer et maintenant cliquer sur Enregistrer et fermer. Et c'est tout. Allons donc d'abord à la une, juste pour confirmer la première page dans les articles. Et disons que la majestueuse ville de Glasgow devra rafraîchir cette page. Et c'est là. OK. Faites défiler vers le bas Faites défiler vers le bas Maintenant, la barre de défilement se déplace très, très rapidement car la zone de contenu ici est très, très, très courte. Comme vous pouvez le constater, il ne s'agit que d'un paragraphe ou de deux paragraphes. Ce n'est peut-être pas le meilleur exemple. Passons à la mode à Istanbul. Encore une fois, je vais devoir actualiser cette page pour effacer la mode cache à Istanbul. Et ils vont, c'est le modèle de nos publications uniques. Nous avons l'outil TI, nous avons l'image en vedette, nous avons les informations sur la pose que les données ont été publiées, nombre de commentaires, la zone de contenu, la navigation de publication pour l'article précédent et le prochain article. Et bien sûr, la section commentaires. Voici donc comment créer un modèle de publication pour vos publications à l'aide d'Elementor Pro. 29. Conseils Pro: Très bien, donc nous sommes pratiquement à la fin du cours. Et avant de conclure, lambdas vous donne quelques conseils et conseils plus généraux sur la façon de travailler avec la version payante d'élémental. Maintenant, vous avez évidemment accès à beaucoup plus d'éléments professionnels que nous ne sommes pas en mesure de couvrir. Mais il y en a un que j'aurais vraiment dû ajouter dans les modèles de publication uniques, et c'est les boutons de partage. Vous le trouverez juste en dessous de la table des matières par un compte à rebours supplémentaire et des codes de blocage, les boutons de partage. Cela permet à vos utilisateurs ou à vos abonnés de partager essentiellement vos articles sur les réseaux sociaux. Ainsi, lorsque vous déposez cela là-dedans, vous pouvez choisir les plates-formes. Peut-être souhaitez-vous qu'ils puissent les partager sur Facebook, Twitter ou même par e-mail. Vous aurez cette option là-dedans. C'est très, très facile à utiliser, n' oubliez pas de le vérifier. Maintenant, avec Elementor Pro, vous avez également accès à des éléments tels que l'enregistrement de modèles et l'enregistrement de widgets ou d' éléments au format Global. Voici un exemple ici. D'accord ? Par exemple, pour toute cette section, permettez-moi d'utiliser le bouton Navigator ici. Pour cette section contenant la banane ainsi que le titre. Si je voulais réutiliser cette section ailleurs, je pourrais cliquer avec le bouton droit de la souris, puis simplement enregistrer en tant que modèle. Je l'enregistre en tant que modèle. Je peux lui donner un nom, disons la bana globale, juste pour réutiliser sur une autre page, je peux enregistrer la page. Et ce sera sous des modèles en plus des en-têtes et pieds de page que nous avons créés auparavant. Mais maintenant, jetez un coup d'œil à cela. Ok, si je voulais réutiliser ce modèle ailleurs, permettez-moi de consulter cette page et d' ouvrir une autre page. Par exemple, par exemple, la page de contact. Si je voulais réutiliser cela en n'étant pas ici, allez simplement dans Modifier avec Elementor. Ensuite, utilisez l'élément de modèle, que vous trouverez dans pro en bas, je crois que si je ne me trompe pas, c'est ici. Vous verrez le gabarit ici. Il suffit de faire glisser ce modèle de travail là-dedans. Et maintenant, il vous demandera de choisir le modèle que vous souhaitez utiliser, puisque nous avons appelé notre bannière globale. Maintenant, vous pouvez voir globalement. Je l'ai ajouté et c'est parti. Maintenant, vous avez l'idée d'en-tête ou que l'idée banale avec le promontoire où voyager signifie aventure. C'est ainsi que vous pouvez réutiliser sections à plusieurs reprises sur votre site Web. Mais nous pourrions également enregistrer des éléments uniques ou même des colonnes en tant que widgets globaux. titre d'exemple, supposons que je voulais réutiliser, disons ceci en particulier, notre appel à l'action ou l'idée par ces offres et forfaits. Je vais cliquer à l'intérieur. Et je pourrais cliquer avec le bouton droit sur l'élément dose et emballages lui-même, puis diviser ici, vous verrez enregistrer comme un global. Cliquez sur Enregistrer en tant que global. Et je peux appeler celui-ci le widget Appel à l'action. À titre d'exemple, je peux le sauvegarder. Une autre chose est que si on vous demande de revenir sur une autre page, disons encore une fois la page de contact. Et je voulais utiliser exactement les mêmes éléments. seule chose à faire est d' aller au monde entier ici. Et maintenant, vous pouvez voir que les appels pour la lire sont maintenant disponibles. Je peux simplement cliquer sur le glisser-glisser puis le déposer quand même, je veux le déposer dans, donc juste de petites petites sections de différence. Vous pouvez les dire comme des modèles et nous les utilisons, mais les éléments eux-mêmes, vous pouvez les utiliser. Vous pouvez les voir comme des widgets globaux. Et nous les utilisons sur votre site Web autant que vous le souhaitez. Ce sont donc d'autres fonctionnalités supplémentaires disponibles pour vous avec des éléments de Probit, encore une fois, vous avez accès à tant d'autres éléments très intéressants, diapositives, galeries et même aux éléments de connexion. Vous souhaitez donc personnaliser votre page de connexion avec Elementor Pro. Vous disposez de l'élément correspondant à cette liste d'applications de titre animé. 30. La conclusion de cours Elementor: Eh bien, c'est tout. Nous sommes arrivés à la fin de ce didacticiel pour vous montrer comment créer un site Web entièrement fonctionnel en utilisant la fois les versions gratuites et payantes d' Elementor. Ça a été un plaisir. J'espère que vous avez apprécié le cours si vous fait, s'il vous plaît construisez, compte tenu d'une critique cinq étoiles, d'une critique écrite, faites il vous plaît construisez, compte tenu d'une critique cinq étoiles, savoir aux gens quel point vous avez apprécié le cours et tout. Donc, juste au cas où vous n'auriez pas acheté d'élément de sonde, ce qui est suffisant pour le faire. Veuillez utiliser mon lien d'affiliation. Cela signifie que j' obtiendrai une petite commission. Lorsque vous utilisez mon lien vers par Elementor, c'est un excellent moyen de me soutenir et de soutenir ce que je fais. Ici. Enfin, dans la section suivante, nous présenterons des mises à jour du cours, des sujets spéciaux, des leçons spéciales. Donc, si vous souhaitez en savoir plus sur les éléments ou n' oubliez pas de les consulter. La section suivante est en bas. Je m'appelle Alex, c' est un plaisir. J'espère également vous voir dans l'un de mes autres cours. Je pense autant que les questions ou les commentaires sur tout ce qui est couvert dans ce cours, bien sûr, ont toujours l'impression de me contacter. Attendez-moi la main. C'est plus qu'heureux de répondre à toutes vos questions, chaises et tout ce qu'il y a de mieux. voit bientôt.