Flux de travail élémentaire pour débutants (2022) - concevoir une page d'atterrissage sensible pour un livre électronique

1. Intro: Bienvenue dans un autre cours génial avec moi. Peut bursa. Si c'est la première fois que tu me découvres. Bienvenue. Maintenant que j'enseigne comment utiliser Elementor ici même sur Skillshare depuis 1,5 ans, je vous ai montré comment concevoir des pages Web entièrement fonctionnelles. Comment concevoir des pages de destination de classe mondiale impressionnantes à l'aide de la version gratuite de l'élémentaire. Et aujourd'hui, je veux vous montrer comment concevoir une page de destination de livre électronique génial dont vous pouvez être fier. Donc, si vous avez un livre électronique ou si vous avez un ami qui possède un livre électronique et qu'il souhaite le fournir aux utilisateurs. Peut-être souhaitez-vous vendre l'e-book ou simplement autoriser les utilisateurs à le télécharger gratuitement. C'est une belle façon de le présenter, comme vous pouvez le voir ici, mon arrière-plan, c'est la page de destination que vous allez concevoir. Je vais vous montrer à quoi ça ressemble bientôt pour que vous sachiez à quoi vous attendre. Donc, si vous débutez avec Elementor, ce sera une excellente occasion pour vous apprendre le flux de travail et de comprendre comment utiliser les différents outils qu'Elementor vous fournit ce sera une excellente occasion pour vous d' apprendre le flux de travail et de comprendre comment utiliser les différents outils qu'Elementor vous fournit pour proposer un page Web de travail. Et si vous avez utilisé Elementor, je ne pense pas qu' il y ait quelque chose nouveau dans cette classe pour vous. Ce cours s'adresse davantage aux personnes qui débutent dans Elementor et aux personnes qui aiment simplement comprendre comment créer une page Web avec Elementor à partir de zéro. Je veux donc vous montrer la refonte de la page de destination. Je vais simplement faire défiler du haut vers le bas de la page pour que vous puissiez voir à quoi vous attendre. Donc, si vous êtes aussi excité que moi, allons-y et commençons. Très bien. 2. Installer Astra Theme: Nous voici donc sur mon tableau de bord. Il s'agit d'une toute nouvelle installation de WordPress, et comme vous pouvez le constater, il s'agit de la version 5.9.3. Votre version peut donc être différente, mais ce que nous allons faire restera pertinent. Je vais donc aller de l'avant et me débarrasser de cette notification là-bas. Et la première chose que nous voulons faire est d'installer notre thème. Je vais donc aller de l'avant et cliquer sur Apparence. Par défaut, le thème actif est 2022, car en ce moment nous sommes en 2022. Nous avons également 20202021, juste au cas où vous les aimeriez et que vous vouliez utiliser l'un d'entre eux. Mais le thème que j'aime utiliser dans tous mes projets s'appelle Astra. Nous allons donc installer Astra. Je vais donc cliquer sur Ajouter un nouveau. Et voici une liste de tous les thèmes disponibles. Je vais choisir Astra. Cliquez donc sur Installer. Très bien, il est maintenant installé. Je vais donc cliquer sur Activer pour en faire le thème actif. Et comme vous pouvez le constater maintenant, Astra est le thème actif. Allez-y et fermons ce message ici. Et maintenant, dans la leçon suivante, allons installer Elementor. Je vous verrai bientôt. 3. Installer Elementor: Bienvenue de retour. Allons maintenant installer le plugin élémentaire que nous allons utiliser pour construire la page en front end. Je vais donc cliquer sur Plugins, Add New. Et dans le répertoire de ces plugins, nous allons chercher Elementor. Et ce devrait être les premiers résultats ici. Par Elementor.com, il dispose plus de 5 millions d'installations actives, je vais donc l'installer maintenant. Allons de l'avant et activons. Très bien, il sera donc redirigé vers cet assistant de configuration. Maintenant, si vous aviez essayé d'utiliser Elementor il y a quelque temps avant qu'ils aient mis à jour leur plugin, vous remarquerez que nous n'avions pas cet assistant de configuration, mais maintenant nous le faisons. C'est un moyen facile de vous aider à configurer les parties de base de votre site Web. Et nous verrons cela au fur et à mesure que nous franchissons les étapes. La première étape consiste donc à vous inscrire à Elementor, mais vous n'avez pas besoin d' un compte Elementor pour utiliser le plugin. Donc, je vais aller de l'avant et sauter ça. Ensuite. Ici, vous pouvez aller de l'avant et continuer avec le thème Hello créé par élémental. Ils ont leur propre équipe compatible avec un plug-in. Mais comme nous avons déjà installé Astra, nous pouvons aller de l'avant et cliquer sur Ignorer. Astra est une chose beaucoup plus puissante. Et ici, nous avons la possibilité de donner un nom au site Web. Et comme je lui avais déjà donné un nom pendant que j' installais WordPress, je lui ai donné ce nom, ma démo de page eBook. Mais vous pouvez toujours aller de l'avant et le changer n'importe quel autre nom que vous voulez. Je vais le garder. Je le garderai comme démonstration de la page de mon eBook et cliquez sur Suivant. Et si vous avez un logo de site Web, vous pouvez l'ajouter ici. Mais je n'ajoute pas le logo pour le moment, alors je vais cliquer sur Ignorer. Ensuite, ici, nous pouvons commencer à modifier notre page à partir d'une toile vierge avec Elementor Editor. Nous pouvons également parcourir des centaines de modèles préfabriqués par Elementor ou importer les nôtres. Ce que nous voulons faire, c'est cliquer sur modifier un canevas vierge avec Elementor Editor car nous voulons créer une page à partir de zéro. Et il y aura, nous pouvons maintenant commencer à construire notre page Web à partir de cette ardoise vierge. Et c'est comment installer Elementor le plugin. Dans la leçon suivante, Voyons comment commencer à construire la page à partir de zéro. Maintenant que nous sommes ici. Je vous verrai bientôt. 4. Conception de la section du héros: Bienvenue de retour. Il est maintenant temps de commencer à créer la page de destination. Et la première partie de la page que nous allons créer est la section héros. La partie qui se trouve en haut de n'importe quelle page de destination. La partie qui capte l'attention du visiteur ou de l'utilisateur. Et parce que nous avons été redirigés vers cette page directement après avoir rempli et terminé l'assistant de configuration. Je veux vous montrer comment créer page depuis le tableau de bord, car je ne veux pas supposer que vous savez déjà comment créer ou générer une page Web WordPress à partir du tableau de bord. Je vais donc cliquer sur ce menu Burger et cliquer sur Quitter to Dashboard. Nous allons créer une nouvelle page et nous n'utiliserons pas celle-ci. Cliquez donc sur ça. Et en cliquant sur le fait que nous avons été redirigés vers l'onglet Pages du tableau de bord WordPress. Ce que nous voulons faire, c'est cliquer sur Ajouter un nouveau. Et au fait, c'est la page que nous regardions. Laissez-moi l'ouvrir pour que vous puissiez y jeter un coup d'œil. Je vais donc cliquer sur Aperçu et l' ouvrir dans un nouvel onglet. Et voilà, la démo de ma page eBook. C'est le titre de la page, mais comme vous pouvez le voir, il s'agit d'un brouillon. Ce que nous voulons faire, c'est créer notre propre page que nous créerons notre page de destination. Je vais donc cliquer sur Ajouter un nouveau. Et je l'appellerai Skillshare. Page de destination du livre électronique Skillshare. Alors, permettez-moi de m'assurer que c'est en casquettes. Et la première chose que nous voulons faire ici est d'aller dans les paramètres d'Astro et de nous assurer que la mise en page est pleine largeur, la barre oblique étirée. Et pour la barre latérale, nous ne voulons pas la barre latérale, donc pas de barre latérale. Voyons ces éléments capables. Nous voulons désactiver l' en-tête et le dossier. Et si je peux accéder à cette page ici, c'est le dossier que nous venons de désactiver. Alors désactivez-le et laissez-moi m'effondrer là-dedans. Oui, c'est tout. Revenons à l'intérieur des paramètres WordPress. Ce sont les paramètres astraux. Revenons à l'intérieur des paramètres WordPress et passons à l'intérieur du modèle. Nous voulons dire Elementor pleine largeur. Cliquez donc sur ça. Et maintenant, cliquez sur Publier, publiez-le. Maintenant. Notre page est maintenant en ligne. Cliquez donc sur Modifier avec Elementor. Très bien, donc nous y voilà. Comme vous pouvez le constater, nous n' avons pas ce dossier qui lisait Astra sur l'autre page qui avait été généré après l' assistant de cette page. Nous avons donc une ardoise propre à travailler. La première chose à faire est donc de sélectionner une section à double colonne en cliquant ici sur cette icône plus, une section à double colonne. Et ici, nous l'avons. Cliquons sur ce signe plus pour ajouter un élément d'image car le mentor tire son nom à partir d'éléments, il suffit de faire glisser les éléments de ce panneau ici sur la page, puis de personnaliser ces éléments. C'est pourquoi il s' appelle Elementor. Maintenant que nous avons fait glisser cette image ici, si je clique sur l'image, tant que c'est l'élément actif, seront les éléments que nous pourrons personnaliser ici et vous pourrez le dire par le nom de l'élémentaire édition. Donc, si nous continuons à cliquer à nouveau sur ce signe plus ici, cela affichera ces éléments. Et nous pouvons aller de l'avant et y faire glisser des éléments d' en-tête. Et maintenant, nous pouvons personnaliser ces éléments de titre et avant de toucher autre chose, car c'est l'élément actif, vous pouvez le dire par ce nom de l'en-tête d'édition de l'élément. Notez que si nous cliquons sur l'image, elle change pour modifier l'image. Cela signifie que ces paramètres concernent l'image. C'est juste pour les débutants. Si vous avez déjà utilisé Elementor, ce n'est pas nouveau pour vous. Donc, au cas où nous sommes encore là, vous souhaitez avoir à nouveau accès à ces éléments. Il suffit de cliquer sur cette icône. Et il fait remonter les éléments une fois de plus et nous pouvons réduire tous ces panneaux comme cela pour révéler d'autres éléments que nous pouvons utiliser. Nous avons des éléments WooCommerce, des éléments WordPress. Nous avons des éléments généraux. Mais pour commencer, nous utiliserons toujours les éléments de base. Il s'agit des éléments les plus couramment utilisés sur n'importe quelle page. C'est pourquoi, par défaut, il est toujours ouvert dans une nouvelle page Elementor. Maintenant que nous avons ajouté le titre, nous devons également ajouter un éditeur de texte qui est essentiellement un paragraphe. Et il y a un peu de texte réservé. Maintenant, si nous allons de l'avant et que nous cliquons sur cette image, nous devons ajouter une image du livre. Je vais donc entrer ici dans notre médiathèque. Et parce que si vous n'avez pas téléchargé des images, nous devons entrer dans un dossier que j'ai préparé avec toutes les ressources que vous utiliserez et vous trouverez le dossier des ressources dans la description ci-dessous cette vidéo peut aller de l'avant et la télécharger et utiliser tous ces éléments sont fournis gratuitement. Cliquez donc sur Charger des fichiers. Et si je clique sur Sélectionner les fichiers il sera redirigé vers ce dossier de ressources. Actifs. Dans le dossier des ressources, nous pouvons aller de l'avant et choisir la couverture du livre électronique. Je vais donc double-cliquer dessus . Et c'est là. Maintenant qu'il est sélectionné, je clique sur Insérer et nous avons un livre. Laissez-moi traîner ça un peu. Et ce que nous voulons faire ensuite, c'est ajouter ce fond coloré dégradé que vous avez vu dans la démo d'introduction. Et comment faire cela, c'est tout d' abord la section, l'ensemble de cette zone qui contient le livre et qui contient ces deux colonnes est la section. Et pour apporter des modifications à la section, nous cliquons sur cette partie ici. Et maintenant, il lit la section Modifier pour apporter modifications à l'une des colonnes ici, nous cliquons sur cette partie ici, modifications apportées à n'importe quelle colonne. Si nous cliquons sur cette autre partie, la colonne reste vide car nous sommes en train de modifier cette colonne. Mais pour modifier la section, nous cliquons dessus. Et je vais dire style. Contexte. Normal. Nous avons besoin de la couleur, disons un dégradé. Cliquons donc sur dégradé. Et par défaut, cette couleur rosée. Je veux donc ajouter une deuxième couleur, soit 1524. Et là, nous l'avons, un joli fond de dégradés colorés. Vous pouvez aller de l'avant, bien sûr, et en faire n'importe quelle couleur. Vous pouvez simplement faire glisser cette couleur. Mais je veux juste le laisser à 24 heures. Et vous pouvez modifier cette deuxième couleur à la couleur souhaitée. Je peux faire traîner ça. Vous pouvez également le faire glisser pour l'amener dans la zone bleue, puis le faire glisser. Mais je veux le laisser au rose original parce que je pense que c' est bon avec l'orange. Cliquez n'importe où dans cette section pour vous en débarrasser. Maintenant, la prochaine chose que nous voulons faire est de modifier cette rubrique car elle n'a pas l'air bien en ce moment. Nous allons donc le sélectionner et vous remarquerez qu' il a été modifié pour modifier le titre. Alors qu'il est toujours actif, je veux le remplacer par un car c'est le titre principal de cette page de destination. Chaque page Web doit posséder un H1, qui est la déclaration qui devrait capter l'attention des gens. Et nous devrions dire aux moteurs de recherche que cette page est à ce sujet. Alors, de quoi s'agit-il ? Alors donnons un peu de marée. Changez votre vie aujourd'hui. Et bien qu'il soit encore sélectionné, passons à l'intérieur du style. Donnons une couleur blanche. Modifions la police en cliquant sur Famille de typographie. menu déroulant s'affiche. Et passons cela à Montserrat ou à n'importe quelle police que vous voulez. Montserrat, je veux lui donner un poids de police de 900 juste pour la rendre très audacieuse. Et puis j'augmenterai sa taille jusqu'à ce point. Et maintenant, vous remarquerez qu'il n'est pas équilibré par rapport à cette image. Nous devons donc pousser ces éléments dans cette colonne vers le bas. Nous allons donc sélectionner cette colonne elle-même. Il est maintenant modifié pour modifier la colonne. Je vais aller à Advanced. Et donnons-lui une marge supérieure de 50 ou peut-être 70. Très bien, donc c'est à ça que ça ressemble. Mettons-le à jour. Allons de l'avant et sélectionnons le paragraphe ou l'éditeur de texte. Et maintenant, une fois que nous avons sélectionné, vous remarquerez qu'il est passé en éditeur de texte. Nous voulons tout d'abord changer la couleur en blanc. Ensuite, bien sûr, nous devons la changer pour changer la typographie ou la famille de polices en Montserrat. Entrez. Bien sûr, vous devrez modifier ce que dit cette déclaration. Vous devrez donc entrer dans le contenu, le mettre en surbrillance et commencer à taper ce que vous voulez, quelle que soit la description que vous souhaitez y ajouter. Donc. d'esprit, Lorem Ipsum. Mettons-le à jour. Et avant d'y aller, cliquons sur cette icône d' aperçu des modifications ici pour prévisualiser les modifications. Il s'ouvrira dans un nouvel onglet. Et c'est ainsi que notre section héros boucle. Et nous devons ajouter un bouton pour permettre aux utilisateurs de télécharger le livre. Revenons ici. Et pendant que nous sommes encore là, nous pouvons cliquer ici pour exposer les éléments. Et sous le panneau de base, nous avons l'élément bouton. Faites-le glisser et déposez-le là lorsque la ligne bleue apparaît ici pour indiquer que nous sommes prêts à déposer. Et bien sûr, une fois que nous l'avons laissé tomber, ces changements à modifier le bouton, ou vous pouvez simplement le sélectionner pour assurer qu'il s'agit du bouton Editeur. Et passons à l'intérieur de la zone de texte ici et modifions-la pour télécharger un e-book. Maintenant, il devrait être bas, non ? Et bien sûr, si vous souhaitez ajouter une icône au bouton, vous pouvez toujours cliquer sur la bibliothèque d'icônes. Et cherchons à télécharger. Télécharger. Disons donc que maintenant, il y a cette icône juste là. Je vais à l'intérieur du style. Nous pouvons augmenter son rembourrage. rembourrage est l'espacement entre le contenu intérieur et les bordures de l'élément. Nous allons donc rompre ce lien. Et puis, pour la gauche, donnons-lui 50. rembourrage. Le bon. UN 50. Nous avons maintenant un espacement plus important ici. Et pour le haut et le bas, donnons un 202020. Cela rend le bouton beaucoup plus grand. La prochaine chose que nous voulons faire est d'ajouter une ombre de boîte pour le bouton qui devrait lui donner une ombre pour lui donner un effet 3D. Une fois que nous avons cliqué dessus, regardez le bouton, il y a maintenant une sorte d' ombre derrière lui. Et nous pouvons aller de l'avant et modifier le flou de l'ombre. Je pense que j'ai aimé son apparence en ce moment. Et maintenant, allons à l'intérieur. sur quoi nous travaillions c'était la boucle normale du bouton. Maintenant, passons à l'intérieur du planeur et modifions certaines de ces propriétés. En vol stationnaire. heure actuelle, cela ne change pas, mais en survol, si nous disons, nous voulons changer la couleur du texte en survol en noir. Maintenant, lorsque nous survolons, il devient noir, mais nous voulons également que la couleur d' arrière-plan change. Disons donc que nous voulons le changer en blanc, comme ça. Et bien que nous soyons toujours sous le survol de l'animation, nous avons une variété d'animations parmi lesquelles nous pouvons choisir. Je veux juste choisir « grandir ». Et c'est ce qu'il fait. Allez-y et expérimentez avec le reste. Cliquez maintenant sur Mettre à jour cela. La prochaine chose que nous voulons faire est d'ajouter une brève déclaration ici et informer l'utilisateur des formats dans lesquels le livre est disponible. Nous pouvons donc aller de l'avant et cliquer sur les éléments, l'icône et faire glisser un tout nouveau texte vers cette zone. Ou laissez-moi simplement supprimer cela. Nous pouvons simplement reproduire ce texte ici. Vous pouvez donc simplement aller de l'avant et cliquer avec le bouton droit de la souris, cliquer dessus avec le bouton droit et dupliquer. Ensuite, nous pouvons mettre ça juste en dessous. Allons de l'avant et entrons dans la typographie de style. Et rendons ce texte un peu plus petit. Pour le style de texte, disons l'italien. Mettons-le ensuite en évidence. Ce livre est disponible en formats PDF et Kindle. Mettons-le à jour. Et prévisualisons les modifications. Très bien, et c'est notre section héros. Avant de terminer cette leçon, je veux simplement ajouter un peu de rembourrage en bas et en haut de cette section pour augmenter l'espacement entre le contenu et la bordure supérieure et inférieure. Allons donc ici et sélectionnons les paramètres de la section. Ces modifications sont apportées à la section. Allons à l'intérieur avancé. Nous allons rompre ce lien. Parce que si nous ne , laissez-moi simplement relier cela ensemble. Quel que soit le changement que nous apportons sur l'une de ces cellules, toutes les autres cellules seront affectées. Mais si nous brisons cela, nous pourrons modifier des cellules individuelles. Nous voulons donc changer le haut et bas. Donnons un 50. Vous remarquerez donc maintenant que nous avons un plus grand espacement ici. Et si, si nous changeons également le top à 50, nous avons un bon espacement au sommet. Allons de l'avant et mettons à jour cela. Bien sûr, vous pouvez ajouter autant de rembourrage que vous le souhaitez, cela ne doit pas nécessairement être 50. Allons de l'avant et prévisualisons les modifications. Et maintenant, je pense que c'est beaucoup plus présentable. C'est donc notre section héros. Je pense que ça me plaît jusqu'à présent. Vous pouvez aller de l'avant et devenir plus créatif et voir quoi d'autre, quelles autres propriétés vous pouvez jouer pour la rendre beaucoup plus belle. Bien sûr, ces couleurs sont celles que j'ai choisies. Vous êtes libre de choisir vos propres couleurs. Et cela nous amène à la fin de cette leçon. Dans la leçon suivante, Voyons comment créer la section Partenaires. Je vous verrai bientôt. 5. Créer la section des partenaires: Bonjour, bon retour. Dans cette section, je veux vous montrer comment créer la section logo des partenaires à section logo des partenaires l'aide de l'élément carrousel d'image. Donc, sans perdre de temps, passons à l'intérieur de notre éditeur. Nous y voilà. Donc, pour ajouter une nouvelle section, continuons et cliquez dessus, icône Ajouter une nouvelle section. Et nous avons différentes options pour le type de section que nous voulons. Nous voulons une section pleine largeur. Alors allez-y et cliquez dessus. En d'autres termes, il ne comporte qu'une seule colonne. La première chose que nous voulons faire est bien sûr de séparer cette section de la section héros. Donc, en sélectionnant la section elle-même pour s'assurer qu' elle lit Modifier la section. Allons à l'intérieur avancé. Et brisons ce lien sur la marge. Et donnons-lui une marge de 50 pixels. Il y a donc actuellement un espacement entre les deux sections de 50 pixels. La prochaine chose que nous voulons faire est de cliquer sur le signe plus pour ajouter des éléments à l'intérieur de la colonne. Et ce que nous voulons faire, c'est faire glisser un cap là-dedans. Appelons cela nos partenaires. Et nous voulons l' amener au centre. Alors que nous sommes encore sous le contenu, passons à Alignement et poussons-le au centre comme ça. Et il s'agit maintenant d'un H2, en d'autres termes, d'une deuxième position. Et juste au cas où vous vous demandiez ce que nous entendons par H1, H2, H3, H4, jusqu'à H6, nos niveaux HTML de titres, et ils ont tous un objectif différent. Donc, parce que vous avez déjà un H1 sur cette page et que nous ne devrions avoir qu'un seul H1 sur n'importe quelle page Web. Nous pouvons avoir autant d' éléments H2 que nous le voulons. Les en-têtes donnent une hiérarchie à la page Web. Et c'est bon pour l'optimisation du référencement ou des moteurs de recherche, mais je ne veux pas approfondir cela. Par conséquent, Partners est toujours sélectionné. Allons à l'intérieur du style. Et, bien sûr, modifions la couleur du texte. Et je veux lui donner un gris foncé presque noir. Pas de noir pur, mais presque noir. Donc triple 40 devrait lui donner cette couleur noire pas si riche, mais grisâtre. Et puis, bien sûr, cliquons n'importe où à l'intérieur pour s'en débarrasser. Et cliquons sur Topographie pour changer la famille de polices en Montserrat ou n'importe quelle police de votre choix. Là, nous l'avons. La prochaine chose que je veux faire est de lui donner un poids de 800. Et je pense que j'aime cette taille, donc je veux changer cela. La prochaine chose que je souhaite faire est de cliquer sur cette icône pour révéler à nouveau les éléments. Et ici, je veux chercher un carrousel, et nous avons ici un carrousel d'image. Donc, en gros, il s'agit d'un curseur pour les images. Je vais le faire glisser et le déposer dès que cet indicateur bleu apparaît. Et maintenant, vous remarquerez la chute momentanée. Les paramètres du carrousel d'image ici. Et nous pouvons cliquer sur ce signe plus ici pour ajouter les différents logos que nous voulons avoir sur le curseur. Donc, parce qu'ils ne les ont pas téléchargés, je vais aller à l'intérieur, télécharger des fichiers, sélectionner des fichiers, et dans le dossier des ressources dont je viens de vous parler, vous trouverez ces partenaires plis, logos, dossier. Vous pouvez aller de l'avant et les sélectionner tous et les ouvrir. Très bien, ils sont tous téléchargés. Créons une nouvelle galerie. Et c'est là que nous l'avons. Insérer une galerie. Et maintenant, notre carrousel affiche les logos. Mais il y en a deux espacés car pour l'instant, le réglage est de ne montrer que trois logos à la fois. Donc, si nous allons à l'intérieur des diapositives pour s'afficher, nous ne voulons pas que le nombre de diapositives par défaut s'affiche, disons cinq, car nous en avons six. Ainsi, cela fait défiler pour montrer le sixième défilement continu à l'infini. Mettons-le à jour. Et prévisualisons les modifications. Très bien, donc nous l'avons. Je suppose donc que si vous vendez un livre, vous pourriez avoir des partenaires, éditeurs ou des entreprises avec lesquelles vous vous associez dans ce projet particulier. Vous voudrez peut-être afficher leurs logos juste en dessous de la section héros. C'est pourquoi nous avons cette section. C'est ainsi que vous pouvez créer la section Partenaires. Dans la leçon suivante, nous verrons comment créer une section d' appel à l'action qui décrit ce que les gens doivent attendre dans votre livre électronique. Voyons donc comment le faire prochainement. 6. Section des sujets et des CTA: Bienvenue de retour. Jusqu'à présent, nous avons pu créer notre section héros et notre section partenaires. Et bien sûr, jusqu' à présent, vous remarquez que le nôtre l'aile. Nous le faisions juste pour le style. Mais j'ai pensé que nous devions le faire de manière structurée, de manière à ce que vous sachiez à quoi vous attendre. Je suis donc allé de l'avant et j'ai remonté la page que j'avais créée à l'avance avant de commencer à enregistrer ce cours. qu'il puisse nous guider sur ce à quoi nous attendre afin que vous sachiez ce que nous sommes sur le point de créer un widget. Nous ne créons pas seulement la prochaine section sans que vous sachiez à quoi elle ressemblera. J'ai donc remonté cette page pour que nous puissions faire défiler et regarder la section que nous sommes sur le point de créer. Ensuite, nous allons de l'avant et le créons. C'est la section que nous créons. Il s'agit essentiellement des sujets que les gens trouveront dans le livre. Et bien sûr, rappelez-vous qu'il s'agit d'une page de destination. Il doit être convaincant. Il faut qu'il convertisse les gens. C'est le rôle d' une page de destination. Il doit convertir les utilisateurs ou les visiteurs en acheteurs. Et pour ce faire, vous devez fournir aux gens le plus d' informations dont ils ont besoin. Une façon de donner des informations sur votre livre consiste informer les gens des différents sujets que vous abordez dans le livre. C'est pourquoi cette section est importante. Dans notre éditeur de livres électroniques. Nous devons ajouter une nouvelle section. Et comme vous pouvez le voir ici, il s'agit d'une section qui comporte trois colonnes. Mais il y a également cette section qui n'est qu'une seule colonne. Alors, comment incorporer cela sur notre page ? Allons de l'avant et disons ajouter une nouvelle section. Et nous devons ajouter une section pleine largeur comportant une seule colonne. Et nous pouvons aller de l'avant et cliquer sur cette icône juste ici et faire glisser un nouvel en-tête ici, comme nous l'avons déjà fait auparavant. Ou nous pouvons simplement reproduire cela et faire glisser le doublon ici. Mais avant de le faire, je veux proposer un outil très pratique que j'ai oublié de vous montrer comment vous en parler, qui aidera à accélérer notre travail. Je vais donc entrer dans ce menu Burger, préférences de l'utilisateur, la modification des poignées, cliquer sur, Oui. Et maintenant, lorsque vous survolez ces colonnes, vous remarquerez que nous avons des paramètres supplémentaires qui nous aideront à éviter cliquer avec le bouton droit de la souris pour agir. Ainsi, au lieu de cliquer avec le bouton droit de la souris, de cliquer avec le bouton droit sur la base pour dupliquer , vous pouvez simplement survoler ces éléments et cliquer là. Et maintenant, nous avons dupliqué cela. Maintenant, nous pouvons faire glisser ça à l'intérieur. Et nous avons une rubrique. Nous devons maintenant séparer ces deux sections. Alors tout d'abord, laissez-moi cliquer dessus, passer à l'intérieur avancé, casser ce lien, puis lui donner une marge en haut. Maintenant, nous avons cet espacement là. Très bien, donc en sélectionnant ce titre, en sélectionnant ce titre, nous allons le remplacer par les couvertures de ce livre. Donnez-moi ces trois points. Bien sûr, n'hésitez pas à écrire ce que vous voulez ici. Et bien sûr, laissons-le à H2 car c'est un H2. Ensuite, continuons, cliquez sur cette icône Eléments, puis faites glisser une phrase juste là. Et bien qu'il soit encore sélectionné, passons à l'intérieur du style et alignons le centre. Il peut maintenant s' d'une brève description de cette section. La section contient donc couverture dans le livre et ce genre de choses. Permettez-moi de supprimer certains de ces textes. Alors allez-y et tapez ce que vous voulez là-dedans. Maintenant, remarquez qu'il y a trop d'espace entre les deux et nous avons besoin qu'ils soient plus proches les uns des autres. Donc, bien que cela soit encore sélectionné, vous pouvez passer à l'intérieur avancé, casser le lien de marge là, puis nous réduisons la marge supérieure, les rassemblant comme ça. Et juste en dessous d'eux, mettons à jour cela. D'abord. Prévisualisons les modifications. C'est vrai ? Je trouve ça cool. Mais en revenant à notre échantillon, c'est plus gros et de couleur orange. Alors, allons-y. Que nous ayons la liberté de le personnaliser autant que nous le voulons. Alors qu'il est encore sélectionné, je vais passer à la typographie de style. Donnons un poids de 600. Et augmentons la taille en faisant glisser ça. Peut-être jusqu'à 45 ans. Passons ensuite à l'intérieur des textes, couleur 1524. C'est la couleur que j'ai choisie. Et juste en dessous du titre et de la description, nous avons ces trois colonnes. Apportons donc les trois colonnes. Cliquez ici sur l' icône de cet élément. Nous devons traîner dans une intersection. Je vais donc le faire glisser et le déposer dès que la ligne bleue apparaît. Et maintenant, nous avons deux colonnes par défaut. Donc, ce que nous devons faire, c'est cliquer plus juste là. Ensuite, nous avons besoin de l'icône Type. Et nous avons besoin d'une boîte à icônes. Glissons-le et déposons-le là pour voir à quoi il ressemble. Vous remarquerez donc qu' il s'agit d'une boîte comportant une icône, un en-tête et une description. Personnalisons-le maintenant pour qu'il ressemble à ça. Tout d'abord, copions la gestion du temps. Et passons au titre et à la description. Collons la gestion du temps là-dedans, puis voici la brève description de ce sujet particulier. Et modifions l'icône. Ici. Je vais taper clock pour indiquer la gestion du temps, qui est le sujet de cette section, c' est de quoi il s'agit de cette minuscule section. Ensuite, modifions bien sûr les styles de cette boîte d'icônes. Alors, bien qu'il soit encore sélectionné, passons à l'intérieur du style. Si je regarde, si je réduit l'icône, vous remarquerez que nous avons deux panneaux, une icône dans le contenu. Donc, pour la couleur primaire de l'icône, nous voulons qu'elle soit cette couleur. Huit vingt-quatre. Vous pouvez changer la couleur en survol, peut-être disons un triple 40. Donc, en survol, il change à cette couleur. Ensuite, réduisons l'icône. Et passons à l'intérieur du contenu. Bien sûr, nous avons les différents textes ou options de typographie que nous avons déjà vus auparavant. Nous pouvons changer la couleur par le triple 40. Ensuite, nous pouvons passer à l'intérieur de la topographie et changer la famille de polices en Montserrat. Et bien sûr, nous pouvons augmenter le mode de police à 800. Et c'est tout. Donc, ce que nous devons faire ensuite, c'est au lieu de répéter la même chose ici, continuons et dupliquons cela en survolant cette colonne, puis en cliquant dessus pour la dupliquer. Dupliquez-le encore une fois, puis supprimons cela. Nous avons maintenant trois colonnes. Ensuite, dupliquons cette intersection en cliquant sur cette icône d' intersection en double. Et là, nous l'avons. Nous allons donc mettre à jour cela. Et prévisualisons les modifications. C'est vrai, génial. La seule chose que nous devons maintenant faire est de copier ces titres. Je vais cliquer sur celui-ci. Collez ça là-dedans. Retournez ici. Copiez ce leadership Gagnant un style de vie. Cliquons donc là. Et maintenant, veillons à ce que les icônes soient pertinentes pour les sujets qu'elles représentent. Une communication si efficace que nous pourrions peut-être chercher un microphone. Je vais l'insérer pour la direction. Ensuite, pour le style de vie gagnant, Allons de l'avant et sélectionnons de l'argent. Insérez ça. Mise à jour ici. Passons en revue les changements. Maintenant, faites défiler vers le bas. Nous l'avons là, ce livre couvre, puis nous avons ce qu'il couvre. Mais maintenant, remarquez que nous avons un fond grisâtre juste derrière cette section. Concluons donc cette leçon en examinant comment le faire. Bien sûr, cette couleur se trouve juste derrière toute la section. Et nous avons également ce bouton ici. Je vais donc sélectionner la section entière, la section à colonne unique qui contient cet en-tête, la description et les intersections. Alors, sélectionnez-le. Passons au style, à l' arrière-plan, à la couleur. Faites-le glisser jusqu' à un point. Je pense que j'aime cette couleur. Notez maintenant que nous n'avons pas de rembourrage en haut et en bas. Allez-y et cliquez sur Avancé. Cassez ce lien juste là, puis rembourrage supérieur 50 et rembourrage inférieur 50. Nous avons maintenant cet espacement. Donc, pour ajouter ce bouton que vous venez voir sur notre image de référence. Nous allons dupliquer cela et faites-le glisser. Laissons-le là. Maintenant, vous remarquerez que c'est sur le côté gauche. Alors, tout en étant encore sous le contenu, alignons-le au centre. Et ajoutons une marge en haut du bouton. Donc, pendant que le bouton est toujours sélectionné, bouton Modifier, avancé, marge, haut. Donnons-lui 50. Mettez à jour cela. Et maintenant, vous remarquerez que cette ombre portée ou cette ombre de boîte est trop sombre sur le fond blanc. Juste ici. Il a l'air bien à cause du fond coloré, mais parce qu'il déteste sur fond blanc, faut réduire l'obscurité. Alors, bien qu'il soit encore sélectionné, passons à l'intérieur du style. Ombre de boîte. Cliquez ici sur cette icône de couleur. Et réduisons la richesse ou l'opacité de l'ombre boisée. Et puis mettez-le à jour. Prévisualisons les modifications. Et là, nous l'avons. Jusqu'à présent, j'aime bien ce que nous avons. Suivant. Voyons comment ajouter cette section vidéo. Lorsque quelqu'un clique pour regarder une brève histoire sur l'e-book, il s'agit peut-être d'une histoire sur l'auteur ou le pilote. Lorsque vous cliquez sur Lay, il y a cette superposition et elle affiche une vidéo que vous pouvez regarder sans distractions. Voyons donc comment le faire dans la prochaine leçon. Je vous verrai bientôt. 7. Section vidéo: Bienvenue de retour. Jusqu'à présent, nous avons créé notre section héros, notre section partenaires et la section Thèmes, qui a un appel à l'action. Ensuite, nous voulons savoir comment créer ce bref historique sur la section e-book, c' est-à-dire une vidéo. Alors, dans notre éditeur, la prochaine chose que nous devons faire est d'ajouter une nouvelle section. Et cette section doit être nouveau une section pleine largeur. Et bien sûr, nous devons ajouter un peu d'espacement entre elle et la section précédente. Donc, cliquer sur la section elle-même coïncide avancé, rompre ce lien. Marge de 5050 pixels en haut. Et vous pouvez le dire, car ici, il s'agit de pixels, vous pouvez changer cela en pourcentage EMS de RAM. Mettons-le à jour. Cliquez ensuite sur le signe Plus ici pour afficher la vidéo. Et avant d'ajouter l'élément vidéo, nous devons bien sûr ajouter ce titre ici. Laissez-moi juste copier ça. Va à l'intérieur ici. Et nous pouvons simplement aller de l'avant et dupliquer cela. Nos partenaires font double emploi. Et ensuite, faisons-le glisser. Laissez-moi aller au fond. Faites défiler la molette de votre souris pendant que vous le tenez toujours. Et laissons-le là-dedans. Et bien qu'il soit encore sélectionné, allons ici et laissez-moi coller ça là-dedans. Bien sûr, vous ne goûtez rien parce que vous n' avez pas cette page de référence. Très bien, maintenant que nous l'avons là, cliquons à nouveau sur l'icône Elements. Et glissons un élément vidéo là-dedans. Laissons-le là immédiatement, nous le faisons. Notez que nous avons les paramètres de montage vidéo. C'est ici que vous placez le lien de votre vidéo sur YouTube. Vous devrez donc disposer d'une chaîne YouTube, puis télécharger votre vidéo sur votre chaîne, puis saisir le lien fourni par YouTube et la déposer ici. Bien sûr, vous avez différents endroits où vous pouvez récupérer la vidéo. ne faut pas nécessairement être YouTube, mais je préfère YouTube car c'est le site vidéo le plus populaire au monde. La prochaine chose que nous devons faire , c'est bien sûr d' évoquer cette superposition. Lorsque quelqu'un clique sur Lecture, nous voulons qu'il ait cette superposition sombre. Ils ne regardent donc que la vidéo, rien d'autre ne les distrayant. Revenons donc ici. Avant de le faire, examinons certains des paramètres que examinons certains des nous avons ici pour que vous puissiez le configurer pour qu'il soit lu automatiquement lorsque la page se charge. Il commence simplement à jouer automatiquement, mais ce n'est pas ce que nous voulons. Laissez-moi juste arrêter ça. Nous pouvons le couper pour que chaque fois que la page est chargée, elle soit muette, même si elle est en cours de lecture. Ensuite, nous pouvons également le faire en boucle pour que chaque fois qu'il atteigne la fin, il redémarre automatiquement sans aucune intervention de l'utilisateur. Et nous avons tous ces autres paramètres différents. Vous pouvez aller de l'avant et jouer avec eux pour voir lequel vous aimez. Ensuite, si nous réduisons cette vidéo et que nous passons à l'intérieur de la superposition d'image, nous pouvons activer la superposition d'image, ce qui signifie que je ferme cela. Maintenant, avec cette option désactivée, elle affichera la vignette que vous avez sur YouTube. Cette vidéo est disponible sur YouTube. Et quoi que ce soit sur YouTube, c'est exactement comme ça qu'il apparaîtra ici. Mais si nous venons ici et que nous disons activer la superposition d'image, nous pouvons sélectionner une image qui sera la vignette de notre vidéo. Donc, parce qu'ils n'ont pas cette image ici, je vais la télécharger. Je l'ai créé et vous le trouverez dans le dossier des ressources que j'ai fourni. Allons donc à l'intérieur des actifs. Livre électronique, image de superposition vidéo. Je vais donc double-cliquer dessus. Et je vais insérer des médias. Et maintenant, nous avons cette image belle et nette qui est présentée et cohérente avec l'image de marque de votre page. Et puis, pour apporter cet effet de cette superposition sombre ici, on appelle cela un effet lightbox. Allons ici et cochons la case à lumière. Nous allons donc mettre à jour cela. Et prévisualisons les modifications. Très bien, alors faisons défiler vers le bas. Et voici notre section vidéo. Donc, si nous cliquons pour jouer, nous avons cet effet Lightbox. C'est ainsi que vous pouvez créer cette section vidéo. Dans la leçon suivante, Voyons comment créer ce compteur ici qui montre quelques statistiques sur le livre électronique, comme le nombre de membres téléchargés, nombre de critiques cinq étoiles qu'il a, et combien de vidéos gratuites accompagnées de l'achat de l'e-book. Alors, on se voit bientôt. 8. Section de compteur de statistiques: Bienvenue de retour. Ensuite, nous voulons voir comment créer cette section de compteurs qui affiche des statistiques sur votre livre électronique. Allons donc à l'intérieur de notre éditeur. Et bien sûr, comme vous l'avez déjà deviné, la prochaine chose que nous devons faire est d'ajouter une section et il doit s'agir d'une section pleine largeur. Alors, continuons et cliquons dessus. Et bien sûr, nous devons créer un certain espacement entre les deux sections. Alors que cela est toujours sélectionné, je vais passer à l'intérieur avancé. Retirez ce lien , puis 50 en haut. Et maintenant, nous avons cet espace agréable. Comme vous le remarquez ici, nous avons cette couleur dégradée que nous avions en haut. C'est donc très facile. Elementor nous permet de copier des effets d'une section vers une autre section ou d'une colonne vers une autre colonne. Donc, si je clique avec le bouton droit de la souris sur cette section, copiez, je peux aller ici. Parce qu'il s'agit également d'une section. Je peux cliquer avec le bouton droit de la souris, puis coller le style. Et il collera le rembourrage que nous mettons en haut et en bas et la couleur de fond. Ou nous aurions pu le faire manuellement, ce qui aurait pris plus de temps. Maintenant que nous avons cela, allons-y et ajoutons une intersection. Cette intersection doit comporter un compteur. Il s'agit donc essentiellement d'un comptoir. Il s'agit ici d'un compteur multiplié par quatre. Cliquez donc sur ce signe plus ici pour faire apparaître les éléments. Et puis, ici, prenons le comptoir. Et c'est là. Faites-le glisser là-dedans. Faites-le glisser là-dedans. Et maintenant, comme vous pouvez le constater, il est compté jusqu'à cent cent. Voici les chiffres finaux. C'est donc le numéro auquel vous voulez qu'il s'arrête. Disons donc qu'il a été téléchargé 17 000 fois. Nous en avons donc 17 et cela va commencer de 0 à 17. Ensuite, le nombre de suffixes est ce qui vient bien sûr après le nombre. Donc 17 mille, plutôt que de taper 17 000, car cela prendrait trop de temps. On va juste taper 17, hein ? Vous pouvez commencer de n'importe où. Nous pouvons également commencer à partir de dix ans. La prochaine chose que nous devons faire est donc de modifier ce texte ici. Téléchargements. Et bien sûr, changeons la couleur en blanc. Donc, en entrant dans le style, blanc, c'est le numéro du titre. Il est également changé en blanc. Changeons la typographie. Montserrat. Je vais donc cliquer sur la famille de polices. J'ai juste adoré les monstres enveloppés. Mettons-le à jour. Et maintenant que nous sommes satisfaits de son apparence, il ne nous reste plus qu'à le dupliquer trois fois. Donc, en surmontant ça, je cliquerai dessus une, deux fois et trois fois. Débarrasse-toi de ça. Mais si vous voulez en ajouter plus, bien sûr, n'hésitez pas à le faire. Je vais donc cliquer à l'intérieur de cette seconde. Et ensuite, je vais changer cela pour qu'avons-nous les membres les plus heureux ? Les critiques des étoiles, freebie. Donc, membres de notre site Web ou d'un club de lecture, disons qu'ils sont trois membres de K. Allons à l'intérieur ici et disons des critiques cinq étoiles. Nous avons environ 13 000 critiques cinq étoiles. Et disons disons lecteurs actifs. Disons que les lecteurs homosexuels Jove ou quelque chose de ce genre. Nous allons donc mettre à jour cela et prévisualisons les modifications. Défilons donc vers le bas et voyons ce que nous avons. On y va. Vous remarquerez donc que nous avons besoin d'espacement entre cette section et cette section. Revenons ici et sélectionnons notre section. Je vais dire cette grande marge, top. Gardons ça à 50 ans. En fait, donnons-lui 100. Mettons-le à jour. Prévisualisons les modifications. Défilement vers le bas. Très bien. Très bien, donc la prochaine chose que nous allons faire est travailler sur une brève histoire sur l'auteur. Comme vous pouvez le voir sur notre page de référence, nous avons ici une image de l'auteur et une brève histoire ou une description, ainsi que la signature de l'auteur avec quelques poignées de médias sociaux. Voyons donc comment créer cette section dans notre prochaine leçon. Je vous verrai bientôt. 9. À propos de la section Auteur: Jusqu'à présent, nous avons créé toutes ces sections jusqu'à la zone des statistiques. La prochaine chose que nous voulons faire est de créer la biographie de l'auteur. revenant à l'intérieur de notre éditeur, comme vous l'avez déjà deviné, nous devons ajouter une section, mais cette fois, nous ajoutons une section à double colonne car cette colonne l'image et contient le contenu du texte et les icônes. Bien sûr, tout d'abord, ajoutons une marge en haut, en sélectionnant la section, en passant à l'intérieur avancé, cassant le lien. 50, marge supérieure. Cliquez ensuite sur ce signe plus ici pour ajouter un élément d'image. Déposez-le là-dedans et cliquez dessus. Nous n'avons pas l'image de l' auteur ici. J'adore donc charger à partir de notre dossier de ressources. Donc livre, image d'auteur. Alors ouvrons ça. Et insérons des médias. là que nous l'avons. La prochaine chose que nous voulons faire est, bien sûr, d'ajouter le titre. Rubrique, qui est l'auteur. Je vais donc y aller et copier ça. Et ici, je veux aller de l'avant et dire : faites glisser un cap ici. Mais au lieu de le faire, pourquoi ne pas simplement dupliquer cela ? Puis faites-le glisser jusqu'au bas. Maintenant, quand tu essaies de faire glisser, laisse-moi juste annuler ça. Lorsque vous essayez de faire glisser ces éléments et qu'ils arrivent à la fin ici et qu'ils ne descendent plus pendant que vous le tenez toujours. Pendant que vous appuyez toujours sur le bouton de votre souris. Faites défiler avec la molette centrale de la souris. Puis relâchez le bouton de la souris lorsque vous arrivez au point que vous voulez laisser tomber. Très bien, maintenant que nous l'avons là, je vais cliquer là-dedans. Bien qu'il soit encore sélectionné. Laissez-moi copier ça. Sélectionnez-le, puis collez. Alors, qui est l'auteur ? Et maintenant, nous allons l' aligner vers la gauche. Et il s'agit d'un outil de page. Je vais donc laisser ça à ça. Allons ici, typographie. Augmentons la taille jusqu'à ce point. Maintenant, nous pouvons également revenir ici et dupliquer cette police. Et j'ai remarqué que nous avons oublié de changer ces descriptions pour Montserrat, alors permettez-moi de sélectionner ce contenu. Allons dans le style du contenu ici. Topographie. Sachez que c'est le titre. Nous voulons la description. Je voulais changer cela pour Montserrat uniquement par uniformité. Et maintenant, on dirait Montserrat, donc je vais juste copier ça. Ensuite. Collez le style là-dedans. Collez le style là-dedans. Cliquez avec le bouton droit de la souris sur style de collage, cliquez avec le droit de la souris sur style de collage, faites un clic droit Très bien, il devrait donc s' agir également de typographie de type Montserrat. Montserrat ou uniformité. Ici. Au lieu de dupliquer n'importe lequel de ces textes, ajoutons simplement un nouvel élément d'éditeur de texte. Et allons directement à l'intérieur typographie de style, mois en Irak. Dans le contenu, vous pouvez désormais écrire la description souhaitée. Je vais simplement le copier et le dupliquer quelques fois. Et nous avons notre description ou notre biographie de l'auteur. Mieux vouloir faire, c'est ajouter leur signature. Juste pour rendre la page un peu plus intéressante. Il ne sert vraiment aucun autre but à part le simple fait de le rendre intéressant. Cliquons donc sur cette icône pour faire apparaître les icônes, faire apparaître les éléments. Ensuite, faisons glisser un élément d'image ici. Et bien sûr, vous remarquerez que cet espace réservé aux images est grand. Nous allons choisir l'image. Nous allons télécharger des fichiers pour obtenir la signature. Et vous remarquerez que l'image de signature est de 100 x 40 pixels. Cela signifie qu'il s'agit d'une image minuscule, alors assurez-vous que votre image de signature est minuscule. Un 100 par 40 ans, c'est sympa. Ne faites pas 500 pixels car il sera grand. Nous allons donc insérer des médias, et nous l'avons là. Et par défaut, c'est au milieu. Nous allons donc le pousser vers la gauche. Et la prochaine chose que nous devons faire est ajouter notre icône de médias sociaux. Donc, en sélectionnant les éléments là. Alors social. Glissons les icônes sociales juste là, par défaut au milieu. Mettons-les à gauche aussi. Et ajoutons une certaine marge entre eux et la signature. Alors, bien qu'il soit encore sélectionné, passons à l'étape avancée. Brisez ce lien. Peut-être 30 ans. Oui, je pense que ça me plaît. Bonjour, sachez comment on a eu ça ici. Permettez-moi de le retirer de là. Et nous allons le mettre à jour. Prévisualisons les modifications. Génial. Nous avons donc l' acheteur de notre auteur. C'est joli. J'espère que vous avez également pu le créer. Dans la leçon suivante, Voyons comment créer cette section d' appel à l'action. Parce qu'à ce moment-là, la personne est vraiment intéressée par le téléchargement de l'e-book. Et remarquez que nous avons des boutons de téléchargement gratuit sur cette page car une page de destination doit comporter des sections d'appel à l'action. sections qui leur rappellent d'agir. Parce que l'objectif d'une page de destination est de convertir des personnes en acheteurs ou de les télécharger au fur et à mesure qu'ils regardaient la vidéo. Regardez les statistiques et lisez le sujet de l'auteur. Ensuite, nous voulons qu'ils prennent une action, alors nous y concluons un autre bouton. Voyons donc comment créer cette section. Au cours de la prochaine leçon. 10. 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. 11. Section CTA: Bienvenue de retour. Bien sûr, nous avons fini de créer la section Auteurs. La création de cette section est assez simple et simple. En fait, je pense que vous savez déjà ce que nous devons faire pour le créer. Allons de l'avant et faisons cela sans perdre plus de temps. En revenant à l'intérieur de notre éditeur, nous pouvons générer une nouvelle section à partir de zéro, ou nous pouvons continuer et dupliquer cela. Puis faites-le glisser juste en dessous. Et maintenant, il y a tout, et maintenant il y a la plupart des éléments dont nous avons besoin. Débarrassez-vous de ces sections. En fait, débarrassons-nous entièrement de la section intérieure. Et maintenant, il nous reste notre seule colonne d'origine. Ce que nous devons donc faire, c'est que nous pouvons dupliquer cela. Elementor est créé pour vous faciliter la vie, plutôt que de recréer les mêmes styles similaires chaque fois que nous pouvons simplement le dupliquer. Mettons cela au centre pendant qu'il est encore sélectionné, modifions le titre, il est poussé au centre. Qu'est-ce que ça dit maintenant ? Ce livre va changer. Nous allons donc copier ça. Tandis que cette option est sélectionnée, je clique dessus, je le colle. Et puis passons à l'intérieur de la couleur du texte de style. Nous en avons besoin de blanc. Et puis nous avons ce Lorem Ipsum. Nous n'avons pas besoin de copier cela parce que nous pouvons simplement l' obtenir à partir d'ici. Permettez-moi de dupliquer cela. Et puis nous allons faire glisser ça là-dedans. Bien sûr, débarrassons-nous de 90 % de cela. Maintenant, il nous reste avec ça. Allons à l'intérieur du style et mettons-le au milieu. Maintenant, c'est au centre. Changeons la couleur en blanc. Passons ensuite à l'intérieur de la topographie. Et augmentons un peu la taille. Faites en sorte que cela ressemble à une description. Et puis, bien sûr, nous avons besoin de ce bouton. Allons donc ici et dupliquons cela, dessus , puis cliquez sur cette icône en double. Alors, nous allons faire glisser ça. Quand nous arriverons ici. Utilisez la molette de la souris pour faire défiler vers le bas. Déposons-le là dès que la ligne bleue apparaît. Maintenant, vous remarquerez que nous avons trop d'espacement ici. Réduisons donc cet espacement. Tout d'abord, il y avait un peu de rembourrage en haut. Comme vous pouvez le voir à partir de son plan d'éditeur. Passons à Avancé tant qu' il est toujours sélectionné. Enlevons ça. Nous allons ensuite sélectionner ce texte. Allez à l'intérieur de la marge avancée, en bas. Réduisons la marge inférieure. Je pense que je l'aime bien là-bas. Mettons-le à jour. Nous allons donc prévisualiser les modifications. Et c'est là que nous l'avons. Notre appel à l'action est prêt. La prochaine partie que nous voulons créer est zone d'inscription de cet utilisateur, car toute page de destination doit avoir un formulaire d'inscription ou un formulaire qui capture les données des clients. Et vous devez leur donner quelque chose pour qu'ils puissent vous donner leurs contacts, leurs e-mails. Ils obtiennent donc les trois premiers chapitres de l'e-book en s'inscrivant à votre liste de diffusion. Voyons donc comment les créer dans la leçon suivante. Je vous verrai bientôt. 12. Section d'inscription: Bienvenue de retour. Il est donc temps de créer ce formulaire d'inscription. Et nous allons le faire en installant un plugin appelé terminators. Donc, sans perdre de temps, sautons à l'intérieur de notre tableau de bord. Passons donc à Plugins, Add New. Et ici, je veux taper pour moi plus tard. Nous y passons par WPA Mu Dell dispose actuellement de 300 000 installations actives. Donc, Eileen, solide. Laissez-moi aller de l'avant et l'activer. avons donc pour les dominateurs. Donc, en allant au menu de gauche ici, c'est presque en bas. Je vais formuler leur surpoids. Fait. Laissez-moi simplement cliquer. formulateur sera redirigé vers le tableau de bord des plugins dans WordPress. Comme vous pouvez le constater, nous sommes sous-formulés maintenant. Dashboard et nous avons d'autres domaines que nous pouvons visiter, mais pour l'instant, nous sommes simplement intéressés par la création d'un formulaire. Je vais donc aller de l'avant et comme vous pouvez le voir ici, nous avons des formulaires. Créez un formulaire. Nous avons des messages. Vous pouvez créer un sondage, mais vous n'entrerez pas dans les détails là-dessus. Vous pouvez aller de l'avant et le consulter sur YouTube. Apprenez-en plus sur la raison pour moi du plug-in de formulaire le plus génial, les baies. Mais c'est juste mon avis. Créons donc un formulaire et nous présenterons ces modèles prédéfinis. Et ce dont nous avons besoin, c'est l' inscription à la newsletter que nous pouvons créer à partir d'une ardoise vierge. Allons-y avec le noir. Juste pour que nous puissions créer ce dont nous avons besoin à partir de zéro. Donnons-lui un nom. Formulaire d'inscription. Très bien, donc nous y voilà. Très bien, donc nous y voilà. Il suffit d' insérer le champ dont nous avons besoin. Et le champ dont nous avons besoin est le champ e-mail. Par conséquent, ici, je veux simplement cliquer sur Insérer un champ et sélectionner le champ e-mail. Nous avons beaucoup d'autres champs différents que vous pouvez insérer dans votre formulaire, mais ils ne nous intéressent pas pour le moment. Nous allons donc insérer un champ. Et puis, oui, laissons-le simplement comme adresse e-mail. Ou disons votre e-mail, votre e-mail. Enlevons une robe. Et puis laissons l'espace réservé en tant que John Doe. Appliquez cela. Si nous le prévisualisons. Votre adresse e-mail et l'espace réservé sont EG John, John chez Dot.com. Fermons donc ça et publions ça. Une fois que vous l'avez publié, nous obtenons le code court que nous pouvons coller en frontal. Laissez-moi donc copier ça. Et comme vous pouvez le voir, il a été copié avec succès, aura besoin de ce code court, le front end. Revenons donc au front end. Nous y voilà. Juste en dessous. Notre appel à l'action est l'endroit où nous ajoutons une nouvelle section. Et c'est une section à double colonne. Et nous devons ajouter une marge supérieure. Donc, en sélectionnant cette pause avancée que 15 est confrontée ici. Alors ici, cliquons sur ce signe plus et saisissons un code court, ou simplement court. Et cela apparaîtra. Faites glisser le code court dans cette colonne. Et maintenant, une fois que nous le déposons, il sera présenté avec ces modifications de paramètres de code court. Ensuite, nous pouvons y coller notre code court. C'est un code court que nous avons obtenu d'ici, ce code court au cas où vous auriez quitté cette partie. Vous pouvez également l'obtenir ici à partir de cette roue dentée. Copiez le code court et vous l'avez copié à nouveau. Alors déposez-le là-dedans, puis appliquez-le. Prévisualisons les modifications. Faisons défiler jusqu'au bas. Et c'est là que nous l'avons. Notre formulaire est prêt. Mais maintenant, revenons ici et ajoutons ce texte. Obtenez gratuitement les trois premiers chapitres. Laissez-moi donc copier ça. Ce que nous devons faire, c'est simplement dupliquer cela ou laisser le dupliquer à la place parce qu' il a déjà la couleur dont nous avons besoin. Faites-le glisser jusqu'au bas. Allons-le là-dedans. Bien qu'il soit encore sélectionné. Je vais coller le bon texte là-dedans, obtenir les trois premiers chapitres gratuits. Très bien, mettons à jour cela et prévisualisons les modifications. C'est vrai ? Mais maintenant, ce n'est pas équilibré. Tirons donc un peu ça vers la gauche pour que ces derniers sautent à la ligne suivante pour le rendre plus équilibré. Donc, comme ça. Mettez à jour cela. Et rappelez-vous que nous devons aussi faire rimer cette couleur avec le reste des couleurs de la marque. Comme ce formulaire est créé avec le formulateur, nous ne pouvons pas le modifier à l'aide d'Elementor. Nous devons revenir à l'intérieur de notre tableau de bord. Retournez dans le tableau de bord. Formulaires Terminator. Et une fois que nous serons à l'intérieur des formulaires, verrons une liste de tous les formulaires que nous possédons. C'est le formulaire que nous créons. Nous venons de créer un formulaire d'inscription. Modifions le formulaire. Et pendant que nous sommes ici, passons au deuxième panneau ici. Apparence. Et cela nous amènera l'endroit où nous pourrons modifier l'apparence du formulaire. Donc, tout d'abord, nous pouvons nous débarrasser de ces limites en disant en sélectionnant plat. Il y a d'autres options parmi lesquelles vous pouvez choisir, mais j'aime bien plat. Et changeons la couleur du bouton. Nous utilisons donc actuellement les couleurs par défaut des couleurs par défaut livrées avec un plug-in. Mais on peut dire costume. Et cela évoquera toutes les parties du formulaire que nous pouvons changer. La couleur de. Le dernier élément ici est le bouton Soumettre. Ce bouton. Donc, parce qu'il est sélectionné, il s'affiche, c'est un menu déroulant. Cela fait apparaître ces options. Nous pouvons donc sélectionner la couleur d' arrière-plan et la changer en 24. Cela a été supprimé ces doublons, F 1524. Et en survol, nous voulons que le bouton soit triple 40. Et sans concentration. Nous voulons également qu'elle soit de cette couleur. Allons-y, disons la mise à jour. Très bien, passons maintenant au front end et appliquons les modifications que nous venons d'apporter dans le backend. Prévisualisons les modifications une fois de plus. Donc, faites défiler vers le bas. Voici notre bouton sur le survol. Les changements apportés à ce noir qui sont cohérents avec ce noir. Nous pouvons maintenant augmenter l'espacement entre cette colonne et cette colonne en revenant ici. Défilant vers le bas jusqu'à cette section, cette section qui comporte cette colonne et cette colonne. Sélectionnons cette section elle-même à l'intérieur de la mise en page. L'écart des colonnes, disons blanc. Et lisons, augmentons cette largeur ici juste pour que cela soit en deux pressés. Mettons-le à jour. Et prévisualisons les modifications. Au moins, nous avons un bon espacement entre les deux. Maintenant que nous sommes satisfaits de toutes les sections que nous avons créées, il est temps de terminer le cours en rendant la page réactive sur tous les appareils, c'est-à-dire les écrans mobiles, tablettes écrans, et ça a déjà fière allure sur le bureau. Travaillons donc sur les écrans de tablette et de mobile. Je vous verrai dans la prochaine leçon. 13. Réactivité de l'écran de smartphone: Bienvenue de retour. Il est maintenant temps de rendre la page Web réactive sur les différents appareils sur lesquels les utilisateurs naviguent. Et il s'agit d' écrans mobiles et de tablettes. Nous allons donc cliquer sur cette icône du mode réactif juste ici en bas de page. Et immédiatement, cette barre apparaîtra avec différents paramètres pour un design réactif. Je clique donc sur cette icône et je change immédiatement la taille d'un écran mobile. Et nous pouvons aller de l'avant et faire défiler juste pour voir à quoi cela ressemble. On dirait qu'il n'y a pas beaucoup de travail à faire. Au fait, la page Web a presque fière allure. Donc, en partant du haut, le livre est au milieu et il a l'air bien là où il se trouve. Passons donc à la deuxième partie, qui est le H1. Sélection du H1. Allons à l'intérieur de la typographie de style. Réduisons la taille. J'aime bien cette taille. En revenant à l'intérieur du contenu, nous allons l'aligner sur le milieu. Et vous remarquerez que nous avons la marge en haut que nous avions définie sur le bureau. Allons de l'avant et sélectionnons cette colonne. Maintenant, c'est la colonne de modification avancée. Et cassons ce lien pour supprimer les paramètres par défaut que nous avons fournis. Nous avons donc maintenant supprimé les paramètres que nous avons définis en mode bureau. La prochaine chose que vous remarquerez ici est que nous réduisons un peu plus la taille. En entrant dans la typographie. J'aime bien cette taille. Sélectionnez cet éditeur de texte. Va à l'intérieur du style. Aligner, centre. Nous essayons simplement de tout aligner sur le centre. Pour l'équilibre. Sélectionnez le bouton situé à l'intérieur de l'alignement du contenu. Faisons de même pour cet éditeur de texte ici. Aller à l'intérieur de l' alignement du style, centre. Notre section partenaires a déjà l'air sympa. Passons donc à la partie suivante, qui est la section Sujets. Je pense que j'aime bien où il se trouve, mais une chose que nous pouvons faire dans toute cette section est d'augmenter le rembourrage sur la colonne elle-même. Ainsi, espacement entre le bord de l'écran et l'endroit où le contenu commence. Allons-y pendant que cette colonne est sélectionnée, Allons à l'intérieur avancé. N'oubliez pas que cette colonne se trouve à l'intérieur de la section qui était une section pleine largeur. Permettez-moi donc de changer de bureau pendant une seconde. Nous avions une section pleine largeur avec une seule colonne. Donc, ce que nous essayons de faire sur les écrans mobiles, Eve augmente le rembourrage autour de cette colonne. Cela signifie donc le rembourrage, nous appuierons également sur ce bouton vers l'intérieur. Je retourne à l'intérieur de l'écran mobile. Pendant que nous sommes à l'intérieur, nous avons avancé sur cette colonne. Sans rompre ce lien. Donnons 20. Et vous remarquerez maintenant que nous avons un peu d'espacement partout, y compris là où le bouton faisait plus d'espacement ici. Mettons-le à jour. Ça a l'air bien. Je pense que j'aime bien ces zones vidéo, donc je n'y toucherai pas. J'aime que cette partie soit, eh bien, tout est automatiquement centré. Ce que nous voudrions peut-être faire, c'est sélectionner cette colonne, comme nous l'avons fait dans la section rubrique. Sélectionnez la colonne, allez à l'intérieur de l'option Avancé. Gardons un rembourrage de 20 tout autour, c' ça, donc il y a ce rembourrage uniforme partout. Et nous pouvons tout pousser au centre. Je vais donc sélectionner cet ajout sous le centre d' alignement des contenus. Sélectionnez cet éditeur de texte sous le centre d'alignement des styles. Nous allons sélectionner cette image. Eléments. Centre d'alignement. Le centre des icônes des médias sociaux. L'image est bien placée, donc nous n'avons pas besoin d'y toucher. Et au fait, une caractéristique intéressante d'Elementor est qu'elle vous permet d'inverser les colonnes dans une section. Donc, si nous voulions que cette image passe avant les textes, nous pouvons aller à l'intérieur avancé. Tout d'abord, nous pouvons sélectionner la section que nous voulons affecter, qui est une section à double colonne qui contient ce bloc de texte et l'image passe dans Advanced Responsive. Et nous pouvons inverser les colonnes sur l'écran mobile. L'image a donc été poussée vers le haut et le bloc de texte a été poussé vers le bas. Mais en revenant à l'écran, dans la version de bureau, l'image est toujours à droite, retournant ici. Donc, si vous ne le voulez pas, vous pouvez toujours le décocher. Réduisons ensuite cette taille de titre. Alors, en sélectionnant cette typographie de style, faites-le glisser jusqu'à ce que nous soyons satisfaits de la taille. Je pense que ça me plait à ce moment-là. Tout le reste est centré et a l'air bien. Réduisons surtout la taille. Réduisons ça comme cette taille. Tout d'abord, réduisons la taille des auteurs qui ajoutent. Je vais donc sélectionner cette rubrique. Typographie de style. C'est 39 ans. Faisons un 40. Et en descendant jusqu' à cet appel à l' action à partir de la section, sélectionnez le titre, entrez dans la typographie de style. Nous allons taper 40 ici. Comme cette taille. En revenant à l'intérieur du contenu, poussons-le au centre. Et notre forme est intacte. Nous pouvons maintenant utiliser ces paramètres de conception réactifs pour appuyer sur ce bouton vers le centre, comme nous l'avons fait avec le reste des boutons. Parce que rappelez-vous que ce formulaire est créé avec le formulateur. Et pour appuyer sur ce bouton au centre, nous aurions besoin d' utiliser du code CSS. Nous n'allons donc pas entrer là-dedans. Et je rose le formulaire est juste beau comme il est. Mais si vous voulez en savoir plus sur la façon appuyer sur ce bouton vers le centre à l'aide de CSS. Vous pouvez aller de l'avant et rechercher un tutoriel sur YouTube ou tout autre sur YouTube ou simplement sur Google. Recherchez la personnalisation CSS du nominateur. C'est ça. Sur les écrans mobiles. La page Web est géniale. Allons à l'intérieur. Très bien, mettons à jour cela d'abord avant passer en mode tablette. Et prévisualisons les modifications. Bien sûr, il s' ouvrira en mode tablette. Mais je veux vous montrer comment imiter un écran mobile et voir à quoi il ressemblera. Donc, sur le clavier de votre ordinateur, appuyez sur Control Shift I ou Command Shift I. Cela ouvrira les outils Google Developer Tools et basculer la barre d'outils de l'appareil. Lorsque vous cliquez dessus. Quand il est actif, il est de couleur bleue. Et ici, nous avons un menu déroulant ou les différents écrans mobiles que vous pouvez imiter pour voir à quoi ressemblera la page Web. Donc, actuellement, nous le voyons sous forme de pixel cinq, transmis comme un, vous pouvez le faire en tant qu'iPhone 12s pro. Et c'est à quoi ça ressemblera sur les iPhones. Très bien, donc j' aime bien ce que ça ressemble. Revenons en arrière et travaillons sur le mode tablette. 14. Réactivité de l'écran de tablette: Pour revenir ici, je veux cliquer sur l'icône de la tablette. Et immédiatement, il passe en mode tablette. Faisons défiler jusqu'au sommet. Par défaut, elementor présente ce bogue connu où lorsque vous passez en mode tablette, vous devez agrandir un peu cet écran. Si vous appliquez des paramètres en mode tablette sans redimensionner un peu l'écran, vous ne verrez pas les modifications et laissez-moi vous le prouver. Donc, maintenant, cette colonne, jusqu'à ce point. Donc, si je sélectionne la colonne et que je vais dans la colonne et que je lui donne un blé à 100 % pour courir de gauche à droite et que je clique sur Entrée et rien ne se passe. Mais quand nous le tirons un peu, remarquez maintenant qu'il montre ce que nous venons de faire. Et c'est de ça que je parle. Nous voulons voir les paramètres de réglage. ce moment, la colonne en vrac occupe 100  % de l'écran. Mais lorsque nous passons en mode bureau, il occupe toujours 50 % de l'écran. Et cette autre partie occupe 50  % de l'écran. En revenant au mode tablette, nous voulons en faire un mode tablette 100% large. Comme nous l'avons fait avec le livre. Encore une fois, élargissons-nous un peu. vrai, donc c'est 100 %. Donc, en sélectionnant cette colonne ici et en allant à l'intérieur de la disposition, la largeur de colonne est 100%. Maintenant, c'est 100 %. Je veux briser la marge que nous avions définie un moment sur le bureau ici. Et bien sûr, bien que ce soit encore sélectionné, passons à l'intérieur avancé et supprimons cela. Maintenant, nous l'avons réinitialisé. Sélection de ce titre. Entrez dans la typographie de style. Réduisons un peu la taille. Et passons à l'intérieur du contenu et poussons-le au centre. Nous allons sélectionner cette description. Tout en étant sous style, pousse vers le centre. Repoussons tout au centre. Repoussons tout au centre. Sélectionnez-le. Ça pousse le centre. J'aime bien ça. Style. Centre. Les appartements ont l'air bien. Ça a l'air bien. Nous pouvons également lui donner cette marge de 20. Sous avancé. Ça a l'air bien. Ces colonnes ont besoin d'un peu de rembourrage autour des bords. Donc, en sélectionnant ces colonnes, rembourrage avancé. Maintenant, nous avons un beau rembourrage. Image. Ça a l'air bien. Réduisons la taille de cette rubrique. Typographie de style. Enfin, réduisons la taille du rembourrage ici. Le rose, je l'aime bien à cet endroit. Mettons-le à jour. Et prévisualisons les modifications. Très bien, donc sur cet écran, allons dans ce menu déroulant et sélectionnez l'iPad. Et nous pouvons basculer entre le paysage et le portrait. Cliquez donc sur cette icône pour la faire pivoter. C'est comme ça que ça ressemble. Sur le paysage de la tablette. Et sur un portrait sur tablette. C'est comme ça que ça ressemble. Pour agrandir l'écran et le faire remplir la page. Vous pouvez simplement en faire 100 pour cent comme ça. Et c'est comme ça qu'il ressemble d' une distance rapprochée . Maintenant, notre page de destination est réactive sur tous les écrans. Parce que maintenant, si on passe à l'iPhone, il a l'air bien. Sur tablette. Il a l'air présentable. Allons voir Surface Duo. Et sur le bureau, ça a l'air génial. Permettez-moi donc de fermer cela et de faire défiler vers le bas. Fondamentalement, c'est comment le faire. Et cela marque la fin de notre cours. J'espère que vous avez appris beaucoup de choses si vous êtes tout nouveau dans Elementor. Et même si vous savez déjà comment utiliser Elementor et vous le regardiez comme un rafraîchissement. J'espère que vous avez pu apprendre une ou deux choses. Bien sûr, nous n'avons pas couvert tout ce qu' il y a à couvrir sur Elementor. Ce sera impossible dans une classe. Mais nous avons couvert ce dont nous avions besoin pour cette page de destination spécifique. Donc, au cas où vous voudriez en savoir plus sur l'utilisation d'Elementor, par exemple, la création de la barre de navigation, la création d' un dossier et la modification des détails de la photo. Vous pouvez aller de l'avant et regarder n'importe de mes autres cours Skillshare où je vais en profondeur et vous apprendre à concevoir des sites Web entièrement fonctionnels. Mais pour l'instant, je pense que nous avons couvert tout ce que j'avais l' intention de vous apprendre sur la façon de créer une belle page de destination de livre électronique à l'aide d'Elementor. 15. Conclusion: Très bien, donc ça marque la fin de cette classe. J'espère que vous l'avez trouvé précieux et surtout, j'espère que vous créez réellement votre propre page de destination. Si vous débutez chez Elementor, je vous encourage à consulter tous mes autres cours en accédant à mon profil. Et vous y trouverez plusieurs cours où je vous apprends à concevoir des sites Web entièrement fonctionnels ou des pages de destination impressionnantes. Et si vous avez aimé ce cours, n' oubliez pas de laisser un avis. Cela contribuera grandement à rendre cette classe plus accessible. Ici, sur Skillshare. Plus que des critiques. Plus la classe reçoit d'avis, plus elle devient découvrable. Et comme toujours, je m' appelle Ken Visa. Jusqu'à la prochaine fois, restez créatif. On se voit la prochaine fois.