Devenir un expert avec Elementor Pro MASTERY Course : débutant à avancé

1. Aperçu du cours: Bonjour, aspirants concepteurs de sites Web et freelances. Je suis Pre Meta. Votre guide sur le voyage ultime et conception Web avec Elementor Page Builder, où vous découvrirez les secrets de la conception Web sans avoir besoin de coder Dans les prochains chapitres, vous aurez la liberté de travailler de n'importe où en tant que concepteur Web indépendant. Imaginez maîtriser l'art d'Elementor Pro en créant des sites Web visuellement époustouflants et entièrement réactifs Pas de code, juste du pouvoir créatif à l'état pur. Vous approfondissez les compétences qui vous distinguent , des techniques fondamentales aux techniques avancées. Vous facturerez plus cher pour votre travail. Créez des sites Web optimisés pour la rapidité et appréciés des visiteurs comme des moteurs de recherche. Apprenez à créer localement sans domaine et à créer des menus personnalisés pour une navigation fluide. Nous explorerons également tous les principaux éléments et tirerons parti de la puissance de l'élément, ou IA, pour accélérer le flux de travail et concevoir des sites Web visuellement époustouflants. Ce cours s'adresse à tous ceux qui sont passionnés par la création de sites Web sans avoir besoin de coder. Que vous rêviez de lancer une agence de conception Web, démarrer votre entreprise, de devenir indépendant ou que vous souhaitiez simplement tout apprendre dans le cadre d'un cours complet, c'est votre solution pour réussir. Mais ce n'est pas tout. Préparez-vous à devenir un expert des fenêtres contextuelles, verrouiller des dizaines de widgets Pro Elementor et à découvrir comment créer des sites impressionnants à l'aide des fonctionnalités gratuites d'Elementor Merci d'avoir envisagé mon cours de maîtrise Elementor Pro Aucune connaissance en codage n'est nécessaire, juste un ordinateur et un accès Internet. Tous les outils et logiciels utilisés dans ce cours sont absolument gratuits pour démarrer, prêts à transformer votre passion en profession. Plongons dans le monde passionnant de la conception Web avec Elementor Pro 2. Installation et installation de WordPress: Premièrement, bienvenue dans ce nouveau cours. Je suis tellement contente que tu sois là. Ce cours a littéralement la capacité de changer votre vie pour toujours, comme il l'a fait pour moi. Mais vous devez suivre ce cours dans son intégralité pour en tirer parti sans plus attendre. Commençons par cette conférence. Tout d'abord, nous devons installer Zap et appuyer sur notre système local. Maintenant, il existe également d'autres moyens de démarrer avec la presse Web. Principalement pour acheter un service d'hébergement, qu'il s'agisse d'un hébergeur ou d'un site nown Il existe de nombreux fournisseurs de services d'hébergement différents, mais je ne recommande pas de commencer à payer soudainement pendant que vous apprenez. Tout simplement parce que vous pouvez toujours utiliser votre système local et le faire agir comme un serveur Web. C'est ce que nous allons apprendre aujourd'hui pour nous assurer installer Web Press dans notre système et de nous entraîner dans notre système local. C'est vrai. Comme vous pouvez le voir, j'ai ouvert ce Google Chrome et je suis allé le site officiel de Zam. Dans la section de téléchargement, je peux voir différentes versions à télécharger pour le système d'exploitation Maintenant, selon le type de système que vous utilisez actuellement, le processus d'installation peut être légèrement différent. Comme j'utilise un système Max, le processus d'installation va être un peu compliqué par rapport au processus d'installation et à Windows, car Windows possède un système d' installation très rationalisé et linéaire et aucune autre chose n'est requise en termes d'installation de Windows. Alors que dans le système, vous devrez peut-être apporter quelques modifications ici et là en termes d'autorisations ou modifier quelques fichiers ici et là, mais ne vous inquiétez pas quel que soit le système que vous utilisez actuellement, cela n'a pas d'importance car je vais suivre les étapes pendant que j' explique ce système, je vais suivre les étapes d'installation sur le système Max. Mais je vais également vous expliquer ce que vous devez faire pour Windows ou où exactement vous pouvez passer de la vidéo à la prochaine conférence. Comme j'utilise un système Max, je vais télécharger la dernière version du Zap En ce moment même. Comme j'ai déjà installé Zap, je ne vais pas le réinstaller. Maintenant, Zap, en gros, c'est qu'il possède différents types de serveurs et de bases de données comme Apache, My QL et toutes ces sortes de choses Et cela fait essentiellement de votre système local, votre ordinateur portable ou de votre ordinateur personnel un serveur Web. Maintenant, qu'est-ce qu'un serveur Web ? Le serveur Web n'est rien d'autre qu'un matériel informatique. Dans le cas des logiciels informatiques, il s'agit essentiellement de l'ordinateur lui-même. Mais la différence est qu'il accepte TTP et leurs variantes telles que les requêtes STP, comme le protocole de transfert hypertexte et le protocole de transfert hypertexte, la couche sécurisée. Peu importe ce que nous contournons avec les sites Web et les applications Web, nous envoyons une requête comme le protocole de transfert hypertexte et le protocole de transfert hypertexte, la couche sécurisée Peu importe ce que nous contournons avec les sites Web et les applications Web, nous envoyons Vous devez avoir remarqué que chaque fois que vous essayez de rechercher un site Web sur un navigateur, la section URL, vous remarquerez que c'est le nom de domaine lui-même, mais une fois que vous avez cliqué dessus, vous pouvez voir le S ou l'ETP Dans certains scénarios où certains sites Web ne possèdent aucun certificat SSL, vous pouvez voir le protocole STP suivi de deux points et de deux C'est donc ce que signifie essentiellement cette demande STP. Vous allez donc faire de votre système un serveur Web. Cela ne signifie pas que votre système sera inutile, Cela ne signifie pas que votre système sera qu'il agira simplement comme un serveur Web et que vous ne pourrez plus faire d'autres choses que vous faisiez auparavant. En gros, cela vous aidera à contourner les demandes de sites Web et d' applications Web. Hein ? Une fois que vous avez installé ce Zamp, vous n'avez rien d'autre à faire, il vous suffit de cliquer sur Next Si vous installez pour Mac, il vous suffit de lancer Dragon Drop et d' installer le Zampill sur votre système Si vous utilisez Windows, il vous suffit de cliquer sur Suivant, Suivant, Suivant, puis sur l'emplacement du navigateur dans lequel vous souhaitez installer les fichiers. Je vous recommande d'installer votre Zamp dans le lecteur C où réside votre système d'exploitation Windows, car cela simplifiera le processus Sinon, vous serez confronté à une fois que vous aurez installé Press et que vous essaierez de vous connecter à votre site Web vestimentaire et d'apporter des modifications à votre site Web, vous pourriez rencontrer des complications là-bas. C'est la seule raison pour laquelle je recommande d'installer zap dans votre lecteur. Une fois que vous avez installé le zamp, vous devez accéder aux téléchargements de barres obliques de Press.org Il existe maintenant deux sites Web de Wordpress. Officiel. Le premier est Tress.org, qui est une organisation Wordpress, et le second est WordPress.com Maintenant, je vous conseille à tous d'aller Tress.org, car vous aurez accès aux logiciels accès aux Vous pouvez donc le télécharger gratuitement et créer votre propre site Web à partir de zéro. Que se passe-t-il si vous allez sur WordPress.com Eh bien, vous aurez accès au même logiciel de presse Mais Press, quant à elle, va facturer de l'argent d' avance sur la base d'un abonnement mensuel Juste pour qu'ils puissent héberger le site Web sur leur serveur. Vous essayez donc d' apporter des modifications directement sur le serveur et non sur votre système local. Voilà donc la différence fondamentale entre Dress.com et WordPress.org Une fois que vous aurez accédé à la section de téléchargement des barres obliques de Dress.org, vous trouverez ce bouton de téléchargement suivi de la dernière version, quelle que soit la version publiée par la presse Actuellement, la version de Wordpress est 6.4 0.2 et c'est ce que j'ai téléchargé sur mon système comme vous pouvez le voir ici. Il va maintenant télécharger un fichier zip. Il est de votre responsabilité de les extraire car le fichier zip est un fichier compressé, et le fichier non compressé, qui contient toutes ces sortes de dossiers et de fichiers différents, est une version non compressée occupe beaucoup plus d' C'est la seule raison pour laquelle lorsque vous cliquez initialement sur le bouton de téléchargement, le fichier zip est téléchargé. Maintenant, une fois que vous avez extrait le fichier zip, il vous reste ce dossier et ce fichier, et vous devez le coller dans le dossier zamp Donc, ce que je vais faire, c'est passer à la partie Applications. D'accord ? Je vais juste aller dans les applications, et puisque nous utilisons Mac, c'est l'étape que je suis en train de suivre. Si vous utilisez un système Windows, il vous suffit d' accéder à votre lecteur C, de parcourir votre dossier Am, parcourir votre dossier Am, et une fois que vous aurez trouvé le dossier zam à l'intérieur, vous trouverez certainement le dossier ST doc Dans le dossier ST doc, vous devez déplacer votre dossier de presse ici. C'est aussi simple que cela, rien d'autre. En gros, ce que vous dites au Zam, c'est que Zap possède toutes ces sortes de serveurs différents, comme nous en avons parlé précédemment, Apache, mon CQL et toutes ces sortes Lorsque vous allumez ces serveurs, reconnaîtront rapidement votre site Web Wordpress. Puisque nous allons travailler autour de notre hébergeur local, notre système local, nous voulons que la presse soit entièrement présente sur le site Tdcs Maintenant, il vous suffit d'aller dans le dossier de presse, de rechercher ce fichier appelé hyphen config Exemple de tiret dans un fichier Php. Il s'agit maintenant d'un fichier HP. Vous devez apporter quelques modifications au fichier HP. Désormais, vous n'avez pas nécessairement besoin de connaître codage et le langage HP. Mais peu de modifications doivent être apportées à ce fichier afin qu' une base de données soit créée pour votre site Web Wordpress. Je vais juste cliquer dessus et je vais ouvrir avec un éditeur de texte. C'est bon. Maintenant, selon le type de logiciel d'édition de texte que vous avez dans votre système, il peut s'agir d'un code VS ou de tout autre bloc-notes ou de tout autre logiciel d'édition de texte Tu peux l'ouvrir avec. Et puis jusqu'à la partie où vous pouvez trouver ce nom de base de données, cet utilisateur de base de données et ce mot de passe de base de données, n'est-ce pas ? nom de la base de données est essentiellement le nom de votre base de données, l'utilisateur de la base de données est le nom d'utilisateur de votre base et le mot de passe de la base de données est le mot de passe de votre base de données, n'est-ce pas ? Chaque site Web a besoin de certaines données, et ces données seront stockées sous forme de tableau Et ces tables, un ensemble de tables, formeront une base de données. Maintenant, cette base de données sera stockée dans, vous pouvez dire dans un SQL ou non. Ql base Q est essentiellement un langage de requête structuré, et aucun Qual n'est un langage de requête non structuré comme votre base de données Mongo Et nous avons différents types de logiciels de base de données que nous utilisons car il utilise une base de données relationnelle QL Je dirais qu'il utilise mon ok, mon QL dans Apache. Nous devons donner un nom à cette base de données. Nous utilisons un site de presse. Nous donnerons ce nom sous forme de presse. Le nom de la base de données sera pressé et c'est ce que je vais saisir entre ces simples virgules inversées Le nom de la base de données a été donné, suivi de l'utilisateur de la base de données, que je vais saisir en tant que root. Maintenant, que signifie root ? Root est essentiellement un compte dans votre système local, que vous utilisiez un système Max ou un système Windows ou Linux. Root y restera. compte root permet d'accéder à tous les types de bases de données. Lorsque vous utilisez votre site Web Tress, disons simplement que vous avez différentes tables de base de données, que vous avez quelques images téléchargées dans une base de données pour un site Web de presse distinct, et que vous avez un site Web de presse distinct, un deuxième site Web Tress sur lequel vous souhaitez accéder à ces fichiers et à ces dossiers depuis le site Web de presse précédent Accès via le nom d'utilisateur root, vous pourrez récupérer les données de différentes bases de données C'est ce que veut réellement dire l'utilisateur de la base de données et c'est ce que fait réellement le compte root, suivi du mot de passe. Vous devez laisser le mot de passe vide, donc n'y mettez rien. Lorsque vous essayez de saisir le mot de passe de la base de données. Vous ne voulez pas verrouiller votre base de données à l'aide d'un mot de passe. Vous souhaitez que la base de données soit accessible pour tous les sites Web. Hein ? Une fois que vous avez terminé, enregistrez-le simplement en utilisant le contrôle S, ou vous pouvez simplement aller ici et cliquer sur Enregistrer. Hein ? Je vais juste fermer ce dossier. Ce que je vais faire, c'est juste faire une copie de ce fichier. Je vais juste en faire une copie ici. Ce que je vais faire, c'est en faire une copie et je vais coller directement dans ce dossier, comme vous pouvez le voir. Une copie de ce fichier de conflit a été créée, mais je vais supprimer la copie et les exemples de mots qui s'y trouvent. Il ne me restera plus qu'un fichier Php à point de conflit de tirets. C'est ce que nous voulons. Maintenant, une fois cela fait , je vais ouvrir Amp et Manager SX. Puisque nous utilisons ce système Max, je cliquerais sur ManasX Si vous utilisez un système Windows, il vous suffit de cliquer sur Zam et de démarrer les trois serveurs dont vous disposez Je vais juste entrer le mot de passe car il nécessite peu d'autorisations. Une fois que j'ai saisi le mot de passe, dossier Sam s'ouvre. Attends une seconde. Il semblerait que j' ai saisi un mot de passe incorrect. C'est bon. Attendons maintenant un moment pour ouvrir le Samp. Ouais. Nous pouvons maintenant passer à la gestion des serveurs. Maintenant, une fois que nous avons commencé à gérer les serveurs, nous pouvons voir Pro, le serveur Web Apache et mes bases de données. Maintenant, vous devez tous les démarrer. Cliquez simplement sur le bouton Démarrer, puis sur le bouton Tout démarrer, et les trois serveurs démarreront. Dans certains cas, vos bases de données FTDP ou Mes bases de données sont arrêtées même après avoir cliqué sur le bouton Tout démarrer Vous savez que ce que vous devez faire est simplement d'accéder au moniteur d'activité de votre système Max, rechercher SCTDP, Q et Pro FTDP, et de tous les arrêter. D'accord ? Ce n'est qu'alors que tu pourras exécuter toutes ces choses. Maintenant, nous allons minimiser cela pendant un moment, d'accord ? Il continuera de fonctionner en arrière-plan. Ce que nous allons faire, c'est accéder à notre Google Chrome. Et je vais cliquer sur un nouvel onglet et je vais rechercher l'hôte local hypun PHP, mon administrateur. C'est bon. Php, mon administrateur. Je peux juste cliquer sur la goutte. OK. Drop signifie essentiellement que vous avez supprimé cette base de données. Je vais cliquer sur New Press et sur Créer. C'est bon. Le nom de base de données appelé Wordpress a été créé dans mon système hôte local. Vous n'avez pas besoin d' ajouter de nom de nombre de colonnes ou quoi que ce soit d'autre. Il vous suffit de revenir en arrière et dans votre section Ural au lieu de HV, union de mon administrateur local, Wordpress est ce que vous devez rechercher C'est bon. Donnez-lui un peu de temps. Cette page s'ouvrira et il vous suffira de cliquer sur la langue avec laquelle vous êtes à l' aise avec votre site Web Wordpress. Maintenant, pour la plupart d'entre nous, ce serait en anglais avec la version américaine. Je vais donc simplement cliquer sur Continuer. Je vais définir le titre de mon site Wordpress comme n'importe quoi. Il peut s'agir du nom de votre entreprise, du nom de votre portefeuille , du titre que vous souhaitez conserver sur votre site Web, tel que vous pouvez le saisir ici. Mais pour l'instant, je vais simplement garder le titre du site tel que publié. Très bien, nom d'utilisateur. Il faut que ce soit admin. Maintenant, ce nom d'utilisateur est différent du nom d'utilisateur que nous donnons pour notre base de données. Pour la base de données, nous avons donné le nom d'utilisateur comme route, ce qui signifie que ce compte a accès à toutes les différentes bases de données, alors que ce nom d'utilisateur d'administrateur est destiné à l'accès à votre site Web Wordpress en particulier. Tout comme vous avez différents comptes Google, vos comptes Gmail, n'est-ce pas ? Vous avez différents noms d'utilisateur, différents identifiants de messagerie et différents mots de passe Il n'en va pas de même pour le mot de passe et le nom d'utilisateur de votre téléphone . J'espère que tu as compris. Ici, vous donnez le nom en tant qu'administrateur. Admin ne signifie pas nécessairement que vous devez conserver votre nom d'utilisateur en tant qu'administrateur, mais cela signifie essentiellement que lorsque vous avez plusieurs noms d'utilisateur, vous avez plusieurs accès à votre site Web de presse professionnelle Oui, c'est possible. À l'avenir, supposons que vous livriez ce site Web à un client, vous agissiez en tant qu' indépendant, n'est-ce pas ? Et vous souhaitez proposer ce site Web à un client qui pourra ensuite gérer quelques pages de publications et télécharger quelques contenus multimédias de son côté. Ensuite, vous voulez leur donner l'accès à l'éditeur mais pas l'accès administrateur. L'accès administrateur vous donnera accès à tous les plugins , aux paramètres supplémentaires et, gros, à l'accès complet au site Web. Raison pour laquelle nous avons un nom d'utilisateur appelé admin, qui contrôle l'ensemble du site Web, puis nous avons des noms d'utilisateur différents Donc, si vous souhaitez continuer à utiliser votre nom comme nom d'utilisateur, n'oubliez pas qu'il s' agit de votre accès administrateur. Cela signifie que vous avez le contrôle total du site Web. Bien, suivi d'un mot de passe. Maintenant, pourquoi avons-nous besoin d'un mot de passe ? Wordpress étant open source, il y a de fortes chances que votre site Web soit piraté Cela ne signifie pas que Wordpress n'est pas sûr et vous ne devez pas continuer à utiliser le CMS Wordpress. Non, c'est complètement faux. Je pense qu'environ 43 % des sites Internet sont créés à l'aide de la presse. S'il y avait eu un tel défaut, je ne pense pas qu'autant de sites Web auraient été créés à l'aide de la presse Mais le seul avantage d' avoir un mot de passe est que, comme j'en ai parlé il y a quelques minutes, vous pouvez avoir plusieurs accès à ce site Wordpress. Vous avez un nom d'utilisateur et un mot de passe. Donc, si vous souhaitez donner à quelqu' un un accès éditorial tout en conservant l'accès administrateur, vous devez avoir un nom d'utilisateur et un mot de passe. Je vais donc juste donner un mot de passe et je vais masquer afin que même vous le sachiez, vous ne puissiez pas voir le mot de passe que j'utilise pour mon site Wordpress. Je vais simplement utiliser le mot de passe que j'ai actuellement. Peu importe que je saisisse encore un mot de passe d'une semaine. Je vais utiliser un mot de passe difficile juste pour vous dire que c' est la bonne pratique à suivre, d'accord. Bien, c'est mon mot de passe fort et tu ne coches jamais cette case. Cela nous indique essentiellement qu' un moteur de recherche ne consultera pas votre site Web. Si vous cochez cette case. Cela permet donc de décourager les moteurs de recherche d'indexer ce site Et nous ne voulons pas que cela se produise. Nous voulons que notre site Web soit reconnu par les moteurs de recherche. Mais ne t'inquiète pas. Même si vous cliquez, ne cliquez pas sur cette option. Les moteurs de recherche ne seront actuellement jamais en mesure indexer votre site Web car celui-ci n'est pas hébergé sur Internet. Il réside dans votre système local et celui-ci agit temporairement comme un serveur Web lorsque vous apportez des modifications à votre site Web. J'espère que tu as compris. Une fois que vous aurez fait toutes ces choses, je cliquerai sur l'installation, mais j'appuierai sur le bouton. La seule raison pour laquelle je vais aborder tous ces différents types de détails particuliers, c'est parce que je ne veux pas omettre aucun détail et je ne veux pas vous laisser dans ombre lorsque vous commencez simplement par la partie installation. Et une fois cela fait, poursuivez avec l' objectif principal du cours. Je ne veux pas que cela se produise. Si vous gérez quelque chose, assurez-vous d'apprendre chaque élément , peu importe. C'est important pour vous, il est important d'en apprendre chaque détail. Maintenant, ils disent que vous devez fournir une adresse e-mail. J'ai dû ne pas avoir saisi l'e-mail. Je suppose qu'auparavant, l'option e-mail était facultative, mais maintenant je suppose que c'est important. Il suffit donc de saisir mon adresse e-mail. OK, je vais saisir l'adresse e-mail de mon entreprise. Et je vais cliquer sur Installer, appuyer sur. Très bien, alors laissons-lui juste un peu de temps. Très bien, la presse a été installée et je vais cliquer sur me connecter. Je vais entrer le nom d'utilisateur ou je peux saisir mon adresse e-mail. Hein ? Ensuite, je vais entrer le mot de passe. Je peux cliquer sur Remember B pour que chaque fois que je souhaite accéder à ce site de presse hébergé sur mon serveur local, je n'aie pas à me connecter encore et encore, et le site Web de Tress s'affiche sur votre écran Cela ne signifie pas que nous avons terminé toute notre étape. Non, ce n'est que le début. Oui. Pour les utilisateurs de Windows, vous avez presque terminé. Vous pouvez simplement sauter cette conférence à partir de maintenant, mais vous pouvez passer à la suivante. C'est ce que je voulais dire. Mais pour les utilisateurs de Mac, il vous reste encore quelques tâches à faire. La seule raison pour laquelle les utilisateurs de Mac ont encore du travail à faire est que Mac possède différents types de couches de sécurité et des autorisations différentes pour chaque fichier de dossier et toutes ces sortes de choses. C'est la seule raison pour laquelle certaines modifications doivent être apportées. Je vais juste fermer ce site de robes pour le moment. Ce que je vais faire, c'est aller dans le dossier Amp. C'est le dossier Amp, et j'ai un dossier EDC Dans ce dossier EDC, je trouverai le fichier de configuration httpd OK ? Je vais trouver ce fichier de configuration. Maintenant, je dois modifier ceci, je dois modifier ce fichier. Je suis en train de modifier ce fichier. Quel en est le but ? Donc, ce qui se passe, c'est qu'un site Web tres, juste un site Web tres vierge vous mènera pas au point où vous voudrez réellement créer quelque chose pour commencer avec un générateur de thèmes, ce soit Element, Elementor Pro ou DV, l'un des constructeurs de thèmes que vous avez l'intention d'apprendre et d' utiliser Pour installer ce plugin, vous devez installer quelques thèmes pour votre site Web ou des plugins supplémentaires, ce soit à des fins de référencement ou pour d' autres fonctions que vous souhaiterez peut-être ajouter pour ces raisons. Pour installer des plug-ins, vous devez apporter des modifications au fichier de conflit. Même si vous essayez de télécharger images ou des vidéos, Mac ne vous y autorisera peut-être pas. Ou peut-être que nous appuyons sur « Il se peut que nous n' obtenions accès complet aux éléments que vous essayez de télécharger ». pourquoi nous essayons d'apporter des modifications à ce fichier de conflit en particulier. Nous allons effectuer une recherche jusqu'à la partie où nous trouverons le démon utilisateur à l'aide de la commande F ou de la commande. Si vous pouvez le voir, vous pouvez dire que pour le système Mac, je viens de rechercher User Demon. C'est bon. Donc, user demon et group demon sont deux choses que j'ai particulièrement appréciées ici. Maintenant, il a automatiquement reconnu ces éléments particuliers. OK, pourquoi ? Donc, parce que Zap était déjà installé dans mon système. Comme vous le savez, j'ai déjà créé un site Web Wordpress dans le passé, en fait, de nombreux sites Web Wordpress dans le passé dans ce système lui-même. Donc, au départ, dans votre cas, vous ne trouverez peut-être pas cet utilisateur suivi de mon nom et de celui de ce membre du groupe. Vous ne verrez que ce démon utilisateur et ce démon de groupe. OK, tu dois commenter ces deux lignes. Maintenant, que signifie « commentaire » ? Commentaire signifie que votre compilateur stockera les lignes , mais il ne les reconnaîtra pas. Il ne le lira ni ne l'exécutera. Il sera là pour votre référence, mais pas pour la référence des compilateurs N'entrez pas dans les détails sauf si vous n'avez jamais vu de cours de codage ou aucun de mes cours de langages de programmation, en particulier le cours de développement Web Stag Ne t'inquiète pas pour ça. Gardez simplement à l'esprit que le commentaire signifie essentiellement que votre logiciel ne comprendra pas cette ligne de code. Mais vous allez le lire, ne l'exécuterez pas, vous le lirez simplement. C'est juste pour votre information, nous ne supprimons pas ces lignes de code, nous les conservons simplement. Très bien, permettez-moi de découvrir que nous avons juste ajouté un symbole en forme de livre avant cette phrase et il commentera la ligne de code suivie vous devez écrire user avec une majuscule suivie de cette chose ». Dans votre cas, comment allez-vous savoir quel est le nom d'utilisateur de votre système ? Ouvrez simplement le terminal en appuyant simultanément sur la touche commande et espace la touche commande et espace et recherchez simplement le terminal. Une fois que vous avez appuyé sur Entrée, recherchez simplement l'identifiant et entrez. Une fois que vous avez recherché ID, vous trouverez U, ID égal à 501 dans mon cas, suivi d'un crochet à l'intérieur duquel vous trouverez le nom d'utilisateur. OK ? C'est ce dont vous avez besoin pour copier-coller ici où vous pouvez voir, accord, cette ligne en particulier. Sur la ligne suivante, vous devrez ajouter un groupe avec la majuscule suivie du nom du groupe que vous avez. Encore une fois, ouvrez le terminal et vous trouverez le groupe ici. Nous avons des groupes égaux à vingt dans mon cas. Et entre parenthèses, j'ai du personnel. C'est ce que je copie et je le colle ici. Une fois que vous avez fait cela, enregistrez à nouveau ce fichier par la commande S ou vous pouvez simplement cliquer sur Enregistrer en appuyant sur le fichier et en cliquant sur Enregistrer. OK, une fois que vous avez fait cela, fermez simplement le terminal et fermez le fichier de configuration. Et la prochaine chose que vous devez faire est retourner dans votre dossier de presse. Nous avons ce fichier de configuration, d'accord, pas l'exemple, d'accord ? Assurez-vous de ne pas cliquer sur le fichier d'exemple. Vous cliquez sur le tiret de configuration du fichier Php, ouvrez avec un éditeur de texte, recherchez le logiciel jusqu'à la partie où vous trouvez la configuration OK, quelque part dans les alentours. OK, une fois que vous avez appuyé , WP Underscore Debug tombe là où vous le trouvez , juste en dessous. Ajoutez cette ligne de code que je vais simplement saisir et j' écrirai définir le crochet, le crochet ouvert suivi d'un espace En S est la méthode de soulignement du flux de fichiers, d' accord, méthode , single invented suivi d'un a. Ensuite, nous devons écrire à nouveau entre virgules inversées, ce qui Cela signifie que cela permet essentiellement à votre système d'accepter tous les types de thèmes, vos fichiers zip, ou peut-être des images ou des vidéos, des audio ou des fichiers J, tout ce que vous essayez de télécharger ou d'apporter des modifications à la base de Vous donnez les autorisations de la méthode de lecture-écriture, c'est ce que vous faites. Et cliquez simplement sur Enregistrer. Je vais simplement cliquer sur Fichier, puis sur Enregistrer. Une fois que vous avez fait cela, fermez-le à nouveau. Dans le contenu, il suffit de cliquer sur le contenu et de cliquer avec le bouton droit de la souris sur le contenu. Accédez à Read Only pour obtenir des informations. Faites-le lire, écrire, faites en sorte que cela lise, écrive aussi, ce qui concerne tout le monde. Votre nom d'utilisateur sera ici, qui sera lu et écrit par défaut. Les deux autres seront en lecture seule. Vous devez modifier cette autorisation pour lire et écrire. Faites-le car je pense que tous ces dossiers, qui sont du contenu WP, incluent l'administrateur, d'accord ? Dans le contenu de WP, vous pouvez également trouver des thèmes de plug-in et des téléchargements Procédez de même pour tous ces différents dossiers et modifiez uniquement les autorisations. Ensuite, vous pourrez télécharger différents thèmes, accéder à différents thèmes, supprimer ces différents thèmes, etc. OK, c'est ce que je fais ici. Une fois cela fait, je pense que vous serez assez doué pour commencer votre cours. 3. Installation de thème et démarrage avec Wordpress: Qu'est-ce qu'il y a, tout le monde ? Bon retour sur la vidéo. Donc, dans cette conférence vidéo, je vais vous montrer comment nous pouvons installer un nouveau thème sur un site Web Wordpress. Je suis ici sur la page d' accueil de mon site Web. Et vous trouverez ici quelques-unes des choses qui sont déjà présentes. Maintenant, ce sont les éléments que je n'ai pas ajoutés manuellement. C'est parce qu'un thème est actuellement utilisé. Juste en haut, vous pouvez trouver cette barre noire où se trouve le logo Wordpress, l'option Wordpress. D'où nous pouvons naviguer entre les différents thèmes de ce site Web, nous pouvons revenir à notre tableau de bord Wordpress. Nous pouvons modifier ce site par notre éditeur Wordpress et utiliser les blogs de Gutenberg Ensuite, vous avez la possibilité d'ajouter des commentaires. Ici, dans l'icône plus, vous pouvez trouver l'utilisateur de la page de publication multimédia. À l'aide de cela, vous pouvez ajouter un nouveau message. Il peut s'agir d'un article de blog d'une page de produit ou d'une page de service. Vous pouvez ajouter des médias et même ajouter une nouvelle page. Les médias signifient essentiellement que télécharger une nouvelle image, fichier GIF ou une nouvelle page de fichier vidéo signifie essentiellement que vous essayez de créer une nouvelle page. S'il peut s'agir d'une page d' accueil sur une page, page de contact, d'une page de service, etc. Oui, vous pouvez ajouter plusieurs utilisateurs travaillant sur le même site de presse. Juste ici, la partie la plus à droite de cette barre noire. Tu trouveras ton propre profil. Quel est donc le nom d'utilisateur de votre profil ? Ajout d'options de profil et pour vous déconnecter de l'option, droite, il y a une barre de recherche pour rechercher entre les différents éléments qui s'y trouvent ici. Revenons au tableau de bord ici. Comme vous pouvez le voir dans ce volet, nous avons des mises à jour personnelles. Les mises à jour afficheront toutes les mises à jour qui doivent être mises à jour. En gros, à propos de nos plugins, mais pour le moment, aucun plugin n' est installé. Ensuite, nous avons la possibilité de publier des pages multimédia, commentaires que nous avons vus ici dans la barre noire supérieure. Ensuite, nous avons la section sur l'apparence. Maintenant, dans cette section d'apparence, vous trouverez des thèmes. Passons simplement à cela et vous trouverez trois thèmes déjà installés sur notre site Web, 2024, 2020, 3.20, 22 Maintenant, je ne les ai pas installés manuellement. Il était déjà présent lorsque j'ai installé mon site Wordpress. Bien, mais nous n'avons même pas besoin des trois. Nous n'avons besoin d' aucun d'entre eux. Nous voulons un nouveau thème. Ajoutons simplement un nouveau thème. En cliquant sur cette option, nous pouvons effectuer une recherche entre différents thèmes. Je vais juste chercher un bloc. Entrons ici, vous trouverez cette option. Cliquons sur Installer. Maintenant, pendant l'installation, vous pouvez supposer qu' une fois que nous avons cliqué sur installer, le thème sera prêt à être utilisé. Non, vous aurez une autre option pour activer le thème. Cela signifie que plusieurs thèmes peuvent être installés sur votre site Web Tress , mais qu'un seul peut être activé pour le moment Activons le blocage pour le moment et nous reviendrons à notre section des thèmes et nous désactiverons et supprimerons tous les autres. Passons aux détails du thème. Nous avons la possibilité de les supprimer, supprimons-les. Celui-ci aussi, afin que nous puissions libérer de l'espace pour notre site Web. Vous constaterez que c'est thème de bloc que nous avons utilisé. Maintenant, en dehors du bloc, il existe de nombreux autres thèmes que les gens utilisent. Principalement Astra Mais je vais simplement montrer dans ce cours pourquoi le blocage est nécessaire. Très bien, ici en apparence de bloc, vous verrez Bo apparaître juste ici après avoir installé le thème. Au départ, nous n'avions que des thèmes et je suppose que nous avions un éditeur, non ? Seules ces deux options étaient disponibles. Mais en ce moment, nous avons des widgets, des menus Block. Passons à Block et voyons quelles sont les options qui s'offrent à nous. Ici, nous avons des plug-ins utiles pour la maison, un journal des modifications. Mais au fur et à mesure que nous faisons défiler cette option d'accueil vers le bas, vous trouverez une option pour installer le plug-in Block Companion. Nous allons également installer celui-ci. Très bien, qu' allons-nous faire ? Nous allons revenir à notre option de menu. C'est bon. Pourquoi avons-nous besoin d'un menu ? Ainsi, chaque fois que vous naviguez sur un site Web, vous verrez toujours un en-tête supérieur ou une barre de navigation à partir de laquelle vous pourrez naviguer entre les différentes pages. Hein ? Que vous y accédiez à partir d'un appareil mobile, d'un écran de bureau ou d'une tablette, peu importe. Vous trouverez toujours la barre de navigation en haut de votre site Web. Bien, donc nous voulons également quelque chose de similaire pour ce site Web. Créons donc un nom pour ce menu. Nous pouvons donc donner quelque chose comme la barre de navigation ou le menu principal. Donnons simplement la barre de navigation et je vais sélectionner le menu d'en-tête 1 Très bien, maintenant la barre de navigation, le nom de notre menu, ne sera accessible qu'à nous Cela signifie que le nom ne serait pas visible pour les visiteurs qui arriveront sur notre site Web. J'espère que tu as compris. Et créons un menu. Ainsi, une fois que j'ai créé un menu, vous constaterez qu'il y a quelques pages dans la section Viewll, la page d' accueil et la page d'exemple Mais passons à notre section de page pour voir quelles autres pages nous avons. Nous avons une page d'exemple et une page de politique de confidentialité dont seul un échantillon est activé. Cela signifie qu'il est actuellement utilisé. Et celle-ci, qui est une page de politique de confidentialité, se trouve dans le brouillon, ce qui signifie qu'elle n'est pas publiée. Nous ne voulons aucune de ces deux pages, alors prenons les deux. Et dans la section des actions groupées, nous pouvons sélectionner, déplacer vers la corbeille, afin que plusieurs éléments puissent être supprimés à la fois. Bien, vous pouvez donc constater qu'aucune page n'a été trouvée. Ajoutons donc quelques pages en cliquant sur ce bouton, nous pouvons ajouter un titre à cette page. Donnons-lui donc quelque chose comme une page d'accueil. Une fois cela fait, vous trouverez dans le volet droit de la barre à couteaux que nous avons une page et que vous avez un bloc. Cette page vous donnera un résumé dont nous parlerons plus tard. Ensuite, nous avons un bloc, nous avons également une icône de thème de bloc, qui vous permettra de choisir entre différentes structures de page et sélectionner différents styles de conception. Bien, mais nous n'allons pas entrer dans les détails pour l' instant et couvrir tout ce que nous avons ici, car nous avons également prévu d'autres conférences. Cliquons à nouveau sur Publier. Bien. Ajoutons une nouvelle page ici. Vous pouvez voir une option permettant d'ajouter une nouvelle page. Nous allons simplement cliquer ici et ajouter une page à propos, la page À propos. Je vais cliquer sur Publier et publier, très bien. Ajoutons une autre page et donnons-lui quelque chose comme un contact. Ajoutons une autre page en cliquant sur ce bouton, et je pourrai donner quelque chose comme une page de contact. Très bien, contactez-nous. Publions. C'est bon. Une fois qu'il aura été publié, je retournerai à mon tableau de bord Tress où vous pourrez trouver des informations sur nous et nous contacter Passons aux menus pour pouvoir ajouter trois de ces pages dans notre barre de navigation. Très bien, donc menus d'apparence. Et ici, nous avons créé notre bar, non ? Dans la section la plus récente, vous trouverez les pages d'accueil Nous contacter et Afficher, que deux pages d'accueil. Maintenant, pourquoi ça ? Laisse-moi juste te montrer. Afin de les impliquer tous, je peux simplement les sélectionner tous et les ajouter au menu au cours de l'année. Vous trouverez un lien personnalisé pour cette page d'accueil et une page pour cette page d'accueil est quelque chose que nous venons de créer. page impliquera toutes les autres choses dont une page Web a besoin. Qu'il s'agisse d'un titre, du corps de la page, l'image en vedette, de l'extrait d'une page, etc. Mais pour un lien personnalisé, c'est quelque chose que vous pouvez ajouter. Tout le reste, il peut s'agir d'un lien vers votre page Facebook ou Instagram et vous pouvez changer le libellé en quelque chose comme suivre mon compte Facebook, quelque chose comme ça. Mais pour le moment, nous n'avons pas besoin de lien personnalisé vers notre menu. Nous pouvons simplement le supprimer pour moment et nous avons à propos du contact et de la maison. Mais il ne s'agit pas d'un ordre correct ou d'une structure à suivre pour notre barre de navigation. Nous devrions toujours afficher notre page d'accueil, puis la page à propos, puis la page de contact. Laisse-moi juste le glisser et le placer ici. Disons simplement que vous ajoutez également une page supplémentaire. Il peut s'agir d'une page de services ou de produits. Parmi les services que vous offrez, disons votre entreprise, une société de conception Web et de référencement. Et vous offrez des services tels que la conception Web, le référencement et le commerce électronique. Dans le cadre ou plutôt dans le cadre des services, vous offrez ces trois services. Disons simplement que le fait de permettre à vos utilisateurs de cliquer sur le menu déroulant et d'afficher page À propos deviendra un sous-élément de la page d'accueil. contact peut également être un sous-élément de « about », non de « home », car vous pouvez voir la structure. Mais restons-en à quelque chose comme accueil, À propos, et contactons les trois pages individuelles. Bien. Et nous pouvons enregistrer le menu. Si nous allons sur notre site Web Wordpress et visitons exactement ce que nous obtenons, vous constaterez que c' est le titre de notre site Web Wordpress. Dans la barre de navigation ou dans l'en-tête , nous avons différentes pages que nous avons créées, et elles sont parfaitement alignées de la manière que nous voulions qu'elles s'affichent. Bien. Maintenant, qu'est-ce qu'un thème ? Nous avons effectivement installé le bloc C dans notre système, mais pourquoi en avons-nous besoin ? Qu'est-ce qu'un thème Wordpress ? Chaque site Web que vous créez à l'aide Wordpress a besoin d'un thème Wordpress spécifique. Sans entrer dans les détails très techniques, je vais juste aborder quelques points à propos du thème Wordpress. Il s'agit essentiellement d'un style général et d'une mise en page de votre site Web actuel. Chaque thème Wordpress possède différentes options dans le personnalisateur de thème, dont nous parlerons dans un instant Et ces options peuvent aller de la personnalisation de votre en-tête, que nous avons ici La page d'accueil qui nous concerne contactez-nous. Et le pied de page que nous avons dans la partie inférieure de notre Créez différents blocs de publication contrôlant la largeur de votre site Web, comme des blocs ou une largeur complète, ou des fonctionnalités de commerce électronique spécifiques telles que la mise en page de vos produits ou différentes mises en page de boutique En gros, tous ces éléments prédéfinis que nous obtenons dans un thème Wordpress, vous pouvez les personnaliser entre eux. Il s'agit donc essentiellement d'un thème Wordpress. Donc, en général, il contrôle la mise en page et le style de votre site Web Wordpress actuel. Et ils ne créent pas le site Web, alors soyez très clair. Un constructeur de pages comme Elementor ou DV est nécessaire pour créer l'intégralité de votre site Web Mais Theme, en revanche, ressemble plus à une coque extérieure pour les constructeurs de pages et un point de départ pour créer votre site Web Wordpress. Vous espérez donc avoir compris l' idée d'utiliser et d'installer thème Wordpress dans notre système ici même dans la barre supérieure. Auparavant, nous n'avions pas trouvé d'option de personnalisation. Nous avions la possibilité de modifier la page mais pas de la personnaliser. Actuellement, nous avons l'option personnalisée. Ainsi, une fois que nous avons cliqué sur ce pinceau pour personnaliser, vous pouvez constater que notre éditeur de thèmes de presse omet un éditeur de thème Bloxy Vous pouvez trouver que le thème actuellement activé est Blox. Vous pouvez même passer d'un thème à l' autre en fonction nombre de thèmes que vous avez installés sur votre site de presse. Mais pour l'instant, comme nous n'en avons qu'un et nous avons retiré les autres thèmes de la corbeille, nous n'en avons donc qu'un. Maintenant, si je veux faire la page d'accueil le point de départ actuel, celle-ci comme page par défaut, chaque fois que quelqu' un arrive sur notre site Web, nous devrions en faire une page par défaut. Alors, comment allons-nous nous y prendre ? Ici, dans la partie inférieure de notre éditeur de thèmes, vous trouverez des menus d'identification des signes , qui ajoutent des paramètres de page d'accueil et du CSS supplémentaire Passons donc aux paramètres de la page d'accueil. Et ici, par défaut , votre dernier message sera sélectionné. Cela signifie que quel que soit le message ou les pages qui seront créés, les plus récents, apparaîtront comme écran par défaut. Mais c'est quelque chose que nous ne voulons pas. Nous voulons une page statique. Cela signifie que ce que vous avez sélectionné restera actif tout au long, le site Web restera en vie. Nous allons donc sélectionner une page statique, sélectionner la page d'accueil comme page d'accueil, et nous allons simplement publier. Très bien, nous avons donc ici la page d'accueil et nous allons la sélectionner. Nous y reviendrons et vous trouverez peut-être d'autres options dont nous parlerons plus tard. Mais pour l'instant, fermons ça. Et chaque fois que quelqu'un actualise le site Web, nous avons ici l'hébergeur local Wordpress et vous trouverez la page d'accueil comme page par défaut Encore une fois, pour en revenir à votre tableau de bord, il se peut que vous ne trouviez pas l'accès à la barre supérieure ou au tableau de bord. Cela peut être possible car vous ne vous êtes peut-être pas connecté votre site Web Wordpress pour vous connecter ou à l'URL spécifique à l'URL. Pour commencer et vous connecter à votre accès administrateur, vous devez saisir le nom de votre site Web dans le champ local host forward slash Dans notre cas, il s'agit de Wordpress. Ensuite, nous avons à nouveau une barre oblique , puis vous écrivez WP hyphen admin Cela signifie essentiellement un accès administrateur Wordpress. Il existe donc plusieurs accès à votre site Web Wordpress. Il y a des éditeurs, il y a des abonnés, il y a un administrateur, etc. Nous voulons donc un accès administrateur afin de pouvoir démarrer avec un site Web Wordpress et y apporter des modifications. Maintenant, avant de terminer cette conférence, je voudrais juste montrer quelques points ici et là. Ici, dans le tableau de bord, vous trouverez les paramètres sous Paramètres, ainsi que d'autres options, telles que la rédaction générale, la lecture, les médias de discussion par melings et la confidentialité Vous n'avez pas à vous inquiéter toutes les autres choses que nous avons ce moment. Concentrons-nous simplement sur les généraux et sur les autres éléments dont nous disposons. Voici Parmelings que je vais aborder actuellement. Nous aborderons d'autres sujets plus loin dans ce cours. Parce que j'ai l'impression qu'en ce moment c'est juste pour montrer et discuter, tout va me sembler très bouleversant. Je vais simplement aller dans les paramètres généraux et vous trouverez ici le titre du site, que nous avons défini sur Wordpress. Maintenant, pendant que nous installions notre site web tres, nous avons défini le titre sur Wordpress plus tard. Si vous souhaitez le modifier, vous pouvez simplement revenir aux paramètres sous Options générales, vous pouvez modifier le titre du site. Maintenant, ici, vous trouverez également le slogan. Maintenant, le slogan est quelque chose de facultatif. Supposons donc que vous créez un site Web d' entreprise comme Nike. Maintenant, Nike a un slogan comme Just Do It. Vous pouvez écrire « Just Do it » dans le slogan et dans le titre de Nike Insite Ensuite, vous avez l'adresse URL du site Wordpress, RL, dont vous n'avez pas besoin pour le moment. Vous avez également une adresse e-mail d'administrateur. Maintenant, quel que soit le courrier électronique que vous définissez lors de l' installation de votre Wordpress, vous le définissez sur une adresse e-mail vous aimeriez modifier pour que vous aimeriez modifier pour pouvoir revenir ici et modifier l'adresse e-mail. C'est vrai. D'autres choses que nous avons actuellement sur cette page, vous n'avez pas à vous inquiéter à ce sujet. Une fois que nous faisons défiler la page vers le bas, vous trouverez la date, le format, l'heure et le format. Et c'est quelque chose qui serait important dans le cas où vous publiez spécifiquement de nouveaux articles de blog. Et il aurait la date et l'heure de sa publication. Vous pouvez simplement suivre un format pour le temps et selon ce qui vous convient le mieux. Mais ce qui a été défini actuellement est quelque chose que la plupart des gens utilisent. Maintenant, en jetant un coup d'œil à la section Permel de l'option Paramètres, vous trouverez la structure permelante sous forme de nom Dan simple, de mois et de nom, de publication numérique Que devons-nous choisir ? Tout ce qui est sélectionné pour le moment. Par défaut, est-ce la bonne option d'opter pour le non ? Par défaut, il sera défini sur le nom Dan. Cela signifie simplement que vous avez créé en bloc ou un article sur un produit. La structure de l'oural ressemblerait à l'année, à la date et au mois suivis du nom du message. Maintenant, c'est quelque chose que vous devriez éviter complètement à tout prix, car ce ne sera pas une bonne chose en termes de référencement. Maintenant, en termes de référencement, ural slug y joue également un très grand rôle Si vous pouviez réduire au maximum votre slug ural et n'ajouter que le sujet de la page ou de l'article dans son intégralité, ce serait largement suffisant sélection du nom du message est la meilleure option pour la structure permeling et vous pouvez enregistrer les modifications ici Très bien, donc quel que soit le nom du message ou le nom de la page, il apparaîtra après une barre oblique et indiquera que c'est ainsi que devrait être il apparaîtra après une barre oblique et indiquera que c'est ainsi que votre structure de permeling J'espère que vous apprécierez cette conférence. Dans la prochaine conférence, je vais vous montrer comment installer et utiliser notre générateur de pages. 4. Installation de Créateur de pages dans Elementor PRO: Les gars, dans cette conférence, nous verrons comment installer la version element ou pro dans notre système. Comme je l'ai dit dans la conférence précédente nous verrons comment créer et concevoir la page d'accueil à l'aide du plugin Elementor, qui est un constructeur de site Web Je l'ai dit, mais je pense qu' il reste encore quelques choses à faire avant passer directement à cette question en particulier. le moment, nous allons voir comment installer ce plug in Elementor Et nous examinerons également certains paramètres de base proposés par Elementor Ensuite, nous comprendrons le conteneur et la boîte flexible. Très bien, comme vous pouvez le voir sur mon écran de bureau, j'ai le fichier zip d'Elementor Pro Maintenant, Elementor est un plugin gratuit doté de certaines fonctionnalités totalement gratuites. Vous n'avez pas besoin de saisir informations de votre carte ni de payer un seul centime pour accéder à toutes ces fonctionnalités gratuites. Mais il possède peu de fonctionnalités payantes. Et vous devez les payer sur la base d'un abonnement mensuel. Elementor Pro est donc payé. Mais comme nous sommes en train d'apprendre et que nous n' allons pas l'utiliser à des fins commerciales, j'ai le fichier zip qui sera accessible à tous. D'accord ? Et ce fichier zip, vous pouvez l'utiliser pour explorer les fonctionnalités d'Elementor Pro. D'accord ? Je ne recommande pas du tout d'utiliser logiciel piraté ou je n'en fais pas la promotion, en aucun cas. Ceci est juste une version d'Elementor Pro dans un format de fichier zip largement utilisé à des fins de pratique, d'accord ? Donc parce que je veux que vous ayez un budget très serré pour apprendre de nouvelles choses et toutes ces sortes de choses. C'est la raison pour laquelle je fournis ces fichiers afin que vous puissiez apprendre et explorer différentes choses. Une fois que vous aurez créé des sites Web à des fins commerciales, peut-être plus tard, vous pourrez payer le plan d' abonnement Elementor Pro Pour cette raison, je vais continuer avec ce fichier et je vais également montrer comment l'utiliser. Dans la section du tableau de bord, vous verrez que nous avons une option de plug-ins. Une fois que je le survole, je vois des options permettant d' installer des plug-ins, ajouter de nouveaux plug-ins et d'insérer un éditeur de fichiers Installez maintenant les plug-ins. Une fois que vous y serez, une liste des différents plug-ins actuellement installés sur notre site de presse s'affichera. Comme dans notre cas, notre site Web est assez récent et récent, il n'y a pas beaucoup de plug-ins installés. Tout ce qu'il aura, c'est un plugin anti-spam et le Hello Dolly. Il s'agit simplement d'un plug-in de base. Je crois qu'il a été installé parce que nous avions je suppose, des constructeurs de thèmes en 2024 ou 2023. C'est vrai. C'est pourquoi nous avons ce plug-in. Nous pouvons toujours les supprimer plus tard, mais pour le moment, gardons-les tels quels. Et nous allons ajouter un nouveau plug-in ici. Je vais cliquer sur cette option et vous pouvez voir que nous avons une option avec de nombreux plugins différents. Cette section agit comme votre App Store ou Playstore, tout comme sur un iPhone ou un smartphone Android, nous avons le Playstore ou l'App Store à partir duquel vous pouvez télécharger différentes en va de même pour Wordpress, où vous pouvez télécharger de nombreux plugins différents. Je vais juste chercher Elementor, Elementor, et je vais cliquer ici. Une fois que Elementor apparaîtra, je l'installerai. Maintenant, Elementor, comme je l'ai dit, propose certaines fonctionnalités gratuites et certaines fonctionnalités payantes Pour utiliser la version pro, nous avons besoin de l' elementor lui-même, la version gratuite elle-même, afin que pro et elementor puissent aller de pair Ensuite, nous cliquons sur Activer. Et nous attendrons qu'il active ce plugin. Nous pouvons ignorer cela. OK ? Nous pouvons ignorer l'ensemble du processus. Une fois que c'est fait, cliquez à nouveau sur Ignorer, qui se trouve le coin inférieur droit de votre écran. Très bien, maintenant c'est comme ça que ça va se voir. Maintenant, la dernière fonctionnalité d'Elementor intègre également les outils d'IA Vous pouvez simplement décrire quelques points ici et là et cela fera l'essentiel du travail. Tu n'as même pas besoin de faire Dragon Drop. C'est ainsi qu'Elementor a évolué ces derniers temps. Mais laissons ça de côté pour le moment. Notre objectif principal de ce cours est d' explorer les fonctionnalités d' Elementor et d'Elementor Faire suivre les sites de presse. Nous allons revenir à notre tableau de bord dès maintenant. Ce que vous venez de voir, c'est le tableau de bord Elementor. OK ? Auparavant, comme vous pouvez le voir en haut de la barre noire, vous aviez la possibilité de personnaliser, pour la section d'édition, le tableau de bord d'édition du thème que nous utilisons. Nous avons la page d'édition, puis nous avons l'élément de largeur d'édition Cette page d'édition est l'option de page d'édition de Word Press. C'est pour le thème que nous utilisons, qui est le bloc. C'est pour l'Elementor, qui est un constructeur de pages que nous utilisons actuellement Nous allons revenir à notre tableau de bord. Et maintenant, nous devons installer notre fichier pro, qui est Elementor Pro Nous allons revenir sur les plug-ins. Nous allons ajouter un nouveau plug-in. En haut, vous trouverez l'option Upload Plug In. Il suffit de cliquer ici et nous pouvons trouver. Option permettant de choisir le fichier. Maintenant, vous ne pouvez pas placer le fichier par câble ici. Il vous suffit de parcourir le fichier et une fois qu'il est localisé, vous pouvez l'installer et vous devez également activer le plug-in Pro. Maintenant, une fois que vous l'avez fait, je pense que vous avez presque tout installé. Maintenant, comme vous pouvez le voir, une fois l'Elementor Pro a été installé, il vous indiquera qu'une nouvelle version d' Elementor Pro est maintenant disponible Veuillez ne jamais mettre à jour cette fonctionnalité d'Elementor Pro. Tu vas avoir de gros problèmes. La seule raison pour laquelle je dis cela est que disons simplement que vous avez créé un site Web hébergé sur votre serveur local, c'est-à-dire votre système, l'écran de votre ordinateur portable, n'est-ce pas ? Vous avez donc créé un site Web l'aide d'Elementor Pro et tout d'un coup, vous avez décidé de mettre à jour tous les plugins que vous utilisiez avec Elementor Maintenant, ce qui se passe, c'est que les fichiers de fonctionnalités d' Elementor Pro qui sont présents dans les nouvelles versions, d'accord, il peut s'agir de fichiers de débogage, de nouvelles fonctionnalités à utiliser Ceux-ci seront évidemment ajoutés à votre élément ou fichier existant Maintenant, element or pro, comme je l'ai dit, est une version payante. Il nécessite une clé de licence. Vous devez payer des frais d'abonnement mensuels. Hein ? Il sera lié à un compte. Une fois qu'il découvre que votre Elementor Pro existant n'a pas de clé de licence, vous pourriez avoir de très gros problèmes, vous causant peut-être des problèmes juridiques, ou votre site Web pourrait simplement tomber en panne Ne mettez donc jamais à jour votre Elementor Pro lorsque vous apprenez des choses. Lorsque vous aurez payé pour la version Elementor Pro, mettez-la à jour Très bien, pour l'instant, nous allons nous en tenir cette partie et passer aux paramètres d'Elementor Comme vous pouvez le voir, une fois que je passe la souris sur les paramètres d'Elementor, j'ai des tonnes et des tonnes d'options différentes Pour l'instant, je vais me concentrer uniquement sur la partie outils, ou plutôt sur la partie Paramètres. OK, je vais me concentrer sur ces deux options. Passons d' abord aux paramètres et vous trouverez les intégrations générales avancées et les fonctionnalités Passons à la partie Fonctionnalités. Une fois que j'aurai fait défiler la page vers le bas, je trouverai que nous avons une option d'icônes de police intégrées, vous devez donc la changer de valeur par défaut en option active Cela signifie essentiellement que toutes les icônes que vous aurez sur ce site Web sont généralement au format SG. Les images sont généralement au format P ou PNG ou au format Pec. accord, P est la plus compressée et vous savez, c'est elle qui se charge le plus rapidement parmi les autres options. D'autres extensions de fichiers que je viens de dire en ce moment, juste comme ça, les icônes ont également un fichier SG. Maintenant, ce fichier SG sera rendu sans charger la police. Génial. Et la bibliothèque d'icônes et ses fichiers CSS et polices associés. C'est ce que signifient essentiellement ces icônes de police intégrées signifient essentiellement ces icônes de police Cela signifie que les performances de votre site Web augmenteront de manière significative. Wordpress a une très mauvaise réputation en termes de performances du site Web, mais je crois que c'est aux développeurs de décider comment ils optimisent leur site Web. À votre cela ne laisse aucune différence par rapport à un site Web réactif ou à un site Web Wordpress. Oui, cela dépend également du serveur sur lequel vous avez hébergé votre site Web, mais je pense qu' il y a peu d' optimisations ici Et cela pourrait également vous aider à accélérer les performances de votre site Web. C'est ce qui vous aidera à passer à la partie du conteneur en grille. Maintenant, si vous avez appris le CSS, le HTML et le Javascript, oubliez le STL et le Javascript Concentrez-vous également sur la partie CSS. Si vous avez déjà exploré le CSS dans votre vie, vous devez avoir entendu ou même appris le concept des conteneurs, n'est-ce pas ? Conteneurs et boîtes flexibles. Elementor a récemment ajouté la fonctionnalité d' un conteneur en grille Si vous souhaitez utiliser cette fonctionnalité de conteneur, cliquez sur l'actif pour créer une option de grille que vous pourrez ajouter. Option de conteneur que vous pouvez ajouter dans votre page de presse. D'accord, nous avons également la barre supérieure d' édition. Nous avons cette option particulière. Nous allons cliquer sur Actif. Nous pouvons cliquer sur Actif. C'est pour la version AI, d'accord. Si vous souhaitez utiliser la fonctionnalité AI, vous devez cliquer sur le bouton Actif. Maintenant que vous utilisez l'Elementor Pro, il est possible que vous ne puissiez pas utiliser la version AI de celui-ci Mais si vous utilisez simplement l'élément ou la version gratuite et que vous n'installez pas le fichier que je vais fournir, vous pouvez pratiquement en activer la version AI. Très bien, alors nous avons les pages de destination listées éléments et toutes sortes de choses que vous devez activer. Et vous pouvez simplement nous maintenir aux fonctionnalités stables par défaut. Bien, une fois que vous avez fait cela, vous pouvez simplement cliquer sur Enregistrer les modifications. Et je pense que nous sommes plutôt doués pour configurer l'ensemble de l'élément ou du site Web pour la prochaine conférence. 5. Récipient Flexbox vs section intérieure - Peu déroutant, mais ne vous inquiétez pas: Tout le monde, bienvenue sur une autre vidéo. Dans cette conférence vidéo en particulier, nous verrons quelle est la différence entre le conteneur Flex Box et l'intersection que nous avions auparavant dans l'élément ou dans les versions précédentes. J'ai créé deux sites Web. Ce sont deux sites Web factices. Le premier ici, que nous pouvons voir , a l'ancienne version d' Elementor Je pense qu'il a la version 3.5 je crois. Et avant, il y avait une intersection. Et à l'heure actuelle, nous avons l' option des grilles et des conteneurs. Vous pouvez voir que nous avons une grille et un conteneur comme mise en page de notre site Web. Je vais donc vous montrer rapidement quelle est la différence entre les deux afin que nous puissions comprendre comment nous pouvons utiliser la fonctionnalité de conteneur dans les prochaines conférences . Comme vous pouvez le voir ici, nous avons un éditeur de texte de titre, puis un bouton. Maintenant, les trois éléments de cette intersection particulière, cette colonne ou section particulière sont alignés au centre. Cela ne pose aucun problème. Supposons simplement que nous aimerions ajouter un autre bouton à cette section particulière. Et nous voulons arranger ce bouton de telle sorte que ce nouveau bouton et ce bouton existant soient tous deux sur la même ligne. Ils appartiennent tous les deux à la même colonne, d'accord ? Et il doit y avoir une sorte d' espacement entre ces deux éléments Est-ce possible ? Essayons de le découvrir. Je vais donc simplement faire glisser ce bouton et essayer de le placer. Cela me donne donc deux options. Je peux le placer au-dessus ce bouton existant ou en dessous. Et si je le place au-dessus de ce bouton ? Je peux faire une ligne centrale, je peux laisser une ligne, je peux écrire une ligne, ou je peux la justifier pour qu' elle occupe toute la largeur. Mais ce n'est pas exactement ce que nous voulons, n'est-ce pas ? Nous voulons que ces deux boutons apparaissent dans la même colonne. Alors, comment pouvons-nous y parvenir ? Est-ce possible à l'intérieur d'une intersection ? Non, ça ne l'est pas. C'est pourquoi nous avons le concept de conteneurs et de grilles. Donc, ici en ce moment, dans cette nouvelle version d'Elementor où nous avons également la version Elementor Pro Mais attention, la version pro et la version gratuite ont toutes deux le conteneur. Ainsi, même si vous souhaitez continuer avec la version gratuite, vous pouvez toujours accéder au conteneur par défaut avec elementos Une version plus récente a supprimé le concept d'intersection et a utilisé le conteneur comme disposition du style d'élément par défaut Donc, ici, si j'essaie d'ajouter un autre bouton, n'ai toujours que deux options. Je peux soit placer le bouton au-dessus ce bouton, soit placer le nouveau bouton en dessous du bouton existant. accord, mais comment le placer de telle sorte qu'il apparaisse dans la même colonne ? Eh bien, il y a le concept de conteneur. Je peux juste le placer ici. Et vous pouvez voir que j'ai un contenant. Agit comme une boîte. Si vous avez suivi mon cours de développement Web complet , où j'ai une section séparée sur le CSS et les unités de style, les mises en page de style et tout ce genre de choses, vous vous familiariserez peut-être sur les mises en page de style et tout ce genre de choses, vous vous familiariserez peut-être également avec le concept ici Mais si vous n'avez pas suivi ce cours de développement Web ou si vous n'avez jamais entendu parler du CSS par le passé, ne vous inquiétez pas. Le conteneur, c'est comme une boîte. Dans une boîte, vous pouvez disposer les éléments ou les éléments sur la ligne centrale ou les objets ensemble au-dessus. Vous pouvez les empiler, tout comme ce contenant agit comme une boîte. Dans cette boîte, je peux placer mon bouton existant et je peux simplement le dupliquer. OK, vous pouvez donc voir que ces deux boutons se trouvent dans ce conteneur. Si je clique sur ce conteneur, vous pouvez voir que ces deux éléments sont présents dans cette boîte, qui apparaît dans la bordure grise. Même si j'essaie de le montrer du point de vue de la structure, il y a un conteneur à l'intérieur de ce conteneur. Nous avons ces deux boutons. Essayons de les organiser de manière à ce que ces deux éléments apparaissent de la même manière. Nous pouvons les centrer et aligner la ligne dans le sens horizontal C'est ainsi que nous pouvons l'obtenir. Disons maintenant que nous aimerions ajouter un espace supplémentaire entre ces deux boutons. Comment pouvons-nous le faire ? Une fois que je fais défiler la page vers le bas, j'ai l'option des lacunes. Je peux simplement augmenter la valeur des écarts. Vous pouvez voir que ces boutons sont séparés. C'est bon. Je peux même le changer en quelque chose comme inversé. Laisse-moi juste le mettre à zéro au lieu du centre. Vous pouvez voir à quoi cela ressemblerait. Permettez-moi simplement de changer cela en pourcentage. C'est bon. Il existe un espacement par défaut entre les deux. Voici à quoi cela ressemblerait si la direction de ce conteneur était réglée en sens inverse. Si c'est horizontal, ce serait comme ça. Vertical, quelque chose comme ça. Et à l'horizontale. Ou je pourrais dire l'inverse. Changeons simplement le nom de ce livre. Disons simplement que c'est le bouton un, le premier. Il en va de même pour le bouton suivant. Si je donne quelque chose comme le bouton deux, le bouton deux, et si je change la disposition du conteneur au lieu de l'inverser, si je le place verticalement, alors vous pouvez voir que le bouton deux est empilé Le premier bouton se trouve en bas, c'est ainsi que l'espacement total et la direction du conteneur sont définis Si vous souhaitez justifier le contenu, vous pouvez même le faire. Maintenant, cela ne se produirait pas avec la partie verticale. Si je le rends horizontal, je peux l'aligner sur l'axe central, il peut y avoir un certain espacement entre les deux Ainsi, un bouton se trouve sur le côté gauche et l'autre sur le côté le plus à droite. C'est ainsi que nous avons de l'espace. Un espace autour signifie essentiellement que le bouton aura espacement sur le côté gauche et sur le côté droit, tout comme cet espace aura un espacement uniforme dans les quatre directions C'est ainsi que vous pouvez voir qu'une marge ou un rembourrage se trouvent en haut et en bas à droite C'est ainsi que fonctionne réellement cette disposition de conteneur particulière . Néanmoins, si vous n'êtes pas clair, permettez-moi de vous montrer un autre exemple. Juste en dessous de cette section, section particulière que nous venons de contourner, nous avons une autre section de critiques. Maintenant, ces critiques ne sont qu'un exemple. Ce n'est pas exactement comme une section de critiques ou de témoignages qu'un site Web pourrait avoir Mais juste pour donner un exemple ou démontrer le concept de mise en page de conteneurs, j'ai construit quelque chose comme ça. Donc, dans notre ancienne mise en page des éléments, nous avons ce type de trois critiques. Supposons maintenant que nous aimerions centrer tous les éléments de cette section de témoignage Alors, comment pourrai-je le faire ? Je peux donc simplement cliquer sur la colonne elle-même et je peux aligner verticalement au milieu et à l' horizontale, en un centre pointillé. Même si j' aligne le centre horizontalement, cet élément en particulier n'est pas aligné au centre, ni cela, ni cela, tous par rapport à l'axe y. Ils sont alignés au centre, mais pas par rapport à l'axe X. Si vous pouvez bien comprendre le graphique, voici mon axe y. Si je veux centrer les éléments par rapport à l'axe y, idéalement, l'élément devrait se trouver quelque part ici. Mais si je veux, c'est mon axe X. Si je veux centrer l'élément par rapport à l'axe X, l' élément doit se trouver quelque part ici, n'est-ce pas ? C'est ainsi que les choses devraient fonctionner idéalement, mais cela ne fonctionne pas avec le tracé des intersections. Si je reviens à la nouvelle version d' Elementor et que je peux cliquer sur le conteneur, je peux modifier la disposition du conteneur telle sorte que la direction soit censée être verticale Et nous avons aligné le contenu au centre et justifié le centre de contenu et les éléments sont alignés au centre. Vous pouvez voir qu'en ce qui concerne les axes y et x, les éléments sont exactement au centre. Juste comme ça. C'est ainsi que cela a été possible grâce à notre aménagement de conteneurs. Une dernière chose, la disposition du conteneur serait utile dans un scénario. Supposons que dans une ancienne version que vous utilisez , vous souhaitiez simplement remplacer l'image de manière à ce que l'image que vous aviez dans la première colonne passe dans la troisième colonne. Et l'image de la troisième colonne doit revenir à l'emplacement de l'image de la première colonne. Bien, si vous voulez faire quelque chose comme ça, parfois ce qui peut arriver en cas d'erreur, simplement par erreur, vous pourriez avoir placé l'image dans une mauvaise colonne ou dans une mauvaise section. Cela pourrait même endommager votre site Web si vous l'avez conçu correctement. Si vous voulez faire quelque chose comme ça, alors c'est juste Dragon Drop. C'est très simple, vous pouvez simplement faire glisser comme ceci. Mais parfois, l' élément que vous essayez de réorganiser peut se retrouver dans une autre colonne, cette intersection elle-même. Afin d'éviter que cela ne se produise, disons simplement que j' ai tout ce conteneur. disons simplement que j' ai tout ce conteneur J'ai tout ce contenant. Si je clique simplement sur la structure, un conteneur possède un conteneur. D'accord ? Ce que j' essaie essentiellement d'expliquer c'est que nous avons un conteneur, d'accord ? Il s'agit d'un conteneur entier. Il s' agit d'un conteneur, et celui-ci est un conteneur particulier. Et celui-ci est également un autre conteneur séparé. Au lieu de trois colonnes, nous avons trois conteneurs. Une boîte dans une autre boîte, c'est comme un nichoir. Supposons que nous ayons une grande boîte d'Amazon. Ensuite, nous avons quelques boîtes différentes, trois boîtes provenant de Best Buy, Walmart ou de toute autre plateforme de commerce électronique à laquelle vous pourriez penser Supposons simplement n'importe quel autre boîtier de plateforme de commerce électronique. Ces trois boîtes sont à l'intérieur d'une grande boîte. Nous aimerions cliquer sur le conteneur, la case parent. Nous pouvons réorganiser la direction des éléments de ces conteneurs Vous pouvez facilement voir que les éléments ou les conteneurs sont essentiellement ces conteneurs dans notre cas. Donc, ce que j' essaie essentiellement d'expliquer, c'est que cette colonne en particulier, dont vous pourriez penser qu' il s'agit d'une colonne, mais c'est un conteneur. Celui-ci est un conteneur, celui-ci est un conteneur. Donc, bien que ce soient des conteneurs, ils font partie d'un grand conteneur, je peux donc simplement les appeler des éléments pour le moment, n'est-ce pas ? J'ai donc simplement essayé d' inverser ces conteneurs de manière à pouvoir les réorganiser conformément à ce que nous attendions de leur comportement C'est ainsi que notre conteneur Flexbox a réellement fonctionné. Je sais que certaines personnes qui regardent cette vidéo trouveront peut-être le concept de conteneur très confus. Mais ne compliquez pas les choses, considérez cela comme une boîte dans une boîte. Une boîte est flexible pour placer éléments dans n'importe quelle direction rapport aux axes y et x chaque fois que vous essayez de construire autour de quelque chose Chaque fois que vous essayez d'organiser des éléments, placez toujours une image d'un graphique comportant un graphique bidimensionnel. Axes X et Y. Ne vous compliquez pas trop la tâche avec l'axe Z. De plus, nous ne travaillons pas avec un site Web en trois dimensions, nous nous contentons de contourner la version en deux D. Pour le moment, vous n' avez qu'un axe Y et un axe X. Si vous souhaitez placer quelques objets au centre par rapport à l' axe X et par rapport à l'axe Y, comment cela se comporterait-il ? Ce comportement reproduirait donc à peu près ce à quoi vous vous attendiez lorsque vous appliquez le concept de conteneurs Ce n'était pas le cas avec le concept d'intersection. Les conteneurs sont très pratiques. Et les conteneurs existaient avant même qu' Elementor ne les invente dans leurs nouvelles versions Parce que le CSS avait par défaut le concept de conteneurs qui plongent et justifient contenu justifié et toutes sortes de choses de ce genre. Je pense que si vous connaissez le CSS, il ne serait pas difficile de comprendre ce concept. Mais si vous débutez dans le monde du développement Web, ne vous laissez pas submerger par ce concept de conteneurs. Reregardez simplement ce point vidéo, vous ne trouvez pas cela confortable de le contourner. Je dis toujours que chaque fois que vous suivez un cours, essayez de le faire vous-même afin comprendre clairement comment cela a réellement fonctionné. Bien, j'espère que cette vidéo vous a aidé à comprendre le concept des conteneurs. Dans la prochaine conférence vidéo, nous verrons comment créer une page d'accueil d' un site Web à l'aide du générateur de pages Elementor 6. Apprendre des éléments d'Elementor tout en créant une page d'accueil: Bien, j'espère que vous êtes aussi enthousiastes que moi, car dans cette vidéo nous allons créer une page d'accueil complète à partir de zéro à l'aide de l' élément ou du générateur de page. Plus tôt, alors que nous n'avions pas ce plugin dans la barre noire supérieure, nous ne voyions pas cette option permettant de l'éditer avec un élément ou un générateur de page Mais maintenant, nous pouvons ici avoir une nouvelle page qui s' appelle element ou 58. Dans cette page elle-même, nous allons créer et concevoir une page d'accueil complète à partir de zéro. Maintenant que le rédacteur est à l'intérieur de la page, nous aimerions créer cette page à partir de zéro. Éditons simplement cette page en allant ici. Qu'allons-nous faire ? Nous allons supprimer le nom de la page ici. voyez, nous avons une option de blocage de page et c' est sur ce bloc d'options de blocage d'application que je vais cliquer. Je vais cliquer sur le titre de la page. Juste ici, dans le titre de la page. J'ai l'option d'hériter de manière personnalisée et de la désactiver. Je vais simplement cliquer sur Désactivé et je vais l'enregistrer. Une fois que j'aurai cliqué dessus, je publierai cette page. Si je consulte ma page, voyons ce qui se passe. Puis-je voir le titre de la page ici ? Aucun titre de page ne figurera dans la section urale, mais il ne sera pas présent dans notre page Web. En haut, vous pouvez voir l'en-tête que nous avons créé précédemment. Très bien, commençons par créer page à l'aide de l'Elementor. Je vais juste cliquer ici et voici à quoi ressemblera l'interface de l'élément ou du générateur de page. Dans le volet de gauche, vous verrez les différents plug-ins. Et je ne devrais pas parler de plug-ins, mais plutôt d'éléments de base. Vous pouvez voir que nous avons une mise en page de conteneur, nous avons une mise en page Pro, nous avons une option de mise en page. Ensuite, nous avons Pro. Nous avons ici tous les éléments Pro disponibles depuis que nous avons installé notre plug-in Pro. Mais je pense que cette vidéo serait suffisante pour ceux qui débutent et qui n'ont pas acheté le plugin. Très bien, qu' allons-nous faire ? Tout d'abord, chaque page Web nécessite une section dédiée aux héros. Tout d'abord, nous allons créer une section dédiée aux héros en cliquant ici , sur l'icône plus. Et je vais choisir les différentes options de boîte flexible ici. Je dois choisir la structure de ma boîte flexible. Je vais passer aux sections à deux colonnes. Et qu'allons-nous faire ? Nous garderons une couche d' arrière-plan de couleur noire et nous y ajouterons quelques éléments Très bien, vous pouvez voir ici que la mise en page rose, qui est formée ici, représente l'ensemble du conteneur, l'ensemble la mise en page Flexbox à l'intérieur duquel nous avons deux conteneurs. Vous pouvez le voir ici. Très bien, maintenant dans le volet de gauche, vous trouverez trois options différentes la mise en page, le style et les options avancées. Dans l'onglet Mise en page, vous trouverez différentes options pour choisir et modifier le sens de la largeur du conteneur dans lequel votre conteneur fonctionne et les espaces que vous pouvez laisser entre les éléments ou les conteneurs que vous avez Très bien, j'espère que vous avez compris le point concernant la partie mise en page. Ensuite, en ce qui concerne l'option style, nous avons la possibilité de choisir entre les différents arrière-plans que nous avons. À quoi doit ressembler l'arrière-plan, moment il apparaît normalement quel moment il apparaît normalement et que doit-il se passer lorsque le curseur pointe vers cet élément ? C'est l' effet de survol qui se produit. Vous souhaiterez peut-être ajouter des détails ou des éléments de style supplémentaires. Lorsque l'utilisateur pointe son curseur sur un élément en particulier, vous pouvez modifier ces effets et les paramètres de l'effet hoor En ce qui concerne le type d'arrière-plan, nous trouverons différentes options. Nous avons la vidéo classique en dégradé et le diaporama. Classique signifie essentiellement qu' une couleur simple sera appliquée en arrière-plan. Ou un effet de dégradé est quelque chose dans lequel deux couleurs ou plus peuvent être utilisées dans différents formats, comme un linéaire, un radial, etc. Si vous avez suivi mon cours Figma I, vous devez avoir découvert les différents types de dégradés de couleurs et la manière dont nous pouvons créer différentes mises en page d'arrière-plan Quelque chose de similaire peut être appliqué ici même sur le site de presse après l'arrière-plan, nous avons une option de superposition d' arrière-plan Cela signifie que si vous essayez de créer un effet de superposition sur votre arrière-plan, vous pouvez même le faire Vous avez ensuite la possibilité d' ajouter une bordure aux éléments. Vous pouvez donner un type de bordure, vous pouvez ajouter un rayon, vous pouvez ajouter un séparateur de forme Dans la section avancée, vous trouverez une option permettant de jouer avec la marge et le rembourrage Nous aborderons maintenant ce sujet plus tard à propos de ce qu'est la marge, qu'est-ce que le rembourrage ? Mais cela signifie essentiellement que dans cette conférence elle-même, d'ailleurs, ce que les marges et le rembourrage permettent essentiellement aux utilisateurs de faire , c'est de laisser un certain espace entre vos éléments J'espère que vous avez compris le point sur les marges et le rembourrage. Vous avez ensuite la possibilité d'aligner les éléments et de les classer dans quel ordre, en particulier si vous souhaitez organiser vos éléments ou éléments. Ensuite, vous avez la possibilité de placer la taille, jouer avec la position et, vous savez, d'augmenter ou de diminuer l'indice Z. Nous aborderons donc tous les sujets. Ne vous inquiétez pas, mais pour l'instant, qu'allons-nous faire dans cette boîte flexible en particulier ? Nous allons ajouter une couleur de fond. En ce qui concerne l'option de style, nous avons Background normal, nous cliquons sur Classic et nous choisirons la couleur par défaut. Vous pouvez voir qu'aucune couleur n'a été appliquée. Il prend simplement la couleur par défaut qui est là. Et la couleur de l'arrière-plan de cette boîte flexible particulière est transparente. Chaque fois que vous trouvez quelque chose comme ça, cela signifie essentiellement qu'il s'agit d'un arrière-plan transparent. Bien, nous ne voulons donc pas un arrière-plan transparent, nous voulons un fond noir. Il suffit de cliquer sur la couleur, et nous allons faire glisser un curseur en bas à gauche, ou peut-être même en bas à droite Vous pouvez vous concentrer, le coin inférieur gauche est noir. Vous pouvez même regarder le code hexadécimal lorsque le nombre est entièrement nul, cela signifie essentiellement qu'il est noir Quand les chiffres sont tous, cela signifie essentiellement que c'est blanc. Nous pouvons simplement faire glisser le pointeur vers la gauche ou vers la droite pour obtenir un effet de fond noir. C'est bon. Je peux même choisir entre différentes couleurs en déplaçant mon curseur vers droite et le côté, les couleurs les plus chaudes Et vers la gauche, ce seront les couleurs les plus cool. Très bien, ici, vous pouvez voir que si vous jouez avec ce deuxième curseur, cela signifie essentiellement que vous jouez avec la transparence de votre couleur Plus vous vous déplacez vers le curseur vers la gauche, cela signifie essentiellement que votre couleur est transparente Et plus vous vous déplacez vers l'intérieur, cela signifie essentiellement que la couleur est opaque ou non transparente. J' espère avoir compris le point. Faisons en sorte qu'il soit un peu noir, mais pas vraiment noir. Je vais juste m'en tenir à cette teinte. D'accord ? J'aime bien cette couleur, alors nous allons la garder comme ça. Maintenant, pour en venir à cette partie de l'image, nous ne voulons pas ajouter d'image pour le moment, mais nous y reviendrons plus tard. Très bien, ajoutons maintenant quelques éléments à l'intérieur. Ce que je vais faire, c'est cliquer sur ce conteneur. Je vais juste cliquer sur ce conteneur. Je vais revenir à ce bouton en particulier, qui me permettra de naviguer entre les différents éléments que nous avons. Et ce que je vais faire, c'est ajouter un éditeur de texte. L'éditeur de texte signifie essentiellement que vous ajoutez du texte à l'intérieur. Il ne possède pas de balise h1h2, mais une balise de paragraphe Si vous avez suivi un cours de développement Web complet ou si vous avez une idée du HTML et du CSS, vous devez avoir découvert les différentes balises HTML. Il existe de nombreuses balises comme h1h6, puis vous avez une balise tag ou une balise paragraphe qui contient essentiellement l'intégralité du contenu, le corps du texte Alors que from h1h6 contient toutes les balises de titre, qui représentent essentiellement le contenu de votre corps le moment, nous allons ajouter quelque chose comme le nom de l'entreprise. En ce moment, vous pouvez voir que la couleur de cette police est bleu foncé, je dirais. Mais ça ne va pas bien avec la couleur de fond noir. Évidemment, nous voulons qu'un effet de contraste apparaisse lorsque la couleur du fond est noire. Alors évidemment, nous voulons que la couleur de la police contraste avec celle-ci. Cela signifie qu'il doit avoir une teinte plus claire, ou qu'une couleur plus claire ne serait pas préférable pour lui donner une couleur blanche. Passons à ça. Vous pouvez voir Textedor ici. Je vais cliquer sur Style. Ensuite, dans la section couleur du texte, je fais glisser mon curseur vers le coin supérieur gauche, et vous pouvez voir que ma couleur est passée au blanc. C'est bon. Vous pouvez même jouer avec les différents alignements de votre texte Actuellement, il reste une ligne, mais elle n'est pas sélectionnée. Par défaut, le texte serait laissé sur une ligne. Ensuite, vous avez une ligne centrale, une ligne droite et le contenu justifié. Mais gardons-le. Avec les paramètres par défaut, nous pouvons même modifier la typographie. Typographie, en gros, vous êtes autorisé à choisir entre différentes familles de polices Ici, vous avez quelques polices intégrées et elles sont même connectées à Google Fonts. Si je recherche quelque chose comme des poppins, vous pouvez voir que c'est une police Google Et cela peut être appliqué ici même. Mais si vous souhaitez ajouter des polices personnalisées, vous verrez plus loin dans ce cours comment les ajouter à votre site Web. Maintenant, vous pouvez même jouer avec les différentes tailles de police. Actuellement, une taille par défaut lui est appliquée. Vous pouvez même déplacer le curseur pour voir à quoi il ressemblerait avec 15 pixels. 15 pixels de votre texte leor. Ou je le garderais simplement. 2020 s'annonce bien. C'est bon. Maintenant, vous pouvez même trouver différentes unités. Actuellement, il est exprimé en unités de pixels, vous trouverez EM, Ram, largeur de fenêtre, etc. Je ne parlerai donc pas toutes les unités que nous avons ici. Mais je suppose que dans mon cours de développement Web complet, j'ai entièrement couvert toutes ces différentes unités dans la section CSS. J'espère que si vous souhaitez vous intéresser à ces sujets en détail, vous devriez certainement consulter ces cours. Très bien, alors nous avons le poids de la police. Le poids de la police signifie essentiellement que vous souhaitiez conserver votre police en gras ou que vous souhaitiez que le poids de la police soit léger. Si je garde cela à peu près clair, vous constaterez que la police elle-même devient très fine. Si je le garde en gras, vous constaterez que le texte est très gras et lumineux. Restons-le en gras. Nous pouvons même le modifier en demi-gras, mais je voudrais juste le garder en gras. Vous avez maintenant la possibilité de transformer votre texte. Supposons maintenant que , dans certains cas, j'ai ajouté un texte contenant une lettre et tous les mots en minuscules, mais j'aimerais le remplacer par des majuscules. Ensuite, vous pouvez voir que toutes les lettres de mon texte ont été transformées en majuscules. Si je passe en minuscules, toutes les lettres seront transformées en minuscules. J'ai la possibilité de capitaliser. Cela signifie essentiellement qu' après chaque mot, la première lettre du mot suivant sera transformée en majuscule. Alors que la liste des lettres de ce même mot sera transformée en minuscules. C'est ce que signifie réellement la transformation capitalisée. Ensuite, vous avez la possibilité de normaliser, ce qui signifie essentiellement que quel que soit le texte que vous avez collé, les paramètres par défaut seront rétablis Vous avez ensuite la possibilité de styliser votre élément. Cela signifie si vous souhaitez conserver votre style de police normal, italique ou oblique J'espère que vous comprenez comment contourner la transformation et le style. Si vous avez utilisé un logiciel d' édition de texte tel que Microsoft Word ou Google Docs, ces types de paramètres sont évidemment très simples à comprendre et à contourner. Bien, enfin, nous avons la décoration, ce qui signifie essentiellement que vous souhaitez souligner votre texte ? Souhaitez-vous ajouter une surligne à votre texte ? Souhaitez-vous insérer une ligne dans un texte ou peut-être n'utiliser aucune des options ci-dessus. Donc, gardons-le par défaut, ce qui signifie qu'aucune des options ne sera appliquée pour la décoration. Ensuite, vous avez une option de hauteur de ligne. Maintenant, comme nous n'avons que deux mots qui apparaissent sur la même ligne, nous n'avons pas plusieurs lignes, nous n'avons pas beaucoup de mots couvrant plusieurs lignes. La hauteur de ligne signifie essentiellement que chaque fois que vous avez plusieurs mots ou un texte si long qu'il couvre plusieurs lignes, l'espacement entre ces lignes augmente Hein ? Vous avez la hauteur de ligne, vous avez l'espacement des lettres Cela signifie un espacement entre chaque lettre. Si je le remplace par quelque chose comme, disons simplement trois, vous pouvez voir comment le texte s'est transformé. Ça a l'air différent de ce qu'il était avant, non ? Vous avez également un espacement entre les mots. Cela signifie que l'espacement entre deux mots ou plus sera joué avec. Hein ? Ensuite, vous avez la possibilité d' ajouter une ombre au texte, ce que nous n'aborderons pas pour le moment. Mais en gros, vous pouvez ajouter un flou ou peut-être ajouter de l' ombre à votre texte Cet effet serait cool dans un cas où vous avez un arrière-plan plus clair. Mais pour le moment, nous avons un arrière-plan plus sombre. Je ne voudrais pas aborder cette question. Bien, ajoutons un nouvel élément. Je vais cliquer sur cette icône, et je vais glisser-déposer mon titre directement dans ce conteneur lui-même. Si je le place directement à l'intérieur gauche ou à l'intérieur droit, dans certains cas, vous ne pourrez peut-être pas ajouter votre nouvel élément à l'intérieur du conteneur et il se peut qu'il soit ajouté à l'extérieur de votre conteneur. Dans ce cas, comment les réorganiseriez-vous de manière à ce qu'ils apparaissent directement à l'intérieur de ce conteneur ? C'est simple. En cliquant sur la section entière du conteneur, vous avez la possibilité de choisir entre Navigator ou parfois vous pouvez même trouver Structure Vous pouvez simplement cliquer ici. Et vous trouverez ici différentes options de ce type. Comment le titre apparaîtrait, contiendrait un éditeur de texte, etc. Tous les éléments que vous avez dans l'ensemble du site Web apparaîtront ici. Très bien, je peux simplement faire glisser mon titre directement dans ce conteneur où j'ai un éditeur de texte. Vous pouvez trouver un éditeur de texte au-dessus de mon titre et le titre apparaît sous l'éditeur de texte. Si vous souhaitez réorganiser les paramètres à l'intérieur du conteneur, vous pouvez simplement glisser-déposer ici , dans le conteneur lui-même. Vous pouvez même le faire à l'intérieur de celui-ci. Très bien, je vais simplement changer le texte pour quelque chose comme effectuer des paiements ou je dirais simplement quelque chose comme option de paiement sécurisé ou ajoutons simplement quelques mots supplémentaires. effectuer des paiements par exemple Il n'a jamais été facile d'effectuer des paiements par exemple. C'est bon. Ce que je vais faire, simplement changer la couleur de police, tout d' abord en passant au style, en changeant la couleur du texte en blanc, en changeant la typographie en poppins, car nous aimerions maintenir la cohérence sur l'ensemble de notre Ensuite, nous allons ajouter, ou plutôt devrais-je dire, nous allons transformer ce texte en majuscules Très bien, qu' allons-nous faire maintenant ? Nous allons augmenter la taille de cette police. Nous aimerions faire quelque chose comme 70 pixels. Ça a l'air bien. Qu' allons-nous faire à l'intérieur de ce conteneur lui-même ? Sous notre titre, nous ajouterons un autre éditeur de texte. En gros, nous créons un site Web pour une application qui fonctionne même manière qu'Apple Pay ou N More. C'est comme un site Web promotionnel pour une application qui permet aux utilisateurs d'effectuer des paiements. s'agit simplement d'une brève idée de ce que le site Web explique essentiellement et de ce que nous essayons exactement de faire. Très bien, nous avons donc un texte simple. Encore une fois, nous pouvons simplement changer le style de police et changer la couleur du texte. Mais le moyen le plus simple contourner ce problème et de coller le style serait simplement de cliquer sur l'un des autres éléments que vous souhaitez reproduire Ici, je peux simplement cliquer sur ce texte. Je fais un clic droit sur cet élément. Je peux copier, ou j'ai un raccourci pour choisir commande C. Je peux simplement le faire ici même dans cet élément lui-même. Je peux cliquer avec le bouton droit de la souris et coller le style. Vous pouvez même voir un raccourci ici qui est Command Shift et V, je peux le faire ici. Vous pouvez voir qu'il a appliqué le style de la balise H one, que nous ne voulons pas appliquer, nous allons simplement annuler en maintenant la touche Commande et les motifs Z. Très bien, passons simplement à la balise de style. Changez la couleur en blanc. Nous pouvons changer la famille de polices en poppins. Très bien, voici le texte que nous avons. Maintenant, entre le nom que nous avons ici, éditeur de texte, et notre titre, vous pouvez voir qu'il y a un écart ici. Il serait préférable que nous puissions utiliser quelques éléments à l'intérieur de notre Elementor et apporter des modifications intéressantes autour de celui-ci Très bien, nous pouvons donc simplement ajouter un séparateur entre notre éditeur de texte et Heading afin d' avoir sorte de division entre Ici, nous avons le style. Maintenant, nous allons changer la couleur pour quelque chose comme le vert. Je vais juste déplacer mon curseur vers quelque chose comme la couleur verte J'aimerais utiliser une couleur verte froide au lieu d'un vert très vif. Je pense que cette couleur verte serait belle. Permettez-moi de déplacer mon curseur vers le haut, et voici la couleur de mon séparateur Maintenant, je peux même modifier le poids de mon diviseur. Cela signifie à quel point je veux que mon diviseur soit gros, actuellement il est réglé sur un Je peux juste en faire quelque chose comme trois. Ou peut-être même 2,5 ferait l'affaire. Bien, maintenant tu peux trouver un espacement entre eux. Réduisons-le au plus petit écart possible entre ceci et cela. Vous pouvez maintenant constater que même si le nom de l'entreprise, l'éditeur de texte se termine ici , notre séparateur occupe toute la largeur, nous ne voulons pas que cela se produise Dans ce cas, que pouvons-nous faire ? Nous devons nous assurer que notre diviseur est sélectionné dans le volet des éléments ou dans le volet d'édition En accédant à la partie contenu, vous découvrirez si vous voulez jouer avec sa largeur ou non. Actuellement, il est réglé à 100 %, ce qui signifie qu'il doit occuper la largeur maximale possible en fonction de votre conteneur. Quelle que soit la largeur de votre contenant, occupez simplement tout l'espace. C'est ce que signifie réellement 100 %. Mais nous aimerions le ramener à environ 40 %, ce qui semble parfait. Maintenant, qu' allons-nous faire ensuite ? Nous voulons ajouter deux boutons sous ce texte, n'est-ce pas ? Nous aimerions ajouter deux boutons sous ce texte, que l'utilisateur puisse en savoir plus sur notre application ou même télécharger l'application. Mettons simplement notre bouton juste en dessous. Nous aimerions maintenant utiliser deux boutons et ces deux boutons devraient apparaître en ligne. Cela signifie que les deux boutons doivent apparaître sur la même ligne et qu'il ne doit pas y avoir deux lignes. Bien, que pouvons-nous faire dans ce cas ? Tout d'abord, essayons de voir quels autres éléments nous pouvons contourner dans le style d'édition du bouton. Chaque fois que vous avez un bouton, vous pouvez en modifier le type, si vous souhaitez qu'il soit défini par défaut. Cela signifie qu'il aura un bouton d'information de couleur grise sur fond gris . Cela signifie qu'il sera par défaut entouré de certains paramètres définis. Paramètres de style tels que la couleur de fond bleu. Si vous réussissez, il sera de couleur verte. S'il s'agit d'un avertissement, il sera de couleur orange, et s'il s'agit d'un danger, il sera de couleur rouge. Gardons-le par défaut, vous pouvez modifier le texte, exemple en savoir plus. Bien, si vous souhaitez ajouter un lien vers le texte, chaque fois que l' utilisateur clique sur ce bouton, il sera redirigé vers une page ou une partie de page dans cette page Web elle-même. Vous pouvez faire en sorte que les choses fonctionnent. Vous avez la possibilité de jouer avec la taille du bouton, que vous souhaitiez qu'il soit petit, moyen, grand ou très grand. Mais je pense que cette taille du bouton est suffisante. Très bien, en passant à l'option style, changeons la famille de polices en poppins, que nous avons également appliquée à d' autres polices et à d'autres éléments Nous allons changer la couleur du bouton pour qu'il soit vert , exactement la même couleur que notre séparateur Qu'allons-nous faire ici ? Nous allons simplement copier le code couleur hexadécimal pour ce diviseur. Nous allons passer à ce bouton dans la couleur du bouton, je vais le coller ici. Vous pouvez constater que la couleur a été modifiée, mais j'aimerais la rendre un peu plus foncée. Je pense que cette couleur est assez belle. Et c'est la même couleur que je vais également appliquer ici dans la section du séparateur Laisse-moi juste coller cette couleur. Très bien, ça a l'air bien, je pense que oui. Maintenant, qu' allons-nous faire ? Nous avons également la possibilité d'ajouter un rayon de bordure. Pour le bouton, vous verrez ce que signifie réellement le rayon de bordure. heure actuelle, vous pouvez voir que le bouton a une sorte de bord tranchant aux quatre coins. En haut à gauche, en haut à droite, en bas, à gauche, en bas à droite, à droite, à droite. Mais disons simplement que nous aimerions ajouter des boutons circulaires ou des bords arrondis à notre bouton. Nous pouvons simplement contourner ce problème et ajouter quelque chose comme, disons, environ 50. Ensuite, vous pouvez constater que le bouton semble circulaire, mais gardons-le à environ dix. Je pense que dix seraient une bonne idée. Ou peut-être même cinq dans ce cas. Five a vraiment l'air génial. Très bien, qu' allons-nous faire maintenant ? Nous allons simplement le dupliquer. Vous verrez maintenant les deux boutons apparaître sous forme de pile. Ils sont tous les deux comme ça, l' un apparaît en haut, l' autre en bas. Mais nous voulons que ces deux boutons apparaissent en ligne dans ce cas. Si vous avez visionné les vidéos précédentes où nous avons discuté en détail de ce qu' est une boîte flexible et de ce que l'on appelait auparavant une intersection, vous savez évidemment que nous devons ajouter un conteneur. alignez les éléments de manière à ce que ces deux boutons apparaissent sur la même ligne. Il suffit de glisser-déposer les boutons à l'intérieur du conteneur pour nous assurer que les deux boutons apparaissent de la même manière. Nous pouvons simplement cliquer avec le bouton droit sur ce conteneur, choisir Navigator. Ici, nous avons un conteneur à l'intérieur duquel nous avons deux boutons. C'est bon. Nous allons maintenant changer la couleur du bouton et du texte en quelque chose comme « télécharger maintenant ». C'est bon. Téléchargez-le dès maintenant. Permettez-moi de le supprimer maintenant, nous allons simplement le télécharger. Bien. Ce que je voudrais, c'est que la couleur de ce résultat soit la couleur par défaut, qui est le gris. Très bien, maintenant permettez-moi de changer direction du conteneur pour qu'elle soit horizontale. Alors maintenant, vous pouvez voir les deux boutons apparaître comme ceci. Maintenant, c'est exactement ce que nous voulions. Bien, maintenant, dans le conteneur suivant, que voulons-nous ajouter ? Nous voulons y ajouter une image de notre application, nous allons glisser-déposer l'élément image. C'est bon. Elementary est très simple. Tous les constructeurs de pages dans Wordpress sont très faciles à comprendre et à apprendre. Très bien, ici, nous pouvons simplement choisir Image. Vous avez maintenant la possibilité de télécharger les fichiers depuis votre dossier ou de naviguer entre les différents éléments que vous avez déjà téléchargés. Ici, vous trouverez différents éléments et images que j'ai déjà téléchargés ici. Vous pouvez également saisir l'URL d'une image que vous avez trouvée sur Google Images. Pour l'instant, je vais simplement parcourir les différentes images que j'ai ici. Je vais juste choisir cette image, et je vais la sélectionner ici. Maintenant, vous pouvez voir que c'est l'image que nous avons ici. Maintenant, j'ai la possibilité de modifier les paramètres de l'image, comme modifier la largeur, le poids maximum, la hauteur, etc. Et vous trouverez peut-être même cette option appelée filtres CSS ici. Maintenant, si je clique dessus, je peux choisir entre différentes options pour contourner le flou de l'image Jouez peut-être avec la luminosité de l'image. Il est actuellement fixé à 200. Si je déplace mon curseur vers la gauche, vous pouvez voir l' image s'assombrir Si je déplace mon curseur vers la droite, cela change la luminosité de l' image pour qu'elle soit plus lumineuse Cela signifie que l'image sera plus blanche. Vous pouvez même jouer avec la saturation du contraste. Cela signifie essentiellement que vous n'avez pas besoin d'utiliser un outil de retouche d'image pour apporter des modifications de base à votre image. C'est bon. J'espère que vous avez une compréhension de base du fonctionnement des éléments du générateur de page élémentaire. Mais il reste encore une chose à faire avant que vous n'en ayez terminé avec notre bâtiment, notre section des héros, c'est de cliquer sur ce conteneur et vous verrez que les éléments apparaissent de telle sorte qu'ils collent vers la partie supérieure et qu'ils n' apparaissent pas au centre. En cliquant simplement sur ce conteneur, vous constaterez que la direction du conteneur est définie sur la verticale. C'est exactement ce que nous voulons, mais nous voulons également justifier le centrage du contenu afin que le contenu et l'image apparaissent de telle que la hauteur des conteneurs soit justifiée. J'espère que vous pouvez voir que toute la section des héros est correctement remplie. Bien, vous constaterez peut-être même qu'il y a un certain espacement entre votre en-tête et votre section héros, nous verrons comment nous pouvons le faire à l' aide de la marge et du rembourrage Bien, avant de passer à une autre section, vous verrez peut-être qu' il y a eu un changement dans la mise en page de notre élément ou de notre générateur de pages. Vous pouvez voir ici, en haut, le nom de notre page. Ensuite, nous avons les différentes icônes, l'icône du bureau, la tablette et l'icône du mobile. Ensuite, vous avez les paramètres de publication ici. Comment ce changement s'est-il produit ? Toujours dans la section mise en page, vous pouvez voir plus tôt que nous n'avions pas de grille, nous avions juste un conteneur pour cela. Ce que j'ai fait, je viens de retourner sur mon tableau de bord Wordpress. Juste ici. Je viens d'aller dans les paramètres d'Elementor. Dans les paramètres, j'ai une fonctionnalité dans la liste des fonctionnalités. Ce que j'ai fait initialement, c'est que cette fonctionnalité de conteneur de grille était définie par défaut. Je l'ai changé en actif dans la barre supérieure de l'éditeur. J'ai également changé cela de valeur par défaut à active. D'accord, vous pouvez également voir une option pour construire avec l'IA. J'ai également sélectionné l'option « par défaut » à actif » et j'ai apporté les modifications. Et je l'ai sauvegardé ici. C'est la raison pour laquelle nous avons vu une disposition différente pour notre Elementor Revenons aux pages, à toutes les pages Elementor 58 et nous modifierons Modifier avec Elementor Bien, avant de créer une nouvelle section à l'intérieur de la section héros elle-même, ajoutons une nouvelle image en arrière-plan pour créer un effet. J'aimerais ajouter une image ici même dans ce conteneur. En allant dans le style, vous trouverez une image. Je vais sélectionner une image appelée ligne pour l'image que j'ai ici. Et vous pouvez voir qu'il y a une ligne courbe qui passe en dessous de la section du héros. Maintenant, je vais simplement changer la position de l' image pour qu'elle apparaisse sur le côté gauche. Bien, avant cela, je voudrais changer la taille de l'écran. Vous pouvez voir les tailles d'affichage définies par défaut actuellement. Mais nous pouvons le remplacer par quelque chose comme contain. Si je change cela pour contenir, vous pouvez voir que les lignes apparaissent. Tout à l'heure, nous ne voyions qu' une seule ligne, une seule ligne courbe passant en dessous de la section du héros, et maintenant nous pouvons voir plusieurs lignes. Maintenant, comment ce changement s'est-il produit exactement ? L'image elle-même contenait de nombreuses lignes courbes différentes. Mais nous n'avons vu qu' une seule ligne traverser notre section consacrée aux héros. En effet, la largeur et hauteur de notre section héros sont telles qu'elle ne couvre que la partie de l'image traversée par la ligne modifiant la taille d'affichage de notre image pour qu'elle contienne. Cela permet, vous pouvez le voir ici, que j'ai ouvert la documentation pour l'élément ou ici même dans les différentes tailles que nous avons. Vous pouvez voir la couverture contenir, nous l'avons définie sur, vous pouvez voir contenir la taille définie pour contenir. Qu'est-ce que cela signifie que l'image entière sera adaptée à l'élément De toute évidence, les dimensions de l'image et les dimensions de votre section de l'ensemble de votre boîte flexible ne seraient pas les mêmes à chaque fois. Dans ce cas, vous souhaiteriez que l'image corresponde à votre disposition de boîte flexible, telle sorte qu'elle s'agrandisse et que la taille de l'image soit inférieure à celle de l' option de boîte flexible dont vous disposez Ou il va compresser la taille de l'image. Les dimensions de l'image seront réduites à la taille et adaptées la taille de mise en page de votre boîte flexible. Très bien, vous pouvez voir ici l'image entière sera adaptée à l'élément, en gardant les mêmes proportions. Il ne tombera pas en gros. Les proportions de l' image mènent souvent à une boîte aux lettres où image est entourée d'espaces vides Au lieu de laisser des espaces vides, il a en fait répété l' image dans la section de répétition. Nous pouvons changer cela pour qu'il ne se répète pas, afin que vous puissiez voir que la majeure partie de la bonne partie est réglée sur aucune répétition. Très bien, les images apparaissent comme ça et c'est exactement ce que nous voulons. Nous n'avons pas ajouté l'image dans la section de superposition d'arrière-plan, dans l'arrière-plan lui-même, nous avons opté pour le classique Nous avons changé la couleur et nous avons ajouté l'image. Très bien, donc j'espère que tu as compris. Maintenant, pour passer à la section suivante, nous pouvons choisir cette icône plus ici. En cliquant sur l'icône plus, nous aurons la possibilité de choisir d' ajouter une nouvelle boîte flexible ou une mise en page en grille. Vous avez la possibilité d'ajouter un modèle. Maintenant, ces modèles vous permettront de naviguer entre les différents éléments, modèles ou modèles que vous avez enregistrés dans votre système Nous verrons également comment créer et enregistrer nos propres modèles. Ensuite, vous avez la possibilité de modifier avec l' IA en utilisant l'élément ou moi. Vous pouvez simplement écrire quelques Vous pouvez simplement écrire quelques éléments et éléments ou simplement créer votre section entière ou certains éléments. Pour l'instant, ajoutons simplement une nouvelle boîte flexible et nous garderons la direction verticale. Bien, que voulons-nous maintenant ? Nous voulons ajouter une nouvelle section qui contiendra trois cartes avec un verre. En effet, il y aura un effet de dégradé. Tout d'abord, nous aimerions réutiliser cet éditeur de texte, ce titre et ce diviseur Je vais juste en faire une copie. Faites également une copie de ce diviseur. Il arrive parfois que vous ne puissiez pas cliquer sur ce séparateur simplement parce que sa taille est trop petite. Vous pouvez le voir et il n'y a aucun écart entre le texturateur et le titre Même si vous essayez de placer votre curseur dans le séparateur, il se peut que vous ne puissiez pas cliquer dessus Dans ce cas, vous pouvez simplement cliquer sur n'importe quel élément. Ou dans le conteneur lui-même, vous pouvez le bouton droit de la souris et cliquer sur Structure. Plus tôt, nous avons vu Navigator, mais maintenant nous avons Structure simplement parce que nous avons modifié quelques fonctionnalités dans l'élément ou la section, d'accord ? Mais le concept reste plus ou moins le même. Hein ? Nous avons maintenant un diviseur. C'est ce que nous voulions dupliquer. Faisons-en une copie . Et aussi le titre. Faisons-en une copie. Bien, maintenant ce que je peux faire, c'est simplement le glisser-déposer ici. En faisant cela, je peux également glisser-déposer le diviseur juste en dessous de cette partie Faites-le également glisser et déposez-le ci-dessous ici. Maintenant, la couleur de cet éditeur de texte et du titre sont blancs et l'arrière-plan est également un peu blanc. Vous pouvez changer la couleur de police en noir. Passons à la partie stylisme. Nous allons changer la couleur du texte en noir. Changera également la couleur de cette police pour qu'elle soit noire. Bien, une fois que nous l' avons fait, nous aimerions aligner ces deux textes au centre . En cliquant simplement sur cette section entière, nous pouvons justifier le centre de contenu et aligner le centre des éléments. Assurons-nous simplement qu'il dispose également d'Align Center. Si ce n'est pas le cas, vous pouvez simplement passer au contenu et envoyer du texte au centre. Bien. Maintenant, pour ce qui est de cette partie, qu'allons-nous faire ? We Align Center, que voulons-nous pour cette partie ? Ça n'a pas l'air bien. L'objectif commercial est en noir, la couleur n'a pas l'air bien. Nous pouvons simplement en changer la couleur pour qu'elle ressemble un peu à un gris plus foncé. Cette couleur grise est belle. Très bien, nous pouvons simplement faire défiler le texte vers quelque chose comme effectuer des paiements internationaux. Restons-le comme ça, en interne. Paiements. C'est bon. Nous pouvons en réduire la taille de police ou même en réduire le texte. Disons simplement les paiements internationaux. C'est bon. C'est bon. Paiements internationaux. Qu'allons-nous en faire ? Vous pouvez voir qu'il n'y a aucun espacement entre la section du héros et la section suivante Afin d'ajouter de l'espacement entre ces deux sections différentes, nous pouvons jouer avec les paramètres de marge et de rembourrage Si vous pouvez le voir ici, j' ai une image qui explique clairement ce que signifient réellement le rembourrage et la marge Laisse-moi t'expliquer. Chaque élément est un contenu. Vous pouvez voir que la boîte la plus intérieure est appelée contenu. Cela peut être n'importe quoi, l'intégralité de votre boîte flexible. Il peut s'agir de votre bouton, de votre éditeur de texte, d'un séparateur C'est peut-être votre titre, non ? Chaque élément est appelé contenu. Maintenant, en dehors du contenu, nous avons une bordure, non ? Chaque contenu est entour 7. Customizer de thème blocksy - Trust Me C'est très facile !: Bien, maintenant que vous avez appris à créer l'intégralité de votre site Web à l'aide du 11 ou du générateur de thèmes, examinons notre en-tête et notre pied de page ici afin de pouvoir personnaliser l'en-tête et le pied de page à l'aide du personnalisateur de thème, que vous pouvez voir Cette icône ici, l'icône personnalisée dans la barre supérieure, nous permet d'utiliser l'éditeur de thème. Il s'agit du personnalisateur de thème et comme vous le savez, nous utilisons en fait le thème des blocs. Vous pouvez voir ici que nous avons activé le thème du bloc et selon votre cas d'utilisation, vous pouvez également utiliser d'autres thèmes comme Astra. , dans l'ensemble, plus ou moins 80 à 90 % des éléments que vous trouverez ici même dans le personnalisateur de thème resteront les mêmes Mais peu de choses ici et là peuvent changer en fonction du type de thème que vous utilisez réellement. Maintenant, juste pour cette vidéo, j'ai éteint ma webcam et vous en saurez la raison dans un instant. Mais voyons simplement quelles autres options avons-nous dans le personnalisateur de thème Dans les options générales, vous trouverez barre d'en-tête générale du site et d'autres éléments similaires où vous pouvez également modifier la couleur et la typographie de votre site Web Ensuite, vous avez la possibilité d' apporter des modifications à votre bloc, à votre publication, à votre publication unique, à vos catégories et à d'autres choses de ce genre. Ensuite, vous avez également la possibilité de modifier vos pages. Ensuite, en bas de l'ensemble de ce personnalisateur de thème, vous trouverez une option appelée Core Dans le noyau, vous aurez des menus d'identité du site, des widgets, des paramètres de page d'accueil et du CSS supplémentaire. Très bien, allons-y en haut. Et en général, nous avons un en-tête. Nous allons donc essayer de personnaliser cet en-tête ou cette barre de navigation pour notre site Web. Ce que je vais faire, c'est cliquer sur l'en-tête. Et une fois que j'ai cliqué, vous verrez que j' ai des éléments et des en-têtes. Très bien, et ici vous trouverez trois rangées. La rangée du haut, la rangée principale et la rangée du bas. Alors, qu'est-ce que cela signifie et pourquoi avons-nous trois lignes pour cela ? J'ai ce site Web, et vous pouvez voir qu'il s'agit d'une barre de navigation ici. C'est donc comme une rangée principale. Et en haut, vous avez l'emplacement, les heures de travail et les icônes sociales ici. Cela se comporte donc comme une rangée supérieure. C'est comme votre ligne principale, et ce site Web n'a pas de ligne inférieure. La plupart du temps, la plupart des sites Web sur Internet n'utilisent qu'une seule ligne principale. Si vous souhaitez ajouter un haut, vous pouvez y ajouter des éléments. Alors, que voulons-nous ? Nous voulons un logo, nous voulons un menu, mais nous ne voulons pas d' icône de recherche dans notre barre de navigation. Maintenant, l'icône de recherche peut être utile dans le cas où vous avez un site Web de commerce électronique sur lequel vous souhaitez rechercher des produits ou peut-être des services ou différents articles bloqués. Mais pour l'instant, il suffit de le rayer. Très bien, et qu'allons-nous faire ? Nous pouvons ajouter un nouvel élément à l'intérieur de cette ligne elle-même. Vous pouvez maintenant voir que la ligne est divisée en deux colonnes, la gauche et la droite. Et ici, au milieu, nous avons quelques lignes pointillées. Donc, en gros, il essaie de dire que cela est divisé en deux sections. Si vous souhaitez modifier les paramètres autour de l'en-tête, vous pouvez simplement cliquer sur la ligne principale et vous trouverez la structure. Nous avons donc vu l'en-tête plus tôt. Cela signifie que les paramètres d'en-tête seront communs pour la ligne supérieure, rangée inférieure et la ligne principale. Une fois que vous avez cliqué sur la ligne principale, les paramètres s'ouvriront uniquement pour cette ligne principale. Très bien, voici la structure. La structure du conteneur est définie par défaut. Vous pouvez même modifier les deux cases sur toute la largeur. Vous pouvez régler la hauteur et la largeur. Vous pouvez même en modifier la mise en page. Voici donc le contexte. Vous avez la possibilité d'ajouter des bordures. Vous pouvez également ajouter une bordure en bas. Et vous pouvez même ajouter une ombre à votre en-tête. Mais revenons en arrière et essayons d' ajouter quelques éléments dans notre ligne principale. Vous pouvez donc voir ici que nous avons une option de compte. Cela signifie que certaines personnes aimeraient donner la possibilité de se connecter ou de se déconnecter de leur site Web Lorsque les gens ont un site Web de commerce électronique, ils aimeraient évidemment donner aux utilisateurs la possibilité de se connecter à leur compte afin de pouvoir passer des commandes précédentes. Ou, vous savez, ils peuvent consulter l'historique de leurs achats. Ils peuvent obtenir des remises ou des coupons supplémentaires. Vous pouvez donc utiliser le widget du compte. Ensuite, vous avez le bouton HTML. Ainsi, vous pouvez intégrer d' autres plug-ins en collant le code HTML Ensuite, vous avez le menu qui est déjà utilisé. Donc, toutes les pages que nous avons ont créé un menu principal, n'est-ce pas ? Le menu s'appelait Navar, si je ne me trompe pas, il est donc affiché ici Ensuite, vous avez la recherche et les icônes sociales. Donc, ici, tout comme nous avons différentes icônes sociales, c'est quelque chose de similaire. Nous avons un widget ici. Essayons donc d'apporter un bouton. Et nous pouvons placer ce bouton à gauche du menu principal ou à droite du menu principal. D'accord, on peut même ajouter ça entre les deux. Très bien, nous avons trois colonnes. Nous n'avons tout simplement pas deux colonnes. C'est juste que lorsque nous n'ajoutons aucun élément entre les deux, cela laisse évidemment de l'espace. Nous avons donc le bouton, et vous pouvez voir qu'il prend certains paramètres par défaut en termes de design. Ici, le texte, lorsque nous le survolons, prend la couleur du texte en bleu Et la couleur du bouton est également bleue par défaut. Et lorsque nous le survolons, il devient bleu foncé ou quelque chose comme une teinte bleu très foncé Très bien, nous pouvons également changer la couleur du bouton. Nous pouvons simplement cliquer sur le bouton. Vous trouverez ici les options permettant de choisir entre différentes configurations de boutons Vous avez donc ici un bouton où le bouton lui-même aura une couleur d'arrière-plan ou le bouton pourrait simplement avoir une couleur de bordure et l'arrière-plan du bouton sera transparent. C'est bon. Vous pouvez même modifier la taille des boutons. Vous pouvez même ajouter une étiquette. Ainsi, au lieu de télécharger, si vous souhaitez donner quelque chose comme un contact ou réserver un appel, vous pouvez même ajouter quelque chose comme ceci. Maintenant, si vous souhaitez ajouter une URL qui, chaque fois que quelqu'un clique sur ce bouton, soit redirigé vers une page. Vous pouvez ajouter l' URL du lien si vous le souhaitez. Chaque fois que le lien a été collé et que quelqu'un clique sur le bouton, il doit être redirigé vers une nouvelle page dans un nouvel onglet arrive donc parfois que chaque fois que vous cliquez sur le bouton, plupart du temps, la redirection se fasse dans le même onglet lui-même. Mais si vous souhaitez lui donner possibilité d'ouvrir le nouveau lien dans un nouvel onglet, vous pouvez simplement activer ce bouton C'est bon. Ensuite, vous avez la possibilité d' ajouter votre propre classe CSS et d'autres éléments. Lorsque nous passons au design, vous pouvez voir que vous pouvez changer la couleur de la police. Vous pouvez même changer la couleur des boutons. Alors laisse-moi juste faire ça. Et nous pouvons changer la couleur du bouton en vert. Ici, nous pouvons sélectionner la couleur. Maintenant, vous ne trouverez pas la couleur que nous avons enregistrée en tant que couleur globale dans notre Elementor, simplement parce qu'il s' agit d'un paramètre de thème et qu'il s'agissait de votre créateur de page Elementor Ici, nous pouvons simplement sélectionner la couleur verte manuellement en plaçant notre curseur et quelque chose de similaire, mais pas exactement. Je ne pense pas que nous trouverions exactement la même couleur. Et c'est pour l'initiale et c'est pour le survol. Nous pouvons donc simplement copier le code hexadécimal et coller la même couleur pour le survol Ainsi, chaque fois que nous survolons la souris, la couleur du bouton ne change pas. Très bien, c'est ainsi que nous avons maintenu la cohérence. Passons maintenant à la partie couleur de police. La couleur de police est initialement définie sur le noir. accord ? OK. Donc la couleur, ce n'est pas pour votre menu mais plutôt pour votre bouton. Très bien, ici, la couleur initiale du texte est le blanc, et au survol, il est également blanc Nous n'allons donc pas le changer ici. Vous pouvez ajouter un rayon de bordure si vous souhaitez donner un bord circulaire ou, vous savez, des bords arrondis à votre bouton. Vous pouvez même ajouter des marges et d'autres éléments pour contourner votre design. Pour en revenir à votre menu principal, vous trouverez ici votre menu principal. Et ici, vous avez maintenant un logo. Vous constaterez qu'il reprend le titre du site, mais pas le logo. Ici, vous pouvez simplement sélectionner un logo, vous pouvez choisir une image. Je vais donc sélectionner cette image comme logo de ma page Web. Vous trouverez ici un texte de couleur blanche sur cette image . Parce que vous pouvez voir que le logo apparaît ici. Mais comme la couleur d' arrière-plan de notre en-tête est blanche et que la couleur du texte est également blanche, le logo ne s' affiche pas correctement. Dans ce cas, nous avons donc deux options. Soit nous pouvons utiliser Photoshop notre logo de manière à ce que la couleur du texte devienne noire ou légèrement foncée. Ou nous pouvons changer la couleur d'arrière-plan de notre ligne principale, qui est notre barre de navigation. Le mieux serait donc de changer la couleur d'arrière-plan, vous savez, l'en-tête. Donc, ce que nous pouvons faire ici, nous pouvons simplement changer la couleur de fond. Mais avant cela, nous ne voulons pas que le titre du site apparaisse. Nous pouvons donc simplement désactiver cette option et le titre du site ne sera plus affiché. C'est bon. Vous pouvez même modifier l' alignement de votre contenu, c' est-à-dire si vous souhaitez que votre logo apparaisse sur la ligne gauche, centrale ou droite. Vous pouvez même le faire ici vous avez la possibilité de choisir entre différents appareils en fonction de votre mode de réactivité En ce qui concerne la partie design ici, vous pouvez modifier la marge. Qu'allons-nous faire ? Nous allons changer la couleur de fond. Lorsque je clique sur la ligne principale ici, vous trouverez Design And I can change the background ici. J'ai la possibilité d' utiliser un arrière-plan classique en couleur. J'ai la possibilité de choisir le fond classique ou je peux même utiliser un dégradé. Dégradé. Comme vous l'avez déjà appris, c'est comme si deux couleurs étaient utilisées même temps dans un format linéaire ou radial. Vous pouvez voir que vous pouvez choisir entre les différents jeux de couleurs prédéfinis proposés par ce thème Mais vous pouvez même modifier vos propres couleurs personnalisées. Vous pouvez même ajouter votre propre image en arrière-plan, mais cela aurait l' air vraiment horrible. Restons-en donc à la couleur. Et ici, vous pouvez jouer avec la couleur. Bien, maintenant, lorsque vous ajoutez une couleur à cette couleur d' arrière-plan en particulier, vous savez , c'est juste pour votre ligne principale et non pour vos rangées du haut et du bas. Ce que je veux dire, c'est que si vous voulez, vous savez, placer votre bouton sur la rangée du haut, vous constaterez que la ligne supérieure aura une couleur d'arrière-plan différente. Les paramètres sont donc uniquement appliqués à la ligne principale et non à la ligne supérieure ou inférieure. J'espère que tu as compris. Rétablissons cela parce que nous ne voulons pas plusieurs lignes, nous voulons juste une seule ligne. Et ici, nous avons la couleur de fond noir. Maintenant, lorsque nous conservons la couleur de fond noire, nous pouvons voir que le texte est du texte. Ou la police de notre menu, la couleur n'est pas vraiment attrayante. Les nuances, le fond et la couleur P elle-même sont très sombres. Nous devons donc créer une sorte d'effet de contraste. Nous allons cliquer sur Menu 1. Nous allons passer à Design, et nous allons changer la couleur P en blanc. Apportons ce blanc ici. Vous trouverez trois options de couleur : initiale, survol et active Maintenant, que signifie actif ? Actif signifie essentiellement que chaque fois que vous avez cliqué sur la page, disons simplement que vous avez cliqué sur Accueil Vous êtes donc sur la page d'accueil elle-même, non ? Ainsi, chaque fois que vous êtes sur la page d'accueil, la couleur de ce texte passe à une couleur que vous avez définie, qui l' indiquera. OK, vous êtes sur cette page. C'est bon. Faisons du blanc pour toutes les couleurs. Et ici, vous découvrirez que Hover est également blanc et Active est également blanc Vous pouvez même modifier la famille de polices. Vous pouvez même modifier la taille de la police. Vous pouvez même modifier l'épaisseur de la police. Très bien, vous avez ici toutes les différentes options. Vous pouvez même ajouter une option déroulante ici même dans le personnalisateur de thème Très bien, ici, l'option déroulante peut être composée de deux choix Que vous souhaitiez que le menu déroulant affiche l'endroit d'où vous survolez cet élément de page en particulier ou que vous souhaitiez cliquer sur cet Et puis le menu déroulant devrait s'afficher. C'est quelque chose comme ça. Vous pouvez même modifier l'effet des objets. Cela signifie si vous voulez que ce soit une couleur de boîte de couleur simple et unie. Vous pouvez même ajouter de l'espacement entre les éléments du menu déroulant. Vous pouvez même modifier le décalage. Cela signifie essentiellement que l' espacement entre les éléments. Très bien, alors vous avez le décalage horizontal. Cela signifie essentiellement cet espacement vertical et horizontal. Très bien, pour en revenir à la partie où nous avons votre couleur d'arrière-plan, vous avez un fond noir et vous avez une nuance de noir grisâtre foncé représentant une section de héros Maintenant, cet en-tête et cette section de héros ne sont pas très beaux. Ne pouvons-nous pas simplement faire en sorte que cette ligne principale apparaisse transparente ? Bien entendu, nous pouvons le faire en revenant simplement à votre en-tête. Nous pouvons simplement revenir à l'en-tête, nous pouvons simplement accéder aux en-têtes, sélectionner Global Header, puis utiliser la fonctionnalité transparente et actionner le commutateur Vous constaterez maintenant que l' en-tête entier est désormais transparent. Il faudra le design d'une section de héros. Vous constaterez maintenant qu'une fois que nous aurons rendu notre en-tête transparent, les paramètres de marge et de rembourrage ont été réduits. Cela signifie que notre section héros coïncide avec notre en-tête Nous pouvons ajouter la marge et le rembourrage ultérieurement à notre section héros en revenant à notre générateur d'éléments ou de pages Mais pour l'instant, je vais simplement garder ceci comme en-tête transparent. Maintenant, vous trouverez également un bouton intitulé Modifier les conditions. Maintenant, qu'est-ce que cela signifie ? Une fois que j'ai cliqué dessus, vous constaterez que je peux choisir entre différentes options, que je souhaite que les paramètres d' affichage de cet en-tête transparent soient affichés pour l'ensemble de mon site Web ou que je souhaite qu'il soit affiché sur une page Web en particulier souhaite que les paramètres d' affichage de cet en-tête transparent soient affichés pour l'ensemble de mon site Web ou que je souhaite qu'il soit affiché sur une page Web en particulier. Très bien, si je fais en sorte que ce soit quelque chose comme « inclure » uniquement pour cette page. Permettez-moi simplement de sélectionner comme page, qui est juste cette page. Et excluez. Vous pouvez ajouter une exclusion. On peut l'exclure sur quelle page ? Disons simplement que je voudrais l'exclure de ma page de blocage ou d' autres pages comme la page de blocage, d'accord ? Je peux l'exclure de la page de blocage. Je peux même l'exclure d'une autre page, peut-être de quatre ou quatre pages. Très bien, je peux juste enregistrer les paramètres maintenant. Voyons ce qui se passera si je ferme ça. Et laissez-moi simplement le publier pour que tous les paramètres soient enregistrés. Et une fois que j'aurai fermé, j'irai sur mon tableau de bord de presse. Je vais ouvrir une page de blocage en accédant à la section des publications. Un post, je vais consulter mon. Donc, une fois que j'irai ici, d'accord. Encore une fois, je vais trouver cet en-tête transparent. Mais idéalement, nous ne devrions pas le faire. Passons aux pages et qu'allons-nous faire ? Nous allons accéder à la page de blocage. Où avons-nous notre page de journal afin de pouvoir créer une page de blocage si nous le voulons. Revenons à notre site Web. Nous allons personnaliser notre en-tête en accédant à l'en-tête global, configurant ses conditions, et nous voulons l'inclure uniquement sur notre page unique. D'accord, ce blog n'est qu' une page et n'est pas destiné à être publié. Vous pouvez voir que c'est de, ce blog fait partie de notre page et de notre article. Nous allons sélectionner un seul article. OK. Une fois que nous aurons publié cet article unique, nous enregistrerons les conditions. OK, à notre retour, nous changerons la couleur de la ligne principale en noir. accord, nous avons une couleur noire, ou peut-être que nous allons simplement la changer en une teinte bleue. Je vais passer à une teinte bleutée. Très bien, quelque chose autour de ça. Publions. Revenons à notre en-tête, Conditions des paramètres globaux de l'en-tête. Et nous voulons inclure l'en-tête transparent sur une seule page, exclure dans un seul article. Bien, disons simplement toutes les archives postales. Très bien, les conditions que nous avons utilisées ici et une fois que nous serons partis, nous les publierons. Je ne sais pas exactement pourquoi les paramètres n'ont pas été appliqués. Essayons peut-être de rafraîchir notre page Web. Permettez-moi de revenir à l'en-tête, aux conditions des paramètres globaux de l'en-tête. Très bien, essayons en utilisant la page de politique de confidentialité. Je vais passer en revue cela, je peux enregistrer les conditions de publication. Je vais les fermer. Accédez aux pages, toutes les pages ici. Nous devrions trouver notre page de politique de confidentialité. Je pense que nous l'avons détruit. Restaurons cette page. Très bien, revenons aux pages. Voilà ce que nous avons. Prévisualisons-le maintenant. Vous constaterez que cet en-tête a un fond bleu. C'est exactement ce que signifiait toute la partie relative aux conditions. Revenons à notre site Web principal. Nous allons accéder à cette page Web. Nous sélectionnerons l'option Personnaliser une fois que nous serons arrivés ici Une fois que nous ferons défiler la page vers le bas, vous trouverez dans les menus que nous utilisons actuellement le menu de la barre de navigation. Maintenant, dans le menu de la barre de navigation, nous avons une page d'accueil , une page à propos, une page de contacts. Mais que se passerait-il si nous voulions ajouter quelques pages supplémentaires dans le menu principal ? Essayons d'ajouter des éléments. Vous trouverez ici Elementor 58, la page que nous avons créée en utilisant l'intégralité de notre générateur de pages Essayons d'ajouter ceci. Une fois que nous l'avons ajouté, nous pouvons le faire glisser et le placer exactement où nous voulons. Nous pouvons les commander à nouveau. Une fois cela fait, nous pouvons simplement enregistrer et publier. Maintenant, une fois cela fait, vous pouvez faire ce que vous pouvez faire, au lieu de définir cette page d'accueil comme page par défaut de votre site Web, vous pouvez la définir comme page par défaut en revenant simplement en arrière. Vous pouvez revenir en arrière et sélectionner Paramètres de la page d'accueil sous Core. Passons donc aux paramètres de la page d'accueil, et au début, vous verrez peut-être votre dernier message comme celui par défaut. Vous pouvez simplement sélectionner une statique. Au lieu de sélectionner la page d' accueil comme page d'accueil, vous pouvez sélectionner l'élément 58. Et c'est ce que vous trouverez comme page par défaut. Très bien, sous la page de publication, vous trouverez différentes options. Vous pouvez même ajouter une nouvelle page de publication. Très bien, nous verrons comment ajouter un bloc de publication à cette partie. Mais publions simplement ceci pour le moment. Nous y retournerons et examinerons d'autres paramètres. Maintenant, vous trouverez également ici les différents menus et les différents widgets que nous avons. Ce sont tous des éléments de la presse de Gutenberg. Vous avez ici les paramètres de la page d'accueil, dont nous avons discuté dans la partie consacrée à l'identité du site. Vous trouverez ici le titre du site que nous avons enregistré sous forme d'arborescence et vous trouverez également l'icône du site Que signifie l'icône du site ici en haut de ce site Web ? Vous trouverez cette icône en particulier ici. Et cette icône, si vous souhaitez remplacer cette icône quelque chose comme ça ou peut-être une autre image de votre choix, vous pouvez simplement sélectionner une icône. Nous allons simplement sélectionner cette image et elle nous demande de la recadrer car les dimensions sont de 512 x 512 pixels. Nous allons donc simplement le déposer dans cette dimension ici, vous constaterez que le titre du site ou l'icône du site a été modifié. Bien, enregistrons simplement ceci et nous reviendrons à notre outil de personnalisation de thème. Ici, dans le thème sous en-tête, nous avons apporté des modifications à ce sujet. Une fois que nous passerons au général, vous trouverez différentes options. Bien, en général, vous trouverez également une option qui consiste à faire défiler l'écran vers le haut. Maintenant, qu'est-ce que cela signifie une fois que j'ai ajouté le parchemin en haut ? Une fois que je fais défiler la page vers le bas, vous trouverez un bouton en bas à droite de votre site Web. Maintenant, ce bouton vous permet de faire défiler la page vers le haut de notre page Web à chaque fois que vous cliquez dessus C'est une fonctionnalité très utile lorsque vous avez une longue liste d'éléments ou de sections dans votre page Web. Et il aide vos utilisateurs à accéder à la partie supérieure de votre page Web Maintenant, une fois que nous avons cliqué sur cette icône en forme de flèche dans votre défilement vers le haut, vous verrez différentes icônes de boutons. Vous pouvez voir que vous avez un bouton par défaut, vous pouvez passer à quelque chose comme ça , quelque chose comme ça. Vous pouvez même modifier la forme du bouton, que vous souhaitiez qu'il s'agisse d'un cercle carré. Vous pouvez même modifier le design, que vous souhaitiez que la couleur de l'icône soit blanche que la couleur d' arrière-plan soit modifiée, vous pouvez même y ajouter de l'ombre et vous pouvez même l'aligner pour qu'elle s' affiche le plus à droite ou gauche selon votre cas d'utilisation. C'est la seule raison pour laquelle j'ai éteint ma webcam juste pour afficher le défilement vers le haut. fonctionnalités sont disponibles principalement dans la partie inférieure droite de votre page Web. C'est bon. Maintenant, en bas, vous verrez qu'il y a une icône de lune. Il passe essentiellement à un thème en mode sombre pour votre personnalisateur de thème Et une fois que vous avez cliqué sur l'icône du soleil, le thème passe en mode lumière. C'étaient des informations de base. Publions ceci et une fois que nous y retournerons, nous le désactiverons simplement vers le haut Vous trouverez également une option permettant d' activer le cadre du site Web. Donc, vous savez, cela donne à votre site Web une bordure, un effet de cadre. Vous pouvez même changer la taille du cadre, vous pouvez changer la couleur du cadre et d'autres choses comme ça. Bien, pour en revenir au fil d'Ariane et aux autres parties de la mise en page générale, que signifie le fil d'Ariane ? Supposons donc que vous êtes sur la page Walmart. Permettez-moi de vous emmener chez Walmart que je puisse vous expliquer les choses assez facilement. J'irai chez Walmart et si je vais chez Department, d'accord, laissez-moi sélectionner n'importe laquelle des choses Disons que je vais faire de l'électronique. Dans le domaine de l'électronique, nous avons, disons simplement, l'iPhone. Et si je clique sur iPhone ici, vous trouverez une boutique de téléphones portables par marque. iPhone d'Apple. C' est donc comme un fil d'Ariane Il s'agit de l'afficher sur quelle page, sur quelle page, sur quelle page vous avez trouvé le produit. Vous pouvez donc faire quelque chose de similaire en incorporant le fil de navigation dans votre ligne principale et d'autres choses Très bien, alors j'espère que tu as compris. Regardons le pied de page. Donc, une fois que je fais défiler la page vers le bas, vous trouverez cette partie particulière qui se trouve dans la rangée du bas. Encore une fois, dans le pied de page, vous trouverez également trois lignes. La rangée du haut, la rangée du bas, ou je devrais dire la rangée du milieu, puis la rangée du bas. Très bien, ici, vous pouvez ajouter plusieurs widgets. Vous pouvez trouver un menu, différentes icônes sociales et des végétariens de un à trois, à six Ajoutons donc le végétarien un, végétarien deux et le végétarien trois Si je clique sur celui des végétariens, vous constaterez qu' au départ, il est vide Nous pouvons ajouter des blocs de Gutenberg. Ce sont trois blocs de Gutenberg. Ici, je peux ajouter un titre, je peux ajouter un titre, quelque chose comme disons simplement à propos de nous. C'est bon. Nous pouvons également modifier le tag de cette rubrique. Au départ, on pourrait le dire à H deux. Vous pouvez le remplacer par H346 en fonction de votre cas d'utilisation. Et vous trouverez ici des informations sur nous. Bien, nous pouvons également en ajouter une autre, disons simplement une balise de paragraphe. Et je peux ajouter un texte de base, quelque chose comme ça. Je peux simplement ajouter le texte simple. Je vais placer le texte ici. Ou je pourrais simplement coller telle sorte que le style ne soit pas collé ici Vous pouvez également trouver des informations sur nous dans les végétariens. Je peux ajouter les paramètres de page. La liste des pages peut être affichée ou le menu complet. Toutes les pages de notre site Web seront affichées. Je peux simplement rechercher une liste de pages. Je peux l'apporter ici. Vous trouverez toutes les listes de pages que nous avons et qui font partie de notre site Web. C'est bon. Nous pouvons même ajouter un titre en haut ici. Je peux ajouter quelque chose comme des pages, d'accord. Vous pouvez voir que les pages apparaissent sous votre liste de pages. Vous pouvez donc simplement le glisser-déposer. Ou vous pouvez simplement le placer en cliquant simplement sur les pages. En cliquant sur la flèche vers le haut, vous pouvez simplement le placer. Permettez-moi de sélectionner cette partie. Je vais simplement le faire glisser ou le déplacer vers le bas. Très bien, et maintenant vous pouvez voir les pages apparaître en haut et la liste des pages en bas. Très bien. Ici, vous pouvez également ajouter d'autres éléments. Permettez-moi d'ajouter quelque chose comme disons simplement contactez-nous, d'accord. Nous pouvons ajouter d'autres blocs ici. Vous trouverez un tas d'options différentes à utiliser, vous pouvez trouver et intégrer votre vidéo Youtube, votre vidéo Vimeo et bien d'autres choses que vous pouvez ajouter ici, que je n'entrerai pas Alors, qui comprend l'idée d' utiliser différents éléments de Gutenberg ? Très bien, vous trouverez également ici différentes icônes sociales, et d'autres éléments que nous avons ici. Vous trouverez différentes options pour contourner différents paramètres tels que les couleurs, votre typographie, les performances de votre site Web Mais d'une manière générale, si vous utilisez un générateur de pages, qu'il s'agisse d'éléments ou de DV, il est préférable de choisir la couleur paramètres de typographie générateur de page lui-même plutôt que d'utiliser votre outil de personnalisation de thème afin que votre site Web ne soit pas endommagé Ici, nous avons l'intégralité, ici nous avons couvert l'ensemble des paramètres de personnalisation du thème J'espère que les gars ont apprécié cette conférence. Dans la prochaine conférence, nous verrons comment créer un bloc de publication à l'aide du personnalisateur de thème 8. Créer et modifier des billets de blog - Trust Me C'est très facile !: Très bien, voyons comment nous pouvons créer un bloquage. Ici, en haut, vous trouverez l'icône plus, le plus nouveau. Une fois que vous le survolez, il affichera une liste d'options, une page de publication multimédia, une page de doublure, modèle et un utilisateur. Alors, qu'est-ce que cela signifie ? Une fois que vous avez cliqué sur la publication, vous serez autorisé à créer une publication bloquée. Si vous cliquez sur le média, vous serez autorisé à télécharger des images, des vidéos et des fichiers GIF Si vous cliquez sur une page, vous serez autorisé à créer une page Web Si vous cliquez sur la page de destination, vous serez autorisé à créer une page de destination. Ainsi, la différence fondamentale entre une page de destination et une simple page Web réside dans le fait qu' une page de destination est généralement optimisée pour la conversion. Cela signifie essentiellement que vous voulez que les utilisateurs, chaque fois qu'ils arrivent sur votre page de destination, saisissent des informations concernant leurs informations personnelles ou effectuent une transaction instantanée en échange produit numérique ou d'un service ou d'une sorte de réservation pour votre événement. Il s'agit d'une page de destination, une page Web qui affiche et met en valeur le contenu et les informations, c'est votre page Web D'une manière générale, la page de destination est destinée à ceux qui souhaitent effectuer une transaction instantanée. Et le but de la page entière n'est pas de communiquer sur l'entreprise le produit ou le service, mais plutôt d'effectuer une transaction instantanée, qu'il s'agisse simplement de collecter une adresse e-mail ou leur argent en saisissant les détails de la carte dans le modèle de page de destination. Comme nous l'avons vu précédemment dans le générateur d'éléments ou de pages, nous pouvons créer des modèles. Ici, nous avons des utilisateurs, vous pouvez ajouter plusieurs utilisateurs à votre site Web de presse. Cliquons sur Publier. Une fois que vous aurez cliqué dessus, cet éditeur de presse s'affichera ici. Vous pouvez ajouter un titre à votre article de blog. Ici, vous pouvez ajouter le contenu de votre article de blog. Lorsque j'essaie d'ajouter du contenu, laissez-moi simplement lui donner quelque chose comme le blog numéro un. accord ? Et on peut dire qu'il s'agit d'un blog de test. C'est bon. C'est mon titre. Maintenant, dans le volet de droite, vous constaterez que la visibilité est définie sur publique. Cela signifie que chaque fois que ce billet en bloc sera publié, il sera accessible au public et pourra être consulté par tout le monde. Bien, la seule différence entre un bloc de publication et une page Web est que le contenu du bloc de publication peut être réutilisé dans la page Web elle-même Mais le blocage des publications permet essentiellement à vos utilisateurs qui lisent votre blog de laisser commentaires au bas de votre publication bloquée et de partager ce blog sur les profils de réseaux sociaux. C'est donc le seul avantage de l'ajout d'un nouveau bloc de publication. Lorsque vous créez des blocs, vous pouvez utiliser des modèles, vous pouvez modifier l'URL. Vous pouvez même définir qui est l' auteur de ce bloc de publication. Si vous êtes plusieurs utilisateurs, vous pouvez choisir qui publie ce blog. Vous pouvez classer chaque blog par catégorie. Disons simplement que vous avez trois blogs, trois catégories de blogs, la conception Web, commerce électronique et le référencement. Vous pouvez donc les classer en ajoutant de nouvelles catégories. Vous pouvez ajouter de nouveaux hashtags afin que, lorsque les internautes recherchent les différents blocs que vous avez publiés, ils puissent simplement saisir quelques mots clés. Et selon les tags et les catégories que vous avez classés, ils apparaîtront, puis vous trouverez une image en vedette. Désormais, même si le contenu du bloc ne contient pas d'image, vous pouvez ajouter une image en vedette de sorte que lorsque votre page Web complète affichera toutes les cartes de blocage, votre image en vedette sera affichée là-bas. L'extrait signifie essentiellement qu' un simple résumé de l'ensemble de votre bloc sera affiché. Maintenant, l'extrait est facultatif. Tu peux le noter ici. Il ne détectera pas automatiquement votre contenu et ne formera pas un tout , sauf de lui-même. Vous devrez le saisir manuellement. Très bien, ici en bas, vous verrez si vous voulez autoriser les commentaires des utilisateurs ou si vous voulez autoriser les retours en rose et les trackbacks ? Cela signifie que n'importe qui peut renvoyer vers votre article de blog. C'est toujours une bonne pratique de vérifier cela. Très bien, nous pouvons ajouter du contenu de verrouillage ici. Je peux ajouter du contenu textuel, quelque chose comme, disons simplement ceci, d'accord. Je vais copier le contenu de ce site Web. Je peux le coller ici. Je peux même changer si je veux que ce soit en gras, italique, ou si je veux que ce soit une balise de titre Je peux le remplacer par le titre H deux. Je peux en faire un tag H one. Par défaut, chaque titre de votre article de blog sera défini sur N H une balise. C'est bon. Nous pouvons simplement les modifier. C'est bon. Ou nous pouvons même sélectionner chaque élément notre page Web. OK, ici, vous pouvez ajouter quelques éléments supplémentaires. Vous pouvez même ajouter un lien vers votre mot ou vos phrases en particulier. Vous pouvez surligner quelques mots. Vous pouvez ajouter une image de code intégrée. Vous pouvez ajouter un indice ou un exposant. Il existe un tas d'options différentes. Très bien, si vous cliquez sur l'icône plus ici, laissez-moi juste vous montrer. Qu'est-ce que je veux dire par là ? Si je clique sur cette icône plus, vous pouvez naviguer entre les différents éléments ou blocs de Gutenberg Ici, je peux utiliser, disons simplement que je voudrais intégrer une image Je peux simplement rechercher une image ici, je peux même utiliser la galerie. Cela signifie que plusieurs images peuvent être affichées ici. Vous pouvez même utiliser le logo du site. Vous n'aurez pas à naviguer manuellement dans le logo que vous avez défini pour ce site Web. Vous pouvez même utiliser l'image en vedette. Quelle que soit l'image définie pour l'image sélectionnée , elle sera affichée ici. Vous pouvez même définir la couverture de cet article de blog. accord, vous pouvez même ajouter du contenu multimédia et du texte pour que le contenu et l'image soient enveloppés. C'est bon. Vous pouvez voir que cela signifie essentiellement qu'en mettant les médias et les mots côte à côte pour une mise en page plus riche, vous pouvez travailler sur certaines choses. Nous pouvons télécharger l'image ou sélectionner l'image dans la médiathèque. C'est ce que je préférerais faire ici. Je peux sélectionner ces gars. Très bien, et c'est ce que nous avons pour notre article de blog ici. Je peux même publier ou ajouter du contenu. Permettez-moi d'essayer d'ajouter un peu plus de contenu. Je peux simplement ajouter du contenu de paragraphe ici. Je vais copier le texte ci-dessous. Très bien, je vais le coller ici. Je peux m'assurer qu'il s' agit d'un texte de paragraphe. Vous pouvez constater qu'il s' agit d'un texte de paragraphe. Très bien, nous avons ici l'intégralité du bloc de poteaux. Je peux même ajouter un peu plus de contenu. Je peux simplement aller sur la page à propos ici, je trouverai la majorité du contenu. Je pense que je peux juste copier. Je peux juste le placer ici. Très bien, laisse-moi faire, je vais le coller. D'accord, je pense que nous n'avons peut-être pas tout copié, alors nous allons simplement copier-coller l'ensemble du contenu. Maintenant, une fois que nous l'avons fait, publiez. Très bien, nous pouvons publier et vous constaterez que ce blog est disponible pour consultation. Maintenant, une fois que nous aurons vu le message, voyons à quoi il ressemble. Vous pouvez donc constater ici que l'en-tête a en fait un fond bleu. Parce que si vous vous souvenez bien, lorsque nous avons essayé de donner certaines conditions aux paramètres d'affichage de votre en-tête, nous avons dit que pour la page d'accueil elle-même, qui est l'élément 58, l'en-tête devait avoir un arrière-plan transparent. Mais pour les pages de votre blog, l'en-tête doit avoir un fond bleu. Très bien, vous trouverez ici la zone où les gens peuvent laisser un commentaire. Ici, ils peuvent publier le commentaire et ils peuvent même partager à nouveau votre contenu Très bien, vous le trouverez ici. Qui a publié ce blog ? Quel jour exactement ? Et est-ce classé dans n'importe quelle catégorie ou non ? Si vous souhaitez les réorganiser et les former dans une structure appropriée, vous pouvez même le faire en accédant à la personnalisation Encore une fois, nous allons cliquer sur Theme Customizer. Ici, dans la section des publications bloquées, vous trouverez des articles uniques ici. Il existe différentes mises en page pour structurer votre publication. Par défaut, il est réglé sur une largeur étroite. Cela signifie que votre titre apparaîtra d'abord, puis l'image, puis voici comment sera la structure du tras. Si je remplace cette largeur par une largeur normale, vous pouvez constater qu'il n' y a pas de rembourrage ou marge entre les directions droite et gauche Si je change cela en barre latérale gauche, vous trouverez ici les différents titres des articles sur le côté gauche. Et quelque chose de similaire peut être montré sur le côté droit. Très bien, ici, vous pouvez même utiliser l' image en vedette si je l'ai publiée. Attends une seconde, juste une seconde ici. Vous ne trouverez pas d'image vedette pour ce bloc de publication car nous n'avons rien défini. Alors laisse-moi juste terminer. Je vais modifier cet article en cliquant sur ce bouton. Et vous constaterez ici que nous n'avons défini aucune image en vedette. Permettez-moi donc de sélectionner une image vedette. Ce que je suis, je vais sélectionner ce type comme image vedette. C'est bon. Cela ne fait pas partie du bloc de publication, mais plutôt d'une image vedette. Permettez-moi donc de mettre à jour mon blog et quand je consulterai ma page. Donc, pour voir ceci, je peux simplement cliquer sur ce bouton pour voir le message. Et il s'ouvrira dans un nouvel onglet. Maintenant, bien que nous l'ayons dit en tant qu'image vedette, vous ne la trouverez pas dans notre blogue. Pourquoi ? Donc, si nous cliquons sur le personnalisateur du thème, lorsque nous passons en revue les paramètres de publication individuelle et que nous faisons défiler la page vers le bas, vous constaterez que le paramètre de l'image en vedette est désactivé Une fois que nous avons basculé, vous constaterez que l' image en vedette sera d'abord affichée, puis le titre, et ensuite qui a publié l'intégralité de ce bloc. Publiez ici, vous pouvez même ajouter des tags de publication, sorte que tous les hashtags que vous utilisez seront affichés. Vous pouvez même ajouter une boîte de partage en bas de page. Les utilisateurs pourront partager cette publication sur leur page Facebook, profil lié, sur Pinterest ou même sur Twitter. Vous pouvez même ajouter une boîte d' auteur afin que l'auteur qui a publié ce blog puisse ajouter quelques commentaires supplémentaires. Vous pouvez même ajouter une navigation dans les articles. C'est bon. Vous pouvez même ajouter une navigation dans les articles. Et vous pouvez même ajouter des articles connexes, ce qui signifie essentiellement que tous les articles liés à ce titre et à cette catégorie seront affichés sous forme de suggestion au bas du bloc de publication. J'espère que vous comprenez ce que vous pensez de l'ensemble du bâtiment et de la modification de votre blogue. Je pense que c'était à peu près à cause de ça. 9. Conception de notre page d'accueil mobile responsive: Très bien, voyons comment nous pouvons créer notre site Web adaptatif. l'heure actuelle , ce que vous voyez ici à l'écran, ce type de couche de conception sera affiché sur les écrans de bureau Que se passe-t-il si nous consultons ce même site Web sur un écran de tablette ou de mobile ? Bien entendu, les éléments peuvent coïncider les uns avec les autres, car la largeur de dimensionnement et la marge de rembourrage varient en fonction de la largeur de l'appareil Nous devrons donc changer avant réellement rendre notre site Web réactif. Il reste encore quelques choses à faire avec ce site Web, en particulier avec notre section consacrée aux héros. abord, comme vous pouvez le constater, d'abord, comme vous pouvez le constater, cette image et le contenu ici coïncident avec notre en-tête parce que nous avons conservé notre en-tête transparent Ajoutons un peu de rembourrage à la section des héros. Nous allons cliquer sur Modifier Elementor. Et attendons qu' il soit chargé. Ici pour cette section, je vais cliquer ici. Vous pouvez voir que nous sommes en train de modifier l'intégralité du conteneur. Nous allons passer aux paramètres avancés, et ici, dans le rembourrage, j'ajouterai du rembourrage par Je vais simplement utiliser la flèche vers le haut du clavier pour faire défiler la section des héros. Nos 100 pixels de rembourrage depuis le haut sont donc beaux. Alors publions simplement ceci. Très bien, une fois que je fais défiler l'écran vers le bas, toutes ces sections apparaissent sur l'écran du bureau. Maintenant, il y a une chose que je voulais aborder tout à l'heure, c'est l'accordéon En ce qui concerne les tablatures, je pense que nous aurions dû également aborder la section accordéon Permettez-moi d'ajouter rapidement une nouvelle section. Je vais ajouter une nouvelle section ici. Je vais ajouter une boîte flexible de deux colonnes. Voici notre accordéon. Nous allons d'abord ajouter un titre. Ajoutons un titre en dessous de ce titre, nous utiliserons que dites-vous de notre accordéon Nous pouvons ajouter un accordéon à la place. Ce que nous pouvons faire, c'est simplement créer une copie de ce diviseur, nous pouvons simplement apporter ce diviseur ici Vous pourriez vous demander une chose, c' est que la largeur de ce séparateur, ici même dans ce conteneur en particulier, était aussi grande La largeur était très grande par rapport à ce que nous pouvons voir ici lorsque nous l'avons dupliqué et placé ici même à l'intérieur de ce conteneur Vous pouvez voir que la largeur a été ajustée en conséquence. Pourquoi est-ce le cas ? Parce qu' ici, nous avons deux colonnes. Nous avons deux conteneurs. Il a ajusté sa hauteur. Ou plutôt, je devrais dire , en conséquence, très bien, laissons juste une ligne. Nous allons donc augmenter la largeur à peu près à ce point. Nous allons ajouter un accordéon. Ajoutons l'accordéon. Maintenant, l'accordéon est un peu comme une section en C. Vous pouvez voir ici que nous avons un accordéon. Nous pouvons cliquer sur ces différents objets et ils s'effondreront de plus en plus. Dans celui de l'accordéon, vous aurez du contenu, vous aurez une icône Lorsqu'il est déjà ouvert, vous trouverez le contenu ici. Vous pouvez modifier le contenu, vous pouvez changer le titre. C'est quelque chose de similaire à ce que nous avons vu plus tôt. Ce que nous pouvons faire, c'est même changer l'icône. À l'heure actuelle, nous avons la bibliothèque d'icônes. Nous pouvons naviguer entre les différentes icônes que nous avons. Vous pouvez voir les icônes recommandées pour notre accordéon ici Vous pouvez même modifier l' alignement de l'icône. Au lieu de tracer la ligne gauche, nous pouvons la changer en ligne droite ici. Ça a l'air bien, très bien dans le contenant de gauche. Ce que nous pouvons faire, c'est ajouter un conteneur supplémentaire. Ce que j'essaie de faire, c'est que j'essaie juste de me servir de ce type de boîte. Maintenant, cela va devenir très difficile pour les débutants. Essayons de créer une version simple de cette mise en page. Ce que je vais faire, c'est simplement ajouter un nouveau conteneur à l'intérieur de ce conteneur existant. Et assurons-nous simplement que ce conteneur est aligné verticalement et que la largeur de ce conteneur en particulier est réellement de 100. accord, il utilise donc en fait toute la hauteur. Très bien. Faisons-le sur toute la largeur. Et qu'allons-nous faire ? Nous modifierons également la largeur ultérieurement, mais pour l'instant, essayons d'y ajouter quelques images. Je vais ajouter, nous allons changer l'image en quelque chose comme, ici j'ai cette image, je vais utiliser cette image. Je vais également ajouter une autre image. Alors permettez-moi d'en faire une copie. C'est bon. La direction du conteneur sera modifiée en position horizontale. Très bien. La direction intérieure du conteneur sera modifiée en direction horizontale. Je vais remplacer cette image quelque chose comme environ, disons. accord, vous pouvez voir la direction, ou plutôt je dois dire que les tailles de ces images sont différentes. Pour en faire quelque chose de similaire, je vais le dupliquer. Je vais le dupliquer. Nous allons nous assurer que ce contenant est en bon état. Tu sais ce que je dois faire. Je devrais faire une copie de ce contenant. C'est bon. Un conteneur contient ces deux images et l'autre conteneur contient ces deux images. Bien, essayons d' inverser le contenu. Très bien, c'est comme ça que ça paraît. Maintenant, le conteneur, le conteneur intérieur que nous avons ici, va essayer de changer de hauteur de telle sorte qu'à l'intérieur du conteneur lui-même, cela ait l'air bien. À mon avis, nous pouvons donner une couleur de fond à ce conteneur. Laisse-moi le styliser. Nous pouvons sélectionner une couleur, nous pouvons lui donner quelque chose comme du noir ou un peu comme une teinte plus foncée. Ça a l'air bien. C'est exactement ainsi que nous avons créé une mise en page similaire à celle-ci, n'est-ce pas ? La seule différence est que l'image possède un certain rayon de bordure. C'est bon. J'espère que vous comprenez ce point à propos de cette partie. Nous pouvons même ajouter quelques objets supplémentaires à l'intérieur de cet accordéon. En accédant au contenu, nous pouvons dupliquer des articles dupliqués qui seront créés. Nous pouvons changer ce quatre, ce 23 et ainsi de suite. Très bien, publions ceci. Voyons maintenant comment nous pouvons rendre notre site Web adaptatif, ce qui était l'objectif même la création de cette vidéo. Ici, en haut, vous trouverez le bureau allumé, icône de la tablette et l'icône du smartphone. Maintenant, si vous ne le trouvez pas en haut, vous le trouverez certainement dans le coin inférieur gauche de votre Elementor Pine Fine Le site Web s'affiche bien sur les écrans de bureau, mais voyons à quoi il ressemble sur les écrans de tablette. Je vais simplement cliquer sur le mode portrait de ma tablette. Ici, vous pouvez constater que notre section de héros elle-même n'est pas très belle. Le titre lui-même, nous pouvons faire baisser la taille de la police. Mais les deux colonnes ici ne semblent pas très belles. Ce que nous pouvons faire, c'est que nous avons deux options. Soit nous pouvons réduire la taille de la police et essayer d' adapter tout le contenu de manière à ce qu'il corresponde à la largeur de la tablette. Mais je suggère d'utiliser une autre section sur ce que nous pouvons faire. Nous pouvons simplement le reproduire cliquant avec le bouton droit de la souris sur notre conteneur Si vous n'êtes pas en mesure de le faire, vous pouvez simplement cliquer sur Structure. Assurez-vous que vous avez sélectionné la section héros de notre conteneur, puis vous pourrez simplement en faire une copie. Très bien, une fois que vous avez fait cela, juste en dessous de cette section consacrée aux héros, vous trouverez l'écran dupliqué, Très bien. Maintenant, dans la section des doublons , je vais simplement retirer ce conteneur. Avec cette image, nous ne la voulons pas, nous allons simplement la supprimer ici. nous restera ce conteneur en particulier avec un texte, un diviseur et le titre, suivi d'un autre testateur et de Essayons de les aligner de manière à ce qu'ils apparaissent au centre. Pour cela, il me suffit de cliquer sur ce conteneur. Je vais prendre la direction. Nous voulons évidemment que cela soit horizontal. Cela ne fait aucune différence même si je le change en vertical. Mais ce que nous voulons, c'est justifier le contenu à centrer. C'est ce que nous allons faire. Vous pouvez maintenant constater que le conteneur est aligné au centre, très bien. Maintenant, tout cela est bien, mais essayons également de changer la taille de police complète de ce titre en particulier. Je vais aller dans l'onglet Style, je vais cliquer sur Typographie. Je vais réduire la taille à environ 50 pixels. Je vais donc garder les 50 pixels et ça aurait l'air bien, très bien. Maintenant, vous le trouverez peut-être ici. Nous avons un peu de rembourrage par le haut, mais pas par le bas Ajoutons également un rembourrage par le bas. Voici ce que je vais faire, je vais juste cliquer sur ce conteneur. Je vais passer à la section avancée. Ici, vous trouverez un rembourrage à partir des cent premiers pixels, mais déplaçons-le vers le bas et nous modifierons également le rembourrage du bas Je vais juste dissocier les valeurs. Une fois que vous avez cliqué sur Dissocier, vous constaterez que les valeurs les plus élevées sont également remises à zéro La raison en est simple : comme vous pouvez le constater, outre ce rembourrage, vous trouverez l'icône de la tablette Les paramètres du rembourrage ont été réinitialisés pour la tablette Encore une fois, je vais devoir faire en sorte que ce soit 100 pour le bas. Je vais faire en sorte que ce soit environ 50. Cela nous laisserait suffisamment d'espace pour commencer notre prochaine section. Très bien. Si vous le souhaitez, vous pouvez supprimer un bouton si vous le souhaitez, mais je le garderais tel quel. Et si vous le souhaitez, vous pouvez même centrer ce contenu ici. Je vais juste passer à cette partie. Je vais passer au style, et je vais modifier l'alignement au centre. Désormais, tous ces paramètres ne sont appliqués qu'aux écrans des tablettes. Vous pouvez voir ici que nous avons le mode portrait sur tablette. Nous pouvons aligner ce diviseur au centre. Vous pouvez même placer notre titre au centre. Passons au contenu Ici, nous trouverons l'alignement. Cela permettra également d' aligner ce centre. Assurons-nous que ce conteneur en particulier comportant deux boutons en ligne également justifié. Centre de contenu. Toutes ces choses apparaissent au centre, très bien. Maintenant, même si je regarde le mode bureau, vous constaterez que l'autre section apparaît juste en dessous. Nous ne voulons pas que cela se produise. Cette partie de la section des héros ne doit s'afficher que sur les tablettes et les écrans de cinéma et doit être masquée sur le bureau. Alors que la section des meilleurs héros, que nous avons ici, devrait être affichée que sur les écrans de bureau et devrait être désactivée pour les tablettes et les smartphones. Cliquons donc sur ce conteneur en particulier. Nous allons modifier ce conteneur. Nous allons accéder à l'onglet Avancé, juste sous l'onglet Avancé. Lorsque vous faites défiler la page vers le bas, vous trouverez la section appelée responsive. Il suffit de cliquer sur Responsive. Et vous trouverez ici différentes options à choisir. Le mode visibilité, nous le masquerons en mode portrait sur tablette, nous nous masquerons en mode portrait sur mobile. Et dans la section ci-dessous, nous allons masquer celle-ci en mode bureau, évidemment, car nous ne voulons pas que cette partie soit affichée sur les écrans de bureau. Si je passe en mode bureau, vous verrez apparaître cette section consacrée aux héros . Et cette partie est affichée mais juste en mode gris parce que nous sommes l'avènement, nous sommes l'éditeur, c'est pourquoi nous pouvons voir cette partie. Très bien, ici, une fois sur l' écran de la tablette, vous trouverez la section Next hero. Cette partie de la section des héros. Très bien. Faisons défiler la page vers le bas et vous trouverez ici ces trois cartes. Maintenant, ces trois cartes ont un effet dégradé, nous avons beaucoup travaillé et il y a eu tellement de complications dans des conteneurs imbriqués Nous avons appris et notre énergie a été gaspillée parce que nous ne pouvons pas simplement ajuster les trois colonnes sur une seule largeur. Alors, comment pouvons-nous travailler de cette manière simple ? Il suffit de cliquer sur ce conteneur. Au lieu de faire en sorte que la direction de la boîte flexible soit horizontale, ne pouvons-nous pas faire quelque chose comme la verticale ? Nous pouvons obtenir le même résultat. heure actuelle, vous pouvez voir la largeur en fonction de la largeur de notre écran de bureau. Les cartes dégradées sont correctement ajustées ici. Vous pouvez même ajuster l'icône, ce texte et cette ligne centrale de texte si vous le souhaitez, mais je vais simplement les garder tels quels. Très bien, et attention, cette direction, qui est réglée sur la verticale, ne s'applique actuellement qu'aux écrans des tablettes, pas aux écrans de bureau. Si je reviens simplement au mode bureau, vous constaterez que ces trois colonnes, ces trois conteneurs apparaîtront dans un mode boîte flexible horizontale. Très bien. Revenons à ce mode tablette. Nous pouvons réduire cette taille de police en accédant à la typographie, et nous pouvons les faire apparaître de telle sorte qu' elles apparaissent sur une seule ligne Encore une fois, nous allons faire 50 pixels et assurer qu'il est sélectionné en mode tablette, n'est-ce pas ? La taille de 50 pixels de ce titre ne sera donc appliquée que sur les écrans des tablettes. J'espère que tu as compris. Une fois que nous avons fait défiler la page vers le bas, trouverons une autre section où nous pouvons simplement copier-coller le style. Nous allons donc simplement coller le style ici. Très bien, et ici vous pouvez voir que nous avons à nouveau le titre en 50 pixels. Maintenant, l'onglet un et l'onglet deux apparaissent bien. Nous n'avons pas nécessairement à changer, moins pour l'onglet 1, je ne trouve pas le besoin changer quoi que ce soit dans l'onglet 1. Mais pour le deuxième onglet, je pense que nous pouvons changer certaines choses pour que notre icône n'apparaisse pas si petite et que le texte apparaisse correctement une seule ligne, le titre lui-même. Essayons donc de les modifier. C'est ce que je vais faire, je vais juste publier ceci. D'accord, je vais publier ceci. Je reviendrai à mon mode d'affichage une fois que j'aurai prévisualisé mes modifications ici. Lorsque je survole mon Editith Elementor, vous trouverez l'onglet 1 et Il suffit de cliquer rapidement sur le bouton deux pour que, quel que soit le contenu que nous avons dans le bouton deux, nous puissions le modifier directement ici. Je peux simplement cliquer sur le mode réactif, le mode tablette. Ici, vous trouverez l'icône. Cliquons sur le cadre de l'image. Ici, nous pouvons passer à la partie style. À l'intérieur du style, nous avons l'image. Cliquons sur Image. Ici, vous pouvez voir que la largeur est actuellement fixée à 15 %. Augmentez cette valeur à quelque chose comme, disons, 30. D'accord. Nous pouvons également appliquer les mêmes paramètres ultérieurement, mais essayons simplement de contourner cette partie ici. Le contenu lui-même, où nous avons le titre et la description. Nous pouvons également en réduire la typographie. Réduisons simplement la taille à environ 20 pixels. 20 pixels me paraîtraient bien comme ça. Nous appliquerons également les mêmes paramètres à tous. Copions et collons les mêmes paramètres ici. Collez le style. Et ici, vous pouvez constater que c'est ainsi que l'ensemble de notre boîte à onglets apparaîtra. Bien, publions tout cela. Prévisualisons les modifications. Nous y retournerons. Actualisons la page Web. Lorsque nous verrons davantage la tablette, vous constaterez que les modifications que nous avons apportées seront reflétées ici. Permettez-moi de faire défiler la page jusqu'à la partie où nous pouvons passer à l'onglet deux. Une fois que j'ai sélectionné le bouton deux, vous constaterez qu'un titre apparaît sur une seule ligne. De plus, l'image semble être plus grande qu'elle ne l'était auparavant. Une fois que vous faites défiler l'écran vers le bas, vous trouverez également votre accordéon, dont je ne trouve pas nécessaire de faire des chinois autour de l'accordéon Mais pour cette partie où nous avons ces images particulières et les différentes sections que nous avons ici, nous pouvons ajouter un certain écart entre elles. Écart entre ce conteneur et ce conteneur. Nous pouvons ajouter un peu d' espacement entre eux. Il suffit de cliquer sur le conteneur extérieur. Nous pouvons faire défiler la page vers le bas ici. Nous pouvons simplement augmenter l'écart entre eux. Parfait pour qu'il occupe tout l'espace. 70 en colonne et en ligne semble bon, à mon avis. Ou vous pouvez même changer la direction de la boîte flexible de la verticale à la direction inversée. Cela ressemble à ça, à vous de décider. Vous pouvez simplement le modifier comme vous le souhaitez. Une fois que vous faites défiler la page vers le bas, vous trouverez cette section où cette image devrait se chevaucher avec la section suivante, mais cela ne se produit pas en mode tablette. Pourquoi ? Alors, vérifions-le. De toute évidence, il y a un problème avec le rembourrage et les paramètres de marge. Nous n'avons pas nécessairement à apporter de modifications à cette section particulière où se trouve l'image de ce type. Passons rapidement à la section suivante. Ici, nous avons cette partie. Nous conserverons les paramètres de rembourrage tels quels, mais ce que nous voulons réellement, c'est que cette section ait une marge du haut en valeur négative Passons au niveau avancé. Ici, nous avons de la marge. Dissocions les valeurs de marge du haut. Je vais le déposer vers le bas pour qu'il semble que l'image semble se chevaucher avec la section suivante. Bien, voici à quoi ressemble le contenu. Cliquons sur l'image pour que le texte et cette image ne coïncident pas trop. Nous allons passer à cette image Paramètres avancés en partant de la droite, vous constaterez qu' il y a une marge, c' est-à-dire moins les pixels d'étude. Déposons-le ici. Nous avions -30 Au départ en partant du bas, nous avions moins 220, non ? Descendez à quelque chose comme -18. Je pense que -18 irait bien, -18, c'est beau Et nous garderons les choses telles quelles. Bien, ici nous avons des choses différentes. Maintenant, le contenu de ce contenant où se trouve cette pièce touche tout notre corps mouillé. Vous pouvez voir ici ce que nous pouvons faire. Nous pouvons en fait donner un peu de rembourrage à droite, à gauche, à droite Passons simplement à ce conteneur. Nous allons passer au mode avancé en haut et en bas. Nous en avons 20, mais faisons-le aussi de droite à gauche. Ajoutons 20 pixels en partant de la droite et de la gauche. Maintenant, le contenu semble sympa. Très bien. Réduisons également ce titre à ce que nous avons ici. Je vais juste copier. Je vais coller le style tel qu' il apparaît ici, mais vous pouvez constater que la couleur de la police a été modifiée ici. Il va falloir changer la couleur de la police en blanc. OK, police de couleur blanche. Nous avons ici ces images. Bien, tout semble bien. Faisons défiler la page vers le bas. Et voici la section d' appel à l'action. Bien, nous n'avons pas à nous inquiéter à ce sujet parce que ça a l'air vraiment bien. Maintenant, en quelques minutes, nous avons rendu notre site Web adaptatif pour le mode tablette. Voyons à quoi ressemblerait un site Web sur un appareil mobile. Nous allons simplement cliquer rapidement sur l'icône du mode portrait mobile ici. Vous constaterez que la section des héros est belle, à mon avis. accord, mais nous pouvons tout de même ajouter un écart entre tous les éléments de telle sorte que cela couvre tout l'espace réservé à la section des héros Il suffit donc de cliquer sur le conteneur extérieur pour la section des héros. Nous allons faire défiler l'écran vers le bas dans l' onglet de mise en page lui-même. Vous trouverez des lacunes. Essayons donc d'augmenter l'écart de telle sorte que, vous savez, nous n'ayons pas beaucoup d'espacement. Très bien. De plus, pour toute cette section, nous allons passer à la section Avancé et nous allons faire défiler le rembourrage Nous allons simplement déposer le rembourrage vers le bas et nous voulons juste que le rembourrage du haut soit autour, disons aussi 50 du bas Laissons-le à 50. Bien, je ne sais pas à quoi ressemblerait notre en-tête s'il coïncide avec notre section héros Gardons-le à 100 par défaut. Je trouve que ça a l'air plutôt cool. Une fois que nous faisons défiler la page vers le bas, vous avez tous les autres éléments. Encore une fois, nous pouvons faire défiler le style de police. La taille de la typographie doit être réduite à environ 25 pixels pour cette partie De plus, nous pouvons le réduire à dix pixels, je dirais, parce qu'en ce moment, nous visionnons sur un ordinateur de bureau, n'est-ce pas ? Il se peut que nous trouvions que le contenu du nom de l' entreprise est bien trop petit. Mais une fois que nous aurons consulté le site Web exact sur un appareil mobile, nous constaterons qu'il apparaît bien. Réduisons également la largeur de ce truc pour contourner légèrement ce diviseur La largeur semble également bonne. Encore une fois, pour cette partie, vous pouvez faire défiler le style et la taille de police. Je trouve que ça a l'air bien, donc je ne vais pas m' attarder sur cette partie. Oui, mais pour le deuxième conteneur où nous avons l'image en arrière-plan, nous pouvons changer la position de ce type dans le deuxième conteneur. Permettez-moi simplement de sélectionner la structure. Ici, dans la structure, nous avons le deuxième conteneur. Le troisième conteneur, OK, le deuxième conteneur, arrière-plan, nous allons passer au style. Ici vous avez l'arrière-plan dans la taille de l'écran, ici vous avez la couverture. La répétition est par défaut, la position ne peut pas être modifiée, je pense donc essayons de voir si nous pouvons changer de position ou non. Si je le fais sur mesure, voyons ce qui se passe. D'accord, pour les appareils mobiles uniquement, nous pouvons remplacer cela par quelque chose d'autre. C'est bon. Cela aurait l'air bien à mon avis. Bien, ça a l'air vraiment bien. Appliquons également les mêmes paramètres que ceux que nous avons définis pour cette partie aux autres sections. Très bien. Qu'allons-nous faire ? Je ne pense pas que nous ayons besoin de réduire la taille de police du titre. C'est bon. Je vais juste copier. Je vais faire défiler la page vers le bas et coller le style de ce titre. Je vais faire la même chose pour cela et pour le diviseur. Bien, maintenant nous avons l'onglet un et l'onglet deux. Cliquons sur Tapon pour voir à quoi cela ressemble. Tab s'est très bien ajusté. La direction de la boîte flexible est passée automatiquement de l'horizontale à la verticale. Mais pour le deuxième onglet, je pense qu' il reste encore du travail à faire. Vous pouvez le voir ici, nous ne voulons pas que cette bordure apparaisse. C'est bon. Nous ne voulons pas que cette bordure apparaisse. Si nous le voulons, nous pouvons l' ajouter ici même. Changeons ce truc. Nous allons simplement publier ceci. Pour l'instant, prévisualisons les modifications. Nous allons cliquer sur Tth Elementor et sur le deuxième onglet ici, je vais accéder à l'écran mobile de ce conteneur dans l'onglet Style Allez à la bordure, je vais le supprimer. Nous veillerons à ce qu' il n'y ait pas de bordure, ou même s'il y que nous voulons ajouter à celle du bas. Ajoutons au bas de la page. Voici à quoi ressemblerait l'espacement , mais cela ne semble pas bon Laisse-moi juste le réinitialiser. Je vais le remettre à zéro. Très bien. Que pouvons-nous faire d'autre ? Je pense que cela semble bien si nous supprimons la bordure, et cela semble plutôt bon à mon avis. Très bien. Publions simplement ceci. Très bien, retour, nous actualiserons notre page. Vous constaterez que les modifications seront appliquées. Cliquons sur le mode mobile. Nous allons faire défiler l'écran jusqu'à notre onglet en deux parties. Très bien, vous avez ici le deuxième onglet. Et c'est ainsi qu'il apparaît dans ce contenant pour accordéon Ou plutôt, je devrais dire que dans cet onglet, vous constaterez que l' alignement est comme si cette position devait être verticale. Voyons comment cela fonctionne en vertical. Cela n'aide pas à la verticale. Gardons-le comme à l' horizontale et au centre ici. Vous pouvez choisir entre différents types. Ce qui se passait essentiellement plus tôt, c'est que sur les écrans de bureau et de tablette, Tab et Tap To apparaissaient en haut. Mais maintenant, sur les appareils mobiles, ce qui se passe, c'est comme un accordéon Ici, vous avez l'option Tab, puis en bas, vous avez l'option Tap ici. La section suivante, l'accordéon ici. Ajoutons un peu de rembourrage si vous le souhaitez, possible, mais pour l'instant je vais juste le laisser tel quel Et ici, tout semble bon. Défilons vers le bas jusqu'à la partie où nous avons cette partie ici, l'image et cette partie. Puisque nous avons dit que l'index de l' image est un, il apparaîtra au recto. Nous avons ici le contenu du corps, le titre, la description, le diviseur Et voici l'image. L'image apparaît devant le texte. heure actuelle, nous ne voulons pas que cette situation qui se chevauche se produise Ce que nous pouvons faire, c'est qu' au lieu de réduire cette marge à moins 220, nous pouvons simplement la conserver ainsi cette marge à moins 220, . Cela a l'air beaucoup plus propre et bien meilleur. Et là, je pense que nous sommes plutôt prêts à partir. seuls changements que nous devons apporter concernent le nom de l'entreprise, le titre, etc. Nous allons donc copier-coller le style très rapidement. Très bien, alignons également ce centre ici. Je peux accéder à la partie style de l'éditeur de texte. Je peux aligner ce centre. Je peux aligner ce centre pour la pièce. OK, pour tout le test. Nous pouvons justifier le centre de contenu. Assurons-nous que la zone d'image que nous avons ici, apparaît toutes alignée au centre, doit être au centre de toutes. Nous pouvons simplement copier. Nous pouvons coller le style de cette amende ici. Nous pouvons également modifier les paramètres. Très bien. Vous pouvez constater que toutes les images et les logos des partenaires apparaissent bien dans un format vertical, mais nous devons ajouter quelques espaces entre eux. Cliquons sur le conteneur situé le plus à l'intérieur. Nous allons faire défiler la page vers le bas et ajouter quelques lacunes. Bien, un écart d'environ 45 pixels serait une bonne idée. À mon avis, 45 pixels semblent bons. Gardons-le tel quel. Nous pouvons encore changer cela, mais je ne vais pas le faire encore et encore. Ici, vous pouvez faire baisser la taille de police si vous le souhaitez, même pour le bouton. Vous pouvez également réduire légèrement ce bouton uniquement pour l'écran du mobile. Vous ne pouvez pas modifier le style des boutons uniquement pour l'écran du mobile. Si vous modifiez ce paramètre trop petit, la même taille de bouton se reflétera également sur les autres appareils. Gardons-le tel quel. Et je pense que nous en avons assez du mode réactif du site Web également. 10. Créer un en-tête / barre de navigation personnalisés: Voyons comment créer notre propre barre de navigation personnalisée l'aide de l'élément ou du plug-in. Ici, vous pouvez voir que nous avons une liste de toutes les pages que nous avons. L'élément ou page 58 est la page d' accueil de notre site Web. Cela signifie que chaque fois que nous saisissons URL, hôte local pour la presse, cette page s'ouvre. Ce que j'aimerais faire, c'est que nous pouvons simplement changer de maison ici. Nous pouvons lui donner quelque chose comme un blog, celui que nous avons comme élément, ou 58. Nous pouvons le remplacer par un. Permettez-moi de le modifier rapidement et nous pourrons le remplacer par home. Très bien, changeons également cela en home. Il s'agit du slug d'URL et du titre de votre page Web Mettons-le à jour. Revenons à notre menu. Ici, dans la section apparence, vous trouverez des menus dans les menus latéraux. Tout d'abord, nous aimerions évidemment afficher la page d'accueil, puis la page à propos, puis la page de blocage et la page de contacts. Très bien, maintenant sauvegardons le menu. Tout d'abord, nous allons enregistrer le menu. Ce menu est juste pour l'arrangement de toutes les périodes que nous avons sur notre site Web. Tout comme nous avons utilisé personnalisateur de thème des blocs pour personnaliser notre en-tête et barre de navigation afin de changer la couleur d'arrière-plan et d'aligner notre logo, les boutons Et nous avons vu beaucoup de choses différentes. Quelque chose de similaire peut être fait avec plug-in Element ou Pro ici même dans les pages. Je vais ajouter quelques pages supplémentaires et nous les donnerons comme titre de bloc. Donnons-lui quelque chose comme le bloc numéro deux. C'est bon. Tout d'abord, il s'agit pas réellement d'une page. Il devrait plutôt s'agir d'un post. Donnons-le sous forme d'article et nous en ajouterons un autre. Ou plutôt ce que nous avons déjà. Deux articles, Hello World et un billet sur le blog. Modifions le titre. D'accord, nous pouvons modifier ceci quelque chose comme le blog 2. Très bien, je vais le mettre à jour. Nous allons revenir à notre tableau de bord ici. Vous pouvez voir que nous avons le bloc deux. OK. Nous pouvons également changer le limace de l'Oural. Changeons cela en blog 2. Bien, mettons-le à jour. Qu'allons-nous faire ? Permettez-moi de le modifier rapidement. OK, ça a l'air bien. Mettons-le à jour, même dans l'Oural Slug. Je vais juste le garder comme blog. Très bien, mettons maintenant à jour ce que je vais faire Je vais simplement revenir à mes menus, aux menus apparence, ici même, dans la section Tout afficher. Je pourrais également publier des pages intérieures. Vous ne trouverez pas le billet de blog, vous devrez vous rendre dans la section des articles. Ici, vous trouverez le bloc 1.2 Ajoutons-les et intégrons-le à votre blog. Nous pouvons avoir un menu déroulant. Chaque fois que quelqu'un survole le bloc, il trouve le bloc un et le bloc deux. Très bien, sauvegardons le menu. Qu'allons-nous faire ? Nous reviendrons sur le site Web de notre adresse pour voir si les modifications sont visibles ou non. Ici, vous pouvez voir que nous avons le premier blog, le bloc deux. Mais nous aimerions personnaliser cet en-tête à l'aide d'Elementor Nous y retournerons, nous passerons au modèle, non ? Dans les modèles, vous aurez des modèles de sauvegarde, générateur de thèmes et bien d'autres éléments. Cliquons sur Theme Builder. Ici, dans le générateur de thèmes, vous trouverez une option pour modifier votre en-tête. Cliquons sur Edd. Une fois que vous avez cliqué dessus, vous serez invité à choisir entre différents modèles prédéfinis créés par limit ou plugin. Mais nous aimerions le construire à partir de zéro. Il suffit de rayer cela ici, vous trouverez une zone vide à contourner. Ajoutons ici une boîte flexible à deux colonnes. Nous aurons un conteneur et l'autre conteneur. Ajoutons maintenant un logo ici. Lorsque vous cliquez sur Ajouter un élément, vous trouverez quelques éléments qui font partie de votre en-tête. Il est recommandé de les utiliser comme élément ou en-tête. Vous avez ici le logo du site, le titre du site, le titre la page, le menu de presse, le formulaire de recherche, le plan du site. Utilisons d'abord le logo de notre site. Maintenant, le logo du site est visible ici comme vous pouvez le voir. Mais comme la couleur de fond n'est pas foncée, le texte n'est pas visible pour le logo. Nous allons simplement cliquer sur notre conteneur, l'ensemble de la boîte flexible. Nous allons passer à l'onglet Style. Nous allons changer la couleur de fond en noir. Changeons simplement la couleur en noir. Une fois cela fait, vous constaterez que notre image apparaît bien trop grande. Il suffit de cliquer sur cette image. Nous irons chez Style. Et nous allons changer la largeur. Mais laissez-moi simplement le maintenir à 40 % et nous l' alignerons sur la gauche. Bien, maintenant, à l'intérieur de ce conteneur, nous allons également ajouter un menu de navigation. Ajoutons notre menu d'arborescence lorsque je recherche un menu. Tout d'abord, permettez-moi de vous expliquer cela. Appuyez sur le menu. Nous avons un ancre de menu et toutes ces sortes de choses. Mais nous pourrions aussi voir quelque chose comme, utilisons simplement le menu de presse. Je vais le placer juste à l'intérieur de ce contenant. Bien, par défaut, la direction du conteneur est définie sur la verticale. Passons à l'horizontale. C'est ainsi que cela apparaît, mais ce n'est pas exactement ce que nous voulons. Vous pouvez voir que ces éléments apparaissent. Dans un format empilé. Mais si nous voulons que ce logo et que notre menu apparaisse en ligne, que devons-nous faire dans ce cas ? De toute évidence, ils devraient faire partie d'un conteneur. La direction du conteneur doit être réglée à l'horizontale. Ce dont nous avons besoin pour travailler là-dessus , c'est sur cette partie : la résolution de l'image est réglée sur pleine résolution. Nous pouvons le remplacer par un autre ou passer au style. Nous pouvons en modifier la largeur. Et on peut changer la largeur de ce truc. Le logo du site lui-même. Le logo du site, que nous avons ici en premier, permettez-moi de le résumer à cette partie. Je peux modifier la largeur de l'autre conteneur que nous avons ici. Je peux juste utiliser ces 56 %. Permettez-moi de ces 56 %. Permettez-moi faire, car 57 seraient suffisants pour l' autre contenant. Ici, nous avons deux éléments , mais le logo du site semble bien trop petit. Qu'allons-nous faire dans ce cas ? Nous allons passer à la section Avancé. Nous verrons, d'accord, cette largeur correspond à la taille du logo du site. Nous voulons que cela apparaisse d'environ 22 %, mais lorsque nous entrons dans l'image pour l'image du logo du site, nous pouvons augmenter la largeur à plus de 100 %. Très bien. Une fois cela fait, vous pouvez aligner ce centre. D'accord, donc ça ne marche pas. Bien que j'aie cliqué sur le centre, cela ne l'ajustera pas car la taille du logo du site est maximale. Il occupe la largeur maximale en fonction de la largeur des logos du site ici, ce que nous pouvons faire dans ce cas, c'est que vous pouvez simplement passer au style. Nous pouvons cliquer sur le conteneur et ici nous pouvons justifier le centre de contenu et le centre des articles. C'est exactement ainsi qu'ils apparaîtront. J'espère que vous avez compris et que vous comprenez maintenant comment fonctionne réellement Flex Box. Très bien, nous avons ici le logo du site. Voici notre menu et notre menu. Vous constaterez que le texte apparaît en bleu. Passons au blanc en accédant au style. Vous aurez un survol normal et actif. Nous allons changer la couleur en blanc pour les trois états. OK ? Aussi, OK. Par défaut, le survol n'a aucun état Et même lorsqu'il est actif, il n'a aucun état. Alors, gardons-le tel quel. Et à l'intérieur de l'autre conteneur, que voulons-nous ? Nous voulons cela à tout moment pour l'utilisateur. Donc, en ce moment, nous créons cet en-tête en utilisant un générateur d'éléments ou de pages. Correct. Et nous essayons de rendre l'en-tête réactif au fur et à mesure. Bien. Cette partie du conteneur sera affichée sur les écrans de bureau, tandis que l'autre partie du conteneur sera affichée sur les appareils mobiles et tablettes. accord, en particulier, je dirais mobile parce que sur les appareils mobiles, vous verrez une icône de hamburger Et une fois que quelqu'un clique dessus, l'icône du hamburger s' agrandit pour afficher l'ensemble du menu Bien, nous allons ajouter quelque chose de similaire. Faisons-en une copie. Après avoir créé un duplicata à nouveau, il suffit de le glisser-déposer ici. Bien, maintenant c'est fait, mais j'aimerais placer le menu vers la fin. Cela signifie que le contact doit toucher vers la droite et que la maison doit être quelque part ici. Nous pouvons simplement cliquer sur le menu Tres ici. Vous aurez une mise en page pour le menu déroulant. Ici, vous avez la verticale, l' horizontale, la liste déroulante. Voyons ce qui se passe si nous avons initialement une liste déroulante. De plus, même en mode bureau, vous verrez le hamburgeron lorsque quelqu'un clique dessus, vous trouverez cette option Maintenant, par défaut que vous utilisiez le menu déroulant ou non, chaque fois que vous utilisez votre écran mobile, vous verrez un hamburgeronine. Revenons ici. Nous allons utiliser l'horizontale et nous allons faire cet alignement vers la droite. Alignez l'ensemble de votre menu d'arbres vers la droite. Bien. Si vous vous étirez, cela occupera de l'espace rembourré à droite et à gauche, mais gardons-le simplement vers la droite Bien. Maintenant, ce que nous voulons exactement dans ce conteneur. OK, à l'intérieur de ce conteneur, nous voulons encore quelques objets. Tout d'abord, vous pouvez voir que nous avons le titre de la page, le titre du site, formulaire de recherche, plan du site, le titre de la page et toutes ces sortes de choses. Vous pouvez également contourner les différentes parties dont vous disposez. Pour cela, nous pouvons rechercher votre boîte, vous trouverez une liste, vous trouverez une icône. Nous allons utiliser la liste des icônes. Mais il y a aussi une chose que j' aimerais utiliser , c'est le formulaire de recherche. Utilisons d'abord le formulaire de recherche. Je vais simplement le glisser-déposer ici et m'assurer qu' il fait partie du conteneur. Très bien, ajoutons un nouvel élément. Nous pouvons lui donner quelque chose comme boîte à icônes juste au-dessus de la recherche. Et je vais juste montrer rapidement la raison pour laquelle nous utilisons la boîte à icônes ici. Vous constaterez que ce texte est ouvert du lundi au vendredi, de 8 h 00 à 18 h 00. C'est vrai. ce texte est ouvert du lundi au vendredi, de 8 h 00 à 18 h 00. C'est vrai. Nous pouvons utiliser quelque chose comme ça. Nous pouvons supprimer l'icône. Nous ne voulons pas l'icône , mais plutôt utiliser le titre et la description. Nous pouvons indiquer les heures de travail ou taper quelque chose comme le lundi. Jusqu'à vendredi, alors faites frire. C'est bon. En dessous, nous pouvons rester du matin à 18 h 00. Très bien. Vous pouvez voir ici que nous pouvons ajouter un espace entre 8 h 00 et 18 h 00. tiret Ici, nous avons l' espacement correct. Passons au style et changeons la couleur du texte du contenu en blanc. La couleur du titre a été remplacée par le blanc et doit également être définie pour la description. Bien, maintenant, pour ce qui est de la typographie, les deux doivent être configurées sur des poppins, car nous voulons maintenir la cohérence sur l' ensemble de notre page Web accord, pour cela également, nous aimerions le garder sous forme de Poppins Cherchons Poppins. Bien. Poppins a été utilisé pour le titre et la description Poppins a été Essayons de réduire la taille de police à environ 25 pixels. Je pense que 25 pixels auraient l'air bien. Nous pourrions le réduire davantage à environ 20 pixels. 20 pixels, ça a l'air bien. Ici, nous pouvons utiliser 15 pixels. Je pense que 15 pixels seraient plus que suffisants. Très bien, l'espacement. Vous pouvez également jouer avec l'espacement des lettres, l'espacement des mots, la hauteur des lignes, mais je ne vais pas le faire Ici, nous avons la boîte et nous pouvons également en modifier l'alignement. Nous pouvons la remplacer par une ligne droite pour qu' elle apparaisse et touche vers le coin droit en arrivant dans cette liste déroulante indiquant l'espacement. Au départ, il y avait à peu près cet espacement, mais nous l' avons ramené à zéro Très bien, maintenant nous avons fait cette partie. Que nous reste-t-il ? Nous voulons également ajouter une icône. Nous allons ajouter une icône. Il existe un élément dans l'élément ou dans la version gratuite qui s' appelle icône. Maintenant, cette icône peut être utilisée pour utiliser la barre d'outils du site , que nous verrons plus loin. Lorsque nous cliquons sur l'icône du kebab, j'essaie d'importer l'icône du kebab ou l'icône à trois points La plupart du temps, vous trouverez des applications dans lesquelles vous les trois points au format vertical appelés menu. Il est également appelé kebab ou ellipses Cherchons une icône représentant des points de suspension. Vous avez ici la version verticale et horizontale. Je vais juste utiliser l'horizontale. Et je peux changer la couleur de cette couleur primaire qui doit être le blanc. Je peux en modifier la taille. De plus, je pense qu'environ 30 pixels seraient largement suffisants. Bien, si vous avez utilisé des ellipses verticales, vous pouvez même contourner la rotation pour définir comme horizontale en modifiant simplement le degré de rotation à 180 et il le changera correctement , ou peut-être 90 Je pense que si c'est vertical, vous passez à 90, donc il deviendra horizontal. Très bien, vous avez ici toutes ces choses différentes. Alignons également cela sur ce point, n'est-ce pas ? Nous voulons que les trois éléments soient cohérents. Ce que je veux dire par «  en ligne » signifie essentiellement que tous ces contenus, chaque fois que nous passons d'un appareil à l' autre, doivent apparaître sur une seule ligne. Très bien, qu' allons-nous faire ? Nous allons passer à la section Avancé ici. Dans Advanced, vous trouverez que la position est fixée de manière absolue, que nous n'allons pas toucher mais plutôt à la largeur. Nous allons définir ce paramètre sur in line auto pour cet élément. allons faire cette largeur en ligne automatique avancée pour le dernier élément. Nous passerons également à la largeur et à la ligne automatique. Maintenant que nous avons fait toute cette partie, la seule chose qui, selon moi, doit être modifiée concerne ce menu. Et dans ce menu, nous avons le style de police par défaut. Nous allons remplacer cela par des fenêtres contextuelles qui s'affichent. D'accord, nous pouvons également en modifier la taille. Si je change la taille en, laissez-moi simplement la réduire à 15 pixels, ce serait bien Restons-le à 15 pixels. Je peux même le mettre en gras. Bold ne fonctionne pas. Voyons à quoi cela ressemble à un médium. Medium a l'air bien. Poppins de 15 pixels et de poids moyen, c'est ce que nous allons appliquer ici. Au lieu de cela, je peux simplement copier Je peux coller le style ici. Le changement que je dois apporter, c'est que j'ai besoin d'écrire une ligne. Ça, en y allant simplement, je peux écrire une ligne. Maintenant, j'ai toutes les polices ici dans mon en-tête ou ma barre de navigation sous forme de poppins, avec la même taille de police et le même poids de police. C'est bon. Maintenant, en ce qui concerne la barre de recherche, je peux, nous en avons discuté plus tôt , à propos du fait que la recherche est vraiment utilisée pour naviguer entre différents produits, différents blocs, publications, tous ces éléments que vous avez. Maintenant, lorsque nous cliquons sur la barre de recherche, le formulaire de recherche, vous trouverez les différents skins que vous avez. s'agit du format classique où il y a une barre de recherche et en dehors de la barre de recherche, vous avez le bouton séparé pour votre icône de recherche. Si vous maintenez cette valeur au minimum, l'icône de recherche se trouvera dans votre barre de recherche. Bien, si vous le maintenez en plein écran, vous ne pourrez voir que l'icône de recherche. Et une fois que quelqu'un clique sur l'icône de recherche, la totalité de l'écran sera utilisée pour effectuer la recherche. Différents blocs, publications, services et produits que vous vendez sur votre site Web. Bien, vous avez donc différents types de choses. Vous pouvez jouer avec l'alignement, vous pouvez modifier la taille de votre icône. Permettez-moi de clore ceci pour le moment. Ici, vous verrez le bouton de bascule. Si je joue sur la taille, vous verrez la taille de l'icône changer Je peux en faire quelque chose. Quelle est sa taille ? La taille du est fixée à environ 30 pixels, nous pouvons donc faire quelque chose de similaire. 30, 30 semblent bien trop petits. Faisons en sorte qu'il se fortifie. Bien, alignons ça vers la droite, changeons la couleur en blanc ici. Vous trouverez également des entrées et d' autres entrées à bascule Lorsque vous contournez la saisie, que se passe-t-il lorsque vous cliquez sur le bouton ? C'est la partie à chaque fois que vous en changez la couleur, disons peut-être simplement le rouge. Vous pouvez voir les changements de couleur d' arrière-plan en plein écran. À l'heure actuelle, nous aimerions le conserver par défaut. Nous pouvons remplacer la typographie par des poppins afin maintenir la cohérence sur l' ensemble de notre site Web Nous pouvons changer la couleur du texte si vous le souhaitez. Que se passe-t-il si vous modifiez la couleur du texte ? Vous pouvez voir le texte de recherche qui est écrit ici. Cela change. Vous pouvez même changer la couleur de la bordure ici. Si je change la couleur de la bordure, vous constaterez que le séparateur ici va bien changer Nous voulons changer la couleur de l'icône. Il suffit de rayer cela. Au lieu d'avoir ce gris, nous garderons la couleur du bouton de bascule en blanc Nous pouvons le remplacer par du blanc. C'est bon. Nous pouvons même y ajouter une bordure. Nous pouvons ajouter. Très bien, donnons quelque chose ici. Ce que j'essayais en fait d'expliquer, c'est la taille , que vous pouvez voir ici. Cette taille semble correspondre à la taille totale de votre formulaire de recherche. Si vous souhaitez simplement contourner la taille de votre bascule, vous pouvez le faire en accédant au style, le bouton, puis en modifiant l'icône OK, avec la taille ici, tu peux jouer avec. Bien, je peux juste faire quelque chose comme 50 pixels. Je peux ajouter la largeur de la bordure dans un premier temps. Chaque fois que vous jouez sur le curseur pour définir la largeur de la bordure, vous verrez que l'icône qui entoure votre icône est au format boîte Vous pouvez remplacer ce paramètre par un rayon de bordure afin qu'il apparaisse dans un format circulaire Gardons simplement la largeur de la bordure à deux. Je pense que deux seraient bien, le rayon de la bordure étant, une fois que vous avez dépassé 24, il apparaît en circulaire. Même si vous passez à 83605000, cela ne fait aucune différence. Nous pouvons simplement garder ce chiffre à 35 juste pour nous assurer d'avoir un cercle rond. Et nous allons faire défiler l'icône de taille. Voyez ce qui se passe ici. Si je change de taille, le rayon de la bordure lui-même, la bordure qui l'entoure, cela ne se compresse pas réellement. C'est parce que la taille du contenu lui-même est de 45. Si je le réduis à environ 35, ce que nous avons fait pour ces points de suspension, nous pouvons également jouer avec le style, taille de l'icône sera augmentée à environ 50 Ça a l'air plutôt bien. Bien, nous avons toutes ces choses maintenant juste pour nous assurer que les trois choses que nous avons ici devraient apparaître dans un seul conteneur. Ajoutons également un autre contenant. À l'intérieur du contenant extérieur, je vais ajouter un contenant, que nous avons ici. Mettons-le en place. Et je vais essayer de placer tous les objets dans ce contenant, très bien. À l'intérieur de ce conteneur, nous avons deux éléments. Passons également au troisième élément. Bien, nous allons aller au conteneur, nous allons changer la direction en horizontale. Vous trouverez ici qu'ils apparaissent tous les trois sur une seule ligne. Il s'agit d'un format intégré, mais nous voulons que les trois éléments apparaissent à la fin Nous pouvons justifier le contenu. Vous pouvez trouver de l'espace entre l'espace autour et même l'espace. Nous allons simplement changer cela pour terminer. Nous pouvons aligner les éléments ici. Vous constaterez que cette icône apparaît en haut de la page. Cela se trouve également en haut, mais comme il comporte un titre et une description, il occupe toute la hauteur de votre contenant. Nous pouvons simplement en modifier l'alignement au centre pour qu'il apparaisse comme ceci. Ou vous pouvez même le modifier pour le terminer afin qu'il apparaisse dans la partie inférieure Mais gardons cela au centre. Et cela aurait l'air bien à mon avis. Bien. Voici comment vous avez contourné différentes choses, mais il ne vous reste plus que peu de choses à faire. Tout d'abord, ce menu que nous avons ici passera à Avancé. Nous allons sélectionner Réactivité. Nous allons le masquer sur mobile. Voyons à quoi cela ressemble sur tablette et ordinateur de bureau. Voici à quoi cela ressemble sur un ordinateur de bureau. Pour cela en particulier, nous aimerions le masquer sur ordinateur et mobile. Passons au responsive. Nous allons le masquer en mode tablette et ordinateur de bureau, d'accord, mais il devrait être visible sur mobile. Très bien, passons à l'affichage mobile. Et vous ne le trouverez pas ici. Bien que cela soit visible parce que nous sommes l'administrateur, nous sommes en train de créer notre site Web afin de pouvoir en voir tous les éléments. Mais lors de la prévisualisation, vous ne trouverez pas cet élément en particulier, l'icône du hamburger Vous ne trouverez que celui-ci. Une fois que vous avez cliqué dessus, vous trouverez ce type d'option déroulante et toutes ces sortes de choses apparaîtront liste déroulante pour appareil mobile se fera en cliquant ici Vous ne pouvez pas survoler car vous utilisez un appareil à écran tactile Vous ne pouvez pas survoler les éléments. Vous devez cliquer dessus pour qu'un menu déroulant apparaisse . Bien. Nous allons le rayer. Vous pouvez également modifier l'icône du hamburger en accédant simplement au style ici Vous trouverez un bouton à bascule et vous pourrez changer la couleur de ces deux fines fines blanches pour qu'elles soient visibles Vous pouvez même en modifier la position ici. Vous pouvez même faire en sorte que cela soit bien aligné en procédant simplement. L'alignement est réglé sur « correct ». Nous n'avons pas à nous inquiéter à ce sujet. Mais pour cette partie où nous l'avons pour notre appareil mobile en particulier, nous pouvons passer à la mise en page. Nous pouvons passer au style. Ici, nous allons trouver la largeur de l'image. Vous pouvez même modifier la largeur de votre boîte à icônes, du logo de votre site. L'élément est appelé logo du site. Tu peux le faire. Vous pouvez même modifier la largeur maximale de tous ces types de choses, mais nous la garderons telle quelle. Découvrez à quoi cela ressemble sur tablette et à quoi cela ressemble sur ordinateur de bureau. Sur ordinateur de bureau, ça a vraiment l'air bien. J'espère que vous avez apprécié cette conférence. Une fois que vous avez publié l'en-tête, vous sera demandé d'ajouter une condition pour cet en-tête. Cela signifie si vous souhaitez appliquer les paramètres de style de votre menu d' en-tête l'ensemble de votre site Web ou à des pages spécifiques. Conservons ce site dans son intégralité et nous économiserons de près. Très bien, je pense que tout cela était de ma part pour cette conférence. 11. Créer un pied de page personnalisé et page d'erreur 404: Bien, maintenant que vous avez vu et compris comment créer l'en-tête en utilisant element ou pro, voyons également comment nous pouvons utiliser le plugin pour créer notre pied de page et la page d'erreur 44 Nous allons revenir à nos modèles Theme Builder dans le tableau de bord de Tres et nous aurons la possibilité de choisir le pied de page Maintenant, l'arrière-plan de celui-ci, l'élément ou l'élément, peut passer du blanc au noir en fonction de l'heure à laquelle vous l'utilisez en conséquence, il passera en mode sombre ou en mode clair. le moment, nous n'avons pas créé de pied de page, il nous montre donc une planche, mais en haut à droite, vous trouverez un nouveau bouton Nous pouvons simplement cliquer dessus et cela nous demandera les différents modèles que nous avons. Maintenant, nous pouvons le construire à partir de zéro, peu importe, mais je pense qu'il nous faudrait beaucoup de temps pour le construire à partir de zéro. Vous avez déjà vu comment créer un en-tête à partir de zéro. À peu près les mêmes choses sont également appliquées pour le pied de page. Apportons simplement ce modèle pour le pied de page. Je vais juste vous montrer que les choses sont à peu près les mêmes, aucune différence en tant que telle, vous pouvez même modifier les éléments, vous avez d'autres éléments que vous pouvez ajouter. Ici, vous avez des éléments professionnels qu'il n'est pas logique d'ajouter dans l'en-tête et le pied de page, comme votre grille d'apparence, votre boucle, votre carrousol, tout ce qui se trouve sur le site et la seule partie de mise en page qui a du sens à ajouter ici même dans le pied de page ou même l' en-tête Ou peut-être disons simplement basique d'ailleurs. Si vous souhaitez ajouter des cartes Google Maps au pied de page, c' est une bonne pratique Je le recommande toujours si vous essayez d'attirer des clients locaux et des clients locaux et que vous souhaitez présenter votre espace de bureau ou votre espace professionnel. Vous pouvez simplement répertorier l'emplacement à l'aide de cet élément Google Maps situé dans votre pied de page Ce serait un très bel exemple à montrer. Vous pouvez à nouveau modifier l' arrière-plan, le style, la mise en page, le conteneur, la section avancée. Toutes ces choses sont à peu près les mêmes que celles que nous avons déjà vues dans la conférence précédente. J'espère que vous comprenez l'utilisation du pied de page. Vous pouvez même modifier les icônes sociales ici. Vous pouvez ajouter différentes icônes et différents liens sociaux. heure actuelle, il nous indique sur quelle pression vous pouvez changer l'icône. Disons simplement de quelle presse disons peut-être Instagram. Vous pouvez simplement le changer en Instagram. Vous pouvez insérer l'icône, coller le lien ou l'URL de votre page de profil Instagram, et vous pouvez également en ajuster la largeur. L'espacement entre Facebook et Twitter est dû au fait qu' il y a une icône sociale indéfinie ici Vous pouvez simplement les supprimer et vous constaterez que l'espacement entre toutes ces icônes est uniformément réparti Si vous souhaitez ajouter un espace supplémentaire entre eux, vous pouvez simplement accéder à la section de style. Vous pouvez en ajouter parmi eux. Vous pouvez ajouter une bordure d'espace et tous les différents types de fonctionnalités disponibles. Très bien, donc j'espère que tu as compris. Je vais juste publier pour le moment. J'ajouterai à condition que ce type de pied de page soit appliqué à l'ensemble du site Enregistrez et fermez. Regardons maintenant à nouveau la page d'erreur 44, nous allons passer au générateur de thèmes. C'était un raccourci rapide pour revenir au générateur de thèmes. Plutôt que d'accéder au tableau de bord We Press. Que signifie la page d'erreur 44 ? Donc, chaque fois que quelqu'un, disons simplement que vous avez terminé de créer l'intégralité de votre site Web sur votre système d'hébergement local et que vous souhaitez maintenant transférer votre site Web de votre système vers un service d'hébergement, n'est-ce pas ? Donc, en gros, vous essayez de rendre votre site Web accessible au public sur Internet, donc chaque fois que quelqu'un saisit votre URL suivie d'une barre oblique puis de la page Maintenant, si quelqu'un fait une faute de frappe dans l'URL, que devrait-il se passer lorsque l'utilisateur doit être redirigé vers, autoriserez-vous doit être redirigé vers, autoriserez-vous ou offrirez-vous ce genre d' expérience à votre utilisateur il affiche simplement une simple erreur Chrome quatre ou quatre, que la page, quelque chose comme ça, n'a pas été trouvée Ce ne sera pas une bonne expérience, non ? Il est préférable de simplement créer une page personnalisée qui montrera que l'utilisateur a commis une erreur de frappe dans votre erreur Ou peut-être assurez-vous simplement que vous cliquez sur la bonne URL et qu'elle réagira à la page sur laquelle vous souhaitez vous rendre. Nous pouvons simplement aller sur le bouton Ajouter un nouveau. Peut-être que ce n'est pas toujours une faute de frappe, il s'agit aussi parfois de liens brisés Supposons que vous ayez mis à jour un site Web il y a un mois et qu'il y ait une page, disons une page bloquée. Vous avez modifié l'URL de la page de blocage. En tant qu'administrateur, vous avez modifié l'URL du blog et votre page d'accueil comportait quelques boutons qui réagissaient à l'URL de cette page de blocage avec l'URL précédente que vous aviez et qui créait un lien rompu sur votre site Web. Dans ce scénario, 44 pages d'erreur peuvent s'avérer utiles. Et également en termes de référencement, Google, Bing et d'autres moteurs de recherche soutiennent et recommandent aux propriétaires de sites Web d' utiliser les 44 pages d'erreur pour offrir une expérience authentique à vos utilisateurs. Vous pouvez utiliser certains modèles prédéfinis. Vous pouvez même y apporter des modifications. Ou nous avons un modèle ici. Je peux juste insérer celui-ci. Jetez-y même un coup d'œil. Je peux simplement cliquer sur l'icône de loupe en forme de plus. Juste pour avoir un aperçu de ce à quoi ressemblerait cette page d'erreur 44, je peux simplement cliquer sur l'icône du dossier. Je peux utiliser celui-ci Insert. Voyons à quoi ça ressemble. C'est exactement ce que nous voulons montrer à nos utilisateurs. 44, la page que nous recherchons n'existe pas. Et de retour à la page d'accueil, ici même, vous aimeriez les relier à votre site Web. Vous pouvez donc simplement utiliser votre page d'accueil. Je peux donc simplement utiliser la page d'accueil. Ainsi, chaque fois que quelqu'un clique sur ce bouton, il sera redirigé vers votre page d'accueil. Bien en arrière-plan, vous pouvez ajouter une image. Vous pouvez peut-être même ajouter des animations, qui seront abordées plus tard dans ce cours, n'est-ce pas ? Ainsi, les animations et la couleur d' arrière-plan peuvent modifier le style de police et vous savez que la couleur des polices peut modifier le bord des boutons. Toutes ces choses dépendent de votre design et cohérence du thème que vous suivez. C'est donc à vous de décider de ce que vous pouvez faire. Je vous montre simplement quelles sont les fonctionnalités fournies par le générateur d'éléments ou de thèmes. J'espère donc que tu as compris. Dans la prochaine conférence, nous verrons comment utiliser les préchargeurs d'Elementor 12. Préchargeur et transitions de page - Animations enfin !: Voyons comment utiliser chargeurs de pages et les transitions Ici, dans The Element ou Pro, vous trouverez une fonctionnalité. Tout d'abord, nous devons accéder au tableau de bord. Une fois que vous avez accédé au tableau de bord de presse situé directement dans l' élément ou les paramètres, vous devez accéder à l'onglet des fonctionnalités et faire défiler la page vers le bas jusqu'à la partie où vous trouverez ce que l' on appelle une attente d'une seconde. C'est où ? C'était juste ici. Les transitions de page se trouvent ici. Par défaut, il serait activé , mais pour une raison quelconque, si vous ne voyez pas ce point vert ici, vous pouvez simplement cliquer sur Actif , vous pouvez simplement cliquer sur Actif faire défiler la page vers le bas et enregistrer les modifications. Maintenant, ce que cela vous permettra essentiellement de faire c'est que chaque fois que vous passez d'une page à l'autre, un écran de chargement s'affichera sur votre écran. Cela se produira parce que vous utilisez des chargeurs de pages et des transitions qui sont des fonctionnalités d' Elementor Pro Essayons de modifier notre site Web avec un élément. Ou ici, nous pouvons voir cette icône, non ? C'est ce que l'on appelle les paramètres du site. Nous pouvons cliquer ici. Maintenant, une fois que vous faites défiler la page vers le bas, vous trouverez une option appelée As page Transitions. Cliquons dessus. Et vous trouverez ici différentes options. Vous pouvez choisir ici l'arrière-plan classique ou fond dégradé pour le chargement de votre page. Chaque fois que vous cliquez sur une autre page, il y a une superposition d' arrière-plan qui peut être classique ou dégradée Donnons-lui un dégradé, nous utiliserons de la couleur blanche et l'autre de la couleur verte, nous utiliserons la couleur verte que nous avons ici Nous pouvons utiliser cet échantillonneur de couleurs. Vous pouvez voir que le compte-gouttes vient de sortir et il peut être placé là où nous aimerions récupérer le Bien, parfois ça ne marche pas, mais parfois ça marche. Ici, vous pouvez voir cette couleur verte apparaître. Bien, c'est la deuxième couleur. La couleur de la première couleur que nous avons, le blanc, est définie sur zéro et la seconde sur 200. Vous devez maintenant savoir comment fonctionne l'effet de dégradé , car nous en avons déjà parlé plus tôt. Ici, nous avons différents angles. Nous pouvons également le rendre linéaire ou radial, mais gardons-le linéaire. Nous avons maintenant l'animation d'entrée. Comment voulons-nous afficher l'animation, vous souhaitiez qu'elle soit fondue ou que vous souhaitiez qu'elle soit fondue vers le bas Fade in, c'est vrai. S'estompe vers le haut. Mais je pense que la décoloration serait vraiment belle. Faisons en sorte que cela continue de s'estomper. Vous pouvez même choisir une animation de sortie, comme un fondu vers le bas, comme ceci. Pour l'animation de sortie, nous pouvons simplement garder cette valeur nulle car l'animation ne durera pas éternellement. Si votre page se charge à peine, cela prendra environ une seconde ou deux. Il y a une certaine durée d'animation. Vous pouvez être aussi bref que, d'accord, restons-en là. 1 500 ou 15 50. Désormais, cette valeur est exprimée en millisecondes et non en secondes. Voici ce que vous avez. Vous pouvez prévisualiser votre transition de rythme en cliquant sur cette icône. Une fois que vous aurez prévisualisé l'animation, vous verrez que c'est ainsi que fonctionne l' animation. Vous pouvez même le déposer. Voyons comment cela fonctionne. Il se peut qu'il y ait un certain retard. Nous pouvons même y travailler. Nous pouvons cliquer sur Preloader Le préchargeur serait de plusieurs types. Cela signifie que si vous souhaitez afficher une animation au centre, vous pouvez voir qu'il y a un spinner qui tourne autour Permettez-moi simplement d'augmenter la taille du spinner pour qu'il soit visible pour vous Tout ce que vous pouvez voir, c' est une centrifugeuse. Vous pouvez changer le type d'animation en cercle pointillé comme ceci, comme des points rebondissants Vous pouvez même le changer en pulse, vous pouvez même le changer en spinners comme celui-ci, selon votre cas d'utilisation Gardons simplement ce cercle en pointillés. Je pense que le cercle serait vraiment beau. Nous pouvons faire en sorte que la taille soit d'environ 150. Je pense que 150 seraient bien. Restons-en à 150. C'est bon. Vous pouvez également changer la couleur de votre spinner en accédant à cette partie Vous pouvez changer la couleur du spinner. D'accord, mais j' aimerais que ça reste blanc. Vous pouvez ajouter un délai si vous le souhaitez, mais cela n'a aucun sens. Honnêtement, vous pouvez même définir la durée et faire en sorte que cela ne dure pas éternellement. Ici, vous avez le choix entre différentes options. Preloader, que vous souhaitiez une animation ou que vous souhaitiez afficher une icône Que se passe-t-il si j'utilise une icône ? Disons que j'ai téléchargé mes propres icônes ou que je vais utiliser mes propres bibliothèques. L'icône doit être au format SVG. Tout d'abord, vous pouvez même utiliser la police. Des icônes géniales. Elles sont vraiment géniales. Vous pouvez voir qu'il y a une centrifugeuse. Il existe également d'autres options. Que se passe-t-il si nous choisissons le spinner qui est celui par défaut ? Insérons-les ici. Vous pouvez ajouter une animation à cette icône. Si vous avez également votre icône personnalisée, vous pouvez la faire tourner. Tu pourrais même le faire rebondir, tu pourrais même le flasher Il y a tellement d'options différentes avec lesquelles vous pouvez jouer et voir ce qui fonctionne pour vous. Mais pour l'instant, je garderais cela sous forme d'animation si vous le souhaitez . Vous pouvez même utiliser une image. Voyons ce qui se passe si j'utilise cette icône. D'accord, j'ai cette icône, je peux choisir différentes animations au lieu d'utiliser un SVG Si vous n'avez qu'une image au format PNG, Web ou JP, vous pouvez l' utiliser comme préchargeur Ici, vous pouvez rebondir, vous pouvez le voir ici, voici comment cela peut apparaître Ici, vous pouvez placer le logo de votre site ou l'icône du site que vous avez utilisée. Restons-en à rien. Très bien, enregistrons les modifications. Je ne vais pas utiliser cette image, mais plutôt l' animation que nous avons ici. Gardez ça, nous y retournerons. Voyons si nous pouvons prévisualiser les modifications. Comme vous l'avez vu lorsque le site Web chargeait le préchargeur et que la transition apparaissait également en vert, a eu pour effet de passer de page mais l'animation a été préchargée J'espère que vous avez compris ces deux concepts et que vous avez pensé que ces deux options ne sont disponibles que pour l' élément ou pour la connexion professionnelle. Cela ne sera pas disponible pour la version gratuite. 13. Méga menu - C'est différent !: La prochaine fonctionnalité dont je vais discuter avec vous tous est le Mega Menu Builder. Revenons à notre section de modèles dans le générateur de thèmes de tableau de bord Wordpress. Il est important pour nous d'avoir un en-tête personnalisé sur notre site Web Wordpress. Nous allons simplement passer par ici, que nous avons construit précédemment. Nous allons modifier cette partie. Ici, nous utilisions le menu Wordpress comme élément. Maintenant, juste pour montrer comment fonctionne le méga menu Builder, nous allons devoir le supprimer pour le moment. Je vais le supprimer . Je vais ajouter un nouvel élément appelé simplement menu. OK, encore une chose. Je ne verrais pas le menu ici. Tout simplement parce que nous devrons retourner sur notre tableau de bord. Appuyez sur le tableau de bord ici. Je vais devoir retourner à Element ou à Settings. Dans les paramètres. Dans l'onglet Fonctionnalités Je vais faire défiler la page jusqu'à la partie où je peux trouver le menu. Désormais, par défaut, il ne sera pas activé. Il va falloir l'activer. Nous allons maintenant revenir à nos modèles Theme Builder. Nous allons sélectionner notre en-tête et le modifier. Maintenant, lorsque nous allons parcourir les différents éléments que nous avons, les différents blocs que nous avons, nous trouverons un menu, que vous pouvez voir ici. Supprimons simplement celui-ci. Cela n'a pas été enregistré plus tôt, c'est pourquoi le menu Wordpress était affiché ici. Nous allons simplement le placer à l'intérieur de notre conteneur à côté de ce logo. À l'heure actuelle, le texte est en noir. Nous devrons changer la couleur de police blanc et également la typographie en Poppins C'est Poppins que nous allons économiser. Bien. Pour en revenir au contenu ici, nous aurons une page d'accueil qui redirigera vers notre page Elementor 25 Nous aurons la section suivante qui sera une page à propos. Il sera lié à la page à propos, évidemment. Cherchons ce qui nous concerne. Le troisième élément que nous avons est la page de contact. Page de contact. Lions notre page de contact ici. Enfin, juste pour démontrer le fonctionnement de Mega Menu, nous allons créer un nouveau titre. Donnons-lui simplement quelque chose comme une équipe. Très bien, alors vous pouvez voir qu'il y a une bascule, un interrupteur juste ici qui indique le contenu déroulant Nous allons désactiver cette option, vous constaterez qu' un menu déroulant s' affiche à côté de l'équipe Maintenant, une chose que je peux remarquer ici, c'est que chaque fois que nous plaçons le curseur sur l'un des éléments du menu de la page, nous pouvons voir qu'au survol, la couleur du texte change légèrement. Nous ne voulons pas que cela se produise, car la police ne serait alors pas visible. Nous allons passer à ho, nous allons changer la couleur de police en active. Encore une fois, comment redevenir blanc pour les actifs. Nous allons le mettre en blanc. Pour les trois états, nous avons une bonne couleur blanche. Essayons maintenant d'en ajuster la largeur de manière à ce que les quatre contenus soient alignés dans le même espace. OK, en typographie elle-même, essayons simplement de faire en sorte que les choses fonctionnent autour de la taille de la police Environ 14 pixels nous aident ici, nous allons juste en garder 14 pixels. En cliquant sur Steam, vous pouvez le constater, nous pouvons créer un nouveau menu déroulant. C'est un méga menu, non ? Je peux cliquer sur l'icône plus. Peut contenir quatre colonnes, quatre conteneurs différents Dans chaque conteneur, nous pouvons mettre en place un élément, disons simplement une image, une boîte d'image. Je vais juste chercher une boîte à images. Je vais le placer ici. Je vais supprimer la partie description. n'est pas ce que nous voulons. Nous allons simplement utiliser titre et l'image ici même dans la bibliothèque. J'ai quatre images. Ils ont à peu près la même taille. Ou ce que nous pouvons faire d'autre, c'est au lieu d'utiliser la zone d'image, parce que la boîte e-mail aurait du sens, où nous voulons inclure une icône ou un logo et suivie d'un texte expliquant pourquoi cette icône est présente sur notre page Web. Dans notre cas, en ce moment, nous affichons ici tous les membres de l'équipe qui font partie de cette entreprise. inclure un élément d'image et serait tout à fait logique d'inclure un élément d'image et un élément de titre distinct. Je vais juste le supprimer pour le moment et passer à l'image de base. Je vais choisir l' image ici. Je vais également insérer une balise de titre juste en dessous de cette partie. D'accord ? Je peux donner un nom du genre « Bonjour John ». C'est bon. Note d'examen. C'est à peu près tout. C'est comme ça que je le fais. Et je vais simplement le dupliquer pour quatre autres articles. C'est bon. Quatre récipients. Et pour les autres conteneurs, je vais simplement les supprimer pour que l'espacement soit tel que vous puissiez constater que nous avions initialement quatre conteneurs Nous les avons dupliqués et quels que soient les conteneurs vides qui s'y trouvaient, nous les avons supprimés ici même sur l'image. Nous allons changer l'image rapidement. Encore une fois, nous devons changer l'image ici même. Nous allons remplacer l' image par le ciel. C'est bon. Nous pouvons également modifier le texte ou peut-être. OK. Je pense que la couleur de police est suffisante. Je pense que le noir irait bien avec un fond blanc. Mais si vous souhaitez modifier l'arrière-plan pour cela, vous pouvez même le faire. Pour cela, il me suffit de cliquer sur l'ensemble du conteneur avec. C'est bon. me suffit de cliquer sur la largeur du conteneur et de m'assurer que je fais partie de l'équipe. Si je clique sur l'équipe, vous pouvez constater qu'il s'agit du menu et que je peux également changer la couleur de fond. J'espère que tu as compris. Quelque chose de similaire peut être fait pour tous les différents conteneurs que nous avons. Vous pouvez même modifier les paramètres de la boîte flexible et ajouter certaines des choses que vous souhaitez, vous souhaitiez intégrer une image vidéo ou un fichier Ju, tout ce que vous souhaitez inclure ici Je pense que cette fonctionnalité peut être utile lorsque vous souhaitez que vos utilisateurs accèdent à de nombreux éléments, mais que vous ne pouvez tout simplement pas tous les répertorier dans une seule ligne principale de votre en-tête. En utilisant les fonctionnalités de Mega Menu, vous pouvez utiliser ce type de mise en page pour vous aider à réaliser ce que vous aviez réellement l' intention de faire. 14. Grille en boucle pour articles de blog et produits - Introduction à l'information dynamique: Bien, examinons une autre fonctionnalité appelée Loop Builder. Nous allons simplement cliquer sur Modifier avec Elementor. Dès que nous cliquons ici, vous trouverez différentes pièces avec lesquelles vous pourrez naviguer. Mais pour revenir à Theme Builder, nous allons cliquer sur Theme Builder. Vous trouverez différentes options ici. Cliquons sur Loop Item. Maintenant, lorsque l'élément en boucle s'avère utile, supposons que vous créiez un site Web de commerce électronique, que vous ayez plusieurs blogs, ou que vous ayez plusieurs produits et services et que vous souhaitiez afficher du contenu dynamique sous forme de carte sur la page d' accueil de votre site Web. Dans ce cas, un article en boucle pourrait s'avérer utile. Vous trouverez ici quelques modèles prédéfinis que vous pouvez utiliser, mais nous allons les créer à partir de zéro. Clôturons tout ça. Comme il s'agit d'une fonctionnalité professionnelle, vous aurez besoin d'un plug-in element ou pro. Très bien, vous avez ici une section pour ajouter votre grille de boucles. Cliquons sur l'élément « + ». Et cela vous donnera la possibilité de choisir Flex box ou grid. Choisissons donc Flexbox. Nous allons utiliser la direction verticale. Dès que nous cliquons sur l'élément Ajouter, vous verrez quelques options recommandées, à savoir le titre de la publication, le contenu de la publication, l'image en vedette et les informations de la publication. abord, laissez-moi vous montrer quelles autres fonctionnalités nous avons et combien blog différents nous avons créés jusqu'à présent. Ce que je vais faire, c'est retourner à la page d'accueil. Si je clique sur Blog One, voici à quoi ressemble le blog . Vous pouvez voir que nous avons le titre. Voici le contenu de l'extrait. Très bien, voici l'image. Maintenant, il ne s'agit pas d'une image vedette. Ce n'est qu'une image. Ici, nous avons le corps en bas. J'ai ajouté un tag à ce blog. Vous trouverez ici des icônes sociales que les utilisateurs peuvent partager et une section de commentaires. Vous pouvez même voir à quoi ressemble mon bloc deux. Ici, vous bloquez le contenu de l'image. Ici, vous avez à nouveau un hashtag et un commentaire laissés par quoi ? Commentateur de presse. Très bien, nous avons donc ces deux choses. Revenons maintenant à notre grille Lue. Je peux simplement placer mon image principale en premier. Que vous travailliez sur votre page produit ou que vous souhaitiez afficher et mettre en valeur les différents produits que vous vendez ou les différents articles que vous avez publiés en bloc. Vous devez avoir des cartes sur la page d'accueil pour que les utilisateurs puissent y accéder. À droite, l'image en vedette affichera l'image que vous avez définie pour ce bloc de publication en particulier. Très bien, en dessous, nous pouvons ajouter un titre à notre article en bloc. C'est comme un contenu dynamique. Toute la section, l' ensemble de la boîte flexible pour conteneurs que nous avons fabriquée jusqu'à présent, est dynamique. Cela signifie essentiellement qu'il remplira automatiquement l'image en vedette, le titre, en fonction du nombre de blocs, du nombre de produits, du nombre de pages que vous avez Et il remplira automatiquement les données qu'il contient. À l'heure actuelle, il vous suffit de le concevoir une seule fois et il sera reproduit pour plusieurs blocs de publications, articles, pages de produits, etc. Vous avez donc ici le titre du bloc. En dessous, nous pouvons ajouter un extrait de notre blog ou publier un extrait. Cela signifie essentiellement en quoi consiste le contenu. Ajoutons ensuite un autre élément qui est le contenu de l'article. Cela affichera l'intégralité du contenu que nous ne voulons pas. Ensuite, nous avons les informations relatives à la publication. Défilons simplement vers le bas jusqu' à la partie où nous pouvons placer les informations. Maintenant, une fois que vous aurez utilisé ces informations de publication, vous trouverez différentes options, auteur, date, heure et commentaires. Maintenant, le temps n'a plus de sens, nous allons simplement le supprimer. Nous allons simplement tenir à jour pour montrer que, d'accord, ce blog est le plus récent, le contenu est frais et il y a tellement de commentaires. Pour le moment, il n'y a aucun commentaire. Vous ne verrez donc aucun commentaire. Mais vous le trouverez exactement là où cela a été publié. Et par qui ? À l'heure actuelle, le nom d'utilisateur avec lequel je travaille est admin. Mais tu peux le remplacer par ce que tu as. Une autre chose dont nous avons besoin ici est un bouton. Ajoutons également un bouton. J'ai un bouton, je vais le placer ici. J'aimerais placer les informations du message juste en dessous du titre. Ici, vous pouvez voir qui l'a publié, quand exactement a-t-il été publié et combien de commentaires ont été laissés sur ce billet de bloc. Bien, nous pouvons centrer le contenu et en venir à cette partie. Tout d'abord, contournons d'abord l'image. L'image que nous avons ici, alignons son centre. Vous pouvez voir l' image en vedette ici. Il s'agit d'un contenu dynamique. Nous allons passer au style. Nous allons modifier la largeur de l'image à environ 50 %. Seule 50 % de la zone doit être recouverte par notre image. Quelle que soit la largeur dont nous disposons pour l'ensemble de notre conteneur. Cela ressemble à un élément d'image. À l'intérieur de l'élément image, nous avons l'image elle-même. Hein ? 50 % de la largeur de l'image. Bien. Une fois que nous aurons accédé à cet onglet avancé, vous trouverez différentes options à contourner, mais nous n'y sommes pas obligés. Nous avons ici le titre du bloc. Ici, vous pouvez aligner ce centre. Vous pouvez changer la typographie en poppins. Choisissons des poppins Pour cela également, nous pouvons les aligner au centre Nous pouvons modifier la taille et la couleur. De plus, au lieu de choisir le bleu comme couleur du texte, nous pouvons le transformer en noir et changer la typographie en poppins Laisse-moi juste le faire. C'est Poppins que je vais sélectionner Bien. Maintenant, pour en venir à cette partie, vous pouvez voir que l'exception pour ce bloc de publication en particulier est bien trop grande. Maintenant, il se peut que ce ne soit pas le même cas pour tous les autres articles du bloc. Ce que nous pouvons faire ici pour l'extrait, nous pouvons passer au style. Différentes options s'offrent à vous. Essayons d'abord de tracer la ligne centrale, que vous trouverez dans le contenu. Une fois que nous avons cliqué dessus, vous trouverez l'option Paramètres. Une fois que vous avez cliqué sur cet outil sur l'icône de la clé, vous pouvez voir que vous pouvez choisir la longueur de l'extrait Si vous maintenez cette valeur à dix, aucun des dix premiers mots ne sera affiché. Vous pouvez même le réduire à quelque chose comme cinq ou cinq pour ne pas afficher toutes les informations. Restons-en à 15. 15 serait suffisant. Nous avons sélectionné 15 mots. Il suffit d'afficher les 15 premiers mots. Très bien, maintenant nous avons le bouton. Centrons le bouton. Nous pouvons également modifier le texte, exemple en savoir plus. C'est bon. En savoir plus Nous pouvons le faire. Comme vous pouvez le constater, il existe différents types de boutons. Le bouton par défaut est de couleur grise Le bouton d'information est généralement de couleur bleue ou de couleur T bleu clair. Ensuite, vous avez le succès, qui est de couleur verte. Ensuite, vous avez un avertissement, qui est couleur jaune et jaune ou orange, et le danger est de couleur rouge. Mais gardons-la par défaut et nous changerons la couleur en vert environ, que nous avons enregistré comme couleur globale. Ici, vous avez la couleur du texte qui le gardera en blanc. Nous allons changer la couleur de l'arrière-plan de nos boutons. Nous l'avons enregistré en vert. C'est ce que nous utilisons en ce moment. Oui, c'est à peu près tout. Vous pouvez même en modifier la taille et le lier. Désormais, chaque fois que quelqu'un clique sur ce bouton, nous voulons que l'utilisateur soit redirigé vers le blockpost ou la page d'un produit en particulier Si nous saisissons réellement le lien manuellement , que se passera-t-il ? Quel que soit le nombre de blockposts que vous avez, quel que soit le nombre de produits que vous avez, ces articles seront affichés dans un format lubrifiant. Mais chaque fois que quelqu'un clique sur le bouton, il est redirigé vers le même lien car vous le codez en dur. Nous ne voulons pas que cela se produise. Nous voulons également que le lien soit dynamique. Nous pouvons simplement cliquer sur cette icône ici, qui est une balise dynamique. Et vous pouvez sélectionner l'URL de la publication. Sélectionnez simplement l'URL de la publication. Et chaque fois que quelqu'un clique dessus, post bloqué s'ouvre. Très bien, ici, nous pouvons sélectionner le conteneur entier. Nous pouvons y ajouter une bordure. Ce que vous pouvez voir, l' espacement autour de vous n'est pas très bon ce que nous pouvons faire Essayons d'abord d'ajouter une bordure à cela. Je vais juste passer à la mise en page. Je vais voir avec style. En fait, nous trouverons bordure par bordure, nous en trouverions une solide. Maintenons la largeur de la bordure dans toutes les directions à une. Gardons-le comme tel. Voyez à quoi cela ressemblerait. Voilà à quoi ça ressemble. Changeons la couleur de cette bordure en vert. Je vais y aller, je vais changer la couleur en vert. Je vais cliquer sur le globconl Green. Voici à quoi cela ressemble, mais augmentons également la largeur de, nous voulons que la bordure soit un peu grasse. Cliquez sur la bordure pour obtenir les deux. Voyons voir, deux fonctionnent très bien dans notre cas. Vous pouvez même ajouter un rayon de bordure pour arrondir les bords, mais je le garderais tel quel. Nous allons sélectionner la section entière. Dans cette section, ce que je veux c'est que nous voulons un certain espacement entre eux. Passons à Container Advanced. Vous trouverez ici la mise en page. Nous pouvons changer le, nous pouvons même changer la hauteur. Modifions-en la hauteur à environ 06:55 D' accord, 655 ça a l'air bien, mais 655 serait vraiment gros Réduisons-le à environ 16 h 16. Ça a l'air bien. Ici, en 610, nous pouvons justifier le centre de contenu et nous pouvons aligner le centre des éléments. D'accord, nous pouvons ajouter un écart entre eux. Ajoutons un écart entre les éléments à environ 30. Voilà à quoi ça ressemble. Je trouve que ça a l'air plutôt bien. Publions ceci. Pour en revenir à la page d'accueil, nous pouvons revenir à la page d' accueil ici. Vous pouvez simplement sélectionner ici sur la page d'accueil. Je peux simplement faire défiler la page vers le bas jusqu' à la partie où je veux où je veux utiliser cette grille de boucles particulière, je peux simplement ajouter ma grille de boucles ici. Je peux simplement cliquer sur, je vais simplement cliquer sur le modèle d'annonce. Ou vous savez quoi, je n'ai pas besoin de naviguer entre les différents modèles, me suffit de cliquer sur Plus Flex Box, Direction horizontale. Cela signifie aligner toutes les cartes dans le sens horizontal. Et ajoutons un élément qui sera une grille en boucle. Très bien, glissons et déposons notre grille de boucles ici. Nous devons maintenant donner un nom à ce Loukrid, mais nous n'avons pas donné de nom au Lukrid Passons au générateur de thèmes. Une fois que vous aurez accédé au générateur de thèmes, vous trouverez des éléments en boucle ici, vous trouverez des éléments en boucle. Nous devons maintenant en changer le nom. Modifions-le en cliquant sur le bouton d'aperçu. Vous trouverez une option permettant de le modifier. Ici, vous pouvez cliquer sur les trois points, puis sur Renommer. Ici, vous pouvez donner à cela quelque chose comme une carte de blog. C'est bon. Cliquez simplement sur Modifier. Vous pouvez voir que le nom de l'élément de boucle a été modifié. Fermons ça. Ici, nous pouvons commencer à taper un modèle de carte postale de blog. Vous constaterez que c'est ainsi que notre grille de boucles apparaît. Vous pouvez voir que c'est pour le premier blog, c'est pour le bloc deux. Publions-les et voyons comment ils apparaissent. Bien, une fois que j' aurai prévisualisé les modifications, voyons à quoi cela ressemble. Si je fais défiler la page vers le bas, tu peux simplement cliquer dessus. Le premier blog apparaîtra, mais il n'apparaîtra pas sur la page suivante. Il s'agit du premier blog. Si je clique sur ce bouton, vous pouvez voir le bloc deux apparaître. Très bien, j'espère que vous comprenez l'idée d'utiliser la grille à boucles et les éléments en boucle sur votre site Web Adress 15. CSS personnalisé pour fonctionnalités supplémentaires - Strictement pour les professionnels !: Les gars, je suis très enthousiaste à l'idée de cette conférence, car nous allons explorer une fonctionnalité vraiment intéressante d'Elementor Comme vous pouvez le voir, je suis sur la page d' accueil de mon site web. Nous avons ici la section héros utilisant la fonctionnalité CSS personnalisée. Nous allons ajouter une animation sympa en arrière-plan de notre section consacrée aux héros, et vous constaterez que certaines icônes seront animées d' un mouvement flottant. Revenons à nos paramètres Elementor. Ici, j'ai la section des héros. Désormais, chaque section, ou chaque élément, chaque fois que vous cliquez dessus, vous trouverez un onglet avancé. Maintenant, sous l'onglet avancé, vous trouverez une option CSS personnalisée. Ici, vous pouvez écrire votre propre code CSS personnalisé. Vous pouvez même l'écrire à l' aide de l'IA, quel élément ou quel élément fournit dans l'élément lui-même. Ici, vous pouvez ajouter le CSS. Maintenant, si vous avez suivi mon cours de développement Web complet, où nous avons une section dédiée à l'ensemble de la partie CSS, vous devez l'avoir appris. Mais même si vous ne savez toujours rien du CSS, vous pouvez rechercher sur Google quelques animations écrites en CSS. Ajoutons quelques images. Je vais ajouter une image à ce conteneur. Permettez-moi simplement de remplacer l'image ce bloc, l'icône du globe. Très bien, j' ai ici l'icône du globe. Je vais passer au style et je vais modifier la largeur de cette image. À l'heure actuelle, la taille de l' image est bien trop grande. Je vais juste le ramener à environ 18. Oui, je pense que 18 serait suffisant. Maintenant, encore une fois, nous allons passer à la section avancée. Nous passerons à la partie où nous avons notre position. Vous trouverez maintenant trois options : par défaut, absolue et fixe. Maintenant, qu'est-ce que cela signifie ? Par défaut, cela signifie essentiellement que partout où vous placez votre élément dans un conteneur particulier , une boîte flexible ou peut-être même une grille, l'élément restera dans ce conteneur lui-même. Quel que soit le défilement que vous effectuez en haut ou en bas, la position de l' élément ne changera pas. Mais si je change cela pour quelque chose comme un absolu, j'ai la flexibilité de contrôler où l'image peut être placée dans la section centrale. C'est ce que je peux faire avec Absolute. Et si j'ai réparé ? Permettez-moi également de vous montrer ce qui se passe si j'ai quelque chose comme réparé. Je peux simplement sélectionner cette image comme position fixe. Dans l'onglet avancé, je peux sélectionner la position à corriger. Et que se passe-t-il si je fais défiler la page vers le bas ? Vous pouvez voir que l'image reste en position fixe. C'est ce que signifie réellement votre position fixe ici, nous pouvons simplement la rétablir par défaut. Je vais également ajouter une autre image ici dans ce conteneur. Je vais choisir l'image comme icône. Nous allons passer au style, changer cela à environ 18. La largeur doit être d'environ 18. Ce serait suffisant. Nous changerons l'absolu une fois que nous l'aurons fait, je pense que la position de ces deux éléments est bonne. Maintenant, j'ai cet élément particulier dans la partie CSS personnalisée. Je vais coller ce code. Juste pour expliquer brièvement en quoi consiste cette animation, vous pouvez découvrir que nous avons créé une animation appelée float à l'aide de la balise keyframes. À l'intérieur, nous l' avons placé à 0 %. Cela signifie qu'au début de l'animation, vous devez effectuer la traduction vers la position à zéro pixel, lorsque la valeur est de 50 % à mi-chemin de l'animation, vous devez traduire par rapport à la position. Vous devez avoir appris les traductions et les transformations en mathématiques. Ce même concept est appliqué ici même dans l'animation CSS. Donc, en gros, vous transformez votre image et vous déplacez la position par rapport à l'axe X sur 20 pixels. Ainsi, à mi-chemin de l'animation, l'image est déplacée vers 20 pixels par rapport à l'axe X. Et il passe également à 50 pixels par rapport à l'axe Y. Et il tourne sur l'axe Z. Nous avons donc ici l'axe Y, ici nous avons l'axe X, et il y a aussi un axe Z, qui pointe droit vers la caméra. Il s'agit donc de l'axe z. Très bien, nous avons ici l'axe Z. Il est également rotatif, et il y a une mise à l'échelle, c' est-à-dire une échelle, une réduction ou un agrandissement. Si j'ai 0,7, cela signifie qu'il faut réduire la taille et s'assurer que vous réduisez la taille de l'image. 2.7 Nous avons ici les degrés, 13 degrés. Lorsque la transformation est terminée, traduisez le y vers, encore une fois par rapport à l'axe y, encore une fois par rapport à zéro pixel. Très bien, j'espère que nous avons compris le point. Nous sélectionnons le flotteur d'animation , que nous avons créé ici. Nous voulons que toute la durée de l'animation dure environ 20 secondes. Ici, nous avons un effet de mouvement différent qui peut être linéaire ou faciliter l'élimination. Cela signifie que le début et la fin de l'animation doivent être fluides. Nous voulons que cette animation fonctionne en boucle à l'infini. C'est ce que cela signifie essentiellement. Appliquons également les mêmes paramètres, le même CSS personnalisé à cet élément en particulier. Et une fois que je l'aurai sauvegardé, je vais vous montrer à quoi cela ressemblerait. Nous pouvons cliquer sur Afficher les modifications apportées à l' aperçu Vous constaterez que cette animation circule dans notre section Héros. Ça n'a pas l'air si beau ? Si nous faisons même défiler la page vers le bas, vous pouvez constater que l'animation se déroulera en arrière-plan. Comme la durée de l'animation est d'environ 20 secondes, vous verrez que l'animation se déroule très doucement, très lentement. Mais ça a l'air tellement cool et apaisant. J'espère que vous avez apprécié cette conférence. Vous pouvez vous amuser avec le CSS et créer quelques effets d' animation Ou peut-être même ajouter des dégradés de couleurs personnalisés ou modifier les paramètres de vos éléments existants sur votre site Web. 16. Formulaires popup pour collecter l'adresse e-mail des utilisateurs - Très important !: Très bien les gars, voyons comment nous pouvons utiliser le formulaire contextuel à l'aide de notre générateur de pages Elementor intégrer à notre site de presse Désormais, l'intégration et l'utilisation d' un formulaire contextuel sont très utiles dans les cas où vous collectez les adresses e-mail de vos visiteurs en échange d'un abonnement à votre newsletter gratuite ou d'une offre gratuite Il peut s'agir d'un livre électronique, d'un fichier téléchargeable, tout ce que vous essayez de partager avec votre public. Idéalement, vous souhaiteriez ajouter ce formulaire contextuel à votre article de blog. Mais si vous allez dans la section des articles ici, vous constaterez que nous n'avons pas possibilité de modifier avec Elementor Nous devrons créer un plockpost à l'aide notre élément ou plugin , puis vous pourrez les modifier Très bien, pour l'instant, je vais intégrer le formulaire contextuel dans notre page d'accueil elle-même. Mais avant même de le faire, nous devrons revenir à notre tableau de bord Tress ici Vous trouverez une option pour accéder aux modèles, et sous Modèles, vous trouverez une option de fenêtres contextuelles. Cliquons là-bas. Et ici, vous pouvez ajouter une nouvelle fenêtre contextuelle. Donnons un nom à quelque chose ici. Vous pouvez choisir entre les différents éléments que vous souhaitez créer. Donnons-lui quelque chose comme un bulletin d'information. Je peux dire quelque chose comme un bulletin d'information et je peux créer un modèle. Maintenant, évidemment, vous savez tous que chaque fois que nous parlons de modèles ou de fenêtres contextuelles ou quoi que ce soit lié à un générateur d'éléments ou de thèmes, il affichera certainement des modèles prédéfinis créés par Element ou Pro. Vous devrez connecter votre compte à Elementor pour utiliser ces modèles professionnels Nous allons le construire à partir de zéro. Fermons-le à partir de maintenant. L'utilisation de l'un des modèles n' est pas une mauvaise pratique. Je ne dis pas que nous n' allons pas le faire, nous n'allons pas le faire simplement parce que je veux que vous appreniez tous à partir de zéro. Ici, je peux simplement cliquer sur l'icône plus et choisir la mise en page Flexbox Maintenant, dans la mise en page Flexbox, vous trouverez différentes options de mise en page ici Je peux soit choisir ces options lorsque j'ai quatre conteneurs, soit les ajouter manuellement de manière à ce qu'ils s'empilent de manière à ce qu'ils apparaissent dans une section à quatre colonnes. Utilisons-le. Puisque nous l'avons, nous allons supprimer ce conteneur pour le moment. Qu'allons-nous faire ? Nous allons simplement augmenter la largeur de ce contenant en particulier de manière à ce qu'il corresponde à sa taille. La largeur de cette pièce correspond à cette pièce. Très bien, pour ça, qu'allons-nous faire ? Il suffit de sélectionner cette partie entière. Assurons-nous qu'il est réglé à l'horizontale, en particulier pour ce boîtier flexible. Nous voulons augmenter la largeur à peu près, soit 98 %. Nous pourrions même en faire 200, peu importe. Mais vous pouvez voir que la taille à partir d'ici et celle de votre sujet changent Si nous changeons cela à 200 %, gardons-le à 100 %. Pour le moment, je vais ajouter une image Bien entendu, nous aimerions vous présenter le contenu de ce bulletin d'information. Nous pouvons peut-être partager la couverture de la newsletter, mais pour le moment, je voudrais juste donner une image que j'ai déjà dans ma médiathèque. Je vais sélectionner cette image. Après avoir sélectionné cette option, je peux ajouter un titre ici. Que voulons-nous exactement que nos utilisateurs fassent et pourquoi devraient-ils réellement s'abonner à notre newsletter ? Nous pouvons vous dire quelque chose comme vous abonner à notre newsletter. Maintenant, vous pouvez le remplacer par télécharger le livre gratuit ou accéder à notre webinaire gratuit ou à quelque chose comme ça ici. Dans le conteneur suivant, je peux ajouter un formulaire. Cherchons le formulaire. Nous avons ici le formulaire qui est un élément pro. Si je peux simplement fermer et que je vais vous montrer sous Pro, vous trouverez également différentes options. Vous trouverez ici un pro, il suffit de le glisser-déposer ici. Vous trouverez différents champs, nom, message électronique. Maintenant, nous ne voulons pas tous les champs, nous cherchons simplement à obtenir l'adresse e-mail ou peut-être même à nommer des instances. Mais pour l'instant, nous voulons simplement recueillir l' adresse e-mail de nos visiteurs. Nous allons passer au formulaire ici. Vous pouvez voir le volet d'édition de l'élément ou vous constaterez que nous sommes en train modifier les champs du formulaire. Nous pouvons modifier le nom du formulaire si vous souhaitez ou vous pouvez même supprimer ou dupliquer les valeurs des champs. Clôturons le nom et le message. Et nous voulons juste un e-mail. Vous pouvez maintenant voir qu'à l'intérieur du champ de saisie, vous avez l' espace réservé sous forme de courrier électronique. Au-dessus de cela, vous avez également une étiquette sous forme de courrier électronique. Maintenant, cela n'a aucun sens d' ajouter la même chose encore et encore. Nous pouvons simplement désactiver l'étiquette afin que seul l'espace réservé indique clairement ce que l'utilisateur est censé saisir exactement . Juste ici. Très bien. Nous pouvons même changer la couleur du bouton en allant dans la section boutons. Vous pouvez modifier le nom du bouton au lieu d' utiliser le texte Soumettre. Nous pouvons dire « S'abonner ». Très bien, abonnez-vous. Dans cette partie, dans ce bouton lui-même, on passe aux boutons de style, on peut changer la couleur. Ce bouton, le bouton Soumettre, se trouve ici. Nous pouvons changer la couleur de fond en vert. La couleur globale que nous avons enregistrée. Bien, voici la mise en page de notre formulaire. Maintenant, là où nous voulons exactement que notre adresse e-mail soit envoyée, nous aurions besoin d' une sorte de logiciel d' intégration du marketing par e-mail. Il existe un tas d'options différentes comme votre chimpanzé de messagerie, vous aurez un kit de conversion, que j' utilise personnellement et je vais également vous montrer comment nous pouvons les intégrer à notre Juste ici, sous ce contenu de mise en page, vous allez collecter des soumissions. Ici, les soumissions seront enregistrées dans un élément ou dans des soumissions. Il y a une partie votre tableau de bord Wortress sous élément, ou vous trouverez des soumissions d'où vous pouvez voir dans le tableau de bord Wortress qui Mais si vous l'intégrez réellement à votre logiciel de marketing par e-mail, vous pouvez simplement vous rendre ici, vous le trouverez. Quel type d'actions souhaitez-vous ? Quel type de collecte de soumissions et d'e-mails ? Et une fois que vous avez cliqué sur cette icône en forme de plus, vous trouverez de nombreuses options à intégrer à votre campagne. Supposons que vous ayez une campagne dans Mailchimp ou dans un kit de conversion, ou que vous utilisiez Mail Alight, Slack, Discord Alors gardons-le sous le nom de convertkit. Et une fois que j'aurai ajouté ce kit de conversion, vous trouverez une option ici. Maintenant, la procédure pour Mail Chimp peut être un peu différente. Mais la seule raison pour laquelle j'opte pour kit de conversion est que tout le monde peut commencer avec le kit de conversion. Il est désormais totalement gratuit pour au moins 1 000 abonnements. Cela signifie que tant que vous n'aurez pas atteint 1 000 listes d'e-mails sur votre compte, aucun centime ne vous sera débité . Mais dans le cas de Mail Chimp, je pense que vous devez commencer avec 20$ par abonnement Juste ici, sous le kit de conversion, vous trouverez une option pour saisir votre APiK Choisissez personnalisé plutôt que par défaut. Et en dessous, nous devrons entrer notre APIK. Comment allons-nous récupérer notre APIK ? abord, nous devrons accéder à la page du kit de conversion une fois que vous serez connecté à notre kit de conversion, ou si vous avez créé un nouveau compte, vous pouvez simplement accéder à votre profil en haut à droite, puis cliquer sur Paramètres. Une fois que vous avez cliqué sur Paramètres, vous trouverez une option avancée ici et ici. Une fois que vous faites défiler la page vers le bas, vous trouverez un APIK. Copiez simplement ceci. Nous reviendrons sur notre site Web. Nous allons le coller ici et il vous donnera un tas d' options différentes parmi lesquelles choisir ce qu'il essaie exactement de nous dire. Donnons-lui juste le temps de le charger et de l'intégrer à un kit de conversion. Vous trouverez ici un tas de lead magnets et pages de destination que j'ai créés jusqu'à présent. Voici mes pages de destination. Maintenant, le kit de conversion dispose de deux options pour créer et développer votre liste d'abonnés. Tout d'abord, soit pour créer un nouveau formulaire, soit une page de destination. Les pages de destination sont celles où vous créez votre adresse e-mail. Il s'agit d'une page Web autonome hébergée par Convert Kit elle-même et utilisant votre propre domaine ou le domaine de ses kits de conversion Selon votre cas d'utilisation, vous pouvez créer une page de destination ou un formulaire si vous souhaitez créer un formulaire, il s'agit essentiellement d'une partie intégrée. La seule différence, la principale différence entre la page de destination et le formulaire est que le formulaire fait partie d'une page Web, alors que la page de destination est une page Web autonome elle-même Les fonctionnalités des deux appareils sont les mêmes. Ils essaient de collecter une adresse e-mail en échange d' un abonnement à un bulletin d'information ou à un événement, ou pour leur offrir un lead magnet. Mais nous pouvons simplement utiliser la forme. À partir de maintenant, je vais créer un formulaire et je peux simplement le garder sous forme modale, car nous voulons qu'il s'agisse d'une fenêtre contextuelle. Je peux choisir une solution aussi simple que celle-ci, Charlotte. Maintenant, je sais que ce cours ne porte pas sur le kit de conversion, mais simplement sur la création, juste dans le but de créer une liste d'e-mails et vous montrer comment intégrer notre Convertkit à un élément, ou je suis en train de créer ce formulaire factice. Très bien, ici je peux cliquer sur Publier. Maintenant, une fois que j'ai cliqué sur Publier, je vais voir plusieurs options différentes. Javascript, HTML, Partager, appuyez sur Bounce, etc. Mais pour l'instant, je n' accepterais aucune d'entre elles. OK, je vais juste économiser là-dessus, peut-être que je peux le changer en quelque chose comme, disons Elementor Pro Très bien, Elementor Pro, c'est tout. Je vais enregistrer ça. Je vais cliquer sur Publier. Et pour l'instant, je vais juste le garder sous l'onglet HTML une fois de retour ici, et si je le sélectionne, je devrais normalement le trouver ici, ici, qui est mon formulaire Elementor Pro Mais pour l'instant, laissez-moi simplement sélectionner l'aimant principal du développement Web. Une fois que j'ai sélectionné cette option, ce se passera essentiellement, c'est que quelles que soient les actions censées être entreprises par cette page de destination, cela signifie envoyer une sorte d'aimant ou les impliquer dans une lettre d'abonnement souple qui se fera à partir de ce formulaire contextuel en particulier. Ici, je collecte l'adresse e-mail à partir de ce champ de courrier électronique, et la page de destination elle-même nécessite également un prénom. Mais notre formulaire contextuel n'a pas de champ de nom. Tu peux ignorer ça pour le moment. Et vous pouvez même ajouter des tags. Les balises peuvent vous aider à classer toutes les listes d'e-mails d'où provient exactement le trafic ultérieurement Si vous souhaitez simplement envoyer le courrier, le courrier électronique diffusé à un groupe de personnes de votre liste complète, vous pouvez les cibler en les ajoutant à votre liste de tags. Je ne vais pas entrer dans les détails sur le kit de conversion et le fonctionnement de l'ensemble du logiciel de marketing par e-mail, mais j'espère que vous comprenez ce qu'il faut savoir sur le fait contourner ces différents logiciels de campagne par e-mail OK, ici, je l'ai construit et je vais le publier. Maintenant, une fois que j'ai cliqué sur Publier, vous trouverez différentes conditions et déclencheurs. Cela signifie essentiellement que, exactement, où souhaitez-vous afficher votre modèle ? Le formulaire contextuel que nous avons créé ? Sur quelle page souhaitez-vous le présenter ? Nous pouvons ajouter cela. Nous voulons simplement l'afficher sur une seule page. Quelle page en particulier ? Nous voulons le présenter sur notre page d'accueil, qui est la page Web principale. Très bien, je peux passer aux déclencheurs maintenant. déclencheur signifie essentiellement qu' à quel moment précis, quel événement exact l'utilisateur prend, nous voulons apparaître. Ce formulaire contextuel. Il y a un chargement de page Une fois que j'ai basculé, vous constaterez qu'après combien de secondes la page se charge, vous souhaitez apparaître. Ce formulaire contextuel. Si vous voulez faire défiler la page, cela signifie qu'une fois qu'une page a été recouverte, disons simplement que l'utilisateur a lu environ 50 % de l'ensemble du contenu de la page Web, alors il doit être abandonné. Ce formulaire contextuel. Tu peux le faire. Vous pouvez faire défiler l'écran sur un élément en particulier. Disons simplement que vous avez ajouté une classe à votre section. Ensuite, une fois que cette section de classe aura été glissée vers le haut, le formulaire contextuel s'affichera. Un clic se déclenche également, ce qui signifie que chaque fois que quelqu'un clique sur n'importe où sur la page Web, il est invité à utiliser le formulaire contextuel. Vous avez une période d'inactivité qui, une fois que l'utilisateur lit, disons simplement que vous avez un très long bloc de publication. Le contenu lui-même prendra environ une minute ou deux à lire par l'utilisateur. Après environ 15 à 20 secondes. Une fois que l'utilisateur est en train de lire sans même faire défiler la page ou effectuer aucune activité, ils apparaîtront. Ce formulaire contextuel. C'est bon. Vous avez une intention précise sur la page, ce qui signifie que chaque fois que quelqu'un ferme votre page Web, il sera affiché. Ce formulaire contextuel. Très bien, maintenant je peux juste le garder tel quel le chargement de la page après environ 10 secondes. Et j'ai aussi des règles avancées. Vous avez donc ici un aperçu des pages vues. Disons simplement que vous souhaitez présenter ce formulaire contextuel en particulier. Une fois qu'environ dix ou 15 utilisateurs ont consulté uniquement votre page Web, elle devrait apparaître en premier, vous recevez les dix à 15 trafic organique. Maintenant, une fois que vous avez obtenu du trafic, vous souhaitez afficher ce formulaire contextuel après X sessions. Cela signifie que les pages vues et sessions de page diffèrent en termes de, disons simplement que je suis un utilisateur, je consulte cette page Web. Le nombre de pages vues. D'accord ? Je vais revoir, je vais revisiter ce site Web Cela va donc compter comme des pages vues, mais la session correspond essentiellement au nombre de fois que je consulte votre page Web. D'accord, alors il y a un affichage jusqu'à x fois. Cela signifie n'afficher ce formulaire contextuel qu'une seule fois pour chaque utilisateur unique Vous pouvez même contourner cette règle lorsque vous arrivez d'une URL spécifique. Supposons que vous ayez chaque page Web, ou que chaque publication en bloc ait une URL. Vous souhaitez maintenant présenter ce formulaire contextuel uniquement au trafic redirigé depuis vos comptes de réseaux sociaux Supposons simplement que vous ayez collé le lien de votre page Web, de votre URL, sur votre page de biographie Facebook ou Instagram pendant une période limitée. Vous organisez comme un événement, veuillez vous inscrire à ma newsletter Vous aurez alors accès à une réduction exclusive pour le prochain lancement du produit. Ce lien est exclusivement partagé sur les stories Facebook et Instagram. Chaque fois que quelqu'un clique sur ces histoires via ces liens biographiques, ce formulaire contextuel s'affiche. Sinon, le trafic organique ou le trafic provenant de votre site Web à partir de recherche Google ou en tapant simplement votre URL dans le navigateur ne s'affichera pas dans votre formulaire contextuel. Ensuite, il y a un spectacle lorsque vous arrivez d'où. Exactement Disons simplement que vous voulez classer cela d'où Liens internes, liens externes Vous voulez même marquer cette page contextuelle. Page contextuelle à afficher aux utilisateurs provenant du recherche Chrome ou du moteur de recherche Google au lieu de Bing ou d'autres plateformes. Masquer pour les utilisateurs verrouillés. Disons simplement que vous offrez une réduction aux nouveaux utilisateurs. Ceux qui sont déjà verrouillés ne se présenteront pas. Dans cette fenêtre contextuelle, vous pouvez même basculer entre les appareils. Disons simplement qu'il s'agit d'une réduction exclusive valable pour vos appareils mobiles. Vous êtes le seul à pouvoir le faire Certains navigateurs comme Chrome, vous avez Edge, vous avez Brave et d'autres navigateurs, vous pouvez même planifier la date et l'heure. Supposons que vous organisiez un webinaire d'une durée limitée, qui se déroulera le week-end, pendant toute la semaine, du lundi au vendredi Vous souhaitez promouvoir votre page Web avec ce formulaire contextuel afin que les gens puissent s'inscrire à votre newsletter ou à votre e-mail, votre webinaire ici. Vous pouvez simplement basculer et choisir la date. Et ce n'est qu'alors que cette fenêtre contextuelle particulière sera affichée. Mais pour l'instant, je vais simplement enregistrer et fermer une fois que j'ai vu ceci, voyons ce qui se passe. OK, donc ce que je vais faire , c'est aller à la page d'accueil, compter jusqu'à 101, 234-567-8910, 234-567-8910 Vous pouvez voir ici que nous avons ce formulaire contextuel. Très bien, j'espère que vous comprenez maintenant, vous avez également une autre option. Il s'agit du formulaire que vous avez créé sur votre site de presse. Et si vous aviez créé un formulaire dans Convert Et lui-même, et que vous souhaitiez maintenant réutiliser exactement la même mise en page votre site Web Weress. Comment pouvez-vous vous y prendre ? Passons simplement à l' une des autres pages. Pour cela, il va falloir que je me rende dans le tableau de bord. Je vais créer une nouvelle page. D'accord ? Je vais créer une nouvelle page et je vais appeler quelque chose comme, disons simplement, disons simplement que nous allons avec un élément ou plus tard, gardons-la sous forme de fenêtre contextuelle de conversion, gardons-la sous forme de fenêtre contextuelle de conversion édition de formulaire avec Elementor Nous allons aller ici. La forme d'échalote que nous avons créée en utilisant le modèle prédéfini ici sous X tamal Nous allons copier l' intégralité du code X tamal ici dans notre Cela créera une boîte flexible avec cette direction, une boîte flexible avec la direction des particules à l'intérieur de l'élément d'ajout. Nous rechercherons le code HTML si vous ne savez pas s'il fait partie de la version pro ou gratuite. Vous trouverez également du HTML en version gratuite. De plus, nous pouvons simplement le faire glisser et le placer ici même dans ce code HTML. Il suffit de le coller. Une fois que vous l'avez collé, vous devez le publier. Une fois que vous avez publié et que vous avez consulté votre page, voyons si nous pouvons voir la page contextuelle. Nous ne pouvons pas voir cette page contextuelle. Je ne sais pas exactement pourquoi cela ne s'est pas produit. Idéalement, ça devrait. Passons aux paramètres. Voyons les autres paramètres que nous avons sur notre formulaire. D'accord ? Cela devrait donc être visible pour tous les appareils. OK, le délai est de 5 secondes, d'accord ? La seule raison pour laquelle nous n'avons pas pu voir , parce que le chronométrage était réglé sur 5 secondes, il suffit de le réduire à peut-être même trois. OK, sauvegardons ça à nouveau. Je vais cliquer sur Publier. Je vais copier le code tamoul. Vous pouvez maintenant voir que la fenêtre contextuelle est visible car elle a mis environ 5 secondes à apparaître. La fenêtre contextuelle, très bien, j'espère que vous comprenez le fait de créer une fenêtre contextuelle et de collecter les adresses e-mail de vos visiteurs. 17. Menu popup de la barre de navigation latérale - Vous ne voulez pas manquer !: Les gars, maintenant que nous avons découvert les fenêtres contextuelles, vous allez utiliser le même concept pour créer une barre de navigation latérale. Ici, sur notre page d'accueil, nous avons cette icône représentant des points de suspension dans l'en-tête Une fois que l'utilisateur a cliqué dessus, nous l'avons averti qu'il devrait être invité par une barre de navigation latérale venant de la bonne direction et sous forme d'animation avec une galerie d'images et un menu de page d'accueil. Très bien, pour cela, il va falloir revenir sur Tableau de bord. Une fois que nous y sommes allés dans la section des modèles, nous avons des fenêtres contextuelles. Allons-y. Nous ajouterons un nouveau modèle et nous donnerons le nom sous forme de barre de navigation latérale. Très bien, créons un modèle. Une fois que nous aurons fait cela , nous vous demanderons évidemment des modèles que nous n'utiliserons pas. Nous allons le construire à partir de zéro. Maintenant, la couche blanche que vous voyez ici au milieu de notre page Web, c'est là que votre fenêtre contextuelle apparaîtra. Mais ce n'est pas ce que nous voulons. Nous voulons que notre barre de navigation vienne de la bonne direction, du côté droit de l'écran, ici même. Lorsque tout est sélectionné, suffit de cliquer sur cette icône en forme de roue dentée qui apparaît dans les paramètres contextuels. Et nous allons changer la position de celui-ci, qu'il apparaisse dans le sens horizontal. Par rapport à la direction verticale, il doit apparaître dans la partie supérieure Très bien, et la largeur doit être réduite à quelque chose comme, disons 420. Je pense que 425 serait suffisant. Je pense que 425, c'est plus que suffisant. Maintenant, une fois que nous l' aurons fait, nous aurons également la hauteur adaptée à l'ensemble de l'écran afin qu' il occupe toute la hauteur. Et nous pouvons ajuster notre contenu et les éléments de la barre de navigation de ce site en particulier telle sorte qu'il apparaisse au centre. Et il y a suffisamment d'espace entre les éléments. Bien. Nous avons maintenant l'animation. De plus, lorsque l'animation d'entrée devrait être telle que, vous savez, glisser vers la droite, glisser vers l'intérieur par la droite et l'animation de sortie doit être glissée vers l'extérieur. Bien. Comme nous voulons accélérer un peu cette animation, nous allons déplacer le curseur vers la gauche et faire en sorte que l'animation soit d' environ 0,6 seconde. Très bien, cliquons sur l'annonce. Nous allons fabriquer la boîte flexible vers le bas. Un seul conteneur est ce dont nous avons besoin. Et nous allons ajouter un élément. Maintenant, à l'intérieur, la première chose que nous allons ajouter serait notre logo. Cherchons le logo du site. C'est ce que nous allons ajouter ici. Bien. Au fait, l' arrière-plan de tout cela, ensemble de notre barre de navigation de ce site devrait être de couleur noire dans le style. Je clique d'abord sur cette icône en forme de roue dentée qui apparaît dans les paramètres contextuels dans la section style, je vais passer au type d'arrière-plan, je vais sélectionner Classique. Je vais changer la couleur pour une teinte légèrement plus foncée. C'est bon. Oui, je pense que ce serait suffisant. Maintenant, une fois que nous l'avons fait, nous avons le logo de notre site. Nous voulons changer le logo de notre site de manière ce qu'il apparaisse au centre et sa largeur soit d' environ 45 %, ce serait bien. Bien. Maintenant, après cela, nous aimerions montrer notre galerie d'images. Avant cela, il serait bon ajouter un éditeur de texte. Ajoutons un éditeur de texte directement dans ce conteneur. Et voici le texte. Changons le style de police en poppins, famille de polices. Cherchons les poppins et la couleur du texte qui doit être blanche Alignement fin, encore une fois au centre. Maintenant, en dessous, nous allons ajouter un lien social. Nous allons ajouter un lien social. Nous voulons répertorier une liste d' icônes dont nous avons un logo Instagram et l'URL de notre profil Instagram. Bien. Nous avons de nouveau la liste. Nous voulons juste une liste. À l'heure actuelle, cette icône devrait être Instagram. Nous allons sélectionner Instagram activé, nous allons l'insérer. Une fois que nous l'aurons, le texte sera un. Je vais placer l' URL de ma page Instagram. Il s'agit de l'URL, ou plutôt du nom d'utilisateur. Et je peux même ajouter l'URL ici. Si je veux que l'icône soit cliquable, très bien. Je veux que cela soit conforme, non ? Il apparaît dans la même ligne et nous pouvons appliquer le style entre eux. Alignons-le au centre. Nous pouvons changer la couleur de l'icône pour qu'elle soit blanche. Nous pouvons également changer la couleur du texte pour qu'il soit blanc. Nous allons changer la couleur du texte pour qu'il soit blanc. Et nous pouvons également en augmenter la typographie et la taille. Je pense qu'environ 25 pixels seraient suffisants. Changons le style de police en poppins pour garantir la cohérence sur l'ensemble du site Web Encore une fois, la taille de l'icône doit être augmentée à 25 pixels. Bien, c'est suffisant. Ce que je n'ai pas besoin d'ajouter car il est évident que nous parlons de notre nom d'utilisateur. Bien, c'est suffisant. Maintenant, en dessous, nous allons ajouter une galerie, une galerie d'images. Cherchons donc essentiellement la galerie , la galerie et les groupes. Bien, ajoutons une galerie juste en dessous de cette partie. Bien, nous devons sélectionner un tas d'images. Ajoutons quelques images. Celui-ci, je maintiens ma touche de commande enfoncée. Systèmes Windows, vous devez maintenir votre touche de contrôle enfoncée. Bien. Ces deux images, je crois. Ajoutons également ces deux éléments. Bien, nous avons six images et nous allons les insérer dans cette galerie. Bien. Nous pouvons maintenant les commander au hasard ou une charge de travail pourrait être appliquée Le chargement différé signifie essentiellement que chaque fois que vous essayez de charger votre site Web, peu d'images seront chargées. Ensuite, la prochaine série d'images sera chargée si vous souhaitez que performances de votre site Web obtiennent un meilleur score. La mise en page doit maintenant être au format grille. Vous pouvez modifier le nombre de colonnes. À l'heure actuelle, nous avons quatre colonnes. Vous pouvez voir que la première colonne contient deux images, la deuxième colonne contient deux images, la colonne contient une seule image et la quatrième colonne contient également une image. Réduisons le nombre de colonnes à trois afin de pouvoir ajuster et ajuster les six images deux lignes et trois colonnes. Bien. Nous allons également modifier l' espacement entre ces images Je pense que 18 h 18 serait suffisant. Bien. Nous pouvons également en modifier le style de manière ce que le ratio passe de trois S à quatre à quatre S. Trois, la taille de l'image passerait 16 S à 9, c'est également ce que nous pouvons faire. Mais pour l'instant, restons-en à quatre S contre trois. Ce serait une bonne chose, je pense. Ou au début, il était trois heures du matin avant 2 h du matin , c'est ça ? Ouais. Résolution de l'image. Nous avons une miniature de taille moyenne. Je pense que pour cette taille particulière de barre de navigation, c'est la taille parfaite pour notre galerie Bien. Maintenant, en dessous, nous pouvons ajouter notre menu. Nous pouvons ajouter notre menu Tres ici. En dessous, nous pouvons ajouter notre menu Tres. Encore une fois, nous pouvons centrer le contenu. Nous pouvons changer la couleur du texte en blanc, très bien dans la typographie Je pourrais changer ça pour Poppins Fun family, non ? Il s'agit de notre barre de navigation droite ou latérale . En plus de cela, quelles autres choses pourraient être ajoutées. Il y a un tas de choses différentes que vous pouvez ajouter. Vous pouvez également ajouter quelques liens sociaux supplémentaires. Essayons de le faire. Peut être encadré ou listé juste en dessous de notre menu de presse. Permettez-moi simplement de supprimer d'autres éléments. Ou peut-être que je pourrais ajouter quelques articles supplémentaires et leur donner quelque chose comme Facebook et Twitter. Ou peut-être même lié d'ailleurs. Bien, je peux faire la même chose. Je peux donc simplement copier le style. Je peux le coller ici. Collez bien le style. Pour cela, je peux le remplacer par le logo Facebook. Appliquez les paramètres Facebook ici. Nous pouvons ajouter le nom de ma page Facebook en dessous. Je peux le remplacer par quelque chose comme, disons Linton. Très bien, encore une fois Linton, changez le texte comme suit et nous avons enfin terminé de créer notre barre de droite Maintenant, pour ce qui est de notre barre de navigation, nous voulons nous assurer que le contenu de l'ensemble du conteneur occupe toute la hauteur. Bien. La hauteur principale doit être de 100 V H. Cela signifie qu'elle occupe la hauteur du conteneur. La hauteur totale la fenêtre d' affichage est-elle correcte ? De plus, la direction est verticale et nous voulons centrer, aligner le contenu, aligner les éléments au centre et nous assurer qu'il y a un certain écart entre eux. Nous pouvons donc même ajouter un peu d'espace béant, augmenter la taille de l'écart Ça a l'air bien. Je pense qu'environ 35 serait suffisant, non ? C'est exactement ce que nous voulons lorsque nous publions ceci. Maintenant, il nous demandera différentes conditions, déclencheurs et règles que nous aimerions configurer pour l'affichage notre barre à couteaux sur le côté droit. Mais le but de l'utilisation cette barre de navigation est que chaque fois que l'utilisateur clique sur vos points de suspension dans l'en-tête, cette barre de navigation apparaisse Cela signifie que peu importe le nombre de pages de publication que vous créez, vous voulez que cette barre latérale apparaisse. C'est vrai. Pour l'instant, nous allons simplement enregistrer et fermer. Nous n'appliquerons aucune condition, aucun déclencheur ou aucune règle. Nous reviendrons sur notre site de presse dans la barre de navigation. Permettez-moi de passer à la page d'accueil. Je vais cliquer sur Modifier avec Elementor. Une fois que j'y serai, je modifierai mon en-tête que nous avons créé. Bien, laisse-moi juste t'accorder un moment. Ici, dans l'en-tête, je vais modifier mon en-tête. Ici, dans l'en-tête, j'ai les trois icônes. Je peux cliquer sur le lien. Dans l'option de balise dynamique, j'ai la possibilité de choisir une fenêtre contextuelle. Vous pouvez le voir dans la fenêtre contextuelle « Actions que j'ai ». Je peux sélectionner à nouveau la fenêtre contextuelle. Je dois cliquer sur les paramètres de la fenêtre contextuelle et maintenant elle apparaîtra. Que je veuille choisir toutes les fenêtres contextuelles ou seulement une fenêtre contextuelle spécifique, nous voulons évidemment juste une barre à couteaux latérale spécifique. Nous allons donc simplement rechercher un modèle de barre latérale et c'est ce que nous allons enregistrer. Publions ceci et nous verrons notre page Web lorsque je la consulterai et lorsque je cliquerai dessus, vous pourrez voir une barre de couteau latérale apparaître. Si je clique n'importe où en dehors de la barre de navigation, elle disparaît. J'espère que vous appréciez ce cours jusqu'à présent. Si vous avez des questions, vous pouvez me les poser dans la section À l' intérieur et je ferai de mon mieux pour répondre à chacune de vos questions. 18. Post Element to Design Blog / Posts de produits: Examinons un autre élément ou élément pro, qui sera l'élément post. Mais avant d'entrer dans le vif du sujet, je voudrais simplement souligner que j'ai ajouté quelques articles supplémentaires ici. Comme vous pouvez le constater, nous y avons jeté un œil. Correct. Ici, vous pouvez voir que d'autres messages sont en cours de rédaction. Maintenant, l'image du premier bloc n' est pas proportionnée par rapport aux autres car le ratio d'image et les dimensions de l'image sont différents de ceux des autres cartes. De plus, vous pouvez constater que la hauteur de chaque carte est un peu différente simplement parce que nous avons un titre différent. Nous pouvons régler la hauteur. Nous pouvons fixer la hauteur. Cela signifie qu'il ne doit pas dépasser cette hauteur particulière. La taille du titre peut être réduite à environ 35 ou 40 pixels, nous pouvons contourner le problème. Vous remarquerez peut-être que nous avions également le bloc deux, mais qu'il n'est pas peuplé ici. Pourquoi ça, maintenant ? Modifions-le simplement avec Elementor Je vais juste cliquer ici, d'ailleurs, dans mon menu également, laissez-moi juste vous montrer ce que je veux dire. Je peux juste prévisualiser les modifications ici. Chaque fois que je fais le tour du bloc, vous trouverez le bloc un, le bloc deux dans tous les autres blocs que j'ai ajoutés. Maintenant que cela n'a pas été rempli automatiquement, j'ai dû revenir à mon tableau de bord, aux menus d'apparence. Je suis allée aux articles, j'ai ajouté tout ce qui était censé être ajouté dans mon menu. Puis je l'ai glissé et déposé, dessous de la page du blog C'est devenu un sous-élément de ma page de blog. Et j'ai enregistré le menu. Correct. Nous pouvons également voir la fenêtre contextuelle que nous avons créée précédemment. Passons à notre élément ou à nos paramètres. Juste ici. Nous allons sélectionner votre modèle pour la grille en boucle. Cliquons sur, tout d'abord, permettez-moi de sauvegarder à nouveau. Très bien, nous avons cette grille en boucle, laissez-moi simplement sélectionner n'importe laquelle de ces cartes, nous pouvons simplement sélectionner n'importe laquelle de ces cartes. OK, juste ici, dans cet espace, l'espace vide entre ces deux cartes. Et vous pouvez voir que nous avons sélectionné la grille à boucles. Très bien, maintenant vous verrez qu'il y a trois colonnes, c'est pourquoi nous pouvons voir apparaître six blocs. Mais vous pouvez constater que seuls six éléments par page peuvent être remplis, vous pouvez donc les augmenter ou peut-être même les diminuer. Si je réduis cela à seulement trois cartes qui devraient être affichées sur cette page d'accueil en particulier, vous pouvez également ajouter de la pagination La pagination signifie essentiellement que vous pouvez ajouter des chiffres. En bas à droite, vous avez une à trois options au lieu de chiffres. Vous pouvez même le remplacer par le précédent ou le suivant. Ainsi, vous pouvez même ajouter des chiffres plus le précédent, suivant, le précédent, le 123, le suivant, comme ceci, et il y a une limite de pages. Vous pouvez également augmenter la limite de pages si vous le souhaitez. Vous pouvez modifier le texte de l'étiquette précédente et de l'étiquette suivante. De plus, comme en arrière et en avant, vous pouvez charger en cliquant, ce qui signifie essentiellement que vous pouvez obtenir un bouton, vous pouvez personnaliser le bouton, et chaque fois que quelqu'un clique sur le bouton, le spinner est chargé et les autres fiches de blog sont Ou vous pourriez avoir un défilement infrarouge. Le défilement infrarouge serait meilleur scénario d'utilisation du défilement infini lorsque vous auriez une page produit séparée Cette page produit affiche tous les produits liés à l'article électronique. Supposons simplement que vous ayez 15 ou 20 articles électroniques à afficher sur cette page. Là-bas, vous pouvez utiliser votre crewel d' inférence, mais pas sur la page d'accueil Ce n'est pas une bonne pratique pour le moment. Conservons simplement ce bouton As pour pouvoir utiliser Load More. Vous pouvez même modifier l'icône si vous le souhaitez. le moment, nous n'allons utiliser aucun de ces articles. Vous pouvez modifier l'espacement, l'aligner, personnaliser le bouton, et il existe un tas de choses avec lesquelles vous pouvez également jouer Comme ici, vous avez la même taille. Donc, une fois que j'ai activé cette option, vous constaterez que toutes les hauteurs des cartes sont correctement réglées sur la même Ensuite, vous avez également une requête. Cela signifie essentiellement que quelle source vous voulez que ce soit, que vous souhaitiez afficher toutes les pages de publication, pages de doublure, tout ce que vous souhaitez sélectionner, vous pouvez le faire. Comment souhaitez-vous exactement les classer par ordre alphabétique ? Voulez-vous qu'il soit classé par titre, nombre de commentaires, par blog publié le plus récemment ? Vous pouvez le configurer, faire un tas de choses différentes. OK, donc je vais juste publier ceci. Et la seule raison pour laquelle j'ai abordé à nouveau le sujet de la grille en boucle est que la section des articles, que nous allons aborder dans cette conférence, est similaire à la grille en boucle. Loop Grid est un élément supplémentaire. Quel élément ? Ou ajouté récemment, mais auparavant nous avions un élément de publication. Lorsque je clique sur Ajouter un élément, vous trouverez dans la section pro que vous trouverez Post. Que se passe-t-il si j'ajoute Post ? Laisse-moi juste cliquer dessus. Je vais cliquer sur Flex Box et je vais choisir cette direction horizontale. Maintenant, si je fais glisser et déposer l'élément post directement dans ce conteneur. Voyons ce qui va se passer. Une fois que je l'aurai fait. Vous constaterez que tous les messages sont remplis automatiquement. Maintenant, la disposition du design est un peu différente de celle que nous avons définie dans la grille en boucle. Parce que nous avons créé une grille en boucle à partir de zéro, non ? Il a été entièrement conçu sur mesure pour le réseau en boucle. Mais pour ces éléments de la partie Post, vous pouvez voir ici qu' en utilisant certains paramètres par défaut, vous pouvez changer de tour. Ce n'est pas que vous deviez vous en tenir aux paramètres de conception par défaut, comme ici pour le titre. Vous pouvez voir que vous pouvez également changer la couleur du titre. En accédant à la bande de style, vous trouverez du contenu dans le contenu, vous pouvez changer la couleur du titre au lieu du bleu, vous pouvez la transformer en vert blanc. Vous pouvez modifier la typographie pour, disons simplement, des poppins, les mêmes paramètres La famille de polices sera appliquée à chaque carte, d'accord ? Vous pouvez même modifier le contour du texte si vous le souhaitez. Vous pouvez ajouter des métadonnées. Maintenant, que signifient les métadonnées ici ? La date, les commentaires, tout cela sont des métadonnées. accord, vous avez donc un extrait, ce qui signifie essentiellement que vous devez le définir manuellement pendant que vous créez un article. Il partage essentiellement le sujet exact de votre message. C'est donc comme une brève description de votre publication, c'est un extrait du contenu, puis vous en avez lu plus. Cette section en savoir plus ressemble à un lien, non à un bouton. Vous pouvez changer la couleur, vous pouvez modifier à nouveau la typographie, je peux définir cela sur poppins D'accord, essayons de créer des fenêtres contextuelles pour chaque élément de texte afin maintenir la cohérence l' ensemble du site Web Ici aussi, je vais bien préparer ces poppins. Nous avons donc modifié le contenu ici. Venons-en à la partie image. Vous pouvez ajouter un rayon de bordure si vous le souhaitez. Vous pouvez donner un peu d'espacement si vous le souhaitez, vous pouvez ajouter des filtres CSS J'en ai parlé très tôt dans le cours : les filtres CSS vous permettent de régler manuellement le flou, la luminosité, contraste et d'autres effets pour modifier votre image au lieu d'utiliser un autre logiciel de retouche d' image. Très bien, en ce qui concerne la partie boîte, cela signifie que vous pouvez ajouter une bordure à chaque carte. Si j'essaie d'ajouter de la largeur de la bordure, vous constaterez qu'elle se forme comme une bordure. Je peux le rendre un peu plus foncé pour qu'il soit un peu plus gros. Je peux même ajouter un rayon de bordure, quelque chose comme ça. Je peux ajouter un peu de rembourrage. De toute évidence, le contenu colle, nous pouvons donc ajouter un rayon de bordure et un rembourrage pour la boîte ici Je peux ajouter peut-être environ, disons dix. C'est ainsi que vous le trouverez dans toutes les directions. Bien. Mais si vous ne voulez pas de rembourrage pour l'ensemble de la pièce et que vous souhaitez simplement rembourrer le contenu, vous pouvez même le faire Voyons comment cela fonctionne. Si j'en ajoute dix, vous constaterez que l'image reste telle qu'elle est. Mais le contenu , à savoir votre titre, votre extrait, vos métadonnées votre extrait, vos métadonnées et vos informations supplémentaires, est légèrement arrondi dans les quatre directions Vous avez également différents effets qui se produiront sur Hoover et en mode normal. Vous avez également Box Shadow. Si je clique sur la case Ombre, vous constaterez qu' il y a une ombre derrière les cartes qui serait belle. Ensuite, vous pouvez également en modifier la couleur de fond. Si je change cette couleur d'arrière-plan, vous constaterez que la couleur d' arrière-plan du contenu change. J'ai juste effacé cela parce que je ne veux pas, vous pouvez même y donner une couleur de bordure. Je peux définir la couleur verte globale. Cela aurait l'air bien à mon avis, mais ce n'est pas génial. Ramenons simplement cela à la valeur par défaut. Je peux simplement cliquer sur la couleur et je vais cliquer sur l'icône d'actualisation. Bien, voilà à quoi ça ressemble. Pour en revenir à la partie mise en page, vous trouverez des espaces entre les colonnes. Il est actuellement réglé sur 30 pixels. Si j'augmente ce chiffre, vous constaterez que plus j'augmente l' écart entre mes cartes, plus mon contenu diminue. Restons-en à 30. Maintenant, il y a également un certain écart entre les lignes. Nous avons donc ici trois colonnes et deux lignes, n'est-ce pas ? Ici, vous pouvez même augmenter l'écart entre les lignes si vous le souhaitez. Donc, restons-en à 50 pixels. Vous pouvez même aligner le contenu que vous avez ici. Vous pouvez donc soit une ligne centrale, une ligne à gauche, soit même une ligne droite. Mais je pense que la ligne médiane serait belle. OK, pour en venir à la partie contenu, vous avez différentes mises en page de skin Format de carte classique. Si je change cela au format carte, vous pouvez voir que cela semble vraiment très beau. Vous avez ici différentes catégories. Maintenant, les catégories sont quelque chose que j'ai défini lors de la création de Post. Permettez-moi de vous ramener au tableau de bord de Tress, ici même dans la section Publication Je vais consulter tous les articles, et vous trouverez ici les catégories. J'ai donc créé ici quelques blocs qui font partie des catégories les plus populaires et deux blocs qui font partie de cette catégorie. D'accord ? Et j'ai fourni quelques hashtags afin que, lorsque les internautes effectuent des recherches dans différents blocs, ils puissent rechercher le contenu et trouver cet élément de bloc en particulier. Bien. Pour les classer, il vous suffit de cliquer sur l'un des articles en bloc, de cliquer sur Ert, ici même dans le volet d'édition Vous pouvez attribuer un tag et vous pouvez même les classer en ajoutant une nouvelle catégorie. J'espère que vous avez compris le point concernant les catégories et les tags. Vous pouvez ajouter plusieurs tags ou même plusieurs catégories. Mais ce que les catégories et les tags vous permettent essentiellement de faire, c'est que plus tard , disons simplement que vous avez créé une sorte de carte-bloc que vous pouvez voir ici sur la page Web. Et en haut, vous trouverez des catégories. Donc, en gros, ce bloc appartient à la catégorie des cours, mais cette catégorie de cours comprend plusieurs cours différents, allant du système d'exploitation au développement Web, en passant par l'interface utilisateur, les sections de données et les algorithmes, etc. allant du système d'exploitation au développement Web, par l'interface utilisateur, les sections de données et les algorithmes Ainsi, tous ces cours individuels comporteront une sorte de hashtag lié au contenu et au titre concernés, afin qu'il soit plus facile, en termes de moteur de recherche, de trouver votre contenu afin que les visiteurs puissent accéder à votre contenu afin que votre page Web. J'espère que tu as compris. Maintenant, nous avons également une autre chose appelée contenu complet. Cela signifie que l'intégralité des publications du bloc sera visible, ce que nous ne voulons évidemment pas. Gardons cela sous forme de cartes, car la carte a l'air unique. C'est différent de Classic car Classic ressemble beaucoup à ce que nous avons créé dans le Loop Grid. D'accord, ici vous pouvez même définir le nombre de colonnes. Désormais, quelles que soient les colonnes que vous allez définir, seront appliquées au mode bureau que si vous souhaitez ne conserver qu'une seule colonne pour votre tablette mobile. Vous pouvez même changer en cliquant simplement sur ce mode tablette et vous pouvez le régler sur un. Si je fais défiler la page vers le bas, vous verrez qu' une seule colonne est présentée. Si je change ces deux, disons simplement trois, alors ça n'a pas vraiment l'air génial. Voyons si cela fonctionne en deux. En mode bureau, cela semble bien si nous avons deux colonnes. Voyons ce qui se passe si nous avons le mode mobile. Évidemment, nous aimerions n'avoir qu'une seule carte car il n'y a pas beaucoup de largeur pour contenir tout le contenu. Ensuite, vous avez également la deuxième option : afficher tous les articles par page. C'est ce dont nous avons discuté plus tôt. Vous pouvez afficher l'image si vous souhaitez. Vous pouvez même activer cette option Voyons ce qui se passe si vous sélectionnez des machines. Si je clique dessus, tu peux voir ce qui se passe. Ce qui se passe essentiellement, c'est que toute la bordure de l'image apparaît également. Si j'active cette option, vous constaterez d' abord que c'est l'image, laissez-moi simplement la ramener en mode bureau Je vais cliquer à nouveau sur les machines, et voyons ce qui se passe. Vous constaterez que l'image entière apparaît et que la hauteur n'est pas ajustée de la même manière. C'est ce que signifient réellement les machines. Vous pouvez définir la taille de l'image, vous souhaitez la définir à la taille de la miniature, vous pouvez le faire en tant que pleine, puis l' image complète sera définie puis l' image complète sera Mais gardons-le comme moyen, comme c' était le cas au départ. Je pense qu'il était de taille moyenne. Si je ne me trompe pas, je pense que les moyennes ou moyennes tailles étaient quelque chose qui a été appliqué auparavant. Restons donc moyens. Il existe également un ratio d'image. En déplaçant le curseur, vous constaterez que l'image est zoomée ou dézoomée en fonction de l'endroit où vous placez le curseur ou le curseur Très bien pour moi, je pense qu'environ 0,56 serait une bonne idée. Bien, c'est 0,56 ici. Vous pouvez même passer d'un titre à autre si vous souhaitez afficher le titre, vous le pouvez Mais c'est évidemment une bonne pratique d'inclure le titre. Si vous essayez de mettre en valeur le sujet de votre blogue, vous pouvez modifier le titre. Vous pouvez modifier le tag estimable de votre titre. Idéalement, c'est une bonne pratique d'utiliser deux balises pour le titre de votre bloc de publication. Nous allons donc nous en tenir à deux. Si vous souhaitez inclure un extrait, vous le pouvez. Vous avez également la longueur de l'extrait. Et évidemment, cela représente le nombre de mots et non le nombre de caractères. Au lieu de 100 mots, nous pourrions simplement nous en tenir à 25 mots. Seuls les 25 premiers mots seront affichés. Bien. Ensuite, vous avez également postulé pour un extrait personnalisé. Donc, si vous avez créé l'intégralité de votre extrait personnalisé lors de la création d'un bloc de publication, il en sera de même. Les paramètres seront également appliqués là-bas. Bien, et vous avez ici des métadonnées. À présent, dans les métadonnées, vous découvrirez que la date et les commentaires sont initialement représentés. Hein ? Si vous souhaitez ajouter des données supplémentaires exemple qui a publié cet article en particulier, à quelle heure et quand exactement a-t-il été modifié ? Cela a-t-il même été mis à jour ou non ? Vous pouvez même ajouter ces éléments. Vous pouvez même ajouter un séparateur entre ces métadonnées en choisissant l'icône, en plaçant un point ou peut-être même le séparateur. Vous pouvez l'ajouter, vous aurez alors l'option en savoir plus. Vous pouvez les activer, vous avez lu plus de texte ou vous pouvez le remplacer par autre chose. Vous avez également des boutons. Si vous le faites, voyez ce qui se passe. Il aligne automatiquement les boutons si vous les avez ensuite ouverts dans une nouvelle fenêtre. Donc, chaque fois que quelqu'un clique sur le lien, souhaitez-vous que le message bloqué s'ouvre dans un nouvel onglet ? Nous voulons évidemment que cela se produise. Sinon, que se passera-t-il ? Que ce soit Google ou tout autre moteur de recherche, nous reconnaîtrons que chaque fois qu' un visiteur arrive sur votre page d'accueil, passe rapidement sur une nouvelle page. Cela augmentera donc votre taux de rebond et réduira votre indexation en termes de classement des recherches Vous avez donc également des catégories ici. Dans ce badge, vous pouvez trouver des catégories plutôt que des catégories Voulez-vous que ce soit des hashtags ? Ici, vous pouvez même utiliser des hashtags ou des catégories. Ici, vous avez une option d'avatar. Si c'est le cas, utilisez l'un de vos Aviatar. Ce que je veux dire ici, vous découvrirez que c'est mon profil, c'est Aviatar Vous pouvez modifier le profil. Et vous pouvez simplement choisir n'importe lequel de vos avatars si vous souhaitez l'afficher ici. Et vous pouvez simplement les afficher en sélectionnant ceci. Pour ce qui est de la partie requête, vous avez différentes options pour les organiser, comme nous l'avons vu précédemment dans Luke Grid. Vous pouvez ajouter de la pagination si vous le souhaitez. Essentiellement, l'élément post est très similaire à ce que nous avons vu dans Luke Grid. Ce n'est pas très différent , mais la seule différence est que vous n'avez pas besoin de créer quoi que ce soit à partir de zéro. De nombreux éléments sont prédéfinis et vous pouvez modifier ces paramètres pour commencer à utiliser la section de votre carte postale à inclure dans votre page d'accueil. 19. Élément de portfolio pour présenter vos produits / blogs: Très bien, voyons comment nous pouvons utiliser l' élément portfolio qui fait partie de l'élément ou du plugin pro. Ici, vous pouvez voir le portfolio. Qu'est-ce que cela signifie ? J'ai ce site web juste ici. Vous pouvez voir que cela utilise l'élément portfolio. Si je clique sur mode, vous verrez que seule celle-ci apparaît. Si je clique sur un bijou, ce type d'image apparaît. Il y a un certain rayon de démarcation. Lorsque nous survolons le curseur, vous constaterez que le texte fond vert et ces deux icônes apparaissent avec un effet de survol Ici, nous avons des filtres, essayons de créer quelque chose comme ça. Je vais créer une nouvelle section. Nous garderons la direction verticale de la boîte flexible. Ajoutons l'élément de portefeuille. Dès que j'ajoute un élément de portfolio, il fait simplement apparaître les images de mes publications ici même dans la requête. Vous constaterez qu'il est commandé par date. La dernière publication était affichée ici, triée par ordre décroissant Dans la partie mise en page, vous trouverez quel type de résolution d'image souhaitez-vous utiliser ? Combien de publications par page souhaitez-vous voir ? Restons-en à trois. Nous voulons trois colonnes, ce serait bien. Le ratio d'image peut également être ajusté. Si je passe le curseur, vous pouvez constater que le titre du bloc de publication apparaît maintenant dans la partie requête, vous trouverez la source Voulez-vous afficher tous les articles ? Voulez-vous afficher toutes les pages ? Voulez-vous afficher les pages de destination, la sélection manuelle, la requête en cours ou tout ce qui s'y rapporte ? Que se passe-t-il lorsque vous ajoutez une requête en cours ou quelque chose comme ça ? Vous devrez ajouter l'identifiant. Nous aborderons l'identification et les cours plus tard. Mais pour l'instant, gardons-le sous forme de post. Toutes les publications que nous avons, toutes les images en vedette pour cette publication apparaîtront ici, nous pouvons même les exclure si nous voulons simplement montrer de la publication au lieu de faire ressortir tout le contenu de la publication. Très bien, ici vous pouvez les acheter ou les exclure. Évitez même les doublons si nous le voulons. Ici, vous pouvez accéder à la barre de filtres, et si vous souhaitez afficher les filtres, vous pouvez même les afficher ici. Lorsque vous cliquez sur Afficher, deux options s'offrent à vous choisir entre des catégories ou des tags. Voyons si nous avons des catégories, vous trouverez des cours. Nous devrions évidemment envisager une autre option , à savoir la mafia du net. Mais gardons-le car tu trouveras différents tags. Maintenant, l'option n'apparaît que parce que nous avons conservé que seuls trois articles par page devraient être affichés. Il en va de même, nous avons des catégories. Idéalement, nous savons que nous avons créé deux catégories, n'est-ce pas ? Si je passe à la mise en page et que j'affiche tous les articles par page, disons simplement que je crée autant de publications que j'en ai actuellement. Je suis passé à 15, mais nous n'avons que sept articles ici. Vous trouverez deux catégories. Conservez simplement ce nombre maximum, le nombre de pages que vous avez. Gardez-le comme ça ici. Vous pouvez modifier le titre, quel qu'il soit, que vous vouliez l'afficher ou non. Vous pouvez même définir le ratio des articles ici. Vous pouvez ajuster l'augmentation de la largeur de votre image en plaçant simplement le curseur et en le déplaçant Ou vous pouvez simplement cliquer sur les flèches haut et bas de votre clavier. Vous pouvez choisir H two tag si vous le souhaitez. Si vous choisissez H two tag, vous constaterez que le titre apparaît mieux en gras. Et oui, passons au style. Nous pouvons ajouter un écart de colonne entre elles, ce qui serait une bonne idée. Également un certain écart entre les lignes. accord, 25 ou peut-être même 35 conviendraient à la fois aux scénarios et à votre ligne et à votre colonne. Ajoutons un rayon de bordure. Si je le garde simplement comme rayon de bordure, vous constaterez qu' après un point, il tourne avec des bords ou des coins arrondis, vous avez un objet superposé Que se passe-t-il si vous choisissez la superposition de l'article ? Sélectionnons le vert, qui est notre couleur globale. Ici, vous pouvez choisir la couleur verte. Et vous constaterez que le texte apparaît et qu'il y a un peu d'arrière-plan. Mais j'aimerais apporter quelques modifications à ce sujet. Nous pourrions rendre cette couleur un peu transparente. Voyons ce qui se passe maintenant, rendons-le un peu opaque. Je pense que cela fonctionnerait parfaitement, j'y pense beaucoup. Oui, ça a l'air fantastique. Gardons les choses telles quelles, d'accord ? Vous pouvez également choisir entre différentes couleurs de texte et de typographie Réglons la typographie sur Poppins. Je vais sélectionner Poppins. J'espère que vous constaterez que Poppins Fun Family a été appliqué au texte de la barre de filtre Fclicon Vous constaterez que nous pouvons même changer la couleur de la barre de filtre. Vous pouvez même ajouter de la couleur active, quelle que soit la couleur sélectionnée qui sera affichée. Vous pouvez même en modifier la typographie. Choisissons des poppins. Nous avons choisi des poppins, nous pouvons ajouter de l'espacement entre eux. Vous pouvez ajouter de l'espacement entre tous ces éléments. Vous pouvez même passer au coloriage. Voyons ce qui se passe si nous choisissons la couleur. Vous constaterez que la couleur de la police change. Si nous choisissons Active, vous verrez actuellement que tout est correctement sélectionné ici. La différence entre l' espace et l'espacement est que si je déplace mon curseur pour l'espace entre les deux, vous constaterez que c'est l'espacement entre ma Changements. Si je modifie l'espacement entre cette barre de filtre et les éléments que j'ai pour mon portfolio, cela augmentera ou diminuera Restons-en à 35. Cette cohérence est maintenue tout au long de cette page. Ici vous avez la section. Au lieu de choisir une boîte, vous pouvez même la faire apparaître en pleine largeur pour qu'elle apparaisse bout à bout. Si vous souhaitez le rembourrer , vous pouvez même le faire Essayons d'ajouter un peu de rembourrage de gauche à droite. Si j'ajoute un peu de rembourrage par la gauche, vous constaterez que le contenu apparaît, mais qu'il y a de l'espace Ajoutons également 30 à partir d'ici, vous trouverez un peu d'espacement. OK, c'est ce que nous avons fait jusqu'à présent. Maintenant, vous pouvez même ajouter de la couleur d'arrière-plan à toute cette section en cliquant simplement sur cette section. En ce qui concerne le type de style, nous pourrions passer à la superposition d'arrière-plan Concentrons-nous maintenant sur la superposition d' arrière-plan, que nous n'avons pas abordée jusqu'ici Si je choisis le type d'arrière-plan classique pour la superposition d'arrière-plan, je peux choisir une image Supposons simplement que je choisisse cette image en particulier. C'est bon. Maintenant, j'ai cette image en arrière-plan. Maintenant, au début, vous pouvez voir que la couleur n'est pas sélectionnée. Mais l'image apparaît toujours, semble très transparente. Maintenant, comment est-ce arrivé ? En accédant simplement aux filtres CSS, trouvez que le flou est réglé sur zéro La luminosité, c'est tout ça. Mais si vous réduisez les saturations, vous constaterez que l'image entière qui fonctionne en arrière-plan est en noir et blanc Une chose, quelque chose de similaire, qui est réalisé ici même. Vous pouvez voir que l'image en arrière-plan présente des nuances de noir et de blanc. Vous pouvez le faire en cliquant sur les filtres CSS, en abaissant la saturation à zéro. accord ? Et cela ne se produira que si vous avez sélectionné la superposition d'arrière-plan. D'accord ? Cela n'arrivera pas si vous avez sélectionné votre arrière-plan, un arrière-plan simple. Vous constaterez également qu'il est transparent. Si vous choisissez qu'il soit 100 % opaque, c'est ce que vous trouverez. OK, il suffit de laisser tomber ça. 2,6 0,6 aurait l'air bien. OK, vous avez le mode Blend. Différents types de mode de fusion. N'en parlons pas ici. Dans le cadre de votre poste, vous trouverez différents postes que nous avons abordés. L'attachement est quelque chose que nous n'avons pas abordé. Bilifolt serait configuré pour défiler ou par défaut. Voyons ce qui se passe si nous choisissons le mode fixe. Si je le souhaite, si je fais défiler la page, vous pouvez voir que l'image change également. La direction de l'image par rapport à l'axe Y change. Essentiellement, nous faisons également défiler l'image en arrière-plan C'est ce qui se passe ici pour notre portefeuille. Je vais aller dans la barre de filtre. Je vais faire en sorte que la typographie soit un peu plus grosse. Mettons-le en gras pour qu' il soit visible ici. Nous pouvons même changer la couleur si vous le souhaitez, mais je n'y toucherai pas. Superposition d'articles, vous pouvez constater qu'ici nous avons différentes choses que nous avons couvertes et différents articles J'espère également que vous comprenez comment utiliser l' élément portfolio et comment nous pouvons utiliser la superposition d'arrière-plan en ajoutant des filtres CSS, modifiant l'opacité et en modifiant l' attachement de la superposition d' arrière-plan 20. Élément de liste de prix - Afficher vos frais de service: Permettez-moi de vous montrer un autre élément qui est la liste de prix. Je vais ajouter une nouvelle section ici. Je pourrais sélectionner la boîte flexible avec une direction verticale. Plus tard, nous pourrons ajouter d'autres conteneurs. Je vais ajouter un élément ici même dans la liste de prix. Une fois que je l'aurai laissé tomber, vous constaterez que nous avons un titre, une description, puis vous avez quelques points et ensuite vous avez le prix. Quand cet élément précis peut-il être utile ? Supposons que vous créiez une page de service ou peut-être même site Web pour un restaurant ou un café où vous affichez simplement la liste des prix de chaque produit alimentaire. Vous pouvez donc simplement cliquer sur l'arrière-plan ici. J'ai l'arrière-plan de l' ensemble du conteneur, de la boîte flexible. Je vais passer au style. Et pour ce que je peux faire pour l'arrière-plan, je peux sélectionner une image Je vais donc simplement cliquer sur Image classique. J'ai téléchargé une image de café. Ce que nous essayons exactement de créer c'est une section indiquant le prix de tous les différents cafés servis dans ce café. Ici, vous avez l'image. Mais nous aimerions également donner sorte de superposition d' arrière-plan Très bien, ici, dans la superposition d' arrière-plan, nous pouvons sélectionner un effet de type dégradé même si vous avez une image en arrière-plan Vous pouvez même ajouter un effet de dégradé de couleur en complément de votre image. Ici, vous avez une couleur, la couleur primaire et la couleur secondaire. Faisons en sorte que la couleur primaire ressemble un peu à une teinte rouge foncé. Alors gardons-le un peu comme une teinte brunâtre foncé accord ? Et la deuxième couleur gardera ça en noir, très bien. Et nous allons changer l'emplacement de la première couleur à environ 75. OK, de haut en bas, vous constaterez que la couleur apparaît un peu plus foncée, très bien. Vous allez également modifier l' opacité de l'arrière-plan. Si je déplace mon curseur ou mon curseur vers la droite, vous constaterez que l'image devient de plus en plus floue Ou il y a un dégradé plus foncé, une sorte de nuance de couleur qui recouvre l'image. Le texte devient parfaitement visible. Je peux maintenant cliquer sur cette liste de prix en particulier. Je peux cliquer sur Style. Je peux passer à la couleur de mon texte, et je peux la changer en blanc. Maintenant, vous verrez que nous avons le titre, le prix ici. Je peux le changer en blanc, j'ai une description, je peux même le changer en blanc. Vous trouverez maintenant différents types de séparateurs entre le titre et la liste de prix Pour chaque article que nous avons, il y a des pointillés. Nous pouvons changer cela en double, sorte qu'il y ait des lignes doubles qui circulent. Et vous pouvez même faire en sorte que cela ne fonctionne pas, mais nous aimerions que cela reste en pointillés Vous pouvez même le garder solide, mais solide n'aurait pas l' air très beau. Vous avez également du poids pour ces points. Vous pouvez déplacer le curseur pour voir ce qui fonctionne pour vous. Vous pouvez même ajouter de l'espacement, sorte que vous constaterez plus vous déplacez votre curseur vers la gauche, en l'espaçant titre et du prix Très bien, maintenons l' espacement de 20. Vous pouvez même changer la couleur de vos points dont vous avez le séparateur, puis vous avez l'image. Vous pouvez maintenant y ajouter une image. Pour cela, qu' allons-nous faire ? Nous allons passer au contenu ici même dans le contenu. Vous pouvez développer chaque liste d'articles. Vous pouvez fixer le prix. Vous pouvez modifier le nom du titre. Donnons-le sous forme d'espresso. Nous garderons simplement la description. Quoi qu'il en soit, nous pouvons remplacer l'image par cette icône particulière. accord, alors je peux également apporter la même image pour les autres articles. Je peux faire comme Fracino. Bien, alors nous avons un chocolat chaud. Gardons-le sous forme de chocolat chaud. Très bien, développons l' espacement de notre séparateur. Je pense qu'environ 15 pixels seraient bien. Très bien. Ici, vous avez maintenant une image pour chaque image. D'accord, tout d'abord, nous devrons également ajouter une image pour le chocolat chaud. Donnons cette image. Très bien, et voici à quoi ressemblerait notre menu. Vous pouvez modifier le tag si vous souhaitez le conserver sous la forme H trois. Vous constaterez que le titre semble gros et qu'il apparaît en grande taille. Vous pouvez changer la couleur de cette balise H two si vous le souhaitez en sélectionnant simplement la balise que vous souhaitez. Pour le tag span, il sera défini sur blanc. Si vous voulez un H deux, un H trois ou d'autres tags, vous devrez en modifier les paramètres ici. Vous avez également une description qui est définie sur une balise. Alors, gardons-le tel quel. Nous allons passer au style, nous avons abordé cette partie. Mais en allant à l'image, vous pouvez modifier la taille de l'image. Actuellement, il est configuré sur miniature. Tu peux changer d'avis. Vous pouvez même ajouter un rayon de bordure si vous le souhaitez, l'espacement autour de l' image, ainsi que le titre et description, afin que vous puissiez également contourner les différents éléments Comment souhaitez-vous aligner ces différents éléments ? Voulez-vous les aligner verticalement ? Voulez-vous aligner le contenu que vous avez par rapport à l'image au centre, en haut ou à la fin ? Je pense que le centre fonctionnerait très bien. Continuons comme ça. Nous pouvons ajouter un écart. Continuons cela, car 2020 s'annonce belle. Encore une fois, ici, à l'avance, vous pouvez ajouter un rembourrage de marge et d'autres éléments. Nous pouvons en faire une copie si nous le voulons. Si j'en fais une copie, vous verrez ce qui se passera. Il apparaît juste en dessous, simplement parce que nous avons défini la section entière du conteneur, toute la direction de Flexbox à la verticale Si je change la mise en page de deux à l'horizontale, vous constaterez que c'est à cela qu'elle ressemble en haut de celle-ci, nous pouvons même ajouter un séparateur Permettez-moi d'apporter un séparateur juste ici, en haut de la page. Ou vous savez quoi, je pourrais même ajouter un contenant. Cherchons « Contain ». Très bien, je peux ajouter un conteneur en haut. Maintenant, cette direction du conteneur. Tout d'abord, permettez-moi de modifier les paramètres du conteneur. Nous allons passer à la verticale. Très bien, dans ce conteneur, nous mettrons notre liste de prix et cette liste de prix, très bien. Nous aimerions maintenant ajouter un autre conteneur en haut. Bien, ajoutons donc un récipient en haut ici. À l'intérieur de ce contenant, nous ajouterons notre diviseur. Ce diviseur, nous aurons notre titre, nous pouvons l'ajouter, gardons simplement cela comme ligne médiane Eh bien, quelque chose comme un menu. Très bien, ici, vous pouvez changer entre les différentes balises que vous souhaitez. Je vais juste le garder sous forme de pan tag. Je vais le rendre aussi solide que possible. La largeur est bonne. Nous allons passer à couleur du séparateur et le régler sur le blanc Donc, pour notre texte également, nous pouvons le modifier, je peux passer à la typographie, je peux le remplacer par des poppins Je peux même augmenter la taille de mon texte. Pour le menu ici, cela aurait l'air de 50 pixels, ce serait génial, très bien. Maintenant, pour les autres conteneurs que nous avons, où nous avons ces deux listes de prix, nous pouvons modifier les paramètres des conteneurs à l'horizontale, et voici notre menu qui ressemblerait, encore une fois, à la liste de prix Nous pouvons passer à la typographie et changer la typographie Ici, je peux sélectionner des poppins pour le titre, poppins pour le prix et des poppins Je peux également enregistrer les mêmes paramètres pour l'autre en copiant et en collant simplement le style Vous pouvez voir que c'est ainsi que notre menu apparaîtrait si nous utilisons l'élément de liste de prix. 21. Élément de compte à rebours - Organiser une vente / événement limité: Très bien, voyons voir. Autre élément, d'ailleurs, dans cette mine elle-même, nous avions l'image du café, mais j'ai juste supprimé l'arrière-plan en allant supprimer le site Web G. Et là-bas, je viens de télécharger mon image. Et j'utilise cette image pour les deux éléments de la liste de prix. Je vais donc ajouter une nouvelle section juste en dessous de cette partie. Gardons la boîte flexible, cinquième direction verticale. Je vais maintenant utiliser notre élément de compte à rebours. Maintenant, quand est-ce que cela peut être utile ? Évidemment, lorsque nous essayons de gérer une page de vente promotionnelle à durée limitée. Ou vous essayez d' organiser un webinaire qui sera organisé dans environ une semaine. Ou si vous organisez une vente vous pouvez d'abord utiliser cet élément de compte à rebours. Donnons à ce conteneur une sorte d' image de fond ici en superposition d'arrière-plan Je vais sélectionner l'image Classic Select comme celle-ci. Dès que nous cliquons dessus, nous constatons que l'opacité est définie à 2,5, ce nous constatons que l'opacité est qui augmente cette valeur d'environ 2,9 Cette image pour l' ensemble de ce conteneur en fait, nous allons prendre la largeur comme 100 H. Faisons en sorte que 100 H trouvent, vous constaterez également que l' image est en train de se répéter. Passons à l'arrière-plan. Nous allons faire en sorte que cela ne se reproduise pas. Si nous ne le répétons pas, vous constaterez que l' image se termine ici. Au lieu de cela, nous allons faire en sorte que la taille de l'écran soit telle qu'elle apparaît, et elle s'agrandira par rapport à la largeur accrue de notre conteneur Bien, maintenant à l'intérieur, nous allons placer une autre image. Essayons d'ajouter une image qui représenterait cette grosse vente juste en dessous. Nous aimerions également ajouter notre élément de compte à rebours. Faisons glisser et déposer notre élément de compte à rebours ici. Je vais le placer, mais laissez-moi d'abord voir où exactement l'image placée ici même dans la structure, nous avons l'image placée ici même dans la structure, dans ce conteneur. Idéalement, le conteneur devrait également permettre d' ajouter un compte à rebours. Oui, maintenant nous pouvons ajouter notre compte à rebours. Ici, vous pouvez constater que le compte à rebours apparaît comme ceci. Maintenant, dans la partie contenu, vous trouverez la date d'échéance ou le minuteur Evergreen, ce qui signifie essentiellement que le chronomètre s'actualisera automatiquement après un certain temps Si vous voulez une date d'échéance, cela signifie que la vente doit prendre fin après une période donnée. Vous pouvez définir la date en accédant simplement à cet onglet et en cliquant sur Quand la vente devrait réellement se terminer. Pour le moment, je vais simplement sélectionner Aujourd'hui. Aujourd'hui, la vente se terminerait dans quelques heures. Je peux régler l'heure. De plus, ici, nous avons le calendrier qui nous permet de définir la date, le mois et l'année. Ici, je peux régler l'heure à la place, je peux juste la porter à environ 10 minutes. Actuellement, il est 44 h 18 h 00. Nous allons donc passer à 16 h 28. D'accord. Vous trouverez ici, d'ailleurs, accord, l'heure est actuellement réglée sur UTC. Vous constaterez que l' heure est réglée sur UTC. Actuellement, si vous souhaitez que l' affiche en fonction de votre fuseau horaire, nous pouvons simplement revenir à votre tableau de bord, mais appuyer sur Tableau de bord. Cliquons ici. Nous allons passer à la partie Paramètres. Ici, dans les paramètres, vous pouvez trouver la partie Fuseau horaire ici. Sélectionnez simplement le fuseau horaire dans lequel vous vous trouvez. Je suis en Inde. Mon fuseau horaire serait le premier, laissez-moi chercher ma place ici en Asie. Où trouverais-je ma place ? Inde. Calcutta est une ville de Inde. Je peux simplement le sélectionner et ce sera mon fuseau horaire. Permettez-moi de l'enregistrer en faisant défiler la page vers le bas et en cliquant sur le bouton Safe Je vais le modifier avec Elementor, et une fois que je ferai défiler la page vers le bas, vous constaterez que le chronomètre ne fonctionne que pendant 8 minutes. OK, voici comment vous pouvez exécuter le chronomètre. Encore une fois, pour en revenir à cette partie, il existe différentes options d' affichage. Si vous voulez que cela soit davantage dans un bloc, voici comment cela apparaîtra. Vous pouvez même négliger les jours si ce n'est qu'une question de quelques heures, puis vous pouvez simplement désactiver les jours Ici, vous avez une étiquette personnalisée si vous le souhaitez, vous pouvez même la masquer, mais cela n'aurait aucun sens. Il est important d'inclure une étiquette. Il existe également une étiquette personnalisée si vous souhaitez modifier les heures, les minutes ou les secondes. Donc, mais nous allons juste le garder tel quel. Et quelles autres actions doit-il effectuer une fois le délai expiré ? Cela signifie que se passerait-il au bout de sept à huit minutes ? Nous avons donc peu d'options. Nous pouvons soit rediriger nos utilisateurs vers une autre page, soit masquer ce chronomètre. Ou nous pouvons afficher un message, afin de pouvoir afficher un message. Par exemple, la période de vente a expiré. Bien, une fois le délai expiré, ce message sera affiché, suivi d'un point d'exclamation En allant dans la partie style, vous trouverez différentes options. Vous avez ici la largeur du conteneur. Vous pouvez constater que la largeur du conteneur est à peu près totale, 100 %. Vous pouvez en modifier la couleur d' arrière-plan, actuellement elle est définie sur aucune. Vous pouvez le remplacer par quelque chose comme ceci. Chaque bloc aura une sorte de disposition des blocs pendant des heures, des minutes, des secondes. Chacun aura son propre bloc. Lorsque vous avez la vue sous forme de bloc, ce texte, qui correspond aux heures, aux minutes ou aux secondes, apparaît en bas. Si vous faites la queue, il apparaîtra juste dessous de votre heure et juste en dessous. C'est bon. Et ils apparaîtront étroitement et compacts les uns avec les autres. Si vous le définissez sous forme de bloc, voici comment cela apparaîtra correctement. Vous pouvez même en modifier le style. Si vous souhaitez ajouter une sorte de bordure que vous pouvez ajouter, elle est actuellement définie par défaut, ce qui signifie qu'il n'y a pas de bordure. Vous pouvez le remplacer par une rainure solide à double pointillé. Voyons à quoi ressemble Groove , car vous ne l' avez jamais vu auparavant. Il est très similaire au solide, mais il peut y avoir quelques différences ici et là. Voyons ce qui se passe si je sélectionne cette bordure et que j'augmente la largeur de la bordure à environ 20. Voici à quoi cela ressemble. C'est comme un type de bordure rainurée à effet de cadre. Si je le change en solide, la largeur de ma bordure serait quelque chose comme ça. Mais permettez-moi de le ramener à deux parce que cela serait suffisant, à mon avis, nous pouvons augmenter le rayon de la frontière pour le rendre circulaire, très bien. Pour créer cette circulaire, nous devons d'abord la faire comme en ligne. Après l'avoir mis en ligne, voici à quoi ressemblerait notre contenu. Bien, maintenant vous avez également un certain espacement entre les trois blocs ou les mérites et les secondes. Très bien, ici vous pouvez ajouter du rembourrage. En augmentant le rembourrage, que se passera-t-il ? L'espacement autour du contenu augmentera. De toute évidence, vous connaissez cette partie. Nous pouvons augmenter le rembourrage. Vous pouvez réduire l' espacement si vous le souhaitez, à l'intérieur du contenu Vous pouvez modifier la couleur du contenu. Vous pouvez changer la topographie poppins, disons en poppins Que se passe-t-il sur l'étiquette ? Nous pouvons même changer la couleur de l'étiquette. Nous allons le définir sur la valeur par défaut, qui est blanche. Encore une fois, changez la typographie en pop. Si vous voulez le rendre aussi audacieux, vous pouvez même le faire. Vous pouvez ajouter un trait de texte. Vous pouvez ajouter un message si vous le souhaitez. Vous pouvez modifier la typographie du message. Texte. La couleur du message qui apparaîtra à la fin du compte à rebours apparaîtra au centre avec une couleur blanche, police pop Et nous voulons avoir une épaisseur de police qui soit en gras, 700 en gras, n'est-ce pas ? Augmentons également la taille à environ 35, 30 aurait l'air bien, je pense. Ouais. Maintenant, à l'intérieur de tout cela lui-même, que se passera-t-il si nous passons à l'étape avancée ? Vous retrouverez toutes les options par défaut que nous pouvons voir pour tous les autres éléments. J'espère que vous comprenez le fait d'utiliser différents types de choses. Permettez-moi de réduire le temps à environ une minute. Juste quelques secondes. Et je peux simplement publier ceci pour voir quel message sera affiché. Si je fais défiler la page vers le bas, vous constaterez que la période de vente a expiré. D'accord, mais maintenant nous avons un peu d'espacement ici. Maintenant, pourquoi cela apparaît-il ? Laisse-moi juste y retourner. Ici, nous avons le conteneur entier. Ce contenant, nous allons passer au style. Nous allons définir l'arrière-plan. OK, conteneur. Nous allons avoir notre arrière-plan superposé. Nous voulons que cela ne se reproduise pas. Faisons-en une couverture. OK. La couverture occupera toute la surface avec une fine couche. Une fois que nous aurons publié, actualisons la page ici. Si je fais défiler la page vers le bas, vous constaterez que toute la largeur est bien occupée. Vous pouvez voir que la période de vente a expiré. Très bien, il s'agissait donc utiliser l'élément compte à rebours. 22. Élément de citation - Inclure des citations / tweets dans votre page de blog: Très bien, voyons un autre élément ici. Je vais créer une boîte flexible. Je vais ajouter un nouvel élément. Cet élément est un code de bloc. Au lieu de chercher ici, nous avons un code de bloc. Je peux même taper en recherchant un élément. Et voici le code de blocage. Maintenant, comment le code de bloc peut-il nous aider et à quoi sert-il exactement ? Ici ? Comme vous pouvez le voir, il partage essentiellement des informations données par quelqu'un et liées au tweet. Supposons simplement que vous rédigez votre article en bloc. Et vous, en tant qu'auteur, vous avez publié un tweet sur votre plateforme Twitter. Vous pouvez l'inclure ici. Il existe des skins différents pour chacun d'entre eux, qu'en dites-vous ? Ce code de bloc. Vous pouvez modifier le contenu. Vous pouvez modifier le nom de l'auteur. Vous pouvez ajouter ou supprimer le bouton Tweet si vous le souhaitez. Si vous incluez le bouton de tweet, vous disposez de différentes options pour inclure soit une icône, soit simplement du texte, soit à la fois une icône et du texte. Vous pouvez changer la couleur de Twitter, mais je pense que j' aimerais conserver cette couleur comme couleur du logo Twitter ici. Vous pouvez le remplacer par bubble. Bubble est essentiellement une sorte de boîte de discussion. Permettez-moi de le publier et de vous montrer à quoi cela ressemblerait ici sur ma page. Une fois que je fais défiler la page vers le bas, vous trouverez cette bulle Ici, vous pouvez voir une petite flèche. C'est ce qu'est une bulle. Vous pouvez même le remplacer par un lien. Cela signifie que chaque fois que quelqu'un clique dessus, il sera redirigé vers votre tweet. Restons là où c'est classique. Vous avez l'étiquette que vous pouvez utiliser. Vous pouvez ajouter votre nom d'utilisateur par exemple, disons simplement que c' est un nom d'utilisateur que je vais conserver. Chaque fois que quelqu'un clique dessus, il sera redirigé vers votre page. Je vais juste voir si les changements sont reflétés. Attends une seconde. Juste une seconde. Je vais juste modifier cette partie. Je vais faire défiler la page vers le bas où je peux simplement cliquer sur le tweet. Si je clique dessus ici, vous trouverez ce tweet provenant de cette plateforme Twitter ou de cet utilisateur de Twitter. Très bien, traversons ça. Et ici, j'ai différentes options à choisir parmi lesquelles je veux exactement cibler cette page en cours, non personnalisée. Et vous ne pouvez définir qu'une seule option dans le contenu , à savoir le code de bloc. En accédant à la section style, vous pouvez modifier la couleur du texte. Vous pouvez modifier la typographie. Vous pouvez modifier l'écart entre le nom de l'auteur et le tweet qu'il a publié. Vous pouvez modifier la couleur de la typographie. Vous pouvez modifier la taille du bouton, le mot, le rayon, la couleur, ajouter une couleur personnalisée, ou vous pouvez vous en tenir à la couleur officielle de Twitter. Vous pouvez jouer avec la bordure du centre ici. Vous pouvez ajouter une largeur de bordure. Vous pourriez en ajouter un peu, une lacune. Vous pouvez même ajouter un rembourrage vertical et d'autres choses. Permettez-moi de le ramener à la valeur par défaut. Ici, vous avez une bordure comme peau. Vous pouvez même le remplacer par un devis. Une fois que je l'ai fait entre guillemets, vous verrez généralement l'icône des guillemets doubles, mais elle n'est pas visible. Il va donc falloir passer au style. Il va falloir aller faire un manteau ici. Nous pouvons sélectionner en noir. Si je le fais en noir ici, tu le trouveras. Cette icône apparaît. Vous pouvez augmenter ou diminuer sa taille. Vous pouvez ajouter un écart si vous le souhaitez. Vous pouvez contourner le bouton que nous avons vu plus tôt. Nous pouvons également avoir une autre option , comme un code encadré. Nous pouvons avoir un moyen propre où je pense que je voudrais utiliser un devis. Il existe un tas d' options différentes avec lesquelles vous pouvez jouer. Vous pouvez centrer la ligne, écrire une ligne, vous pouvez laisser une ligne. Et il y a bien d'autres choses. Je pense que cela peut s' avérer utile lorsque vous ajoutez des témoignages, vous essayez d'ajouter des commentaires, le coût exact que votre client ou vos clients ont laissé pour le produit ou le service que vous leur avez proposé Ou vous pouvez simplement laisser un tweet de l'auteur de la publication bloquée. 23. Élément de carrousel de témoignage - Build Trust en ajoutant des avis clients: Permettez-moi de vous montrer un autre élément qui est le carrousal de témoignages Permettez-moi simplement de rechercher un carrousal de témoignages. C'est ce que nous allons voir ici. Je vais ajouter une nouvelle section, Flexbox, direction verticale. Maintenant, lorsque nous passons à la partie style, vous trouverez une autre option , le diviseur en forme, que nous n'avons pas utilisée auparavant Essayons de l'utiliser ici. Vous avez le haut et le bas à partir du haut, j'aimerais avoir un séparateur en forme de séparateur Ici, vous avez le choix entre un carnet de flèches fractionné et de nombreux types d' options. Essayons d'utiliser le split. Je peux choisir la couleur verte. Voyons à quoi ça ressemble. Vous pouvez donc le voir se diviser. Si je veux que ce soit du bas vers le bas, il se divise. Je peux changer la largeur. Au fur et à mesure que j'augmente la largeur, vous pouvez également voir cette hauteur et toutes ces choses augmenter. Je peux changer, disons l'inclinaison. Que se passe-t-il si je change ce paramètre en inclinaison ? Vous pouvez voir que la hauteur pourrait être quelque chose comme ça. Très bien, permettez-moi également d'augmenter la taille de l'ensemble du conteneur. La largeur totale et la hauteur doivent être égales à la hauteur totale. 100, c'est ce que nous allons choisir, prendre toute la hauteur. Pour en revenir au style, nous avons notre diviseur de forme, nous ferions en sorte que cette hauteur soit d'environ 500. À peu près autant. Bien, passons à la liste déroulante. Ou nous pourrions augmenter ce chiffre. Cela ne veut pas dire qu' il s'arrête à 500. Si le curseur, lorsque vous vous déplacez vers le côté le plus à droite, vous voyez la valeur cinq, cela ne signifie pas qu' il s'arrête à 500 Si j'ajoute quelque chose comme 800, vous pouvez voir que c'est toujours valable. Ça n'a pas d'importance. Vous pouvez simplement l'augmenter, ou peut-être que l'augmenter à 65650 n'est pas suffisant Trouvons un 75750 c'est exactement ce que nous devrions rechercher Très bien, vous pouvez voir exactement que l'ensemble de notre conteneur a été divisé en deux parties. Ce triangle en bas à gauche, qui est de couleur blanche. Et puis nous avons le triangle en haut à droite, qui est de couleur verte. Très bien, essayons d' ajouter notre carrousel de témoignages ici. Je vais le placer ici, au centre. Essayons maintenant d'organiser le centre des articles, il apparaît ici. Ce que je vais faire à la place, c'est que ce truc apparaisse, accord, le diviseur de formes ici Je peux changer l'angle. Je peux juste le retourner pour qu' il apparaisse ici. Je pourrais même diminuer la hauteur. Faisons en sorte que ce soit environ 400. Je pense que 380 aurait l'air bien. Restons-en à 380, très bien. Maintenant, pour ce carrousel de témoignages, nous voulons évidemment mettre en valeur les critiques, les critiques positives de nos clients ou des clients qui ont acheté nos services ou nos produits Nous aimerions présenter ces commentaires positifs à nos nouveaux prospects. Vous pouvez voir ici différentes diapositives. Il glisse automatiquement. Vous pouvez modifier le moment, et je vais vous montrer chacun d'entre eux. Ici, vous avez le premier article. Vous pouvez modifier le contenu. Vous pouvez même ajouter des images à chacun. Permettez-moi d'ajouter quelques images. Nous en avons peu. Nous pouvons les ajouter dans l'avatar du cercle. Donnons-le à ce type qui s'appelle John Doe. La seconde, nous allons garder cette dame, elle a l'air très heureuse, alors nous allons lui donner son nom. Émilie. Émilie Blunt Elle est directrice marketing d'une entreprise. Donnons-lui simplement un CMO. Ajoutons une autre image. Je vais garder ce type, et je vais lui donner le nom de Will, Will Smith. OK, on dirait Will Smith. Je vais donc garder ça sous le nom de Will Smith. Il est PDG d'une entreprise. PDG, directeur technique. Et CMO sont les trois titres que nous avons. Ou vous pourriez même le remplacer par quelque chose comme Founder. C'est bon. Vous pouvez même ajouter des éléments, vous pouvez en faire une copie. Je n'ai pas besoin d'enseigner à ce sujet. Encore une fois, vous pouvez modifier le type de peau, le texte que vous avez, l'avis que vous avez dans le texte de Lorimpsu Vous pouvez remplacer cette valeur par défaut par une bulle. Si vous le remplacez par une bulle, vous constaterez que cela apparaîtra comme dans un format de boîte de discussion. Bien. Mais vous ne trouverez pas cette petite flèche, simplement parce que la couleur de fond que nous avons n'est pas grise. Réglons cela un peu comme un gris plus foncé. À propos de cette couleur, ça irait bien. Vous pouvez maintenant voir l'icône de la boîte de discussion apparaître correctement. Revenons à notre témoignage. Vous avez une mise en page différente. Vous pouvez soit ajuster votre image en fonction du texte de la personne et de sa position, soit les empiler de telle sorte que l'image apparaisse en haut et que le nom et le poste de cette personne apparaissent en bas. Sinon, vous pouvez conserver cette image sous forme d'image ci-dessus, ce qui signifie essentiellement que toutes les informations sur la personne apparaîtront en haut et que les commentaires apparaîtront en bas. Si je le fais comme image de gauche, voici à quoi cela ressemblera. Si je fais cela comme image correcte, voici à quoi cela ressemblera. Gardons cette image telle qu'elle est à gauche car elle a l'air bien. Ici, vous pouvez modifier l'alignement. Si je fais cela comme une ligne gauche, vous constaterez que le commentaire devient une ligne gauche. S'il s'agit d'un axe central ou d'une ligne droite. Le manuel change, gardons-le comme ligne centrale. Nous avons également des diapositives par vue. Si je peux ajouter trois diapositives par vue, voici comment cela apparaîtra. On peut en faire deux, on peut même en ajouter dix, et ainsi de suite. Conserverons simplement un commentaire par diapositive. Nous avons des diapositives à faire défiler. Combien de diapositives voulons-nous montrer ? En fonction de cela, vous pouvez montrer. Maintenant, vous pouvez même en modifier la largeur. Vous pouvez réduire la taille du texte en réduisant la largeur des commentaires. Ou vous pouvez même le définir par défaut. En allant dans les sections supplémentaires, dans la section des options supplémentaires, vous trouverez des flèches. Si je ferme ceci, vous constaterez que la flèche a disparu. Si j'active cette option, vous trouverez une petite flèche juste ici. Vous avez également une pagination en bas, vous avez trois points Vous pouvez le remplacer par une fraction, ce qui signifie essentiellement qu'il y en a trois au total et que vous êtes actuellement sur le premier. Si vous souhaitez le faire en tant que progression, vous constaterez que la barre de progression apparaît à l'amende. Ici, vous avez la partie la plus haute. Si je clique sur Suivant, vous verrez que barre de progression atteint ce point. Si je passe à la dernière barre de progression, je touche la fin. Gardons-le sous forme de points. Vous pouvez modifier la durée de la transition et même la vitesse de lecture automatique J'aimerais que cela reste en mode de lecture automatique. Si vous ne le souhaitez pas, vous pouvez simplement le désactiver. Vous avez également une boucle infinie. Vous pouvez faire une pause chaque fois que vous passez votre curseur sur l' un des commentaires, la lecture automatique ne se produira pas Vous avez également une pause lors de l'interaction. Cela signifie que chaque fois que quelqu'un clique dessus ou que quelqu'un explore, cette diapositive est automatiquement affichée Vous avez ici la résolution de l'image qui doit être réglée sur maximale. Vous avez également une route paresseuse, mais ne touchons pas à cette partie. Bien. En ce qui concerne le style, vous trouverez un espace différent entre eux. Vous trouverez la couleur de la bordure, largeur de la bordure, le rayon de la bordure, le contenu. En ce qui concerne le contenu, vous pouvez évidemment changer la typographie en partie image poppins, vous pouvez modifier Si j'augmente la taille, voici à quoi cela ressemblera. Si je modifie l'écart entre le nom et l'image, c'est ainsi que le changement apparaîtra. Je peux modifier le rayon de bordure de l'image. Si je veux que les bords soient arrondis, je peux déplacer mon curseur vers la droite Ou si je veux donner cela sous forme d'arêtes vives, je peux déplacer ma diapositive vers la gauche. Mais gardons cela par défaut, qui est circulaire. Ici, dans la partie navigation, vous trouverez deux boutons à gauche et à droite. Vous pouvez également augmenter ou diminuer la taille des boutons. Tu pourrais en changer la couleur. Vous pouvez ajouter une taille de pagination. De plus, que vous souhaitiez des points apparaissent en bas pour être un peu plus grands ou plus petits en modifiant la bulle, que des points apparaissent en bas pour être un peu plus grands ou plus petits en modifiant la bulle, vous pouvez simplement les donner à la bulle. Vous pouvez ajouter du rembourrage si vous le souhaitez. Vous pouvez ajouter une bordure si vous le souhaitez, et ainsi de suite. Bien, j'espère que tu as compris tout cela. Venons-en au contenu. Ici, vous trouverez le texte qui s'y trouve, juste ici. Nous pouvons le remplacer par Poppins. Essayons de le faire. Vous pouvez constater que Pops est appliqué ici. Bien. J'espère que vous avez compris. Encore une chose que nous pouvons ajouter à cela, nous pouvons simplement revenir ici, dans le contenu, nous pouvons ajouter une bordure à la bulle. Si j'ajoute une bordure, permettez-moi de donner une couleur à cette bordure. Je peux le mettre en vert. Il s'agit d'une couleur d'arrière-plan. Il ne s'agit pas d'une couleur de bordure, mais d'une couleur d'arrière-plan. Permettez-moi de définir les paramètres par défaut ici. Vous avez une bordure, nous allons simplement activer/désactiver cette bordure ici, vous verrez qu'une bordure noire a été appliquée, mais nous ne voulons pas de couleur noire Nous voulons plutôt la couleur verte. Cette bordure peut être augmentée ou diminuée en fonction de notre scénario d'utilisation. Nous allons désélectionner cette partie. Nous allons passer à l'étape avancée ici. Dans la partie avancée, vous trouverez la bordure ici. Vous pouvez même ajouter une bordure à l'ensemble du carrousel de témoignages Si j'ajoute un solide, que se passe-t-il ? La bordure autour de l' ensemble apparaîtrait. Je voudrais donner une limite à une direction spécifique uniquement. Je peux également le faire en ajoutant simplement ce point. Je peux changer la couleur de la bordure en vert. Voici à quoi cela ressemblera. Je peux ajouter une bordure Us si je le souhaite, mais cela n'aura aucun sens. Je peux même ajouter une ombre en forme de boîte. Vous pouvez voir l'ombre de la boîte. Mais permettez-moi de le réinitialiser. Retour à la valeur par défaut. C'est exactement ainsi que fonctionne notre section de carrousel de témoignages. 24. Élément de tableau de prix - Afficher les prix de service en format niveaux: Commençons par un autre élément. Je vais créer une nouvelle section. Nous voulons que la direction de la boîte flexible soit horizontale. Ici, je vais ajouter un contenant. Je vais dupliquer ces conteneurs avant même d'en ajouter un autre. Ajustons d'abord la hauteur de ce conteneur à environ 100 H, très bien. Il occupe toute la hauteur. Ajoutons maintenant un arrière-plan à cette image classique et c'est ce que je vais sélectionner. Nous voulons qu'il n'y ait pas de répétition et que la taille de l' écran soit la couverture. Agrandissez l' image entière pour qu'elle corresponde déjà à la largeur et à la hauteur de notre conteneur. Ajoutons maintenant un conteneur et nous allons en faire une copie de telle sorte que nous ayons trois colonnes ici. Essentiellement, ce que nous essayons de créer, c'est créer un tableau de prix pour un site Web, page de service, un produit de toute taille que vous auriez pu rechercher. Ils proposent une page de service, non ? Une page de tarification. Sur cette page de tarification, ils ont trois niveaux de tarification différents. L'un serait le niveau de base avancé et le niveau professionnel. Ici, nous allons réaliser quelque chose de similaire. Vous trouverez un titre, une description, une couleur de fond. Vous avez une étiquette, vous avez votre prix, qu'il s'agisse d'un abonnement mensuel ou annuel. Vous avez répertorié différentes fonctionnalités. Vous avez votre modèle et du texte que vous pouvez placer juste en dessous votre modèle. Essayons de le modifier. Je vais simplement cliquer dessus et option de modification du tableau des prix apparaîtra. Maintenant, au lieu de saisir votre titre, nous pouvons le remplacer par quelque chose. Permettez-moi de le fabriquer sous forme d'emballage en diamant. C'est comme un paquet de diamants. Ensuite, nous pouvons modifier la description. Nous pouvons simplement garder cela comme description. Nous pouvons changer la balise de titre en H deux ou n'importe quoi d'autre, mais gardons-en trois. En ce qui concerne la partie tarifaire, nous pouvons changer le symbole en dollar, en euro ou en n'importe quelle devise que vous utilisez. Nous pouvons donc même le changer en roupie, mais j'aimerais le conserver en dollars maintenant Je peux modifier le prix. Au lieu de 39,99, je peux le changer en 59 99 si je le souhaite. Très bien, ici je peux changer le format de la devise. Maintenant, quelle est la différence entre ce format et ce format ? Si je change cela, vous constaterez que la partie en cents apparaît après cette virgule décimale ou vous pouvez utiliser la valeur par défaut D'accord, donc ça aurait l'air bien. Ici, vous avez également la vente, que se passe-t-il si je passe d'une vente à l'autre ? Donc, si je passe à la vente, le prix d'origine sera réduit et le nouveau prix sera affiché ici Je peux maintenir le prix initial autour de 99€. C'est bon. Je peux modifier la période, que ce soit un plan d' abonnement mensuel ou annuel. Je peux le conserver chaque année ou chaque mois. Permettez-moi de faire en sorte que cela soit mensuel. Vous pouvez même le faire tous les trimestres. Vous trouverez ici une liste de fonctionnalités. Vous pouvez même modifier l'icône au lieu d'utiliser un crochet circulaire. Je peux simplement utiliser cette case à cocher ou juste une simple coche. Je peux simplement rechercher T ou vérifier ici que j'ai cette vérification. Je peux le sélectionner, je peux changer la couleur de l'icône en vert. Et ici, au lieu de répertorier les éléments comme un seul, je peux en faire un seul domaine. Je peux en faire une réplique. Je peux donc simplement le copier-coller plusieurs fois. Au lieu d'un domaine, je peux répertorier les autres fonctionnalités comme 100 Go, 100 Go de bande passante. Très bien, et dernière fonctionnalité, nous pouvons dire quelque chose comme 100 % d'hébergement de sites Web. Cela ressemble à un tableau de prix pour tout type de fournisseur de services d'hébergement. Il pourrait s'agir d'un hébergement secondaire. J'essaie juste, vous savez, répertorier les fonctionnalités qu'ils offrent. Ici, vous avez 100 Go de Pan avec cent hébergements de sites Web et l'icône qui est cochée. C'est bon. Vous pouvez même les réorganiser si vous le souhaitez. Je peux juste le placer ici. Un domaine peut apparaître dans la partie inférieure. Vous pouvez même ajouter quelque chose comme un certificat SSL, un certificat SSL. Tout d'abord, permettez-moi d'en faire une copie. Je vais le rayer. Date de certification SSL. Très bien, quelles sont les fonctionnalités ? Est-ce que vous hébergez ou fournissez ? Découvrons-le simplement ici. Je vais passer à l'hébergement Web. Une fois que je fais défiler la page vers le bas, vous pouvez constater qu'il existe un nombre illimité d'options à répertorier en termes de fonctionnalités, nous avons un CDN et d'autres choses de ce genre Nous pouvons ajouter un autre élément. Essayons d'en faire une copie. Je peux ajouter quelque chose comme CDN gratuit au lieu d'un appel croisé, ou je peux simplement dire annuler Avons-nous une annulation ? Non, nous ne le savons pas. Avons-nous la croix ? L'annulation ? Je n'arrive pas à le trouver. Cherchons ce qui est faux. D'accord, nous ne le trouvons pas non plus. Quelle serait l' icône de la croix ? Essayons de trouver une croix. OK, je ne trouve pas l'icône en forme de croix, donc je vais la laisser telle quelle. Très bien, nous avons ici ces différentes fonctionnalités. Nous avons également un pied de page ici dans le pied de page, nous avons le bouton au lieu de cliquer ici, nous pouvons le dire maintenant, nous pouvons maintenant fournir un lien lien dynamique pourrait également être fourni en termes d'informations supplémentaires. Nous pouvons dire quelque chose comme 30, la garantie de remboursement. Voilà, c'est le texte auquel nous pouvons également ajouter des informations supplémentaires. En ce qui concerne la partie ruban, vous pouvez même modifier le texte du ruban si vous souhaitez l'afficher, le montrer ou le désactiver Vous pouvez également changer de position, mais j'aimerais la garder car c'est bien. En ce qui concerne le style, vous pouvez changer la couleur de l'arrière-plan ici au lieu du noir. Nous pouvons changer quelque chose comme le vert. Ici, nous avons du vert. Je peux changer la couleur du titre pour quelque chose comme le noir ici. Le noir peut être appliqué, mais faisons en sorte qu'il soit blanc pour la typographie Changeons ça en poppins. Bien, pour la taille également, nous pourrions également augmenter ou diminuer la taille de notre titre. Ici, je pense qu' environ 35 pixels seraient très bien, très bien. Pour en revenir à la partie des sous-titres, nous pouvons contourner ce problème en le remplaçant par Poppins Nous utiliserons simplement celle par défaut, ou nous pourrions même supprimer la description si nous ne le voulons pas. Pour ce qui est de la tarification, nous pouvons changer la couleur en noir. C'est le contexte, d'ailleurs. On peut régler ça, on peut ajouter du rembourrage. Si nous pouvons changer la couleur de la police en noir, elle est foncée, alors vous avez de nouveau de la typographie, changeons cela en poppins Très bien, c'est ainsi que cela va apparaître. En ce qui concerne le symbole monétaire, vous pouvez même réduire ou augmenter la taille de ce symbole. Je pense que 50 pixels me semblent très bien. Maintenant, quelle devrait être la position du dollar, que vous vouliez qu'il soit à gauche ou à droite ? Je pense que laisser une ligne serait une bonne idée. Comment souhaitez-vous que la position verticale soit ? Le signe du dollar doit apparaître en haut, au milieu ou en bas. Je pense en bas au milieu. Ils ont l'air bien tous les trois. À mon avis, j'utiliserais simplement la première position pour accéder à la partie fractionnaire Si je l'augmente, vous constaterez que la partie 99 augmente ou diminue également. C'est bon. Donc je peux juste en faire une quarantaine. Je peux même en changer la position, 59, 99. Je pense que ça a l'air bien. Ou du bas vers le bas, ça a l'air bien. Restons là en haut de la page. Très bien, nous avons ici le prix d'origine. Nous pouvons le transformer en rouge, gardons-le en rouge foncé. Nous allons remplacer la police par des épingles. Nous pouvons également en augmenter la taille. Toutes les lampes 99. La typographie initiale des prix était-elle définie sur des poppins, n'est-ce pas ? OK, donc c'est pour les règles. D'accord ? Sur la période mensuelle dont nous disposons, nous pouvons même définir la position de notre prix initial. Il est réglé en bas. Nous pouvons le remplacer par le milieu ou le haut. Le bas est le meilleur moyen de représenter le prix initial. Nous pouvons changer la couleur de l'époque, ce que je vais faire, la couleur grise qu'elle a. Nous allons changer la couleur, nous allons la conserver comme couleur de police, mais nous allons changer le style de police en poppins Cherchons les épingles que nous avons utilisées et nous pouvons les placer en dessous ou à côté. En plus, je pense que ça a l'air bien. Je vais juste le placer ici. Pour en revenir à la partie fonctionnalités, vous pouvez changer la couleur d' arrière-plan pour chaque fonctionnalité ici. Vous pouvez faire quelque chose comme ça, mais j' aimerais utiliser celui par défaut. Je peux ajouter du rembourrage, je peux changer la couleur du texte. Je peux même changer la typographie. Je peux le remplacer par quelque chose comme des poppins. Je peux changer la ligne d'alignement, à droite, une ligne centrale à gauche. Ça a l'air bien. Je peux en augmenter la largeur si je le souhaite, mais utilisons simplement celle par défaut. Je peux ajouter un séparateur entre eux. OK, ici j'avais une option pour ajouter un diviseur. Je peux choisir entre différents diviseurs, solides, doubles, en pointillés, et utiliser n'importe lequel d' Je peux même choisir la couleur du séparateur. Je peux en augmenter le poids, mais deux c'est parfait, en diminuer la largeur. Je peux modifier l'écart entre les fonctionnalités. Ici, à l'écart du pied, vous trouverez cette partie, le bouton et ce texte. Nous pouvons jouer avec la couleur de fond, le rembourrage, augmenter ou diminuer la taille du bouton Si je le fais petit, je pense que ce serait mieux. Si le bouton est aussi petit, je peux modifier l'effet du clic en passant le curseur autour de ce bouton en particulier Si je change la couleur du texte, ou plutôt la couleur de fond du bouton, en vert. Voyons ce qui se passe si j'amène mon curseur. Dans l'idéal, cela devrait se produire. Essayons de l'enregistrer maintenant, couleur du texte, nous voulons qu' il soit blanc. Essayons de voir les modifications ici si je fais défiler la page vers le bas. À cette partie. OK, pourquoi n'apparaît-il pas dans le survol ? Nous avons cette couleur, le type de fond fin doit être une couleur de bordure classique. Nous ne voulons pas donner de couleur de texte à la bordure. Nous voulons que ce soit blanc, évidemment. Mais pourquoi ça ne semble pas correct ? Nous pouvons même en modifier l' animation au survol si vous le souhaitez Je ne vais pas aborder cette partie. Nous avons ici quelques informations supplémentaires que nous pouvons styliser différemment. Ici, nous pouvons changer la typographie en poppins. Je peux augmenter ou diminuer la marge de la partie ruban, qui est très populaire. Je peux changer la couleur de l'étiquette, d'accord. Je peux même définir la distance à partir de laquelle vous souhaitez exactement placer cette étiquette en particulier. Je vais juste le faire par défaut. Je peux choisir la couleur du texte à l'intérieur. Je peux même en changer la typographie en poppins. Je peux même ajouter un peu d' ombre à cette étiquette. Ça a l'air bien, très bien. Maintenant, une fois que nous avons tout fait , que pouvons-nous faire à ce sujet ? Nous pouvons le dupliquer. Faisons-en une copie. Et d'ailleurs, dans l'onglet avancé, vous trouverez toutes les autres options disponibles pour les autres éléments. De plus, ici pour l'ensemble du conteneur, je vais en faire une copie . Encore une fois, faites-en une copie et je supprimerai les autres conteneurs. Très bien, supprimons maintenant les autres conteneurs pour cette partie Pour ce package diamanté en particulier, je n'aimerais pas afficher le ruban. Je vais juste retirer ce ruban pour le premier et le dernier. J'aimerais juste le garder pour celui du milieu. Je peux remplacer le titre du package par quelque chose comme «   titane » au lieu de « diamant ». Je peux le placer sous forme de platine. Nous pouvons même en modifier le prix. Pour le titane, nous pouvons passer au prix Au lieu de 59, 99, nous pouvons le porter à 299. C'est comme le plus cher. Nous pouvons également modifier le prix initial. Au lieu de fixer le prix initial à 98 S, nous pouvons le fixer à 599 Pour le platine, nous pouvons le porter à 129 et l' original à 200. Toutes. Je ne vais pas entrer dans les détails sur la modification de la liste des fonctionnalités. Vous pouvez le faire vous-même, mais ce que j'aimerais faire, c'est disposer les articles au centre. Allons-y et cliquons sur l'ensemble du conteneur. Nous passerons à la mise en page , nous justifierons le contenu et alignerons les éléments au centre, très bien. En alignant le centre des articles, s' est essentiellement produit que le conteneur, il s' est essentiellement produit que le conteneur, quel que soit l' élément du conteneur, a ajusté sa hauteur en conséquence Et qu'il a ajusté sa position au centre par rapport à l'axe y de notre conteneur le plus externe de cette section Flexbox en particulier J'espère que vous comprenez l' idée de créer différents tableaux de prix. 25. Élément de titre animé - Booster votre apparence hétérogène avec des animations sympas: Essayons d'ajouter un titre animé à cette section du tableau des prix. Maintenant, cette partie va devenir un peu délicate, non pas à cause de l'élément que nous allons utiliser, mais de la façon dont nous allons organiser les éléments dans cette section. Prêtez très attention à cette conférence. Comme vous le savez, cette boîte flexible a une direction horizontale. Nous avons placé cet élément du tableau des prix dans chaque conteneur, nous avons trois conteneurs, conteneur un, le conteneur deux et le conteneur trois. Nous aimerions maintenant vous donner, ou plutôt devrais-je dire, ajouter un autre conteneur afin que nous puissions placer notre titre animé en haut de la page Bien, un autre conteneur à l'intérieur duquel nous aurons ces trois conteneurs. Pour cela, permettez-moi simplement changer la disposition de la boîte flexible en verticale. Pour l'instant, faites juste attention à cela très, très attentivement. Je vais cliquer sur Ad Element. J'apporterai mon contenant à l'extérieur. Nous allons simplement nous assurer que ce conteneur que nous avons ici n'en fait pas partie. Je peux simplement cliquer sur Structure. Vous pouvez constater que le conteneur vide que nous avons fait partie d'un conteneur imbriqué qui a également un tableau des prix, ce que nous ne voulons pas Nous pouvons simplement le faire glisser et le placer juste en dessous. Nous pouvons simplement le placer juste au-dessus de ce conteneur existant avec tableau des prix. Bien. Maintenant, nous avons celui-ci. Maintenant, nous aimerions également ajouter un autre conteneur. Essayons de le dupliquer en le dupliquant simplement. Nous pouvons faire glisser et placer ce conteneur à l'intérieur de celui-ci. Ici, nous avons deux conteneurs dans cette boîte flexible, le conteneur le plus extérieur un et le conteneur le plus extérieur Bien. Supposons qu'il s' agit d'une boîte flexible. À l'intérieur de la boîte flexible , nous avons deux boîtes Amazon. Amazon Box 1, Amazon Box 2. Maintenant, à l'intérieur de cette boîte Amazon, nous avons une boîte de Walmart, l'autre de Best Pi et l'autre boîte d' un autre fournisseur C'est bon. Permettez-moi de le faire glisser et de le placer juste à l'intérieur. Permettez-moi simplement d'ouvrir une structure ici. Nous avons le conteneur à l'intérieur duquel nous avons un conteneur avec tableau des prix. Et ici, nous avons un autre conteneur avec un tableau des prix. Ils ne sont pas imbriqués, ils sont individuels. Vous pouvez voir la structure ici, juste ici. Nous avons le troisième conteneur qui n'en fait pas partie. Vous pouvez voir que l'alignement est un peu différent. Essayons de le placer juste ici pour en faire partie. Je peux simplement l'arranger comme ça, et vous constaterez que les trois apparaissent dans un seul conteneur. Maintenant, cette boîte, ce conteneur seront mis en position horizontale. C'est ainsi que tu vas apparaître. Mais vous constaterez que le diamant doit apparaître en premier, le platine en dernier et le titane au centre. Essayons de les réorganiser. Nous pouvons nous installer ici. Ce que je vais faire, c'est cliquer sur Structure. En cliquant dessus avec le bouton droit de la souris, titane devrait apparaître au milieu, ce qui est le dernier. Jouons au set ci-dessus, le titane apparaîtra ici. Le dernier, qui est le diamant, devrait apparaître en premier. C'est ce que nous allons faire. Le platine arrivera en dernier. Le platine arrivera en dernier. OK, que s'est-il passé ? Nous devons d'abord nous assurer que toutes les structures sont correctement effondrées. Le diamant, puis le titane devraient apparaître. Le titane est juste là. Nous le placerons ici et vous constaterez que c'est notre arrangement qui convient. Nous allons maintenant ajouter notre titre animé. Cherchons un titre animé. Je vais le faire glisser et le placer ici. Vous verrez que c'est notre texte qui a le dernier mot. Il y avait une animation circulaire qui circulait. Modifions d'abord le texte indiquant que cette page contient un tableau des prix. Bien, quel devrait être le texte surligné ? Supprimons celui-ci. Et utilisons le tableau des prix. Bien, voilà, cette page contient un tableau des prix. Vous pouvez même l'ajouter après le texte. Cela signifie qu'après l'avoir mis en évidence, que doit-il afficher ? Vous pouvez même l'ajouter. Voulez-vous qu'il suive une boucle infinie ? Vous pouvez cocher cette case. Combien de temps souhaitez-vous que cette animation dure ? Tu veux un quelconque report ? Vous pouvez ajouter toutes ces valeurs en millisecondes. Vous pouvez même ajouter un lien si vous le souhaitez. Je ne vais pas le faire, je peux changer la balise de titre à deux. Je vais passer au stylisme. Je vais changer la couleur de cette forme. Le point fort est une option d'animation. En accédant à la partie contenu, je peux changer entre les différentes animations que j'ai. Au lieu de surligner, je peux le remplacer par une rotation. Il va taper le texte, quelque chose comme ça. Vous le trouverez comme ça au lieu d'être stylé. Au fur et à mesure de la rotation, nous pouvons changer le type d'animation. Tu veux taper ? Tu veux que ce soit un clip ? Que se passera-t-il si nous avons un clip ? Découvrons-le, voici comment il affichera le texte. Vous avez également le flip, nous allons retourner le texte. Voyons voir, Flip, cela se passe verticalement. Vous avez un tourbillon, il se retourne comme ça. Ensuite, vous avez un affichage des stores comme celui-ci. Ensuite, vous avez un drop in wave, vous avez un glissement vers le bas. Je pense que taper serait mieux. Faisons en sorte que ce soit une saisie. Ici, vous avez différents textes rotatifs que nous pouvons utiliser. Cette table de pages, d'accord. Cette page contient un tableau des prix, très bien. Ici, vous avez également le texte suivant, que nous allons garder vide. Après avoir accédé à l'onglet Style, nous choisirons la couleur du titre Faisons en sorte que le blanc entre dans la typographie. Réglons ça sur Poppins. Nous pouvons ajouter du texte. Si nous pouvons même changer la couleur du texte animé. Le texte animé pourrait être quelque chose comme, ajoutons un ton gris clair. Nous pouvons ajouter une mélodie gris clair ici. Nous pourrions en changer la famille de formulaires en Poppins. Nous pouvons modifier la couleur de sélection. Ici aussi, vous avez une couleur de sélection différente , que nous n' allons pas aborder à nouveau. L'accès à l'onglet avancé est identique à l'autre. Publions. Nous pouvons voir les modifications en faisant défiler la page vers le bas jusqu' à notre page Web Actualisons-le, et une fois que vous aurez fait défiler la page vers le bas, vous trouverez votre page contenant un tableau des prix. Très bien, voici comment cela apparaît. Vous constaterez peut-être qu'il sélectionne l'ensemble du texte et la couleur d'arrière-plan passe au noir. C'est parce que nous n' avons pas de texto final. Essayons de changer après le texte. Comme si quelque chose comme cette page avait un tableau des prix ou quelque chose comme Elementor Pro Element Ce qui se passe, c'est qu' entre les deux , vous voulez que du texte soit modifié, vous pouvez le faire. Vous pouvez même modifier le texte rotatif au lieu du tableau des prix. Vous pouvez créer cet Elementor Pro. Que se passe-t-il maintenant ? Voyons voir ici. Cette page contient un tableau des prix. Permettez-nous de le taper. Ici, vous pouvez trouver le tout. Ici, nous pouvons passer au style. Nous pouvons choisir le texte sélectionné. Le texte sélectionné, qui sera affiché actuellement, est défini sur certains paramètres par défaut, qui sont de couleur noire. Si je remplace cela par quelque chose autour du blanc, voyons ce qui se passe. Vous pouvez voir que le texte entier a été sélectionné en blanc. Vous pouvez ajouter d'autres types de couleurs si vous le souhaitez. Vous pouvez modifier la couleur du texte, etc. Bien, j'espère avoir compris le point sur l'ajout d'un titre animé à votre section 26. Élément FlipBox - C'est unique !: Très bien, essayons d'utiliser un autre élément qui sera la boîte à rabat. Je vais ajouter une nouvelle section. Nous allons conserver cette mise en page. Augmentons la hauteur à environ 05:50 pixels. Bien. Nous allons changer la couleur de fond. Donnons-lui une image ici. Je vais sélectionner cette image. Je trouve que je peux même faire cette couverture et ne pas la répéter. Ne répétez pas. Et voici l'image. Maintenant, à l'intérieur, attendez tout d'abord une seconde. Au lieu de l'utiliser ici, cette image pourrait être utilisée en superposition d'arrière-plan Ici, nous allons passer à la superposition d'arrière-plan. Classique Sélectionnez la même image, les mêmes paramètres seront appliqués. Cela signifie que nous voulons que l'écran soit couvert, répété, répété. L'opacité serait légèrement supérieure à environ 18. Maintenant, c'est ce que nous voulons. Ajoutons un élément appelé flip box. Je vais le faire glisser et le placer ici. Maintenant, une fois que je l' ai placé, je peux d'abord l'aligner au centre en justifiant le contenu et en alignant les éléments au Vous constaterez maintenant qu'il a une description du titre et un bouton et qu'il se retourne, droite, donc il a deux faces Cela peut s'avérer utile lorsque vous essayez d'offrir un service et que vous ne voulez tout simplement pas intégrer tout le contenu de la carte elle-même. Vous pouvez ajouter un effet de retournement ici. Vous pouvez afficher quelques éléments. Maintenant, ce ne serait pas nécessairement quelque chose similaire à ce que nous avons fait dans le tableau des prix, car le tableau des prix répertorie toutes les fonctionnalités. Mais ce ne serait qu'un bref aperçu de ce qu' est le service, n'est-ce pas ? Vous pouvez trouver le cas d'utilisation, celui qui vous convient le mieux. Et ce retournement ne se produira qu'au survol. Chaque fois que vous déplacez votre curseur vers cet élément, le retournement se produit. Et lorsque vous ramenez votre curseur en dehors de cet élément, le flip reprendra correctement la position initiale du paquet. À l'intérieur de cette boîte à rabat en particulier, vous avez du contenu. Ici vous avez le contenu, et ici vous avez le contexte. Ici, nous pouvons changer l'arrière-plan en classique ou en dégradé. Je peux choisir l'image, alors laissez-moi sélectionner cette image comme arrière-plan. Maintenant, une fois que j'ai fait cela, je peux sélectionner la superposition d'arrière-plan Ici aussi, je peux choisir différentes couleurs si je le souhaite. Et ce que j'aimerais ajouter c'est une image au lieu de l'icône en forme d'étoile. Je peux accéder au contenu. Et au lieu d' utiliser l'icône, qui se trouve ici, laissez-moi abord rechercher l'icône élémentaire. Avons-nous ? Oui, nous le savons. Insérons l'icône élémentaire elle-même ici. Sinon, je pourrais simplement cliquer sur Image et ramener l'image élémentaire, que j'ai ici. Tu peux voir. Mais la taille de l'image est bien trop grande et je dois l'ajuster. Au lieu de le faire, je peux en sorte que ce soit vraiment petit à moyen. Il ne serait pas possible d'en contourner les paramètres. Utilisons donc simplement cette icône élémentaire. Très bien, une fois que nous l' avons fait, nous pouvons le visualiser dans un format empilé C'est la vue de l'empilement, ce qui signifie qu'il y aura un cercle Ou vous pourriez également avoir une option encadrée. Vous avez maintenant différentes options, voulez-vous que le cadre soit circulaire ? Tu veux qu'il soit carré ? Voulez-vous que la pile soit au format carré ou au format circulaire ? Vous pouvez choisir entre différentes options. Très bien, je vais opter pour cette option maintenant. Voici le titre. Je peux changer cela en Elementor pro, très bien. Je peux donner une description de cinq étoiles à ce cours juste à des fins de description. Cinq étoiles pour ce cours. Et j'aime bien suivre ce cours. Très bien, nous en avons une description. Ici, vous êtes également de retour dans le contenu. Cela signifie donc qu'une fois que vous avez inversé ce que le contenu doit afficher ici, nous pouvons choisir entre différents arrière-plans. Vous pouvez jouer avec différents paramètres. Ici, vous pouvez modifier les différentes balises de titre que vous avez. Pour le titre, vous pouvez placer H un et H23. Maintenant, cela vous aidera à des fins de référencement. Vous avez ici le titre de votre description que vous pouvez définir sur span tag ou vous pouvez ajuster la hauteur et, en conséquence, laissez-moi le définir par défaut. Vous pouvez ajouter davantage de rayon de bordure. Je place ceci vers la droite, vous constaterez que l'ensemble de la boîte à rabat est transformé en majuscules. Je peux le ramener à dix ou douze. 12, c'est bien trop petit. On peut juste en faire environ 16. Voyons à quoi cela ressemblera en 2020. Ça a l'air bien. Je vais juste en faire 20. Maintenant, quel effet je veux pour le flip ? Est-ce que je veux que ça soit retourné comme ça ? Est-ce que je veux que ce soit une diapositive ? Que se passe-t-il lorsque je déplace le curseur ? Vous pouvez le voir apparaître comme ça. C'est l' effet de diapositive que vous avez. Appuyez dessus. Mon curseur. Cela repousse le contenu original vers le haut. C'est l'effet. Vous avez zoomé. Il zoome, vous faites un zoom arrière comme celui-ci. Vous avez également un fondu. Effet très simple. Restons sur cette diapositive. Que se passera-t-il si nous avons un flip ? Vous avez également des instructions pour chaque direction. Vous voulez que ce soit un retournement vertical vers le haut. Tu veux que ce soit en bas ? C'est un flip ? Tu veux que ce soit du côté droit comme ça ou du côté gauche comme ça ? Tu peux même changer ça. Je vais choisir ce qu'il faut. Nous pouvons même lui donner une profondeur de trois D. Voyons ce qui se passe lorsque je choisis une profondeur à trois D. Si j'amène mon curseur, vous verrez qu' il a une forme d'octet. Permettez-moi de sortir n'importe quel objet que j'ai près de moi. J'ai cette télécommande, je peux juste la retourner. C'est ainsi que le flip fonctionnera réellement. Bien. Il s'agit de la profondeur en trois D, encore une fois pour les effets et animation du tableau des prix. De plus, si vous y retournez, pas pour le tableau des prix, mais je dirais un titre animé ici Nous avons discuté du fait qu'en rotation, nous avons différentes options pour les animations, mais nous avons également souligné ici que vous avez un cercle. Vous avez aussi Curly. Vous ne trouverez peut-être pas la couleur de la boucle très attrayante car elle est rouge et la couleur du dégradé de fond est également rouge Permettez-moi simplement de changer la couleur de la forme pour qu'elle soit à peu près blanche afin qu'elle soit visible. Ici, vous trouverez des boucles, vous trouverez des soulignés en haut et en bas Des deux côtés, vous avez un double soulignement, zigzag, vous avez une diagonale, ce sera une croix Maintenant, vous pouvez également le mettre en avant, au lieu d'apparaître, en le faisant apparaître en arrière du texte, vous pouvez également le faire apparaître devant en accédant simplement au style en sélectionnant cette option de bascule Mettez-le au premier plan et vous verrez que ce texte est en forme de barre oblique. Vous pouvez avoir des bords arrondis. Vous en avez aussi d'autres comme Strike Through. Vous avez également X, il barricadera votre texte. Bien, mais nous garderons cet effet de rotation et de saisie pour le titre animé Ce ne sont là que quelques points que j'ai manqués dans la vidéo précédente. Maintenant, dans cette partie où j'ai cet effet de retournement pour la boîte à rabat, quelles autres options ai-je dans la balise de style, dans l'onglet style ? Je peux choisir entre les différentes couleurs de mon texte. Dans le titre, la couleur du texte est définie sur la typographie blanche Je peux le remplacer par des poppins. Je peux augmenter la taille de police à environ 35. Je peux même modifier le trait du texte. Je peux également changer le texte animé en blanc. Voyons ce qui va se passer. Je peux à nouveau changer la typographie en poppins. J'ai un trait de texte, j'ai sélectionné. OK. Toutes ces choses se produisaient pour le texte animé. C'est ma faute. Toutes ces choses qui se passent pour un titre animé Mais nous contournons la boîte à rabat. Passons au style. Et vous trouverez ici différents alignements pour votre boîte à rabat. Je peux le faire à gauche, à droite, sur la ligne médiane. Je peux changer la position pour qu'elle soit au centre vers le haut ou au milieu. Faisons en sorte que ce soit le milieu. Je peux même définir le type de bordure. Est-ce que je veux qu'il soit solide ? Est-ce que je veux que ce soit le double ? Est-ce que je veux qu'il soit pointillé et ainsi de suite. Mais pour l'instant, restons comme pour le moment, vous ne trouverez pas de bordure en pointillés car nous n'avons pas ajouté de largeur de bordure Si j'ajoute de la largeur de la bordure, vous constaterez qu' il y a une bordure. Je peux changer la couleur en blanc, et maintenant vous trouverez des bordures en pointillés sur l'ensemble de la boîte à rabat. Hein ? Nous pouvons simplement définir cette valeur par défaut ici. Vous trouverez un certain espacement autour de votre icône. Vous pouvez également modifier la couleur du texte. La couleur principale de l'icône peut être modifiée, et la couleur secondaire de l'icône peut également être modifiée. Mais revenons simplement à la valeur par défaut. Vous avez la taille de l'icône que vous pouvez ajuster en conséquence. Permettez-moi de le ramener à la valeur par défaut. Vous pouvez y ajouter du rembourrage. Vous pouvez faire pivoter cette icône. Vous pouvez ajouter un rayon, un rayon de bordure autour de votre icône. Vous pouvez ajouter un espace entre votre titre et votre icône Vous pouvez changer la couleur de votre titre en blanc afin qu'il soit visible. Maintenant, en venant à la partie description, vous pouvez la remplacer par cette partie blanche. Encore une fois, vous pouvez définir la typographie de votre titre et de votre description Ici, nous avons la couleur du texte, vous pouvez trouver la couleur du texte en blanc. De plus, chaque fois que je déplace mon curseur n'importe où dans la couleur, cela change la couleur de mon bouton. Vous pouvez le trouver ici. D'accord, cela se produit lorsque nous sommes sous le dos, nous avons deux options de style, avant et arrière. Dans la partie arrière, une fois que vous faites défiler l'écran vers le bas, vous trouverez la couleur du bouton. Vous pouvez le réinitialiser. Vous pouvez modifier la couleur de la bordure au lieu du blanc. Vous pouvez le remplacer par n'importe quelle autre couleur que vous souhaitez donner. Vous pouvez ajouter un rayon de bordure comme vous pourriez ajouter une certaine largeur de bordure pour que la bordure paraisse un peu grasse. Et vous pouvez changer la couleur du texte de description. Vous pouvez même changer la couleur du texte du titre en blanc. C'est bon. Vous pouvez changer la typographie poppins pour tous les textes que vous avez vus, recto comme au verso, pour les deux Voici le titre. Vous pouvez le remplacer par du blanc. Voici à quoi cela ressemble. Bien, j'espère que vous comprenez comment contourner le problème. Boîte à rabat dans Element ou Pro. 27. Diapositives, carrousel média et éléments de galerie - Vidéo emballée !: Les gars, maintenant j'aimerais faire avancer les choses très rapidement. Dans cette vidéo, nous allons aborder trois éléments fournis par element or pro, plug in. Nous allons d'abord examiner l'élément des diapositives, puis nous verrons la galerie, puis le carrousel multimédia Ajoutons une nouvelle boîte flexible. Peu importe la direction que vous avez définie, mais nous voulons juste un conteneur. Nous pouvons le rendre horizontal. Ici, je vais ajouter l'élément slides. Je peux juste le glisser-déposer ici. Vous trouverez maintenant le texte du titre, le texte de description, un bouton au milieu. Maintenant, en bas, vous trouverez trois ellipses, trois points, qui représentent le nombre de diapositives présentes pour cet élément Dans les directions gauche et droite, vous trouverez des flèches qui vous aideront à naviguer entre les différentes diapositives de l'ensemble de votre élément. Maintenant, quand est-ce que cela pourrait être utile ? Supposons que vous essayiez de créer une section dédiée aux héros de votre groupe de commerce électronique, laquelle vous présentez les différents produits que vous vendez ou peut-être les différents services que vous proposez qui pourraient vous être utiles lors de la création d'une page produit Et cette page produit doit comporter une section dédiée aux héros. La section Hero pourrait être ceci, un format de diapositive. Maintenant, si j'essaie de publier ceci, voyons à quoi cela ressemble. Si je fais défiler l'écran jusqu'à cette partie, vous constaterez peut-être que la largeur n' est pas occupée correctement. La largeur n'est pas définie à 200 %. Comment pouvons-nous changer cela ? Nous pouvons simplement fermer cette fenêtre contextuelle. Retournez à nos paramètres Elementor, sélectionnez votre mise en page Flexbox, sélectionnez l'onglet Mise en page Et dans la largeur du contenu, nous devrons cliquer sur Full Width. Maintenant, si je sauvegarde ceci, attention, je ne l'ai pas modifié dans les paramètres de la diapositive. J'ai changé cela dans les paramètres du conteneur, n'est-ce pas ? Si je fais défiler l'écran jusqu'à la partie où se trouve mon curseur, vous verrez que toute la largeur est occupée Hein ? Revenons en arrière maintenant. Je peux modifier le contenu si je le souhaite. Si je clique sur la flèche suivante, vous constaterez qu' une animation circule. Il y a une certaine couleur d'arrière-plan et l'animation du texte apparaît également bien de bas en haut. Bien, il y a certaines choses que nous pouvons changer ici. Si vous souhaitez ajouter d'autres diapositives, il vous suffit de cliquer sur l'élément d'ajout. Si vous souhaitez en créer une copie, vous pouvez sélectionner l'icône du document. Si vous souhaitez les supprimer, vous suffit de cliquer sur l'icône en forme de croix. Essayons de développer et de voir ce que chaque diapositive offre en termes de mise en page. Si je clique dessus, vous pouvez changer la couleur de fond ou ajouter une image. Permettez-moi d'ajouter une image ici. J'ai trois images de produits différentes. Je vais d'abord ajouter cette image. Une fois que je l'ai ajouté, les paramètres sont appliqués pour la première diapositive. Vous pouvez le voir ici. Au départ, nous étions dans la deuxième diapositive. Il vous suffit de naviguer entre les différentes diapositives. Maintenant, l'option d'affichage de la taille serait définie pour couvrir. Que se passe-t-il si je change ce paramètre pour contenir ? Vous connaissez la différence entre contenir et couvrir. Évidemment, vous pouvez voir comment il occupe la largeur. Si je le fais en mode automatique, il ajustera automatiquement le dimensionnement pour qu' il soit zoomé Mais nous ne voulons pas que cela se produise, nous pouvons donc simplement le remettre en question. Nous pouvons jouer avec différents effets. Nous avons ici l'effet Ken Burns. Essayons de basculer et de voir ce qui se passe. Ce qui se passe dans l'effet Ken Burns , c'est que vous pouvez voir un léger effet de zoom lorsque la diapositive est active. Il existe une certaine direction de zoom que vous pouvez définir si vous souhaitez zoomer un zoom arrière, vous pouvez choisir entre les différentes options que vous souhaitez, mais je pense qu'un zoom avant serait une bonne idée Si vous souhaitez ajouter une couche d'arrière-plan, vous pouvez même le faire Cette image est là en arrière-plan, mais l'image est ombrée de sorte que le texte devient visible. Sinon, ce n'était pas le cas auparavant. Vous pouvez voir le texte blanc et l' image d'arrière-plan aux couleurs vives avec une saturation complète, une transparence totale et toutes ces choses ne fonctionnaient pas avec le texte que nous avions. Ajoutons une superposition d'arrière-plan. Vous pouvez désormais passer d'un mode de fusion à un autre. Maintenant, qu'est-ce que le mode fusion ? Si vous avez utilisé différents logiciels de retouche photo tels que Photoshop ou même si vous avez suivi un cours d'expérience utilisateur sur Figma, vous devez avoir découvert le mode fusion Que se passe-t-il si je choisis de multiplier ? Si je change cela en écran ? Si je reviens à la première diapositive, voyons ce qui se passe. Il existe plusieurs options différentes. Vous pouvez assombrir, créer cette lumière, jouer les niveaux de saturation et d' autres choses de ce genre. Si je joue sur la saturation de la première image de superposition d'arrière-plan, trouve cette transparence Et la saturation est réglée de telle sorte que l'arrière-plan ressemble à ceci. Ce n'est pas très clair, ce n'est pas très sombre, mais quelque part entre les deux, cela donne un effet semblable à une vieille photo, non ? Mais restons comme d'habitude. Vous pouvez également jouer entre les différentes options dont vous disposez. OK ? Vous avez de la couleur, vous avez de l'exclusion, vous avez de la luminosité Vous pouvez jouer entre différentes options. Je peux choisir le normal, car je trouve que cela fonctionne à merveille. Dans notre cas, je peux choisir différents paramètres pour ma première diapositive. Voici le contexte que nous avons sélectionné. Passons à la partie contenu, vous pouvez modifier le titre de cette diapositive. Faisons-en des savons. Je peux modifier la description si je le souhaite. Je peux modifier le texte de mon bouton. Permettez-moi de faire comme si de rien n'était. Vous pouvez voir maintenant que le bouton apparaît ici. Vous pouvez ajouter un lien, ou vous pouvez ajouter une balise dynamique au lien afin qu' il soit automatiquement à un nouveau message ou à une nouvelle page vers lié à un nouveau message ou à une nouvelle page vers laquelle vous avez créé un lien. Maintenant, les mêmes choses peuvent également être appliquées à d'autres diapositives. Si je passe à la partie style de la première diapositive, vous constaterez qu'il y a un bouton personnalisé Voyons ce qui se passe ici. Ici, vous avez la possibilité de réorganiser le contenu dont vous disposez Nous avons une position horizontale. Maintenant, qu'est-ce que cela signifie ? Tout ce que nous avons en termes de contenu par rapport à l'axe X peut être modifié. Je pense que vous pouvez tous convenir maintenant que l'axe X, qui est horizontal, l'axe Y est vertical, n'est-ce pas ? À l'heure actuelle, alignez le centre par rapport à l'horizontale. Cela signifie que le contenu apparaît ici. Si je fais cette ligne de gauche, elle apparaîtra ici. Si je fais le bon choix, il apparaîtra ici. Bien. Si je choisis ceci ou cela, le contenu fonctionnera en conséquence. Faisons cette ligne gauche ou droite dans le premier étui à diapositives, car vous pouvez voir que le produit apparaît sur le côté gauche. Il est évidemment logique de déplacer notre texte vers la droite. Je peux également modifier la position verticale. Je peux le faire au milieu ou vers la fin. Je peux même aligner mon texte. Que je veuille qu'il soit aligné à droite, je veux qu'il soit aligné au centre, etc. Mais je pense que c'est vrai, Aline fonctionne bien, car nous voulons que le texte soit affiché uniquement dans la zone vide de notre page produit. L'image d'arrière-plan du produit. Bien. Vous pouvez modifier la couleur de votre contenu. Vous pouvez ajouter une ombre au texte si vous le souhaitez. Vous pouvez contourner sa typographie en cliquant simplement dessus Vous pouvez jouer avec le flou, l' horizontale, la verticale, etc. Ou vous pouvez rétablir les paramètres par défaut. Très bien si vous faites défiler la partie du contenu elle-même vers le bas. Ici, nous travaillions autour de la partie diapositives. Maintenant, quelle autre option avons-nous ? Nous avons des options de curseur, dont une que vous pouvez voir en bas Nous avons l'option Ellipsis, non ? Ou les points, sur lesquels on peut voir des flèches et des points. Ici, vous avez l'option de lecture automatique. Cela signifie qu'il continuera automatiquement à changer. Ou vous pourriez avoir une partie de cette pause au survol. Cela signifie que chaque fois que mon curseur survole cette diapositive en particulier, celle-ci ne change pas Si je clique dessus ou si je fais une quelconque activité sur le clavier, l'interaction sera interrompue. Ici, vous avez également la vitesse de jeu automatique. En millisecondes, 5 000 correspondent à des millisecondes. Ici, vous avez une boucle infinie. Cela signifie qu'il continuera à défiler même après avoir parcouru la diapositive numéro trois Il recommencera à zéro, c' est-à-dire à partir de la diapositive numéro un. Ici, vous avez une transition, que vous souhaitiez qu'elle soit glissante ou qu'elle soit fondue. Que se passe-t-il en cas de décoloration ? Voyons voir ici. Vous constaterez qu'il affichera une animation en fondu. Vous pouvez le voir ici. Et vous pouvez même modifier la vitesse de cette transition particulière. Maintenant, comment voulez-vous que l'animation du contenu soit zoomée vers le haut, le bas, la gauche, la droite Vous pouvez jouer entre différents types d'animation. Ici, vous pouvez voir l'animation du texte descendre. C'était pour la partie contenu. OK, au départ, nous avions tout prévu, donc nous pouvons le faire. Nous pouvons également jouer avec différents types de navigation. Ce dont nous avons discuté en ce moment concernait les flèches et les points. Voyons voir si nous n' avons que des flèches, nous ne trouverons pas de points en bas. Et si on avait juste des points ? Je ne trouverais pas de flèches dans les directions gauche et droite. Mais si nous n'avons rien de ce qui précède, nous devrons le parcourir manuellement Si je déplace mon curseur de droite à gauche, il passera évidemment à la diapositive suivante. Si je déplace mon curseur, si je maintiens le bouton de ma souris enfoncé et que je déplace mon curseur de gauche à droite, la diapositive précédente sera sélectionnée comme suit. J'espère que tu as compris. Maintenant, utilisons simplement les flèches ou faisons ce qui vous convient. Même si vous souhaitez conserver cela sous forme de flèches et de points, vous pouvez le faire. Dans l'onglet Style, vous trouverez différentes options. Que vous souhaitiez jouer avec le contenu ou ajouter du rembourrage autour de celui-ci Si vous souhaitez aligner la position de celui-ci. Si j'en fais un centre de position horizontal, à droite, vous pouvez trouver différentes choses. Que se passe-t-il pour le toboggan ? Vous pouvez voir ici que la position du contenu change. Ici, vous avez une position verticale. Vous pouvez également aligner le texte et ainsi de suite. Ici, dans la partie titre, vous pouvez changer la couleur de typographie du texte, jouer avec la description de l'espacement pourrait être la même pour le bouton que nous avons ici Ici, vous pouvez passer d'une taille de bouton à l' autre. Encore une fois, ajoutez de la typographie à votre bouton. Vous pouvez jouer sur la largeur de la bordure. Si vous souhaitez que la bordure soit un peu plus grosse, vous pouvez déplacer le curseur vers la droite Si vous voulez que la bordure soit fine, vous pouvez déplacer le curseur vers le curseur gauche, ou plutôt vers le curseur si vous souhaitez ajouter des boutons arrondis Vous pouvez augmenter le rayon de la bordure. Vous pouvez modifier les effets en mode normal et manière dont vous pouvez jouer entre les différentes navigations. Tu veux que les flèches soient à l'intérieur ou à l'extérieur ? Si vous le laissez à l'extérieur, vous pouvez modifier la flèche des couleurs. Comme le fond du conteneur est blanc, nous pouvons rendre les flèches noires. Je viens de le réinitialiser et je vais placer mes flèches à l'intérieur. Ici, vous pouvez également voir la pagination composée de trois points Tu veux que ce soit à l'intérieur ou à l'extérieur ? Jouez avec eux. Vous pouvez en modifier la taille Vous pouvez choisir la couleur de votre pagination. Avec les points situés en bas, vous pouvez jouer avec les différentes couleurs que vous pouvez définir pour activer. Les deux premières diapositives qui n' apparaissent pas sur notre écran ne sont pas actives. Ils sont comme dans une teinte grise. La diapositive qui est active, c' est-à-dire la diapositive numéro trois, est indiquée par c' est-à-dire la diapositive numéro trois, un point noir foncé. C'est ce que nous avons ici dans l'onglet Style. allant à nouveau dans l'onglet avancé, vous trouverez les mêmes choses que vous avez vues précédemment. Mais je ne vais pas non plus aborder les diapositives en profondeur, je ne vais pas perdre mon temps à faire les mêmes choses que nous avons faites pour la diapositive 1. Pour la diapositive 2.3 également, j'espère avoir compris le point. C'est bon. Maintenant, que devons-nous couvrir d'autre ? OK, c'était pour l'élément slides. Ajoutons un autre élément qui est l'élément de la galerie. Je vais ajouter une autre boîte flexible orientée vers le bas. Je vais ajouter une galerie. Permettez-moi de faire une recherche ici. Vous avez une galerie de base et une galerie simple. Je pense que les deux fonctionnalités sont assez similaires. Il n'y a pas beaucoup de différence maintenant. En gros, l'élément galerie vous permet de présenter tout votre travail. Maintenant, cela peut s'avérer utile si vous créez un site Web de portfolio, un site Web de portfolio personnel ou si vous essayez simplement de présenter tout le travail de vos clients. Les projets fonctionnent, peu importe ce que vous avez fait jusqu'à présent ou vous essayez simplement d'afficher toutes les images. Disons simplement que vous êtes photographe et que vous affichez toutes les images. Images de photographie animalière ou de magnifiques images de paysages Vous pouvez simplement sélectionner plusieurs images dans la médiathèque les télécharger ou insérer l'image à partir d'une URL différente. Ou vous pouvez ajouter et créer une lecture vidéo et une liste de lecture audio et d'autres choses du genre. Ici, je peux simplement maintenir ma touche de commande, systèmes de formulaires et ma touche de contrôle pour les systèmes de fenêtres. Et je peux sélectionner plusieurs images et vous trouverez plusieurs images sélectionnées ici en bas afin que je puisse créer une nouvelle galerie. Je peux même inverser l'ordre. Si je le souhaite, je peux les réorganiser, je peux ajouter une légende à chaque image Si je le souhaite, je peux les insérer sous forme de galerie. Ici, vous constaterez que nous avons quatre colonnes sur une seule ligne. Bien, je peux jouer avec ça ici. Vous constaterez que le type est unique et multiple. Que se passe-t-il si je choisis ce multiple ? Alors évidemment, nous n'allons pas voir toutes les images ici. Voyons d'abord tous les paramètres que nous avons pour le type unique ici. Vous pouvez les commander par défaut ou au hasard ici, vous pouvez activer ou désactiver le chargement. Le chargement différé signifie essentiellement que les images ne seront pas chargées dès le premier coup. Cela signifie que chaque fois que vous cliquez sur votre site Web, les images ne seront pas chargées en premier. Une fois que vous faites défiler la page vers le bas et que vous atteignez la partie où les images doivent être affichées, le chargement aura lieu. De cette façon, les performances du site Web pourraient augmenter dans une certaine mesure. C'est ce que vous avez dans Lazy Load. Vous pouvez jouer avec les différents paramètres de mise en page. Ici, il est réglé sur une grille. Que se passe-t-il dans Justified ? Ici, vous verrez le format justifié, ce qui signifie que la taille de l'image reflète parfaitement ce qui se passe dans les machines. Dans les machines, vous trouverez également la même chose car les dimensions de toutes les images sont à peu près les mêmes. Mais si vous avez peu d'images qui ont d'autres dimensions de hauteur et de largeur, il ajustera la hauteur et la largeur des lignes et des colonnes de manière appropriée. Vous pouvez définir ici le nombre de colonnes. Je peux le réduire à deux pour agrandir les photos de manière appropriée. Ici, vous pouvez ajouter de l'espacement entre les différents éléments. Si je déplace ma diapositive vers la droite, vous constaterez que l' espacement augmente Cela se produit un peu plus lentement, mais vous pouvez simplement jouer avec. Vous pouvez y ajouter un lien. Vous pouvez ajouter une boîte à lumière. Que se passera-t-il si j'ajoute une lightbox ? Laissez-moi simplement sélectionner ceci. Oui. Si je clique ou que je passe le curseur sur l'une des images, vous constaterez qu'elle devient un peu plus foncée Si je clique dessus, l' image s'agrandira et vous pourrez voir l'image entière correctement. C'est ce que signifie réellement Light Box. Permettez-moi de cliquer sur l'élément pour que nous puissions voir les différents paramètres. Vous pouvez jouer avec les différentes résolutions d'image dont vous disposez. Ici, vous avez une superposition. Quelle superposition souhaitez-vous avoir ? Certains ont un arrière-plan. ajouter un titre à chaque image ? Si je survole, voyez-vous un titre ? Non. Si j'en fais un titre, nous pouvons l'ajouter ici, vous trouverez le titre de l'image elle-même. Cela reprend le nom que nous avons attribué à notre image. Ajoutez également une description, une légende ou le texte alternatif. Faisons en sorte que cela ne corresponde pas au type de style que vous trouverez normal. Et vous pouvez évidemment ajouter une largeur de bordure. Vous pouvez ajouter un rayon de bordure. Vous pouvez modifier la couleur de la bordure. Vous pouvez ajouter une animation. Si je passe le curseur sur l'image, elle zoomera Il est possible qu'il fasse un zoom arrière. Il peut se déplacer vers la gauche, il peut se déplacer vers la droite. Il peut se déplacer vers le haut ou vers le bas. J'espère que tu as compris. Vous pouvez même modifier la durée de l'animation. Vous pouvez modifier les tuiles de superposition si vous souhaitez ajouter un mode de fusion, dont nous venons dans l'élément slides Quelque chose de similaire pourrait être fait ici Vous pouvez changer entre les différentes manières dont les animations fonctionnent. Vous pouvez définir la durée de superposition de l'animation. Vous pouvez choisir le style de contenu, si vous souhaitez que le texte apparaisse au centre gauche. Une ligne, non ? Une ligne au milieu, en haut ou en bas. Voulez-vous un peu de rembourrage pour votre contenu ? Voulez-vous ajouter de l' animation à votre texte ? Voulez-vous donner une animation de séquence Voici ce que vous avez pour votre élément de galerie. Maintenant, que se passe-t-il si je choisis ici, je peux ajouter plusieurs galeries. La galerie que nous avons créée en ce moment pour ces quatre personnes se trouve juste à l'intérieur de cette galerie, j'ai le titre de la galerie. Permettez-moi de donner à cela quelque chose comme les personnes qui soutiennent l'entreprise. C'est bon. Je peux sélectionner différentes images. Maintenant, cette galerie, la galerie que nous avons utilisée plus tôt pour le type unique, était différente. Il a été enregistré uniquement pour le type unique. Pour plusieurs, vous devrez créer une autre galerie ici. Vous devrez sélectionner à nouveau un tas d'images différentes. Je vais créer une galerie. Je peux l'insérer ici, et vous trouverez ici toutes les personnes. Je peux ajouter plusieurs galeries ici. Ici, j'ai le filtre sur lequel cliquer, et seule cette galerie sera affichée. Disons que vous êtes photographe. Sur vos photos de modèles, vous cliquez sur des photos de la faune et des animaux sauvages. Vous cliquez sur des photos de voitures et de produits. Ici, vous pouvez créer différentes galeries. Vous pouvez ajouter des filtres en utilisant le type multiple. C'est bon. Vous pouvez les commander comme bon vous semble. Je pense que toutes les choses qui suivent sont à peu près mêmes, ce dont nous avons discuté pour le type unique. J'espère également que nous avons compris le point sur l'utilisation de l'élément galerie. Voyons ce que nous pouvons faire avec le carousal médiatique. Ajoutons une boîte flexible horizontale. Nous allons ajouter un élément appelé media causal. Si je le fais glisser ici, il fonctionne de la même manière que les diapositives. La seule différence, c'est qu'il fonctionne avec notre galerie d'images. Pour chaque élément que vous choisissez, une image ou une vidéo. Ici, je peux ajouter trois images de produits pour chaque diapositive. Pour la première diapositive, cette image du produit serait affichée pour la seconde. Ici, je peux passer en deuxième position. Je peux choisir celui-ci. Pour le troisième, je peux sélectionner cette option, je vais simplement annuler les deux autres articles que j'avais. Maintenant, je peux changer le thème, que je veuille que ce soit un carrousel Un diaporama à effets montrera essentiellement toutes les photos ou les éléments de la galerie que j'ai en bas Et le principal, qui est actuellement en cours focalisation, sera affiché en pleine largeur. Ensuite, il y a le cover flow, qui sera comme ça, un format 3D, ce qui est plutôt cool à mon avis. Vous pouvez définir ici le nombre de diapositives à afficher par vue, nombre de diapositives à faire défiler, que leur hauteur et leur largeur. Mais si vous cliquez sur les options supplémentaires ici même dans la partie du contenu, vous trouverez des flèches que vous avez ici. Vous pouvez modifier les différents éléments de pagination. Vous pouvez le créer sous forme de lecture automatique et d'un tas de choses différentes, comme nous avons vu précédemment dans les diapositives ou l'élément slides De plus, en allant dans l'onglet style, je peux cliquer sur la navigation. Et je peux changer la couleur des flèches pour qu'elles soient noires pour la navigation. Vous trouverez ici des flèches. La taille de celui-ci est de 20 pixels. Je peux changer la couleur en noir pour qu'elle soit visible, très bien, changer la pagination, je veuille que ce soit à l'intérieur ou à l'extérieur Je peux jouer différentes choses dont nous avons déjà parlé plus tôt. J'espère que vous avez compris le point et que vous avez une bonne compréhension des trois éléments. 28. Element d'avis - Supercharger votre site Web d'entreprise avec ceci !: C'est vrai. Voyons maintenant comment nous pouvons utiliser l'élément d'évaluation. Maintenant, l' élément des critiques est un peu similaire à ce que nous avons vu pour l'élément témoignage La seule différence que l'élément d' évaluation aurait , c'est qu'il inclura des évaluations. L'élément étoiles que vous pouvez voir ici. Il y aura un lien vers différentes icônes sociales juste ici, juste en dessous de ce produit, Carrousal media Carrousel. Je vais ajouter une nouvelle section. Je vais donner à la disposition Flexbox une disposition horizontale juste à l'intérieur de ce conteneur J'aimerais ajouter des commentaires. Faisons-le simplement glisser-déposer ici. Vous constaterez maintenant que cette critique apparaît. Maintenant, ce que nous pouvons faire, il suffit de sélectionner votre contenant et de nous assurer que le contenu est justifié. Les éléments du centre sont également alignés au centre. Pour en revenir à la partie où nous avons les critiques ici, vous constaterez que les critiques, permettez-moi simplement de les modifier en pleine largeur. J'aimerais également augmenter la hauteur. Je vais augmenter la hauteur à environ 50 pour que vous puissiez voir que le centre est aligné ici. Nous avons trois ellipses ici, vous avez la critique et il y a des flèches à gauche et à droite Maintenant, il se peut que vous ne le trouviez pas très clairement au premier coup d'œil simplement parce que la couleur de fond est grise. Essayons de changer la couleur de l'arrière-plan. Je peux ajouter une superposition d'arrière-plan avec un dégradé. Essayons de voir à quoi ça ressemble. Si j'utilise cette couleur, je pense qu'elle fera son travail. Très bien, pour la deuxième couleur. Oui, gardons-le en rouge ou faisons-le tomber pour changer la couleur pour qu'elle ressemble un peu au violet. C'est bon. C'est la palette de couleurs que nous allons utiliser. Bien, vous en trouverez deux sur celui-ci et celui-ci. Maintenant, si je clique sur les avis, vous constaterez que nous avons actuellement trois avis. Chaque avis affiche l'avatar, son nom, son nom d'utilisateur et le nom d'utilisateur du profil de réseau social, ainsi que l'icône du profil de réseau social auquel il est connecté. Maintenant, quand cela peut-il être utile par rapport à l'élément de témoignage que nous avons vu plus tôt ? Cette critique ressemble à un gadget ou à une fausse. Si vous incluez ce type d' élément sur votre site Web pour montrer que vous avez confiance en vos clients, vous pouvez lier les profils de réseaux sociaux à leurs profils. Essentiellement, cela donnera l'impression que toutes ces critiques sont authentiques et que ce toutes ces critiques sont authentiques ne sont pas de fausses critiques Si je clique sur l'un des éléments, cliquons sur le premier élément ici. Nous allons sélectionner l'image de cette personne. Cela s'affichera ici. Et le nom de cette personne est John Doe. Je peux changer le titre. Ce titre représentera leur nom d'utilisateur de n'importe quel profil de réseau social auquel vous le liez. Ici, juste en dessous de l'image, vous trouverez l'icône. Cela signifie que vous souhaitiez créer un lien vers Instagram Facebook ou Linked in, cela dépend du type de profil de réseau social sur lequel ils sont très actifs. Tu devrais laisser leur lien. Vous pouvez laisser le lien de leur profil ici. Voici le titre. Maintenant, ce titre peut être différent, il peut s'agir du PDG de l'entreprise, du nom de l'entreprise et de différents types de choses, vous pouvez ajouter une note. Si j'ajoute quelque chose comme disons quatre, vous verrez automatiquement un total de cinq étoiles dont quatre étoiles vous ont été attribuées. Si je donne quelque chose comme six, il ne s' affichera pas car la valeur maximale qu' il contient est de cinq. Maintenant, vous pouvez même ajouter des valeurs décimales. En gros, si vous dites quelque chose comme 2,12 0,22 0,3, cela ne couvrira pas l'étoile entière Une fois que vous aurez atteint la barre des 2,5, elle couvrira la moitié de l'étoile. Vous pouvez voir ici que nous avons 2,5 étoiles. Je garderais cela à 4.5 Nous avons 4.5 Je peux également modifier le texte de la critique dès maintenant. Je vais juste garder ce que c'est. Je peux changer le nom, l'image pour la révision 2 et la révision 3. Je peux aussi changer le nom en Emily Plant. Juste ici. Nous pouvons changer cela pour Instagram, car je crois que la plupart des femmes sont actives sur Instagram. Maintenant, vous constaterez que la couleur de l'icône est noire. C'est solide, ce n'est pas bleu, contrairement à ce que nous avons vu avec Twitter. Que pouvons-nous faire à ce sujet ? Vous constaterez que cette icône particulière, Instagram, en suit une, une tendance. Cette icône n'apparaît que là où l'icône complète de la perruque une bordure noire et des lignes noires, vous ne pouvez pas changer la couleur. Si vous souhaitez télécharger manuellement l'une des icônes, vous pouvez cliquer sur ce téléchargement et parcourir le fichier où il se trouve dans votre système. Bien, pour en revenir à cette partie, point trois. Je peux le remplacer par Will Smith. Je vais remplacer l' image par le ciel. Maintenant, je vais lier Facebook. C'est bon, nous y voilà. J'ai utilisé trois profils de réseaux sociaux, Facebook, Twitter et Instagram. C'est bon. Je ne vais pas modifier l'avis, je vais juste le garder, peu importe ce qu'il dit. Je peux fabriquer d'autres objets. Je peux également ajouter d'autres articles. Si je veux, je peux en faire une copie. Je pourrais en retirer certains. Ici, j'ai la possibilité de choisir le nombre de diapositives à afficher pour affichage. Et si j'ai plusieurs avis ? Disons qu'au lieu de trois, j'en ai environ six. Bien. Seuls deux avis doivent être affichés. Pour la première diapositive, vous pouvez voir que nous avons deux critiques. Si je fais défiler la page ici, vous trouverez un autre ensemble de deux, puis deux autres. Celui-ci était également présent dans la deuxième diapositive. Cela se répète pour la troisième diapositive. Continuons à faire ce genre de choses. Ici, vous avez les diapositives par vue. Vous avez ici des diapositives à faire défiler. Combien de diapositives pouvez-vous voir ? 12,345,6 Donc, ici, vous pouvez le réduire à peut-être, disons trois Que se passera-t-il dans ce cas ? Seules quelques critiques seront affichées correctement. Ces évaluations financières seront affichées si vous jouez sur les diapositives pour les faire défiler. Passons à la valeur par défaut ici. Vous pouvez définir la largeur de chaque avis si vous souhaitez donner cette petite section de commentaire, puis vous pouvez définir la largeur à 80 %. Vous avez également des options supplémentaires, que nous avons également vues dans le carousal médiatique, à savoir activer ou désactiver l'icône en forme de flèche ici, à gauche et à droite Pour la nation Pg, vous pouvez utiliser points, des fractions ou une barre de progression. La barre de progression apparaîtra en haut. Bien, pour cette revue, je vais utiliser la pagination Je peux définir la durée de la transition. Vous pouvez voir qu'il se déplace assez rapidement avec environ 500 millisecondes Ici, vous avez la possibilité de jouer automatiquement. Vous pouvez régler la vitesse de lecture automatique. Vous pouvez créer cette boucle infinie ou simplement la désactiver pour qu'elle ne modifie pas les avis encore et encore. Si je déplace le curseur sur l' un des avis, vous constaterez qu'il s'arrête. Si je clique, il fera la même action. Cela signifie qu'il va faire une pause ici. Vous pouvez définir l'image. L' image dont nous parlons est l'avatar ou l'image de la personne. Ici, vous avez de la charge paresseuse dont nous avons parlé. Je ne vais pas y retourner, en venir à la section style. Vous pouvez modifier l'espacement entre les éléments ici Si vous n'avez qu'une seule critique dans une diapositive, cela n'a aucun sens de déplacer le curseur Ici, vous avez un espacement entre les différents avis. Vous pouvez modifier la couleur d' arrière-plan de chaque avis. Que se passe-t-il ? Laisse-moi te montrer. Si je change de couleur, vous verrez que les paramètres de couleur d'arrière-plan sont appliqués à la critique elle-même. Très bien, ici, vous pouvez ajouter une bordure si vous le souhaitez. Que se passe-t-il si j' ajoute quelque chose comme, disons simplement 2345 ? Même si j'en ajoute cinq, vous ne le verrez pas car la couleur est très similaire à celle que nous avons comme couleur de fond par défaut. Mais si je change la couleur de la bordure pour quelque chose comme le noir, vous pouvez maintenant voir que la bordure semble très grasse. Si nous le réduisons à peut-être, disons simplement deux, cela aurait l'air bien. Ou peut-être même trois. Je peux ajouter un rayon de bordure si je veux que les témoignages ou les critiques apparaissent dans un format à bords arrondis. Je peux le faire, je peux ajouter du rembourrage pour que mon contenu ne colle pas à la Que se passe-t-il si j' augmente simplement la taille du rembourrage ? C'est ce que tu vas obtenir. Bien, vous pouvez annuler en ajoutant simplement zéro à tous les éléments. Mais si vous le faites, que se passera-t-il ? Vous verrez simplement que le contenu touche la bordure de vos avis. Nous pourrions augmenter le chiffre à peut-être, disons environ 15. 15 feraient bonne figure ici. Vous pouvez définir la couleur d'arrière-plan uniquement pour l'en-tête. Si je définis la couleur, vous verrez que la couleur d' arrière-plan sera appliquée qu'à la partie où vous avez le nom de la personne, son poste ou l'URL du profil, l'icône du réseau social et son avatar. C'est bon, très bien. Si j'ajoute un écart, vous constaterez que l'écart entre le contenu et l' en-tête augmente. Nous allons simplement annuler cela pour qu'il revienne aux paramètres par défaut pour la couleur d' arrière-plan. Je vais également le réinitialiser. Nous avons un séparateur. Vous pouvez voir ici que vous avez le séparateur. Vous pouvez modifier la couleur du séparateur si vous le souhaitez, mais nous garderons la couleur par défaut. Et vous pouvez même modifier la taille du séparateur. Si vous voulez que ce soit gros, vous pouvez le faire grossir. Si tu veux être étroit, tu peux le faire. Retrouvez maintenant cette partie, le John Doe et le Emily Blunt Vous constaterez que le contenu apparaît un peu plus bas que l'en-tête. Cela signifie qu'il y a un certain écart entre l'en-tête et le contenu par rapport à cette critique. Particulièrement parce que cette critique a obtenu les bonnes notes, elle a donné quelques étoiles, mais pas pour cette critique. Si vous ajoutez des notes pour tous les avis, vous constaterez que le contenu sera ajusté automatiquement, n'est-ce pas ? Si nous allons dans la partie texte de la section style, vous pouvez changer la typographie, vous pouvez changer la couleur du nom, le nom la personne, le titre The Review Review, voici ce qui est écrit dans le texte de Laura Epsom Alors vous avez une image. Maintenant, pour l'image, vous pouvez augmenter ou peut-être diminuer la taille de la personne ici. Si je le fais aux alentours de 70, voici à quoi cela ressemblerait. Lumière. Ou peut-être que je pense que 40 à 50 fonctionneront très bien. Ici, il y a un écart entre le nom et la photo. Ici, vous avez le rayon de la frontière. Si vous définissez ce rayon de bordure à zéro, vous aurez des arêtes pointues par rapport à des arêtes arrondies Si vous souhaitez en faire cercle aux bords arrondis ou une forme carrée aux bords arrondis, vous pouvez jouer avec la bordure D pour qu'elle corresponde à peu près à ces paramètres, qui ont un rayon de bordure de dix pixels. Si je vais sur, je peux le rendre officiel ou personnalisé en cliquant sur Personnaliser. Maintenant, pour cela, je peux changer de couleur. Vous pouvez voir que pour Twitter, couleur de l'icône passe également au rouge. Pour qu'Instagram passe au rouge, idéalement, la couleur Instagram est réglée sur, je suppose, le violet ou le violet. Vous trouverez ici les paramètres appliqués à Facebook. De plus, si je réinitialise cela, vous constaterez que la couleur officielle est choisie. Vous pouvez augmenter ou diminuer la taille des icônes sociales. Ici, vous avez la note. Quelle note souhaitez-vous ? Font awesome, ou Unicode. Que se passe-t-il avec Unicode ? Vous pouvez voir qu'il existe différents types de disposition des étoiles. Si je le fais comme des paramètres non marqués, comme des paramètres solides. Si je fais ce plan, vous trouverez un autre décor, non ? Je choisis fontosum et outline. Il y aurait une légère différence entre la note que vous verrez. Très bien, ici vous avez du solide et vous avez un plan. Vous pouvez modifier le dimensionnement de ces évaluations. Vous pouvez même ajouter un peu d'espacement, si vous le souhaitez, entre chaque étoile individuelle Vous pouvez changer la couleur des étoiles du jaune au rouge, à orange, comme vous le souhaitez, vous pouvez même changer la couleur des étoiles non marquées Bien. Enfin, nous avons la navigation. Maintenant, cette navigation fait référence aux flèches que nous avons dans les directions gauche et droite et aux points de pagination inférieurs que nous avons Je pourrais peut-être jouer avec la taille des flèches, changer la couleur pour qu'elles soient visibles Vous pouvez le voir ici, le blanc est le plus visible. Au lieu d'avoir une couleur gris clair, je pourrais jouer avec différentes tailles de pagination Je peux même en changer la couleur, juste la couleur des diapositives actives. Toutes ces choses peuvent être faites ici en accédant à la section avancée. Vous pouvez jouer avec la marge et le rembourrage, vous pouvez aligner le contenu , etc. J'espère que vous avez compris quand et comment utiliser l'élément d'évaluation. Du plug in Element ou Pro. 29. Table des matières pour vos articles de blog: Les gars, cette conférence sera très utile pour ceux qui vont publier des factures bloquées sur leur site Web. Comme vous pouvez le voir ici sur ma page Wikipédia. Et j'ai recherché un article de presse sur le Web sur Wikipédia pour toutes les recherches que vous effectuez, il s'agisse d' un élément de presse Web ou de tout autre élément que vous recherchez, vous trouverez certainement la table des matières sur le côté gauche. C'est ce que nous allons utiliser notre site de presse en ligne. table des matières est un élément proposé par l'element ou le pro plug in. permettra aux utilisateurs qui consultent votre bloc de publication de passer d'un titre à l' autre et de passer d'une partie de votre publication à un autre afin d'ignorer le contenu qu'ils jugent inutile pour leurs recherches ou simplement à des fins de collecte d'informations Si je clique ici sur Plugins, vous verrez que automatiquement, le contenu passe directement à la partie où je souhaite lire J'ai ici le nom du sujet, ou devrais-je dire le sous-sujet, et le contenu lui-même. La façon dont toute cette page est configurée, le titre est tres, il est défini en H, une balise ici vous avez le contenu, qui se trouve idéalement dans la balise P ou span. Ensuite, il y a la division de la vue d'ensemble. Vue d'ensemble, en dessous de laquelle se trouve un séparateur. En gros, cela signifie qu'il s'agit d'une balise H two qui définit les sous-sujets Maintenant, dans les sous-sujets, vous pouvez avoir encore plus de sous-sujets tels que les thèmes, plug-ins et les applications mobiles, l'accessibilité, l'accessibilité Ce sont vos trois tags H. C'est bon. Il s'agit de la hiérarchie que suit n'importe quel article en bloc , reproduite de la même manière J'ai copié l' intégralité du contenu de cette page et créé un nouveau bloc de publication ici. Vous constaterez que j' ai le titre comme adresse. Ici, j'ai du contenu. Vous pouvez voir qu'il s'agit de votre balise de titre. Ça fait deux. Vous pouvez voir que vous pouvez simplement changer entre les différentes balises si vous souhaitez donner et si vous souhaitez donner un paragraphe à l'un des mots, vous pouvez simplement les surligner et cliquer sur ce bouton ici. Celui-ci est H Three Tag, non ? Je n'ai ajouté aucun séparateur entre la balise H two et le contenu. Si vous voulez donner, vous pouvez le faire. Ici, vous avez à nouveau ceci en tant que H trois. Si vous faites défiler l'écran vers le bas, vous constaterez que d'autres balises H deux sont également présentes. C'est le genre d'article que nous avons et nous allons contourner ce problème. Revenons à notre tableau de bord d'adresses. À présent, nous allons passer sous Modèles et Générateur de thèmes. Maintenant, une fois que nous aurons cliqué ici, nous passerons à la publication unique et nous importerons certains des modèles prédéfinis pour la conception de la publication unique. Vous trouverez ici un tas d'options différentes. J'aimerais continuer avec cette partie. Je vais juste insérer ceci, très bien, même si vous pouvez voir qu'il affiche un bloc de recettes de sauce pesto. Mais par défaut, aucun contenu par défaut ne sera affiché. Il s'agit essentiellement d'appliquer les paramètres de style à votre publication en bloc existante. J'espère que tu as compris. Insérons-les dans notre page. Vous trouverez ici le dernier article de bloc qui a été pressé, donc c'est ce qu'il a sélectionné ici même dans ce conteneur en particulier. Idéalement, créez une image vedette pour votre publication en bloc qui apparaîtrait comme image d'arrière-plan pour ce conteneur. Vous avez ici deux conteneurs pour cette boîte flexible. Ici, vous avez le titre, une description ou je dirais des informations sur le message, quand exactement cet article a-t-il été publié ? En dessous, vous trouverez les détails ou un extrait. Pour le moment, je n'en ai pas donné à part ce billet en bloc, vous ne trouverez rien ici. Ensuite, vous avez le contenu lui-même. Vous pouvez voir qu'il y a plusieurs choses différentes. 23 balises. Une fois que vous aurez fait défiler la page vers le bas, vous trouverez une option pour le partager et ajouter des commentaires si vous souhaitez le faire. Juste en bas de cette page de blocage, vous trouverez un article de bloc ou un article de bloc connexe publié par le même auteur. Correct. Ce sont les choses que vous trouverez idéalement pour le moment. Je ne vais pas changer ou peut-être modifier les paramètres de style du titre et des informations de publication, et tout cela parce que ce n'est pas le but de cette conférence. Je vais simplement ajouter rapidement un nouvel élément et je vais rechercher la table des matières, que je vais simplement faire glisser et déposer ici dans ce conteneur. Maintenant, dès que je passerai, vous constaterez que nous avons cet aperçu des deux balises H. Nous avons ces nombreux tags. Maintenant, il reprend également ce qui suit, cette partie où cela fait en fait partie de notre page de blocage, mais pas de notre contenu, n'est-ce pas ? Comment les supprimer de notre table des matières ? Parce que cela ne fait pas partie du contenu du titre Wordpress. Ce sont les éléments qui font partie du contenu, n'est-ce pas, de la vue d'ensemble à l'histoire. Cela fait partie de notre contenu. Dans la vue d'ensemble, vous aurez des thèmes, des plugins, des applications mobiles. Vous pouvez voir qu'il y en a une, une hiérarchie est déjà en train de se former ici. Cliquons sur l'élément Table des matières juste ici dans la section Modifier la peinture, sous l'onglet Contenu Vous pouvez changer le titre en quelque chose comme aller au contenu, vous pouvez le modifier. Quel que soit le titre que vous souhaitez donner à ce titre. Comme ici, la balise H tamal pour cet en-tête est définie sur H quatre Maintenant, évidemment, si vous remplacez ce paramètre par H trois, on supposera que cela fait partie du contenu de votre publication en bloc, mais ce n'est pas le cas. Fondamentalement, la table des matières aide les utilisateurs à naviguer entre les différents sujets ou sous-sujets que contient réellement le contenu de votre publication en bloc. Très bien, nous allons juste garder le tag H tamal pour que ce soit H quatre Ci-dessous, vous trouverez l'option inclure et exclure. En dessous, vous trouverez des ancres par balises. Maintenant, qu'est-ce que cela signifie ? Vous trouverez ici 234h6 et tous les différents types de tags Maintenant, il existe plusieurs, multiples balises. Comme nous l'avons indiqué précédemment, balises H 2.3 montrent simplement en quoi consiste l'ensemble de ce sous-thème Sous le sous-titre, quelles sont les sous-sections ? Je dirais que les sous-sections sont comme H trois, et les sous-sujets sont Et le titre lui-même est votre étiquette H one. Bien, le H456 généralement utilisé pour ceux qui ne sont pas si importants, mais vous voudriez simplement ajouter du style pour que cela apparaisse comme si cela faisait également partie de votre bloc de publication. À mon avis, cette étiquette H four ne devrait pas être incluse. Nous pouvons simplement le supprimer. Nous pouvons même supprimer Hi car il ne fait pas partie du contenu du block post. Nous allons juste garder le h deux et le h trois. Vous devez également exclure. Cela signifie que vous incluez le contenu des balises H deux et S trois dans l'élément de table des matières. Vous excluez certaines choses. Maintenant, une fois que je vais ici, en dessous, vous trouverez des sélecteurs CSS dans une liste séparée par des virgules. Maintenant, qu'est-ce que cela signifie ? Maintenant, si vous avez utilisé des feuilles de style en cascade ou si vous avez une idée développement Web global à l'aide de code personnalisé tel que HTML, CSS, Javascript, vous devez avoir découvert CSS et les sélecteurs d'ID, n'est-ce pas  ? Il existe de nombreux sélecteurs différents. J'ai abordé l'ensemble de ce concept dans mon cours de développement Web. Tu peux y aller si tu veux. Le but de l'utilisation sélecteurs CSS est que, comme je l'ai dit, nous ne voulons pas inclure cette section dans notre table des matières car elle ne fait pas partie de notre article en bloc. Il suffit de cliquer sur cette partie. Nous pouvons accéder à la section Avancé ici. Nous pouvons donner une classe CSS à cette classe CSS juste pour simplifier. Que signifient la classe et l'identifiant ? Un élément peut avoir une classe, classe peut être utilisée pour plusieurs classes d'éléments. Disons simplement que vous êtes étudiant en ingénierie, d' accord, et que vous poursuivez des études en informatique. heure actuelle, votre université dispose d'environ trois lots pour l'informatique Étudiants en informatique et en génie , ce sont trois cours. Quand les gens parlent d' informatique, il est possible que les étudiants des trois classes puissent lever la main et dire que oui, nous faisons partie de l' informatique. Mais si je dis en particulier ce numéro de rôle, disons que quatre lèvent la main, alors il n'y aura qu' un seul étudiant qui lèvera la main, n'est-ce pas ? C'est une pièce d'identité. L'identifiant est unique. Il ne sera associé qu'à un seul élément, à une section, à un conteneur. Ainsi, les classes peuvent être utilisées pour plusieurs éléments. Chaque fois que vous appelez cette classe, lorsque vous lui appliquez des paramètres de style, les paramètres seront appliqués à tous les éléments associés à cette classe. Si je donne un identifiant à un élément, lorsque j'appelle cet identifiant en CSS et que je lui donne un style, seuls les paramètres seront appliqués à cet élément, qui sera associé à cet identifiant. Parce que l'identifiant n'est associé un seul élément, car chaque élément aura un identifiant unique. Alors que ce n'est pas le cas avec les cours. J'espère que nous avons compris le point. Nous allons ajouter à la classe quelque chose comme un article connexe. Permettez-moi de vous donner ceci comme article connexe. accord, je pourrais aussi le donner comme étui à chameau, mais je vais juste le garder dans les articles connexes Bien, je vais copier cet article connexe. Je vais le copier. Je vais revenir à cette partie, la table des matières et à l'exclusion intérieure, je vais d'abord mettre un point. Chaque fois que vous utilisez votre sélecteur de classe, vous mettez toujours un point en premier chaque fois que vous donnez le nom, chaque fois que vous associez ou chaque fois que vous définissez pour la première fois un élément avec un nom de classe Vous n'êtes pas obligé de mettre un point. Mais lorsque vous appelez cette classe, lorsque vous souhaitez appliquer certains paramètres à cet élément de classe, vous mettez d'abord un point, puis vous collez le nom de la classe. Vous pouvez maintenant voir que cette partie n'est plus incluse. Très bien. Mais je peux toujours voir les scores du système d'exploitation et le post sur le bloc de maîtrise de C Plus ici. Voyons également ce que nous pouvons faire à ce sujet, car ces deux sections sont différentes. Ici, vous pouvez voir si je clique sur Structure, attendez une seconde. Ici, nous avons des recettes connexes. OK, c'est une section à laquelle nous devons associer la classe. Nous devons donner le message lié à la classe sur ce conteneur. Ce que j'ai fait, j'ai juste donné le titre au cours. Ce n'est pas quelque chose que j'ai dû faire. Ce que je vais faire, je vais passer à Heading, c'est ce que j'ai sélectionné. Je vais faire défiler la page vers le bas dans la section avancée. Si je fais défiler la page vers le bas, j' ai des classes CSS. Je vais simplement exécuter la commande X ou contrôle X selon le système d'exploitation que vous utilisez. Je vais cliquer sur la section Recettes connexes. Je vais cliquer sur Avancé. Je vais coller le cours ici. Je vais revenir à ma table des matières en excluant la même chose. Et maintenant, vous pouvez voir que cette partie ne s'affiche pas. J'espère que vous comprenez l' idée d'exclure une partie du contenu de votre élément de table des matières. Bien, revenons en arrière pour inclure maintenant que vous avez également un conteneur. Cela signifie que ce contrôle limite la table des matières aux éléments d'en-tête d'un conteneur spécifique Qu'est-ce que cela signifie ? Nous y reviendrons plus tard, mais nous avons également une vue par marqueurs. Qu'est-ce que cela signifie ? Actuellement, vous pouvez voir tous les sous-sujets sont numérotés sous ces numéros, comme ces deux balises Maintenant, dans l'aperçu, nous avons sous-puces 1.11 2131 point 4.1. Si j'avais eu d'autres sous-sections pour le second, le deuxième sous-sujet aurait également été 2,12 0,22 point 3.1 Je peux utiliser des chiffres ou des puces si j'ai des puces C'est ce que je vais voir. Maintenant, je peux changer l' icône si je le souhaite ou si je ne souhaite utiliser aucune icône. Je peux simplement cliquer sur aucun. Si je veux changer l'icône, je peux simplement cliquer sur l'icône et la bibliothèque d'icônes s'affichera. Je peux juste chercher des flèches. OK, cherchons simplement les flèches, ou je pourrais simplement aller sur toutes les icônes et rechercher une puce. OK, la balle n'est pas quelque chose que nous avons, cherchons à aller de l'avant. Ce que je recherche en gros, ce sont ces deux icônes triangulaires, ces deux icônes triangulaires, ou comment pouvez-vous dire qu'elles sont appelées crochets triangulaires, n'est-ce pas ? Nous recherchons des supports triangulaires. Quels sont les points recommandés ? Vous pouvez voir un cercle avec un contour, un cercle avec un point ou un point carré, puce droite ou carrée, je dois dire. Si vous faites défiler différentes icônes, vous trouverez de nombreuses options différentes. Je vais chercher un angle, c'est exactement ce que je recherchais. Permettez-moi juste d'en profiter ici. Vous constaterez que ce type d'icône est appliqué à toute la liste de la table des matières. Très bien. Si je passe aux options supplémentaires, que pouvons-nous voir ? Voulez-vous ajouter Wordrapow ? Aucun de mes deux ou trois tags n'a de texte vraiment long, n'est-ce pas ? Même si j'essaie d'ajouter quelque chose, laissez-moi essayer de le faire. Mais je ne pense pas pouvoir le faire, car ici nous n'avons pas la possibilité de modifier le texte. Nous avons la possibilité de jouer le style et la section avancée de celui-ci. Mais si je souhaite modifier le contenu, je vais devoir revenir à mon thème Personnaliser l'éditeur de presse. Ce que signifie essentiellement le mot wrap, c'est que si le nom de votre sous-sujet est très long, la limite de caractères ou la limite de mots est très grande Idéalement, il s'ajustera de lui-même que la longueur totale du texte apparaisse sur deux ou trois lignes. Mais si vous activez l'encapsulation du mot, cela signifiera qu'il occupera simplement toute la ligne Ensuite, les mots qui seront découpés seront indiqués avec des points de suspension. C'est ce que signifie essentiellement envelopper. Vous avez réduit l' option de boîte, que signifie-t-elle ? En gros, si vous avez activé cette option, vous pouvez la réduire et l'étendre C'est la fonctionnalité que vous pouvez obtenir avec l'option de boîte minimisée Vous pouvez même désormais modifier l'icône de cette option de réduction et d'expansion. Vous pouvez choisir entre différentes icônes en cliquant sur la bibliothèque d'icônes. Ou si vous souhaitez télécharger votre propre SG personnalisé. Vous pouvez le faire pour agrandir, vous pouvez choisir entre différentes icônes. Mais pour l'instant, je vais juste garder ce qui apparaît ici. Cela montrera également que cette version minimisée doit être visible sur tablette en mode portrait Alors, qu'est-ce que cela signifie si j'ai le mode bureau ? Je peux le voir s' effondrer et s'étendre. Si je passe à l'écran de la tablette, je le verrai à nouveau. Mais si je passe à un appareil mobile, je verrai également cette partie. Voyons ce qui se passe si j'ai un ordinateur de bureau ou un appareil plus petit. Cela signifie que cette partie sera déjà fermée si je suis sur mon appareil mobile. Si je suis également sur ma tablette, elle sera fermée. Mais si je reviens en mode bureau, il sera ouvert. C'est ce qu'on a minimisé en gros. Très bien, j'espère que tu as compris le point. Je vais simplement le renvoyer à la valeur par défaut, qui est le portrait sur tablette. Maintenant, j'ai la vue hiérarchique. Qu'est-ce que cela signifie ? C'est très simple. Dans l'aperçu, nous avons des thèmes, des plugins et des applications mobiles, n'est-ce pas ? Ils font partie de cette rubrique de présentation. Si je désactive cette option, il apparaîtra qu' il s'agit de sections distinctes, elles n'en font pas partie Je vais devoir cliquer dessus pour que les gens puissent le comprendre. D'accord, dans les applications mobiles cela fait partie de la section de présentation. Vous avez également des objets qui s'effondrent. Si je le fais, je peux cliquer sur cet aperçu. Et lorsque quelqu'un clique sur l'aperçu, il aura des options à choisir, des thèmes, des plugins, etc. Veillez également à ce que cette partie soit fine, en ce qui concerne la partie style. OK, qu' avons-nous d'autre comme contenu ? Tout d'abord, permettez-moi de m' assurer que ce n'est pas le cas. Je ne saute aucune des choses. Si je passe dans l'exclusion, encore une fois, vous avez le même marqueur et l'icône que vous aimeriez donner. Si je passe à la partie style, ce que je peux faire, changer la couleur d' arrière-plan de la boîte ou ajouter une couleur de bordure à l'ensemble de la boîte. Je peux ajouter la couleur du chargeur. Que se passe-t-il si j' ajoute de la couleur au chargeur ? Cela signifie que chaque fois que vous développez, disons que vous avez un tas de sous-sections différentes, le bloc de publication est très long et qu'il y a plusieurs tables des matières ici même dans cet élément lui-même, le chargement du contenu peut prendre un certain temps Là-bas, vous pouvez ajouter une couleur si vous souhaitez donner. Je peux y ajouter une bordure, je peux ajouter un rayon de bordure. Mais essayons de le faire. Essayez de le faire seulement alors nous saurons s' il est beau ou non. Pour l'instant, je vais ajouter une couleur de bordure. D'accord. Il s'agit de la couleur de fond. Nous voulons une couleur de fond plus claire. Je vais garder ça comme une teinte gris foncé. Je pense que ça aurait l'air bien. Très bien. Nous allons également modifier la couleur du texte. C'est fait ici. Je peux ajouter de la couleur de bordure à quelque chose comme, disons, le noir. C'est bon. J'ai Lodo Color Donnons-le à quelque chose comme du jaune vif. Ou je vais sélectionner une couleur jaune vif. Très bien. Je vais copier le code texte. Bien, je peux ajouter une bordure avec. Si j'ajoute une bordure avec, vous pouvez voir que la bordure autour de l'ensemble de ma table des matières augmente et qu'elle grossit. Je peux ajouter un rayon de bordure pour arrondir les bords. D'accord, je pense qu'environ 25 pixels, c'est bien. Dans ce cas, je peux ajouter un rembourrage autour du contenu. Je peux en régler la hauteur. Je peux donner l'ombre à la boîte que je veux, mais je ne vais pas en donner. Je vais le réinitialiser. Nous pouvons également styliser un en-tête. Essayons de donner la même couleur jaune à cette rubrique. Bien, je peux changer ça pour quelque chose comme cette couleur. Je pense que ça aurait l'air bien. Très bien. Maintenant, pour ce qui est de la couleur du texte, je vais sélectionner le blanc comme texte, mais ça n'a pas l' air très beau. Nous devrons baisser notre couleur jaune pour qu'elle soit un peu plus foncée. Ce n'est qu'alors qu'il serait visible. Et c'est logique ici. Je peux juste jouer jusqu'à ce que j' obtienne la couleur exacte qui irait bien avec ça. C'est bon. Je trouve donc que cette couleur est belle, très bien. Maintenant, pour la typographie, je peux régler ça sur poppins Je peux juste chercher des poppins. Je peux même changer la taille de police si je le souhaite, mais je vais juste la garder telle quelle. Je peux changer la couleur de l'icône ici pour chaque couleur d' icône que nous avons. Nous pouvons changer cela en blanc, cette icône que nous avons pour réduire et agrandir. Nous pouvons le remplacer par du blanc. Nous pouvons également ajouter la largeur du séparateur. Cela signifie à quel point nous voulons que notre séparateur soit gras. Je vais juste m'en tenir à trois pixels. Maintenant, en passant à la partie liste et à la section style, vous constaterez que nous allons contourner ces problèmes ici. Vous pouvez régler la hauteur, cette typographie, nous pouvons définir cela sur des poppins Ici, vous pouvez modifier la couleur du texte. Vous pouvez ajouter une indentation. L'indentation est l'espace entre cette partie. Vous le trouverez ici. Chaque fois que vous ajoutez des sujets qui font partie d'un grand sujet, vous laissez certainement de l'espace au début. C'est ce qu'on appelle une indentation. Vous pouvez régler l'indentation, vous constaterez que l' unité est réglée sur EM, vous pouvez la remplacer par des pixels qu'il serait préférable de comprendre, n' est-ce pas ? Tu peux l'ajuster. Si vous ramenez cela à zéro, c'est évidemment comme si vous n' incluiez pas ce genre de chose, que on appelle une vue hiérarchique, n'est-ce pas ? Vous pouvez simplement revenir en arrière, augmenter l'indentation ou peut-être même définir cette valeur par défaut Mais pour l'instant, je voudrais juste garder cela 15 pixels parce que cela me semble bien. Maintenant, pour ce qui est de la couleur du texte, je vais la changer en blanc pour qu'elle soit visible. Je peux même souligner chacune d'elles. Si je le souhaite, je peux modifier l'effet du survol. Si je survole l'un d'entre eux, je peux changer la couleur du survol. Je peux modifier l'actif. Cela signifie que chaque fois que cet élément est actif, je peux changer sa couleur en jaune. Quel que soit le paramètre défini pour cette partie, nous pouvons le remplacer par cela. C'est ce que nous allons faire. Pour cela, je vais cliquer sur En-tête. Je vais copier le code hexadécimal. Je vais accéder à la liste ici dans Hover. De plus, j'utiliserai la même couleur pour activer. J'utiliserai également la même couleur. Ici, nous avons sélectionné un aperçu. Cela signifie que la vue d'ensemble est actuellement définie. Nous sommes en train de consulter la vue d'ensemble. Si je survole l'une des autres, vous constaterez que le soulignement apparaît également et que la couleur de la police change également Correct. Ici, vous avez un marqueur, qu'est-ce que cela signifie ? Essayons de le découvrir. Le marqueur est essentiellement la couleur de vos icônes à puces. Correct. Nous pouvons même le mettre en blanc. Très bien, et tu peux en modifier la taille. Vous pouvez le faire paraître un peu grand pour qu'il soit visible. 12 pixels seraient suffisants, à mon avis. Très bien, en arrivant à la section avancée, vous pouvez aligner les éléments et vous pouvez le faire. Sticky aussi. Maintenant, comment le rendre collant pourrait nous aider. Voyons voir. Je vais d'abord le publier. Et dès que je clique sur Publier, vous verrez que cela nous souhaitez-vous donner une condition ? Si je clique sur Annonce, vous pouvez voir que je peux inclure la table des matières pour toutes mes pages et articles individuels. Mais est-ce que je souhaite appliquer les mêmes paramètres à ma page d' accueil que ceux que nous avons créés à l'aide de l'élément ou de la version pro ? Non, je veux juste présenter cet élément particulier de la table des matières pour notre article en bloc. Je vais simplement sélectionner Bloquer la publication. Maintenant, je peux même ajouter une autre catégorie dans laquelle je souhaite appliquer les paramètres à tous les messages bloqués ou si vous sélectionnez le blocage des messages, je peux le faire. Si je souhaite exclure un article à l'intérieur de tous les blocs, je veux juste l'exclure d'un bloc de publication. Mais j'aimerais appliquer l'élément de table des matières à tous les autres articles du bloc. Disons que j'ai 100 blocs de messages parmi lesquels j'aimerais utiliser cet élément de table des matières dans 99 de ces blocs de messages. Mais un seul de ces blockposts ne devrait pas avoir de table des matières Que ferais-tu ? Pourriez-vous simplement continuer et continuer à taper le titre du billet de 99 blocs ? Non, vous pouvez simplement utiliser tout cela au lieu d'inclure, vous pouvez ajouter une condition et la faire exclure. Maintenant, dans l'exclusion, vous pouvez accéder à la publication et rechercher ce bloc de publication en particulier. Je peux rechercher un blog, disons un. Je ne souhaite pas inclure cette partie dans le premier journal. C'est bon. Je peux également ajouter d'autres conditions, mais pour l'instant je vais simplement les garder telles quelles. Lorsque Cyclicon enregistre, nous pouvons prévisualiser les modifications. Modifications apportées à l'aperçu de Cyclicon. Une fois que je fais défiler la page vers le bas, vous constaterez que notre table des matières est dans sa position fixe, n'est-ce pas ? Il est ici dans sa position fixe. Si je veux que cette table des matières soit collante, signifie essentiellement que même si je fais défiler la page vers le bas, ma table des matières doit se déplacer en même temps que mon curseur. Cela signifie qu'il doit s'en tenir à sa part. Et peu importe que je fasse défiler la page vers le bas ou vers le haut, cela devrait être avec moi, comme c'est le cas . Ici, vous pouvez voir le volet de gauche lui-même. Le volet de gauche est entièrement dédié à cela. Peu importe à quel point je fais défiler la page vers le bas, l' élément de la table des matières sera là au lieu de ce que nous pouvons voir ici, qui est à sa position fixe. Quels changements devons-nous apporter ? Tout d'abord, nous devrons en ajuster la largeur de telle sorte que même si je le rends collant, il ne se chevauche pas avec notre contenu. Sinon, le contenu ne serait pas visible. Correct. Par ici, qu'allons-nous faire ? Nous allons simplement sélectionner cette option. Nous allons modifier sa largeur pour qu'elle corresponde à peu près à cette pièce. Très bien, publiez ceci. Ensuite, nous cliquerons sur la table des matières de cet élément. Nous allons passer à la section avancée. Dans la section Avancé, nous devrons faire défiler la page jusqu'à la section Motion Effects située ici. Sous Effets de mouvement, vous trouverez du sticker. Vous devez le rendre aussi collant en haut ou en bas, là où il devrait être collant exactement sur tous les appareils ou simplement sur le bureau. De toute évidence, nous le voulons juste pour ordinateur de bureau. le cas contraire, la largeur de la tablette et du mobile n'est pas suffisante pour contenir le contenu et l'élément Table des matières. Nous allons simplement rayer la mention tablette » et la garder pour ordinateur de bureau. Si je fais défiler la page vers le bas, vous constaterez que la table des matières se trouve juste ici. Bien, c'est ce que tu peux faire ici. Maintenant, vous pouvez également ajuster la largeur de manière ce qu'elle puisse occuper autant d'espace. Parce que vous savez que la table des matières n'occupe qu'un espace limité, n'est-ce pas ? Je peux augmenter la largeur, très bien. Voici ce que vous allez obtenir. Publions ceci. Voyons si nous pouvons voir les changements reflétés. Maintenant, vous pouvez le voir, je suis actuellement sur mes plug-ins. Les plug-ins sont surlignés. Si je fais défiler la page jusqu'aux applications mobiles, vous verrez les applications mobiles, les autres fonctionnalités, l'accessibilité, tout sera mis en évidence. C'est bon. Je peux même m'étendre et m'effondrer. Cette pièce est également en train de s'effondrer. Si nous passons à la suivante, je peux simplement cliquer directement et elle défilera jusqu' à cette partie en particulier et ainsi de suite. Si je consulte un autre bloc d'articles comme le bloc 1, nous ne trouverons pas ce type de table des matières. Vous pouvez voir qu'il n'y a pas de table des matières. Et si je vais à un autre poste bloqué ? Disons que je suis sur mon bloqueur de Fema ? Voyons voir si nous pouvons voir la table des matières. Ici, nous pouvons voir la table des matières. Maintenant, la seule raison pour laquelle nous ne trouvons aucun titre est que le corps de notre bloc ne contient aucun réservoir de H2h3, etc. Correct. C'est la raison pour laquelle vous ne pouvez voir aucune table des matières ici. Vous pouvez contourner votre, euh, comme je l'ai dit, cette partie, le conteneur de la bonne section aura votre image en vedette comme arrière-plan. Vous pouvez simplement les supprimer en cliquant simplement sur la case flexible située ici, le conteneur. En accédant à la section style, vous trouverez l'image sélectionnée. Vous pouvez les supprimer si vous le publiez. Les paramètres par défaut de ce modèle ont maintenant été modifiés. Même si je regarde le billet du bloc Figma, vous ne trouverez aucune image en vedette en arrière-plan de l'élément stable du contenu 30. Lottie - Rendre votre site professionnel et overthe top !: C'est bon. Maintenant, je ne sais pas si vous avez déjà entendu parler de l'élément Lottie lors de la création votre site Web à l'aide de l' élément ou du plugin Mais Lottie est essentiellement un format de fichier d'animation open source basé sur la notation d'objet Javascript Json est quelque chose de similaire à Javascript, mais c'est une version simplifiée de celui-ci. ce fait, ils ont une très petite taille, ils sont plus rapides à charger que types de fichiers d'animation traditionnels tels que les GIF et autres Maintenant, Lottie a également un avantage supplémentaire par rapport au GIF, à qu'il peut s' agir d'un site Web interactif, vous rendez votre site Web très attrayant pour les utilisateurs Vous pouvez le rendre très interactif. Et cela va faire passer vos compétences en conception de sites Web au niveau supérieur. C'est pourquoi nous allons en apprendre davantage à ce sujet. Maintenant, ici, vous verrez que je suis sur ma page Contacteurs Ici, sur la page des contacteurs. J'aimerais ajouter une section héros pour cette page en choisissant simplement la boîte flexible. Je vais sélectionner la disposition des deux conteneurs. Dans le côté gauche, j' ajouterai le texte. Et sur le côté droit, j' ajouterai une animation de Lottie. Tout d'abord, permettez-moi d'ajouter Lottie ici une fois que je l'ai glissée et déposée. Juste ici. Au fait, c' est un élément pro. Très bien, il s'agit donc d'une animation par défaut que vous pouvez voir ici dans l'onglet de contenu. Vous trouverez Lottie and Settings. Dans Lottie, vous constaterez que vous pouvez utiliser votre fichier multimédia ou une URL externe Maintenant, qu'est-ce que cela signifie ? Et où exactement avez-vous pu obtenir ces fichiers Lottie ? Voyons d'abord comment nous pouvons télécharger notre fichier multimédia ici Lottie Files.com. Il ne s' agit pas d'un logiciel libre, mais je dirais que c'est un marché où vous pouvez acheter ou télécharger des animations Lottie gratuitement, selon le type d' animation et le plan que vous utilisez ce moment, j'utilise la version gratuite et je viens de chercher Play. Maintenant, il existe un tas d'animations différentes et celles-ci sont totalement gratuites, même si vous trouverez peut-être des animations professionnelles en bas de page. Mais leur utilisation est tout simplement gratuite. Si vous trouvez l'un d' entre eux qui est payé, aura un cercle couleur jaune avec une icône en forme de couronne à l'intérieur. Je dirais que c'est l'animation payante. Mais pour l'instant, supposons que je veuille utiliser cette animation en particulier, non ? Je peux donc simplement cliquer ici et vous pouvez changer entre les différentes couleurs que vous avez. Vous pouvez modifier l'animation. Vous pouvez modifier la couleur d'arrière-plan. Mais nous voulons simplement un arrière-plan transparent afin qu'il soit facile de l'intégrer dans n'importe quelle section de notre site Web Je peux donc simplement cliquer sur Modifier l'animation. Et je peux l'ouvrir dans Creator, ou je peux l'ouvrir dans Lote Editor Alors permettez-moi de l'ouvrir dans l'éditeur Lottie. Et une fois que je l'ai fait, le chargement peut prendre un certain temps. Et ici, je peux changer les couleurs en cliquant simplement sur toutes les couleurs Vous constaterez que cela fonctionne autour des nuances d'orange, n'est-ce pas ? Si je change de couleur en cliquant ici, je peux choisir le vert ou une autre couleur. Quelle que soit la couleur avec laquelle je suis à l'aise , je peux simplement sélectionner cette couleur verte et elle formera les différents types de couleurs vertes. Vous pouvez voir que vers la fin de l'animation, la couleur verte est très transparente. Alors que lorsqu'il démarre avec l'effet de pouls, il fait très noir. C'est ce que tu as. Vous avez également l'icône à l'intérieur du bouton de lecture. Maintenant, cette image, je ne sais pas si vous pouvez modifier, car il ne s'agit pas d'une animation ici. Vous pouvez remplacer l' image par ce que vous voulez ou vous pouvez simplement la télécharger avec ce que vous avez. Je vais juste enregistrer cette animation. Une fois cela fait, j'aurai possibilité de l' enregistrer dans mon espace de travail, et je pourrai donner le nom que je souhaite. Très bien, je vais juste l'enregistrer dans mon premier dossier de projet. Il s'agit maintenant du dossier par défaut que vous utiliserez avec votre compte. Maintenant, dès que vous cliquez et que vous l' enregistrez dans votre espace de travail, vous aurez la possibilité de le télécharger et l'exporter au format Lottie Json C'est ce que nous voulons, bien qu'il existe également d'autres options, comme Lottie, Jason, Lott optimisé et de nombreux autres formats tels que GIF, Webp, Four MOV, les quatre autres formats que vous pouvez voir ici dans le coin inférieur droit de Maintenant, il ne s'agit pas d'éléments interactifs. Maintenant, comme vous pouvez le voir, j'ai différentes animations. Maintenant, ces animations ont un nom qui circule. Vous ne pouvez pas simplement les prévisualiser comme ça. Comme la façon dont vous pourriez prévisualiser des images ou des vidéos et d'autres choses. Ici, vous devrez les intégrer ou, pendant que vous exportez, vous devez donner un nom à votre animation afin de pouvoir l' importer facilement dans la section de votre Pour l'instant je vais simplement sélectionner cette partie. Et je vais cliquer sur Sélectionner pour voir si la bonne animation a été extraite. Oui, vous pouvez voir Contactez-nous, l'animation est bien réalisée. Au début, vous avez vu que c'était le cas de l'animation. Pour une fois, non ? Cela ne circule pas. En boucle, vous pouvez même ajuster l'alignement. Tout d'abord, vous pouvez soit en faire une ligne centrale à gauche, une ligne droite Aline, mais même si je modifiais l'alignement, vous ne trouveriez aucun changement nécessaire simplement parce qu'il occupe toute la hauteur et toute la largeur par rapport aux dimensions de la Flexbox C'est vrai, nous avons deux colonnes. Ce conteneur Flexbox aura notre titre pour la page de contact et celui-ci contiendra l'animation Très bien, ici, vous pouvez ajouter une légende si vous le souhaitez. Vous pouvez ajouter une légende personnalisée comme titre. Ensuite, quel que soit le titre de l'animation, il s' affichera ici. Si je peux simplement mettre une légende, alors je devrai la sous-titrer. Bien, si je le personnalise, je devrai saisir le sous-titre personnalisé de cette animation. Mais pour l'instant, gardons-le. Aucune ci-dessous. Vous trouverez maintenant un lien, vous pouvez soit ajouter une urale personnalisée, qui signifie que chaque fois que quelqu'un clique sur cette animation de Lottie, il sera redirigé vers n'importe quelle page Web Bien, nous avons maintenant abordé le rôle de Lottie. Voyons ce que nous pouvons faire avec les paramètres. Maintenant que les paramètres font partie, vous avez différentes options, comme le déclenchement dans différentes fenêtres d'affichage Tout d'abord, je vais également ajouter une autre boîte flexible juste pour montrer si l'alignement fonctionne ou non. J'ai ici cette dimension verticale. Je vais ajouter un autre élément Lottie dès le départ. Je vais juste charger, je vais juste télécharger la dernière animation qui était le bouton de lecture. C'est bon, maintenant. OK ? OK. Je ne sais pas pourquoi l'image n'apparaît pas sur le bouton de lecture Comme ce que nous avons vu ici. Quoi ? Nous allons simplement la remplacer par une autre animation. Voyons ce que nous pouvons obtenir ici. Je pense que cela semble bien, mais la taille de cette animation est bien trop grande. Mais quand même, si nous pouvons essayer de l'aligner à gauche. Oui, vous pouvez voir qu'il est aligné sur la gauche. Il s'aligne vers la droite et il s'aligne vers le centre. Vous disposez de différentes options pour aligner votre animation en accédant au paramètre spart Qu'est-ce que tu peux voir ? Vous pouvez voir les paramètres de la fenêtre d'affichage. Cela signifie que vous devez déclencher cette animation chaque fois que vous vous trouvez dans cette fenêtre particulière Maintenant, que signifie viewpoort ? Ici, vous pouvez voir qu'une fenêtre est une zone de visualisation polygonale en infographie. Dans la théorie de l'infographie, il existe deux domaines, comme les notions de pertinence lors rendu de certains objets sur une image. pas nécessairement une explication compliquée, Ce n'est pas nécessairement une explication compliquée, mais cela signifie essentiellement que la taille de l'écran dépend du type d'appareil que vous utilisez. Disons simplement que nous sommes sur l'écran de test et que j' utilise particulièrement le Macbook Air M, l' un des dimensions de mon moniteur, de l' écran de mon ordinateur portable, en termes de largeur et de hauteur, peu importe ce que c'est, il occupera toute la largeur et l'animation démarrera chaque fois que je le regarde sur mon écran Viewpoort Maintenant, dans la fenêtre située juste en dessous du point de déclenchement, vous constaterez que la fenêtre d'affichage est réglée à 0 % à 200 %. Cela signifie que si je fais défiler mon écran, peu importe, mon animation se poursuivra Mon animation sera de 0 à 100 % , mais que se passera-t-il si je l'ajoute ? L'animation de la fenêtre d'affichage doit être comprise entre 50 % et 65 %. Disons que pour cette partie, vous pouvez voir que dans la partie la plus à droite de notre page Web, sur n'importe quel site Web, où que vous alliez, ou même dans vos dossiers contenant plusieurs éléments de fichier, vous trouverez toujours la barre de défilement ici, c'est vrai Maintenant, la barre de défilement vous permet faire défiler et d' afficher l'intégralité de votre fenêtre d'affichage, n'est-ce pas ? L'intégralité de votre fenêtre d'affichage Donc, si je personnalise cette animation de loterie de telle que la fenêtre commence à environ 50 % et que l'animation se termine à 65 %. Maintenant, si je fais défiler la page vers le bas, vous constaterez que j'ai abordé cette partie, mais que la barre de défilement ne couvre toujours pas 50 % de la totalité de la fenêtre d' Si je fais défiler à nouveau l'écran vers le bas, vous pouvez voir qu'environ 49 % de l'écran est couvert ici. Vous pouvez le voir ici, c'est pourquoi l'animation a commencé. Si je fais défiler à nouveau l'écran vers le bas, tu sais quoi ? Je vais juste garder cela en boucle pour que l'animation continue de fonctionner. Maintenant, une fois que j'ai dépassé les 65 % de ma fenêtre d'affichage, l'animation ne s'exécute pas Vous constaterez que l' animation a été arrêtée. Si je fais défiler à nouveau l'écran vers le haut, vous constaterez que l' animation s'exécute à nouveau. C'est ce que signifie essentiellement cette fenêtre d'affichage. Mais la meilleure pratique est de continuer à le gérer. Ou si vous souhaitez simplement faire défiler l'animation d' une fenêtre d'affichage en particulier, vous pouvez le faire Les autres déclencheurs que nous avons sont le clic Chaque fois que je clique sur l'élément, n'est qu'alors que l' animation démarre, correctement. C'est-à-dire, cliquez. Et combien de fois souhaitez-vous lancer cette animation ici même ? La boucle va aller à l'infini. Si je le remplace simplement par trois, il s'animera trois fois en boucle Après cela, cela s'arrêtera. C'est la deuxième fois qu'il fonctionne. Attendons qu'il fonctionne pour la troisième fois. Après la troisième fois, vous constaterez que l' animation ne fonctionnera pas. C'est la troisième fois qu'il fonctionne. Voyons s'il fonctionnera la prochaine fois ou non. Ici, vous constaterez que l'animation s'arrête après l' avoir exécutée trois fois. Ici, vous pouvez même le modifier. Si vous le laissez vide, il continuera à fonctionner à l'infini Ensuite, vous avez d'autres déclencheurs au survol. Chaque fois que vous déplacez votre curseur dans l'élément Lote, l'animation démarre Et une fois que vous avez quitté l'élément, l' animation continue Vous venez de déclencher le point de départ, n'est-ce pas ? Elle démarre lorsque vous déplacez votre curseur à l'intérieur de l'élément. Ici, vous n'avez pas à survoler. Chaque fois que vous cliquez sur Activé comme déclencheur. Vous avez également un hover out. Cela se produit si vous déplacez votre curseur en dehors de l'élément lote Dans ce cas, vous pouvez soit inverser l'animation, soit suspendre lorsque j'ai commencé l'animation. Tout d'abord, permettez-moi de démarrer l' animation en déplaçant mon curseur. Maintenant, si je déplace mon curseur vers l'extérieur, vous pouvez voir que l'animation a été suspendue. Et si je fais l'inverse ? Je vais introduire mon curseur. Maintenant, si je déplace mon curseur vers l'extérieur, vous pouvez voir que l'animation est inversée. C'est ainsi que cela se passe. Les autres déclencheurs que nous avons sont le défilement. Maintenant, que se passe-t-il avec Scroll ? Tout d'abord, je vais simplement ajouter une autre disposition de boîte flexible avec une direction descendante. Je vais ajouter un autre élément de lot pour celui-ci. Celui que nous avons vu. Je vais aller dans les paramètres. Nous ne voulons pas faire défiler la page pour cela, nous allons simplement continuer, inverse est ce que nous voulons. C'est bon. maintenant à l'autre section, l'autre boîte flexible que nous avons. Je vais ajouter un élément Lottie. Il suffit de le glisser-déposer ici. Je vais télécharger un fichier multimédia. Poursuivre. J'ai aussi une animation de roue. Essayons de l'apporter. Je pense que c'est peut-être la bonne. Voyons voir. Oui, c' est celui de Wheel, mais je ne sais pas pourquoi l'image n'apparaît pas. Je vais devoir retourner à mon tableau de bord contenant les fichiers Lottie. Et une fois sur place, je devrai regarder cette animation ici. J'ai ceci. Je vais en changer le titre quelque chose comme Wheel afin qu'il soit facile à comprendre et à réutiliser. OK, nous y voilà. Je vois qu'il y a un point juste ici. Je ne sais pas si l' image sera exportée. Essayons de le télécharger à nouveau. Je vais y retourner. Je vais télécharger un nouveau fichier et je peux simplement prendre cette case qui n'affiche plus ce message. Bien. Je vais simplement sélectionner Wheel. OK, l'animation ne s'affiche pas. ne suis pas tout à fait sûr. Essayons de trouver une autre animation. Je viens de sélectionner la roue au départ, nous n'avions pas la bonne réponse. Essayons de découvrir ce qui se passe avec cette animation. Très bien, si nous utilisons cette animation en particulier ou peut-être même cette animation. Bien, que se passera-t-il alors ? Voyons voir. Je vais juste cliquer dessus. Je vais cliquer sur Enregistrer deux espaces de travail, puis l'enregistrer. Et un nouvel onglet s'ouvrira. Maintenant, dans le nouvel onglet, changez le nom de l'animation en quelque chose comme Wheel Two. Très bien, et nous allons télécharger le fichier Json. Téléchargeons ceci. Je vais télécharger un nouveau fichier Json. J'espère que cela devrait fonctionner. Oui, vous pouvez voir ici que l'animation de la roue s' affiche correctement. Le paramètre de la fenêtre d'affichage à faire défiler. Je veux que l'animation dure éternellement. Cela signifie qu'il doit être infini dans look more chaque fois que vous déclenchez le défilement. Que se passe-t-il si vous faites défiler la page vers le haut ? Vous pouvez voir que la roue tournera dans le sens inverse des aiguilles d'une montre. Si je fais défiler la page vers le bas, on tourne dans le sens des aiguilles d'une montre. C'est ce que cela signifie en gros. Maintenant, si vous modifiez les paramètres de la fenêtre d' affichage, disons simplement que vous commencez à environ 65 à 70 % et que vous terminez à 100 %. Ensuite, même si vous descendez, si vous faites défiler la page vers le bas jusqu'à la partie que vous ne couvrez pas environ 67 % de la fenêtre, vous ne verrez pas l'animation de la roue Si vous dépassez 67 % de votre fenêtre d'affichage, qu'alors que l'animation se déclenchera correctement Mais restons de zéro à 100 %. Maintenant, vous avez des effets relatifs à la fenêtre d'affichage, ou vous voulez qu'ils s'appliquent à l'ensemble de la page Cela concerne la page entière et non votre point de vue. Cela signifie que le point de vue peut être nombre d'éléments que vous ajoutez directement de cette pièce à la pièce finale. Mais la page ne partira que de l'endroit où se termine votre en-tête et du point de départ de votre pied de page, c'est-à-dire votre page Très bien, si je fais défiler l'écran vers le bas où je peux voir mon pied de page, alors l'animation ne fonctionnera pas C'est le truc de la page entière. Revenons-en à Viewport. Maintenant, vous avez également un point de départ et un point de terminaison. Maintenant, qu'est-ce que cela signifie ? J'ai également quelques autres animations qui vous permettront de mieux comprendre cela. Je vais ajouter un autre élément Lottie. OK, laisse-moi juste chercher Lottie ici. Je vais télécharger la première animation que j'ai utilisée. Est-ce celui-ci ? Celui-ci. Essayons de le remplacer par celui-ci. OK, c'est celui à roue, c'est celui à contact. Voyons voir ça. Non, pas ça non plus. J'ai aussi fait une animation automobile. Je vais voir si cela peut nous être utile ou non. Je vais juste taper une voiture ou je pourrais taper une moto, un vélo, n'importe quoi. La seule raison pour laquelle je recherche une voiture ou un objet en mouvement est que je peux montrer comment fonctionne exactement cette pièce, le point de vue et le point final. Très bien, j' ai ici cette animation particulière que je peux utiliser. Je vais télécharger, Enregistrer dans l'espace de travail. Oui, sélectionnez ce projet comme dossier. Si vous souhaitez ajouter un autre dossier, vous constaterez qu'il n'est disponible que dans la version pro. D'accord, pourquoi n'a-t-il pas ouvert un nouvel espace de travail ? Disons-le encore une fois. Idéalement, il devrait ouvrir une nouvelle bande à partir de laquelle nous pouvons le télécharger sous forme de fichier Json. Bien. Il est également possible que nous ayons utilisé tous les crédits gratuits qui nous ont été alloués dans la version gratuite. Je ne suis pas sûr. Il va falloir que je le découvre. Donnez-moi juste un moment et je vous recontacterai. OK, je suis là dans mon tableau de bord. Je peux simplement le renommer en. Une fois que c'est fait, téléchargeons-le et je vais le télécharger. Je vais sélectionner ce lot de fichiers multimédia et je vais le modifier. Essayons de l'utiliser. OK. Je pense quand même qu'il pourrait y avoir un problème avec Lottie elle-même car elle ne charge pas l'image Mais ici, vous pouvez trouver la petite boîte carrée. Ce sont les roues. La plus grande case juste là où mon curseur passe, c'est la voiture elle-même, et en arrière-plan vous avez le paysage Bien, maintenant je peux définir le point de départ, disons 50, et je peux le définir comme 100. Que se passe-t-il maintenant ? Vous verrez que cet ours noir apparaît ici. Cela commence donc après les 50 % de l'animation ici. Si je clique sur cette animation ici, vous avez la grande tour qui tourne, n'est-ce pas ? C'est donc la moitié de la durée de l' animation ici. Vous constaterez qu'en arrière-plan, vous avez gros gratte-ciel juste à côté de là, l'animation commence et se un gros gratte-ciel juste à côté de là, l'animation commence et se termine à 100 %. Vous pouvez même descendre pour que le point final soit à 80 % de la durée de l'animation Ce sont donc les choses que vous pouvez contourner dès maintenant. Cela n'a peut-être aucun sens pour vous tous, car nous ne pouvons tout simplement pas voir tous les décors Et pour ce qui est de l'objet que nous avons ici, vous pouvez modifier la vitesse de votre animation, que vous souhaitiez qu'elle fonctionne à une vitesse d'un x, de 1,5 ou de deux fois, cela ne fera qu' accélérer l'animation. Ici, vous avez deux X et vous pouvez voir à quelle vitesse l'animation s'organise. Si je fais en sorte que ce soit 1.5, il exécutera quelque chose comme ça. Mais gardons-le comme tel. Vous pouvez même le laisser tomber pour ralentir un peu l'animation. Qu'est-ce qu'on a d'autre ? Nous pouvons inverser cette tendance. Maintenant, qu'avons-nous vu exactement ici ? Chaque fois que nous déplaçons notre curseur hors de l'animation, l'animation est inversée Il est possible de faire quelque chose de similaire. Ici, vous avez l'option de rendu que vous souhaitiez que ce soit en G ou en toile. Si je change cela en canevas, voyons ce qui se passe. Maintenant, Canvas n'est pas particulièrement une bonne option, car Wig est celui qui contiendra tous vos fichiers nécessaires, vos images et toutes sortes de choses. Il nécessitera également moins de temps de chargement par rapport au canevas. Bien, vous avez ici l'option Leasyload. Nous allons la désélectionner pour revenir à cette partie. Maintenant, dans le style intérieur, vous pouvez jouer avec la largeur et définir la largeur maximale pour votre lot Ici, vous pouvez choisir si vous souhaitez apporter une certaine transparence à ce sujet ou non. Si j'ajoute quelque chose comme 0,19, vous constaterez que l'animation est très transparente Il n'est pas très opaque. Plus vous déplacez votre curseur vers la droite, plus votre animation sera visible ici Vous pouvez même ajouter des filtres CSS, comme vous le feriez avec une image. Bon, je peux juste annuler ça pour que tout soit visible ici. Vous pouvez même ajouter un effet de survol et modifier la durée de la transition Dans la section avancée, vous pouvez jouer avec les marges, paramètres de rembourrage et bien d'autres choses 31. Surlignement de code: Très bien, maintenant, comme vous pouvez le voir, je suis ici sur la page de mon article de blog. Disons simplement que pour raison quelconque, vous créez un blog lié au codage et que vous souhaitez ajouter des extraits de code dans votre article de blog Dans ce cas, pour donner un exemple, comme sur le site Web de Javat Point, vous pouvez constater que tous ces codes sont au format extrait et que leur syntaxe est surlignée Quelque chose de similaire pourrait également être réalisé dans notre article sur le bloc de presse. retournant simplement sur notre site Web, je cliquerai sur une nouvelle boîte flexible. Je vais choisir cette direction ici. Je vais ajouter un nouvel élément appelé Code Highlight. Laisse-moi juste le glisser et le déposer ici. Maintenant, une fois que j'ai fait cela, vous pouvez choisir entre différentes langues. Ici, le code que j' ai juste pour comparer deux chaînes, accord, c'est au format Java. C'est également en Java. Ce que je peux faire, c'est simplement copier ce code. Je peux revenir ici, au lieu du script Java, je peux sélectionner Java. Je colle le code. Une fois que je l'ai collé, vous constaterez que toutes ces lignes sont, vous savez, surlignées de différentes couleurs. Vous pouvez voir que le cours apparaît en bleu. Le vide statique public apparaît en bleu. Les valeurs que nous fournissons aux variables S un et S deux sont en vert. Ensuite, la syntaxe principale, les valeurs des données de chaîne et les fonctions print LN sont également en rouge. Les commentaires sont au format gris. C'est la syntaxe que vous avez, n'est-ce pas ? Et c'est le genre de point fort qu' il colle déjà, non ? Le point fort est que cela s'applique déjà. Vous trouverez maintenant ici un bouton permettant de basculer entre l'affichage des numéros de ligne ou non Donc, si je désactive cette option, vous ne trouverez aucun numéro de ligne, comme vous ne pouvez pas trouver de numéros de ligne. Correct. Mais si vous souhaitez en ajouter, vous pouvez l'ajouter ici. Vous en avez une copie dans le presse-papiers. Cela signifie, disons simplement, que je suis là, puis-je trouver une option pour copier dans le presse-papiers ? Contrairement aux geeks, pour les geeks, permettez-moi de revenir Au lieu de Java t point, laissez-moi simplement rechercher GFT, qui est un geeks pour geeks, j'ai le code Javascript ici Vous trouverez maintenant ici un bouton pour le copier dans notre presse-papiers Si je copie, vous pouvez voir que le code a été copié, mais ce n'était pas le même cas dans Java T Point ici, vous pouvez l'ajouter. Si je place mon curseur dans cet extrait de code en particulier, je peux trouver l'option permettant de copier le Très bien, maintenant, nous allons également en faire une copie au lieu de Java. Je vais le faire en Javascript. Le point fort serait un peu différent. Permettez-moi également de copier le code pour Javascript. Je vais copier et coller le code pour Javascript. De cette façon, vous trouverez une syntaxe différente correcte. Maintenant, pour cette partie où vous avez la copie dans le presse-papiers, vous avez des numéros de ligne. Vous allez également mettre en évidence certaines lignes particulières. Vous avez 13 tirets 6. Maintenant, qu'est-ce que cela signifie ? Cela signifie que ces lignes, la ligne numéro un, la ligne numéro 3456, seront surlignées Très bien, permettez-moi de le remplacer par autre chose et ce n'est qu'un espace réservé Il ne s'agit pas d'une valeur par défaut. Si j'en ajoute un, la première ligne sera surlignée. Si je veux que la ligne numéro trois soit surlignée, je peux simplement ajouter et je peux donner la ligne numéro trois. Si je veux que la ligne numéro six apparaisse, je peux mettre une virgule et la ligne numéro six. Mais qualifiez-vous, je veux que les numéros de ligne 456 soient tous les trois surlignés. Je peux simplement faire en sorte que quatre tirets six de la ligne quatre à six soient surlignés C'est bon. Je peux faire pareil, environ 325. Cela signifie que c'est sur ces trois lignes nous créons des variables et que nous y ajoutons de la valeur. Très bien, nous avons donc surligné les lignes ici, vous trouverez une option pour ajouter un habillage de mots. Maintenant, que signifie Word Wrap ? Ici, vous pouvez constater que le code contient, que dites-vous, un commentaire, qui occupe toute la largeur. Et nous avons une barre de défilement, une barre de défilement horizontale. Nous devons le faire défiler pour le trouver en entier. Si je change cet habillage de mots, vous le trouverez. Que dites-vous ? commentaire apparaît de telle sorte que nous n'avons plus besoin de barre de défilement. C'est ce que signifie réellement envelopper. Vous pouvez le désactiver pour que votre barre de défilement apparaisse ici. Vous pouvez choisir entre les différents thèmes que vous avez. Actuellement, il est défini sur un thème solide. Si nous le changeons en thème foncé, vous aurez une couleur de fond marron et ici vous aurez du texte en blanc. Si nous choisissons cela, Okada, voici ce que vous verrez Nous avons solarisé la lumière. Demain, c'est le crépuscule. Maintenant, demain est quelque chose similaire à ce que nous pouvons voir ici dans l'extrait de code du script Geeks Ja Vous pouvez régler la hauteur, ajuster la taille de la police. Si je baisse ma hauteur à environ 115 pixels, vous trouverez également une barre de défilement verticale. Vous devrez placer le curseur de votre souris dans l' extrait de code , puis vous devrez utiliser votre molette de défilement pour faire défiler le code correctement Je peux annuler cela pour qu' il prenne une hauteur suffisante ici, vous pouvez augmenter ou diminuer la taille de la police. En allant dans l'onglet style, vous n'avez pas de style, vous avez avancé. Maintenant, avancé va évidemment montrer les mêmes choses que nous pouvons voir pour tous les autres éléments. 32. Intégration Paypal et Stripe - Collecter des paiements facilement !: Les gars, nous allons maintenant apprendre comment accepter les paiements en utilisant les boutons Paypal et Stripe. Maintenant, ces deux boutons, permettez-moi de faire une recherche et de vous les montrer tous. Ici, nous avons deux boutons, Paypal et Stripe. Ces deux boutons nous permettent, en tant que propriétaires du site Web, de collecter des paiements, que ce soit pour collecter des dons ou pour configurer votre passerelle de paiement pour vendre vos produits ou services. Il peut également s'agir de proposer un abonnement sans avoir besoin de comprendre et d'utiliser Vo Commerce. Je suis ici sur ma page de blocage. Et je vais ajouter une nouvelle section et une nouvelle boîte flexible sera placée dans le sens vertical, n'est-ce pas ? Ajoutons le bouton Paypal. Tout d'abord, je vais simplement le glisser-déposer vers le bas. Maintenant, sous la rubrique « Contenu », vous trouverez d'abord les prix et les paiements. En dessous, vous trouverez un compte Paypal. Il vous suffit de saisir votre compte Paypal, qu'il s'agisse de votre compte Paypal personnel ou professionnel. Il vous suffit de saisir l'e-mail avec lequel vous utilisez votre Paypal. Évidemment, si vous êtes un utilisateur de Paypal, vous devez savoir que l'adresse e-mail du compte doit être ici. Dans le type de transaction, vous avez un tas d'options différentes comme le paiement, le don, l'abonnement. Voyons d'abord ce qu'est le paiement. Disons que j'essaie de vendre un ebook. Je peux simplement appeler le nom de l'article « livre ». Ensuite, j'ai le SKU, qui signifie Stock Keeping Unit, ce qui signifie essentiellement que, disons que vous vendez un produit physique dans votre inventaire, vous avez environ 50 articles. Si vous en mettez 50 ici, cela signifie que le maximum de ventes possible est de 50 fois. Bien, si vous vendez un produit numérique et que vous souhaitez le vendre à un nombre limité d'utilisateurs, vous pouvez également le définir comme SKU et vous pouvez attribuer le numéro correctement. Vous pouvez fixer le prix. C'est à vous de choisir ce que vous voulez garder. Disons simplement que je garde 20$ et que c'est en dollars américains. Vous pouvez changer la devise en dollar australien, en euros, etc. Vous pouvez modifier la quantité. Maintenant, cette quantité correspond essentiellement chaque fois que quelqu'un clique sur le bouton Paypal. Combien d'articles doivent être ajoutés sur leur carte ou lors de leur achat ? Voulez-vous que les utilisateurs achètent deux ou trois articles chaque fois qu'ils cliquent sur le bouton d'achat ou s' agit-il d'une seule quantité ? Nous allons juste le garder comme tel. Et puis vous avez le prix d'expédition. Vous pouvez l'ajouter. Disons que j'ajoute 5$ de frais d'expédition. J'ajoute une taxe d'environ 5 %. 5 % de 20$ représenteraient 1,01$ plus cinq , soit le prix d'expédition, soit 6$. Maintenant, 6$ seraient ajoutés au prix de vente de l' article en 2020, plus six seraient de 26$ Très bien, ici, dans la partie bouton, vous constaterez que vous pouvez modifier le texte. Supposons qu'au lieu d' acheter, vous souhaitez maintenant conserver quelque chose comme un achat. Très bien, alors vous pouvez définir l'alignement du bouton. Ici, il reste une ligne. Je peux le placer au centre, ou je pourrais écrire une ligne, ou je peux le justifier de telle sorte qu'il occupera toute la largeur. Bien. Ici, je peux changer le logo ou l'icône de Paypal en un autre en cliquant simplement dessus et en m'assurant que nous téléchargeons le nôtre. Ou nous pouvons choisir ceux proposés par Fontawesome. Mais pour l'instant, je vais juste le garder tel quel. Je peux cliquer dessus pour supprimer l'icône, ou je peux télécharger la mienne. Ici, en position d'icône, je peux voir que l'icône papale apparaît avant le texte Si je le remplace par après le texte, cette icône papale apparaît après le texte Revenons-en au texte précédent. Et puis vous avez l'espacement des icônes. Si vous déplacez le curseur, vous verrez qu'il y a un certain écart entre votre icône et votre texte Bien, vous avez ici un identifiant de bouton à l'aide duquel vous pouvez suivre le nombre d' unités vendues, etc. Vous avez alors des options supplémentaires. Maintenant, c'est important, dans le sens où disons qu' une fois qu'un utilisateur a terminé le processus de paiement et que la transaction a été réussie, où souhaitez-vous le rediriger ? Vous pouvez ajouter une page de remerciement votre site Web ou une page dynamique où vous pouvez ajouter une balise dynamique à l'aide laquelle ils recevront une facture pour leur achat. Vous pouvez l'ajouter dès maintenant. Je vais simplement utiliser l'URL de citation, qui est la page d'accueil. Vous le trouverez ici. Ouvrez le Paypal dans un nouvel onglet. Chaque fois que quelqu'un clique dessus, le Paypal s'ouvre dans un nouveau compte. Ici, vous avez également un bac à sable , que nous verrons dans un instant Mais permettez-moi de vous expliquer ce que signifient les messages personnalisés, si j'active cette option Disons simplement qu'il y a une erreur. Vous verrez qu'une erreur s'est produite. Mais si le compte Paypal n'est pas connecté du point de vue du vendeur , il sera affiché. Aucun mode de paiement connecté, contactez le vendeur. Maintenant, nous avons un bac à sable. Qu'est-ce que cela signifie si je l'active ? Vous trouverez un compte de messagerie Sandbox. Et il est indiqué que c'est l'adresse qui vous a été communiquée par Paypal. Lorsque vous configurez un bac à sable avec votre compte de développeur, vous pouvez utiliser le bac à sable pour tester votre flux d'achat Sandbox n'est qu'un mot pour expliquer que vous travaillez sur un environnement de test dans Paypal lui-même. Lorsque vous vous connectez, vous pouvez accéder à developer.paypal.com Une fois connecté, vous pouvez accéder aux outils de test sous vous pouvez accéder aux outils de test Vous obtiendrez deux comptes par défaut ici. J'ai ces trois-là. Si je souhaite créer un nouveau compte, me suffit de cliquer sur ce bouton et vous constaterez que je peux créer un compte personnel ou professionnel. Et je peux choisir la région. Si je dis «   États-Unis d'Amérique », je peux simplement accepter les paiements en dollars américains. Dès que j'ai créé le compte, vous pouvez voir ici compte professionnel sera créé. Vous pouvez simplement cliquer sur le compte ici, le lien qui s'y trouve. Et vous devez copier l'e-mail , revenir à votre place et coller le compte de messagerie Sandbox dans cet espace réservé. Bien. Maintenant que nous utilisons un fichier zip de l'élément ou du pro, et que nous ne nous appuyons pas réellement sur un élément ou un abonnement, ce sandbox ne fonctionnerait pas Ce que je ferais, je vais simplement saisir mon compte Paypal personnel pour voir si le paiement fonctionne ou non. Donnez-moi juste un moment jusqu'à ce que je saisisse mes coordonnées Paypal. Maintenant je vais publier. Une fois que j'aurai publié, je prévisualiserai simplement les modifications. Maintenant, si je fais défiler l'écran vers le bas et si je clique sur le bouton d'achat, vous constaterez que nous serons redirigés vers un nouvel onglet où nous avons vu qu'une passerelle de paiement circulait. Mais nous n'avons pas accès au système, déconnectez-vous à nouveau. Et je vais vous montrer à tous comment cela fonctionne ici. Comme vous pouvez le voir sur la carte, nous sommes censés payer 26$. 20$ pour le prix de vente de l'article 5$ pour les frais d'expédition et 1$ pour les taxes, le total est de 26$. C'est vrai. Annulons-le simplement. Vous pouvez utiliser votre bac à sable. Dans la section style, vous pouvez modifier la typographie Vous pouvez modifier l'ombre du texte. Vous pouvez ajouter des couleurs de fond si vous le souhaitez. Vous pouvez ajouter un rayon de bordure. Vous pouvez même ajouter d'autres messages. Les messages que vous avez, le message d'erreur et le Paypal non connecté. Vous pouvez en changer la couleur et la typographie convient également. Quelque chose de similaire peut également être fait pour le bouton à rayures. Je vais simplement rechercher le bouton à rayures, je le placerai juste en dessous, et vous trouverez à nouveau le nom du produit Je vais simplement revenir sur mon bouton Paypal pour afficher les autres types de transactions. Ici, nous avons le check out. Nous avons d'abord examiné le type de transaction de paiement, ce qui signifie que vous vendez auprès d'un service moyennant des frais uniques. Ensuite, vous avez un don. Maintenant, une fois que vous avez cliqué sur faire un don, que se passe-t-il ? Vous pouvez choisir le nom de l'article ici. Ce serait un don, évidemment. Maintenant qu'il s'agit d'un don, vous ne vendez rien. Vous êtes en train d'accepter les paiements et il n'y a plus de stock dans votre inventaire. Vous pouvez simplement donner à SQ quelque chose comme N un, juste deux, juste pour associer un don. Avec cela, vous avez alors le montant du don. Que vous souhaitiez collecter des montants fixes de dons ou que vous souhaitiez que ce soit n'importe quel montant. Si vous souhaitez que les utilisateurs puissent payer tout ce qu'ils peuvent. C'est ce que vous pouvez sélectionner, alors vous avez un abonnement. Une fois que vous avez cliqué dessus, vous pouvez choisir le nom de l'article. Disons le niveau de base, non ? Nous avons examiné les trois niveaux de tarification dans le tableau des prix. Conférence ici. Vous pouvez simplement donner le nom à votre service. Vous pouvez régler le SQ sur quelque chose comme le niveau de base. Et tu peux fixer le prix. De plus, disons que 50 dollars sont ce qu'ils paieront sur une base mensuelle. Ou vous pouvez le définir tous les jours, toutes les semaines ou tous les ans. Et il existe également une fonction de renouvellement automatique. Lorsque quelqu'un clique et fait un achat et qu'il saisit ses coordonnées Paypal, il sera débité sur une base mensuelle, quotidienne ou hebdomadaire. Si vous voulez que le renouvellement automatique soit désactivé, je ne pense pas qu' il soit utile d' en faire un abonnement. La seule différence serait qu'une fois que vous aurez souscrit un abonnement et que vous ne disposerez pas de la fonction de renouvellement automatique, cela signifie essentiellement que vous cela signifie essentiellement que vous bloquerez l'accès au service auquel votre utilisateur aura accès et qu' il devra effectuer le paiement. Encore une fois, si vous utilisez ce renouvellement automatique, cela signifie essentiellement que l'utilisateur n'a pas à saisir les informations Paypal encore et encore. Bien. Voici quelques éléments votre bouton Paypal qui arrivent sur ce bouton rayé Si vous allez ici, vous pouvez définir le nom du produit. Donnons-lui à nouveau quelque chose comme un livre, un livre. Je peux régler la devise sur une autre. Ici, j'ai un tas d'options différentes. Auparavant, nous ne voyions pas d'INR, qui sont des roupies indiennes pour Paypal, mais maintenant, pour Stripe, nous avons Ensuite, vous avez le prix du produit. Vous pouvez le régler à nouveau, 20$ Vous pouvez définir la quantité. Vous pouvez définir le prix d'expédition. Le taux d'imposition. Mais pour le taux d'imposition, vous devrez d'abord connecter votre compte Stripe et, dans le compte Stripe, vous aurez accès aux produits. Pour ce produit en particulier, vous devez définir les taux d'imposition. C'est bon. Je vais vous montrer comment nous pouvons utiliser le bac à sable ou plutôt tester l' API de Stripe Cela fonctionnera avec ce fichier particulier de notre Elementor Pro sans avoir à souscrire à l' abonnement Elementor Pro En arrivant à la partie bouton ici, vous pouvez remplacer le bouton par quelque chose comme, disons, acheter. Je peux redéfinir l'alignement, gauche, droite, centre, justifié. OK, je peux juste aligner le centre. Je peux changer l'icône. Je peux définir si je veux que l'icône s' affiche ou avant le texte, je peux choisir l'espacement des icônes ici Dans les options supplémentaires, je peux choisir la redirection après un paiement réussi. Ici, je peux définir l'URL. Ici, nous avons ouvert Stripe dans un nouvel onglet, messages personnalisés. Ici, vous avez configuré l'environnement de test Stripe. Si j'active cette option, vous verrez que nous devons d' abord accéder aux paramètres d'intégration. Si je passe la souris dessus, vous verrez qu'un nouveau lien s'ouvrira dans notre tableau de bord Wordpress juste ici, sous Tableau de bord Wordpress Vous constaterez que nous sommes sous Elément ou Paramètres Dans Paramètres, nous avons sélectionné les intégrations. Une fois que vous avez sélectionné les intégrations, il vous suffit de faire défiler la page jusqu'à la partie où se trouve Stripe et, sous clé secrète de test, vous devez coller votre clé d'API Je vais donc simplement revenir à mon tableau de bord Stripe. Vous devez d'abord créer un compte. La création de votre compte ne prend pas beaucoup de temps. Vous n'avez pas besoin de saisir un tas de données personnelles, d' attendre l'autorisation et de créer votre compte. Vous pouvez simplement commencer et il vous suffit d'accéder aux paramètres de votre tableau de bord. Une fois que vous y serez, vous trouverez API key stab. Il suffit de cliquer dessus et de révéler votre clé de test. Et copiez-le et collez-le ici sous cette clé secrète de test. Une fois que vous avez fait cela, cliquez simplement sur une API de test valide. Ici, vous pouvez simplement le publier. Maintenant, une fois que vous l'aurez publié , que se passera-t-il ? Voyons si je clique sur le bloc deux. Une fois que je fais défiler l'écran vers le bas, je peux cliquer sur ce paiement à rayures et vous pouvez voir 20$ de livre, c'est ce que nous pouvons voir. C'est en mode test, très bien. Vous pouvez saisir ici les détails de votre carte e-mail , le titulaire de la carte, etc. Bien, nous allons juste y retourner et oui, en gros, il s'agissait de votre achat de Stripe. La seule différence réside dans Stripe et Paypal, c'est que Paypal vous permet de sélectionner d'autres options, comme don, un abonnement ou un achat unique. Mais pour Stripe, vous ne pouvez vendre qu'un seul produit. Si vous voulez vendre, je pense à un abonnement ou quelque chose comme ça. Vous devrez modifier les paramètres de votre compte Stripe lui-même. Parce qu'ici, comme vous pouvez voir sous vos prix et paiements, vous devrez d'abord configurer vos produits, puis sélectionner les taux d'imposition, etc. Actuellement, Element ou Pro ne vous permettent pas , en tant que concepteur et développeur du site Web , d'ajouter la fonctionnalité de don et d'abonnement aux boutons à rayures, mais vous pouvez le faire pour Paypal. 33. Hotspot - Avez-vous déjà entendu parler de cela ?: Très bien, maintenant laissez-moi vous montrer une fonctionnalité intéressante appelée hotspot. Alors, qu'est-ce que cela signifie ? Supposons donc que j'ai une image, de préférence d'une carte ou d'un produit. Et pour cela, disons que sur une carte, vous avez plusieurs emplacements et que vous essayez simplement d'afficher l'emplacement de vos bureaux ou de vos magasins. Hein ? Vous pouvez donc ajouter des points d'accès afin que chaque fois que quelqu'un clique sur ce point ou passe la souris autour de celui-ci, il trouve son adresse Permettez-moi de vous en montrer un exemple. Je ne peux choisir qu'une seule image. J'ai cette photo vraiment cool d'un PC de jeu installé ici. Je peux y ajouter quelques points chauds. Cependant, nous pouvons voir si ce produit est une chaise de jeu. Il s'agit d'une souris de jeu. Nous avons des oreillers, nous avons un clavier. Nous avons un ordinateur au format quatre tout en bas, ou une affiche, je peux voir. Ensuite, vous avez des moniteurs externes, vous avez une manette à l'arrière. Vous avez les Funko Pops et les mousses insonorisées C'est vrai. Vous pouvez ajouter un hotspot ici et le contenu que vous trouverez sur l'image, vous pouvez choisir la taille de l'image Vous pouvez définir l'alignement à gauche, à droite, au centre, etc. Mais pour l'instant, il occupe simplement toute la taille du conteneur situé sous le point chaud. Vous pouvez ajouter un ou plusieurs points chauds. Je peux simplement ajouter plusieurs hotspots. Mais tu ne pourrais pas le voir pour le moment. Pourquoi ? Parce que je pense que la couleur et la façon dont elle est fixée ne sont pas visibles pour nous. Nous verrons également comment nous pouvons le faire. Actuellement, j'ai ajouté deux points chauds, ce qui ne nous suffit pas. Nous en avons besoin de 1231 pour notre fauteuil de jeu, un pour les oreillers, un troisième pour le moniteur, quatrième pour le clavier, cinquième pour la souris, six pour ce que vous dites, le clavier, le tapis de souris Ensuite, vous avez pour le PC de bureau, ce serait 12345678, Funko Pour le formulaire, nous en avons dix, ajoutons-en dix. 4 567 899,10 D'accord, je peux ajouter une animation, mais vous ne pourrez pas la trouver ici Ce que nous devrons faire, c'est passer au style. Nous irons au point chaud. Sous point chaud, vous pouvez voir qu' aucune couleur n'a été associée. Il va falloir choisir une couleur vive pour qu'elle soit visible. Je vais sélectionner quelque chose comme du blanc. Le blanc serait-il visible ? Je pense que oui. Ou nous pourrions le régler sur quelque chose comme orange. Ou nous pouvons également ajouter une autre image. Tout d'abord, restons-en à cette image et voyons si cela fonctionne ou non. Nous avons d'abord le point chaud blanc. C'est bon. Nous pouvons utiliser celui-ci ou je pourrais ajouter quelque chose comme une orange qui rendrait orange visible. Ouais. Que se passe-t-il si nous choisissons une autre couleur ? J'essaie juste de jouer parce que l'image elle-même a beaucoup de couleurs car elle a une bande RGB en arrière-plan. Il y a beaucoup de couleurs dans l'image elle-même. Il devient donc très difficile d'ajouter point chaud, car il ne serait alors pas très facile de l' identifier du point de vue de l' utilisateur. Essayons de le donner sous forme de point chaud blanc. Maintenant, une fois que j'ai fait cela, je peux simplement aller sur Image ici sous Hot Spot, nous en avons plusieurs. Si je clique sur l'un des points chauds ici, je peux ajouter une étiquette. Je peux en changer la position. Je peux également ajouter un lien. Ce qui signifie que si j'ajoute une étiquette, quelque chose comme disons simplement chaise de jeu. Vous pouvez voir ici que j'ai l'étiquette qui est Gaming Chair. Très bien, maintenant je peux ajouter un lien pour que chaque fois que quelqu'un clique dessus, il soit redirigé vers lien externe ou interne. Je peux ajouter une icône pour ce hotspot. Actuellement, ce point chaud n'a pas d'icône, mais en utilisant simplement l'icône ou en téléchargeant la nôtre, vous pouvez définir la taille personnalisée de ce point chaud Vous pouvez modifier la hauteur, la largeur ou la réinitialiser en désactivant simplement Vous pouvez ajouter du contenu ici. Il y a ici une différence entre l'étiquette et le contenu. Si je l'ai comme chaise de jeu, je peux ajouter quelque chose comme si je pouvais voir le nom de la marque. Je peux simplement ajouter le nom de la marque, Secret Lab, chaise de jeu, couleur blanche. Voici la description du produit. Maintenant, que se passera-t-il si nous passons à la partie style ? Très bien, vous avez également une info-bulle, qui sera abordée dans un instant. Si je vais dans l' onglet Style sous Hot Spot, je peux modifier différentes animations. Je peux modifier différentes animations pour le hotspot. Si quelqu'un passe la souris dessus, souhaitez-vous afficher le texte du hotspot ou souhaitez-vous qu'il soit cliquable afin de pouvoir choisir entre Très bien, laissez-moi passer à l' infobulle et voir que le déclencheur est actuellement activé. Si je le mets en survol, vous le trouverez. Si je passe le curseur sur le fauteuil de jeu, vous trouverez le fauteuil de jeu Secret Lab blanc La couleur est le texte affiché juste en dessous de notre point chaud. Ici, vous pouvez définir la position de l'infobulle, que vous souhaitiez afficher le texte du contenu en haut de votre étiquette, en bas, à droite ou à gauche Vous pouvez le configurer comme vous le souhaitez. Vous pouvez définir l'animation, que vous souhaitiez qu'elle s'estompe ou qu'elle s'estompe, qu'elle s'estompe ou qu'elle grandisse. Si je le dis, tu peux le voir. Cela ressemble à ça. S' il s'estompe par direction, voici comment il apparaîtra. S'il est glissé par direction, vous pouvez le voir glisser vers le haut et vers le bas. Vous pouvez également définir la durée de l'animation. Si je passe au style sous point chaud, je peux déterminer la taille de notre étiquette, le point chaud. Je peux sélectionner la largeur minimale et hauteur minimale pour notre point chaud. Il a une certaine hauteur. C'est bon. Vous pouvez également ajouter de la couleur à la boîte. Qu'est-ce que cela signifie si j'ajoute de la couleur à la boîte ? Vous pouvez voir ici que si j' ai une chaise de jeu avec une couleur de boîte, vous constaterez que c'est notre point chaud, c'est notre étiquette. Si je survole, le contenu s' affichera correctement. Vous pouvez définir le rembourrage, vous pouvez ajuster le rayon de bordure pour cela Vous pouvez même ajouter une ombre de boîte pour le moment. Nous ne voulons aucune couleur de boîte, nous allons juste effacer cela. Nous allons également définir la taille telle qu'elle est actuellement. Nous allons aller ici. Vous pouvez modifier les paramètres de l'image comme je voudrais faire baisser la transparence ou je voudrais faire descendre la liste déroulante où se trouvent ses filtres CSS d'image. Je voudrais réduire la saturation à zéro pour obtenir une image en noir et blanc. Maintenant, ici, il serait facile de changer la couleur du point chaud et du texte lui-même. Juste sous l'infobulle, vous pouvez sélectionner la couleur du texte. Si je le mets sur quelque chose comme le rouge, voyons ce qui se passe. La couleur du contenu, le texte a été changé en rouge. Je peux définir la typographie. Je peux même modifier l'alignement, et je peux même ajouter une boîte, et je peux changer la couleur de la boîte. Vous trouverez ici une boîte pour notre contenu. C'est ce que nous voulons pour le reste des articles. Essayons de le faire. Je vais y retourner, encore une fois. Dans le contenu de ce point névralgique, celui que nous avons pour le fauteuil de jeu, je vais simplement supprimer l'étiquette, car nous voulons que ce bouton apparaisse, n'est-ce pas ? Cet effet pulsatoire. Eh bien, nous allons changer la position en cliquant simplement sur la position plutôt que sur le contenu. Et je peux régler le décalage, que je le veuille vers la droite ou vers la gauche de l'image. Nous voulons l'afficher juste au-dessus de la chaise de jeu, à droite, ou simplement sur la chaise de jeu. Bien. C'est ici que nous pouvons définir l'orientation verticale. Que nous voulions que ce soit en haut ou en bas, nous pouvons le définir. Mais pour le moment, j' aimerais juste garder cela en tête. Je peux sélectionner l'animation. Je veux que l'animation de ce point chaud soit douce, étendue, superposée, ou aucune Cela se produira pour le cercle que vous avez ici. Bien, permettez-moi de revenir au style. Je vais changer la couleur du point chaud en rouge, ou disons simplement en orange d'ailleurs. L'orange aurait l'air bien. Je pense que nous pouvons ajouter ici quelque chose comme un orange vif. OK, laisse-moi y aller. Je vais sélectionner l'orange vif. Bien. De retour ici, sous Hot Spot, nous allons sélectionner l'article. Nous allons prendre la position dans laquelle une animation serait configurée pour s'étendre, très bien. Ou nous l'avons même dit à Soft Beat, c'est vrai. Vous avez une animation séquencée, ce qui signifie que vous pourriez, disons, avoir plusieurs animations en cours pour votre point chaud Il y en a un, il y en a deux, il y en a trois. Vous pouvez donc le régler dans le sens des aiguilles d'une montre. Cette animation apparaîtra d'abord, puis ce point chaud apparaîtra. Ensuite, le point chaud apparaîtra ici et ainsi de suite. C'est ce qu'est l'animation séquentielle. Pour en revenir à la partie infobulle, vous pouvez activer le déclencheur ou cliquer ici pour obtenir l' animation du contenu Pour ce bouton chaud ici, nous pouvons sélectionner les autres éléments De plus, si nous voulons maintenant voir le contenu que nous avons, vous pouvez voir qu'il apparaît en dehors de notre image. Nous ne voulons pas que cela se produise. Que pouvons-nous faire dans ce cas ? Il suffit de faire baisser la taille que le point névralgique du cercle ne soit pas visible. C'est la taille de celui-ci. Nous arrivons à la partie où nous voulons modifier le texte. Pour ce texte qui apparaît un peu en dehors du point névralgique, nous devrons accéder à infobulle du contenu et modifier la position plutôt que le haut Nous pouvons changer cela ici. Cela va apparaître quelque chose comme ça. Bien, permettez-moi de faire une copie du point névralgique ici. J'en ai un autre aussi, mais je vais changer de position. L'autre point chaud apparaîtrait juste ici, sur la partie écran. Bien, je vais changer le contenu pour quelque chose comme un moniteur externe, très bien. Moniteur externe juste pour cela. Pour cela, nous verrons la chaise de jeu et ainsi de suite. Je peux faire apparaître le texte de cette infobulle en haut si je souhaite en accédant simplement à la position. Et je peux le régler dans Tooltip, je peux le mettre en haut. Voici comment le texte sera affiché. Vous pouvez le faire pour tous les autres articles. De plus, vous pouvez simplement jouer et voir ce qui vous convient le mieux. Cela peut s'avérer utile lorsque vous essayez réellement de mettre en valeur différentes fonctionnalités de votre produit. Ou essayez simplement de mettre en valeur les différents bureaux et emplacements de vos boutiques dans le monde entier. 34. Faire des merveilles avec Elementor AI: Les gars, la vidéo que vous attendiez tous est enfin arrivée. Voyons comment nous pouvons utiliser l' élément ou la fonctionnalité I. Maintenant, element or I est actuellement en mode bêta au moment où j'enregistre cette vidéo, ce qui signifie essentiellement que toutes les fonctionnalités ne fonctionneront pas. Vous pouvez voir ici que nous avons la version bêta, ce qui signifie essentiellement que toutes les fonctionnalités ne fonctionneront pas parfaitement. Certains d'entre eux peuvent fonctionner correctement et d'autres peuvent ne pas fonctionner tout simplement. Néanmoins, Elementor vient de le rendre public, et ils facturent de l'argent pour cela Mais nous verrons, et nous verrons également à la fin, que cela en vaille la peine ou non, car je sais qu'il existe de nombreux outils d'IA gratuits sur le marché. Tout d'abord, le chat GPT a dominé le marché de l'IA. Ensuite, nous avons Bing propulsé par Google, Bing de Microsoft. Et je pense que Google propose également Mini, non ? Il existe tellement d'éléments et d'outils informatiques. Maintenant, en quoi l'IA d'Elementor se démarque-t-elle des autres outils d'IA ? Donc, d'abord et avant tout, l' élément, ou IA, aide à générer du texte, nous permet d'ajouter des animations à nos éléments, ajouter du CSS personnalisé, puis modifier les images et de modifier la disposition des radients d'arrière-plan Cliquez d'abord sur l'éditeur de texte ici. Ce que je vais faire, c'est simplement donner des instructions spécifiques à Element ou à AI, afin qu'il génère du texte pour notre site Web Maintenant, nous pourrions faire la même chose avec ChagBT, mais ce que dit Elementor, c'est qu'il comprend essentiellement en quoi consiste votre site Web Si vous venez d'ajouter quelques éléments à votre site Web, celui-ci comprend la mise en page et comprend les besoins du contenu. De cette façon, il donnera un résultat spécifique à vos besoins. Allons sur Prost elementor.com et vous trouverez ici un tas de Vous trouverez ici des instructions spécifiques pour les images, le code texte et pour créer des conteneurs Passons à la partie texte ici. Si je fais défiler la page vers le bas, je verrai une partie qui dit de faire une description en trois paragraphes. Maintenant, lorsque je clique sur Copier l'invite, je peux simplement revenir ici et sous cet éditeur de texte, je peux simplement cliquer sur Write It With AI. Maintenant, une fois que je clique ici, vous constaterez que cela peut prendre un certain temps. D'ailleurs, cette fonctionnalité ne sera accessible qu' à ceux qui ont connecté leur compte Google ou créé leur compte sur Elementor, et qui se sont connectés au site Web Et vous aurez un accès gratuit à Element, ou AI, pour une durée limitée. Une fois ce délai expiré, vous devrez payer les frais d'abonnement. Juste ici. Je vais juste suivre le rythme de l'invite. Maintenant, si vous remarquez ici, vous verrez que le message « Prenez une décision car », entre crochets, vous avez le créneau pour lequel le site Web est conçu le site Web est conçu et qui contient trois paragraphes. Alors revenons ici. Je vais remplacer cela par, puisque vous savez que la raison pour laquelle nous avons créé ce site Web était de promouvoir une application, une application de passerelle de paiement. Nous allons faire une description l'application de passerelle de paiement, comme nous pouvons le dire comme when more, afin que les gens puissent payer à l'international afin que les gens puissent effectuer des paiements internationaux et nationaux sans avoir ou je pourrais dire très facilement C'est bon. Et cela ne contient qu'un seul paragraphe, n'est-ce pas ? Générons le texte. Cela peut prendre un certain temps en fonction du type de contenu que vous souhaitez générer. Attendons. Et d'ailleurs, toutes les fonctionnalités que vous utiliserez consommeront peu de crédits. Je ne sais pas exactement combien de crédits seraient alloués à la version gratuite, mais vous pouvez simplement voir ici, vous constaterez qu'elle contient un très gros paragraphe. Nous pouvons simplement cliquer dessus pour le raccourcir, simplement parce que nous voulons que le contenu corresponde à notre section de héros. C'est quand même bien trop long. Permettez-moi de cliquer à nouveau dessus pour le raccourcir. Très bien, nous avons ici une passerelle de paiement qui est une solution sécurisée et rapide pour Bo Domestic et tout ce genre de choses. C'est le choix parfait pour les particuliers. Si nous pouvons sauter cette ligne, je pense que c'est une bonne chose jusqu'à présent. Copions. Au lieu de copier-coller, nous pouvons simplement supprimer la dernière ligne Et nous pouvons simplement cliquer sur Us Text pour qu'il soit appliqué ici. Très bien, c'est ainsi que fonctionne la partie texte. Publions ce site Web. J'en viens aux boutons juste ici. En dessous de ce texte, il y a deux boutons, non ? Voyons si nous avons des fonctionnalités d'IA. Pour le bouton, je vais simplement rechercher le code. Sous code, je vais rechercher le bouton. Très bien, permettez-moi de rechercher le bouton. Allons-y. Page. Voici celui-ci. Des boutons, des rotations et des déplacements de texte indiquent comment nous pouvons en faire usage Copions cette invite. Je vais retourner sur mon site web. Maintenant, comme ce bouton En savoir plus n'a pas d'icône, il suffit de cliquer ici, bibliothèque d'icônes. Et nous pouvons choisir n'importe lequel d'entre eux. Comme il s'agit d'en savoir plus, nous pouvons simplement cliquer sur la flèche. Nous avons besoin d'une flèche, très bien. Je pense que cette icône en forme de flèche serait belle. Insérons ceci ici. Bien, ça a l'air bien. Maintenant, pour utiliser cette invite, nous devons passer à Avancé. Faites défiler la page jusqu'à la partie du CSS personnalisé ici. Vous trouverez Edit with AI. Ici, nous allons coller l'invite. Bien, générons le code pour cela. Maintenant, il va générer un code CSS, que nous allons utiliser. Nous pouvons changer un certain nombre de choses. Si vous êtes expert en CSS, très bien. Ici, nous avons ce truc. Il suffit de cliquer sur Insérer. Une fois que nous l'avons inséré, voyons voir ici. Vous pouvez voir à quel point notre bouton est cool. Publions ceci. Bien, que pouvons-nous faire d'autre avec ça ? Ici, nous avons une image et nous avons une partie conteneurs. Bien, descendons et nous allons essayer de manipuler nos images et modifier l' effet d'arrière-plan de cette section. Pour cette section, comme vous pouvez le voir, nous avons une superposition d'arrière-plan Il y a une couleur blanche et une couleur verte. C'est bon. Maintenant, cette palette de couleurs est intégrée dans une partie dégradée. Il a un gradient linéaire, je pense, permettez-moi simplement de sélectionner cette section ici. Je peux passer au style. Ici, vous pouvez voir que l' emplacement du premier est 35 % et le second de 100 %. Essayons de changer cela. Que pouvons-nous faire dans ce cas ? Nous pouvons simplement rechercher trois ingrédients. Ce que vous trouverez essentiellement, c'est qu'il y a trois couleurs et qu'elles seront animées en arrière-plan. Copions l'invite. Nous allons passer ici sous Avancé. Sous Avancé, nous allons d'abord sélectionner l'édition CSS personnalisée avec AI. Assurez-vous que vous avez sélectionné le conteneur, le conteneur d'arrière-plan, la disposition de la boîte flexible et collez l'invite. Endérions le code CSS quelques secondes. Nous pouvons simplement générer l'intégralité du code CSS. Maintenant que vous pouvez constater qu'il utilise une certaine couleur par défaut, nous pouvons le changer. Voici la couleur que j'ai réellement sélectionnée. Laissez-moi simplement sélectionner cette couleur. Je vais le coller ici. OK, je vais juste sélectionner cette partie. Je vais le coller. C'est ma deuxième couleur. Je vais aussi coller ceci, la troisième couleur. Très bien. Copions. Nous allons le coller ici. Maintenant, si je le publiais, vous constaterez qu'il utilise les couleurs vertes. Nous pouvons passer à la partie style, nous pouvons désactiver cela. Vous constaterez que c'est ainsi que fonctionne l'ensemble de l'arrière-plan. Comme nous avions le style dégradé, il se chevauchait avec le CSS personnalisé C'est pourquoi l'animation et le dégradé de trois radians n' étaient pas aussi efficaces Mais maintenant tu peux voir, c'est cool à voir. Bien, revenons ici. D'autres choses peuvent être construites, nous pouvons jouer avec les images. De plus, j'ai ceci, je pourrais changer cette image pour autre chose. Mais laissez-moi simplement faire défiler la page vers le bas ou oui, quelque chose autour de cette partie où j'ai l'image de ce type. Très bien, je vais juste remplacer l'image de ce gars cette image avec un peu d'arrière-plan. Et nous allons essayer de supprimer l' arrière-plan de cette image. Sous Choisir une image ou à côté de cela, choisissez une image. Nous avons Edit avec IA ici. Je vais le sélectionner et supprimer l'arrière-plan. OK, je vais juste cliquer dessus. Bien qu'il existe un site Web appelé This Removed Dog, où vous pouvez simplement télécharger n'importe de nos images et l' arrière-plan sera supprimé. Cela nous donne un résultat assez précis. Cela prend du temps et vous pouvez voir que c'est très précis, je dirais, simplement parce que l'arrière-plan de l'image que nous avons utilisée était simple et qu'elle avait une couleur de fond unie. Je ne sais pas s' il y aurait eu quelques images ou objets supplémentaires en arrière-plan et je ne sais pas si cela aurait été efficace. Mais pour l'instant, essayons simplement d'utiliser cette image. Voyons voir si cela fonctionne. Il va évidemment utiliser cette image dans cette section. Voici à quoi ressemble la section. accord, pour la partie images, nous pourrions même le changer en quelque chose d'autre si j'ai une image comme celle-ci. Permettez-moi de vous présenter une nouvelle image, l'image du produit. Essayons d'utiliser l'image du produit. Juste ici. Très bien. Ici, j'ai cette image. Je peux simplement choisir cette image. Je peux changer le produit lui-même. Je pourrais ajouter des variantes. Je peux décrire la variation ou le changement que je souhaite apporter au produit. Je pourrais dire que l' image est celle d'un cheveu. Soin. Ainsi, l' image contient des images de produits de savons revitalisants pour cheveux Nous aimerions remplacer ces produits. Encore une fois, il ne montre pas beaucoup de variations, je dirais en termes de variations de l'image. Cela ne fonctionne pas très bien parce que je sais d'autres outils, comme Mid-Journey , en sont également à leur phase bêta. Nous ne pouvons évidemment pas nous attendre à des merveilles de la part d'Element. Ou laissons cela et nous pourrions le remplacer par ce que nous avions utilisé plus tôt , à savoir le ciel. Bien, qu'est-ce qu'il nous reste ? Essayons de voir comment générer un nouveau conteneur ici. Au lieu de cliquer sur le signe plus où nous devons créer le conteneur entier et toute la section à partir de zéro ou en imputant un nouveau modèle Essayons de générer une nouvelle section en utilisant l'IA Ici, je pourrais simplement cliquer sur ce bouton AI et il nous demande de saisir quelques suggestions d'instructions. Maintenant, je veux que vous soyez très précis sur vos instructions pour le moment Je viens de noter l'intégralité de l'invite et j'ai divisé mes instructions en fonction de la mise en page, du type de palette de couleurs que je souhaite suivre, du type de typographie que je souhaite suivre, du type d'images que je souhaite, du type d'actions et d'éléments du CTA que je souhaite utiliser, du type d'animation que je souhaite présenter à J'ai déjà écrit toutes ces sortes de choses . Vous pouvez simplement prendre l'aide de Cha GPT et obtenir une invite qui nous aidera à créer des instructions permettant à Element ou à AI de créer un nouveau conteneur Disons simplement qu'une société de produits, si vous êtes en train de créer une section dédiée aux héros, c'est à cela que vous pouvez participer. Je vais simplement coller l'invite dans son intégralité, puis cliquer sur Générer. Voyons quel type de contenant cela apparaît, car je pense que le design est très visuel. Vous ne pouvez pas l'expliquer en termes de mots. C'est pourquoi des produits comme Dvd et Figma existent. Et ils sont dotés de fonctionnalités collaboratives qui permettent aux utilisateurs de travailler en collaboration au lieu de taper et expliquer le type de travail que vous attendez les uns des autres Ici, vous pouvez voir qu'il montre des choses très, très basiques. Il y a deux conteneurs. L'un contient le texte entier. En termes de texte, je ne doute pas qu'il excellera, car St GBD lui-même et le modèle GBT lui-même sont très bons en termes de texte, mais en termes d'images, d' animation et de mise en page, ce n'est pas le cas, il ne fournit pas de résultats précis Nous pourrions simplement supprimer cette partie ou le meilleur moyen serait d'importer des modèles prématés, soit depuis Theme Forest soit en utilisant les modèles Elementor Pro J'espère que vous avez apprécié cette conférence. Il y a bien d'autres choses que cet élément pourrait améliorer en termes d'IA. Voyons si, à l'avenir, ils pourraient améliorer et déployer la bonne version d'element. Ou moi pour le public. 35. C'est un wrap - Notes de fin: Les gars. Avant de terminer ce cours, j'aimerais simplement aborder certaines des choses que nous avons peut-être manquées. Ici, je suis sur mon tableau de bord Wortress et sous Elementor, nous avons quelque chose appelé Lorsque nous irons ici, vous trouverez sous les onglets généraux qu'il existe ce qu'on appelle un mode sécurisé. Cela peut s'avérer utile lorsque, disons simplement que vous utilisez certains plugins, ou que vous avez importé un thème depuis Theme for us ou l' un des marchés de thèmes et que thème depuis Theme for us ou l' un des marchés de votre site Web tombe en panne afin de résoudre les problèmes Vous pouvez simplement activer le mode sécurisé grâce auquel vous identifierez quel plugin en particulier ou ce qui cause exactement la panne de votre site Web, puis vous pourrez le déboguer C'est donc un aspect important de l'utilisation du mode sécurisé. ensuite à la partie contrôle des versions, où vous pouvez revenir à l'une des versions précédentes d'element ou en sélectionnant simplement l'une des versions et en cliquant sur le bouton de réinstallation. Très bien, alors vous avez le mode maintenance. Supposons simplement qu'une fois que vous avez téléchargé ou transféré ce site Web de votre système local vers votre fournisseur d'hébergement , que vous avez décidé, disons simplement que vous souhaitez mettre à jour votre site Web ou certaines pages Web, ce ne serait pas une bonne expérience que les visiteurs votre site Web et à ce moment-là vous mettez à jour en ce moment-là vous parallèle le site Web. Dans ce cas, ce que vous pouvez faire, simplement sélectionner le mode de maintenance dans ce que l'on appelle maintenance. Ou bien, bientôt, cela pourrait s'avérer utile lorsque vous incluez une page Web dans votre barre de menu elle-même ou dans votre barre de navigation, ou dans votre en-tête. Je dirais que cette page elle-même n' est pas complètement en ligne comme sur mon site Web. Voici ce que j'ai. Permettez-moi de vous montrer ce que je veux dire par là. Ici, j'ai quelque chose appelé page Blocks. Si je vais ici, vous constaterez qu'une page sera bientôt disponible parce que je n'ai publié aucun des blocs. Vous pouvez faire quelque chose comme ça en sélectionnant « bientôt ». Vous pouvez également simplement passer en mode maintenance, ce qui signifie essentiellement que chaque fois que quelqu'un consulte votre URL pendant que vous mettez à jour le site Web, il voit que le site Web est en cours de maintenance Et vous pouvez créer le thème et le design personnalisés l'aide du générateur d'éléments ou de thèmes. Et vous pouvez choisir la mise en page des différentes pages pour la maintenance ou à venir. Si je sélectionne le mode maintenance, vous verrez choisir le modèle en question. Maintenant, si vous avez enregistré un modèle pour le mode de maintenance, il apparaîtra ici dans le menu et vous pourrez le sélectionner. Très bien, vous avez ici la possibilité d'importer ou d'exporter n'importe quel kit, ce qui signifie essentiellement que, disons que vous avez téléchargé un élément de thème ou un thème depuis le thème pour ou l'un des marchés de thèmes, vous pouvez les importer. Ou si vous souhaitez vendre votre propre thème que vous avez créé à l'aide de l'élément ou éléments Pro et que vous souhaitez commencer à gagner l'argent en tant que freelance et vendre vos actifs numériques Ensuite, vous pouvez exporter l'intégralité de votre thème et le vendre sur n'importe lequel des marchés Très bien, vous avez ici la section des utilisateurs. Vous pouvez ajouter plusieurs utilisateurs. Donc, si vous pouvez voir qu'il existe plusieurs rôles d'utilisateur tels que abonné, contributeur, auteur, éditeur, administrateur. À l'heure actuelle, nous sommes administrateurs, ce qui signifie que nous avons accès à tout ce que nous pouvons faire sur notre site de presse. Si vous créez un nouvel abonné, cela signifie essentiellement qu'il pourra lire l'article et commenter votre article de blog. Si vous avez attribué un rôle de contributeur à quelqu'un, il peut modifier et supprimer la publication. Cela signifie simplement que vous avez le site Web de votre entreprise ou que vous avez votre propre site Web de portfolio personnel et que vous avez publié des blogs, mais que vous avez un rédacteur avec vous et que vous lui avez donné l'accès aux contributeurs afin qu'ils puissent modifier le contenu de votre publication ou peut-être même le supprimer Si ce n'est pas à la hauteur, vous avez la possibilité d'autoriser quelqu'un à y accéder en tant qu'auteur, ce qui signifie essentiellement qu'il peut publier son article, télécharger des fichiers dans la médiathèque. Disons simplement qu' au lieu d'un éditeur où éditeur signifie essentiellement contributeur, supposons que vous ayez un rédacteur dans votre équipe dont le travail consiste simplement à modifier votre publication en bloc et non créer, supprimer et ajouter du contenu à celui-ci Vous devez leur donner un contributeur, mais si vous avez un rédacteur avec vous, vous devez leur donner le droit d'auteur afin qu'ils puissent écrire, publier, télécharger des médias et autres images, vidéos, tout ce qui convient au bloc de publication. Vous avez alors un accès éditeur. Avec l'accès à l'éditeur, la personne peut gérer les catégories dans un bloc de publications. Ils peuvent modérer les commentaires, puis ils peuvent les égaliser et supprimer n'importe quel article ou page Web. C'est une autre chose importante car ici, vous leur avez également donné accès à votre page Web, qui est différente de votre publication bloquée. Cela devient comme un travail à plein temps dans lequel ils ont accès au poste de blocage. Cet accès à l' éditeur est désormais pratique lorsque vous confiez l'intégralité du projet de conception Web à votre client Cependant, ils ne manipulent pas les plugins suppriment pas les utilisateurs ou ne modifient pas le thème lui-même, ce qui pourrait entraîner des problèmes de rupture du site Web. C'est parfait pour leur donner l'accès à l'éditeur et vous devez conserver vous-même l' accès administrateur. Donc, pour donner à l'un de vos utilisateurs, disons simplement un accès d' abonné, essayons de donner un nom d'utilisateur. Je vais lui donner quelque chose comme un éditeur. Je vais écrire un e-mail. Permettez-moi d'inclure n'importe quel e-mail. Voici donc l'e-mail. Je peux écrire le prénom, le nom famille, et ici je peux changer le mot de passe si je le souhaite. Permettez-moi de mettre quelque chose comme un mot de passe très simple et je peux simplement activer ou désactiver cette barre de notification. Puisque c'est mon propre identifiant de messagerie. Je sais que l'accès à l'éditeur m'a été accordé, je vais donc simplement le supprimer Et ici, je peux choisir les différents rôles. Permettez-moi simplement de le donner en tant que rôle d'abonné et j'ajouterai un nouvel utilisateur. C'est bon. Maintenant, laissez-moi simplement me déconnecter et je connecterai avec un autre utilisateur , à savoir l'accès éditeur ou l'accès abonné, je dirais. Vous pouvez donc voir ici que je me suis connecté en utilisant l'accès à l'éditeur. Ici, vous pouvez voir Editor Access. Donc, dans mon tableau de bord lui-même, je n'ai qu'une seule option, menu de réduction du profil, et je peux accéder au tableau de bord. Très bien, donc si je vais sur un site de presse, je peux sélectionner n'importe quel article en bloc. Et ici, j'ai juste accès à lecture et à l'ajout de commentaires à mon article bloqué, ce qui est très similaire à celui des utilisateurs qui n' ont aucun accès à votre site Web. Ils peuvent même faire de même, ils peuvent lire le message bloqué et ils peuvent laisser des commentaires à l'intérieur de votre message. Mais la seule différence est que chaque fois que quelqu'un laisse un commentaire, il doit se connecter à votre site Web. C'est donc ce que vous avez fait en donnant accès à quelqu'un en tant qu'abonné. C'est bon. J'espère donc que vous avez compris et félicitations. Nous terminons ainsi tout ce cours. Sérieusement. Saviez-vous que seulement 10 % des étudiants réussissent le premier module ? Cela signifie que vous êtes littéralement l'un des meilleurs étudiants à avoir suivi ce cours. Et il ne vous reste plus que deux choses à faire pour le moment. La première consiste à passer à l'action. Aujourd'hui, je sais que cela peut sembler un peu cliché, mais c'est un fait que le voyage 1 000 miles commence par un seul pas Commencez par créer un site Web simple. Peu importe si vous ne pouvez pas tout faire aujourd'hui, mais commencez au moins. Bien, deuxièmement, j'ai besoin de vos commentaires. Prenez 30 secondes de votre temps pour laisser vos commentaires honnêtes sur ce cours ici sur la plateforme. Et moi-même, ainsi que des centaines d'autres étudiants, vous serez reconnaissants. Je suis donc très heureuse de voir comment ce cours aura un impact positif sur le reste de votre vie. Assurez-vous donc de me tenir au courant de vos résultats. J'ai hâte de connaître votre succès. Prends soin de toi. Au revoir.