Cours Elementor pour débutants : concevoir une page d'atterrissage d'un entraîneur de fitness sensible

1. Introduction: Dans cette classe, je vais vous montrer comment utiliser des outils de conception réactive mobile élémentaire pour créer des pages Web qui se nourrissent correctement sur toutes les tailles d'écran. Vous travaillerez ensuite sur un projet réel où vous appliquerez les compétences que vous avez acquises pour créer une page de destination moderne qui s'adapte correctement aux écrans de bureau, de tablette et de mobile. m'appelle Ken Besser et je suis entrepreneur en ligne, créateur web et passionné de technologie. Je dirige quelques entreprises en ligne et je les ai toutes construites avec Elementor sans aucun codage. Pour les rejoindre, bénéficiez de cette classe. Vous n'avez pas besoin de compétences préalables en Elementor. Tout ce dont vous avez besoin est un fort désir d'apprendre à faire des pages web mobiles réactives. Mais parce qu'Elementor est en train d'installer WordPress, mon hypothèse est que vous êtes familier avec WordPress et glisser-déposer les constructeurs. Donc, quand je créais cette classe, les gens que j'avais en tête comprennent le sentiment de concepteurs web, de concepteurs agences de design web. Donc, si vous travaillez dans une agence de design web, les entrepreneurs en ligne qui aimeraient prendre les choses en main et concevoir des pages web réactives pour leurs sites Web, même les amateurs. Donc, si vous voulez faire cela comme un passe-temps, ce sera toujours quelque chose de génial pour vous. Fondamentalement, si vous êtes intéressé à apprendre à concevoir pages Web modernes d'abord mobiles en 2021 et au-delà. Ce cours sera un grand exploit pour vous. Pourquoi ? Parce que vous serez en mesure d'appliquer ces compétences dans tout futur projet de site Web qui vient dans produire des pages Web exceptionnelles qui non seulement sont belles sur différentes tailles d'écran, mais aussi donner aux utilisateurs une expérience utilisateur délicieuse. Pendant que vous apprendrez à créer pages web réactives dans Elementor en créant votre propre page de destination, vous pouvez appliquer ces mêmes principes au-delà votre site Web personnel avec les compétences que vous aurez acquises si vous n'êtes pas encore un concepteur web. 2. Mise à jour rapide - Le nouvel magicien de configuration Update: Bienvenue de retour. Cette leçon est maintenant une note rapide ou une mise à jour rapide du processus d'installation d' Elementor. Si vous suivez ce cours en mai 2022 et au-delà, vous remarquerez que l'activation d' Elementor dispose désormais d'un assistant de configuration composé de plusieurs étapes que vous devez suivre pour configurer les parties de base de votre site Web. Pendant que je créais cette classe il y a plusieurs mois, Elementor n'avait pas cet assistant de configuration. Je veux juste que nous fassions passer par cet assistant de configuration. Mais tout ce que vous apprenez dans ce cours ne change pas. C'est toujours le même processus. Le seul ajout est l'assistant de configuration. Comme vous pouvez le constater en ce moment, j'ai une toute nouvelle installation de WordPress et nous sommes à la version 6. Et ce que je veux faire, c'est aller dans Plugins, Add New. Nous pouvons donc ajouter Elementor et passer par ce processus. Je vais chercher l'installation d'Elementor maintenant. Et maintenant, lorsque je clique sur Activer il sera redirigé vers cet assistant de configuration. Et nous pouvons le traverser ensemble. Nous y voilà. Je vais juste faire un zoom arrière un peu pour que nous puissions voir plus de détails. Très bien, vous remarquerez maintenant que la première chose que Elemental veut que nous fassions maintenant est de créer un compte pour tirer le meilleur parti d'Elementor. Voici donc quelques-uns des avantages de la création d'un compte auprès d'Elementor. Mais le fait est que vous n'avez pas besoin d'avoir un compte auprès Elementor pour utiliser Elementor. Donc, je vais juste aller de l'avant et sauter cette partie. La deuxième étape consiste à accepter, à continuer avec le thème sacré qu' Elementor a créé pour nous. Ceci est réalisé par Elementor, mais nous utilisons le thème Astra, donc nous allons simplement passer. Astra est un thème plus puissant. La troisième étape consiste à donner un nom à notre site Web. Pendant que vous installiez votre WordPress. Vous avez donné un nom au site Web. C'est le nom qui apparaîtra ici. Mais cela nous donne l' occasion de changer le nom par n'importe quel autre nom que nous voulons. Mon site Web, puis cliquez sur Suivant. Et si vous avez un logo pour votre site Web et que vous souhaitez l' ajouter immédiatement à l'avance. Vous pouvez simplement ouvrir la médiathèque et la choisir dans la médiathèque ou téléchargée depuis votre ordinateur. Mais nous n'allons pas le faire pour l'instant. Je vais donc simplement garder cette étape. Et bien sûr, nous pourrons ajouter le logo plus tard et je vous montrerai comment procéder. Cliquez sur Ignorer. Et maintenant, nous arrivons à la dernière étape où nous avons deux options. Nous pouvons commencer à éditer notre page d'accueil à partir d'une toile vierge avec l'éditeur Elementor. Nous pouvons également parcourir des centaines de modèles ou importer nos propres modèles si nous les avons. Mais je vais aller de l'avant et sauter. Ca. Seront redirigés vers le canevas où nous pouvons maintenant commencer à créer un site Web. Et nous y voilà. En gros, c'est tout ce que je voulais vous montrer. Il s'agit d'une nouvelle mise à jour. Il n'était pas là il y a quelques mois. Maintenant, il est là. Mais tout le reste des leçons à venir reste le même. Le processus reste le même pour créer une page de destination. Donc, sans perdre plus de temps, passons à la leçon suivante. Je vais accéder à ce menu Burger et cliquer sur Quitter to Dashboard. Sortons de cette page. Nous sommes maintenant dans le tableau de bord et nous sommes prêts à commencer à créer le site Web. 3. Installation des Plugins nécessaires: C' est donc l'en-tête de la page de destination pour la création. Tout ce que vous voyez à l'écran en ce moment fera partie de l'en-tête. Donc ces boutons ici que le sexe bloque dans cette barre de navigation juste ici. Et ça devrait être la première chose que nous allons créer maintenant. Donc, sautant sur le backend de WordPress, c'est une toute nouvelle installation de WordPress, donc je n'ai même pas de plug-in. Donc, nous allons d'abord installer les plugins. Nous devrons créer la barre de navigation. Alors, allons à l'intérieur des plugins et Ajouter nouveau. Et le tout premier plugin dont nous avons besoin est Elementor. C' est donc le premier élément, c'est la pierre. Maintenant, faisons défiler vers le bas Alors que sur la même page et cherchez des éléments, Keith élément ou add-ons, iso maintenant, et nous allons aussi Est. Donc, cherchez un effet d'en-tête pour elementor. Très bien, alors maintenant qu'ils sont installés, allons au moins dans les plug-ins d'installation et activez-les tous en même temps. Alors cliquez dessus, sélectionnez-les tous. Et dans cette liste déroulante, sélectionnez, Activer et appliquer. Maintenant qu'ils sont tous activés, nous sommes prêts à créer notre barre de navigation. Et la première chose que nous voulons faire est de créer les éléments de menu, ces cinq éléments de menu ici, et ce sont des pages Web. Alors créons des pages Web. 4. Concevoir le Navbar: Alors allons de l'avant et créons une page. Appelons ça à la maison. Et juste ici sur le côté droit, faites défiler vers le bas et recherchez Attributs de page, modèle. Définissez cette valeur sur Elementor pleine largeur. Et parce que j'utilise le thème Astra, je vais définir ceci sur la mise en page du contenu à pleine largeur, étirée. Ensuite, il publiait ceci, créait une autre page. Ajouter une nouvelle page de blog. Faites défiler vers le bas, les attributs payés sont définis sur Elementor pleine largeur. Pour moi, c'est que c'est cette publication. Retourne, crée-en un autre. Alors appelons ces cours. Faites défiler vers le bas Attributs de page, élémentaire, étirement de quatre semaines juste là, publier. Mais ne vous inquiétez pas pour cette section ici. Peut-être que le thème que vous utilisez n'a pas les paramètres car comme vous pouvez le voir en ce moment, nos paramètres Astra, j'utilise le thème Astra. Donc, tant que vous utilisez un élément ou un thème compatible, vous aurez ces attributs option et c'est ce qui est important. Il est rappelé ici, mais vous pouvez également accéder aux attributs de page dans le front end et je vais vous montrer comment. Donc, ce sont trois pages. Créons un contact de plus. Descendez. Attributs de données, modèle de page pour le blé. Bon, maintenant nous avons quatre pages. Donc, la prochaine chose que nous voulons faire est de créer la barre de navigation réelle qui sera affichée sur la page. Et comment pouvons-nous créer qui ira à l'intérieur des menus d'apparence. Et ici, vous verrez créer votre premier menu ci-dessous. Et nous pouvons aller de l'avant et créer un méga menu. Appelons simplement méga menu, et faisons le menu principal, Créer menu. Et parce qu'il vient de créer ces pages ici, elles sont disponibles pour nous de les ajouter au méga menu. Alors allons de l'avant et cochez ces cases et ajoutez-les au menu. Droite, donc ils ont été ajoutés, Glissons à la maison pour être le premier élément et les contacts seront le dernier élément du menu de gauche à droite. Allez-y et enregistrez le menu. Impressionnant. Maintenant, nous avons un menu. Wordpress sait que nous avons un menu et le menu est appelé Mega menu, et il contiendra ces quatre liens. Ce sont quatre liens vers ces pages. Alors, comment affichons-nous ces menus d'une manière fantaisie comme ça ? Nous le faisons avec Elementor, et voici comment le faire. Donc, sautant sur deux éléments clé, rappelez-vous que c'est l'un des plugins de balayage installé avec Elementor. Notez que lorsque vous passez la souris dessus, l' une des options ici est le pied de page d'en-tête. Donc, cliquez sur le pied de page d'en-tête, juste ici parce que nous n'avons pas encore créé. Nous pouvons aller de l'avant et en créer un, Ajouter Nouveau, lui donner un nom. Et cela peut signifier mu pour la cohérence. Bien sûr, c'est un en-tête 1, il est visible sur l'ensemble du site. Si vous voulez qu'il soit visible sur des pages particulières, vous pouvez toujours le faire, mais vous devez garder la version pro des éléments. Et l'activation veut qu'il soit actif. Cela signifie que lorsque nous publions la page, ce menu sera visible lumière BCE. Alors maintenant que nous avons le menu prêt, Allons de l'avant et créons visuellement pour ressembler à ceci. Cliquez donc sur Modifier. Accédez à la modification du contenu. Nous y voilà. Si nous pouvons juste sauter sur cette page ici, vous remarquerez que la Napa a deux colonnes. Cette colonne ici qui a le logo et celui-ci qui a le menu. Donc, ce que nous devons faire est d'ajouter une section à double colonne. Mais nous pouvons toujours le redimensionner en conséquence. Ce que nous voulons, c'est l'avoir longtemps de ce côté-ci et plus court que ce côté-ci, parce que comme vous pouvez le voir, c'est le cas. Donc, ici, faites glisser les éléments de l'image dedans pour que nous puissions ajouter le logo. Et j'avais téléchargé certaines des images que nous allons utiliser. Je vais les fournir dans les liens, alors assurez-vous de les vérifier. Alors sélectionnons ce logo. Insérer un média. La prochaine chose que nous voulons faire est d'ajouter une barre de navigation. Donc ici, tapez nav. Et vous remarquerez que nous avons deux menus de navigation identiques. L' un d'eux a une icône de cadenas et l'autre est comme ça. Celui-ci est livré avec Elementor Pro. Et parce qu'il n'a pas dans le Pro mental, on ne peut pas l'utiliser. Moins. Utilisez le QI, IQ un éléments Keats. Et pourquoi ne peut-on pas encore voir le menu ? C' est parce que nous avons sélectionné un menu, mais nous venons d'en créer un. Rappelez-vous, ça s'appelait Mega menu. Donc, nous l'avons maintenant visible dans la frontière, mais c'est sur le côté gauche. Nous devons le pousser du bon côté. Alors allons-y et faisons-le. Mettez à jour cela. Et ici, cliquez sur cette roue dentée et assurez-vous que la mise en page ici, il a dit à élémentou toile ou RI. Prévisualisons ça. J' aime ce que ça a l'air. Donc, la prochaine chose que nous voulons faire est de créer le reste de la section d'en-tête, et nous allons commencer par l'arrière-plan. 5. Concevoir la section du chef: Ajoutons un fond noir comme celui-ci. Donc, en sautant ici, Sortons de l'endroit où nous avons édité la barre de navigation Exit to Dashboard. Allons sur les pages du côté est. Donc, le point ici est que nous voulons créer la section d'en-tête. Ce que nous créions, c'était la barre de navigation. Nous n'avions pas commencé à créer la page elle-même. Alors maintenant, nous devons sélectionner le chemin qui deviendra la page de destination, celui que nous allons remplir avec tout ce contenu. Alors sélectionnons l'un d'entre eux. N' importe lequel d'entre eux peut être la page de destination. Allons avec la page d'accueil. Et comme nous l'avions déjà publié, vous pouvez cliquer sur Modifier avec Elementor. Donc, sélectionnons la section à double colonne. Et pour définir la couleur d'arrière-plan, cliquez sur Modifier la section. Aller au style sous la normale. Traitez cette boîte. Donnons cette couleur très sombre, bleuâtre, noirâtre. Mais vous pouvez lui donner la couleur que vous voulez. Tellement bruyant pour toi. J' aime ça. Cliquez n'importe où là-bas. La prochaine chose qu'on veut faire, c'est ajouter cette dame ici. Parce que le contenu de la colonne donne à la section sa hauteur. Donc, cliquez sur cela, faites glisser un élément d'image là-dedans. Et sélectionnons cette image. Et notre section commence déjà à ressembler à ça. Donc la prochaine chose qu'on veut faire, c'est cliquer dessus. Ajouter un titre. Pense ici, ça dit « santé ». Et donc, en sélectionnant tout cela, vous sélectionne tous. Et alors rendons ça plus grand. Allez dans le style, changez la couleur en blanc. Cliquez sur Topographie. Mettez-le en commun, redimensionnez-le à la taille souhaitée. Donnons-lui un 115. Ensuite, je veux dupliquer ça. souris ici et cliquez sur cette icône en double juste là, juste au cas où vous ne voyiez pas ces pop-up. Lorsque vous passez la souris sur les coins. Peut aller à l'intérieur du menu burger, préférences de l'utilisateur et assurez-vous que les poignées d'édition. Il a dit, oui. Alors passons ça à la forme physique. Tant qu'il est encore sélectionné. Allons à l'intérieur de la typographie. Rendre ça plus grand. Diminuer le poids. Diminuer un peu sa taille. D' accord, je vais copier les Turcs. Cliquez sur cette icône ici. Faites glisser un éditeur de texte juste là. Cliquez à l'intérieur de leur visage, tout le texte dedans. Style intérieur. Modifiez la couleur du texte en blanc et mettez à jour la page. Notez que nous allons prévisualiser la page. Et remarquez que commencer à prendre forme, mais le haut juste ici, ce blanc. Pourquoi est-il blanc ? On veut que ça ressemble à ça. Nous voulons que l'arrière-plan s'exécute jusqu'au sommet. Alors, comment pouvons-nous y parvenir ? Donc, si nous pouvions juste sauter à l'intérieur du tableau de bord, aller à l'intérieur des éléments, garder le pied de page d'en-tête. Et nous allons éditer le contenu informatique du menu Mega. Donc maintenant, nous éditons cet en-tête de barre de navigation. Donc, ce que nous voulons faire est de sélectionner la section Modifier. Accédez à Effets d'en-tête collants avancés. Dites activer. Faites défiler vers le bas. Définissez cette distance d'objectif à un. C' est combien de pixels voulez-vous que l'utilisateur fasse défiler avant que la barre de navigation ne devienne collante ? En-tête transparent défini pour posséder et mettre à jour cela. Donc, en revenant à notre page où nous modifiions la page de destination, si vous actualisez le contrôle R ou la commande R sur le Mac, vous remarquerez que maintenant la section va tout le chemin vers le haut. Alors poussons tout ici vers le bas pour que ce soit seulement le Napa et le logo qui sont en haut. Et nous le faisons en augmentant le rembourrage sur cette section, sur toute cette section. Donc, je ne suis pas en mesure de le sélectionner à cause de la barre de navigation. Je vais faire monter le navigateur en appuyant sur Contrôle I ou Commande I sur le Mac. Et je peux cliquer avec le bouton droit sur la section et modifier, aller à Avancé, démêler ces valeurs, puis augmenter le remplissage. Donnons-lui un rembourrage de 200. Oui. Donnons-lui un rembourrage inférieur ou 50 mettre à jour cela. Présentons un aperçu de la page. J' aime ce que je vois maintenant comment ce coup de pinceau. Ajoutons ce coup de pinceau. Donc, en allant ici, éditez le style de section. Nous avons déjà ajouté la couleur, nous le voulons pour l'arrière-plan. Alors maintenant, cliquez sur l'option image juste là et sélectionnez ce trait de pinceau. Souviens-toi que je t'ai déjà fourni l'image. Vous pouvez consulter les liens ci-dessous. Mettez à jour cela. Ensuite, nous allons en prévisualiser d'abord. Et vous remarquerez que cela semble se répéter et qu'il est égaré. Donc, en dessous de l'image, vous remarquerez que c'est la position, disons en haut à droite. Et disons qu'on ne répéte pas. Disons défiler pour la pièce jointe. Et pour la taille, disons personnalisé parce que nous avons besoin d'une taille personnalisée. Donnons-lui une taille de 60. Mise à jour là. Maintenant, nous allons en prévisualiser. D' accord, ça commence à prendre forme. Donc la prochaine chose que nous voulons faire est de travailler sur ces liens pour que lorsque vous passez le curseur sur eux, ils changent la couleur. 6. Finaliser la section des Header: Rappelez-vous que nous avons édité la barre de navigation aussi. Alors allez sur la page où vous modifiez votre dossier Napa. Tu ne sais pas où c'est. Il suffit d'aller aux éléments garder, laissez-moi rafraîchir ceci. Allez dans les éléments garder le pied de page d'en-tête, puis modifiez, puis modifiez le contenu. D' accord, donc ici, ce qu'on veut faire, c'est changer la couleur de la police en vert. Alors entrons ici. Sélectionnez cette barre de navigation. Aller à l'intérieur style réduit l'enveloppe de menu. Développez le style des éléments de menu sous la normale. Changez ça en vert. Pour l'instant. Je n'ai pas le vert précis, mais essayez juste de jouer avec. Voyez si ça marchera. Alors laissez-moi copier ce code parce que nous allons le réutiliser. Contrôle C. Laissez-moi juste mettre à jour ça. Alors. Revenons maintenant à la page où nous modifiions la page ici et actualisons la page. Bon, maintenant la police est verte. Donc la prochaine chose que nous voulons faire est de changer les effets de vol stationnaire sont blancs. Donc sauter là-bas à nouveau, donc sur le vol stationnaire, qui dit que pour blanc. Et quand il est actif, il doit aussi être blanc. Ou écrivez la mise à jour. Une fois que vous avez mis à jour, nous pouvons revenir à cette page où nous modifions l'en-tête et actualisons cette page. Donc maintenant, l'élément de menu actif devrait être blanc. Exactement. On y va. Alors prévisualisons ça. Impressionnant. Donc, la page de destination est presque prête. Ajoutons les boutons. Ces trois boutons ici. Cliquez là, tapez votre. Il fera apparaître ce double bouton par des éléments garder la lumière. Il ne vient pas par défaut avec Elementor. Alors faisons-le glisser là-dedans. Et la première chose qu'on veut faire est de changer le bouton de nom juste ici, les étiquettes des boutons. Et nous le faisons en réduisant d'abord le double bouton, en élargissant le bouton un, et en changeant cela pour nous rejoindre ou toute autre personne qui pourrait vouloir le changer. Et c'est là que vous ajoutez votre lien, où vous voulez que le bouton pointe vers. Et si vous voulez que le lien s'ouvre dans un nouvel onglet, vous pouvez toujours cliquer dessus et ouvrir un nouvel onglet. Ensuite, mettez à jour maintenant. Alors changeons le bouton en bouton. Donc devrait dire En savoir plus. Droit ? Donc vous remarquez qu'il s'est effondré et que le mot Plus est tombé parce que c'est trop long. Nous devons rendre les boutons un peu plus larges. Bouton donc réduit, donc un bouton extensible. Et augmentons la largeur juste là. Maintenant, c'est là le point. Mettons à jour ça. Et prévisualiser les modifications. Très bien, génial. Alors revenons en arrière. Donc, ensuite, nous voulons changer la couleur du bouton, donc cela devrait être vert. Allons à l'intérieur pendant qu'il est encore sélectionné, allons à l'intérieur. Style réduit bouton un. Je veux changer le bouton en premier. Sous la normale, vous remarquerez qu'il y a de la couleur ici, et il y a aussi un type d'arrière-plan. Si vous modifiez cette couleur, vous changez la couleur de la police, le texte En savoir plus. Et si nous changeons le type d'arrière-plan, c'est quand nous changeons la couleur d'arrière-plan de ce bouton. Et on voudra en faire l'écran. Donc pour l'instant, je n'ai pas ces codes de couleur, donc je vais essayer d'en approcher vraiment. Je pense que c'est presque comme ce vert mis à jour. L' autre, le bouton un est de couleur blanche. Alors passons au bouton 1. Enchaîne un type dorsale ici au blanc. Et maintenant, vous remarquerez que la police n'est pas visible car elle est aussi blanche. Donc, nous devons changer sa couleur. Juste en dessous de la normale est la couleur. Voyons voir, c'est que ces sombres. Lou, une colonne noirâtre comme ça. Notez que la police choisit également noir pour le contraste. Donc, nous allons changer cette couleur de police réduit bouton 1, bouton Développer à sous la couleur. Changons-le en noir. Le même noir que nous avions dans le bouton 1. Alors, nous allons développer le bouton 1. D' abord. Cliquez sur cette couleur, copiez-la. Bouton réduit 1, bouton Développer pour cliquer dessus et coller ce codage couleur là. D' accord. Alors. Cependant, cette police devrait devenir noire, et non en survol. Ce bouton devrait devenir vert et la police noire ou rouler. Donc, sur Hover, bouton 1 sur, tirer, tourner vers la couleur verte. Va chercher ces verts. Donc je vais réduire ça et aller sur Button pour obtenir l'écran. Attends juste là. Retournez au bouton 1. Accédez à l'état de survol du bouton 1 et changez la couleur et le type d'arrière-plan. C' est un vert. Donc, sur le survol change de couleur en vert et la fonction reste, change en blanc. Bon, donc ce bouton doit changer en blanc et la police en noir sur Holober. Donc, nous allons travailler sur le bouton vert pour sur le vol stationnaire doit changer en y. Et la police doit changer. Tellement noir à ce noir foncé. J' aurais pu entrer, le prendre de l'autre côté. D' accord. Prenons ça de ce côté-ci. Prenons cette copie manquante qui s'est effondrée, que, développez ça. Et nous voulons changer le bouton. Couleur sur le vol stationnaire ici. Sh ce noir. Très bien, alors nous allons en prévisualiser ça. Et c'est ce que nous avons jusqu'à présent. Donc la prochaine chose que nous voulons faire est d'ajouter ce petit bouton vidéo juste là. Et ce plus gros bouton est vraiment cool. Il est fourni par des éléments garder la lumière. Il vous permet d'ajouter une vidéo À propos de nous ou quelque chose pour informer rapidement les gens de qui vous êtes dans cette page de destination. Et c'est comme ça que ça se passe. Donc, vous cliquez sur le bouton et une fenêtre vidéo apparaît comme ça. Si vous avez une histoire à propos de nous, pourrait rapidement parler aux gens de vous. Alors allons de l'avant et ajoutons ce bouton. Et nous l'ajoutons en cliquant sur cette vidéo de frappe. Et nous avons les options de vidéo d'image ici. Portons ceux qui sont apportés par des éléments. Gardez la lumière, et déposez-le juste en dessous des boutons. Par défaut, il est de couleur rose. Donc, nous voulons d'abord l'aligner vers la gauche. Alors passons au style et à l'alignement à gauche. Cliquez ensuite sur le style du bouton. Nous pouvons donc commencer à éditer les couleurs. Comme vous le voyez, la couleur lueur est bleue. Nous voulons le tourner à l'écran. Donc j'avais déjà copié cette couleur verte, alors laissez-moi la coller là-dedans. Et maintenant, vous remarquerez qu'il est vert quand il brille. Et juste en dessous de la couleur de lueur, nous avons le type d'arrière-plan. Cliquez sur cela dans la chaîne. Laissez-moi faire défiler une fois, changer la couleur là pour le même vert. Alors je vais coller le vert là-dedans. Et maintenant, c'est vert. Donc, si vous pouviez en prévisualiser ça. Les changements, c'est super génial. Nous avons encore besoin de faire un peu d'ajustement pour le rendre meilleur comme ça. Comme vous le voyez, il y a une différence dans l'endroit où cette dame se trouve sur la page par rapport à notre référence. Alors poussons un peu vers le haut. En revenant à cette page ici, sélectionnez l'image de la dame. Accédez à Avancé et supprimez les marges et le remplissage. Examinons une marge en haut à quelque part là-bas. Et mis à jour. D' accord. Prévisualisons ça. Oui, on l'a poussée un peu vers le haut, mais on doit le faire plus. Nous devons augmenter cette marge. Ne vous inquiétez pas qu'elle touche la barre de navigation ici quand l'éditeur, quand nous mettons à jour et aller à la page d'aperçu, le réel si nous prévisualisons les changements, remarquez que maintenant elle est presque au bon endroit, mais nous avons besoin pour pousser un peu ces coups de pinceau vers l' extérieur afin qu'ils soient également pleinement visibles. Faisons ça. Réduisons la taille du coup de pinceau. Donc je ne peux pas sélectionner cette partie ici parce que je suis obstrué par la barre de navigation. Mais je peux frapper Contrôle I pour faire monter le navigateur. Et si je peux l'effondrer, cette section est toute cette section ici. Donc, si j'ai édité comme ça, une section d'édition qui tient le fond noir dans le coup de pinceau. Allons au style. Et juste ici sur le dimensionnement, réduisons encore à peut-être 55. Mise à jour là. Et nous allons prévisualiser les changements. Bon, donc on y est presque. La prochaine chose que nous voulons faire est de compléter ces coins, comme dans notre page Web de référence ici. Alors revenons ici, sélectionne le double bouton. Et allons-y tout en restant à l'intérieur du style. Sous le bouton 1, mettons le rayon à 10, le rayon de bordure à 10, mettez-le à jour là. Ensuite, faites défiler vers le bas tout en restant sous le bouton 1. Le lien, le rembourrage. Donnez-moi le rembourrage supérieur de 10 et le rembourrage inférieur de 10. Le défilement vers le haut et réduit le bouton 1, bouton Développer pour faire la même chose, border-rayon 10. Faites défiler vers le bas jusqu'au pad dans le tampon de lien. Rembourrage supérieur, rembourrage inférieur, dix données. Prévisualisons les modifications. Impressionnant. Donc, le site est Taney forme comme nous le voulions. Alors c'est tout. Notre section de tête est prête. La prochaine chose que nous voulons faire est de créer la section du corps, puis le pied de page. Nous n'avons pas de section de corps à faire référence, donc nous allons juste le faire en freestyle. Mais ne vous inquiétez pas, nous sommes en plein contrôle viendra avec quelque chose de génial. L' objectif principal de faire ces 0, comprendre les concepts fondamentaux derrière la création pages Web qui sont réactifs ou mobiles de bureau et de tablette. Commençons à créer la section du corps. 7. Concevoir la section du corps: Nous allons donc créer une section de corps très simple parce que nous essayons juste de voir comment rendre notre page web mobile responsive. Juste en dessous de la section de la tête, je vais ajouter un diviseur. Donc, tout d'abord, ajoutons ces trois colonnes à la structure. Ensuite, nous allons cliquer sur ce signe plus au milieu. Et ajoutons un diviseur. Je veux dire, faisons-le des barres obliques. Oui, laissons ça à ça. Je veux probablement le rendre vert aussi. Je crois que j'ai encore ce vert. Vous pourriez filtrer. Oui, donc je veux le rendre vert. Aller à la section Modifier, le lien ces valeurs et ajouter une marge supérieure de 40. Ensuite, nous voulons ajouter une section à double colonne. Ajoutons une image ici. Dans cette image pourrait avoir. Ajoutons toutes ces images là-dedans. Nous utiliserons ces images et je les fournirai. Alors jetez-les dans le lien ci-dessous. Donc, fondamentalement, nous essayons de créer une page de destination très simple. Il s'agit d'apprendre à rendre la page réactive. Et une fois que vous aurez saisi tous ces concepts, vous serez en mesure de créer des pages WordPress très étonnantes en utilisant Elementor. Donc, à des fins d'illustration ou de créer juste une page de destination simple. Prenons cette image et insérons-la là-dedans. Prenons peut-être, ajoutons un titre, l' 're et comme un suivi parce que c'est une page de destination, peut-être que ceux-ci pourraient être quelque chose pour vous convaincre. Pourquoi moi ? Ici, disons que c'est un entraîneur qui essaie de nous convaincre de les embaucher comme entraîneur personnel, sont bons que cette couleur 404040. Il peut y en avoir. Augmentons la taille ici. Ensuite, nous pourrions ajouter un sous-en-tête juste en dessous , ou au-dessus des résultats. Alors probablement nous allons vous donner la même couleur déjà, 40. 40. Ensuite, nous allons probablement ajouter un éditeur de texte juste là. Oui, probablement quelque chose comme ça. Augmentons la taille d'un, tout à ce sujet. Ensuite, nous voulons changer la couleur de cette colonne ici. On veut lui donner plus de vie. Donc, en cliquant sur cet éditeur de colonne juste là, allant la tuile des sites, en arrière-plan sous la normale. Changez ça en, disons peut-être de la même couleur ici. Laisse-moi entrer ici. Modifier la section. Laissez-moi saisir cette couleur très rapidement. C' est de couleur noire. Copiez ça. Je veux venir ici, choisir ça ici. Je veux dire coller ce code. Et je veux changer pourquoi moi à l'écran. Alors je vais cliquer dessus. Sélectionnez ce vert. Copie-le. Je vais sélectionner ça sous style. Changez cette couleur en vert. Faisons ces blancs. Je suis tout au sujet des résultats sous le style. Changons-le en blanc. Changons aussi ça en blanc. Alors peut-être que vous pourriez ajouter un bouton. Il dit, rappelez-vous, qu'une page de destination est tout au sujet de l'appel à l'action ou du CTA. Une autre chose que je veux faire est de rendre ces coins un peu enraciné. Donc, pendant qu'il est toujours sélectionné ici, descendez à la bordure sous Style, descendez à rayon de bordure, rayon de bordure. Faisons 20. Mettez-les à jour. Et encore une chose que nous voulons faire, eh bien, la colonne est toujours sélectionnée. Cliquez sur Avancé. Et ajoutons le rembourrage alors que ce sont des liens ensemble. Alors augmentons ça. Et ce genre de choses amène tout vers le centre sorte qu'aucun contenu ne penche trop d'un côté. Donc, disons une donnée et nous allons la prévisualiser. Ou RI, génial. Alors je pense que je vais me débarrasser de ça. Je n'aime pas ça. On essaie juste de faire preuve de créativité avec ça. Et remarquez que maintenant nous n'avons pas d'espace ici. Nous pouvons ajouter un peu d'espacement en cliquant sur ce signe plus. Et ici, nous pouvons ajouter une seule section de colonne. Cliquez sur le signe plus et ajoutez l'espaceur. Maintenant, vous pouvez augmenter et diminuer l'espacement est que vous voulez. Laissons-le à ça. La prochaine chose que nous voulons faire est, tout d'abord, mettons à jour cela pour que nous ayons des modifications enregistrées. Donc la prochaine chose que nous voulons faire est d'ajouter un autre espaceur. Alors ajoutons une entretoise là. Ensuite, nous pouvons ajouter une autre colonne double. Et cette colonne, allons de l'avant et peut-être ajouter un titre. Et cette rubrique dira quelque chose comme trouver mon ebook. Donne-le. Donnons-lui peut-être un 40, 40, 40. C' est un gris très foncé. Peut-être augmentons la taille de ça. J' aimerais qu'on ait un livre. Maintenant, elle avait un livre PNG. Je pense que ça suffit. Laissons-le à ça. Ajoutons un éditeur de texte. Et cette augmentation de ce texte quelqu'un à big data comme ajouter une image ici. Faisons en sorte que ces textes soient tout à fait valables. Donc, pour l'image et voir ce que nous pouvons travailler avec. Ajoutons ça. Travaillons avec ça. Chaque aperçu change ou à droite. Allons de l'avant et dupliquons ça. Cliquez ici sur cette icône en double. Pour dupliquer cette section. Nous voulons juste le faire glisser en dessous de mon téléchargement, mon e-book est dupliquer cet espacer juste ici. Et faisons glisser celui-ci ici pour que nous ayons espacement et que nous puissions changer cette image à l'avant. Un. Un problème avec celui-là. Mettez à jour cette page. On commence à faire défiler. Vous remarquerez que notre tête est toujours en haut même si nous faisons défiler et c'est ce que nous entendons par un en-tête collant. Nous avons déjà dit qu'il ajoute un en-tête collant. Tu te souviens ? Donc, dupliquons cette section aussi. Comme ça. Et faisons-le glisser en dessous de cette section. Et dupliquons ce phaseur ici. Et faisons-le glisser vers le bas, jusqu'à ce point pour séparer ces deux-là. Dupliquons encore une autre et mettez-le en dessous de cette section juste là. Ensuite, augmentons la taille de cet espacement afin qu'il y ait de la place en bas d'une page de données. Alors prévisualisons les changements. Voici donc une page Web qui commence déjà à ressembler à une page Web réelle. Bien sûr, avec plus de temps, nous pouvons travailler dessus pour le rendre beaucoup plus beau. Et j'espère que c'est ce que tu fais dans ton projet. Tu lui donnes le temps de le rendre attrayant. Bon, alors remplacons cette image ici. serait encore un autre. Ajoutons peut-être ça. Insérez cela. Alors disons une nouvelle routine. Peut-être que le Jedi t'a donné. Maintenant. Faisons les battements sélectionnés. Nous pouvons les pieds, puis mettre à jour cette page. Donc, nous allons prévisualiser les modifications. Faites défiler vers le bas. Je pense qu'on pourrait peut-être les mettre de l'autre côté, les Enbridge. Alors faites glisser ces colonnes vers le côté droit comme ça, retournez-les. C' est aussi retourner ces deux colonnes comme si elles étaient juste pour la variété. Prévisualisons les modifications dans. Vous remarquerez que quand il est en charge, au début cette partie est chose blanche il devient bleu. Et c'est à cause de ne pas faire nos navbars fond même couleur que le donc nous devons faire la barre de navigation qui est en couleur. Je vais le faire. Alors allons de l'avant et créons le pied de page avant de changer de vitesse et maintenant nous concentrer sur la réactivité de la page entière. 8. Concevoir la section du pied: Créons le pied de page. Nous devrons utiliser l'élément kids light plugin que nous utilisons pour créer la barre de navigation. Alors passons au backend de notre tableau de bord. Donc, sortant juste là, quittez le tableau de bord. Allons à l'intérieur des éléments Clé survolent les éléments kid, et allons dans le pied de page d'en-tête. Allons ajouter de nouveaux. Donnons-lui un nom. Mega, méga dossier, année. Impressionnant. Et nous voulons que ce soit un aliment bien sûr changement que, que M1 doit être actif et disponible sur tout le site. Enregistrer les modifications. Et maintenant, nous pouvons aller de l'avant et le modifier de la même façon que nous l'avons fait avec un méga menu. Modifier le contenu. Donc, la première chose que nous voulons faire est de lui donner le contexte qui se trouve dans la section principale parce que nous voulons garder cette cohérence sur notre site Web. Donc, en revenant à la page où nous éditons la section d'en-tête, nous pouvons éditer la section juste là. Alors viens ici. Ce qui nous intéresse, c'est la couleur seulement, nous ne modifions rien. Alors, on va sauter ici. On est à l'avant. Nous avons été redirigés vers ces lieux par des éléments. Garder. La première chose que nous voulons faire ici est de créer une section. Comme d'habitude. Allons à Modifier le style de section, et collons cette couleur. Nous venons de nous séparer, donc c'est notre couleur de fond. La prochaine chose que nous voulons faire est de dupliquer cette colonne. En fait, triplons le pour que nous ayons trois colonnes. Et nous pouvons ajouter le logo ici. Alors ajoutons une image là. Et attrapons le logo inséré. Ensuite, nous voulons dire quelque chose sur Watson, le pied de page. Alors cliquez sur ce signe plus là. Rubrique. nous fait confiance. Faites-nous confiance. nous fait confiance pour prendre l'air humide. C' est une promesse, non ? Mettons-le au milieu. confiance ici devrait épeler la capitale, puis changeons sa couleur en blanc. Je vais lui donner ce vert. Cube ce vert ici. Sur l'ensemble du verbe était vert. Donc, nous allons sauter par ici. Je veux lui donner ce vert mis à jour. Ensuite, une brève description de ce qu'est le site web. Buts ici. Cliquez sur cet éditeur de texte. Droit ? Donc, tout d'abord, centralisons ça. Faisons le blanc en couleur. Nous pourrions probablement voir la section d'édition et augmentons le rembourrage en haut et en bas. Rembourrage si avancé, supprimez ceux sur le fond. Donnons-lui 60 et top 50. Voyons voir mettre à jour cela. Nous pourrions aussi probablement ajouter la barre de navigation. Alors, allons-y. Nav, menu nav, QI, manger. Ensuite, nous allons sélectionner le menu va marcher le méga menu, mettre à jour cela. Mais ici, c'est noir. Pourquoi est-ce noir ? Tout d'abord, centralisez-le. Au centre. Et gardons cette couleur blanche. Donc, ici, il est réduit menu wrapper. L' élément de menu peut être de couleur blanche. Et quand vous exagérez, nous avons besoin qu'il soit aussi vert. Oui. Et quand nous agissons, quand il est actif, il doit aussi être cette mise à jour verte qui. C' est donc un dossier de base. Prévisualisons ça. Ne vous inquiétez pas que vous le voyez en haut plutôt qu'en bas. C' est parce que nous sommes en train de prévisualiser le monde que nous venons de créer. C' est comme ça que nous avons prévisionné. Juste ici. Que pouvons-nous ajouter ? Ajoutons peut-être quelques liens. Alors ajoutons une liste. Une liste. Et ce que nous voulons, ce sont les listes d'icônes. Il existe différents types de gentil que nous voulons l'icône le moins. Laisse-le juste là. Nous avons des articles pré-publiés pour l'instant afin que nous puissions les modifier. L' article numéro 1 de la liste pourrait être la vie privée, la vie privée. Les côtés M numéro deux pourrait être des réservations, et ce numéro 32 serait la mise à jour de l'adhésion ce cours, vous pouvez ajouter des liens à chaque texte. Donc, pour cet article ici, votre lien va ici. N' oubliez pas que vous pouvez toujours ouvrir le lien dans un nouvel onglet. Allons l'effondrer. Alors allons à l'intérieur du style. C' est là que nous changeons l'aspect visuel de n'importe quel élément que nous regardons. Donc, pour les icônes, nous voulons qu'elles soient vertes. J' ai toujours ces droits verts. Et pour le bail, pour le sexe, nous voulions être White. Que diriez-vous que je veux qu'ils soient sur le côté droit, sur le côté gauche. Allons au moindre alignement. Nous voulons que les alignements du bail soient du bon côté comme ça. Mise à jour. Ensuite, nous allons en prévisualiser. Super génial. Donc maintenant, si nous revenons à la page que nous étions en train de créer, alias notre page de destination, le pied de page sera maintenant disponible là. Alors passons à son passage à la naissance. C'est là. Donc, nous y voilà. Si j'actualise cette page, Contrôle R ou Commande R sur votre Mac. Et puis faisons défiler vers le bas. Trouve le pied de page ici. Mais maintenant, notez qu'il y a ce dossier ici aussi par défaut. Et ces photos viennent par défaut avec Astra, nous devons nous en débarrasser. Alors j'irai ici. Maintenant que nous avons fini de créer le pied de page, je peux quitter Quitter to Dashboard, aller aux pages. Et dans la page maintenant une page de destination, page accueil, je vais aller à Modifier. Sur le côté droit, ici. Je vais faire défiler tous les poids. Donc, les paramètres Astros et changer en pied de page désactivé. Alors mettez à jour ça. Ça veut dire que nous nous sommes débarrassés de cette nourriture qui vient par défaut avec un astéroïde. Donc, si nous rafraîchissons ça, faisons défiler jusqu'au bas et voyons si nous nous sommes débarrassés du, euh, droit, donc maintenant ce n'est pas là. Présentons donc ce phage, notre page de destination, jusqu'au bas. Maintenant que nous avons ces pages, ce qui reste est de la rendre réactive. Mais maintenant, à quoi ça ressemble avant de le rendre réactif ? Jetons un coup d'oeil. Notez donc que lorsque nous actualisons cette page, la barre de navigation est d'abord large. Laisse-moi juste le rafraîchir. Donc, vous remarquerez que cette partie est y se tourne alors vers ces couleurs. Et c'est parce que notre barre de navigation, par défaut n'a pas de couleur d'arrière-plan. Allons et définissons la couleur de fond pour être la paix. Alors, allons là-bas à notre tableau de bord. C' est aller à l'intérieur des éléments, garder le pied de page d'en-tête. Allons dans le méga menu. Et passons à éditer le contenu. Et j'aimerais qu'on vienne ici. Pages déjà ouvertes. Nous éditons donc l'en-tête de la barre de navigation. Donc, allez à Modifier le style de section sous la normale. Basons cette couleur de fond là. Bon, donc si on retourne à la pique et rafraîchit, puis on prévisualise. Quand cela recharge lourd, remarquez ce qui se passe maintenant. Rafraîchissons à nouveau. Tu vois ça ? Nous avons donc trié cela dans le défilement vers le bas et regardez notre page de destination. Ça a l'air super génial. Notre exemple de page de destination est maintenant prêt. La prochaine chose que nous voulons faire est de le rendre réactif ou mobile tablette et ordinateur. Mais avant de le rendre réactif, voyons d'abord à quoi il ressemble en ce moment sur le téléphone mobile. Donc, en cliquant sur cette icône en mode réactif ici. Regardez la taille du logo sur le téléphone mobile. N' est pas près de la réactivité mobile. Alors, qu'est-ce qu'on fait à ce sujet ? Lasso on fait ensuite ? se voit de l'autre côté. 9. Aidez-moi à enseigner un élément à 10 000 élèves: Bonjour mon ami. Tout d'abord, je tiens simplement à vous remercier de m'avoir rejoint dans ce cours et d'avoir choisi d'apprendre de moi. Et je tiens également à vous féliciter pour être arrivé si loin dans la classe. Le fait que vous soyez arrivé aussi loin dans la classe signifie que vous gagnez de la valeur de la classe. Je t'apprécie vraiment et j'espère que tu apprécies le cours en lui-même. Cela étant dit, j'ai besoin de ton aide. J'ai pour mission d'enseigner à au moins 10 000 entrepreneurs comme vous à utiliser elementary pour créer leurs propres sites Web ou pages de destination pour vendre leurs produits. Voici comment vous pouvez nous aider. Vous voyez quand un nouvel étudiant rejoint un cours sur Skillshare, puis aime ce cours et laisse un avis. Cela permet aux autres élèves savoir à quoi s'attendre de la classe. Et quand une classe reçoit de nombreuses critiques de la part des étudiants, Skillshare dit : «  Hé, tu sais quoi ? Ce cours suscite beaucoup d'engagement et de nombreuses critiques de la part des étudiants. Cela doit donc être utile. Cela doit donc être utile. Nous allons donc le pousser vers le haut dans la bibliothèque pour qu'il soit plus facile à découvrir par les nouveaux étudiants. L' algorithme Skillshare pousse donc ce cours vers le haut et le rend plus visible plus facile à découvrir pour les nouveaux étudiants. Parce qu'il a reçu des critiques positives. Et c'est là que tu interviens. Rejoignez-moi dans cette mission et m'a aidé à enseigner à au moins 10 000 étudiants comment utiliser Elementor, comment créer de belles pages de destination, sites Web fonctionnels en laissant un avis dans ce cours et leur indiquant à quoi s'attendre de ce cours. Cela ne vous prendra que deux minutes et c'est terminé. Mais votre évaluation aidera grandement les nouveaux étudiants, les futurs étudiants, à savoir à quoi s'attendre de la classe. La classe répond à vos attentes. Cela a-t-il dépassé vos attentes ? Si vous avez des questions, n'oubliez pas que vous pouvez toujours les poser dans la zone de discussion sous cette vidéo et je serai en mesure de vous aider. Je réponds toujours à chaque question ou commentaire que les étudiants laissent dans mes cours. Cela étant dit, je veux juste vous dire «  profitez bien du cours » et je vous verrai à la prochaine leçon. Paix. 10. Rendre la page entièrement réactive: Alors commençons par la barre de navigation. Ensuite, on passe à la section de la tête, puis au corps, puis au pied de page, et on a fini. Donc, passer à mon en-tête. Ici, nous sommes dans l'en-tête. Si nous l'avons prévisualisé sur l'écran mobile, voici à quoi il ressemble. Juste sur la tablette. Cliquez ici pour voir sur la tablette. C' est à ça que ça ressemble ou plus sur une tablette. Ce que j'aime faire est de créer une barre de navigation séparée qui ne sera visible ou téléphone mobile et tablette. Alors comment on fait ça ? Tout d'abord, dupliquons la barre de navigation que nous avons déjà. Alors maintenant que nous devons maintenant buzz, ils ont déjà l'air bien sur le bureau. Nous n'avons donc pas besoin de les ajuster ou de les rendre plus beaux sur le bureau. Donc, parce que c'est déjà bon sur le bureau, je veux que vous restiez visible sur le bureau, mais il ne l'a pas fait sur le téléphone mobile et la tablette. Donc modifier la section aller à Advanced responsive. Et nous voulons nous cacher sur les tablettes et les téléphones mobiles. Donc, lorsque vous affichez cette page de destination sur un téléphone mobile ou une tablette, c'est ce menu ne sera pas visible. Il ne sera visible que lorsque vous l'affichez sur le bureau. Ensuite, revenons à cette section Modifier. Revenons à la réponse avancée. Cette fois. C'est le menu voudra changer et modifier de sorte qu'il semble bon sur mobile et tablette. Donc, nous ne voulons pas qu'il soit visible sur le bureau. Nous voulons qu'il soit visible uniquement sur tablette et mobile parce que nous allons le faire paraître bien sur tablette et mobile. Donc, parce que maintenant il n'est pas visible sur le bureau, il est caché sur le bureau. C' est à ça qu'il ressemble, se transforme en niveaux de gris. Si nous retournons vers le téléphone mobile, notez que le menu supérieur est maintenant en niveaux de gris pour dire qu'il n'est pas actif sur le téléphone mobile. C' est ce que les utilisateurs de téléphones mobiles nous verrons. Donc la première chose qu'on veut faire est d'enlever le logo. On n'a pas besoin du logo. On a juste besoin de ces menus. Mais c'est noir. On ne peut pas voir, je parie que tu ne peux même pas le voir en ce moment. Alors changeons d'abord sa couleur. Donc, en sélectionnant ça. Maintenant, nous éditons le menu nav. Donc, à l'intérieur Style, allez dans le style hamburger. Et puis retournez ça sur le côté gauche, comme ça. Donc les nombreuses maintenant de ce côté, mais nous devons changer de couleur. Faites donc défiler vers le bas et recherchez le type d'arrière-plan. Sous le type de fond de hamburger, changeons-le en blanc. Ou peut-être rendons-le aussi vert. Donc, basons ce vert là-dedans. Maintenant, c'est vert. Mais en vol stationnaire, nous voulons le rendre blanc. Faire même blanc sur le vol stationnaire, comme ça. Dites mise à jour. Alors regardons ça sur une tablette. C' est comme ça que ça ressemble sur la tablette. Et regardons ça sur le bureau. Sur le bureau, il est caché. Et puis le menu du bureau apparaît. Lorsque nous passons à la tablette, remarquez que le logo disparaît. Donc maintenant, nous avons le menu burger et celui avec le logo a disparu, donc il n'est pas visible sur la tablette. même cas s'applique au mobile. C' est le bureau en vedette. Puis passons un aperçu de la page sur laquelle nous travaillions, notre page de destination. Rafraîchissons ça. Et nous allons en prévisualiser sur mobile. Cif changements que j'ai pris effet. Maintenant, nous avons un menu hamburger au lieu de l'autre Ming qui avait l'énorme logo ici. Donc tout prend effet. Et nous pouvons toujours définir le logo qui apparaît ici, ici en allant dans les paramètres du menu mobile, logo du menu mobile. Et je sélectionne notre logo comme d'habitude, insérer des médias. Donc, quand vous l'ouvrez cette fois, il a ce petit logo juste là. Je pense que nous sommes tous prêts. Notre barre de navigation est maintenant prête. Passons à notre page de destination pour voir les changements que nous venons d'apporter. Donc, revenir au-delà du mode Bureau, et actualisons cela. J'aime ça. Donc, si on pouvait prévisualiser un téléphone portable, voici notre menu. Maintenant, notre barre de navigation est réactive sur ordinateur de bureau et mobile. Donc, il semble sur tablette lorsque nécessaire sur le côté gauche. Alors passons à cet endroit. Passez pour le dire ici. Et ici. Changeons le côté dans lequel il se trouve. Passons de ce côté. Et le style de menu burger comme morceaux pollués de cette mise à jour côté. En fait, nous allons nous débarrasser de ces colonnes ici sur mobile et bureau. Oh, on l'a déjà fait. Ouais, alors mettons-le à jour. Et je manque de revenir à notre page et de le rafraîchir. Contrôlez R ou Commande R sur le Mac. Alors maintenant, nous le voyons sur tablette. Le super cool. Donc la prochaine chose que nous voulons faire est de travailler avec tous les autres contenus et le reste du corps pour s'assurer que tout s'effondre et que les pieds gonflent sur n'importe quel appareil. Alors commençons par tout ou mobile. Donc, vous remarquerez que la santé dépasse les limites, la forme physique aussi. Donc, nous allons offrir la santé la plus haute sélection. Et vous remarquerez que partout où vous pouvez apporter modifications à cette propriété particulière sur la phase mobile, l'icône mobile à côté de cette propriété particulière. Donc si nous pouvions aller dans le style, nous pouvons dimensionner cette aide et Hayden leur aide et la mettre au milieu. Faisons ça pour la forme physique. Fitness. Mettons-le aussi au milieu. On pourrait réduire une partie de ce rembourrage. Maintenant, réduisons la marge. Le haut. Et en bas. On pourrait faire la même chose pour la santé. Réduisons la marge supérieure et la marge inférieure pour qu'elle soit proche. Il diminue un peu sa taille pour qu'il soit presque la même taille que l'année de remise en forme. Maintenant, réduisons la septième mise à jour là. Notez que le haut ici va au-delà de l'endroit où F atteint. Donc, augmentons le rembourrage sur cette description ici. Avec cette sélection. Aller aux requêtes avancées le paddy à 10. J' aime l'endroit où sont les boutons pour qu'on puisse les laisser juste là. Donc, ce que nous voulons est de sélectionner cet arrière-plan. Rappelez-vous que nous avons ajouté ceci comme une image d'arrière-plan, puis nous avons ajouté ceci comme une couleur dorsale. Mais on veut que ça soit sur ses pieds ici, comme sur le bureau. Alors comment on fait ça ? En sélectionnant la section Modifier peut aller connaissances tuile ici, et nous pouvons ajouter une image différente ou la même image. Dans ce cas, ajoutons une image jaune. Je veux juste illustrer ces deux-là. Vous êtes inséré dans la position. Nous voulons qu'il soit au fond. Droits. Alors augmentons la taille, Carson. Et puis maintenant commençons à l'augmenter manuellement comme ça. Réduisons ça. Point de données. Donc, en revenant au sommet, maintenant il nous reste tout l'espace. Nous pouvons tout pousser vers le haut et nous pouvons le faire en allant à éditer la section, Modifier la section Avancé. Et puis démêlons tout là-bas. Et vous remarquerez que tout s'est remis au sommet afin que nous puissions maintenant commencer à ajouter notre galette. Donc, augmentons le rembourrage en haut à droite là. Comme ça. Mise à jour. Donc, dans ce cas, je viens d'ajouter cette image de fond jaune pour vous illustrer que sur, vous pouvez avoir différentes images à afficher sur un appareil différent. Donc, si nous passons en mode bureau, il changera en vert. Si on passe au téléphone portable, ça changera en jaune. Voyons à quoi ça ressemble sur la tablette. On peut aussi en avoir un autre pour les tablettes, donc on y arrivera. Tout d'abord, on a affaire à un téléphone portable. Maintenant, une autre chose que vous remarquerez est que ce menu de burger ici n'est pas aligné correctement sur ces textes. Nous devons le pousser un peu vers l'intérieur et vers le bas pour équilibrer la pique. Alors comment on fait ça ? Nous revenons au menu lui-même et en le sélectionnant n'importe où dans cette minuscule boîte bleue qu'il nav menu. Allez à Avancé. Et puis le lien que la marge augmente la gauche de 20. Maintenant disons 10. Disons, oui, 10, c'est bon. Et top 10. Mettons à jour ça. D'accord, revenons à cette page et rafraîchissons-la. Donc, fondamentalement, nous passons entre différentes pages d'édition. J' espère que ce n'est pas trop déroutant pour toi si tu es un débutant. Donc notre menu de hamburgers est maintenant au moins un peu plus équilibré et semble un peu plus équilibré, n'est-ce pas ? Continuons. Appelons vers le bas et voyons s'il y a quelque chose qui mérite notre attention. Je pense que c'est trop d'espacement, alors sélectionnez cet espace et ajusté en conséquence, nous avons besoin d'un peu plus d'espace là. Faites défiler vers le bas. Vous remarquerez que cette colonne touche ici les bords, les bordures, et nous n'en voulons pas. Alors cliquez sur cette option avancée. Et puis marge. Augmentons la marge à dix. Oui. Réduisons l'espacement ici. Quel degré d'espacement ? Créer 24, Faisons 25. Donc ça veut dire que rester uniforme ferait 25 tout au long. Comme où les mers. Retournons ici et voyons. Clip ce texte juste là. Et passons à avancé. Le rembourrage était de 10. Donc, nous voulons maintenir ce rembourrage uniforme pour les textes descriptifs comme le donc ce sera 10. Donc, à l'intérieur de ce type 10, sorte qu'il n'est pas trop proche des bords. Donc l'espacement ici, 25 pour la colonne, ça a augmenté les marges. Allons-nous réduire cela ? Oui, réduisons la taille de ces titres. Le labo qu'ils ont regardé Vk, maintenant. Il est réduit là, attrape-le maintenant. Donc, la taille est maintenant de 44 pixels, donc je peux copier le style. Alors faites un clic droit. Copiez n'importe où où il y a un titre comme celui-ci, je peux coller le style donc je l'ai copié. À juste titre. Du café. Si j'y vais, c' est similaire. Et faites un clic droit, je peux coller le style, cela signifie la taille, la couleur, et tout. Donc, le style de collage le redimensionne à la même taille que l'autre. On en a un autre qui ressemble à ça. Non. Non, nous ne le faisons pas. Alors on y va. La nouvelle routine ici, semble trop grande. Réduisons ça. Et toi, la routine. Mettez à jour cela. Alors rappelez-vous ici que les textes descriptifs peuvent avoir un rembourrage de 10. Mettons à jour ça. Nous pouvons également copier ce nouveau style de routines, copier cela, et le coller ici. Coller le style. Voyons si nous pouvions réduire cela plus loin, parce qu'il semble un peu à droite là. Oui. Nous allons juste courir pour avoir quelque chose qui est visuellement attrayant. Tout est à portée visuelle et il est facile de lire pendant que quelqu'un les consomme alors qu'ils défilent vers le bas. Donc, vous remarquerez que le logo sur le dossier est trop grand, donc nous devons réduire sa taille aussi. Donc ce qu'il faut faire, c'est aller dans le pied de page. Donc c'était dans la zone méga pied de page. Nous devons donc retourner à l'intérieur du tableau de bord. Elements conserve le pied de page d'en-tête. Vous pouvez simplement éditer avec Elementor. Ont raison, donc, alors rendre le pied de page réactif. Nous devons entrer à l'intérieur aussi et éditer, et maintenant nous sommes à l'intérieur. Alors regardons le sur mobile. Et c'est à ça que ça ressemble. Donc si nous le pouvons, si nous passons à la page de destination elle-même, nous sommes là. C' est à ça que ça ressemble. Voici à quoi il ressemble sur la page de destination. 11. Rédiger le pied de page réactif: Alors pourquoi ne pas faire la même chose que nous avons fait pour l'en-tête en ce moment et dupliquer le dossier afin que nous ayons un pied de page pour les appareils mobiles et un autre pour le bureau. Donc, cela semble déjà bon sur le bureau. Éditons la section qui avancée et réactive. Nous voulons qu'il soit visible sur le bureau, mais se cacher sur tablette et téléphone mobile, ou non ? Alors nous allons le dupliquer. Et sur cette seconde, on voudra dire section d'édition. Et puis en responsive avancé, nous voulons que la deuxième photo soit cachée sur le bureau. Nous ne voulons pas qu'il soit visible sur le bureau parce que nous allons le rendre magnifique sur tablette et mobile. Donc, cela sera créé pour tablette et mobile, et c'est pour le bureau. Donc, si nous passons à mobile et tablette, le bureau devient niveaux de gris, et maintenant nous pouvons éditer celui-ci. Débarrassez-vous du logo du téléphone mobile. On n'a pas besoin de ça. Pas besoin de cette colonne aussi. Maintenant, il nous reste avec ces os nus. Débarrassons-nous de ce menu. Mais nous pouvons le moins centraliser. C' est une ligne au milieu. Mettons à jour ça. Jetons un coup d'oeil sur tablette. C' est comme ça que ça ressemble sur la tablette. Il C sont sur tablette. Nous pouvons le changer pour dire, regardez, il est bon de mettre en page tout en éditant la section qui a une structure de mise en page active. Je voulais avoir cette structure cette mise à jour. Donc sur mobile, c'est à ça que ça ressemble. Et puis sur le bureau, cela sera caché et cela deviendra visible. Alors passons au bureau. Et maintenant, c'est la chaleur et c'est ce qui serait raisonnable de bureau le vôtre. Passons donc à notre page, à notre page de destination, et actualisons-la pour voir si les modifications ont pris effet sur notre pied de page. J' aime ce que je vois, mais maintenant, si nous le voyons en mode responsive et faisons défiler tout le chemin vers le bas. Maintenant, le pied de page a l'air bien. Réduisons l'espacement à 30. Mettez à jour leur lac supérieur, comment ça se passe. Alors regardons le sur tablette. Donc, c'est à quoi cela ressemblera en mode tablette. Nous devons également nous adapter en conséquence. Alors réduisons la santé et la vie. Réduisons aussi la forme physique. J' ai l'impression qu'il faut réduire l'espacement ici. Alors modifions la section. Peut également retirer cela par Control I, puis éditer cette section. Donc, cette section. Alors réduisons le rembourrage et la marge. Réduisons le. Donc vous remarquerez la même chose que d'avoir ici. Après avoir déconnecté le rembourrage, tout est passé au rembourrage par défaut afin que nous puissions tout régler à partir de zéro. Alors augmentons le rembourrage juste là. Et augmentons ça. Parle à gauche. Faisons le 10. 10. Faisons de cela une mise à jour de 70, 19 minutes là-bas. Ça a l'air beaucoup mieux, non ? Alors voici notre menu. Fermons ça. Défilé par mon e-book. Donc tu devrais être par mon e-book ou non ? Alors rappelez-vous, nous pouvons augmenter ce remplissage descriptif de textes juste là sur la gauche en essayant de se débarrasser de cela. En fait, 10, disons cinq. Poussons un peu cette colonne loin du bord. Nous le faisons donc en le sélectionnant. Puis avec la marge à gauche, ça a augmenté de dix. Alors copions ce style. Copiez ça. Collons le style juste là. Donc, ce sont nos journaux de photos sur les tablettes, nous devons donc les réduire. Je pense que je veux qu'il soit aligné à droite au lieu d'aligner à gauche. Donc, ici, on va juste là. Nous voulons qu'ils soient alignés comme ça. Et puis nous voulons augmenter cela juste là. Cela doit également être aligné à gauche. Augmentons la marge juste là, et augmentons la taille. typographie est la taille, c'est juste pour moi. Laisse que j'aime mieux ça. Passons donc à notre page de destination et actualisons-la. Bon, alors passons un aperçu sur tablette. Défilons vers le bas et voyons à quoi ressemble notre photo. Choisissez notre pied de page semble mieux, mais maintenant nous devons pousser cette liste vers l'intérieur un peu afin que l'espacement soit presque le même que l'âme. Passez au pied de page méga. Sélectionnez cette colonne ici. Ou sélectionnons la liste elle-même. Un vaste. Le lien que je suis à droite, C'est n, disons 20. Mettez à jour cela. Donc, si nous pouvions passer à la page de destination et l'actualiser à nouveau. Défilons vers le bas et jetons un coup d'oeil. Mais nous voulons le voir sur tablette. Parfait. J'aime ça comme ça. Bien sûr, compte tenu de plus de temps, peu près sûr que vous pouvez trouver quelque chose qui semble incroyable. C' est de la poussière pour que nous soyons en mesure de comprendre les concepts derrière le design responsive. Quels sont les outils fournis par Elementor ? Et quelle est la flexibilité dont vous disposez en tant qu' utilisateur élémentaire pour créer des conceptions réactives ? Alors modifions la section ici. Et je veux pousser ça vers le bas pour qu'il soit sous ses jambes. Donc, sous le style. Ajoutons ça, faisons en sorte que le jaune soit, eh bien, je sais que le jaune a l'air bizarre sur ce vert. Mais c'est juste pour illustrer que vous pouvez avoir différentes images pour les différentes tailles d'écran. Rappelez-vous sur le bureau, nous avons vert. Maintenant, nous avons du jaune. Augmentons. Tout d'abord, passons à cette valeur par défaut à la position et disons en bas, à droite. Ensuite, nous allons augmenter la taille du client juste là. Et disons augmenté, mis à jour comme ça. Donc maintenant, lorsque vous accédez au mode Bureau, il est vert. Sur tablette, ClO ou téléphone mobile. Il peut être rouge ou il peut être la même, même image maintenant créé pour être parfait pour téléphone mobile. Cause rappelez-vous, une image peut sembler génial sur le formulaire mobile, mais pas génial sur moins de mode Doc. Ce fitness est censé être vert. Rendons-le aussi vert. Allons chercher cette crème. Copiez ça. Changons ça en vert. Lorsque vous modifiez la couleur dans n'importe quel mode, ordinateur de bureau, tablette ou téléphone mobile, les modifications se produisent sur les différentes tailles. Une autre chose que vous devez savoir est que les éléments en mouvement autour, comme déplacer la santé d'avant la remise en forme à après la remise en forme comme ça. Alors que le mode mobile ou le mode tablette se déplace la même chose partout sur tous les autres modes. Ce sont donc des changements globaux que vous apportez. Le déplacement des éléments est global. Donc il y a les gars. Une page Web WordPress entièrement fonctionnelle se construit avec Elementor et elle est entièrement réactive ou mobile, de bureau et de tablette. Vous pouvez utiliser ces mêmes principes et concepts pour créer n'importe quelle page Web que vous voulez créer une page Web que les gens aimeront visiter sur leurs appareils de défense. 12. Réflexions finales: J' espère que vous avez trouvé cela utile. m'appelle Ken meilleure somme, je suis vraiment curieux de voir ce que vous allez trouver. Voyons voir les pages de destination seront en mesure de créer en tant que classe et voir comment nous pouvons nous entraider. Sinon, je te parlerai la prochaine fois. Continuez à revenir pour voir si j'ai une nouvelle classe et que je vous aime tous. La paix.