Construire une page d'atterrissage en ligne avec Elementor - nouveau cours an pour débutants

1. INTRO DU COURS: C'est vrai. Joignez-vous à moi maintenant. m'appelle Ken et j'utilise Elementor depuis cinq ans. J'ai découvert Elementor en 2019 lorsque j'avais besoin d'un site Web pour mon activité en ligne. J'ai eu une idée commerciale en ligne, mais je ne savais pas comment créer un site Web. Avant cela, je n'avais jamais créé de site Web auparavant. Mais quand j'ai découvert qu'il y avait un générateur de glisser-déposer gratuit appelé Elementor. Cela a changé la donne pour moi. Une longue histoire courte. J'ai finalement créé le site Web en regardant des tutoriels élémentaires en ligne. Et depuis lors, ce qui a commencé par être un besoin d'économiser de l'argent en étant capable de créer mes propres sites Web est devenu une compétence génératrice de revenus pour moi. Je ne crée plus seulement un site Web pour moi-même avec les compétences que j'ai acquises, mais aussi pour d'autres personnes. Jusqu'à présent, j'ai créé des dizaines de sites Web pour plusieurs clients. Et je fais cela en tant que concert indépendant et après avoir affiné mes compétences avec chaque nouveau projet au fil des ans, j'ai aujourd'hui conçu et vendu modèles élémentaires sur un marché numérique appelé Creative Market. Vous en avez probablement entendu parler pendant ce cours. Je veux vous aider à comprendre comment créer de belles pages Web à partir de zéro à l'aide d'Elementor. Elementor est gratuit et je crois qu'il y a beaucoup de gens comme vous qui aimeraient apprendre à l'utiliser comme un pro. Ainsi, en apprenant Elementor, vous aurez désormais une compétence capable gagner de nouveaux revenus de plusieurs façons. Par exemple, vous pouvez concevoir et vendre des modèles élémentaires, marchés en ligne tels que Creative Market, Envato Marketplace, ou même créer votre propre site Web via lequel vous pouvez vendre élément de modèles. Vous pouvez concevoir des sites Web pour clients et être rémunéré pour votre travail. Si vous aimez enseigner de tels concepts, vous pouvez commencer à enseigner l'élémentaire. Tout comme moi, je peux gagner un revenu passif grâce à vos cours en ligne. Et vous pouvez faire autant de nouvelles entreprises en ligne que vous le souhaitez sans les limites imposées par le manque d'argent pour payer un concepteur Web chaque fois que vous avez une nouvelle idée pour une entreprise en ligne. J'ai conçu ce cours pour les débutants complets. Donc, si vous n'avez jamais utilisé l' élémentaire auparavant, vous trouverez les leçons de cette classe très faciles à suivre et à comprendre. Nous commençons dès le début. Voici comment installer Elementor. Jusqu'à la fin, nous aurons construit une page Web complète pouvant être utilisée cadre d'un site Web entièrement fonctionnel. À la fin de ce cours, vous aurez non seulement une page Web entièrement fonctionnelle construite avec Elementor à partir de zéro, vous aurez également acquis les compétences nécessaires pour construire les futures pages Web et pages de destination et même des sites Web à l'avenir. Alors rejoignez-moi maintenant dans la classe et réunions-nous à la première leçon. 2. Pour commencer: Alors, encore une fois, bienvenue. Maintenant, alors que nous nous préparons à commencer, je veux juste que nous ayons un aperçu rapide de la page de destination une fois un aperçu rapide de la page de destination une fois de plus pour voir les différentes parties que nous allons créer, puis nous allons commencer. Ainsi, tout en haut, nous avons l'en-tête, qui contient le logo et la barre de navigation. Ensuite, nous avons la section héros qui a généralement une belle image représentant ce qu'est la page. Et comme vous pouvez le voir, cette dame a suivi un cours en ligne, puis nous avons un H1 qui résume ce qu'est la page. Et chaque page de destination ne doit comporter qu'un seul élément. Nous avons H1 jusqu'à H6, qui sont différents niveaux de titres. Comme je l'ai dit, chaque page de destination doit avoir un élément H1, mais elle peut comporter plusieurs éléments H2, plusieurs éléments h3, plusieurs éléments h4, et plus encore. Et vous verrez que nous aurons plusieurs éléments H deux, h trois éléments. Donc, si cette page de destination est un livre , le H1 en haut est le titre du livre. Un livre ne peut pas comporter plus d'un titre, mais il peut comporter plusieurs sujets et sous-sujets dans des chapitres. C'est donc de ça qu'il s'agit. Les moteurs de recherche aiment également savoir ce qu'est une page et c'est pourquoi les moteurs de recherche regardent le H1 sur n'importe quelle page de destination pour savoir comment l'indexer. Permettez-moi d' actualiser la page car je l'ai créée pour animer lorsque vous la faites défiler, mais seulement une fois lorsque vous chargez la page. Comme j'avais déjà chargé la page, vous pouvez voir l'animation. Je vais donc rafraîchir la page. Et maintenant, vous verrez cela s' estomper bien et en douceur. La section héros, comme ça, a l'air cinématographique. Et puis la section de mise à l'échelle se glisse comme ça, ce qui, à mon avis, est un effet cool. Ensuite, la section s'y glisse ainsi qu'elle s'estompe. Ensuite, nous avons cette section de comptoir qui glisse de haut en bas. Cela a déjà été animé. Comme vous pouvez le constater, nous avons ces animations et elles ajoutent vraiment une bonne ambiance dans une expérience utilisateur agréable à l'utilisateur. Ils tombent simplement amoureux d'un site Web. Ensuite, nous avons les témoignages. Il est automatiquement animé. Nous n'avons pas besoin de faire quoi que ce soit. Il continue de boucler cette animation sur les témoignages pour capter l'attention de l'utilisateur afin qu'il puisse lire ce que disent les témoignages. Enfin, nous avons le formulaire d'inscription qui apparaît par le bas pour informer les gens qu'ils peuvent s'inscrire pour obtenir des cours gratuits. Il s'agit d'une belle section d'appel à l'action. Ensuite, nous avons le dossier. C'est essentiellement le site Web. C'est-à-dire que c'est essentiellement la page de destination que nous sommes en train de créer. Et sans perdre plus de temps, commençons par créer l'en-tête. Je vous verrai donc dans la prochaine leçon. 3. Installez le thème Astra: Bienvenue de retour. Nous sommes donc prêts à commencer à créer la page. Et la première partie que nous créons est l'en-tête. Mais avant de faire cela, allons de l'avant et installons notre thème puis nos plugins. Comme vous pouvez le constater, il s'agit d'une toute nouvelle installation de WordPress. Nous sommes à la version 6. Vous utilisez peut-être une version plus récente, mais le processus que nous appliquons actuellement reste pertinent. Donc, en abordant les thèmes d' apparence, nous pouvons installer Astro par défaut car nous sommes en 2022. Le thème actif est 2022. L'année dernière, c'était 2021, et l'année précédente, c'était 2020. Mais nous voulons aller de l'avant et dire Ajouter un nouveau. Et nous serons redirigés vers le référentiel des thèmes WordPress ou le répertoire des thèmes. Et il y a littéralement des milliers de thèmes que nous pouvons utiliser ici. Mais celui qui nous intéresse, c'est Astra. Il devrait donc être ici. Mais vous pouvez aussi aller de l'avant et taper Astra juste pour être sûr. Et remarquez qu'il y a Astral et Astra ne confondent pas les deux. C'est Astra qui a installé ça. Très bien, allons-y et activons. Et c'est fini. Ainsi, comme vous pouvez le constater, le thème actif est Astra. Comme vous pouvez le voir ici. Merci d'avoir installé Astra. Et ils nous disent simplement qu'Astro est livré avec des dizaines de modèles de démarrage prêts à l'emploi. Et en fait, j'avais déjà publié classe où je vous apprends à utiliser les modèles de démarrage pour créer des sites Web entièrement fonctionnels. Si vous ne l'avez pas vu, allez-y et ouvrez mon profil. Vous le verrez juste là. Je vous apprends à concevoir une boutique de cosmétiques à l'aide ces modèles de démarrage prêts à l'emploi. Mais je vais aller de l'avant et fermer ça. Et c'est essentiellement la façon d' installer un thème WordPress. Astra est l'un des thèmes WordPress les plus populaires aujourd'hui, et c'est le cas depuis plusieurs années. Si vous voulez en savoir plus, je vous recommande d'aller de l'avant et de Google Astra Theme Review. Juste pour que vous puissiez voir pourquoi il s'agit de l'un des thèmes WordPress les plus populaires et les plus populaires du marché. Maintenant que notre thème est installé et activé, nous voulons ensuite installer et activer nos plugins. Nous allons le faire dans la prochaine leçon. Je vous verrai bientôt. 4. Installez le plugin Elementor: Et bon retour. Maintenant que nous avons installé Astra, il est temps d'installer elementor. Et les deux autres plugins que nous utiliserons pour créer notre en-tête. Et vous comprendrez pourquoi nous avons besoin de ces deux plugins. Aller directement à l'intérieur des plugins. Je peux cliquer sur Ajouter un nouveau, mais je veux que nous allions d' abord à la liste de tous les plugins que nous avons déjà installés. Et nous y voilà. Donc ce que je veux faire, c'est dire Add New et sera redirigé vers le référentiel des plugins ou le répertoire des plugins. Et nous pouvons aller de l'avant et chercher Elementor. Et ce devrait être le premier résultat. Une fois que vous l'avez recherché, il est réalisé par Elementor.com et dispose plus de 5 millions d'installations actives au moment de l'enregistrement. Installez-le maintenant. Et pendant l'installation, notez qu'il y a d'autres plug-ins qui portent le nom Elementor. s'agit essentiellement de plugins créés pour être extensions ou fournir des extensions au plug-in Elementor. Elementor fournit donc des fonctionnalités et des paramètres spécifiques et les endroits où il présente des lacunes. Ces plugins ajoutent ces fonctionnalités à elementor et je vais vous montrer comment ils font cela. Ces plugins fournissent également des fonctionnalités gratuites qui peuvent être uniquement disponibles dans la version pro ou la version premium d'Elementor. Avant d'activer Elementor, nous allons installer des éléments kids, modules complémentaires élémentaires, qui est l'une des extensions dont nous avons besoin pour Elementor pour pouvoir créer notre en-tête. Et nous voulons également que notre en-tête soit collante. Allons donc installer des effets d'en-tête collants pour Elementor. Pendant l'installation. Permettez-moi de sauter rapidement cette page de référence ici pour vous montrer ce que je veux dire par « collant ». Donc, quand je commence à faire défiler, remarquez que l'en-tête ici reste en haut. Il ne fait pas défiler les premiers mots avec le reste de la section héros et de la page. La section héros monte et disparaît, mais la page reste tout en haut. C'est ce que nous entendons par en-tête collant. Le fait qu'il reste en haut et permet à l'utilisateur de naviguer quelle que soit la partie de la page, la leur. Revenons donc à notre liste de plug-ins, maintenant, il est installé. Il ne nous reste plus qu'à les activer. Allons installer des plugins. Nous allons les activer un par un. Commençons par Elementor, car dernièrement, depuis la dernière mise à jour du plugin, nous avons maintenant un assistant de configuration que nous devons suivre plusieurs étapes pour configurer les parties de base d'un site Web. Nous y voilà. C'est l'assistant de configuration que je viens de mentionner. Il y a plusieurs étapes ici. La première étape consiste à créer un compte sur le site Web élémentaire afin de profiter de certains de ces avantages. Mais nous n'avons pas besoin de créer un compte pour utiliser le plugin. Je vais donc aller de l'avant et sauter cette étape. La deuxième étape consiste à sélectionner, pour continuer avec le thème Hello. Il s'agit d'un thème créé par l'équipe Elementor pour travailler avec Elementor. Mais n'oubliez pas que nous avons déjà installé le thème Astra, qui est plus puissant et plus de fonctionnalités. Donc, nous allons aller de l'avant et sauter. Nous avons ici l'occasion de donner un nom à notre site Web. Par défaut, c'est le nom que vous avez donné à votre site Web lorsque vous installiez WordPress dans votre cPanel. Je vais donc laisser ça à ça et cliquer sur Suivant. Nous avons ensuite l'occasion de télécharger notre logo. Mais nous ne le faisons pas maintenant. Nous téléchargerons le logo au fur et à mesure que nous construisons la page de destination. Je vais donc cliquer sur Ignorer. Enfin, nous avons deux options ici. Nous pouvons modifier un canevas vierge avec Elementor Editor, ou parcourir des centaines de modèles ou importer nos propres modèles élémentaires. Nous n'allons pas commencer directement à créer la page Web, nous devons accéder au tableau de bord. Je vais donc cliquer sur Ignorer. Très bien, il semble qu'Elementor nous ait redirigés vers la toile que nous avions évitée. Mais allons continuer et cliquer sur ce menu Burger et Quitter to Dashboard. Parce que rappelez-vous que nous n'avons toujours pas activé le reste des plug-ins. Je clique sur cette icône ici pour que nous puissions quitter le tableau de bord. Retournez aux plug-ins. Au cours de la prochaine leçon. Allons de l'avant et activons les éléments, la chaleur, la lumière. Je vous verrai bientôt. 5. Ajouter un complément d'élément: Et bon retour. Nous avons donc déjà installé et activé Elementor. Maintenant, nous sommes sur le point d'activer la lumière clé des éléments. Mais avant de le faire, je veux simplement vous montrer pourquoi nous avons besoin d'éléments, lumière Keith et d'autres extensions d' Elementor et comment ils fonctionnent. Donc, en passant à l'intérieur des pages, je veux simplement cliquer avec le bouton droit de la souris et ouvrir ce lien dans un nouvel onglet afin que nous puissions laisser cette page intacte et nous allons accéder à ce nouvel onglet. Je peux donc vous montrer ce que nous voulons dire. Il s'agit de la page générée automatiquement par Elementor lorsque nous avons terminé l'assistant. Je vais donc cliquer sur Modifier avec Elementor. Nous pouvons donc aller au front end et voir ce que nous avons. Ici. Nous sommes sur le côté gauche d'Elementor. Nous avons plusieurs panneaux contenant des outils Elementor. Par défaut, le panneau de base est toujours ouvert. Ce sont les éléments les plus populaires sur tous les sites Web. Chaque site Web ou page Web aura toujours besoin d'un bouton, aura toujours besoin d'un titre et d'une image, de vidéos, de diviseurs, d' espaces, etc. Donc, si je réduit cette zone de base et que j'ouvre le Pro, sont les outils et fonctionnalités qui ne seront disponibles que si nous avons acheté la version Pro d'Elementor. Nous ne pouvons donc pas les faire glisser sur notre espace de travail, mais nous pouvons faire glisser une image ici et la déposer là-dedans. L'un des avantages d'avoir ces extensions comme les éléments kid light, les éléments gardent la lumière est que certaines des fonctionnalités disponibles uniquement dans la version Pro d' Elementor sont en fait gratuit lorsque vous installez cette extension car son travail consiste à apporter le score avancé Elementor avec le temps. Nous avons donc fait des en-têtes et toutes ces choses. Nous allons donc activer la lumière clé des éléments. Et nous irons au front end et nous le trouverons ici. Et nous allons jeter un coup d'œil sur les différents outils qu'il apporte. Je vais donc cliquer sur Activer. Et maintenant, c'est actif. Il est listé ici sur la gauche. Et si nous cliquons sur des éléments, lumières pour enfants, allez-y et cliquez dessus. Il dispose également de son propre assistant de configuration composé de plusieurs étapes. Et fondamentalement, ces trois options déterminent le nombre de ces différentes fonctionnalités disponibles ou widgets. Nous les appellerons ainsi. Donc, si nous avons avancé plutôt que basique, nous aurons plus de ces jets. Je vais donc le laisser à l'avance ou vous pouvez aller de l'avant et simplement le laisser à base ou recommandé. Et ensuite, nous irons dire la prochaine étape. Ici, vous pouvez vous inscrire à la communauté des kits d'éléments pour recevoir des nouvelles de leur part. Allons de l'avant et cliquez sur Suivant. Ici. Vous avez la possibilité d' installer plus d'outils développés par l'équipe de développeurs enfants Elements. Cliquez ensuite sur Suivant, nous allons maintenant les installer. Ensuite, il suffit d'aller de l'avant et de cliquer sur l'étape suivante. Prochaine étape, et maintenant nous sommes prêts. Cliquez sur Enregistrer les modifications. Et maintenant, nous avons installé et activé des éléments. Obtenez de la lumière sur notre site Web. Et une fois cela fait, passons au front end. Et je vais rafraîchir cette page. Il nous demande si nous voulons dire qu'ils changent car nous ne voulons pas enregistrer les modifications car il ne s'agit pas d'une page que vous allez utiliser. Je vais donc simplement recharger. Et maintenant, si je réduit le panneau Pro de base dans tous ces autres, vous remarquerez maintenant que nous avons kit d' éléments et le dossier d'en-tête kit d'éléments. Et si nous développons cela, il dispose de plusieurs outils destinés à ajouter de la valeur ajoutée à nos sites Web. Donc, si je tape, maintenant, vous remarquerez que nous avons la navigation fournie avec Elementor Pro et un élément de navigation apporté par le module complémentaire Elements Kit. Et c'est dans la version pro, donc nous ne pouvons pas le faire glisser dans la page, mais nous pouvons faire glisser ceci et l'utiliser. C'est donc l'avantage d' ajouter ces modules complémentaires à Elementor. Maintenant que nous avons des éléments Kid, activés par la lumière, revenons au backend. À l'intérieur des plugins. Ce sont des effets d'en-tête collants pour Elementor n'a pas d'assistant de configuration. Donc, si je clique sur Activer, il sera simplement activé et nous sommes prêts à l'utiliser. Maintenant que c'est fait, prochaine chose à faire maintenant est de commencer à construire notre section d'en-tête. Nous allons donc le faire à partir de la prochaine leçon. Je vous verrai bientôt. 6. Créez l'en-tête Le logo: Bienvenue de retour. Je suis allé de l'avant et j'ai préparé un dossier contenant tous les actifs que nous utiliserons. Et j'ai bien nommé les ressources informatiques. Vous trouverez donc ces dossiers de ressources dans la description ci-dessous et vous pouvez le télécharger pour tout trouver ici. Et l'une des choses que vous trouverez là-dedans est le fichier TXT de points de couleurs. Cela contient essentiellement les différents codes de couleurs que j'ai utilisés pour créer ce jeu de couleurs. Vous pouvez utiliser ces codes couleur ou utiliser les vôtres. Nous allons donc utiliser ce bleu marine, bleu clair, orange. Et bien sûr, vous pouvez utiliser n'importe quelle nuance de gris que vous voulez. Je voulais juste mentionner cela et j'ai également mentionné que vous trouverez ces dossiers de ressources dans la description ci-dessous. Avec cela, passons à l'intérieur de notre tableau de bord. La première chose à faire est de remarquer que l'en-tête est composé du logo et de la barre de navigation. Nous allons donc télécharger un logo pour notre site Web. Je vais donc survoler les éléments gamin. Et l'une des options ici est le dossier d'en-tête. Je vais donc cliquer dessus. Ici. Vous remarquez que nous avons trois panneaux, tous en-tête et pied de page. Il s'agit d'une liste de tous les en-têtes et pieds de page que vous avez créés dans cette section. Je vais donc dire « Ajouter un nouveau ». Et nous pouvons donner un nom à notre en-tête. Je vais juste appeler ça en-tête. Et le type peut être soit un en-tête, soit un pied de page. Donc, dans ce cas, c'est un en-tête et les conditions sont que nous voulons qu'il soit disponible ou visible sur l'ensemble du site. Et nous pouvons aller de l'avant et dire, tout d'abord, activons-le pour qu' il soit réellement visible. Si nous le laissons, il ne sera affiché nulle part. Disons donc d'activer, de sauvegarder les modifications. Et maintenant, il est actif comme vous pouvez le voir sur ce statut. Cliquez sur Modifier. Et dans ce menu contextuel, cliquez sur Modifier le contenu sera redirigé vers le frontal où nous pouvons maintenant commencer à créer l'en-tête à l'aide d'Elementor. Nous y voilà. Nous sommes maintenant prêts à commencer. Bien sûr. Commençons par ajouter une section à deux colonnes. Et c'est une section à double colonne car cette colonne contient le logo. Nous pouvons donc cliquer sur le signe plus et ajouter une image. Ensuite, pendant que cette image est sélectionnée, vous remarquerez que cette partie indique Modifier l'image. Lorsque nous sélectionnons la section, cette partie se transforme en section de modification. Donc, quel que soit l'élément actif ici sur la page, c'est l' élément actif ici. Et les paramètres et configurations que vous voyez ici concernent cet élément. Donc, si je sélectionne l'image, modifie l'image, et nous pouvons aller de l'avant et sélectionner l'image. Et comme nous n' avons pas de logo ici, nous ouvrirons notre dossier de ressources. Et c'est le logo. Je vais le sélectionner et l'ouvrir. On y va. Insérez ensuite un support. Et on y va. Vous vous demandez peut-être pourquoi certaines parties ne sont-elles pas réalisables parce qu'elles sont blanches en arrière-plan sont blanches, mais nous aurons cet arrière-plan en bleu, donc il sera visible. Allons de l'avant et définissons ce fond bleu. Et le bug, le fond bleu est sur l'en-tête entier. C'est donc la section qui sélectionne ça, puis entrez dans le style, le type d' arrière-plan. On s'écroule. Nous avons plusieurs panneaux. Nous avons besoin de l'arrière-plan dans un état normal. Cliquez sur Classique sous couleur. Nous pouvons coller le code couleur ici. Je vais donc rapidement accéder à ce document et sélectionner cette copie bleu marine. Ensuite, venez ici et collez-le là. Et maintenant, c'est bleu. Je vais mettre à jour et prévisualiser les modifications. là que nous l'avons. La prochaine chose que nous voulons faire est donc de créer cette barre de navigation. Mais la barre de navigation est composée d'éléments de menu. Et ces éléments de menu, nous avons quatre d'entre eux sont en fait des pages Web. La première chose que nous devons faire est donc de créer pour des pages Web ou un nombre quelconque de pages Web dont vous aurez besoin. Ensuite, nous pouvons les utiliser comme éléments de menu. Voyons donc comment le faire dans la prochaine leçon. voit bientôt. 7. Créez l'en-tête La barre navale: Bienvenue de retour. Nous avons déjà téléchargé notre logo. Il est maintenant temps de créer notre menu. En revenant ici, créons un espace réservé pour ce menu. Et ce que nous devons faire, c'est cliquer sur ce signe plus pour faire apparaître les éléments ou cliquer sur cette icône ici, ils font de même. Donc, si je clique dessus, les éléments apparaîtront pour que nous puissions les faire glisser vers cet endroit. Je vais donc cliquer sur la barre de recherche ici et taper nav. Maintenant, rappelez-vous que nous avions remarqué que nous avions deux éléments de navigation. Utilisons les éléments menu de navigation enfants et déposons-le là-dedans lorsque cet indicateur bleu apparaît. Au moment où nous le faisons, nous constatons que nous ne voyons aucun menu. Mais comme il s'agit de l'élément actif, il est dit Modifier les éléments obtient le menu de navigation. Et l'une des options ici est le menu de sélection. Si nous cliquons sur ce menu déroulant, nous sommes censés avoir ici un menu que nous sélectionnerons et il sera affiché ici. Mais comme nous n' avons pas encore de menu, nous devons accéder au back-end du bord et créer un menu WordPress. Laissez-moi d'abord le mettre à jour. Et en passant à cet onglet juste ici, je quitterai le tableau de bord. J'ai toujours cette page intacte. Je viens donc d'ouvrir un nouvel onglet et d' entrer dans le tableau de bord pour pouvoir rapidement créer le menu. Vous pouvez simplement sortir d' ici si vous le souhaitez. Vous allez toujours revenir. Maintenant que nous sommes dans le tableau de bord, je vais y aller. L'apparence survole l'apparence que les menus. Et quand nous arriverons ici, vous remarquerez que la première chose que nous accueillons facilement, créer votre premier menu ci-dessous. C'est parce qu'ils n'ont pas encore de menu. Nous devons en créer un. Laissez-moi fermer cette notification. Donnons un nom à notre menu. Je l'appellerai menu, et je vais sélectionner le menu principal. Nous créons donc ce menu, notre menu principal. Pour que si nous avons plus de menus, ils peuvent être les menus secondaires de Canvas, Menu, ETC. Cliquez donc sur Créer un menu. Et dès que nous le ferons, vous remarquerez que cette partie est maintenant active. Au départ, il n'était pas actif. Et cette partie indique ici Ajouter des éléments de menu à partir de la colonne de gauche. Les éléments de menu peuvent être des publications de page, des liens personnalisés ou des catégories. Parfois, ce sont encore plus d'objets ici. Nous avons donc besoin de créer quelques pages et elles seront répertoriées ici et nous pourrons les ajouter à notre menu. Mais pour l'instant, notez que nous avons l'exemple de page qui vient généralement avec chaque nouvelle installation de WordPress. Je vais donc cliquer avec le bouton droit sur les pages et ouvrir ce lien dans un nouvel onglet. Et je vais passer à ce nouvel onglet pour voir la liste de toutes les pages que nous avons ici. Ces deux-là sont des brouillons. Permettez-moi de les mettre en évidence et de les déplacer à la poubelle. En d'autres termes, supprimez-les. En fait, je dois supprimer cet exemple de page. Nous n'en avons pas besoin. Passez à la corbeille. Et maintenant, nous pouvons aller de l'avant et ajouter peut-être quatre ou cinq pages. Je vais donc cliquer sur Ajouter une nouvelle maison. Et sur la droite, nous avons ici les paramètres WordPress et Elementor, et nous avons demandé des paramètres ici. Nous devons donc configurer ces deux types de paramètres. Le premier sous les paramètres WordPress et Elementor. Passons sous gabarit. Nous allons choisir Elementor, pleine largeur. Et puis sous les paramètres Astro, sous la mise en page du costume, choisissons pleine largeur, étiré. Et la barre latérale. Pas de barre latérale. Parce que vous ne voulez pas qu'une page Web ait des barres latérales. Ensuite, nous devons désactiver l'en-tête et le pied de page impressionnants par défaut car nous construisons le nôtre dans le front end. Donc, avec ces paramètres intacts, allons-y et publions la page. Quittez ensuite la liste des pages. Et maintenant nous avons chez nous, son honneur, les pages que je vais répéter le même processus pour plus de fois, en créant des pages différentes. Et je vais accélérer cette partie parce que c'est juste une réputation de ce que nous venons de faire. Je vous suggère de faire de même. Ajoutez donc un nouveau. Je vais appeler ces cours. Et c'est la dernière page. sortons donc de la liste des pages que nous avons. Nous avons maintenant cinq pages qui peuvent être utilisées comme éléments de menu. Donc, en revenant à l'intérieur, à l'apparence , aux menus sous les pages, vous remarquerez que nous les avons maintenant comme éléments de menu, donc je vais tous les sélectionner. Vous pouvez également sélectionner un par un comme vous le souhaitez. Je vais donc tous les sélectionner et les ajouter au menu. Et maintenant, nous les avons répertoriés sous le menu, qui passe par le menu nom. Et réorganisons-les en les faisant glisser de haut en bas. Mettons le contact comme tout dernier élément. L'article qui se trouve en haut ici sera celui de gauche. Et l'élément qui se trouve à la fin ici sera celui qui se trouve à droite dans notre menu, comme ça, de gauche à droite. De gauche à droite. Et avec ce changement, sauvegardons le menu. Maintenant, avec ces changements, nous pouvons aller de l'avant et passer à la page où nous avions notre menu ici. Rappelez-vous que nous avions ajouté ces éléments de navigation, NAB garder le menu des éléments sélectionnés, obtenir le menu de navigation, et nous étions censés faire apparaître ce menu ici. Maintenant, tout ce que je dois faire est d'actualiser cette page et ce menu apparaîtra ici. Je vais donc toucher Control R ou Command R si vous êtes sur Mac. Pour actualiser la page. Et je vais sélectionner cet élément, sauter l'élément de navigation. Et maintenant, si nous allons dans le menu Sélectionner, le menu déroulant que nous venons de créer apparaîtra et les éléments apparaîtront ici. On y va. Mais ils sont maintenant sur la gauche. Nous devons les pousser vers la droite. Passons donc à la position horizontale du menu et passons à droite. On y va. Mais maintenant, nous devons modifier les couleurs pour écrire car elles ne sont pas visibles actuellement. Alors que cette option est toujours sélectionnée, cliquez n'importe où dans cette zone bleue. Allez à l'intérieur du style. Laissez-moi réduire l'enveloppe de menu. Nous avons plusieurs paramètres ici. Ce dont nous avons besoin, c'est le style des éléments de menu, type d' arrière-plan, aucun élément d'arrière-plan, la couleur du texte, le blanc. Faisons glisser ça jusqu'ici. Et en survol, laissez-moi cliquer n'importe où pour m'en débarrasser. Et en vol stationnaire, nous avons besoin que la couleur soit 1524, ce qui est l'une des couleurs que j'ai ici, un 24. Et quand il est actif en vol stationnaire, vous remarquerez qu'il devient orange. Et quand il était actif, nous devions également être F 158. Vingt-quatre, activez-le. Ensuite, prévisualisons les modifications. On y va. Maintenant, quand je survole ça, c'est génial. Et c'est comment créer l'en-tête. Voyons ensuite comment créer la section héros. Nous allons le faire dans la prochaine leçon. Je vous verrai bientôt. 8. 7 Créez la section du héros: Bon retour. Nous sommes donc sur le point de créer une section héros. Un pour commencer par ajouter ce bloc de texte. Ensuite, nous ajouterons l'image et nous terminerons avec ces particules. Donc, en accédant à notre page Elementor, je veux quitter cette partie parce que nous avons fini de modifier l'en-tête. Souvenez-vous que c'est ici que nous modifiions l'en-tête. Nous devons donc cliquer sur ce menu hamburger et quitter le tableau de bord. Nous pouvons créer une page Web ou utiliser l'une des pages Web que nous avons créées. Comme vous pouvez le voir, nous avons été redirigés vers le tableau de bord et nous sommes toujours dans les paramètres de l'en-tête. Allons donc à l'intérieur des pages. Et nous avons la liste de toutes les pages que nous avons créées précédemment. Nous utiliserons donc l'une de ces pages et je veux utiliser la page d'accueil comme page d'accueil parce que c'est logique. Je vais donc cliquer sur Modifier. Et comme nous avions déjà tout configuré ici, tout ce que nous avons à faire est de dire Modifier avec Elementor et nous serons redirigés vers le front-end où nous pourrons commencer à remplir la page avec le reste de la contenu. Maintenant que nous sommes en train de modifier la page elle-même et non l'en-tête, nous ne pouvons pas modifier l' en-tête à partir d'ici. Nous pouvons donc cliquer sur ce logo ou nous pouvons redimensionner ces colonnes ici, ou modifier les couleurs de tout ce qui se trouve dans l'en-tête. Nous sommes en train de modifier le contenu qui se trouve sous l'en-tête. Donc, pour aller à notre référence ici, nous avons besoin d'une double colonne, une pour contenir l'image et l'autre pour contenir le bloc de texte. Ajoutons donc une section à double colonne. Bien sûr, de ce côté, allons-y et ajoutons un titre. Laissons-le là-dedans. Donc je vais juste commencer et taper. Lorsque cette option est sélectionnée, vous remarquerez que cela a changé dans le titre Modifier. Je vais donc commencer et taper des taper faciles cours élémentaires pour tout le monde. Et nous pouvons entrer dans le style tant que la typographie de style est encore active. Augmentons la taille et nous pouvons changer la famille de police tant que nous sommes encore sous Typographie. Famille de polices. Changeons cela pour Montserrat ou les polices de votre choix. Donc Montserrat, maintenant cliquez n'importe où dans cette zone ici pour vous débarrasser de cette boîte comme ça. Et changeons cette couleur en blanc. Et maintenant, vous ne pouvez pas le voir parce que le fond est blanc. Ce qui nous amène à l'étape suivante, qui consiste à changer la couleur d' arrière-plan de toute leur section de gauche à droite, nous devons sélectionner la section elle-même. Et maintenant, vous remarquerez qu'il est un peu difficile de s'emparer de la section. Et ce que nous devons faire, c'est simplement passer en revue, si vous passez la souris dessus, puis que vous montez , vous serez en mesure d'obtenir ces paramètres. Et c'est une sorte de bogue dans Elementor. J'ai remarqué que cela se produisait souvent. Vous pouvez également accéder à cette colonne. Ensuite, comme il est en contact avec cette pièce, vous pouvez le sélectionner. Mais si vous partez directement d' ici et que vous essayez de vous y rendre, vous n'y arriverez pas. Les éléments finaux nous fournissent également un outil appelé le navigateur que nous pouvons utiliser pour sélectionner et parcourir les différentes sections que nous avons sur la page. Donc, appuyer sur Control I sur le clavier fera apparaître l'outil. Et l'outil nous donne une vue d'ensemble de la page. Comme vous pouvez le voir, nous avons deux colonnes ici. Ce sont ces deux colonnes. Et ils sont à l'intérieur de la section. Donc, si je réduis cette section, vous remarquerez que les colonnes ont disparu parce qu'elles se trouvent à l'intérieur de la section. fait de le développer révèle les deux colonnes qui s'y trouvent. Nous pouvons donc sélectionner une section à partir d'ici en cliquant sur la section. Et maintenant, c'est la section. Cela signifie que la section entière est sélectionnée. C'est une autre façon de contourner ce petit problème. Donc fermer ça et on peut passer au style. Si j'ai réduit l'arrière-plan, vous remarquerez que nous avons plusieurs paramètres ici. Nous n'avons besoin que du contexte pour l'instant. Cette fois, nous ne voulons pas que le fond soit monochrome classique. Nous voulons qu'il s'agisse d'un dégradé, donc je vais cliquer dessus. Et nous avons la première couleur. Et la deuxième couleur, pour la couleur du haut, ou la première couleur, nous voulons la même couleur parce que nous voulons le dégradé s'étende du haut vers le bas. Donc, si nous utilisons la même couleur que celles-ci ici, il y aura ce changement progressif qui apparaîtra uniquement entre ce bleu et cette seconde couleur ici. Donc, en sélectionnant la couleur un. Je vais passer à ça et dire bleu marine. Copiez ça, collez-le ici. Allons-y et changeons cette deuxième couleur. Ce bleu clair. Copiez ça. Colle-le dedans. Et maintenant c'est un beau dégradé de bleu. Prévisualisons donc les modifications. Oui, on y va. En revenant ici, tant que c'est toujours sélectionné, souvenez-vous que nous avons dit que nous avions besoin d'un H1 par page. Actuellement, alors que cette option est toujours sélectionnée, si vous allez dans Contenu, vous remarquerez que H2, changeons-le en H1. Cliquons dessus et ajoutons un éditeur de texte, qui est essentiellement un paragraphe. Nous l'avons donc déposé alors qu'il est toujours sélectionné. Maintenant, il indique n'importe quelle couleur de texte de style d' éditeur de texte, changez-la en blanc. Et nous pouvons aller de l'avant et sélectionner la topographie. Changez de famille. Montserrat. Sélectionnez cela, allez dans le style, la typographie, la police, le poids. Faisons 900 pour qu'il soit lourd. Et maintenant, nous avons besoin d'un certain espacement entre le contenu de la section héros et l'en-tête. Nous le faisons donc en accédant à cette colonne individuelle, car il s'agit d'une colonne double. Passons à cette rubrique. Marge avancée. Supprimons ce lien afin de pouvoir modifier des cellules individuelles. La marge supérieure peut donc l' augmenter en la regardant. Je pense que c'est une bonne distance. Mettons-le à jour et prévisualisons les modifications. Alors allons-y. La prochaine chose que nous voulons faire est d'ajouter l'image. Revenons ici, cliquons sur ce signe plus ici. Et glissons un élément d'image. L'image étant toujours active. Nous pouvons procéder au téléchargement à partir de notre dossier d'actifs. Voici l'image. Vous avez, toutes ces images à votre disposition en dessous de cette vidéo. Insérons un média. Et on y va. Mettez à jour ça. Et avant de le voir dans le frontend, maintenant, ajoutons un peu d'espacement, remplissage entre la bordure de la section et le contenu où se trouve la zone de contenu. Nous allons donc sélectionner la section elle-même. Allez dans le rembourrage avancé, supprimez ce lien. Rembourrage inférieur. Donnons-lui 50. Cela augmente l'espace entre l'endroit où le contenu atteint et la bordure. Au sommet. Nous pouvons peut-être aussi lui donner un peu de rembourrage, peut-être 30 mettre à jour cela. Prévisualisons les modifications. Très bien, je trouve ça génial. La prochaine chose que nous voulons faire maintenant est d'ajouter nos boutons. Allons-y donc et faisons-le dans la leçon suivante. 9. Ajouter des effets de texte: Bienvenue de retour. Nous sommes sur le point d'ajouter nos boutons juste en dessous. Mais avant de le faire, vous vous demandez peut-être comment ajouter cette ombre portée derrière le texte. Comme vous pouvez le constater, nous avons une sorte d'effet d' ombre derrière le H1. Alors, comment avons-nous fait cela ? En revenant ici, sélectionnez le H1 et passez à l'intérieur du style. Passons à l'ombre de texte. Et si nous cliquons dessus, regardez le texte. Si je clique immédiatement, cela montre une ombre derrière. Et nous pouvons le personnaliser à notre goût ici pour que vous puissiez augmenter un peu le flou. J'aime bien ce que ça ressemble, mais allez-y et jouez avec ça. Je vais le mettre à jour. Prévisualisons les modifications. J'ai donc aimé l' ombre portée jusqu'à présent. Mais une autre chose que vous vous demandez peut-être c'est comment j'ai obtenu cette couleur orange ? Je voulais que les cours en ligne se démarquent parce que c'est ce que nous devrions vraiment distinguer pour tous ceux qui arrivent sur cette page. Tout ce que j'ai fait, c'est d'envelopper ce texte dans une période. Pour ceux d'entre vous qui ne savent pas coder en HTML, il y a quelque chose appelé span. Et vous pouvez en savoir plus à ce sujet. Il est très facile à utiliser, mais je vais juste vous montrer comment je l'ai fait. Alors que cela est toujours sélectionné, je vais entrer dans le contenu Elementor moins que signe. Ventilateur, si serré que la portée. Ensuite, les mots pour lesquels vous souhaitez modifier la couleur doivent être enveloppés dans le pantalon des outils et la seconde portée doit comporter la barre oblique juste avant la plage de mots. Et puis à l'intérieur de la première plage, tapez, style, égal à des guillemets. Et à l'intérieur des deux guillemets, vous pouvez entrer la couleur. Je vais utiliser le code. Nous avons déjà utilisé 1524 pour maintenir cette cohérence. Là, nous l'avons, mettez-le à jour. Donc, si cela vous semble trop compliqué, vous n'avez pas besoin de vous inquiéter en rose, vous ne connaissez pas Elementor, vous n'aurez pas vraiment besoin d'utiliser ces paramètres personnalisés. Je vous montre juste au cas où vous voudriez effectuer des personnalisations supplémentaires comme celles-ci. Dans la leçon suivante, ajoutons les deux boutons. Je vous verrai bientôt. 10. Ajouter et personnaliser les boutons: Nous sommes de retour maintenant pour ajouter les deux boutons. Il existe différentes façons d'obtenir le même résultat que cela. Nous pouvons ajouter deux boutons ici en insérant une double colonne dans une section ici puis en faisant glisser un bouton, puis en les faisant glisser dans les boutons comme ça et les personnalisant jusqu'à ce qu'ils ressemblent à cela. Ou nous pouvons utiliser l'option de bouton Duo kit d'éléments, que je vais vous montrer. Tout d'abord, permettez-moi de mettre à jour cette page avant de continuer. Et puis à l'intérieur du tableau de bord, je veux aller à l'intérieur du kit éléments, cliquer sur le kit d'éléments, les widgets. Et puis rappelez-vous que pendant que nous étions en train de configurer le kit d'éléments, nous avons sélectionné l'option de base. Il y avait également l' option Avancé et l'option personnalisée. Parce que nous avons sélectionné l'option de base, certains des widgets ici, nous ne sommes pas cochés ou là où elle s'est arrêtée. Nous devons donc activer l'option à double bouton. Nous allons donc le chercher. Oui, c'est ici. Toutes les options de bouton, ainsi de suite. Ensuite, sauvegardons les modifications. Et maintenant, revenons à notre front-end où nous effectuons notre montage. Si j'actualise cette page en appuyant sur Control R. Alright, alors allons maintenant entrer Duo. Et maintenant, il est disponible. Donc, faites glisser ça ici et déposez-le là-dedans. Nous avons les deux boutons. Nous pouvons maintenant les personnaliser. Tout d'abord, commençons par étendre leur largeur. Et ensuite, augmentons l'écart. Peut-être jusqu'à là. Et puis développons le bouton 1. Donnons une description comme télécharger des cours. Ensuite, vous pouvez fournir le lien ici pour que lorsque quelqu'un clique dessus, la longueur détermine ce qui va se passer. Soit c'est un doute, c'est un lien de téléchargement, soit il les amène à une page où ils peuvent tout télécharger. Puis le bouton 1 a été réduit. Passons à Button to, modifions le texte pour en savoir plus. Vous pouvez également fournir un lien. Et si vous le souhaitez, vous pouvez fournir une icône. Nous n'allons pas le faire. Mettons-le à jour. Maintenant. Alors que les boutons sont toujours sélectionnés, passons à l'intérieur du style. Nous pouvons maintenant commencer à les coiffer. Si j'écroule, nous n'avons que deux options. premier bouton peut commencer par modifier la couleur d'arrière-plan. Nous avons donc ici la couleur du texte, puis ici nous avons le type d' arrière-plan en cliquant que nous puissions effectuer cette modification 24. Et c'est peut-être de quelle couleur avons-nous utilisé ici ? Un blanc. Faisons en sorte que le bouton devienne blanc. C'est donc le baguage de cette couleur de type d' arrière-plan, blanc. Cela signifie que la texture doit passer au bleu marine. Cliquez n'importe où ici. Pour s'en débarrasser, la couleur du texte doit être bleue. Je vais donc y accéder et sélectionner cette copie bleu marine qui va ici, bouton pour colorer. Collez-le là-dedans. Et maintenant, c'est bleu. En vol stationnaire. Je voulais rester bleu. Collez ça là-dedans. Et maintenant, il reste encore bleu. Pour le bouton 1. Développez ça. En vol stationnaire. Il reste toujours blanc. Ensuite, arrondissons les coins pour qu' ils ne soient pas aussi pointus qu'en ce moment. Donc pour le bouton un, rayon de bordure, donnons un dix. Et maintenant, il est arrondi aux coins. Pour bouton aussi. Faisons de même. Maintenant. Il est ancré. Réduisons un peu la hauteur. Et nous le faisons en descendant jusqu'au rembourrage. Brisez ce lien. Et ensuite, faisons notre propre rembourrage. En haut. Donnons un 15. C'est 15015. Et les 15 derniers. J'aime bien ça. Mais ici, nous pouvons vous donner le 50 et le brillant 50. C'est plutôt comme ça. Faisons de même pour le premier bouton. rembourrage. Supprimez le rembourrage par défaut. Puis à gauche, 50, 50 à droite, en haut 15, en bas 15. Maintenant, nous devons augmenter la largeur. Revenons donc au bouton de contenu. Ça nous plairait. Ensuite, mettons à jour cela. Prévisualisez les modifications. Très bien, maintenant à cause de la quantité de texte ici, les boutons sont allés au-delà. Nous pouvons réduire la taille de ce mot ou changer ce mot pour qu'il soit plus court. Comme des cours collégiaux faciles pour tous. Et nous commençons déjà à tout repousser car nous sommes censés mettre à jour cela. Aperçu des modifications. J' aime déjà où c'est. La prochaine chose que nous voulons faire est d'ajouter cette animation. Lorsque vous survolez cela, cela s'arrondit parce que les couleurs ne changent pas en survol, nous avons besoin d'un moyen de montrer à l'utilisateur qu'il survole les éléments spécifiques. Donc, revenons ici, choisissons ça. Nous allons réduire l'écart. Et ensuite, pour le style, si nous passons au bouton 1 en survol, nous voulons changer le rayon de la bordure à 50. Maintenant, lorsque nous survolons cela, cela change à ce rayon de bordure circulaire. Mais parce qu'il n'a pas encore fait cela, ça ne change pas. Allons donc à Button pour survoler. Rayon de frontière. 51. Finalement, donnons une ombre de boîte. Alors, le bouton un. Dans des circonstances normales, vous avez besoin d' une ombre de boîte. En vol stationnaire. Nous avons besoin de la box-shadow pour se répandre davantage. instant, nous avons l' ombre de boîte à la taille par défaut, taille du flou de dix. Mais en survol, donnons une ombre de boîte avec une taille floue de, voyons voir, pour l'instant, elle est toujours à dix ans. Donc, si nous lui donnons peut-être un 20, la box-shadow semble s'étaler davantage et essayons peut-être 30. Je préfère ça. Faisons de même pour les boutons à box-shadow dans des circonstances normales, les ombres de boîte, et maintenant nous avons une ombre de boîte. Et en survol, je veux que l'ombre de la boîte ait une taille 30. Mettez à jour cela. Et prévisualisons les modifications. Très bien, donc si nous survolons ça, j'ai aimé ce que nous regardons. Voici donc comment ajouter le contenu dans la section héros. Ensuite, voyons comment styliser la section héros pour qu'elle ressemble à un livre tel qu'il se présente ici. Et comment ajouter ces particules. Je vous verrai bientôt. 11. Effets de bordure personnalisés: Nous sommes de retour. Il est donc temps d' ajouter ce livre comme des effets de bordure juste en bas de la section héros. Et ce que nous devons faire, c'est sélectionner la section elle-même. Je vais donc le sélectionner. Et nous allons passer au style du site. Ensuite, nous allons commencer à façonner le diviseur en ce moment. Nous ne voulons pas ajouter cette forme ici en haut. Nous voulons l'ajouter en bas. Parce que si nous l' ajoutons en haut et que nous disons, réservez, nous y voilà. Book, nous l' ajoutons en haut. Nous ne voulons pas cela. Alors revenez en arrière et n'en dites rien. Je veux aller au bas, puis réserver. Et c'est là que nous l'avons. Mais maintenant, c'est trop haut sur la section. Donc, ce que nous devons faire, c'est jouer avec la hauteur, disons jusqu'à quelque part. Je l'aime bien à ce moment-là. Mais n'hésitez pas à le rendre aussi haut que vous le souhaitez. Et n'hésitez pas à jouer avec tous ces autres effets ici. Parce que tout est question de la créativité que vous obtenez. Je vais le laisser à la BU. Et vous pouvez également l'inverser si vous le souhaitez. Je l'aime bien comme ça. La prochaine chose que nous voulons faire est, tout d' abord, nous allons le prévisualiser. On y va. Mais augmentons le rembourrage en bas maintenant que nous avons rapproché la bordure du contenu, poussons ce rembourrage plus loin. Donc en revenant alors que la session est encore sélectionnée, avancée, ça m'a fait 50. Maintenant, augmentons le rembourrage en bas quelque part. En fait, permettez-moi d'en faire 120 car je veux que cela remplisse toute la page de destination. Faisons donc 100. Et mettons à jour cela. Et prévisualisons les modifications. Je veux que ça aille jusqu' au fond si possible. Comme ça. Poussons un peu le bloc de texte vers le haut. Laissez l'image là où elle se trouve. Je vais sélectionner la colonne contenant le bloc de texte. Accédez à Avancé. Il traite de la marge supérieure. Comme ça. Mettons-le à jour. Et c'est ce que nous changeons vraiment. J'aime bien où il en est. Maintenant, la prochaine chose que nous voulons faire est d'ajouter ces particules. Et pour ce faire, nous devons ajouter une extension Elementor très géniale appelée add-ons pirate net pour Elementor. 12. Ajouter des effets de particules animées: Alors, en entrant dans notre tableau de bord, plugins, ajoutez de nouveaux. Je vais taper botnet. Botnet, selon la façon dont vous prononcez les mots. Nous y voilà. Nous avons des formulaires alternatifs Pi. En pirate, il s'agit de modules complémentaires pour Elementor. C'est donc ce dont nous avons besoin, 30 000 installations actives en ce moment. Il a volé. Maintenant. Allons l'activer. Et c'est là que nous l'avons. sont donc Tous ces éléments sont donc ajoutés gratuitement pour que nous puissions les utiliser. Ces autres sont dans la version Pro, mais nous avons déjà ce dont nous avons besoin, les particules. En revenant au front end ici, tous les éléments que nous sélectionnons qui peuvent être modifiés avec WordNet afficheront les paramètres du réseau ici. Laissez-moi rafraîchir cette page pour que vous puissiez voir ce que je veux dire, contrôler notre actualisation. Et maintenant, tout d'abord, si je réduit tout ici, nous avons ces add-ons Power Net pour les widgets élémentaires ou payants, ou parfaits gratuits. Il est donc maintenant disponible si je sélectionne cette section, ces modifications à modifier la section. Mais maintenant, remarquez que nous avons cette option parfaite ici. Et si je le sélectionne, alors que cette section est toujours sélectionnée, nous pouvons maintenant venir ici dire des particules et l'activer. Maintenant, vous ne verrez rien ici, mais vous le verrez dans la page d'aperçu. Avant de changer quoi que ce soit, laissez-moi cliquer sur Mettre à jour et prévisualisons ce que nous avons déjà. Prévisualisez donc les modifications. Et c'est ce que nous avons. Donc, en gros, lorsque nous éditons ces particules dans le back-end, nous pouvons les voir. Nous devrons passer au front-end pour les voir. Mais nous pouvons commencer par réduire le nombre de particules car si vous utilisez trop de particules, votre page Web se chargera lentement. Mais je pense qu'un 100 ou un 150 est un bon nombre. Faisons donc 120. Et changeons cette couleur en bleu. Nous allons le modifier jusqu'à ce que nous obtenions le beau bleu. Je vais donc utiliser ce bleu. Je vais utiliser ce bleu et je le copierai. Je vais le copier et le coller. C'est donc la couleur des particules. Maintenant, modifions également le lien. Couleur des appels de fête. Ce sont ces liaisons qui maintiennent les particules ensemble. Ils sont également lus, nous allons les rendre bleus. Alors, collez ce bleu là-dedans. Ensuite, mettons à jour cela. Et nous allons d'abord prévisualiser les modifications. Maintenant, c'est une belle couleur. En ce moment. Ce sont des cercles. Nous pouvons les modifier en polygones ou étoiles, bords, cercles, images, tout ce que vous voulez, laissez-moi les transformer en polygones. Et vous pouvez également réduire la vitesse. Alors maintenant, laissons ça à quatre heures. Et vous pouvez choisir ce qui se passe lorsque vous survolez les particules. Nous pouvons donc dire les repousser si vous les survolez. Et mettons à jour cela et voyons l'effet. Aperçu. Chargement toujours. Maintenant, quand on les survole, on les repoussait. Et c'est ce que nous avons dit. instant, voici comment ajouter ces deux effets, les effets bordure du livre et l'effet de particules. La prochaine chose que nous voulons faire est de créer la section suivante, qui est cette section animée ici. Nous allons donc le faire dans la prochaine leçon. Je vous verrai bientôt. 13. Section de la boîte d'images Partie 1: Félicitations, vous avez terminé la section des héros. Il est maintenant temps de créer le reste de la page de destination. Et ce que nous voulons créer, c'est la prochaine partie ici. Et comme vous pouvez le constater, nous avons trois colonnes, mais il ne s'agit que d' une seule colonne, mais elles sont toutes conservées dans une seule section. Alors, comment pouvons-nous faire cela ? Nous ajoutons tout d'abord une section à colonne unique. Je vais donc ajouter une seule section de colonne ici. Tout d'abord, ajoutons une marge supérieure à cette section pour la séparer de la section héros. Par conséquent, en le sélectionnant, passons à Avancé. Nous déplacons ce lien, puis une marge supérieure de 50. Et maintenant, il y a cet espace entre eux. Maintenant, la deuxième chose que nous devons faire est d'ajouter un titre. Je vais donc ouvrir le panneau de base et faire glisser un en-tête là. Je vais juste copier ces textes. Découvrez comment créer vos propres sites Web. Bien sûr, vous devez taper vos propres textes. Bien que cette option soit toujours sélectionnée. Mettez cela en surbrillance et collez-le là-dedans. Nous devons maintenant le déplacer vers le centre. Alors, sous l'alignement du contenu, poussez-le au centre. Et nous pouvons entrer dans la couleur Textes de style, et la changer en gris foncé comme ça. Remarquez maintenant que si nous passons à la typographie, c'est toujours Roboto. Et c'est parce que roboto a été défini comme police globale chaque fois que nous ajoutons un nouveau texte, Roboto par défaut. Nous devrons donc continuer à changer chaque fois que nous ajouterons un nouveau texte, mais nous pouvons éviter cela. Tout d'abord, permettez-moi de le mettre à jour. Ensuite, si nous allons dans ce menu Burger et que nous sélectionnons Paramètres du site, accédez aux polices globales. Nous pouvons définir les polices globales que nous voulons appliquer partout sur le site Web. Chaque fois qu'un nouveau texte est ajouté au site Web. Par défaut, il sera défini sur ces polices, nous avons dit ici. Donc, les polices principales, passons à Montserrat. Passons au secondaire. Passons au texte et à texte l'accent. Puis mettez à jour. Bon, alors laissez-moi fermer ça. Si nous le sélectionnons et passons à la typographie. Tout d'abord, modifions cela pour surveiller l'itinéraire. Et si nous ajoutons un nouveau titre de texte, il sera automatiquement surveillé rat. Par défaut, c'est Montserrat. Laissez-moi simplement supprimer cela. Bien, permettez-moi de ne pas le supprimer car nous en avons encore besoin pour cette mise à l'échelle actuelle. Permettez-moi donc de copier cela, mettre en évidence, puis de le coller là-dedans. Changements à faire évoluer aujourd'hui. Bien qu'il soit encore sélectionné, mettons-le au milieu. Allons à l'intérieur du style, de la typographie, des textes en couleur. Passons à cette couleur bleu foncé. Je vais donc le sélectionner, le copier ici. Collez ce bleu là-dedans. Je pense que je veux rendre cela un peu plus faible. Donc, style. Repoussons un peu ça. Cliquez n'importe où. Typographie. Rendons-le un peu plus petit. Jusqu'à ce moment-là, peut-être. Ensuite, augmentez l'échelle aujourd'hui. Typographie, poids des polices, faisons 800, et augmentons la taille. Mettons-le quelque part là, et mettons-le à jour. La prochaine chose que nous voulons faire est d'ajouter ici ces boîtes qui ont cet effet agréable lorsque vous les survolez. 14. Section de la boîte d'images partie 2: De retour vert dans notre éditeur. Alors que nous sommes encore à l'intérieur de cette section, sélectionnons, cliquez sur cette icône là-haut. Glissons-nous dans une intersection. Et laissons-le à l'intérieur de cette section. La fonction d' une intersection est donc de laisser tomber à l'intérieur des colonnes. Il ajoute donc des colonnes à l'intérieur des colonnes. Comme vous pouvez le constater, il s'agit d'une colonne, seule colonne, et il y a deux nouvelles colonnes à l'intérieur. Et ici, nous pouvons ajouter du type dans la case ici. Et comme vous pouvez le voir ici, nous avons une boîte à icônes. Nous avons ici une boîte d'images par Elements kids. Et nous avons une boîte d'images fournie par défaut avec Elementor. dont nous avons besoin, c'est ce kit image box by elements. Et il dispose de ce bouton et de quelques textes, description, titre et image. Donc, tout d'abord, ajoutons une belle image. Nous allons donc entrer dans notre dossier de ressources. Et nous avons ces différentes images. Je vais tous les sélectionner, y compris celui-là. Nous l'avons déjà téléchargé. Cliquez maintenant sur Ouvrir pour les télécharger tous. Pendant que ces derniers sont téléchargés, choisissons simplement celui-ci et disons Insérer un média. Et c'est là que nous l'avons. Maintenant, changeons ce que dit le titre. Bien que cette option soit toujours sélectionnée, le corps possède un titre. Changeons donc cela pour qu'il soit dit ? Conception de page de destination ou quelle que soit la catégorie de cours que vous avez. C'est peut-être bon, la bague. Et ensuite, une brève description de cette catégorie. Et ensuite, pour le bouton, on peut changer ce qu'il dit. Apprenez-en plus ou commencez. Et il peut fournir un lien de sorte que lorsque les gens cliquent dessus, il est redirigé vers un endroit spécifique spécifié par le lien. Et nous pouvons également ajouter une icône au bouton, mais nous n'allons pas l'ajouter pour l'instant. La prochaine chose que nous voulons faire est donc coiffer toute la boîte d'image. En commençant par l' image, je pense que nous sommes bons, mais maintenant nous avons le corps, un titre. Passons donc au titre, et nous pouvons changer la couleur du titre par cette couleur. Nous pouvons également augmenter la taille si nous le voulons. Cliquez sur Topographie, augmentons la taille à notre goût. Je pense que je vais m'en tenir là. J'ai aimé l'apparence de la description du texte, donc je n'y toucherai pas. Réduisez le bouton. Je veux changer le type d'arrière-plan de couleur par un gris pâle. Cela signifie que les textes doivent être sombres. Donc, la topographie. Attendez. La couleur des textes devrait me laisser garder ce bleu, ce bleu foncé. Je l'avais toujours dans mon presse-papiers. Et en survol, le texte doit passer au blanc. Et le contexte devrait passer à 24. Comme ça. Et maintenant que cela semble assez beau, nous pouvons aller de l'avant et supprimer cela. Et ensuite, dupliquez-le une fois et deux fois. Mettez à jour cela. Et passons en revue les changements. Très bien, alors faisons défiler vers le bas. Bien sûr, vous remarquerez maintenant qu'il s'agit d'une façon basique de le présenter. Et en fait, certaines personnes l'aiment sans l'ombre portée et les coins arrondis que nous avons là-dessus. Mais je veux vous montrer comment faire cela. Vous savez donc comment le faire, même si vous n' allez pas le faire, même si vous allez le laisser comme ça. Nous allons donc sélectionner la colonne qui contient celle-ci. Et passons à la bordure de style. Donnons-lui un rayon de bordure de 20. Vous pouvez donc voir le rayon de la bordure dès maintenant. Et ce que nous devons faire, c'est dire « box shadow ». Et maintenant, vous voyez qu'il a ce coin arrondi. La prochaine chose que nous allons faire est d'aller à Advanced, lui donner une marge de dix. Et maintenant, cela l' éloigne du reste. Et maintenant que nous sommes satisfaits de cela, oh, nous devons faire un clic droit et copier. Cliquez ensuite avec le bouton droit de la souris sur cette colonne et collez cette vignette est appliquée au style de collage. Et cela aura aussi les mêmes styles que mauvais et fera de même pour ce style de pâte. Une chose que vous remarquerez maintenant est que, après avoir ajouté la marge, cette colonne a été poussée vers l'intérieur à gauche, mais nous voulons qu'elle soit jusqu'au n à gauche. Et celle-ci sera jusqu'au bout, à droite. Mais celle-ci doit être poussée vers l'intérieur des deux côtés. Donc, pour celui-ci, nous pouvons rompre ce lien. Et puis, à gauche, on peut dire que nous voulons qu'il ait une marge de 0, et maintenant cela commence dès le début. Et pour celui-là, l'avancée rompt ce lien à droite. Nous voulons qu'il ait une marge de 0. Remarquez ici, si nous supprimons cela. Mais maintenant, cela restera intact, donc il est poussé vers l'intérieur des deux côtés. Et autre chose, sélectionnons cette colonne pour réduire cette opacité de cette ombre. Allez à l'intérieur de la bordure de style, de l'ombre Allons-y ici. Et réduisons l' opacité pour le rendre moins intensif comme ça, sorte qu'il soit tout simplement subtil. Et puis augmentons la taille du flou à 30 secondes, d'accord ? Et maintenant que c' est mieux, faisons de même pour ces deux autres. Bordure jusqu'à quelque part là-bas. Sélectionnez ce type 30. Et le troisième aussi. Frontière 30. Maintenant, notez que c'est tellement intensif que nous devons réduire l' opacité jusqu'à quelque part. Ensuite, mettez-le à jour et prévisualisez les modifications. C'est vrai ? Maintenant, en faisant défiler vers le bas, c'est ce que nous avons. La prochaine chose que nous voulons créer est cette section ici même avec cet accordéon. Voyons donc comment créer cela dans la leçon suivante. Je vous verrai bientôt. 15. Section d'accordéon: Et bon retour. Il est maintenant temps de créer cette section accordéon. Et voici l'accordéon. Notez donc qu'il n'y a qu'un seul élément ouvert à un moment donné. Donc, si vous cliquez sur un autre élément ici, le précédent se ferme et le suivant s'ouvre. Voyons donc comment ajouter cela à notre page de destination. moment, en passant à notre éditeur, ce moment, en passant à notre éditeur, nous devons ajouter une section à deux colonnes. Comme vous pouvez le voir ici, nous avons une colonne d'image et une colonne de bloc de texte. Alors, en entrant ici, sélectionnez une section à double colonne. Alors donnons une marge en haut ici. Et je veux lui donner une marge de 100. Donc, en sélectionnant cette section, avancée, rompt ce lien 100. Et maintenant, nous avons un bon espacement entre les deux sections. Ici, je veux ajouter une image. Et même si cette option est toujours sélectionnée, continuons et sélectionnons une image à déposer. Nous allons donc le sélectionner et insérer un support. Et ici, nous devons ajouter quelques textes avant d'ajouter l'accordéon. Et une chose dont je viens de me rappeler, c'est que nous n'avons pas précisé quel niveau de titres il s'agit. Donc oui, c'est un H2. Laissons-le comme un H2. Ensuite, ils devraient être un H3 qui va au contenu. Trois ans. Et comme vous pouvez le constater, nous avons différents niveaux de rubriques. Vous pouvez aller de l'avant et Google pour en savoir plus sur ce qu' s' agit et comment les utiliser au mieux ou mieux encore, vous pouvez regarder mon cours SEO ici sur Skillshare et apprendre à travailler avec les rubriques sur vos pages de destination pour une meilleure optimisation des moteurs de recherche. Consultez mon profil pour ce cours. Il ne dure que 60 minutes. Nous pouvons maintenant créer de nouvelles rubriques ici. Comme ça. Ou comme vous le remarquez ici, ce ne sont que les mêmes rubriques répétées sur tout le site Web. Donc, ce que nous pouvons faire, c'est essentiellement dupliquer ces deux-là. Je vais dupliquer ça et le faire glisser. Et si vous faites glisser et que vous avez atteint la fin de la page et qu'elle ne fait plus défiler. Pendant que vous maintenez le bouton de la souris enfoncé. Faites défiler avec la molette de la souris, puis déposez-la lorsque le voyant bleu apparaît. Revenons ici. Dupliquez l'âge de trois ans. Faites-le glisser tout en le maintenant enfoncé. Faites défiler avec la molette de votre souris et déposez-la là. Maintenant, alors que cette option est toujours sélectionnée, alignons-le vers la gauche et faisons de même pour cela. Ensuite, sélectionnez cette icône et faites-la glisser dans un éditeur de texte. Par défaut, il contient un peu de texte réservé. Pour l'instant, je vais juste dupliquer ces textes parce que je suppose vous saisirez votre propre texte si vous construisez ces pages de destination pour un vrai site Web, ce que j'espère que vous êtes. Maintenant, je pense que c'est suffisant pour moi. Mettons-le à jour. Maintenant, allons maintenant cliquer sur cette icône pour révéler les éléments qui en veulent plus. Et sur le widget de recherche, je vais taper accordéon. Et le remplissage automatique fera apparaître les différents types d' accordéons que nous avons ici. Vous remarquerez donc que nous avons trois accordéons. Un qui est fourni par défaut avec Elementor, un autre fourni par le login du partenaire. Il s'agit d'un accordéon d'image et nous avons un accordéon clé. C'est celui dont nous avons besoin. Je le glisserai et je le déposerai là lorsque l'indicateur bleu apparaît. Et maintenant, nous sommes prêts à commencer à le modifier. Alors qu'il est encore sélectionné, nous pouvons y aller. La première option ici sous contenu est l'accordéon. Et ce sont les trois qui sont déjà pré-remplis de texte ou de contenu. Donc, si vous cliquez sur celui-ci, vous le développerez. Cliquez donc sur celui-ci pour l'agrandir. Et maintenant, vous pouvez taper ce que vous voulez là-dedans et cela changera en temps réel . Et si vous souhaitez modifier le titre, bien sûr, modifiez le titre ici. Très bien, et cela a changé en temps réel. Comment enseigner le titre de cet accordéon ? Ensuite, nous pourrons l'effondrer. Faites de même pour cela. Quel est l'âge de la Statue de la Liberté ? Et c'est là que nous l'avons. Et si on clique dessus, l'autre se ferme automatiquement. Nous pouvons donc également modifier ce texte. C'est donc assez simple. Une autre chose que vous voudrez peut-être savoir, c'est comment ajouter plus en conséquence ? Donc, si on s'effondre, comment en ajouter plus ? Il suffit de cliquer sur l'icône Dupliquer ici. Et vous pouvez dupliquer autant de fois que vous le souhaitez. Et ils apparaîtront tous ici. Assurez-vous simplement de modifier tout le contenu de chacun d'entre eux. La prochaine chose que nous voulons faire, c'est peut-être que nous aimerions changer ces icônes. Lorsqu'il est actif, affiche une flèche vers le haut et lorsqu'elle est fermée, elle affiche une flèche déroulante. Vous pouvez donc modifier ces icônes en cliquant ici. Vous ouvrez toutes ces icônes et vous pouvez choisir ce que vous voulez. Je vais les laisser au réglage par défaut. Et maintenant, passons à l'intérieur de ce style. Bien sûr, maintenant, si nous réduisons ce titre, nous avons quatre options différentes. Le titre et la description, ce texte ici, la bordure et l'icône. que nous puissions les modifier , par exemple, passons à un bleu. Et quand il est ouvert, on peut le changer pour qu'il soit ouvert, cette couleur orange. Et quand il est fermé, c'est bleu. Vous pouvez en faire n'importe quelle couleur. Donc, si nous ouvrons cela , cela change cette couleur. Nous allons donc mettre à jour cela et voir les changements. Dates, prévisualisez les modifications. Et on y va. Donc, en faisant défiler vers le bas, notre accordéon est génial et il fonctionne correctement. La prochaine chose que je veux faire est travailler sur ces comptoirs ici. Voyons comment le faire dans la prochaine leçon. Je vous verrai bientôt. 16. Section de compteur: Salut, bon retour. Maintenant que nous avons créé la section accordéon, il est temps de créer la section compteur. En allant sur notre page de référence ici, je fais défiler vers le bas. Tout d'abord, j'ai rechargé la page pour que vous puissiez voir les animations. N'oubliez pas que nous ferons ces animations avant la fin du cours. Alors ne vous inquiétez pas, je voulais juste vous montrer comment le compteur réagit et c'est comme ça qu'il fait. sautant une fois de plus dans notre éditeur, nous ajouterons une seule section de colonne. Et bien sûr, comme toujours, même s'il est encore sélectionné, passez à l'étape avancée et nous devons ajouter une marge en haut. Donc, cassez ça, et donnons-lui 100. Et maintenant, nous avons une fois de plus cet espacement agréable. La prochaine chose que nous voulons faire est de lui donner une belle couleur de fond. Et j'avais donné une orange à celle-ci. Et les particules derrière elle étaient orange foncé, ou on peut appeler ça un brun. Alors, faisons-le. Bien que cette option soit toujours sélectionnée, accédez à la couleur d'arrière-plan du style. Nous utilisons le classique 1524. Mettons-le à jour. Et maintenant, avec le jeu de couleurs d' arrière-plan, ajoutons les particules. Allez dans PAF, particules de voie. Allons-les allumer. Et choisissons peut-être quelque chose comme cent, cent. Et ici. Je vais taper F 1524, mais je vais ensuite faire glisser ça vers le bas pour le rendre un peu plus sombre comme ça, juste pour qu'ils soient un peu plus sombres que le F 1524. Ensuite, je vais le sélectionner, le copier, puis changer la couleur par la même couleur. Alors collez-le, et maintenant ils sont tous les deux de la même couleur. Nous pouvons également réduire la vitesse ici pour la vitesse des particules. J'aime que ce soit répulsif. Mais vous pouvez choisir n'importe quelle autre option que vous souhaitez ici. Et je peux choisir le polygone ici. Et mettons à jour cela. Et avant de prévisualiser les modifications, ajoutons une intersection à quatre colonnes. Cliquez donc sur cette icône en dehors de leur intersection. Allons-le là-dedans. Pour l'instant. Bien sûr, par défaut , il supprime deux colonnes. À l'intérieur de cette première colonne. Ajoutons un comptoir. Cliquez donc sur ce plus là et ici tapez compteur. Faites-le glisser ici et déposez-le dans la première colonne. Maintenant, la première chose que nous devons faire est de modifier les chiffres. Donc, selon le nombre, selon ce que c'est. Par exemple, si des étudiants sont inscrits. Donc, si vous avez peut-être 1200 étudiants, ou si vous avez plus de 1200 étudiants, mais dans cette fourchette, vous pouvez ajouter un gel C, 100 plus. Et maintenant, allons-y et changeons les couleurs de ces statistiques. Changeons la couleur en blanc sur le numéro et sur le titre. Il est également changé en blanc. Et vous remarquerez par défaut les polices sont Montserrat car nous avons appliqué Montserrat à la police globale. Et maintenant que nous sommes satisfaits de ces compteurs, il suffit de supprimer cela, puis de dupliquer cela. Nous avons déjà fait quelque chose de similaire à cela, et c'est la bonne chose avec Elementor. On y va donc. Nous disposons de quatre compteurs et nous pouvons les modifier individuellement. Avant de le faire, choisissons la section elle-même. Parce que nous devons séparer cette bordure du contenu car le contenu est trop proche de la bordure. Donc, en sélectionnant la section principale, puis en accédant rembourrage avancé, supprimez ce lien. Nous pouvons augmenter le rembourrage supérieur à quelque chose de 50. Et aussi pour les 50 derniers. Mettez à jour cela. Dans. Nous allons maintenant prévisualiser les modifications. Défilons vers le bas. On y va. Très joli. Maintenant, chacune de ces statistiques portera sur quelque chose de différent. C'est peut-être le cas, qu'est-ce que nous avons ici ? Années d'expérience, taux d'achèvement des cours. Nous avons donc aussi des pourcentages et tout cela. Vous pouvez déjà le deviner. Pour ajouter un pourcentage, il suffit de l'ajouter au suffixe. Et vous pouvez dire peut-être 8080 %. Réduction, remise, puis garantie de satisfaction à 100% . Et le dernier, ce que vous voulez faire. Disons que 700 étudiants reviennent. Alors peut-être qu'ils ont tellement aimé vos cours qu'ils sont revenus. Prévisualisons les modifications. Défilons vers le bas. Et c'est comme ça qu'il faut le faire. Génial. La prochaine chose que nous voulons faire est, bien sûr, de créer cette section, qui ressemble à cette section. Voyons donc comment le faire dans la prochaine leçon. 17. PROJET DE CLASSE: À la fin du cours, vous aurez l'occasion de renforcer ce que vous avez appris en construisant vous-même une page Web à partir de zéro. Et voici le contexte du projet. Propriétaire d'un magasin de vêtements en ligne, appelons-le John. Dans votre quartier, vous souhaitez créer une page de destination pour la nouvelle gamme de produits. Ils ont donc de nouveaux vêtements qu'ils veulent vendre. Et ils veulent créer une page de destination pour cette nouvelle gamme de produits spécifique. Ils vous ont contacté en raison de votre excellente réputation de design Web dans la communauté. Quelqu'un leur a dit que vous êtes très doué dans ce que vous faites. Maintenant, le site Web qu'ils exécutent est construit avec Elementor Ils auront donc besoin de quelqu'un qui sait utiliser Elementor. Construisez donc une belle page de destination qui convertira les personnes qui visitent cette page de destination en acheteurs. John vous a fourni tous les éléments que vous devez ajouter sur cette page de destination. Et par atouts, j'entends des images. Pour ce faire, commencez par télécharger le dossier des ressources du projet dans la description ci-dessous, puis utilisez ces images pour créer un site Web. N'oubliez pas de créer un en-tête collant pour permettre aux utilisateurs de naviguer sur le site Web lorsqu'ils défilent vers le bas. Assurez-vous d'avoir une section de héros attirant l'attention qui a une belle déclaration H1 visible, résumant ce qu'est la page et soyez aussi créatif que vous souhaitez quand il s'agit du que le reste de la page de destination, exception de la section héros et du pied de page, joue avec les différents éléments élémentaires que nous n'avons pas abordés dans la classe parce que vous avez peut-être remarqué, nous n'avons pas regardé tous les éléments que cet élément a à offrir lorsque nous construisons la page. N'oubliez pas d'ajouter des effets de mouvement, les différents éléments de votre page de destination et de rendre la page Web réactive. Donnez-le bien sur différentes tailles d'appareils. Une fois que vous avez terminé avec votre page de destination, effectuez une capture d'écran pleine page l'aide d'une extension de navigateur comme aller en pleine page et téléchargez-la dans la galerie du projet. Je vais jeter un coup d'œil à toutes les captures d'écran de votre page de destination et vous fournir des commentaires. Et cela vous donnera également un bon moyen de présenter ce que vous avez appris jusqu'à présent et d'obtenir des commentaires d'autres étudiants. Pour commencer, téléchargez le dossier zip point des ressources du projet dans la section description ci-dessous. Profitez du projet. 18. Section des cours à l'affiche: Il est donc temps de créer la section qui vient après le compteur, c'est-à-dire cette section qui contient les derniers cours ou les cours proposés. Alors, dans notre éditeur, bien sûr, la prochaine chose que nous devons faire est d'ajouter une section. Mais comme cette section l'est, cette section est tellement similaire à celle-ci, pourquoi ne pas dupliquer toute cette section, puis la personnaliser pour cette pièce en particulier. Nous allons donc dupliquer l' ensemble de la section comme ça. Nous y voilà maintenant. Je vais juste faire glisser ça. Ensuite, je commencerai à faire défiler avec molette de ma souris tout en maintenant le bouton de ma souris enfoncé. Et quand cet indicateur bleu apparaîtra, je le laisserai tomber là. Il a maintenant une marge de 50 au sommet, car c'est ce que nous avons dit. Pour cette partie. Je veux augmenter cela à 100 ou peut-être 150. Alors, en sélectionnant la section, ajoutez-en une. Nous avons maintenant 150 espacement ici. Changeons ensuite ces cours pour sélectionner un cours maintenant. Et maintenant, il ne vous reste plus qu'à venir dans cette boîte d'images. Alors choisissons cela et l'image, vous pouvez la modifier pour n' importe quelle image représentant ce cours spécifique. Réduisez cela pour le corps, remplacez le titre par le nom du cours. Par exemple, introduction à la mécanique. Et puis, bien sûr, une brève description. Et ensuite, ils peuvent commencer immédiatement. N'oubliez pas qu'il s'agit de catégories des différents cours. Il peut donc s'agir d'une catégorie quatre, conception Web et l'animation. Il s'agit donc de catégories ici. Mais quand nous venons ici, il agit de cours spécifiques. Et comme cette section contient des cours en vedette, vous pouvez dupliquer cette intersection de sorte que vous ayez environ six cours en vedette sur la page d'accueil. Mettons-le à jour. Changeons cela par quelque chose comme modélisation dans Blender. Le troisième peut être fondamentaux JavaScript. Mettons-le à jour. Et passons en revue les changements. Donc, faites défiler vers le bas. Très bien, donc on y va. Maintenant que nous en avons fini avec cette section, voyons comment créer cette section d' apprentissage autonome. Je vous verrai donc dans la prochaine leçon. 19. Section de liste: Bienvenue de retour. Nous y retournons. Vous remarquerez que cette section, la section accordéon, ressemble beaucoup à cette section d' apprentissage autonome. Seulement que nous n'avons pas d'accordéon ici, nous avons une liste. C'est donc ce sur quoi nous nous concentrerons pendant les prochaines minutes. Sinon, tout le reste est pareil. sautant vers notre éditeur, nous devons également dupliquer cette section. Ensuite, je vais le faire glisser. Une fois que nous y arriverons, je commencerai à faire défiler avec la molette du milieu de la souris. Et quand nous y arriverons, je vais juste le déposer. Il est livré avec tous les réglages, y compris la marge en haut. Et maintenant, tout ce que nous devons faire, c'est tout d'abord de inverser avec l' image de ce côté. Ensuite, je retirerai l'accordéon. Et maintenant, il nous reste ce beau texte que nous pouvons éditer. Nous pouvons mettre à jour deux pieds sur cette section. Je vais donc copier ça. Sélectionnez-le, collez-le là-dedans. Copiez cela, sélectionnez-le, collez-le là-dedans. Mettez à jour cela. Et maintenant, ce que nous devons faire, c'est passer à cette icône. Cliquez sur cette icône. Ici. Tapez la liste. Et nous avons une liste différente ici. Nous avons juste besoin de la normale, gentille qui vient avec Elementor par défaut. Déposons-le là-dedans et il y a une icône et du texte. Alors ouvrons le premier élément de liste et modifions ce qu'il y a. Je vais donc simplement copier ça là-dedans. Et on y va. Je vais répéter la même chose pour les deux. Maintenant, vous remarquerez qu'il s'agit icônes différentes, nous pouvons donc toujours les modifier. Donc, pour celui-ci, je vais toujours sélectionner une tique ou un jet. Je vais donc le sélectionner. Insérez pour le second. Vérifiez aussi. Et maintenant, nous avons trois dents. Mettez à jour cela. Et prévisualisons les modifications. Défilons vers le bas et voyons ce que nous avons obtenu. On y va. Une belle et belle section. C'est simple, il n'y a pas beaucoup de choses là. Allez-y et ajoutons un joli bouton juste en dessous du texte. Comme vous pouvez le constater ici, nous avons un appel à l'action. C'est le moment où nous ajoutons ce bouton dans le panneau de base. Il suffit donc de faire glisser le bouton juste en dessous du texte. Et même s'il est toujours actif, nous pouvons changer ce qu'il dit. Apprenez-en plus ou commencez. Maintenant, c'est notre appel à l'action. Il coïncide avec le style. Et bien sûr, le lien est ici. Où que vous voulez que les gens soient redirigés lorsqu'ils cliquent sur le bouton, c'est ici. Et si vous souhaitez que ce bouton ouvre un nouvel onglet, au lieu de rediriger les utilisateurs de cette page, vous pouvez toujours cliquer sur cette roue dentée et ouvrir le lien dans une nouvelle fenêtre. Un nouvel onglet s'ouvrira alors. Maintenant, je vais dans le style. Retirons ce rembourrage. Et cela va casser le rembourrage par défaut sur le bouton. Et ensuite, nous pourrons définir les nôtres. Alors, à gauche, donnons un 50. Et à droite, la même chose. Puis en haut et en bas, 1515. Donnons un 70 à gauche et à droite. C'est vrai. Ensuite, augmentons l'espacement entre le bouton et le texte de la liste ici afin que nous puissions sélectionner la liste elle-même. Marge avancée, puis augmente la marge en bas. Appuyez sur le bouton, émet, réduit la marge en haut. Réduisez cet espacement entre le bloc de texte et le bloc de texte ici. Mettez à jour cela. Et modifions également la couleur de ce bouton. Sélectionnez donc ce style de bouton. Passons à la couleur en vol stationnaire, en voulant être aussi bleu. Laissez-moi donc sélectionner ce style de texte. Copiez ceci. Sélectionnez ce bouton de style de bouton, survolez, couleur. Collons-le là-dedans. Donc, quand quelqu'un le survole, cela change à cela. Et quand quelqu'un le survole, on peut aussi définir quand c'est le cylindre, l'animation, peut-être quelque chose comme Bob. Et c'est de l'ampoule. Mettons cela à jour , puis prévisualiserons les modifications. Donc, faites défiler vers le bas. On y va. C'est génial. Alors, quelle est la prochaine étape ? Il est donc temps de travailler sur la section Témoignage. Et comme vous pouvez le constater, il a aussi des particules et un fond grisâtre. Voyons comment le faire dans la prochaine leçon. 20. Section des témoignages: Bienvenue de retour. Nous sommes donc en train de créer cette section Témoignages. Donc, sans perdre plus de temps, passons à notre éditeur. Et comme vous l'avez peut-être déjà deviné, ajoutons une seule section de colonne. La première chose, bien sûr, est de le sélectionner. Et bien sûr, la première chose à faire est d' aller à la marge avancée. Donnons-lui une marge supérieure de 100 pour la séparer de la section précédente. Et commençons par lui donner cette couleur d'arrière-plan. Alors allez dans le style, le type d' arrière-plan, le classique. J'irai ici et je lui donnerai un peu de gris proche du blanc, pas très sombre. J'aime bien ça. La prochaine chose que nous devons faire est de sélectionner le signe plus ici. Et vous remarquerez ici que nous avons ce H2 et H3. Nous pouvons donc simplement dupliquer cela. Dupliquez-le, déposez-le là-dedans. Dupliquez cela aussi. Et laissez-le juste en dessous de l'âge de deux ans. Et puis, bien sûr, poussons-le au centre. Sélectionnez-le, poussez-le vers le centre. Et maintenant, nous pouvons ajouter nos témoignages juste en dessous d'eux. Donc, en allant à cette icône, je vais taper des témoignages en testant la taupe. Et ce dont nous avons besoin, c'est ce témoignage d'IQ Kids Elements, Kid Light. Je le glisserai et je le déposerai juste là lorsque l' indicateur bleu apparaîtra. Et par défaut, celui-ci est déjà sélectionné. Mais celui que j'aime bien, c'est celui-là. Allez-y et choisissez celui que vous voulez. Par défaut, il n'affiche qu' un seul témoignage par diapositive. Et c'est parce que dans les paramètres, les diapositives à afficher sont définies sur une seule. Définissons-le sur trois diapositives à faire défiler. Bien sûr, c'est assez simple. Cela signifie que lorsque vous faites défiler, il ne doit faire défiler qu'une seule diapositive. Si vous avez plusieurs témoignages, vous pouvez définir deux ou trois témoignages par parchemin. Et allez-y et jouez avec tous ces autres paramètres n' ira pas profondément là-dedans. Nous voulons simplement remplir chaque témoignage avec du contenu. Fermons donc les paramètres et passons au témoignage. Pour le témoignage numéro un, vous pouvez donner un nom au client. Donc désignation, responsable marketing, coma, peut-être que la société est des sites Web de vitrages sites Web de vitrages ou quelque chose de ce genre. Quel genre de nom existe-t-il ? Ensuite, nous avons la revue de témoignages. Je vais donc simplement copier ce témoignage ici. Très bien, je ne suis pas activé, d'accord, je ne peux pas le mettre en évidence, donc je vais simplement copier ce texte. Copiez ça. Et collons-le ici. Nous allons le réduire un peu. Oui, j'aime bien ça. Alors, nous allons nous effondrer. Allez au deuxième témoignage. flammes timothées. Elle a un témoignage et ajoutons-en un de plus, donc je vais dupliquer ça. Et maintenant, nous avons deux flammes Timothy. Je vais changer le deuxième. C'est la mise à jour. Et maintenant, nous avons quatre témoignages. La raison pour laquelle nous avons quatre témoignages au lieu de trois, c'est parce que nous en avons également besoin pour pouvoir faire défiler. Il est donc en train de faire défiler car nous avons un témoignage supplémentaire à montrer. Si vous en avez trois, il n'y aura pas de défilement. Ensuite, passons à l'intérieur du style. Et si je réduit la mise en page, nous avons ici plusieurs paramètres sur lesquels nous pouvons travailler. Commençons donc par une évaluation. Nous pouvons modifier la couleur pour qu'elle corresponde à notre palette de couleurs. Ensuite, nous pouvons également réduire cela et modifier l'icône de devis. Pour l'instant, c'est bleu. Ça ne me dérange pas vraiment à quoi ça ressemble, donc pas de problème à ce sujet. Je ne vais donc pas y toucher. Ensuite, nous avons la mise en page. Passons à la disposition et au rayon de la bordure , disons, gardons cela à 20 pour qu'il ait un coin arrondi. Comme ça. La mise en page a été réduite. Et je pense que j'aime bien ce que ça ressemble jusqu'ici. La prochaine chose que nous voulons faire est donc d' entrer dans le témoignage du contenu. Et pour chaque témoignage, il faut ajouter une image. J'ai donc ouvert l'avatar client Bennett Daimler. Et nous allons entrer dans notre dossier de ressources. J'avais déjà préparé quelques images des gars. Commençons donc par Bennett. Comme ça. Nous allons effondrer ça. Il ouvre les flammes de Timothy. Fermons ça. Barbara s' effondre et le Alexandra le met à jour. Nous allons donc prévisualiser les modifications. Défilement vers le bas. On y va. Notre témoignage fonctionne, mais maintenant, remarquez que nous n' avons pas de rembourrage ici, et bien sûr ici. Et nous n' avons pas non plus les particules. Allons régler ça. Donc, en sélectionnant la section elle-même. Parce que tout d'abord, commencez par le rembourrage. Je vais casser ça. Et puis au sommet, nous avons besoin d'un rembourrage de 50. Au fond, nous avons besoin de 50. Donc, de nos jours, cet espacement agréable comme ça. Et ensuite, allons ajouter quelques particules. Allons donc allumer ça. Et il faut peut-être dire 90. Et ensuite, pour la couleur des particules, nous voulons lui donner un peu de gris plus foncé que l' arrière-plan pour qu'il soit visible. Et copions ce gris. Copiez ça. Cliquez n'importe où. Collons-le ici. Réduisez la vitesse à quatre, mais c'est à vous de décider. Ensuite, mettons à jour cela. Sureffet. Mettez à jour cela et prévisualisez les modifications qui défilent vers le bas et voyons ce que nous avons. Oui. Maintenant, il est beaucoup plus beau. Nous pouvons rendre ces particules un peu plus sombres. Ils semblent trop crier. Donc, en entrant ici, je vais faire glisser ça un peu vers le haut pour l'évanouir. Copiez ça. Collez-le là-dedans. Mise à jour ici. Prévisualisons les modifications une fois de plus. Défilement vers le bas jusqu'au bas. Maintenant, ils ont l'air beaucoup mieux. Ils ne sont pas trop sombres. Et c'est ainsi que vous pouvez créer la section Témoignage. Voyons ensuite comment créer la section Appel à l'action qui contient le formulaire d'inscription avant de créer le dossier. Je vous verrai donc dans la prochaine leçon. 21. Section du formulaire d'appel à l'action: Nous en avons presque fini avec le contenu de la page de destination. Nous avons maintenant la section « Appel à l'action » qui comporte un formulaire et un pied de page. Nous allons donc créer cette section. Alors, en passant par notre éditeur, nous devons bien sûr ajouter une section à deux colonnes. Et donnons une marge supérieure d'environ 100100 et une marge inférieure de 100. Et c'est parce que, comme vous le voyez ici, une fois cette section terminée , nous aurons besoin d'un espacement entre la section et le pied de page. Et rappelez-vous que nous créons la nourriture est séparée, comme nous l'avons fait avec l'en-tête. Je vais donc aller de l'avant et le mettre à jour. Et ici, nous pouvons ajouter que nous pouvons dupliquer cela. Je vais donc faire glisser ça dans cette colonne. Et ensuite, il suffit de copier ça. Cliquez donc sur ça. Et puis ici, je vais coller le texte. Alignez-le à gauche comme ça. Donc, ici, allons-y et ajoutons un code court. Donc, en cliquant sur ce plus, vous découvrirez cette zone et nous pourrons taper un code court. Il suffit de taper un filtre court qui fera apparaître cette option et nous pourrons la déposer là-dedans. Ce que nous devons maintenant faire, c'est d'accéder au backend de notre tableau de bord et de créer un formulaire. Et puis le formulaire aura un code court, un petit code que nous pourrons entrer, coller ici. Et le formulaire s'affichera ici dans cette section. Revenons donc à l'intérieur de notre tableau de bord. Allons dans Plugins et Add New car nous n' avons pas encore installé de plugin de formulaire, donc nous pouvons aller de l'avant et installer. Mon plugin de formulaire préféré s'appelle formulateur. Il a juste tout ce dont j'ai besoin, simple à utiliser. Je vais donc aller de l'avant et taper le formulateur. Et c'est par WP MU Dev avec 300 000 installations actives dans 948 critiques cinq étoiles. Je vais donc l'installer maintenant. C'est un plugin très génial que j' aime utiliser car beaucoup de ses fonctionnalités gratuites sont primes sur la plupart des autres plug-ins de formulaire. Il offre donc gratuitement des fonctionnalités haut de gamme. C'est vrai ? Allons de l'avant et activons. Et on y va. Il est maintenant installé. Et vous le trouverez presque au bas de ce menu ici. Je vais donc former de l'eau et des formes pour les limiteurs. Cliquez une minute ou pour que nous puissions accéder à sa page de destination dans le tableau de bord. Très bien, donc c' est à quoi ça ressemble. Nous avons la possibilité de créer un formulaire, créer n'importe quel type de formulaire à partir de l'un de nos modèles prédéfinis ou de construire le mien à partir de zéro. Je vais donc créer et nous avons déjà créé des formulaires. Et nous voulons créer un formulaire d'inscription à la newsletter. Je vais donc le sélectionner et continuer. Ensuite, je lui donnerai un nom, inscrirai et je créerai. Et nous y voilà. Par défaut, il est prérenseigné avec le prénom et l'adresse e-mail, puis le bouton S'abonner, et nous pouvons le prévisualiser. Donc, le prénom, l'adresse e-mail et l'abonnement. Je vais fermer ça et je le publierai. Maintenant, nous avons ce code court. N'oubliez pas que j'ai mentionné le code court. Nous pouvons maintenant le copier en cliquant sur cette icône ici. Maintenant, le raccourci a été copié avec succès. Ou si je ferme cela, vous pouvez aller à cette roue dentée et copier le code court et nous recevons toujours le même message. Et avec ce code court copié, vous pouvez revenir sur notre page ici et le coller ici. Si j'applique ces modifications de mise à jour à la page, cliquez sur Mettre à jour. Prévisualisons les modifications. Faites défiler vers le bas. Et on y va. Un bon formulaire d'inscription qui a un appel à l'action. Ce que nous devons faire, c'est tout d'abord de changer la couleur de ce bouton pour rimer avec le reste des boutons ici sur le site. Passons donc à l'orange. En revenant à l'intérieur de notre tableau de bord, à l'intérieur du formulateur, passons à l'apparence de ce formulaire. Et supprimons d'abord ces bordures en choisissant l'option plate. Il y a d'autres options ici, mais j'aime bien plat. Et puis passons aux couleurs et choisissons le costume. Nous ne voulons pas utiliser les couleurs par défaut. Et pour le bouton Soumettre, sélectionnez. Cliquez sur ce bouton ici. Et nous allons taper F 1524. Et c'est en train de se dupliquer. Je ne sais pas pourquoi s'il est égal. Oui. Et puis en vol stationnaire, nous voulons que ce soit peut-être bleu foncé. Je voulais donc sélectionner cette copie de style. Ensuite, je vais ici, essentiellement là-dedans. Donc maintenant, si nous l'avons prévisualisé, oui, comme ça, fermez ça. Et quand il est mis au point, que je veux avoir la même couleur bleu foncé, j'ai généralement la même couleur de mise au point ou la même couleur active que la couleur de survol. Très bien, nous allons donc mettre à jour les modifications. Revenons à notre page. Sélectionnez ce formulaire. Cliquez sur Appliquer. Très bien, faisons défiler le formulaire lui-même vers le bas. Cliquez donc sur Aperçu des modifications. Faites défiler vers le bas. Et on y va. En vol stationnaire, il mange ce bleu foncé. Une autre chose que vous voudrez peut-être faire est peut-être d'ajouter ou de supprimer des champs ici. s'agit donc pas d'un cours de quatre minutes. Il existe de nombreux tutoriels sur YouTube sur l' utilisation de ce plugin spécifique pour créer des formulaires. Mais en revenant à l'intérieur des champs, si vous ne voulez pas choisir le prénom de la personne, vous pouvez le supprimer. Et maintenant, il ne vous reste plus que le champ d'adresse e-mail. Mettons-le à jour. Et passons au front end. Sélectionnez le formulaire, appliquez à nouveau les modifications. Très bien, alors allons-y et prévisualisons les modifications. Donc, faites défiler vers le bas. Et on y va. Maintenant que nous avons terminé cette section d'appel à l'action, voyons comment créer le dossier. Dans la section suivante, je vous verrai sous peu. 22. 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. 23. Créez le pied de page: Il est maintenant temps de créer le pied de page. Avant d'aller de l'avant et d' ajouter les animations sur les différents éléments du site Web et de rendre l'en-tête collant. Nous allons donc commencer par créer un dossier. Et bien sûr, comme je l'ai mentionné un peu plus tôt, créera la photo séparément la même manière que nous avons créé la tête. Je vais donc cliquer sur ce menu Burger et Quitter to Dashboard parce que nous fini avec le contenu du corps. Je vais encore sortir. Passons maintenant aux éléments. Gardez l'en-tête, le pied de page ou le trajet. Allons de l'avant et disons Add New. Ici. Je vais lui donner un dossier de noms. Ensuite, le type est un dossier. Vous devez être disponible sur l'ensemble du site Web et il devrait être actif. Nous allons donc sauvegarder les modifications. On y va. Ensuite, nous allons modifier. édition du contenu sera redirigée vers le front-end où nous pouvons maintenant le concevoir. Nous y voilà. Maintenant, dans cette leçon, je veux vous montrer comment utiliser les modèles de kit d'éléments. Maintenant, tout au long des leçons, vous avez peut-être remarqué que j' utilisais cette icône ici. Mais que font ces autres icônes ? Il s'agit de l'icône de modèle élémentor par défaut. Lorsque vous cliquez dessus, vous serez redirigé vers les modèles créés par Elementor. Et vous pouvez également avoir accès à vos propres modèles, si vous en avez téléchargé un. Nous avons également des blocs, blocs que vous pouvez utiliser pour créer les différentes parties de votre site Web. Et celui-ci est ici par éléments kit. C'est donc celui qui nous intéresse. Et je veux vous montrer comment concevoir comment gagner du temps en utilisant différents modèles fournis par certains de ces plugins. Comme vous pouvez le voir, je l'ai ouvert et je suis allé directement aux sections. Et ici, nous avons des modèles de pied de page, des sections d'en-tête. Nous avons des sections d'appel à l'action, accordéon d'image pour les magasins de beauté. De nombreux modèles que vous pouvez importer gratuitement sur votre page. C'est donc celui que je veux importer, alors je vais simplement cliquer sur Insérer. Et on y va. Une belle photo déjà créée pour nous. Je veux faire glisser ça, laissez-moi voir. Je veux les faire glisser là-dedans. Je veux m'en débarrasser. Il nous reste donc avec ça. Et si je sélectionne la section elle-même et que je vais à l'intérieur avancé, vous remarquerez que nous avons une marge supérieure de 400. Je veux donc m'en débarrasser parce que si nous laissons cela à 400 ans, quand il arrivera à ce stade, après cet appel à l'action, Avant d'y aller plus loin, nous aurons un espace ridiculement énorme dont nous n'avons pas besoin parce que nous avons déjà ajouté une marge inférieure de 100 à cet appel à l'action. Maintenant que c'est fini, allons de l'avant et remplacons ce logo par le nôtre. Je vais donc le sélectionner. Et lorsque vous avez importé le modèle, il a ajouté des images d' espace réservé par défaut comme celle-ci. Alors, ne soyez pas perplexe et ne vous demandez pas quels VC. Je veux donc sélectionner mon logo et insérer des médias, et c' est parti. Très joli. Vous pouvez également mettre à jour ce texte en fonction de ce que vous vouliez dire. Et nous pouvons aller de l'avant et le coiffer. Donc, la topographie, changez-la en Montserrat. Il s'agit déjà de Montserrat et ce sont des liens utiles. Vous pouvez les changer par ce que vous voulez qu'ils disent. La prochaine chose que je veux faire est de changer la couleur de cet aliment, de cet arrière-plan. Alors, en sélectionnant la section elle-même, je vais puiser dans cet endroit et je copierai ce bleu marine. Et j'irai ici. Alors qu'il s'agit toujours d'un arrière-plan de style sélectionné, collez-le là-dedans et mettez-le à jour. J'ai aussi l'impression que je devrais faire glisser ça là bas. Pour l'équilibrer. Mettez à jour cela. Prévisualisons les modifications. Très bien, vous remarquerez maintenant qu'il s'agit d'un abonnement. Maintenant, abonnez-vous aujourd'hui, appelez à l'action. Cela signifie que nous avons besoin d'un formulaire ici. Et nous pouvons simplement utiliser le même formulaire que celui que nous avions créé. Je vais donc copier ce court code. Et puis en revenant ici, ajoutons un court code. Déposez-le juste en dessous, puis collons ça là-dedans. Mise à jour. Passons en revue les changements ou roulons comme ça. Maintenant que c'est devenu plus grand que cela, je pense que nous devrions prendre mal les icônes sociales. Je vais les faire glisser et les déposer là-dedans. Et je vais augmenter la marge supérieure sur ce texte ici pour lui donner un peu d'espace de respiration en haut. Prévisualisons ensuite les modifications. Et on y va. Voici donc comment créer un dossier. Vous pouvez aller de l'avant et jouer avec tout le reste, avec toutes les connaissances que vous avez acquises jusqu'ici, ce ne sera pas une tâche trop difficile à prendre en charge. En fait, c'est un défi pour vous. Découvrez comment vous pouvez le personnaliser davantage. Maintenant, nous voulons voir comment la page ressemble entièrement à la photo. Je veux donc entrer dans les pages du tableau de bord. Ensuite, je veux cliquer sur Afficher sur la page d'accueil. Nous pouvons donc y jeter un coup d'œil de haut en bas, en faisant défiler vers le bas depuis le haut. Là, nous allons jusqu'au pied de page. La prochaine chose que nous voulons faire maintenant, vous avez remarqué, c'est que l'en-tête n'est pas collant et que ces différents éléments ne sont pas animés. Nous devons ajouter des effets de mouvement à nos éléments. Nous allons le faire dans la prochaine leçon. Avant d'aller de l'avant et rendre toute la page de destination réactive sur différents appareils. Je vous verrai bientôt. 24. En-tête collant: Et bon retour. Dans cette leçon, nous voulons rendre l'en-tête collant. Donc, si je commence à faire défiler, vous remarquerez qu'en ce moment il disparaît avec le reste du contenu, ce que nous voulons faire, c'est nous assurer qu'il ne disparaît pas. Alors, comment pouvons-nous faire cela ? Allons dans le tableau de bord et nous devrons modifier l'en-tête à l'intérieur du kit éléments, pied de page de l'en-tête. Alors ouvrons ça. Nous avons maintenant le pied de page et l'en-tête. Alors, bien sûr, passons à l'édition d' en-tête avec Elementor, et je cliquerai avec le bouton droit de la souris sur le lien ouvert dans nouvel onglet afin que nous puissions le modifier dans un nouvel onglet. Je vais passer à cet onglet. Et nous y voilà. Bien sûr, l' en-tête est maintenant modifiable. Et rappelez-vous que l'un des plugins que nous avons installés était les effets d'en-tête Tiki. Si je pouvais juste sauter rapidement sur le tableau de bord en passant à l'intérieur des plugins. Nous avons installé des effets d'en-tête collants pour Elementor pendant que nous installions Elementor. C'est donc le moment d'utiliser ce plug-in. Et tout ce que nous avons à faire est de sélectionner l'en-tête et d'aller à l'intérieur avancé et de trouver l'option effets d'en-tête collant juste en dessous de avancé. Alors développons cette activation. Et maintenant, l'en-tête est déjà collant. C'est juste que nous ne pouvons pas faire défiler cette page pour la voir en action, mais nous le verrons sous peu. Donc, je vais d' abord sauvegarder cela avant d'apporter des modifications. Et maintenant qu'il est enregistré, je veux entrer dans le tableau de bord et passer à l'intérieur des pages. Voici notre page de destination. Cliquez donc avec le bouton droit de la souris sur le lien ouvert dans un nouvel onglet afin que nous puissions regarder la page dans un nouvel onglet et faire défiler pour voir si l' en-tête est maintenant collant. Très bien, maintenant, faisons défiler. Et on y va. L'en-tête est maintenant collant, mais maintenant vous remarquerez qu' il est un peu grand. En d'autres termes, il prend beaucoup de place pendant que nous défilons et nous n'avons pas vraiment besoin de tout cet espace. Alors, comment pouvons-nous résoudre ce problème ? Vous retournez dans notre éditeur ? Eh bien, c'est toujours sélectionné et nous sommes toujours dans des effets d'en-tête collants. Appelons vers le bas et cherchons l'en-tête de rétrécissement. Activez donc ça. Et faisons en sorte que ce soit 50 %. Et réduisons également le logo. Faisons également 50 %. Cela signifie que le logo sera de 50 %, la taille d'origine. Et la hauteur de la tête sera également 50 % supérieure à celle de l'original. Nous allons donc mettre à jour cela. Et passons à l'intérieur de notre page et laissez-moi la recharger. donc avec le bouton droit sur recharger. Donc, très bien, alors voyons ça maintenant. En action. Je commence à faire défiler. poids. Nous devons réduire la marge sur l'en-tête. Revenons ici. Nous allons sélectionner le menu lui-même. Cliquez n'importe où dans cet élément bleu. C'est donc sélectionné avancé. Il va à l'intérieur de la marge. Réduisons la marge inférieure jusqu'à 20, et la marge supérieure jusqu'à 20 points négatifs. Cela permet également de réduire la taille du logo. Je vais juste le regarder, peut-être quelque part. Ensuite, mettons à jour cela. Très bien, revenons à l'intérieur cette page et rechargeons la page. Défilement maintenant. Oui, donc maintenant, c'est une belle hauteur. Et il a l'air, je pense qu' il est beau. C'est donc comment rendre la tête collante. Dans la leçon suivante, Voyons comment rendre l'en-tête réactif. Parce que maintenant, si nous appuyons sur Control Shift I pour accéder aux outils de développement Control Shift I, puis cliquez sur cette icône de bascule du mode réactif et cliquez sur ce menu déroulant pour sélectionner un appareil comme au pixel cinq, vous remarquerez que l'en-tête n'est pas réactif pour le moment. En d'autres termes, il n'est pas bon sur les appareils mobiles, sur les smartphones. Dans la leçon suivante, Voyons comment rendre cet en-tête agréable sur les smartphones. Je vous verrai bientôt. 25. En-tête réactif: Bienvenue de retour. temps de rendre cet en-tête meilleur sur les smartphones. En revenant à notre éditeur, ici, je cliquerai sur cette icône du mode réactif pour révéler ces paramètres réactifs. Et vous verrez que nous avons le mode tablette et le mode smartphone. Nous allons donc aller à l'intérieur de ces deux-là pour que ça paraisse bien sur ces appareils. Il a déjà l'air bien sur le bureau, c'est là que nous en sommes en ce moment. Passons donc en mode tablette. Et c'est comme ça que ça ressemble sur les tablettes. N'oubliez pas que nous avons deux colonnes. Si je peux passer en mode tablette, bureau. N'oubliez pas que nous avons cette colonne qui contient le logo et que nous avons cette colonne qui contient le menu. Donc, lorsque nous sommes passés à la tablette, nous avons toujours les deux colonnes, mais elles sont maintenant empilées l'une sur l'autre. Et ce n'est pas ce que nous voulons. Nous voulons qu'ils soient côte à côte. Le menu sur le côté droit et le logo sur le côté gauche. Si nous revenons au mode bureau, cette section entière, la section d'en-tête est 100 % et ces deux colonnes sont divisées en pourcentages. Il s'agit peut-être de 90  % et de 10 %. Donc, si nous revenons à l'intérieur des tablettes, si nous sélectionnons la colonne qui contient le logo. Bien sûr, maintenant, c'est à 100 %. Si nous entrons ici et que nous tapons quelque chose de 50 % et que nous touchons d'abord à Entrée, remarquez que rien ne se passe. Et c'est parce qu' il y a un petit bug dans Elementor qui nous oblige d'abord à développer cela juste un peu nos changements dans le mode tablette prennent effet. Vous avez remarqué que lorsque je fais glisser ça un peu vers la gauche, les changements sont entrés en vigueur. Ainsi, la première fois que vous passez en mode tablette, assurez-vous d'abord de choisir ce côté ou cet autre côté et faites-le glisser un peu. De cette façon, les changements que nous effectuons en mode tablette seront visibles à mesure que nous travaillons dessus. La deuxième chose à faire est donc sélectionner la colonne qui contient le menu. Et faisons-en 50 pour cent aussi. Maintenant, cela le pousse vers le bon côté parce qu' s'agit de 50 % et de 50 % pour constituer 100 %. Tant que nous y sommes encore, je sélectionne le menu lui-même en sélectionnant ces éléments. Et ces modifications apportées à la modification des éléments obtiennent le menu de navigation. Et je veux entrer dans la marge et casser les paramètres par défaut. Et maintenant, cela amène ces mauvais à se concentrer. Et ce que nous voulons faire, c' est le pousser un peu vers le bas en augmentant la marge supérieure. Augmentons également la bonne marge pour la pousser vers l'intérieur un peu comme ça. Maintenant, vous remarquerez qu'il fait sombre parce qu'il est sur un fond sombre. Je vais donc entrer dans le style. Laissez-moi réduire l'emballage du menu et nous avons le style hamburger. Je vais donc étendre ça. Et à l'intérieur, nous avons différentes parties à éditer. la première partie, nous voulons modifier le type d'arrière-plan. Je vais cliquer dessus. Et puis donnons une couleur. C'est la couleur que nous voulons. Je pense que ça me plait. Mettez à jour cela. Et si vous le souhaitez, vous pouvez également réduire davantage cette colonne de logo. Nous pouvons donc le sélectionner et le faire peut-être 20 %. Et nous allons faire 80 %. Parce que s'il s'agit de 20 %, cela doit être de 80  % pour faire 100 %. Donc, sélectionnez-le, et maintenant c'est de retour jusqu'à la fin. Mettons-le à jour. Et puis, avec cela, je pense que j'aime bien l'apparence du menu en mode tablette. Maintenant que les modifications sont enregistrées, passons à la page où nous avons eu cette vue. Je vais recharger cette page, alors Contrôlez R. et ensuite je passerai en mode tablette. Alors peut-être iPad Air. Et c'est ainsi que le menu se présente sur une tablette. Je pense que ça a l'air bien, mais remarquez que nous avons une marge importante ici, mais ici, le logo touche presque le bord. Augmentons la marge de ce côté-là. Alors, en sélectionnant cette colonne, passons à l'intérieur de la marge avancée. Augmentons la marge gauche jusqu'à ce point. Peut-être 12 ans. Mettez à jour cela. Augmentons également le petit peu marginal supérieur. Mettons-le à jour. Allez à l'intérieur de cet endroit, Contrôlez R pour vous rafraîchir. Et maintenant, nous avons un bon espacement autour. Ils vont rentrer ici. Il est temps de le rendre réactif sur les smartphones en sélectionnant l'icône mobile. Et comme vous pouvez le constater, nous devons faire la même chose que sur les tablettes. Nous devons faire en sorte que ces deux colonnes occupent 100 % en leur donnant des pourcentages différents. Donc, en sélectionnant la colonne du logo, Allons à l'intérieur de la disposition. Gardons ça, peut-être 50 %. Et nous allons sélectionner la colonne de menu. Donnons également un montant de 50 %. Et maintenant, les deux menus sont correctement alignés. Et parce que nous les avions configurés en mode tablette, ils sont déjà beaux dans une certaine mesure. Maintenant, tout ce que nous devons faire, c'est d'apporter quelques ajustements supplémentaires au menu latéral qui apparaît lorsque menu latéral qui apparaît lorsque vous cliquez dessus sur votre appareil mobile, laissez-moi cliquer dessus pour voir ce que nous voulons dire. Lorsque nous cliquons dessus. Nous dévoilons ce menu ici. Nous avons déjà quelques paramètres de base. Donc tout d'abord, si je réduit l'enveloppe de menu, nous avons le logo du menu mobile. Cet espace blanc ici sert donc d'un logo pour ce menu de smartphone. En revenant à l'intérieur du contenu, vous remarquerez que nous avons ici une section à partir des paramètres du menu mobile. Donc en ouvrant que nous avons le logo du menu mobile, si je dis Choisir une image, vous pouvez ajouter un logo pour ce menu. Et j'avais déjà téléchargé ce logo. Allez-y et téléchargez le vôtre. Et je cliquerai sur insérer un média. Et si nous cliquons dessus, nous avons maintenant ce logo qui apparaît là. Si je ferme cela, ce logo est différent de ce logo car remarquez que c'est le cas, a du texte blanc et il indique des cours. Et si j'ouvre cela dit des modèles. Il s'agit donc d'un logo complètement différent de celui que nous avons téléchargé pour le logo principal. Gardez cela à l'esprit. La prochaine chose que nous voulons faire est de modifier la marge autour de ce logo car remarquez ici que nous avons un bel espacement, mais ici, il touche presque le bord. Nous allons donc à l'intérieur du style, du menu mobile, du logo, de la marge. Nous allons casser cette marge par défaut. Et à gauche, augmentons la marge. Comme ça. Je pense que le poste m'a déjà plu. Je n'irai pas trop loin. Mais allez-y et jouez avec ces paramètres pour voir à quel point vous pouvez être créatif avec le vôtre. Le prochain problème que nous voulons modifier est ce bouton de fermeture. Et nous le faisons en entrant dans l' ouverture de style hamburger que nous avons le bascule hamburger. Si je ferme ça, c'est celui-là. Le bascule de hamburger est celui-ci. Et si nous ouvrons le menu, le menu latéral et que nous faisons défiler vers le bas, nous avons également la bascule fermée. Maintenant, c'est celui-là. Nous pouvons donc modifier le type d'arrière-plan lorsqu' il est dans l'état normal. Et nous pouvons lui donner une couleur, cette couleur. Et en survol, nous pouvons également lui donner une couleur, mais lorsque vous utilisez un téléphone portable, vous ne passez pas le doigt sur les icônes. En gros, tu les touches. Je ne pense donc pas que cela ait un sens. Donc, je vais juste le laisser comme il est. Mettons-le à jour. En vol stationnaire, ces couleurs sont belles, mais si vous voulez les changer, vous pouvez toujours venir, laissez-moi fermer. C'est ça. Peut toujours arriver aux éléments de menu, sous-menu. Tous ces paramètres se trouvent dans ces trois panneaux. Alors allez-y et jetez-les et voyez à quel point vous pouvez être créatif avec cela. Avec tous ces changements sauvegardés. Allons à l'intérieur de notre page ici. Et maintenant, si nous actualisons cette page, Contrôlez R, et que nous basculons sur n'importe quel smartphone comme le pixel cinq ou peut-être que l'iPhone 12s sont nombreux, c'est génial. Et si nous ouvrons la barre latérale, c'est comme ça. Passons au pixel cinq et voyons à quoi il ressemble. Permettez-moi de terminer ça. C'est comme ça que ça ressemble sur le pixel cinq. Passons à, laissez-moi voir Samsung Galaxy. Et c'est comme ça que ça ressemble sur Samsung Galaxy. Et c'est comment rendre l'en-tête réactif sur les tablettes et les smartphones. Dans la leçon suivante, Voyons comment rendre le reste du contenu réactif sur ces appareils. Avant de terminer le cours, je vous verrai bientôt. 26. Section du corps réactif: Bienvenue de retour. Il est maintenant temps de rendre le reste du contenu réactif sur les tablettes et les smartphones. Revenons donc à l'intérieur de notre tableau de bord, avant d'entrer dans le tableau de bord, rappelez-vous c'est ici que nous modifiions l'en-tête. Maintenant, nous en avons fini avec cette partie. Nous pouvons aller de l'avant et quitter le tableau de bord. Le tableau de bord est déjà ouvert ici. Je vais simplement fermer cette page parce que nous ne l'utilisons plus. Fermez maintenant cette page car elle reviendra ici pour voir à quel point la page est réactive. Je vais donc y aller et fermer ça. J'avais quelques pages ouvertes. Je retourne ici. Ce que nous voulons faire, c'est modifier cette page avec Elementor car nous rendons le contenu du corps principal réactif. Et je vais passer à cet onglet. Et nous y voilà. Bien sûr, la première chose à faire est de cliquer sur ce mode réactif. Je peux révéler ces trois modes. Passons ensuite au mode tablette. Nous y voilà. Rappelez-vous que lorsque vous passez en mode tablette pour la première fois, le mode tablette change, est réglé, ne sera pas visible. Donc, si nous saisissons cela et que nous le tirons légèrement, les changements que nous avions déjà apportés seront visibles. C'est un petit bug que j'ai remarqué dans Elementor. Ce n'est pas si grave, car c' est ainsi que votre site Web aura l'air sur les tablettes, pas comme il l'a fait il y a quelques instants. Et maintenant que nous en avons, la première chose que nous devons faire est que j'aime faire de ces colonnes une largeur de 100 %. Vous voudrez peut-être les laisser à 5050 %, mais j'aime juste choisir celui-ci dans la largeur de la colonne sous Disposition et en faire un 100% comme ça. Ensuite, sélectionnez-le, le texte lui-même. Et poussons-le au centre. Maintenant, vous voudrez peut-être le redimensionner en fonction de vos préférences. Donc, si nous entrons dans la typographie de style, vous pourriez la redimensionner comme ça. Et maintenant cet espace est trop grand, nous pouvons donc entrer dans la section elle-même. Puis avancé. Cassons ce rembourrage comme ça. Et ça a déjà l'air bien. Vous voudrez peut-être augmenter ce rembourrage en haut, mais je vais le laisser comme ça. Nous allons ensuite sélectionner ce texte. Allez à l'intérieur du style, alignez-le au centre. Ensuite, sélectionnons ces boutons. Maintenant, vous remarquerez que si je les aligne au centre, cela ne fonctionne pas. Ainsi, une façon de contourner consiste simplement à augmenter la marge à gauche. Alors qu'ils sont toujours sélectionnés, passez à l'intérieur de la marge avancée. Et puis augmentons la marge sur l'atome gauche, peut-être 50, disons 120. Je pense qu'ils sont maintenant au centre. Je vais donc le mettre à jour. Il s'agit de devenir créatif. Parfois, vous risquez de toucher des murs de briques et vous devez faire preuve de créativité et trouver des moyens de surmonter vos défis. Nous allons donc sélectionner l'image. Notez qu'il est toujours à 50 % de largeur. Nous allons donc sélectionner la colonne et lui donner 100 %. Et maintenant, c'est à 100 %. Et une bonne chose à propos de l'élémentaire est qu'elle vous permet d' inverser conditionnellement l'ordre de ces colonnes en fonction l'appareil sur lequel l' utilisateur les consulte. ce moment, c'est d'abord le bloc de texte, puis l'image, mais nous pouvons l' inverser lorsque quelqu'un le voit sur une tablette. Si je sélectionne la section elle-même et passe dans Advanced Responsive, nous pouvons inverser les colonnes sur tablette ou sur mobile. Faisons-le sur des tablettes. Si je le sélectionne. Maintenant, ils sont inversés. Il s'agit d'abord de l'image, puis du bloc de texte. Et si nous revenons au mode bureau, ils sont toujours dans leur ordre d'origine. Ils sont donc conditionnellement réglés pour inverser en fonction du passage de l' appareil à la tablette, vous avez toujours ce bogue. Mais si nous développons un peu cela, nous voyons maintenant le résultat final. C'est donc que je dirai mise à jour avant perdre tout changement dans notre défilement vers le bas parce que nous en avons fini avec la section héros. Je pense que tout va bien dans cette section. Outre le fait que ces colonnes sont trop proches du bord. Je vais donc sélectionner toute la colonne qui les contient. Allez à l'intérieur avancé. Brisez ce rembourrage et nous voulons lui donner un rembourrage gauche et droit de 20. Donc, à gauche et droite, il suffit de regarder à droite, un 20e. Nous avons donc maintenant un bon espacement ici. Allons de l'avant et sélectionnons cette colonne. Répétons ce que nous venons de faire. Je l'aime à 100 % pour le bloc de texte et ce 100 %. Donc, en sélectionnant cette colonne à 100%, puis sélectionnez ce texte, alignez-le au centre. Celui-là aussi. Veuillez également envoyer un texto. Les côtés, la tuile, le centre de ligne. C'est l'accordéon. Nous pouvons l'aligner. Laissez-moi juste écrouler ça. Je pense que c'est bien comme ça. Seulement que nous devons sélectionner cette colonne une fois de plus et lui donner un bon rembourrage à droite et à gauche. Donc, disons ça. La norme est de 20. Maintenant, nous avons un beau rembourrage tout autour. Donnons à cela une largeur de 100 %, n'est-ce pas ? Juste comme ça. Ensuite, nous avons le comptoir. Bien sûr, ces chiffres ont l'air trop gros, donc je vais sélectionner le premier compteur. Entrez dans la typographie de style, peut-être un 40. Donc, ce que je peux faire, c'est copier. Ensuite, collez le style. Cela va simplement coller la taille que nous avons. Style de collage. Je n'aime vraiment pas la façon dont ces textes passent à la ligne suivante. J'aimerais peut-être que ce soit la satisfaction, juste de la satisfaction. Et pour celui-ci, passons au contenu ou simplement aux étudiants. Et maintenant, ils sont tous en une seule ligne. Mais le fait est qu'une fois que vous avez supprimé certains textes, même en mode tablette, même en mode bureau, vous les aurez toujours supprimés. Voici quelques-uns des changements qui prennent effet sur tous les modes. Gardez cela à l'esprit. Revenir en mode tablette. Élargissons-le un peu. Très bien, passons donc à la section suivante. Vous savez déjà ce que nous devons faire. La sélection de la colonne coïncide avancée, à gauche, 2020. Et maintenant, nous avons un bon espacement. Sinon, tout le reste semble déjà bien. Ici, bien sûr, 100 %. Basé sur 100% également. Assurez-vous également de lui donner un bon rembourrage à gauche et à droite. 2020. Et nous pouvons également centrer cette gentillesse. Aligner le style, au centre. Nous ne pouvons pas les aligner, mais je pense qu'ils sont déjà à la recherche. Bien. Commencez maintenant le bouton lui-même, nous pouvons le pousser au centre comme ça. Mettons-nous à jour avant de perdre toute modification. Continuons à faire défiler. Les témoignages. l'air bien. Donnons 100 % à ça. Nous allons sélectionner les textes, les aligner sur le centre. Sélectionnez la colonne ici, soit 100 %. Bien qu'il soit encore sélectionné, Advanced 2020. Et je pense que ça a l'air bien maintenant. Nous allons donc mettre à jour cela. Maintenant. La partie restante est le dossier. Et pour rendre la photo réactive, nous faisons la même chose que nous avons fait avec l'en-tête. Nous allons donc à l'intérieur des éléments kid light, dossier d' en-tête et éditons le pied de page Elementor dans le front end. Essayez de le rendre réactif sur les appareils à outils. Donc, à ce stade, je veux vous laisser cela comme un défi, suivi ce processus et faire la réponse photo C. Donc, passer à notre page de mode responsive, regardons ces appareils. Essayons d'imiter un nouvel appareil. Mais avant de le faire, contrôlons R pour actualiser la page pour que les modifications prennent effet. Vous remarquerez maintenant que tout est correctement aligné , sauf les boutons. Défilons vers le bas. Alors que nous vérifions toutes les autres parties. Tout a l'air super génial , sauf ces deux boutons. Voyons donc ce qu'il faut faire à leur sujet. En revenant ici, tout d' abord, passons à la vue mobile. Sélectionnez les deux boutons. Alors, brisons la marge. Ou un téléphone portable. Si nous entrons à l'intérieur, en mode tablette, toujours bien. Et en mode immobile, ils ont fière allure aussi. Nous allons donc mettre à jour cela. vous suffit donc de sélectionner les boutons et de casser la marge. Maintenant, revenons ici, Contrôlez R pour rafraîchir la page. génial, donc j'aime bien ce que ça ressemble. Maintenant, notre page est beaucoup plus présentable sur les tablettes et les smartphones, ainsi que sur les ordinateurs de bureau. Allons de l'avant et animons ces différents éléments sorte que lorsque quelqu'un visite la page Web pour la première fois, fur et à mesure qu'il défile, les différents éléments apparaissent de manière animée. Juste pour améliorer l'expérience utilisateur. Voyons comment faire cela. Au cours de la prochaine leçon. Je vous verrai bientôt. 27. Ajouter des effets de mouvement: Bonjour, bon retour. Notre page de destination est désormais entièrement réactive sur les différents appareils. Mais une autre chose que nous devons faire est d'ajouter des effets de mouvement à nos éléments de la page qui rendront la page plus interactive et amélioreront l'expérience utilisateur générale. Revenons donc en mode bureau, alors que nous sommes encore ici sur la page d'édition. Allons de l'avant et animons d'abord cette partie. Donc, en sélectionnant ces colonnes. Allons à l'intérieur des effets de mouvement avancés. Et maintenant, c'est la valeur par défaut, donc il n'y a pas d'effet de mouvement. Si nous cliquons sur le menu déroulant, nous avons plusieurs types d'effets de mouvement différents. Nous avons la décoloration, donc c'est la décoloration. Nous avons un zoom. Nous avons des limites. Pour cette section de héros. J'aime bien le fondu en vigueur et nous pouvons modifier la vitesse ou la durée ici. J'aime donc que ça soit lent, comme ça. Et je vais répéter la même chose pour cette colonne. Va à l'intérieur. Effets de mouvement avancés, s'estompent, puis je vais ralentir. Très bien, nous allons donc mettre à jour ça. Et prévisualisons les modifications. Remarquez donc comment il va s'estomper lentement, comme ça, en revenant à l'intérieur de notre éditeur. Nous pouvons maintenant le faire pour chaque élément de cette page de destination. Pour revenir à cette page, nous allons sélectionner cette colonne qui contient la première catégorie ici. Entrez dans les effets de mouvement avancés. Cette fois, je veux glisser ou rebondir, glisser, non ? Pas de glissement à gauche. Comme ça. Et pour celui-là, je voulais glisser dans Wright. Effets de mouvement avancés. Glisser à droite ? Et pour le milieu, il peut glisser vers le bas. Effets de mouvement. Ou peut-être que vous pouvez simplement s'estomper lentement. Revenons également là-dessus. Effets de mouvement. Lent. J'aime qu'il arrive lentement. même cas s'applique à ce glissement lent. Mettez à jour cela. Et prévisualisons les changements qui s' estompent lentement comme ça. Et ceux qui glissent lentement comme ça. Passons maintenant à celui-ci. Mais, bien sûr, rappelez-vous que tout est une question de créativité. Nous avons tellement d'options ici. Ainsi, les différents effets de mouvement que vous sélectionnez détermineront quel point votre page sera chargée pour les nouveaux utilisateurs. Passons donc au troisième. Sélectionnez cette option. Effets de mouvement avancés. Peut-être zoomer. Non, ça s'estompe. Allez au zoom. Il s'agit d'effets de mouvement bien avancés. Zoom, mise à jour. Je vais donc ajouter des effets de mouvement pour le reste des éléments de cette page. Mais je vais accélérer cette partie parce que je ne fais répéter le même processus encore et encore jusqu'au bas. Je vous suggère donc d'aller de l'avant et d'être créatif. Voyons ce que vous allez trouver. Ensuite, je souhaite sélectionner cette option. Je viens donc de terminer et j'ai enregistré les modifications. Très bien, alors faisons défiler vers bas et voyons ce que j'ai imaginé. Oh, c'est vrai. On y va. Voici donc comment ajouter des effets de mouvement à votre page de destination. Comme je l'ai mentionné, soyez aussi créatif que possible et voyez ce que vous allez finir. Et cela marque la fin de notre cours. J'espère que ça vous a plu autant que j'ai aimé l' assembler pour vous. Et si vous avez des questions, allez-y et contactez-moi. Avant de partir. J'ai quelques dernières réflexions et je les partagerai dans la prochaine et dernière leçon. Je vous verrai bientôt. 28. 25 Outro: Félicitations pour avoir terminé le cours. Le fait que vous soyez venu jusqu'ici est une indication claire que vous êtes un finisseur. Beaucoup de gens peuvent commencer à suivre un cours en ligne, mais très peu de gens peuvent voir jusqu'au bout. Vous disposez désormais non seulement d'une page Web entièrement fonctionnelle, mais également d'une compétence précieuse que vous pouvez utiliser pour générer des revenus de différentes manières. Tout est question de la créativité que vous pouvez obtenir maintenant que vous comprenez comment créer une page Web à partir de zéro, il est temps pour vous d' apprendre à la rendre conviviale pour le référencement. référencement signifie que l'optimisation des moteurs de recherche, une page Web ou un site Web qui n' a pas été optimisé pour les moteurs de recherche est invisible pour les moteurs de recherche, ce qui signifie qu'elle n'apparaît pas dans les résultats de recherche lorsque les utilisateurs recherchent du contenu sur lequel la page Web est sur le point d'apprendre comment le rendre visible par les moteurs de recherche. Jetez un coup d'œil à un cours de 60 minutes que j'ai publié spécifiquement pour vous apprendre comment le faire. Ouvrez mon profil et inscrivez-vous à ce cours et apprenez comment rendre vos pages Web et sites Web accessibles par les moteurs de recherche. Consultez également d'autres cours où je vous apprends à créer un site Web entièrement fonctionnel, pas seulement une page de destination. Si vous aimez le cours, n' oubliez pas de lui donner un avis positif dans la section ci-dessous. C'est très utile. Cela ne vous prendra que deux minutes environ et votre avis contribuera à rendre ce cours plus visible les autres élèves qui pourraient rechercher ce type d'informations. Et comme toujours, je m' appelle Ken Visa. C'est toujours un plaisir de vous avoir ici et je vous verrai dans la prochaine pièce de classe.