Comment utiliser Elementor : créer un site Web WordPress impressionnant sans code

1. Introduction: Les sites Web sont très importants. Nous les utilisons pour tout, n'est-ce pas ? Nous les utilisons pour les actualités, pour la musique ou pour mettre en valeur nos compétences créatives dans nos portfolios. Si vous voulez créer un site Web demain, par où commencer ? Quel programme utilisez-vous ? Dans ce cours, je vais vous montrer comment créer un site Web à l'aide du générateur de pages Elementor C'est un programme fantastique qui est super facile à utiliser et qui vous permet d'être super créatif. Bonjour, je suis John Wolfgang Miller. Je suis designer professionnel depuis 20 ans et j'ai travaillé pour de grands clients tels que Fox TV ici en Australie. Maintenant, si vous voulez utiliser Wordpress, cela peut devenir assez complexe. Oui, vous pouvez simplement acheter un thème ou quelque chose et l'utiliser. Mais vous allez vous retrouver avec un site Web qui ressemble exactement à celui des autres. Mais si vous utilisez l'élémentaire, vous devenez super créatif Tu peux construire ce que tu veux. C'est un programme fantastique. Et dans ce cours, je vous montre toujours comment utiliser la version gratuite du programme, afin que vous puissiez simplement l'utiliser pour développer toutes vos compétences. Dans ce cours, je vais vous guider tout au long du processus. Je vais vous montrer comment le configurer , puis nous créerons un site Web complet. Nous commencerons par une section de héros impressionnante , puis nous passerons quelques parties d'animation qui impressionneront vraiment les visiteurs de votre site Web. Ce cours est parfait pour vous si vous êtes débutant ou même si vous avez beaucoup d'expérience Ce que vous apprendrez ici améliorera considérablement toutes vos compétences en conception de sites Web Vous aurez un beau site Web à la fin de celui-ci. Et si vous souhaitez approfondir votre carrière dans la conception de sites Web, voici ce que vous devez savoir. Allons donc créer un site Web. Commençons. 2. Projet de classe: Le projet principal ici est de créer un site Web complet d'une seule page. Chaque leçon vous montrera comment configurer différentes parties du site Web dans Element, ou toutes à l'aide de différents widgets et outils. Les leçons commenceront par la section d'ouverture de votre héros, puis vous créerez une section d' information avec un curseur d'image Ensuite, vous allez créer deux sections différentes qui fonctionnent toutes deux de manière animée très cool. Ensuite, vous terminerez le site avec un pied de page et un en-tête d'installation Elementor Suivez chaque leçon et reconstituez ce que vous avez appris À la fin de chacune d'elles, vous pouvez soit utiliser exactement les mêmes images que moi, soit créer exactement le même site. Ou vous pouvez utiliser vos propres images et leur donner votre propre petit style. Si vous souhaitez utiliser exactement les mêmes images, elles sont conservées ici dans la section des ressources. Téléchargez-le et ajoutez-le à votre bibliothèque multimédia. À la fin du cours, vous aurez un site Web entièrement fonctionnel. Vous en aurez appris beaucoup plus sur Elementor, vous pourrez donc approfondir vos compétences en matière de conception de site Web approfondir vos compétences en matière de conception de Pour ce cours et tous mes cours, je vais parler de beaucoup de choses différentes. Il y a beaucoup de choses à aborder dans tous ces cours. Je vous recommande vivement de jouer et de faire une pause au fur et à mesure. Si je dis quelque chose de grand en un, faites une pause et essayez-le vous-même. Si vous devez le refaire, il suffit de revenir en arrière, 15 secondes en arrière, 15 secondes en arrière, puis vous pourrez regarder cette partie à nouveau dans son intégralité Cela vous aidera à comprendre ce que j'ai dit et à l'essayer. Si vous rencontrez des problèmes avec la qualité de la vidéo que vous regardez, rendez-vous ici pour accéder aux niveaux de qualité et modifiez les paramètres ici. S'il est réglé sur automatique, il se peut que vous ne le voyiez pas aussi net que vous le souhaitez, alors changez-le en 720 ou 1080 pixels. 3. Configuration Elementor et Wordpress: Nous voici sur elementor.com C'est le premier endroit où vous devriez normalement vous rendre si vous essayez de configurer le générateur de pages Elementor Vous avez peut-être déjà configuré cette configuration. Si vous n'hésitez pas à passer à la leçon suivante ou rester dans les parages pendant quelques minutes, assurez-vous que tout est correctement configuré. Maintenant, nous voulons simplement utiliser la version gratuite d' Elementor pour cette classe Cependant, le problème est qu'avec n'importe quel site Web, vous devez toujours payer pour l'hébergement. L'hébergement est l'entreprise qui stocke votre site Web pour vous. Elementor fait tout cela lui-même, mais il y a des frais. Cependant, comme nous voulons simplement utiliser la version gratuite d'Elementor, je vais vous montrer un moyen dès maintenant de configurer une option d'hébergement gratuite Nous voici chez Word. Wordefi, propose une version gratuite de l'hébergement Wordpress Si vous venez ici et que vous comparez des produits, vous verrez qu'ils ont des versions payantes et qu'ils ont également une version gratuite. C'est pour un site de développement gratuit. C'est un site de développement gratuit. Cela signifie que si vous voulez juste jouer avec Elementor pour vous habituer au programme, choisissez-le Il y a un lien pour accéder au mot ci-dessous dans la section à propos de ce cours. Lorsque vous arrivez ici, cliquez sur « En savoir plus », puis sur « Inscrivez-vous ». C'est gratuit Entrez votre prénom, nom de famille, e-mail, mot de passe, etc., ici, puis cliquez sur S'inscrire La première chose à faire est de vérifier votre adresse e-mail. Ensuite, entrez ici et cliquez sur Créer un nouveau site. Commencez par le nom du site Gang Music Location. Je suis basé ici en Australie, URL temporaire. Eh bien, c'est juste pour une raison temporaire de toute façon, vous pouvez donc l'appeler comme vous voulez, mais disons simplement Ing. Musique Sélectionnez ensuite à nouveau le type de site, choisissez simplement la version de profondeur et accédez au site. Vous ferez tourner un petit rouet pendant environ une minute pendant qu' il met tout en place. Lorsque c'est fait, venez ici et cliquez sur le W, le logo Word Press. Cela vous donnera une fenêtre contextuelle vous indiquant quel est l'utilisateur de Wordpress et le mot de passe. Cliquez simplement sur cette petite icône ici et cela copiera le mot de passe pour vous. Ensuite, passez à WP Admin, entrez Word Fire et mot de passe, cliquez pour mémoriser le mot de passe, puis cliquez sur Se connecter. Nous voici maintenant dans le tableau de bord de Wordpress. Nous pouvons maintenant commencer à tout construire à partir d'ici. Si vous n'avez jamais utilisé Wordpress auparavant. Eh bien, je vais juste vous montrer rapidement le menu car tout se trouve ici sur l'élément de gauche. Le Page Builder est un plugin, tout d' abord, nous devons l'installer. Venez ici pour les plug-ins et cliquez sur Ajouter de nouveaux plug-ins de recherche. Tu es là. Installez Element ou Website Builder maintenant, puis cliquez sur Activer pour ne pas accéder à cette page. C'est ici que vous devez créer un compte élémentaire. Mais encore une fois, nous allons simplement le faire avec la version gratuite. Créez mon compte, puis saisissez votre e-mail et votre mot de passe. Ensuite, il dira : connectons votre site. Vous êtes désormais un client élémentaire. Pour démarrer avec n'importe quel site Wordpress, vous devez toujours commencer par un thème. Il s'agit du backend de l'ensemble de votre site Web. Creation Elementor a son propre thème principal, qui s'appelle Hello Cliquez ici et continuez avec le thème Hello. Donnons maintenant un nom à votre site. Nous l'avons déjà parce que nous l'avons configuré plus tôt. Donnez-lui l'apparence d'un logo, nous pouvons le faire, mais ignorons celui-ci. Pour l'instant, c'est terminé. Maintenant, saute ça. Nous reviendrons dans l'élément ou dans l'éditeur. Avant de commencer à créer notre site Web, il suffit de vérifier quelques paramètres dans le tableau de bord. Nous devons quitter cette page. Tout d'abord, pour configurer cela, passons au menu hamburger sur la gauche et choisissons Préférences utilisateur Ici, il est indiqué Exit 2, et vous avez quelques options ici. Celui que nous voulons, c'est celui-ci. P Tableau de bord, sélectionnez-le. Revenez ensuite à votre menu de hamburgers et choisissez Exit. Ensuite, il est écrit « Quitter le site ». Cliquez simplement sur Quitter. Ou si vous avez déjà installé la dernière version d' Elementor, c'est ici que vous trouverez ces options Il suffit de monter ici sur le logo Elementor et de cliquer dessus. Choisissez ensuite les préférences utilisateur ici, assurez-vous que le tableau de bord WP est sélectionné. Cliquez à nouveau sur le logo Elementor , puis cliquez dessus sur Wordpress Cela vous ramènera ici dans votre tableau de bord. nous reste plus qu'à vérifier quelques paramètres dans l'Elementor Branchez-vous, venez ici sur la gauche sur Elementor, survolez et choisissez Paramètres La première que nous voulons sélectionner concerne les couleurs et les polices par défaut. La façon dont Elementor est configuré est qu'il utilisera les couleurs et les polices déjà configurées dans le thème Hello Elementor Parce que nous voulons être très créatifs, nous voulons simplement désactiver cette option. Il suffit de cocher cette case, de cocher cette case et de cliquer sur Enregistrer. Passons maintenant aux fonctionnalités. Si vous avez la dernière version d'Elementor, vous n'avez probablement rien à changer ici Mais si vous avez une ancienne version ou si vous voulez simplement vérifier que les bons éléments sont actifs, rendez-vous ici pour les fonctionnalités. Tout d'abord, faites défiler la page vers le bas jusqu'à Grid Container, où il est écrit Default. Il suffit de le définir comme actif et de cliquer sur Activer l'éditeur suivant dans la barre supérieure. Il s'agit de la dernière version de l'éditeur d'Elementor. Si vous utilisez la dernière version, est probablement déjà configurée. Mais venez quand même ici et choisissez Active. Faites ensuite défiler cette section vers le bas, fonctionnalités stables. Faites défiler la page vers le bas jusqu'à celui-ci qui indique Flex Box Container et assurez-vous qu'il est actif. Lorsque ces trois éléments sont actifs, faites défiler l'écran jusqu'en bas et cliquez sur Enregistrer les modifications. Maintenant, tout est configuré et nous sommes prêts à commencer à créer votre site Web. 4. Elementor 101 - Menus: Maintenant que c'est configuré, passez aux pages et sélectionnez toutes les pages. Comme vous pouvez le voir ici, quelques pages sont automatiquement associées au thème. Nous n'avons besoin d' aucune de ces pages, mais celle-ci est en ligne et a été publiée comme vous pouvez le voir ici. Désactivons simplement cela , car il s'agit simplement d'une page vide qui n'a pas besoin d'exister. Si nous passons le pointeur de la souris ici lors de la modification rapide, vous avez quelques options, mais celle que nous examinons est le statut Comme vous pouvez le constater, il est publié. Vous pouvez le remplacer par un brouillon. Nous allons maintenant créer notre propre page en direct. C'est très simple. Cliquez sur Ajouter un nouveau. Vous accéderez à l'éditeur Wordpress habituel. Faites défiler la page vers le haut pour ajouter un titre et insérez le titre de votre site Web. Le mien sera Wolf Gang. Musique Alors venez ici pour le résumé. Sur le côté droit, cliquez sur le menu déroulant où il est écrit modèle. Cliquez sur Modèle par défaut. Ensuite, dans ce menu déroulant, choisissez l' élément ou le canevas. C'est ce que nous devons faire pour avoir une page claire avec rien d'autre sur lequel nous pouvons travailler. Ensuite, allez ici pour enregistrer le brouillon. Une fois que c'est enregistré, venez ici pour le modifier avec Elementor Bienvenue dans l'éditeur Elementor. Comme vous pouvez le constater, nous utilisons la dernière version du menu. C'est toujours bien de venir ici et de jouer avec tous les paramètres, juste pour savoir où tout se trouve. Avant de commencer, je vais parcourir rapidement chaque partie de la barre de menu en haut de la page. Tout d'abord, ce logo Elementor, c'est un menu déroulant. Ici, nous avons le générateur de thèmes. Ne vous inquiétez pas pour un élément professionnel que nous n'utilisons pas dans l'histoire d'aujourd'hui. Eh bien, évidemment, si vous faites une erreur, vous pouvez revenir aux versions précédentes et aux raccourcis clavier. Cela vous indique simplement tous les raccourcis pour accélérer l'ensemble du processus. Je suppose. Ensuite, l'icône plus ajoute un élément C'est là que vous verrez les éléments, tous les widgets que nous utiliserons sur ce site Web, ce menu déroulant configuré en différentes sous-sections, mise en page, conteneur et grille C'est ce que nous avons utilisé pour commencer à créer tous les éléments, chaque section de notre site Web. Vous avez vos bases, vous avez également votre section pro. Vous pouvez évidemment voir un petit élément de cadenas au-dessus de tout cela, mais ne vous inquiétez pas pour cela Nous ne pouvons utiliser aucun d'entre eux, mais rien de tout cela n'est nécessaire pour tout ce que nous allons construire à ce jour. Nous utilisons simplement entièrement la version gratuite. Nous pouvons clore cette partie. Et puis vous obtenez tous les paramètres généraux, tout ce dont vous aurez besoin ici, des carrousels d'images, des témoignages, etc., ce sont les Ensuite, nous avons les paramètres du site, c'est ici que vous pouvez modifier les paramètres qui fonctionneront sur l'ensemble du site Web. Si vous créez un site Web avec plusieurs pages différentes, tous les paramètres indiqués ici seront pertinents. Chaque page que vous créez. Ensuite, si nous fermons celui-ci puis cliquons sur celui-ci qui dit Structure, vous obtenez cette petite fenêtre contextuelle. Cela s' appelait autrefois le Navigateur. Si vous connaissez les anciennes versions d'element, il s'appelait Navigator. Il s'appelle maintenant Structure, mais il fait exactement la même chose. J'en parlerai au fur et à mesure que nous commencerons à créer votre site Web. Ensuite, il s'agit de la section réactive. C'est très, très important et nous y reviendrons plus tard dans le cours. C'est ici que nous pouvons sélectionner différents appareils, ordinateur de bureau, tablette et mobile. Celui-ci ici, Aperçu des modifications. C'est génial car pendant que vous travaillez sur le site Web, vous pouvez cliquer sur Aperçu des modifications. Ensuite, vous pouvez voir à quoi cela ressemblerait pour tous les autres utilisateurs de votre site Web lorsqu'il sera mis en ligne. C'est tout Nous pouvons maintenant commencer à créer votre site Web. 5. Héros d'ouverture NOUVEAU: Bien, commençons à créer votre site Web. Nous partons d' une page toute blanche. Nous devons commencer à ajouter nos premiers éléments. C'est cette section que nous allons examiner. Il y a deux options ici. Tout d'abord, nous avons ce modèle d'ajout. Cliquez dessus et vous verrez ce que cela signifie. C'est ici que vous pouvez importer des pages prédéfinies, des blocs différents, des éléments créés par des éléments eux-mêmes. Cependant, vous pouvez toujours voir la petite icône pro au-dessus de tout cela. Ils ne sont disponibles que dans la version pro. Cependant, cela n'a aucun rapport ce que nous essayons de faire ici de toute façon. Nous essayons de créer notre propre site Web unique. Nous ne voulons pas utiliser quelque chose qui a déjà été préfabriqué par quelqu'un d'autre. Fermez juste celui-ci. Celle que nous allons utiliser est l'icône plus. Cliquez dessus. Quelle mise en page souhaitez-vous utiliser ? Ce sont les deux options que nous avons pour l'élément. Je vais juste vous montrer la différence entre ces premières grilles. Comme vous pouvez le voir ici, il s'agit de structures différentes. Cependant, chaque structure possède une largeur définie pour chaque élément qu'elle contient. Celui-ci est de 50, 50 de gauche à droite, 50 de haut en bas, et c'est une répartition égale des trois tiers. Chaque section de la grille a toujours exactement la même largeur et la même hauteur. Si nous le fermons, nous cliquons sur la case Flex, c'est là que nous avons encore quelques options créatives différentes. Comme vous pouvez le voir ici, il comporte cinq sections différentes, mais elles n'ont pas toutes la même largeur et la même hauteur. Ils ont des largeurs et des hauteurs différentes. Comme vous pouvez le voir ici, même largeur. Cependant, la hauteur ici est le double de la hauteur de ces deux éléments. Ici, dans le cluster d'aujourd'hui, nous utiliserons ces deux éléments différents. Nous utiliserons des conteneurs, la boîte flexible et le réseau. Mais pour cette section, la section héros, nous allons utiliser un conteneur Flex Box. Nous voulons juste un contenant unique. Passez la souris sur le premier avec la flèche pointant vers le bas. Et cliquez dessus. Cela tombera dans votre premier contenant, qui se trouve dans cette section rose en haut. Je vais juste vous montrer quelques autres éléments. Vous pouvez voir ici en haut que nous avons un autre symbole plus, un conteneur qui signifie simplement que vous pouvez faire la même chose, mais en haut ou en dessous. Fermons ça. Ensuite, nous avons le x, c'est-à-dire pour supprimer le conteneur. Si vous faites une erreur ou si vous ne vouliez pas ajouter un autre conteneur, vous pouvez simplement le supprimer. Ensuite, nous avons les petits points ici où il est écrit Modifier le conteneur. Si vous cliquez dessus, vous verrez les options qui s'affichent automatiquement sur le côté gauche ici. Nous allons y jeter un œil dans quelques minutes. Cela vous permet également de faire glisser le conteneur vers le haut et vers le bas. Lorsque nous avons plusieurs conteneurs différents ici sur la page, vous pouvez les déplacer l'un au-dessus de l'autre ou en dessous de l'autre, en les faisant glisser comme ça. L'autre option que nous avons maintenant configuré un conteneur est le clic droit. Si je devais écrire, cliquez ici, voici les options qui s'offrent à moi. Mais nous voulons écrire « cliquez » sur le conteneur lui-même et nous avons toutes ces options. Ici, il est très clair ce que fait chacun d'entre eux. Si vous avez créé un certain conteneur et que vous souhaitez répéter l'action, vous pouvez simplement le dupliquer et il fera exactement la même chose à nouveau. Ensuite, vous avez à nouveau la possibilité de copier-coller. Si vous souhaitez copier quelque chose que vous avez fait ailleurs, vous pouvez le coller ailleurs sur le site. Ou vous pouvez même appliquer un style, disons simplement que vous avez un texte configuré d'une certaine manière et que vous souhaitez que le texte suivant fonctionne exactement de la même manière. Copiez le texte et collez le style. Cela ne changera pas le libellé du texte, mais sa taille. Le principal point que je veux examiner ici est la structure. Cliquons dessus. C'est un très bon outil car il divise votre site et chaque page en différentes sections, différents conteneurs Ensuite, vous avez un menu déroulant qui vous permet de voir ce qu' il y a à l'intérieur de chaque conteneur. Nous verrons comment cela fonctionne lorsque nous continuons à créer plusieurs éléments différents sur la page et à déposer différents widgets dans le conteneur. Nous allons maintenant créer la section héros de notre site Web. Nous appelons cette section le héros parce que c'est la partie la plus importante de chaque page. Pourquoi ? Parce que c'est la section d'ouverture. C'est la première chose que les gens voient lorsqu'ils visitent votre site Web et c'est votre première chance de les impressionner. Ce que nous allons créer ici est une section d'ouverture d'une page complète une image de fond avec le logo de l'entreprise en haut. Cette image donnera une bonne idée de ce qu'est le site. Ensuite, le logo de l'entreprise contient également le nom de l'entreprise afin que les gens sachent où ils se trouvent. Quand ils arrivent sur le site. Jouons un peu avec ce contenant. Maintenant, allez voir votre menu sur le côté gauche. Et vous verrez trois sous-sections. Il existe un style de mise en page avancé. J'aborderai différentes parties de ce sujet tout au long du cours, juste pour vous donner une bonne idée générale de la façon dont tout cela fonctionne et ce qui est possible dans l' élément ou le générateur de page. Commençons par examiner la mise en page. C'est ici que nous décidons de la largeur et de la hauteur de l' ensemble du conteneur, toute la section du héros. La largeur est déjà définie sur une taille par défaut de 1 140 pixels de large Votre autre option ici est d'utiliser toute la largeur. Si vous regardez cette section en haut, vous verrez la différence. Si je choisis la pleine largeur, elle couvre toute la page. Cela fonctionne pour certains conteneurs de votre site, mais pas pour d'autres. Par exemple, si vous en avez un contenant du texte, vous ne voulez pas qu'il se trouve juste sur le bord de la page, car le flux du site Web ne fonctionne pas vraiment. Vous avez toujours besoin d' un petit espace vide, d'un petit espace blanc autour du texte. Remettons-le en boîte, et nous le laisserons à la valeur par défaut Vous pouvez le modifier à la taille de votre choix, mais je vous recommande vivement de vous en tenir à la largeur par défaut. Nous voulons maintenant examiner la hauteur. Comme vous pouvez le constater pour le moment, le conteneur n'a qu' une très petite hauteur, il ne descend qu'ici, ou vous pouvez voir le bord de la boîte rose. Ce que nous voulons faire, c'est dire à ce conteneur de remplir toute la page. Passons à la hauteur minimale. Si vous cliquez sur le menu déroulant, vous verrez différentes options ici. Celui que nous recherchons est VH, qui représente la hauteur verticale comme vous pouvez le voir ici Pour obtenir une hauteur maximale du conteneur, utilisez 100 H. Choisissons H et saisissons 100. Il s'agit d'un pourcentage. Si vous voulez qu'il ne remplisse que la moitié de la page, évidemment 50 %, mais nous voulons que cela remplisse la page entière. Choisissons 100. Nous avons maintenant configuré un conteneur vide vide. Ce que nous voulons faire, c'est configurer notre image d'arrière-plan, passer souris ici pour définir le style Ici, vous verrez les options d'arrière-plan. Vous en avez de nombreux types différents. Vous pouvez ajouter ici un dégradé classique ou une couleur dégradée. Vous pouvez ajouter une vidéo ou un diaporama. Pour ce que nous voulons, nous voulons juste un style classique, cliquez sur le pinceau ici. Tout d'abord, vous pouvez simplement choisir une seule couleur. Si vous cliquez sur cette case vide ici, vous pouvez choisir couleur que vous souhaitez pour l'arrière-plan. Nous ne voulons pas que ce soit une couleur, nous voulons que ce soit une image. Ce que je vais faire, c'est cliquer sur le bouton Effacer en haut. Ensuite, pour utiliser une image d'arrière-plan, survolez cette zone et cliquez sur Choisir une image Lorsque j'ouvre la médiathèque, je peux voir toutes les images que j'ai téléchargées. Si vous voulez en savoir un peu plus sur le téléchargement d'images, nous allons consulter mon profil sur le partage des compétences et regarder cette vidéo qui vous expliquera rapidement ce qu' il faut faire lorsque nous téléchargeons des images sur Wordpress Ce qui compte, c'est le ratio entre cette image, la taille du fichier et le nom du fichier. Regardez cette courte vidéo, vous en saurez un peu plus. Lorsque toutes vos images seront prêtes à être téléchargées, nous cliquons ici et sélectionnons Fichiers. Qu'est-ce que Wolfgang ? Musique Eh bien, je suis évidemment en train de trouver un nom pour un magasin de musique, mais ce sera un magasin de musique plus démodé , comme il y a 20 ou 30 ans. Donc, ce que nous allons vendre ici, ce sont beaucoup de disques vinyles, des plus rétro comme des cassettes. Mais nous allons également vendre de nombreux instruments et équipements de musique que les gens pourront utiliser lorsqu' ils enregistrent de la musique ou jouent en direct. Mais mon principal argument de vente sera le vinyle, car je pense que c'est le genre de produit qui attirera les clients. Nous aimons tous nous promener dans ces magasins et voir quelle musique est disponible. Je vais donc choisir cette image ici comme image de fond. OK, et voici à quoi ressemble le héros avec cette image en arrière-plan. Il semble que c'est parfait pour ce fond. Cependant, si je fais défiler l'écran vers le bas, vous verrez qu'il y a un petit problème ici. Ce qui se passe, c' est que cela ne correspond pas exactement au ratio de l'arrière-plan et qu'il répète donc l'image ci-dessous. Nous devons changer cela. ici au menu de gauche. C'est ici que vous pouvez apporter quelques modifications. Allons ici pour nous positionner. Comme vous pouvez le voir sur cette icône, elle est définie selon la façon dont elle s' affichera sur le bureau. Nous verrons cela plus tard dans le cours, mais c'est ici que vous pouvez modifier les paramètres pour voir à quoi cela ressemblerait sur tablette ou mobile. Pour le moment, nous ne nous intéressons qu'à l'ordinateur de bureau. Gardez-le sélectionné sur Desktop. Ici, il est indiqué que la position est par défaut. Remplaçons cela par Center Center, car je veux qu'il se trouve au centre de ce conteneur. Il répète toujours l'image ci-dessous. Allons ici pour répéter, puis disons non. Cela en fait disparaître la deuxième version. Cependant, comme vous pouvez le constater, il ne remplit toujours pas tout à fait le récipient. Et nous avons un tout petit espace blanc en bas, entre l'image et le bord du contenant. La ligne rose pour changer cela, venez ici pour afficher la taille et choisir la couverture. Allons-y. Il s'étire maintenant légèrement pour remplir exactement cette section. Alors réfléchis à ça. Lorsque vous choisissez l'image d'arrière-plan de votre héros, vous voulez évidemment quelque chose qui ait un ratio paysage. Vous pouvez choisir une image carrée ou un ratio un par un. Mais vous devez vous rappeler que cela étirera de telle sorte que ce qui se trouve en haut bas risque de ne pas s' afficher correctement. Tout cela semble bon dans l'éditeur. Cependant, une bonne façon de vérifier à quoi cela ressemblera lorsque les gens le verront sans utiliser le bouton de prévisualisation des modifications est de cliquer sur cette petite flèche ici. Cette petite flèche indique qu' elle masquera le panneau. Voici l'ensemble du panneau sur la gauche. Et évidemment, quiconque visite le site en direct ne le verra pas. Cliquez sur la petite flèche pour masquer le panneau. Cela masquera également le menu Structure ici sur la droite. Maintenant, ce que vous voyez, qui n' est qu'une simple image, est exactement ce que les gens verront lorsqu'ils visiteront le site en direct. Cela vous aidera à vous assurer que les ratios sont corrects. Votre arrière-plan fonctionne parfaitement. Tout ce qui est assis dessus fonctionne également parfaitement. Nous devons retourner voir le rédacteur en chef. Cliquez à nouveau sur la flèche. D'accord, si nous faisons défiler un peu la page vers le bas, eh bien, nous ne voyons que l'espace blanc vide, mais c'est là que l'élément suivant apparaîtra. Cependant, je souhaite apporter une modification à la section des héros. Au fur et à mesure que je fais défiler l'image vers le haut et vers le bas, vous verrez que l'image se déplace avec le défilement Mais ce que je veux vraiment faire ici, c'est rendre l'image d'arrière-plan statique qui reste au même endroit. Cependant, tous les éléments s'y trouvent, tels que le logo de l'entreprise, sont ceux qui permettent de le faire. C'est un autre paramètre ici sur le côté gauche, et c'est celui-ci qui indique pièce jointe. Il est défini par défaut et vous avez deux options, l'une est le défilement et l'autre est fixe. La valeur par défaut est le défilement. Quand je fais défiler la page, elle bouge. Mais je veux juste que cela soit réglé. Remplaçons cela par « réparé » alors. Au fur et à mesure que je fais défiler la page vers le haut et vers le bas, vous verrez que cela reste statique. Il ne bouge pas. Les éléments situés sur le dessus se déplaceront. Ensuite, nous arrivons au conteneur suivant qui défilera juste au-dessus. Nous devons maintenant ajouter le logo de l'entreprise au-dessus de cette image. Faisons défiler la page vers le haut pour voir l'arrière-plan complet. Revenons ici à l'élément d'ajout du symbole plus. Ce que nous voulons faire ici, c'est déposer une image, un widget d' au-dessus de l'arrière-plan du conteneur. Cependant, les paramètres que nous avons pour le conteneur d'arrière-plan seront différents de ceux que nous voulons pour l'image. Par conséquent, ce que nous devons faire, c'est déposer un conteneur dans un conteneur. Venez ici, faites glisser un conteneur et déposez-le littéralement sur le dessus de l'arrière-plan. Ce que vous verrez ici dans la section structure est un conteneur principal puis un sous-conteneur qui se trouve à l'intérieur de ce conteneur. Ce que nous voulons faire, c'est déposer notre logo dans ce conteneur. Revenez ici pour ajouter un élément. Choisissez l'image, le widget et déposez-les dans le sous-conteneur. La première chose que vous voyez toujours ici n'est qu'une boîte grise. C'est parce qu'aucune image n'a été choisie et c'est comme une image de placement pour cela. Cependant, nous voulons changer cela. Venez ici pour choisir l'image, cliquez dessus, puis je veux choisir la version blanche de mon logo. J'ai plusieurs versions différentes de mon logo ici, mais je veux celle où l'icône est au-dessus du texte, et je veux la version blanche. Je vais cliquer sur celui-ci. Mais le principal problème, comme vous pouvez le constater, l'image est incroyablement grande et que vous ne pouvez même pas voir ce qu'elle dit si vous ne faites pas défiler la page vers le bas. Pour ce faire, il suffit de le réduire beaucoup, venir ici sur le côté gauche et cliquer sur Style Here. Vous pouvez jouer avec les pourcentages de l'image, le pourcentage de largeur ou le pourcentage de hauteur Jouons simplement avec la largeur. Si je clique sur ce petit élément déplaçable ici, je peux simplement jouer avec lui jusqu'à ce qu'il atteigne la taille que je souhaite Je dirais peut-être 15 %. C'est bien. Je veux maintenant que le logo soit placé au centre de la section des héros. Si je clique sur la flèche, voici à quoi ressembleront les visiteurs. Je ne veux pas que ce soit au sommet. Je veux qu'il soit au centre. Modifions simplement la mise en page du conteneur. Accédez à la section de votre structure et cliquez sur le sous-conteneur contenant l'image. La partie que nous examinons ici vise à justifier le contenu. C'est là que nous pouvons dire que tout contenu à l'intérieur d'un conteneur peut se trouver au début, au centre ou à la fin. Ce que nous recherchons ici, c'est le centre. Je vais cliquer sur celui-ci. Cela n'a apporté aucun changement. Pourquoi ? Parce que l' image est déjà au centre de ce sous-conteneur. Il se trouvait au milieu. Mais ce que je dois dire à Elemental, c'est ce sous-conteneur se trouve également dans la partie centrale de ce conteneur, qu'il retourne dans le conteneur principal de votre héros puis qu'il revienne ici pour justifier le contenu Puis cliquez sur Center. Allons-y. Le logo se trouve désormais au centre de la page. Au fur et à mesure que je fais défiler la page vers le haut et vers le bas, la section des héros fonctionne désormais comme je le voulais. L' image d'arrière-plan reste statique, mais le logo se déplace vers le bas au fur et à mesure que l'utilisateur fait défiler Maintenant, le seul problème que je peux voir ici, c'est que parfois, lorsqu'un utilisateur fait défiler la page vers le haut et vers le bas, on ne peut pas vraiment lire le logo en haut de l'image de fond où il est écrit Wolfgang Music. Lorsque je fais défiler la page vers le haut et que le texte est posé sur un disque vinyle plus léger, il n'est pas aussi lisible que je le souhaiterais Ce que je vais faire ici, c'est ajouter une superposition à l'image d' arrière-plan Je vais ajouter une couche de couleur qui se trouve au-dessus de l'image, ce qui assombrit un peu tout l' arrière-plan et facilite ainsi la lecture du texte sur le dessus Pour ce faire, assurez-vous que votre conteneur principal est sélectionné ici dans la section structure. Ensuite, venez ici à gauche et cliquez sur Style. Comme vous pouvez le constater, l' arrière-plan est configuré comme nous l'avons configuré auparavant avec l'image, mais nous examinons la superposition d'arrière-plan Cliquez à nouveau dessus, vous avez différentes options ici. Vous pouvez choisir le classique ou le dégradé. Jouez avec, voyez ce qui fonctionne pour vous. Mais je veux juste la couleur classique, une couleur unie. Je vais cliquer sur Classic, puis vous pouvez lancer une image dessus, mais cela ne fonctionnera pas. Ce ne sera qu'un gâchis les uns sur les autres. Je vais donc choisir une couleur. Je vais cliquer ici. Vous pouvez jouer avec les choix de couleurs ici en bas si vous recherchez un rouge, un orange ou un vert. Mais j'aime bien ce par quoi il a commencé, avec le rouge. Je pense au rouge foncé. Je pense que cela résume à peu près qui nous sommes. Je trouve que cela lui donne un joli style rétro prenez-le au milieu, puis faites-le tourner et jouez avec jusqu'à ce que vous en trouviez un qui vous plaît Je cherche un rouge foncé. Je pense que cela lui donne un style rétro. Je vais me situer quelque part entre le noir et le rouge, tout à fait comme ça. C'est un peu brillant. C'est juste devenu un peu plus sombre. Oui, ça a l'air super. Lorsque vous choisissez cela, vous pouvez voir que ce qui apparaît ici est le code hexadécimal C'est le code exact pour cette couleur exacte. Si vous souhaitez utiliser cette couleur exacte ailleurs sur le site Web, notez simplement ce code hexadécimal Cependant, plus tard dans le cours, je vous montrerai comment configurer les couleurs primaires. Cela enregistre essentiellement toutes les couleurs que vous avez utilisées ailleurs. Et vous pouvez simplement le sélectionner dans un menu déroulant, mais pour le moment, je suis content de cette couleur. Revenons ici, The Opacity, où vous pouvez également jouer avec cela. Il est automatiquement réglé à 50 % Si je le veux complètement rouge, je peux en choisir un, ou presque rien, je peux le réduire à 0,05 alors je ne peux toujours pas lire le logo En fait, je vais revenir là où il était, c' est-à-dire le faire glisser à 50 % jusqu'à 0,5. Je pense que c'est parfait. Vous avez une autre option ici, le mode Blend. Si vous utilisez un outil de retouche photo tel que Photoshop, vous serez familiarisé avec toutes ces options ici. Si vous les survolez, vous pouvez voir quelles sont ces options Multiplier, superposition d'écran. Cela signifie simplement que la couleur de la superposition arrière est différente sur le dessus de l'image Alors jouez avec ceux-ci et trouvez celui qui vous convient le mieux en plus de votre image de fond. Cependant, je pense qu' une solution normale était une bonne chose. Je pense que c'est ce que je recherche. Si je fais défiler la page ici, oui, cela semble parfait. Je vais cliquer sur la flèche ici et oui, ça a l'air parfait. C'est ce que je recherche. Je peux lire ce logo. J'aime beaucoup cet arrière-plan, et je pense que sa couleur exprime ce nous sommes en tant que magasin de musique rétro. Revenons simplement en arrière et au fur et à mesure que je fais défiler la page vers le haut et vers le bas, vous verrez comment cela fonctionne maintenant. Et oui, tout cela est lisible maintenant tout le monde peut le lire chez Wolfgang Musique Maintenant, notre héros est prêt et nous sommes prêts à passer à la section suivante. Cependant, une petite recommandation pour vous ici. Vous avez la possibilité de publier la page. Nous ne voulons pas encore le faire car il n'est pas prêt à être mis en ligne. Si vous cliquez dessus, le menu déroulant s'affichera. Vous pouvez voir que vous avez des options de sauvegarde. Cliquez dessus, cliquez simplement sur Enregistrer le brouillon. Cela signifie simplement que le brouillon a été enregistré. Cela signifie simplement que si votre ordinateur tombe en panne ou quelque chose comme ça, vous en avez la version la plus récente Je vous recommande de simplement cliquer dessus toutes les 5 minutes ou chaque fois que vous faites quelque chose de nouveau, vous devez revenir en arrière et le répéter. 6. Section d'information: Maintenant, votre héros est prêt. C'est suffisant pour attirer l'attention de tous lorsqu' ils souhaitent faire défiler la page vers le bas pour en savoir plus. C'est ce que nous allons faire maintenant. Ensuite, vous devez ajouter une section d' introduction. s'agit d'une brève section de texte qui contient des informations importantes sur qui vous êtes et sur ce que vous pouvez faire pour tous les clients qui visitent votre site Web. Passons à la section suivante sous le héros, puis cliquons sur le Plus. Nous allons ajouter un autre conteneur Flex Box. À l'intérieur de ce conteneur, je veux que vous ajoutiez deux sections différentes, dont l' une sera du texte et l' autre une image. Vous allez ajouter le texte à gauche et l' image à droite. Vous avez besoin de quelque chose avec deux colonnes différentes. Celui-ci a 50, 50 ans même. Divisez celui-ci ici où vous en avez un plus petit à gauche et un plus grand à droite. Choisis celui-ci. Vous avez maintenant un conteneur avec deux sous-conteneurs (conteneurs) à l'intérieur du conteneur Encore une fois, passez ici à la section structure, vous verrez ce que je veux dire. Cliquez sur le menu déroulant et vous avez un conteneur contenant le premier récipient plus petit à l'intérieur , puis le deuxième plus grand contenant à l'intérieur. Maintenant, ce que nous voulons faire, c'est déposer une image ici et du texte là-dedans. Passons au point positif et ajoutons un élément. Tout d'abord, récupérons simplement le widget image et faisons-le glisser dans le plus grand conteneur sur le côté droit. De toute évidence, il est simplement indiqué sous forme de boîte grise standard. Encore une fois, nous y reviendrons sous peu. Sur le côté gauche, c'est ici que nous voulons ajouter deux types de texte différents. Revenez à votre clic sur Ajouter un élément. Tout d'abord, nous allons commencer par un titre. Nous allons d'abord déposer celui-ci. Comme vous pouvez le voir ici, les paramètres par défaut standard pour la typographie et les couleurs ont été paramètres par défaut standard pour la supprimés Dans la prochaine partie de ce cours, nous examinerons les couleurs et les polices globales. Et vous allez voir comment modifier celui-ci et donc le modifier sur l'ensemble du site. Mais c'est bon pour le moment. En dessous, nous allons ajouter une zone de texte normale. Revenez ici pour cliquer sur Ajouter un élément. Ensuite, dans cette section , choisissez Éditeur de texte. Et encore une fois, faites-le glisser sous le titre. Ensuite, je veux que vous examiniez l'espacement et l'alignement. Comme vous pouvez le constater, cette nouvelle section se trouve juste en dessous de la section des héros. Il y a un petit espace blanc entre les deux choses. Si je clique sur la flèche, tu verras ce que je veux dire. Ce n'est pas assez d'espace. Une chose importante à retenir dans la conception de sites Web est de respirer de l'espace. Il s'agit de l'espace autour de chaque élément. La règle ici est assez simple. Si vous avez trop de choses à faire en même temps, c'est qu'il y a trop de monde. S'il y a trop de monde, les utilisateurs ne savent pas vraiment où chercher ni par où commencer à lire. Vous avez besoin d'une configuration A à B simple pour que cela soit clair et facile à lire. Vous avez besoin d'un espace blanc vide, un espace respirable autour de chaque section. Ce que je vais faire ici, c'est modifier les marges du conteneur principal. Allons ici et cliquons sur le conteneur principal ici sur la gauche. C'est à ce moment que j'ai besoin que vous cliquiez sur la section avancée. En termes de mise en page, vous pouvez jouer avec deux options. Ici, vous avez la marge et le rembourrage. La façon la plus simple de voir les choses est que la marge est l'espace extérieur. Le rembourrage est l' espace intérieur. Nous n'avons pas besoin d'espace à l'intérieur de ce conteneur, nous avons juste besoin d'espace au-dessus et en dessous. Jetons un coup d'œil à la marge. Je vais cliquer ici pour commencer. Je vais ajouter une quantité de pixels qui se trouvera au-dessus et en dessous de ce conteneur. Essayons peut-être 100 pixels. Comme vous pouvez le voir, lorsque j'ai fait cela, chaque section ici a été modifiée à 100 pixels. Il y a maintenant une marge de 100 en haut et en bas, mais aussi à droite et à gauche. Je ne veux pas qu'ils soient là. On Elementor a automatiquement ce paramètre ici où il lie les valeurs entre Ce que tu dois faire, c'est le désactiver. suffit de cliquer dessus, puis de revenir aux deux points pour lesquels vous souhaitez revenir à zéro et à droite à zéro, à gauche et à droite. J'ai maintenant une marge de 100 pixels au-dessus ce conteneur et une marge de 100 pixels au-dessous de ce conteneur. Cela signifie que lorsqu'ils passeront à la section suivante, il y aura un espace uniforme entre chaque section, 100 pixels en haut et 100 pixels en dessous. Ensuite, nous devrions examiner l'alignement. Côté design lorsque vous devez décider où tout se situe par rapport à tout le reste. Au moment où le texte est placé en haut du conteneur. C'est le paramètre par défaut d'Elementor. Cependant, je ne pense pas que ça ait l'air si chouette. Je pense que ce serait une meilleure configuration si le texte était au milieu de l'image de droite. Nous devons maintenant sélectionner ce sous-conteneur, le premier contenant le texte. Et vous pouvez soit cliquer sur cette petite icône grise dans le coin, soit utiliser la navigation de votre structure. De toute évidence, nous étions dans le conteneur principal et nous voulions simplement modifier l'un de ces sous-conteneurs. Choisissez celui qui contient le texte. Ensuite, la configuration ici est très similaire à ce que nous avons fait précédemment. Nous devons simplement nous rendre ici pour justifier contenu et lui indiquer qu'il est au centre. Nous y voilà. En termes d' espace respiratoire également , il faut éviter les objets trop rapprochés. Par exemple, nous avons ici un texte. Il n'y a pas un grand espace entre le texte et l'image. Ils sont trop proches les uns des autres, ce qui les rend plus difficiles à lire. Ce que nous voulons, c'est un petit espace blanc sur le côté droit de ce conteneur. Encore une fois, assurons-nous que nous sommes à l'intérieur ce conteneur et passons à la section Avancé. C'est là que nous allons utiliser rembourrage plutôt que la marge, car je veux de l'espace à l'intérieur du conteneur Sur le côté droit, cliquez ici sur cette icône et désactivez ensemble les valeurs des liens, ce qui ramène tout à zéro. Ensuite, ce que nous voulons dire, c'est un espace sur la droite. Je ne veux pas que cet espace soit ailleurs. Je n'ai pas besoin de rembourrage en haut , en bas ou à gauche En regardant ça, je pense que 50 pixels devraient peut-être suffire. Comme vous pouvez le constater, tout ce texte a été déplacé vers la gauche et il y a un bien meilleur espace entre les deux. Peut-être qu'il a juste besoin d'un peu plus d'espace. Donc, ce titre est plus éloigné. Arrondissons-le à 75. Nous y voilà. C'est parfait. Jetons maintenant un coup d'œil au titre que nous avons ici. Encore une fois, pour le modifier, cliquez sur le titre lui-même ou ici dans la section de votre structure. Choisissez le titre en premier. Eh bien, je veux qu'il y ait un autre titre ici. Je vais juste écrire au nom de l' entreprise qui fonctionne très bien, mais je dois jouer la typographie et les couleurs utilisées ici Tout d'abord, cependant, regardez celui-ci ici qui dit balise HTML. Et cliquez sur le menu déroulant. Ici, vous avez plusieurs options différentes pour une balise placée derrière le texte. J'expliquerai cela un peu plus dans la prochaine partie du cours. Cependant, je vais changer celui-ci en H one. Cela signifie en prendre un. J'ai choisi H one parce que vous devriez toujours avoir un H sur votre page. C'est l'introduction de votre page qui aide les internautes à trouver votre site Web dans Google. En règle générale, assurez-vous de ne jamais avoir plus d'un H pour le titre suivant, faites en sorte que ce H soit deux. Maintenant, pour changer l'apparence, passons au style. Tout d'abord, la couleur du texte est automatiquement supprimée dans ce bleu. Mais je n'aime pas vraiment ça. Je ne pense pas que cela me convienne vraiment en tant qu'entreprise. J'aime beaucoup le rouge foncé que nous avons choisi ici pour celui-ci, je veux une autre couleur qui convient bien. Avec ça, je pense peut-être à un doré, foncé, doré. Ce que nous allons faire, c'est cliquer sur ce bleu ici. Ensuite, je vais faire glisser celui-ci vers la gauche. Nous passons à la section la plus jaune, dorée et orangée. Je trouve que là-bas, ça a l'air bien. Faites ensuite glisser celui-ci. Jouez avec cela jusqu'à ce que vous trouviez une couleur qui, selon vous, fonctionne parfaitement. Je dois me rappeler qu'il s'agit d' un texte en couleur sur fond blanc. Vous ne voulez donc pas quelque chose de trop léger car personne ne peut le lire. Si vous voulez juste du noir pur, vous pouvez le choisir. Mais encore une fois, je veux cette couleur dorée pour moi. Choisissez la couleur qui vous convient le mieux et qui convient le mieux au produit que vous essayez de promouvoir. Faisons défiler la page vers le haut. J'aime bien celui-ci. Je pense que c'est assez sombre et assez audacieux. Suffisamment brillant. Je fais preuve d'un peu plus d'audace. Nous y voilà. Je pense que cela fonctionne mieux sur fond blanc. Encore une fois, ils vous donneront la couleur hexadécimale ici, disons celle-là. Prenez note de cela pour plus tard. Maintenant, en typographie, cette famille de polices est automatiquement sélectionnée pour être utilisée pour tous les titres C'est une jolie police. Je pense que c'est bon pour le corps du texte, mais ce n'est pas ce que je veux pour le titre. Je veux une police Shouter plus grande et plus audacieuse ici. Cliquez sur votre menu déroulant. Ce qui apparaît est une liste de toutes les typographies que vous pouvez utiliser sur l'ensemble du site Web Il y en a des centaines ici. Vous pouvez simplement passer revue chacune d'elles et les essayer une par une, mais cela prendrait beaucoup de temps. Je vous recommande de trouver typographie que vous aimez, que vous avez utilisée ailleurs et qui, selon vous fonctionne le mieux avec le service que vous essayez de promouvoir ici Oui, et je vais simplement saisir et m'assurer que c'est l'une des options disponibles ici. J'aime beaucoup celui qui est appelé à. Voilà, ça apparaît. que je vais sélectionner. Oui, allons-y. Comme vous pouvez le constater, c'est beaucoup plus audacieux. Et Shoelier représente simplement ce que nous essayons de faire avec ce service ici Vous pouvez créer d'autres options ici, ou vous pouvez jouer avec sa taille. Encore une fois, ce paramètre est défini sur des pixels. Limitez-le aux pixels, puis faites-le simplement glisser vers l'avant et vers l' arrière voir ce qui fonctionnera pour vous. Je veux qu'il soit grand et assez audacieux, mais qu'il ne s'inscrive pas sur deux lignes. Passons peut-être à 40 pixels, puis au poids. Comme vous pouvez le voir ici, il existe de nombreuses options de tailles différentes. Évidemment, plus le chiffre est grand, la police que vous choisissez est audacieuse, 100, c'est la police la plus fine Mais j'aime bien ce que nous venons d'avoir avec le demi-gras. Pensez que le noir est trop gras et que le noir est trop gras, alors passons au semi-gras. Ensuite, vous avez encore quelques options. Vous pouvez choisir une majuscule ou une minuscule. Je veux vraiment des majuscules ici. Je pense que c'est encore plus audacieux. Et Sheli, allons-y, style. Vous pouvez le mettre normal ou en italique, mais je n'aime pas que cela me représente. Mais ça a l'air cool. Il a un style 80 SL un peu rétro, mais je vais juste le garder comme décoration normale , ligne après ligne. Je n'ai pas besoin de tout cela, donc je vais juste le laisser par défaut, c' est-à-dire la non-version. C'est presque parfait. J'ai juste l'impression qu'il faut un peu d'espace entre chaque lettre. Ce que je vais faire, c'est aller ici pour espacer les lettres et jouer avec ça Si je le fais simplement glisser de gauche à droite, vous pouvez voir que cela agrandit et réduit cet espace . Je veux qu'il soit juste un peu plus grand, qu'il soit lisible, peut-être deux pixels ou 2,5 pixels, je pense que 2,5 c'est assez d'espace entre les deux. Mais lorsqu'un utilisateur voit cela, il peut le voir, dit Wolfgang Une musique qui a l'air géniale. Je vais cliquer sur ma flèche voir à quoi ça ressemble. Oui, je pense que c'est un bon passage du haut vers cette section. De toute évidence, nous avons besoin d'un peu plus d'informations et d'un dépôt d'image ici. Je voudrais vous expliquer comment configurer le texte global et couleurs globales sur l'ensemble du site Web afin que, si nous devions réutiliser ce titre, il apparaisse exactement dans la même couleur, dans la même police. 7. Elementor - paramètres généraux: Ensuite, je voudrais examiner les couleurs et la typographie globales utilisées sur l'ensemble du site Web Pour le voir, rendez-vous dans le menu et cliquez sur cette icône ici, Paramètres du site. La première que nous allons examiner concerne les couleurs globales. Il s'agit de la page que vous verrez lorsque vous ouvrirez les couleurs globales. Cela nous montre un aperçu. Cela signifie que si vous apportez des modifications ici, elles s'afficheront ici. L'autre option est désactivée, ce qui signifie que si vous apportez une modification ici, vous verrez les modifications sur votre site Web en ligne. Je recommande de l'utiliser pour cette étape. Du point de vue du design, c'est très clair. Ici, nous avons une couleur primaire et une couleur secondaire. Et la couleur principale du texte. La couleur d'accent, eh bien, c'est comme la couleur supplémentaire. Si vous ne souhaitez pas utiliser la couleur principale ou secondaire, vous pouvez utiliser la couleur d'accent. Nous n'en aurons probablement pas besoin sur ce site Web, mais dans un site Web plus grand, vous voudrez peut-être une troisième couleur supplémentaire utilisée en très petite quantité. Maintenant, pour les couleurs primaires et secondaires, je souhaite utiliser les deux couleurs que nous avons utilisées sur le site jusqu'à présent. Je veux que le rouge foncé soit le principal, et le second, l'or. Si vous vous souvenez, lorsque nous avons créé ces sections, nous avions un code hexadécimal Si vous en avez fait un album brillant. Si ce n'est pas le cas, revenez dans l'éditeur pour le faire, il suffit de cliquer sur le X en haut souhaitez-vous enregistrer les modifications que vous avez apportées ? Nous n'avons encore apporté aucune modification. Il suffit de mettre cette carte maintenant. Trouvons les couleurs que nous avons configurées plus tôt. Le premier se trouvait dans le conteneur Hero principal. Cliquez dessus dans la structure, allez dans Style, allez dans Background overlay, et le tour est joué Cliquez sur la couleur ci-dessus, et vous verrez le code hexadécimal sous Highlights, et copiez-le Revenons maintenant aux couleurs globales des paramètres du site, puis passons au menu principal et collez-le dedans. Comme vous pouvez le constater, la couleur primaire est maintenant passée au rouge foncé. Cliquez sur Enregistrer les modifications, puis fermez à nouveau cette fenêtre. Passons maintenant au titre ici. Cliquez sur la couleur. Copiez le code hexadécimal dans les paramètres du site et les couleurs globales. Faisons de celle-ci la couleur secondaire. Vous pouvez maintenant voir comment les deux couleurs s'harmonisent et vous pouvez voir qu'il y a un bon contraste entre les deux. La prochaine chose que je veux changer est la couleur du texte. C'est un peu gris car j' ai du texte en direct sur la page. Désactivons à nouveau cet aperçu. Comme vous pouvez le voir, il y a du texte ici qui utilise exactement la même couleur, 777. C'est un peu trop clair, je veux le rendre un peu plus foncé. Cliquez sur la couleur, puis jouez avec ce sélecteur de couleur ici Si vous voulez passer au noir complet, faites-le glisser jusqu'au coin le plus éloigné et vous obtiendrez le code hexadécimal 0000 Cependant, je trouve que c'est un peu trop sombre et un peu trop audacieux. Je vais donc le déplacer un peu vers le haut pour qu'il soit un peu plus léger. Vous passez donc d'un extrême à l'autre. Je trouve que là-bas, ça a l'air génial. Maintenant, la couleur d'accent, encore une fois, je ne pense pas que je vais utiliser celle-ci, mais peut-être que si je voulais une troisième couleur, eh bien, je suppose que je dois en choisir une qui marcherait bien avec le rouge et l'or. Je ne sais pas Peut-être un bleu foncé ou quelque chose comme ça. Allons y jeter un œil. Violet, je crois. Tout comme un bleu foncé. Je ne vais probablement pas l'utiliser, mais c'est une couleur assez neutre. Cela fonctionne bien avec tout. Je vais juste le laisser. Si vous avez besoin d'autres couleurs votre texte principal ou secondaire dans votre accent, vous pouvez en ajouter une autre ici. Appelle-le comme tu veux, puis choisis ta couleur. Mais je n'en veux pas plus. Je suis content des quatre que j'ai. J'ai appuyé pour le supprimer car je ne l'utilise pas. Je vais choisir Supprimer. Maintenant que toutes mes couleurs globales sont configurées, je vais enregistrer ces modifications. Je vais maintenant vous montrer comment ces couleurs globales fonctionnent pour garantir la cohérence sur l'ensemble de votre site. Maintenant que nous avons enregistré, cliquons sur le X. Choisissons simplement n' importe quel élément Insight. Ici, je vais envoyer un texto. Et puis cliquons sur le petit crayon ici pour modifier le titre. Nous avons maintenant une option supplémentaire. Nous pouvons choisir ici où il est écrit « Couleur du texte ». Chaque fois que vous devez choisir une couleur, cliquez sur cette petite icône en forme de globe où il est écrit Personnalisé. Cela vous montrera les couleurs primaires, secondaires, le texte et les couleurs d'accent. Disons simplement qu'en fait j'aurais aimé que ce soit dans la couleur primaire. Je clique dessus et ça change. Cela signifie simplement que si je consulte l'ensemble du site Web et que je souhaite modifier le texte partout, je le change toujours dans la bonne couleur, que ce dans la couleur principale ou secondaire. Je n'ai pas besoin de le faire manuellement. C'est automatique. C'est pour ça. Passons maintenant à la typographie. Revenez ici dans les paramètres du site et accédez à la section typographie C'est ici que nous choisissons la typographie et les polices à utiliser dans toutes les parties du site Web Encore une fois, cela garantit simplement la cohérence, en disant que s'il s'agit de la taille et du poids de notre en-tête en H, il sera toujours le même chaque fois qu'il sera utilisé. Tout d'abord, jetons un coup d'œil au corps du texte. Ce n'est que le texte principal. Chaque fois que vous créez de gros blocs de texte, cliquez sur le crayon. Il suffit de le régler sur un paramètre par défaut. Si vous souhaitez changer cela pour quelque chose d'autre, cliquez ici. Peut-être que vous êtes comme une police aérienne, ou peut-être que vous voulez qu'une police Sera y figure. Encore une fois, jetez un œil aux autres polices. Consultez les polices Google, des sites comme celui-ci pour voir si vous pouvez en trouver une qui vous convient et qui correspond au service que vous essayez de fournir. Je vais choisir une autre police Google que j'ai utilisée ailleurs et qui s'appelle Roboto Roboto. Roboto. Jetons maintenant un coup d'œil à H one. C'est le titre que nous avons déjà créé ici. Copions simplement ce que nous avons fait pour celui-ci, car je sais que cela fonctionne là-bas. Et cela signifie simplement que je peux l'utiliser sur l'ensemble du site Web. Cliquez à nouveau sur l'icône en forme de crayon. Alors, plutôt que par défaut, choisissons d'essayer de nous souvenir de ce que vous avez fait auparavant. Évidemment, vous pouvez simplement revenir en arrière et consulter le titre que vous avez mis ici. Mais si ma mémoire est bonne, je pense que je l'ai réglé à 45 pixels. Ensuite, le poids est devenu semi-gras et transforme les majuscules. Et puis l'autre que j'ai changé était l'espace des lettres dans lequel j'ai défini 22,5 pixels C'est la mienne. Maintenant, vous pouvez jouer avec cela et vous pouvez configurer 234. Si vous avez un site Web très basé sur le texte, vous voulez plusieurs en-têtes différents, car il s'agit alors d'un titre avec un sous-titre puis un sous-titre Cependant, pour ce site, je pense que je vais juste regarder le H et le H deux. Je sais ce que j'ai configuré pour le H, et je vais faire les H deux de même. Cependant, je vais juste le réduire légèrement. Encore une fois, entrez dans H deux, cliquez sur votre petit crayon, choisissez la famille et la taille. Eh bien, la dernière, qu'est-ce que nous avons ? Nous en avions 45. Mettons celui-ci à 30, peut-être. Mais le poids, la même transformation, espacement des lettres majuscules, 2,5 Jouez avec ça, voyez ce qui vous convient, et vous le découvrirez plus tard Lorsque vous jouez avec H un et H deux, si vous pensez que ce n'est pas tout à fait la bonne taille, vous avez besoin d'un peu plus grand ou d'un peu plus petit. Tu peux venir ici et le modifier. Lorsque vous le modifiez une fois ici, il changera sur l'ensemble du site Web. Alors jouez bien avec ça. Faites fonctionner vos couleurs et votre typographie comme vous le souhaitez pour votre site Web Puis cliquez sur Enregistrer les modifications. Une dernière chose à vérifier concerne également vos polices globales. Oui, nous avons configuré le corps du texte, et nous avons configuré le H un et le H deux. Mais assurez-vous simplement que votre thème sait quelles polices, quelle typographie vous utilisez ici Revenons dans les paramètres du site et passons aux polices globales. C'est juste cette section ci-dessous que nous devons nous assurer qu'elle est configurée pour fonctionner de la même manière que le texte que nous avons configuré dans la section typographie Cliquez sur l'un d'entre eux ou dans votre menu ici, cliquez simplement sur le crayon. Assurez-vous simplement qu'ils sont configurés en fonction de la typographie et des polices que nous utilisons ailleurs sur le site Dans celui-ci, choisissons simplement Anton pour le primaire, On pour le secondaire, puis le texte. Eh bien, c'est déjà configuré pour Roboto, tout comme Axon. Cela signifie simplement que le thème est conscient du fait que nous utilisons ces polices sur l'ensemble du site. Sauvegardons ces modifications, puis retournons à l'éditeur. 8. Galerie coulissante d'images: Maintenant que la typographie et les couleurs globales sont configurées, terminons cette section d' introduction Tout d'abord, nous avons évidemment un titre ici, mais notre corps peut être copié, c'est juste du laurum Nous devons ajouter notre propre copie du texte ici. Passez la souris sur le texte, cliquez dessus, cliquez sur l'icône ou utilisez votre structure ici Tu sais comment gérer tout ça maintenant. Ensuite, dans la fenêtre contextuelle sur la gauche, nous éditons le contenu. Maintenant, le texte qui est entré ici est automatiquement entré en tant que texte de paragraphe. Vous pouvez modifier cela si vous souhaitez utiliser différents éléments. Nous pouvons donc choisir le titre un, puis le remplacer par le titre un que nous avons configuré dans section typographie plus tôt ou le titre deux C'est ce que nous y avons également installé. Cependant, nous voulons simplement un paragraphe, car nous voulons simplement utiliser un corps de texte normal ici. Nous avons choisi la typographie à utiliser pour cela et nous avons choisi la couleur pour cela Il suffit de venir ici, de supprimer le texte qui s'y trouve déjà, puis de commencer à écrire dans votre texte. Il est préférable de l'écrire directement , car il n'y aura alors aucun autre problème avec les textes copiés ailleurs. Mais je vais vous montrer ce que je veux dire par là. Plutôt que de l'écrire, j'ai déjà écrit tout le texte et je vais le copier-coller dans cette boîte qui vient de sortir. D'accord, en y regardant, cependant, si vous l'avez écrit dans un document Word ou si vous l'avez pris pour un e-mail, il se peut qu'il ait détecté du code HTML supplémentaire qui n' est pas nécessaire ici. Il peut automatiquement le changer en typographie différente ou le placer dans différents espaces là où ils ne sont pas nécessaires. Si vous rencontrez ce problème ou si vous avez du texte et que vous souhaitez l' effacer , vous pouvez l'utiliser ici en toute sécurité. Eh bien, juste Google, un site comme celui-ci, tout ce qui est un strip-teaseur HTML, il y a évidemment plein de publicités ici Ferme-les. Si vous collez simplement une copie que vous souhaitez utiliser sur ce site Web sur le côté gauche, cliquez sur Supprimer le code HTML, vous découvrirez que la sortie sur le côté droit a effacé tout code HTML inutile J'ai dit que celui-ci était déjà bon de toute façon, mais juste au cas où je devrais copier le résultat, retourner sur mon site et le coller dedans. Tout ça a l'air génial. Je suis vraiment content de cette configuration jusqu'à présent. Va cliquer sur ma flèche. Je trouve que c'est très beau, mais peut-être que je veux vraiment que l'image sur le côté droit soit un peu plus grande. Pour ce faire, je vais juste avoir besoin de changer la taille des deux conteneurs que j'ai à l'intérieur. Vous vous souvenez quand nous l'avons configuré avant de prendre la décision d'en choisir un légèrement plus petit gauche et un peu plus grand à droite. Si vous cliquez sur chacun de ces conteneurs, que vous choisissez la mise en page, vous pouvez voir la taille exacte de ceux-ci. Le plus petit est 33,3 alors que le plus grand est 66,6, c'est un troisième et 23 Si je souhaite agrandir un peu le conteneur d'images, il suffit de cliquer sur ce conteneur dans la structure, passer à la largeur et de taper un autre numéro. Disons 70, peut-être même plus que ça, peut-être 75. Je sais que ce n'est pas une grande différence, mais je pense que cela fonctionne beaucoup mieux. J'aime la façon dont Wolfgang et Music sont désormais répartis sur deux lignes Le texte est cependant un tout petit peu trop petit. Il suffit de cliquer sur l' icône ici. Accédez à une typographie, cliquez sur votre crayon. C'est pourquoi j'ai défini ce chiffre à 40, puis dans mes paramètres de typographie, je l'ai indiqué à 45 Je pense que dans ma tête, cela aurait dû être 45, donc je vais juste le remplacer par 45. Nous y voilà. Je pense que cela fonctionne vraiment très bien. Je pense que c'est faire un meilleur usage de l'espace lorsque vous commencez à créer votre propre site, il suffit de jouer avec ça. Tout dépendra de la quantité de texte que vous avez ici, la longueur de votre titre, du type d'image que vous souhaitez utiliser, de l'espace. Revenons à l'éditeur puis choisissons l' image que nous voulons utiliser. Ici à droite, encore une fois, il suffit de cliquer sur l'image ici à gauche. Accédez à Modifier l'image, puis à la médiathèque. Je cherche quelque chose d'original qui corresponde à ma petite introduction J'aime bien celui-ci avec sa petite lampe LED. Tu es ce que tu écoutes. Essayons celui-ci. Oui, je trouve que ça a l'air génial. Cachons le panneau. Je pense que c'est un bon flux entre la section supérieure et cette section, car cela représente le noir et le rouge que nous utilisons ici. Une autre chose à vérifier lorsque vous déposez une image est ici sur la gauche où il est indiqué que Modifier l'image est la résolution de l'image. Cliquez sur ce menu déroulant et vous verrez de nombreuses options différentes. La raison pour laquelle vous voulez jouer avec cela est que vous voulez le placer du bon côté, ni trop grand ni trop petit. S'il est trop gros, cela ralentira le chargement de votre site Web. Si c'est trop petit, eh bien, ça va juste mal paraître. Laisse-moi juste te montrer. Si je choisis la miniature, elle devient minuscule. C'est ainsi pour ce site Web. Ensuite, si je passe à celui-ci, la résolution est de plus de 2000 pixels sur 2000 pixels, il s'affiche parfaitement bien. Cependant, elle est tout simplement trop grande pour cette section, car comme vous vous en souvenez, la largeur de notre site Web était de 1 140 pixels Il n'est pas nécessaire que ce soit si grand. En fait, le paramètre par défaut qu'il avait activé était de 1024 x 1024. Il vous suffit de sélectionner cette section si vous êtes satisfait de cette section. C'est toujours agréable de venir ici et de sauvegarder le brouillon. Je pense que cela fonctionne très bien comme introduction. Cependant, je pense qu'il en faut un peu plus. Je pense qu'il faut une couche supplémentaire. Je ne pense tout simplement pas qu'une seule image soit suffisante, car nous faisons plein de choses différentes au magasin de musique. Je veux en montrer un peu plus. Il y a quelques options ici. L'une consiste à simplement inclure plusieurs images, les unes sur les autres, complètement empilées Cependant, j'aime l'espace qui est occupé par cela. Maintenant, je ne veux pas qu'elle prenne plus de place que l'image seule. Ce que nous allons faire, c'est transformer cette image unique en carrousel d'images Il y aura plusieurs images différentes qui glisseront de l'une à l'autre. Pour ce faire, rendez-vous ici sur votre élément Plus Add. Faites défiler la page jusqu'à la section générale et choisissez celle qui est un carrousel d'images Faites-le ensuite glisser vers ce conteneur. Maintenant, lorsque vous faites glisser toutes ces choses, vous verrez ces petites lignes apparaître ce qui signifie que vous pouvez les placer au-dessus ou en dessous de quelque chose entre les deux. Eh bien, celui-ci est destiné à remplacer l'image qui s'y trouve. Assurez-vous simplement de voir votre ligne rose au-dessus ou en dessous. Choisissons ci-dessus. Vous voulez que ce carrousel soit assis ici ? En fait, je ne veux plus que cette image soit là. supprimer rapidement ce Pour supprimer rapidement ce clic droit, choisissez Supprimer. Nous pouvons le faire ici dans la structure. Cliquez avec le bouton droit de la souris, supprimez. Modifions maintenant ce carrousel. Cliquez sur le carrousel ou choisissez-le ici dans votre structure Cela fera apparaître le menu de contenu ici sur la gauche. Tout d'abord, nous devons sélectionner quelques images, n'est-ce pas ? Cliquez sur Ajouter des images, cela vous montrera à nouveau la médiathèque, l'image que nous y avions. J'ai toujours aimé cette image et je veux que ce soit ma première image. Je vais sélectionner celui-ci. Ensuite, je voudrais inclure quelques images qui montrent les deux principales activités que nous faisons dans ce magasin de musique. Tout d'abord, les instruments, nous vendons des guitares. le troisième, je vais choisir cette image vinyle car nous vendons également de la musique en magasin. Je pense que trois est un bon chiffre pour cela. Joue avec ça toi-même. Voyez combien vous souhaitez y inclure. Tu n'en veux pas trop. Tu ne veux pas 100 images. Il faut que ce soit bref et bref. Cliquez ici, créez une nouvelle galerie, puis cliquez sur Insérer une galerie. Comme vous pouvez le voir, les trois images du carrousel sont apparues ici. Faisons simplement défiler la page un peu pour avoir une meilleure vue d'ensemble. Ou si votre structure gêne, vous pouvez la déplacer vers le haut. Ou si vous voulez vous en débarrasser, vous pouvez le fermer ici, mais peut-être simplement le déplacer d'un côté où il ne vous gêne pas. Peut-être de ce côté, mais je pense que tout va bien là-bas. Je pense que j'ai assez de place. Tout d'abord, la taille de l'image, encore une fois, trop petite pour ce que nous avons ici. Vignette, trop petite. Remplaçons cela par ce que nous avions auparavant. La grande version, 1024 x 104, est devenue plus grande. Cependant, je ne veux pas que les trois images apparaissent en même temps, je veux juste qu'une seule apparaisse. Ensuite, je veux qu'il passe automatiquement au suivant, ici, où il est indiqué diapositives à afficher. Assurez-vous que nous sommes sur ordinateur. Alors, au lieu de la valeur par défaut, choisissons-en une. Je veux juste qu'il affiche une seule image à la fois. Comme vous pouvez le voir ici, il passe automatiquement de l'un à l'autre. Je pense que c'est parfait en termes de vitesse et de tout le reste. Comme vous pouvez également le voir, il y a de petites flèches ici. Cela signifie que lorsqu'un utilisateur accède à la page, il peut la parcourir à sa propre vitesse. Cela leur donne les deux options, leur montrant automatiquement qu'il y a autre chose et leur permet de faire défiler la page. En ce qui concerne ces flèches et ces petits points en bas. Eh bien, jouez avec la navigation ici. Il est réglé automatiquement sur les flèches et les points. Si vous ne voulez que les flèches, choisissez-en une. Et évidemment pareil avec les points, sinon vous ne pouvez rien avoir. Mais j'aime bien les flèches et les points. Il suffit de cliquer sur cette flèche. Masquez le panneau. Je trouve que ça a l'air génial. Je crois qu'en faisant défiler la page vers le bas à partir d'ici, je vois ce carrousel animé me montrant plusieurs choses auxquelles je peux m'attendre si je me dirige vers Wolfgang Musique Je pense que je veux juste ajouter un élément supplémentaire ici. Je veux juste vous montrer comment faire une autre petite chose sympa pour diviser texte, comme nous l'avons fait ici. Nous avons l'en-tête, puis le corps du texte. Je veux juste mettre une ligne entre les deux. Je vais mettre ce qu'on appelle un diviseur. Il s'agit là d'un autre élément. Et l'élément, choisissez ensuite dans le diviseur de section de base , puis faites-le simplement glisser dessus Et encore une fois, n'oubliez pas que les lignes roses vous indiqueront où il va tomber. Et je le veux entre les deux bouts de texte. Laisse-le là, voilà à quoi ça ressemble. Cela signifie simplement qu'il y a un écart supplémentaire entre les deux sections de texte. Mais je ne sais pas, je ne suis pas très content de la taille et de l'espace. Je vais encore une fois jouer un peu avec ça, suffit de cliquer sur votre diviseur, cliquer sur l'icône de votre crayon Ensuite, la première chose avec laquelle vous pouvez jouer ici est l'élément de style ou vous pouvez choisir plusieurs styles différents, dont certains sont un peu plus fous que d'autres, que vous pouvez avoir une ligne frisée, une ligne incurvée ou vous pouvez devenir complètement fou et avoir Je ne sais pas quoi d'autre, Zigzags, il y a plein d'options différentes Choisissez celui qui, selon vous, représente le mieux votre service et produit que vous vendez. Cependant, je pense que juste ici, je veux juste le modèle normal. Juste un solide, c'est une bonne largeur, je pense qu'il est juste un peu trop grand. Je ne veux pas que ça aille jusqu'au bord du corps du texte. Donc ça va le faire passer à 50 %. C'est mieux. Un peu plus petit que le style. Allons là-haut. Tout d'abord, il est un peu fin. Je vais juste dire que c'est sur une seule ligne. Pour le moment, je pourrais juste jouer avec ça et sur une seule ligne. Pour le moment, je pourrais juste jouer avec ça et en faire quelque chose de fou, ou le plus gros est dix. Mais je pense que trois, c'est peut-être bien. 3.5 Maintenant, trois, j'aime bien trois. Mon premier choix est donc de penser qu'il y a un peu trop d'espace entre les deux bouts de texte et la ligne. Je vais combler l'écart. C'est juste l'espace autour de la ligne. Modifions-le simplement en cinq. Nous y voilà. J'aime bien ça. Cela semble beaucoup plus fort maintenant. C'est peut-être un peu trop noir. Je veux qu'il soit un peu plus léger, pas plus fort que le texte. Encore une fois, vous pouvez choisir une couleur personnalisée. Choisissez votre couleur principale si vous le souhaitez. Cependant, je veux quand même un noir. Je vais donc simplement cliquer sur le sélecteur de couleurs et le déplacer ici Oui, je pense que c' était génial. J'adore ça. Je pense que ce dont nous avons besoin maintenant, c'est quelques informations supplémentaires sous cette introduction initiale, de plus d'informations sur ce que nous faisons dans le magasin. Revenons à l'éditeur. Ce que je vais vous montrer, les gars, c'est comment faire le réseau. Rappelez-vous que dans cette section supérieure, nous avons utilisé un conteneur et que nous avions deux conteneurs à l'intérieur de ce conteneur principal. Cela permettait largeurs différentes et incohérentes entre les deux conteneurs Nous avons commencé avec un trois puis un 23, puis j'ai pu modifier la largeur de celui-ci, ce qui a automatiquement modifié la largeur de ce 12. Cependant, pour cette section suivante, je veux trois colonnes ayant exactement la même largeur. Par conséquent, plutôt que de choisir un conteneur, nous choisirons une grille. Cliquez sur le signe plus et choisissez la grille. Vous avez maintenant différentes options de structure ici. Celui que je recherche est constitué de trois colonnes configurées de cette façon. Cependant, si ce que vous voulez ne peut pas être vu ici, ne vous inquiétez pas, vous pouvez simplement ajouter n'importe quelle taille , puis le modifier vous-même. Plus tard, je vais simplement choisir trois colonnes. Nous y voilà. Maintenant, nous avons ici une grille. À l'intérieur de la grille se trouvent trois colonnes distinctes. Ce que nous voulons faire, c'est ajouter la même chose dans trois d'entre eux. Ce que je veux, c'est une image avec du texte ci-dessous. Passons à la section Ajouter des éléments. Encore une fois, commençons par un message ci-dessous où j' aimerais avoir un texte. Passons à Ajouter un élément. Ensuite, prenez votre éditeur de texte habituel et déposez-le sous l'image. Maintenant, je veux que ce soit indiqué ci-dessous, mais comme vous pouvez le voir pour le moment, cela ne me donne pas cette option. Si je regarde où se situent les lignes roses, ce n'est qu'à gauche et à droite. Si je le dépose n'importe où, il passera en fait dans la colonne suivante. C'est parce que vous ne pouvez avoir qu' un seul élément dans chaque section de la grille. Comment pouvons-nous avoir deux choses ? Eh bien, c'est très simple. C'est assez facile. Tout d'abord, supprimons simplement ces deux éléments. Ce dont nous avons besoin, comme avant, c'est essentiellement d'un conteneur . Dans chacune de ces colonnes, j'ai déposé un conteneur. Comme il s'agit d'un conteneur, cela signifie que je peux déposer plusieurs éléments différents à l'intérieur de ce conteneur. Cela peut sembler un peu confus, mais essayons encore une fois, comme nous avons essayé de faire avant de cliquer sur Ajouter un élément Puis j'ai déposé une image. Ce que je fais ici, comme vous pouvez le voir sur la structure, c'est que j'ai déposé une image dans un conteneur situé à l'intérieur d'une seule colonne de la grille. Maintenant, en dessous de cette image, je veux juste réutiliser l'éditeur de texte. Cliquez sur un élément, puis déposez-le dans l'éditeur de texte. Voilà. Maintenant, vous pouvez voir que cela a fonctionné. Ce que nous allons faire maintenant, c'est essentiellement copier ce que nous avons ici. Ce que je vais faire, c'est simplement cliquer sur le conteneur. Je veux que ce conteneur exact apparaisse trois fois car même s'il contient des images et du texte différents, sa configuration est identique. Passez la souris et filmez-vous. Cliquez avec le bouton droit sur le conteneur. Choisissez simplement dupliquer. Ce qu'il a fait, c'est qu'il a déposé ce conteneur dans la colonne suivante de la grille. Dupliquez à nouveau, et le tour est joué. Il ne nous reste plus qu'à sélectionner l'image que vous souhaitez afficher sur chacune d' elles et à mettre à jour notre texte. Reprenons avec les images, ce sont des boîtes d'images individuelles. Cliquez simplement sur votre image, puis rendez-vous ici sur la gauche pour modifier l'image. Encore une fois, mon choix d'image vise simplement à montrer la variété des services que nous proposons dans les magasins de musique. Je vais essayer d'obtenir une variété différente de ce que nous avions avant. Celui-ci est très bon car il s'agit aspect plus technique de l'équipement musical. Sélectionnons-la pour la première colonne, puis pour la suivante. Voyons ce que nous pouvons choisir d'autre qui soit un peu différent. Je trouve que celui-ci est superbe. Ce sont des écouteurs. C'est un autre service que nous proposons en magasin. Sélectionnons-le alors. Pour la dernière chronique, je pense que peut-être dans celle-ci, qui est une image de groupe live, nous n'y vendons pas de groupes live. Mais je pense que c'est juste une bonne représentation de ce que nous pouvons offrir aux clients pour les aider dans leurs émissions en direct. Sélectionnons-le. Nous y voilà. Les trois images ont exactement le même ratio , soit trois par deux. Cela fonctionne donc parfaitement. Il ne me reste plus qu'à ajouter mon texte. Cliquez sur Texte, sur l'icône en forme de crayon ou rendez-vous ici pour accéder à votre structure. Comme vous pouvez le constater, nous avons une grille contenant trois conteneurs individuels. Si vous souhaitez accéder au texte contenu dans l'un d'entre eux, faites défiler ce conteneur et choisissez l'éditeur de texte. Mais je pense juste que le simple fait de cliquer dessus sur la page est probablement le moyen le plus simple. J'ai déjà écrit mon texte, et j'en ai retiré tout code HTML, il va coller chaque bout de texte ici. Dans cette section, l'alignement est très important. Bien que nous ayons le même ratio sur les trois images, la longueur du texte est à peu près la même pour chacune d'entre elles. Tu n'en veux pas, c'est juste quelques mots. Et le suivant est de 100 mots. Essayez de les garder à peu près de la même longueur , puis ils seront bien alignés au bas du texte. OK, jetons un coup d' œil à celui-ci. Masquez le panneau. Je trouve que ça a l'air génial. Je pense que c'est parfait de passer de cette première section d'ouverture sur les héros l'image du slider ci-dessous avec l' introduction initiale Ensuite, nous entrons dans le réseau. seule petite chose que je puisse voir ici, c'est l'œil d'un designer qui remarquera celui-ci si vous le repérez. Bravo. Juste l'espace, l'alignement de cette image ici et l' alignement de ce texte. Il y a un petit espace supplémentaire là-bas. Je vais le parcourir et le modifier. Revenons à l'éditeur. Comme vous pouvez le constater, lorsque je survole le conteneur, il y a un peu d' espace supplémentaire par ici Il s'agit d'un paramètre par défaut dans Elementor. Il le configurera toujours de manière à ce qu'il y ait un petit écart de pixels autour de tout. Un petit rembourrage, si vous voulez. Ce que nous allons faire, c'est modifier ce conteneur. Il suffit de cliquer sur le conteneur, puis d'accéder à Avancé. Tout ce que je veux faire, c'est m'assurer que la section de rembourrage est entièrement réglée sur zéro Voilà. Je peux entrer dans chacune d'elles et les configurer manuellement pour qu'il y ait le même espace autour de chacune d'elles. Ou pour le faire rapidement, souris sur le contenant dont vous savez qu'il est correct Cliquez avec le bouton droit sur Copier. Vient ensuite le contenant que vous souhaitez changer. Cliquez ici avec le bouton droit de la souris et choisissez Coller le style. Vous pouvez voir que cela l'a automatiquement changé car le style de ce conteneur était d' avoir un panoramique de zéro Il a lu que dans ce conteneur, parce que j'ai copié des styles, collé les styles ici, il revient automatiquement exactement à la même chose Joue avec ça. Parfois, cela fonctionnera pour vous, parfois il ne vous suffira pas de voir ce que vous pouvez obtenir en termes de travail. Je vais juste déplacer cette structure ici également. Je me suis souvenu que je ne l'avais pas fait dans cette section supérieure. Bien que celui-ci soit aligné ici sur le côté gauche, celui-ci a de la place. Il suffit donc de modifier le conteneur ou de coller à nouveau le style. Et voilà. Cela vient de combler le petit trou qui se trouve là-bas. Et maintenant, vous pouvez voir que cela s'aligne parfaitement là-haut, cela s'aligne parfaitement là-haut. Génial. Replaçons la structure ici et sauvegardons le brouillon. 9. Section animée NOUVEAU: D'accord, votre site Web a déjà l'air cool. Et c'était une très bonne section d'introduction. Je pense maintenant que nous devons entrer plus en détail sur votre entreprise et votre service. Je vais commencer à créer une section que je vais appeler section À propos. Ce que nous allons faire ici, c'est commencer à ajouter un nouveau conteneur, cliquer sur le signe et choisir Flex Box. Je vais consulter deux colonnes à ce sujet. Maintenant, la seule chose que nous allons faire légèrement différemment ici est la largeur du conteneur, le conteneur de stockage principal. Encore une fois, il suffit de cliquer sur les petits points au milieu pour modifier le conteneur. Ensuite, rendez-vous ici dans le menu de gauche. Assurez-vous que les mises en page sont sélectionnées. La seule partie que nous allons modifier ici est celle où il est question de largeur du contenu. Il apparaît normalement automatiquement sous forme de boîte et boîte à 1 140 pixels, comme c'est le Ce que nous allons faire avec celui-ci, cependant, c'est toute la largeur. Comme vous pouvez le voir ci-dessous, ces colonnes internes se sont étirées jusqu'au bord avant de se terminer ici. Maintenant, ils vont jusqu' au bord de la page. C'est ce que nous voulons faire avec la largeur. Nous voulons qu'il remplisse toute la page. Jouons également avec la hauteur. Essayons simplement de faire en sorte qu'il remplisse également toute la page en hauteur. La meilleure façon de le faire est d'accéder au menu déroulant ici à la hauteur minimale et de choisir la hauteur verticale VH Tapez-en une car ce sera 100 %. Le plan que j'ai pour cette section à propos est d'avoir une autre image forte sur le côté droit, puis du texte sur le côté gauche. Ce que nous allons faire ici, c'est changer l'arrière-plan des deux colonnes internes. Ramenons la fenêtre de structure. Allons-y. Il s'agit de notre conteneur principal , puis des deux plus petits conteneurs internes. Choisissons d'abord le conteneur sur la droite, cliquez dessus, ou cliquez sur le conteneur lui-même, ou sur le cadre gris à gauche. Ensuite, sur le côté gauche, choisissez le style en arrière-plan. Encore une fois, cliquez sur le classique et choisissez une image. L'image que je veux utiliser ici, eh bien, je veux qu'elle parle du client. Je veux montrer l'un de nos clients dans le magasin en train de jouer de la guitare. Mettons-y celui-ci . Allons-y. Déplaçons simplement la structure là-bas. Même problème que nous avions rencontré précédemment avec la façon dont il remplissait la boîte. Encore une fois, il s'agit des paramètres par défaut. Cliquez ici sur la gauche pour modifier le style du conteneur. Encore une fois, modifions simplement les paramètres dans cette position, disons centre, centre, répétition, absence de répétition, puis taille d'affichage de la couverture. Allons-y. Il remplit maintenant toute la boîte. Mais c'est un recadrage assez étrange à ce sujet. Je me dis maintenant que je n'ai pas besoin que la hauteur soit de 100 %. C'est probablement trop grand pour la quantité de texte que je veux afficher sur le côté gauche Cliquons sur les points ici pour modifier le conteneur, assurez-vous que la mise en page est sélectionnée. Et puis peut-être que nous changerons la hauteur verticale à 75 %. Et voilà. Je pense que c'est un bien meilleur affichage de l'image que j'ai choisi d'utiliser ici. Replaçons maintenant la structure de ce côté. Choisissons ensuite à nouveau ce conteneur. Choisissez-le dans votre menu Structure, ou cliquez simplement sur le conteneur sur le côté gauche pour choisir Style Classic. Maintenant, ce que je veux ici, c'est un arrière-plan coloré, car encore une fois, cela facilitera la division entre la section en haut qui aura un fond blanc et la section en dessous qui aura également un ordre de fond blanc. Une fois cette option sélectionnée, venez ici et cliquez sur cette icône de globe par défaut. Et choisissez la couleur primaire. Choisissez la couleur que vous voulez ici, mais je vais choisir la couleur primaire. Je pense que c'est une belle distinction entre le blanc ci-dessus et une section colorée. Maintenant, comme vous pouvez le voir depuis le haut, nous passons de cet arrière-plan coloré à une section blanche jusqu'à cette section en gras avec un arrière-plan coloré et une image à fond perdu Cependant, il y a peu de choses que je dois changer ici c'est l'espace entre la section ci-dessus et cette section. Et aussi ces étranges bordures qui se trouvent ici. Si je clique sur la flèche, voyons à quoi cela ressemblerait dans une version en direct de la page. Oui, comme vous pouvez le constater, il y a toujours des bordures blanches autour de chaque section ici. Voyons si nous pouvons les retirer. Jetons un coup d'œil au conteneur principal. Mettez en surbrillance le conteneur principal et choisissez vos points en haut, ou choisissez-le dans le menu Structure. Ensuite, sur la gauche, choisissons Avancé. Réglons simplement la marge et le rembourrage à zéro. Ça devait être le rembourrage. Le rembourrage a été automatiquement réglé sur peut-être dix pixels. Maintenant que je l'ai mis à zéro, masquons le panneau. Allons-y. Il va maintenant atteindre le bord. Il n'y a pas d' espace blanc sur le bord. Si vous voyez cela dans l'une de vos installations, jouez simplement avec les marges et le rembourrage dans le contenant ou dans les contenants internes Ce dont j'ai besoin, c'est de l'espace au-dessus de cette section, et j'aurai également besoin d'espace en dessous de la section. Passons ici à la marge. Encore une fois, je modifie le conteneur principal. Lions les valeurs , puis mettons 100 en haut et 100 en bas. Voyons à quoi ça ressemble maintenant. Oui, c'est un bien meilleur espace entre cette section blanche en haut. Il est également cohérent en termes d'espacement ici, d' espacement ici et d'espacement ici, qui passe encore une fois en bas Ma seule préoccupation à ce sujet, c'est qu' en utilisant notre couleur primaire très audacieuse, cela fonctionne et ça a l'air cool. Mais je pense que je veux qu'il soit un peu plus léger. Je veux quand même me répartir entre cette section et les sections blanches ci-dessus et ci-dessous, mais je vais juste jouer avec la couleur d'opacité, couleur primaire que j'ai ajoutée ici Encore une fois, modifions ce conteneur. Cliquez ici sur Structure. Cliquez sur le conteneur lui-même. Passons à Style. C'est ce que nous avons configuré avec le type de fond classique avec cette couleur primaire. Cliquez sur la couleur elle-même ici, la couleur rouge. Ensuite, cette petite barre ici qui jouera avec votre opacité visible Vous pouvez simplement le faire glisser de gauche à droite. Pour cela, vous pouvez simplement jouer ici avec le sélecteur de couleurs et choisir une couleur légèrement différente, mais cela ne correspond pas à la marque Nous sommes en train de modifier l' opacité de cette couleur. C'est toujours la couleur principale que nous avons configurée. C'est toujours le même code hexadécimal. Ce sont juste les chiffres qui changent à côté, ils font essentiellement référence à un pourcentage Continuons de le faire glisser vers le bas. Je crois que je regarde autour des 20 %. Peut-être 121, 21 %. Voyons à quoi cela ressemble maintenant. Je pense que c'est un bon flux du haut vers cette section, vers la section blanche, puis vers celle-ci. Il suffit de séparer les deux couleurs, comme dans une section séparée, mais ce n'est ni trop intense, ni trop complet. Retournons en arrière. Ce que je voudrais ajouter ici , ce sont deux colonnes de texte distinctes. la colonne de gauche, je vais avoir le numéro 01 dans la section suivante, dessous, nous aurons le numéro deux. Numéro trois. Numéro quatre, nous y reviendrons plus tard. Ici, je veux deux colonnes de texte. Une colonne avec un gros 01 très gras, puis une autre colonne à côté le mot guitares, puis quelques brèves informations sur le service de guitare Nous allons maintenant passer à un niveau supplémentaire de conteneurs ici. Nous avons deux conteneurs dans un conteneur. Je veux maintenant mettre deux autres conteneurs à l'intérieur de ce conteneur sur la gauche. Revenons à notre avantage ici et ajoutons un élément. Déposons un contenant à l'intérieur ce premier contenant rouge qui se trouve en haut. Ajoutons un autre conteneur en dessous. Ici, nous avons maintenant deux conteneurs à l'intérieur de ce conteneur. Cela fonctionnerait si vous configurez votre texte de cette façon, la façon dont il est empilé, de la façon dont nous avons 01 haut, puis des guitares et les informations ci-dessous Mais je ne veux pas que ça se passe comme ça. J'aimerais qu'ils soient alignés côte à côte. J'aimerais une colonne à gauche et une colonne à droite. Ce que nous devons faire ici, c'est modifier le conteneur dans lequel se trouvent ces deux conteneurs. Encore une fois, passons à notre menu Structure ici. Il s'agit donc du conteneur principal. Comme vous pouvez le constater, le conteneur de texte est d'ailleurs surligné. C'est celui que je souhaite modifier, je clique ici. Il passera ensuite à la mise en page. Je regarde cette section ici, direction. Cela signifie que tout ce qui se trouve à l'intérieur conteneur court horizontalement ou verticalement, car ils sont empilés les uns sur les autres Pour le moment c'est vertical, je vais changer cette horizontale. Allons-y. Vous pouvez voir le changement qui s'y est produit. Les deux colonnes sont désormais placées à gauche et à droite l'une de l'autre. Maintenant, je vais ajouter 01 dans cette colonne de gauche, puis Guitares et les informations dans cette colonne de droite Nous allons maintenant commencer à ajouter du texte aux deux colonnes que nous avons ici. Commençons par la colonne de droite. C'est le plus simple. Nous voulons commencer par une rubrique consacrée aux guitares. Je vais le déposer ici. Il le met automatiquement sur H deux, et c'est ce que nous recherchons. Écrivons simplement le mot guitares en termes de couleur Tout à fait comme le rouge, mais je pense que je veux juste que ce soit la couleur normale du texte. Je vais aller dans Style, puis cliquer sur ce bouton principal, puis choisir Texte. J'aime bien ça. Revenons maintenant à Ajouter un élément en haut de la page. Et il suffit d'utiliser un éditeur de texte classique. Encore une fois, cela vient d'être ajouté dans le texte standard de Lurum Ipsen Cependant, j'ai une copie de tout le texte que je souhaite utiliser ici. Le code HTML a été supprimé de celui-ci, bien sûr, je vais le coller ici Maintenant, ce que je veux, c'est le chiffre 1 ou 01 sur le côté gauche. Nous l'ajouterons dans un autre titre. Montons ici pour ajouter un élément en haut. Et ajoutez-en un autre sur le côté gauche. Encore une fois, il est déposé dans un H deux, ce qui est bien. Et je vais le remplacer par 01. ce qui est de l' écran que je veux ici, je veux qu'il soit placé plus près du texte sur le côté droit. Pour le moment, il est automatiquement entré sous forme de texte aligné à gauche. Mais je peux changer ça. Je peux faire en sorte que ce texte, le 01, soit aligné de l'autre côté de ce conteneur. Pour ce faire, je vais faire défiler la page jusqu'à l'endroit où il est écrit alignement et choisir le bon côté pour que cela soit parfait. Maintenant, avec style, je veux le modifier. Je vais passer au style. Tout d'abord, la couleur du texte, je ne veux pas non plus qu' elle soit rouge fixe. Je vais cliquer sur la couleur ici, choisir le sélecteur de couleur Et je vais y sélectionner du blanc pur à cette taille. Ce n'est pas particulièrement lisible. Passons à la typographie. Cliquez sur l'icône en forme de crayon ici. Je suis content d'un, je suis content du poids ici. C'est juste la taille. Cela doit être beaucoup plus important. Je vais donc simplement le faire glisser vers le haut. Je vais m' attarder là-dessus, peut-être même 200, il semblerait que 200 soit le maximum que cela vous permettra d'atteindre. Il s'agit de l'utilisation de cette barre glissante. Si vous voulez aller beaucoup plus loin, vous pouvez simplement surligner le texte ici et écrire un chiffre. Écrivons en 800. Il passera à 800, nous ne le voulons pas vraiment de cette taille. 200, c'est bien, mais c' est ainsi que vous pouvez modifier la taille du texte comme vous le souhaitez. Remettons-le à 200. Ça a l'air génial. Je pense qu'il faut juste un peu plus d'espace entre le zéro et le un. Jouons à nouveau avec l'espacement des lettres ici. Faites-le glisser un peu vers l'extérieur. Je pense que je vais aussi aller au bout du bar. Dix ? Oui, je trouve que ça a l'air génial. Cachons le panneau. J'aime vraiment ça. J'aime bien la façon dont nous avons 01 assis ici, puis cela passe aux guitares et ensuite nous voyons l'image Cependant, l'alignement et l'espacement ne sont pas tout à fait corrects Revenons-en à l'éditeur. Tout d'abord, je ne veux pas que le texte se trouve juste à côté de ce contenant. Je veux qu'il soit placé au centre. Encore une fois, un moyen très rapide de régler ce problème est de dire que l'ensemble du conteneur rouge doit être centralisé, ou que tout le contenu de ce conteneur doit être centralisé. Encore une fois, nous pouvons simplement cliquer sur le conteneur rouge, cliquer sur la case grise en haut à gauche ou le choisir ici dans Structure. Alors, tout simplement, je voudrais passer à cette section ici lorsque nous sommes dans la mise en page Modifier le conteneur et dire «  Aligner les éléments au centre ». est aussi simple que ça. Jetons un coup d'œil à ça. Oui, j'adore la façon dont cela se trouve au centre de cette boîte. Le seul problème que nous avons concerne la proximité entre le texte et l' image de droite. Changeons le rembourrage. Changeons le rembourrage à l'intérieur de ce contenant interne. Encore une fois, je peux passer à cette section, cliquer sur la case grise ou choisir ici dans Structure. Ensuite, ici, dans le conteneur d' édition de gauche , accédez à Avancé. Lions toutes ces sections. Ensuite, sur la droite, disons que nous voulons peut-être 50 pixels, peut-être un peu plus, peut-être 100. Jetons un coup d'œil à ça. Je pense que c'est un bon espace entre le texte et l'image, et tout cela va très bien ensemble. Je pense que c'est un excellent flux entre ici où nous avons empilé des images avec du texte ci-dessous, et celui-ci, où nous avons le numéro sur la gauche, le texte d'introduction de la guitare, l' image du texte d'introduction de la guitare sur la Ça a l'air génial. Juste deux autres choses que je veux faire dans cette section. L'un d'eux est encore une fois, juste un petit couplet d' un casse-tête de designer. J'ai juste l'impression qu'il y a trop d'espace entre les guitares du titre Et puis le texte ci-dessous Ouvrez ce conteneur et nous passons à la mise en page. En effet, par défaut, Elementor ajoute un écart de 20 pixels entre chaque colonne et chaque ligne Ils sont évidemment en rangées, vous pouvez voir que l'espace entre les deux éléments est ici de 20 pixels. Je pense que c'est un peu trop. Je préférerais que ce soit dix pixels. Tapons dix. Allons-y. Cela ne semble pas être un grand changement, mais du point de vue du designer, sont ces choses qui nous dérangent. Maintenant, la seule autre chose que je veux faire est d' animer le texte que nous pouvons voir ici, le 01 et les informations sur les guitares Au fur et à mesure que les utilisateurs font défiler la page, je souhaite que chaque élément apparaisse différemment, car nous sommes sur le conteneur de texte principal ici. Modifions-le d'abord. Passons ici à Avancé, puis aux effets de mouvement. C'est ici que vous pouvez choisir l'animation d'entrée pour cette animation d'entrée de conteneur , ce qui signifie que lorsque les gens accèdent pour la première fois à cette partie de la page, c'est ainsi qu'elle apparaît. Il est défini par défaut pour le moment, ce qui n'est pratiquement rien dans ce menu déroulant. Eh bien, vous avez beaucoup d'options différentes ici, certaines d'entre elles sont un peu dingues. Si nous nous intéressons aux banques, ce n'est pas trop fou. Flash, mais ensuite tu as des trucs comme un hochement de tête, Jello, c'est dingue Tout ce que je veux pour celui-ci, c'est un simple fondu. Faisons défiler la page vers le haut et disons Fade in. Et c'est tout ce que cela fera, c'est quelqu'un fait défiler la page vers le bas, le texte n'y figure pas, puis il s'estompe Vous pouvez jouer avec la vitesse à laquelle cela se produit. Dans cette section, voici la durée de l'animation. Il est automatiquement réglé sur normal, mais j'ai trouvé que c'était un peu trop rapide. Si je choisis vite, c'est super rapide. Je veux qu'il soit réglé pour qu'il soit lent. J'aime bien ça. Je pense qu'il faut juste une seconde de plus pour apparaître. C'est l'animation que j' aimerais pour cette section, mais je veux quelque chose de légèrement différent pour le 01. Sélectionnons à nouveau ce conteneur ici dans Structure. Cliquez ici sur Avancé sur le côté gauche, puis sur Effets de mouvement. Je veux que celui-ci apparaisse sur le côté de la page. Comme celui-ci s'estompe d'un point de vue statique, je veux qu'il glisse et apparaisse Passons à ce menu déroulant. Allons-y. Nous avons d'autres options de fondu. On peut dire « Fade in down ». Où ça descend comme ça. Gauche, droite vers le haut. Comme cet élément se trouve sur le côté gauche du texte principal, je veux qu'il disparaisse à partir de la gauche. Oui, j'aime bien ça. Encore une fois, un peu trop vite. Modifions-le pour qu'il soit lent. Nous avons maintenant différents fondants pour chacun d'entre eux. Enregistrez ce brouillon, puis prévisualisons les modifications pour voir à quoi cela ressemblerait pour les visiteurs. Voici notre page d'ouverture principale. Lorsqu'un utilisateur fait défiler la page vers le bas, il accède à cette section et c'est parti Rechargeons simplement celui-ci. C'est ainsi que les guitares et le texte ci-dessous apparaissent. Et puis le 01 s'estompe. C'est subtil, mais c'est une autre façon d'attirer l'attention des visiteurs sur votre site Web. Attirez vraiment leur attention sur ce que vous faites en tant que service. 10. Texte animé créatif: Si vous avez suivi toutes les leçons jusqu'à présent, vous avez déjà un site Web très cool. Nous avons ce héros cool, puis cette super petite section d'introduction avec des images coulissantes. Puis le début de notre section À propos avec 01 guitares. Ce que j'aimerais faire maintenant, c'est configurer 0,203.04. Je vais le faire d' une manière légèrement différente de ce que nous avons Je vais vous montrer un outil d'animation de texte sympa que vous n'avez peut-être pas vu utilisé ailleurs, mais qui aura l'air vraiment cool sur votre site Web. Revenons-en à l' éditeur. Faites défiler la page vers le bas. Ajoutons un nouveau conteneur Flex Box. Choisissons le 50, le 50. Encore une fois, 50, 50, c'est bien parce que cela correspond à la division entre le texte et l'image. Cependant, pour celui-ci, je ne veux pas le faire en pleine largeur, je veux qu'il soit encadré. Nous le garderons ici dans la section de mise en page tel qu'il est encadré. Et 1 140 pixels. Ce conteneur principal contient deux sous-conteneurs Pour chacun d'entre eux, je vais définir une hauteur minimale en pixels. J'aimerais que le temps soit d' au moins 500 pixels. J'aimerais que ce soit sur les deux conteneurs. Je vais juste cliquer avec le bouton droit de la souris et copier ce conteneur. Accédez à mon autre conteneur, sélectionnez la case grise et cliquez avec le bouton droit sur le style de collage. Cela signifie simplement que la hauteur minimale est automatiquement modifiée, 500 pixels. Maintenant, ce que je veux ici pour les sections deux, trois et quatre est similaire à ce que nous avons ici, où nous avons une image d' introduction, un numéro, un titre et du texte ci-dessous. Maintenant, pour diviser l' affichage ici sur celui-ci, nous avons le texte sur la gauche, l'image sur la droite. Je veux faire le contraire ici. Commençons par l'image de gauche. Cliquons à nouveau pour modifier le conteneur. Cliquez sur le conteneur ou choisissez-le ici dans votre structure. Et puis repassez au style. Nous allons utiliser une image de fond ici, vous verrez pourquoi dans un instant lorsque je commencerai à ajouter les chiffres. Choisissons le classique, choisissons l'image. Je vais choisir trois sections différentes. Dans cette deuxième section, je vais parler des disques que nous vendons, de tous les vinyles Je vais parler d'émissions en direct , puis je vais juste parler ambiance old school générale que l'on ressent en venant dans notre magasin Le premier que je veux regarder est celui des disques vinyles. Je vais ajouter cette image de la jeune fille en train de fouiller des disques vinyles. Sélectionnons-le à nouveau, les paramètres habituels ici avec style. Sur la position de gauche, centrez, centrez , répétez, répétez et affichez la taille de la couverture. Encore une fois, cela adapte automatiquement l'image au conteneur, quel que soit le ratio. S'il s'agit d'une image carrée, si elle est de trois par 24 par trois, elle trouvera toujours sa place ici et tout est centralisé, qui est parfait pour cette image, car la fille est au centre de la prise de vue. Pour la colonne de droite, je vais à nouveau ajouter une couleur de fond. Choisissez un contenant ici pour un style classique. Ensuite, je vais passer à la couleur, je vais utiliser notre couleur secondaire, l'or. Mais je veux faire comme je l'ai fait ici avec le rouge et le faire avec une opacité moindre Cliquez sur la couleur elle-même ici, accédez au sélecteur de couleurs, puis faites glisser celle-ci vers le bas jusqu'au niveau qui vous convient Je pense que c'est assez léger, c'est passé à un. J'aime bien ça. Je trouve que ça a l'air cool. Maintenant, ce que je veux faire, c'est mettre le texte ici sur la droite. Et pour garantir la cohérence, je vais aller ici et je vais copier ce que nous avons. Je vais copier le titre Guitars et je vais le coller ici pour m'assurer qu'il est exactement de la même taille et qu'il s'agit encore d'un H two, je vais appeler celui-ci records Ensuite, je vais faire une autre copie du texte ici et le coller sous les enregistrements Word. Encore une fois, j'ai copié le texte dont j'ai supprimé le code HTML, je vais donc le coller dedans Maintenant, l'affichage de ceci. C'est vrai, vu la façon dont tout est configuré ici dans le coin. Je veux qu'il soit centralisé. Encore une fois, je vais centraliser le contenu du conteneur Cliquez sur votre conteneur, éventuellement ici dans la structure. Accédez à Mise en page, puis centrons le contenu de cette façon. Et centrez le contenu de cette façon. Cela a tout repoussé au centre du conteneur. La seule chose dont j'ai besoin pour continuer à centraliser, c'est ce texte ici Je vais cliquer sur l'éditeur de texte pour modifier le texte, Style, puis sur l' alignement de ce texte. Je veux que cela soit centralisé. Ça a l'air génial. La seule chose, c'est que, encore une fois, le texte est un peu près du bord. Je vais changer le rembourrage de ce contenant. Cliquez sur votre conteneur, choisissez Avancé. Accédez à votre rembourrage Je pense qu'un bord de 50 pixels pour tout devrait convenir. Ils ont tous été liés, alors mettons-les également en haut et en bas. C'est bien parce que nous avons assez d'espace ici. Cela signifie simplement que si quelqu'un regarde l'écran plus grand, il y aura toujours un espace égal en haut, en bas, à gauche et à droite pour le chiffre. Eh bien, encore une fois, je vais monter ici et copier celui-ci. Ce que je veux faire, c'est le coller au-dessus de l'image que vous pouvez voir ici. C'est pourquoi j'ai choisi une image de fond pour celle-ci. Encore une fois, je vais simplement cliquer sur le conteneur ou sur la case grise en haut. Ensuite, collez ici le numéro 01 qui est déposé. Modifions-le en 02, puis assurons-nous simplement que le texte est centralisé. Ensuite, à l'intérieur du conteneur, encore une fois, je veux que tout soit centralisé. Passons à la mise en page, à l' envoi au contenu, au, tout est centré. Maintenant, cependant, ce texte, eh bien, deux choses que je veux changer ici. Tout d'abord, je ne vois pas vraiment la fille qui est derrière tout ça. Modifions la zone de texte. Cliquez sur l'icône de votre crayon ici. Passons à Style. Passons à la couleur du texte. Cliquez sur l' icône de couleur à droite. Encore une fois, changeons simplement son opacité. Je vais le déposer maintenant. Cela a l'air vraiment cool parce que nous voyons un chiffre, mais nous le voyons en haut de l'image. Quelque chose comme ça fonctionne très bien pour un numéro. Le chiffre est très clair, vous ne voudriez pas faire une longue partie du texte comme ça car il se peut qu'il ne soit pas visible Mais pour quelque chose comme un chiffre, ce n'est qu'une indication de ce qui va suivre. J'ai réduit ce chiffre à 73 là-bas. Je pense que c'est bon. La seule autre chose que je veux, c'est qu'il occupe plus d'espace. Passons à la typographie. Cliquez ici sur l'icône en forme de crayon qui est actuellement réglée sur 200. Comme je l'ai dit plus tôt, c'est le maximum que vous pouvez atteindre avec le curseur ici Mais mettons-le à 400 pixels peut-être. Oui, ça a l'air génial. J'adore vraiment ça. Je pense que c'est une déclaration très audacieuse. Cela indique aux visiteurs qu'ils se trouvent l' intersection 2 de la section « À propos », mais je peux toujours voir la fille ci-dessous et voir ce qu'elle fait. Maintenant, la seule chose que je veux ajouter ici est une animation pour le titre où il est écrit Records Again, suffit de cliquer sur le titre. Choisissez-le ici dans Structure ou cliquez sur l'icône rose. Passons ensuite aux options avancées, aux effets de mouvement, puis faisons simplement un fondu. Faisons un fondu vers le bas. J'aime vraiment ça. Cependant, c'est ici que je veux vous montrer quelque chose de légèrement différent. Il existe une façon très cool et originale d'animer un titre Lorsque les utilisateurs font défiler la page vers le bas jusqu'à cette partie de la page, je veux séparer le titre en lettres séparées. La lettre, la lettre et la lettre C, et faites en sorte que chacune d'elles s'anime différemment Modifions-le ce titre et changeons-le simplement en R. J'ai choisi le titre, et je vais passer à Contenu et le remplacer R. Ensuite, je veux dupliquer celui-ci. J'écrirai le clic et je le dupliquerai. Et je veux que ce soit un, le seul problème que nous ayons ici est à l'intérieur de ce conteneur. Si je passe à la mise en page, vous verrez que la direction est une colonne verticale. Mais j'ai besoin que les lettres soient placées l'une à côté de l' autre pour qu'elles soient horizontales. Si je devais faire passer ce conteneur à l' horizontale, eh bien, ils sont assis l'un à côté de l'autre, mais maintenant ils sont assis à gauche du texte, et je veux qu'ils soient au-dessus. Remettons-le à la verticale. Et ce que nous allons faire ici, c'est ajouter un autre sous-conteneur à l'intérieur de ce conteneur Cliquez ici sur un élément, puis déposez-le ici. Lorsque vous voyez la ligne rose, déposez-la au-dessus du texte normal. Ce que je veux pour ce conteneur c'est que la direction soit horizontale. Alors j'ai déjà créé ces lettres. Faisons-les simplement glisser dans ce conteneur. Cliquez sur l'icône et faites glisser le pointeur vers le bas jusqu'à ce que vous voyiez la ligne rose. Et puis faites de même avec le E. Ou un autre moyen plus rapide faire est d'utiliser le menu Structure ici. Parce que je sais que je veux placer ce titre dans ce conteneur, que vous puissiez le faire glisser vers le bas, alors c'est fait dans le mauvais ordre. Déplaçons celui-ci en dessous de celui-ci. C'est comme ça que ça se trouve. Ça a l'air génial. Cependant, je souhaite tout de même qu'il soit centralisé. Et je dois aussi jouer avec l'espace qui se trouve entre chaque élément. Voilà, partons pour le conteneur. Ce sous-conteneur, encore une fois , garantit que tout est centralisé Également. Jouons simplement avec les lacunes. Encore une fois, la valeur par défaut est de les définir sur 20. Nous l'avons changé en dix plus tôt, n'est-ce pas ? Je pense toujours que c'est un espace trop grand. Mettons-le simplement à zéro. Allons-y. Maintenant, assurons-nous d' avoir tous les enregistrements Word. Un autre moyen rapide de le faire, c' est de venir ici dans votre structure. Choisissez votre dernière lettre, puis dupliquez-la. Alors, par ici, écris la lettre que tu veux qu'elle soit. Faites-le suffisamment de fois jusqu'à ce que nous ayons tout écrit , ce n'est pas la bonne lettre Maintenant, tout est dit records. Maintenant, si j'ai choisi de le transformer en lettres séparées, c'est parce que je veux une animation légèrement différente sur chaque lettre, ou du moins sur chaque autre lettre. Si nous regardons ce que nous avons sur le R, cliquez sur votre R, passez à Avancé. Les effets de mouvement. Il y avait une baisse. Passons maintenant à la deuxième lettre, puis modifions-la pour qu'elle s'estompe. Puis décoloration vers le bas, D, décoloration vers le haut, vers le bas. D, vers le haut. Maintenant, sauvegardons ce brouillon, puis regardons à nouveau l'aperçu pour voir comment et comment cela fonctionne. Lorsque nous faisons défiler la page vers le bas, nous voyons l'animation là, puis voici l' animation qui s'y trouve. Permettez-moi de recharger celui-ci pour vous et vous verrez comment le mot records apparaît comme ça Je trouve que ça a l'air vraiment cool. Revenons maintenant à l'éditeur. Jouez avec la taille de tout ce qui se trouve ici. Maintenant que nous avons configuré toute cette section 02, nous pouvons la dupliquer et faire exactement la même chose pour les sections trois et quatre. Il ne reste plus que quelques modifications apportées par le designer. C'est encore une fois la façon dont mon cerveau de designer fonctionne en termes d' espacement et de tailles. La première chose que je souhaite modifier est simplement l'espace entre les enregistrements de titre et le texte ci-dessous. Passons au conteneur principal dans lequel il se trouve, celui-ci ici. Alors réduisons à nouveau les écarts ici à dix. Allons-y. Maintenant, la seule autre chose que j' aimerais faire ici est d'agrandir un peu le mot record et de le rendre un peu le mot record un peu plus audacieux Je vais modifier la taille de la typographie. Commençons par la lettre R, puis passons au style et à la typographie Encore une fois, la taille est automatiquement sélectionnée selon ce que nous avons défini pour le H deux, mais nous pouvons la modifier manuellement ici. Disons peut-être 45. Oui, je pense que c'est une bien meilleure taille. Maintenant, le moyen le plus simple de changer toutes les lettres ici à la même taille serait d'écrire, cliquer, de copier-coller le style. Cependant, nous voulons éviter de le faire sur toutes les lettres, car si nous le faisons, cela dépassera également le style de l'animation d'entrée. Comme certaines d'entre elles s'estompent et d' autres diminuent, nous devons simplement le faire sur toutes les autres Passons de R au style de paiement, puis de C au style de paiement, et de R au style de paiement. Cela a l'air plutôt cool, pour être honnête, si vous aimez ça. Du point de vue du design, continuez comme ça. Mais je veux juste de la cohérence ici et rendre les enregistrements Word un peu plus faciles à lire. Cliquons sur le E. Puis montons ici pour styliser la typographie Assurez-vous également qu'il s'agit de 45 pixels. Copiez-le et collez-le dans le O et le D. C'est parti. Maintenant, je suis très content de cette section. Je pense que cela fonctionne très bien et fonctionne vraiment bien. À partir du 01-02, il fera la même chose. Il répertorie tout ce que nous faisons dans l'entreprise, mais c'est fait d'une manière légèrement différente, originale et cool Ce faisant, nous attirerons attention de tout le monde plus bas sur la page. Mais je pense que nous reproduisons exactement ce style pour le numéro trois et le numéro quatre. C'est très simple et très rapide à faire. Si nous dupliquons simplement le conteneur de stockage principal, c'est parti. Je l'ai dupliqué là-bas. Ce que je vais faire, c'est en faire un numéro trois , puis changer le titre et changer le texte ci-dessous. Il y a juste une chose qui m'embête ici, c'est de nous cacher. Le panneau est juste ce petit espace entre les deux car nous sommes dans la même section. Je ne veux pas d'espace. Je veux qu'ils se touchent. Ce sont là encore les paramètres par défaut de cet élément ou de ce qu'il possède en termes de remplissage d'une marge Modifions ce conteneur en haut, cliquez sur vos points en haut. Passez ici à Avancé et réglez les deux à zéro. Oui, allons-y. C'est parfait Maintenant, il n'y a plus d'espace entre les deux. La seule chose que je veux faire ici, c'est jouer avec le style. Le problème est que, comme ils utilisent tous les deux la même couleur dorée, ils se fondent en une seule, ce qui ne permet pas d'obtenir la même séparation que s'il y avait un écart. Ce que je vais faire ici, c'est un autre truc cool en matière de design. Je vais échanger les deux conteneurs. Passons à ce conteneur et comme vous pouvez le voir, à l'intérieur du conteneur principal, deux sous-conteneurs. Je vais prendre le second et le déplacer vers le haut pour qu'il soit le premier Allons-y. Maintenant, comment cela fonctionne, je passe au 02-03, puis le 04 suivra le même chemin que celui du haut Ce serait juste une très belle séparation entre le texte de l'image, le texte l'image et le texte de l'image. Mettons d'abord à jour 03. Celui-ci portera sur les émissions en direct. Choisissez votre contenant , puis modifiez votre image pour les émissions en direct. Je suppose que c'est une photo du mec avec sa guitare. Sélectionnez cette option car nous avons déjà défini la position, la répétition et la taille d'affichage pour la précédente. Nous n'avons pas besoin de le refaire, ça a l'air vraiment cool. Tout d'abord, ajoutons simplement le texte de ma copie ici. Il s'agit de performances en direct. Ensuite, je dois changer cela pour dire émissions en direct. Tout cela doit être fait manuellement. Alors allons-y et écrivons le mot « émissions en direct ». Maintenant, quelques problèmes. Tout d'abord, il n'y a pas assez de lettres. Dupliquons quelques lettres ici. Il m'en faut deux de plus. Dupliquons les deux, changez-les en W. Et en dupliquant cette lettre, cela signifie simplement que l' animation est désormais fausse sur le W. Modifions simplement ce titre Passez ici en mode Avancé et remplacez-le par le contraire. Cela devrait disparaître. Maintenant, ils s'alignent tous correctement. Je suppose que l'autre point est bon, émissions en direct peuvent être un seul mot, mais je le considère ici comme deux mots distincts. J'ai besoin d'un peu d'espace entre le E et le S. Pour cela, c'est très simple , sélectionnons le bouton Aller à a. Dissociez les valeurs, puis mettez un peu de rembourrage sur le côté droit de cette lettre, peut-être dix pixels Allons-y. Cela fonctionne parfaitement. Maintenant, dupliquons simplement le conteneur le plus haut. Cliquez avec le bouton droit sur Dupliquer Évidemment, cela l'a placé au-dessus du numéro trois, mais je vais sélectionner les points ici et les faire glisser vers le bas pour passer en dessous. Allons-y. Vous allez maintenant voir comment les sections passent de l'une à l'autre. En les séparant ainsi, vous attirez beaucoup mieux l' attention des gens Modifions-le ce dernier ici. Faisons en sorte que ce soit 04 alors. Ce sera la section old school. Passons au conteneur pour sélectionner le style et l'image. Je veux cette image de cassettes. C'est très old school. Ça a l'air super avec un 04 en haut. J'ai copié mon texte. Laissez-moi le coller dans l'éditeur de texte. Ensuite, je dois changer celui-ci pour dire old school, comme nous l'avons fait ci-dessus. Changez manuellement. Encore une fois, dupliquons simplement cette dernière lettre et faisons-en un L et veillons à modifier l'animation pour qu'elle soit dans la direction opposée. En train de s'estomper. Modifiez-le pour qu'il apparaisse à nouveau. vieille école. Cela pourrait être un seul mot, je ne suis pas sûr, mais je veux que ce soit deux mots distincts. Sélectionnons à nouveau le D. Accédez à la section Avancé. Dissociez les valeurs et insérez dix pixels supplémentaires Maintenant, ça a l'air génial. Enregistrez le brouillon, puis prévisualisons la page. Faisons défiler la page vers le bas. Nous passons dans la section des sliders, puis nous avons l' animation de 01 guitares, puis en descendant ici, deux disques, 03 concerts, 04 Old School Ça a l'air vraiment cool. La meilleure chose à ce sujet est que l'animation ne démarre que lorsque l'utilisateur fait défiler la page vers le bas pour accéder à cette section Plutôt que des disques, des émissions en direct et des animations à l'ancienne en même temps Ils s'animent lorsqu'un visiteur accède à cette partie de la page Ça a vraiment l'air bien. Maintenant, si vous avez suivi toutes ces leçons, vous avez maintenant votre héros, votre introduction et votre section complète qui dit : « Nous vendons des guitares, nous vendons des disques Nous sommes doués pour les spectacles en direct et nous sommes très old school. 11. Témoignages clients: Je vais juste vous montrer maintenant comment ajouter trois autres parties. Tout d'abord, la dernière section de la page sera composée de témoignages de clients Ensuite, nous allons examiner le pied de page et l'en-tête, qui sont tous deux importants pour chaque site Web Commençons par les témoignages. C'est très facile grâce à un élément ou à un widget. Configurons une nouvelle section sous forme de grille. Et j'aimerais qu'il y ait trois colonnes. Alors assurons-nous d'avoir une marge autour de celui-ci ici. Grille d'édition, Avancé. Dissociez les valeurs, et disons simplement 100 en haut, 100 en bas Encore une fois, juste le même espace que celui que nous avons entre les sections situées ailleurs. Ensuite, montons vers le haut pour ajouter un type d'élément dans témoignages, puis faisons-le glisser dans la première colonne Tout cela est très facile à configurer. Je vais juste vous montrer le premier, puis ce que nous pouvons faire, c'est dupliquer pour les deux autres. Commençons par le premier. Commençons par l'image J'ai des images des trois musiciens qui ont donné une très bonne note à notre boutique. Commençons par ce type, il s'appelle Jimmy. J'ai copié son commentaire. Passons juste à celui-ci ici. L'expérience est toujours géniale. L'équipe commerciale est toujours très serviable et répond toujours à toutes les demandes. Merci Jimmy. Il ne nous reste plus qu'à ajouter son nom et peut-être simplement changer le style de ce que nous avons ici. Tout d'abord, passons au nom. La couleur du texte ici est le rouge, mais je pense que je veux juste que ce soit la couleur normale du texte puis le titre où il est écrit pour le moment, designer, encore une fois, j' aime juste que ce soit le noir. Je trouve que c' est beau et propre. Si vous voulez jouer avec cela vous-même, essayez différentes couleurs. Essayez vos couleurs secondaires principales. N'hésitez pas. Revenons simplement au contenu. Ajoutons son nom, le titre de Jimmy Hendricks. Eh bien, voici un guitariste. Ce n'est pas aussi simple que ça en fait. Dupliquons simplement celui-ci deux fois. Cela semble déjà très cool, mais il est évident que nous avons besoin du témoignage de deux personnes différentes. Permettez-moi de passer à la seconde, modifier, de changer l'image. Ce gars ici qu'on l' appelle va le déposer. Copiez son commentaire en le remplaçant Guns and Roses. Merci Et puis pour les 11 derniers de mes musiciens préférés, ce gars Wolfgang Wolfgang Amadeus Mozart. De quoi parle Wolfgang ? Collons-le dedans. Wolfgang a déclaré que nous étions un excellent magasin avec livraison rapide, un très bon service et une très bonne attention aux clients Merci Wolf. Mettons simplement Wolfgang ici et il a pour titre de musicien classique Je pense qu'il faut juste un peu plus d'espace entre les deux. Allons-y et modifions-le à nouveau la grille. Revenons à la mise en page. Les espaces ont été définis automatiquement sur une valeur de 20 pixels. Modifions-le à 40. Cela vient juste d'ajouter un peu d'espace supplémentaire. Peut-être 50. Nous y voilà. Je pense que c'est juste un meilleur espace entre les deux. Maintenant, ils s'alignent tous parfaitement en bas. Ouais. C'est aussi simple que ça. C'est aussi simple que cela d' ajouter des témoignages. Je pense que c'est un excellent moyen de parcourir votre page pour accéder à la section à propos. C'est ce que nous faisons et ce sont des clients qui nous ont aimés. 12. Pied de page du site web: La section principale du site Web est maintenant terminée. Nous allons examiner deux dernières parties, à le pied de page et l'en-tête Maintenant, la façon dont cela fonctionnerait normalement dans Elementor est monter ici jusqu'à l'icône et de choisir le générateur de thèmes Cela signifie que nous pouvons entrer ici et créer un en-tête et un pied. Cela signifie que cela apparaîtra sur chaque page de notre site Web et qu'il sera identique. Cependant, nous n'avons qu'un seul site Web d'une page. Quoi qu'il en soit, l'autre problème est qu'il s' agit d'une fonctionnalité professionnelle, donc cela ne peut pas être fait dans la version gratuite. Fermons celui-ci et retournons à l'éditeur. Maintenant, nous allons simplement créer un pied de la même manière que nous créons tout le reste sur cette page. Cliquez sur l'icône plus. Choisissons Flex Box, et je pense à double colonne. Ce que je veux ici, c'est une carte de l'emplacement du magasin sur le côté gauche, puis juste plus d' informations, coordonnées , numéro de téléphone, adresse e-mail Comme c'est la fin de la page, je veux le terminer de manière très audacieuse. Je vais juste créer le conteneur entier, l' arrière-plan de l' ensemble du conteneur, un type d'arrière-plan noir uni de style conteneur d'édition. Ensuite, pour ce qui est de nos couleurs, choisissons la couleur. Voilà. Cela a rempli tout le contexte. Si j'y retourne, vous verrez qu'il est assis là. De toute évidence, il n'y a rien là-dedans maintenant. Mais c'est juste une belle façon de terminer la page. La première chose que je veux faire est de le déposer sur une carte. Dans cette section, remontons pour ajouter un élément. Encore une fois, saisissez la carte. C'est Google Maps que nous allons utiliser ici. Et glisse-le littéralement dans ta première boîte. Il est automatiquement configuré pour afficher cet emplacement. C'est le London Eye, qui se trouve à Londres. Cependant, nous devons changer cela, car notre magasin de musique se trouve ici à Sydney, l'une des rues principales dans l'une des rues principales du centre de Sydney , appelée George Street, numéro 100. Je vais juste le supprimer. Ensuite, je vais taper 100 George Street, Sydney. Et voyons ce qui va se passer. Aidez-moi à épeler Sydney. Nous y sommes. Il montre maintenant la carte du 100 George Street. Les utilisateurs peuvent venir ici et cliquer sur instructions s'ils veulent savoir comment s'y rendre. Cependant, c'est assez loin. L'avantage, c' est que vous pouvez jouer avec le zoom juste pour avoir une idée de l'endroit où il se trouve. Comme vous pouvez le constater ici, nous sommes tout près l'eau et du musée d'art contemporain. Vous pouvez également jouer avec la hauteur ici Si vous voulez 400 pixels, je pense que c'est génial. Parfait. Maintenant, sur le côté droit, ajoutons le texte. Commençons par un en-tête. Venez ici pour ajouter un titre d'élément. Ce que je veux dire ici, c'est de nous consulter. Je pense que ça devrait être blanc. Passons à la couleur du style, faites glisser le sélecteur de couleur vers le blanc. C'est génial. Passons ensuite à ajouter un élément, puis ajoutons l'éditeur de texte en dessous. Encore une fois, je viens de copier tout mon texte pour l' afficher ici de la manière habituelle, mais la majeure partie du texte est en noir. Passons donc au style et utilisons l'image en couleur pour la remplacer par du blanc. Aussi parce qu'il s'agit d'un texte blanc sur fond noir. Je pense que la topographie a juste besoin d'être un peu plus ancienne Il reprend le réglage standard que nous avons défini ici, à savoir le poids normal. Changeons-le peut-être en demi-gras. Oui, c'est bien mieux. Comme vous pouvez le voir, l'adresse e-mail que j'ai saisie ici apparaît en rouge. C'est parce qu'il s'agit d'un lien qui peut apparaître automatiquement lorsque vous écrivez votre adresse e-mail. Mais dans le cas contraire, le retour au contenu met en évidence le texte que vous souhaitez transformer en lien. Disons simplement que je voulais faire cette adresse sous forme de lien, je surligne le texte puis que je clique sur Insérer. Lien. Ici, je pourrais saisir n'importe quelle adresse de site Web, Facebook.com, puis postuler Cela signifie simplement que lorsque les gens cliquent ici, ils sont redirigés vers Facebook.com Mais je ne veux pas que cela soit annulé C'est celle que nous examinons vraiment, cette adresse e-mail. Comme vous pouvez le voir, il est entré automatiquement avec l'adresse e-mail. Avant cela, il contient les mots mail à deux points, puis l'adresse e-mail. C'est ce dont vous avez besoin pour que lorsque les utilisateurs regardent ceci et cliquent dessus, leur application de messagerie s'ouvre. Tout ça a l'air génial. Juste une petite modification que vous voulez apporter à cela, ce qui, encore une fois, est une question de designer. Je vais m'intéresser au style, à la typographie. Je pense qu'il y a trop d'espace entre chaque ligne. Abaissons simplement la hauteur de la ligne à 16. C'est mieux. Alors juste une dernière chose , ou deux dernières choses. Ce conteneur, je veux le centraliser. J'ai aussi besoin d'un peu d'espace, d' un peu de rembourrage à gauche de celui-ci Je vais venir ici pour désactiver ensemble les valeurs des liens, puis j'ajouterai 50 pixels supplémentaires de ce côté. Ça a l'air génial. La seule chose dont l' ensemble du conteneur a besoin, c'est d'un peu d'espace en haut et en bas. Cliquons ici sur le conteneur principal. Passons à Avancé, puis passons au remplissage et dissocions les Et puis dites au top 100 et au bas des 100. Cela vient d'ajouter un peu de rembourrage noir supplémentaire autour de tout ce qui s'y trouve Voyons juste à quoi ça ressemble. Tout semble parfait jusqu'à présent. Passez du héros à l' introduction, en passant par les multiples sections sur les témoignages, puis le pied de C'est génial. Tout le monde a lu la page. Ils sont impressionnés par ce que nous proposons. Ils adorent tous les témoignages et savent maintenant où nous sommes situés pour qu'ils puissent s'y rendre. 13. En-tête de site Web NOUVEAU: Bien, ajoutons maintenant l' en-tête à notre site Web. L'en-tête peut être l'une de ces sections lesquelles vous souhaitez commencer. C'est peut-être l'une des premières choses que vous ferez. Personnellement, je préfère laisser celui-ci jusqu'à la fin , car j'ai déjà décidé du style et de la structure de tout le reste du site. Je sais exactement quelle typographie j'utilise et quelles couleurs j'utilise Pour ajouter cela, nous devons ajouter une autre section au-dessus du héros. Montons ici, cliquez dessus, puis ajoutons-le dans un conteneur Flex Box. Ce que je veux pour cet en-tête, c'est une configuration assez standard : j'ai le logo sur le côté gauche, puis la barre de navigation, tous les liens et peut-être mes boutons de réseaux sociaux sur la droite. Je vais en choisir une avec une petite colonne gauche et une plus grande à droite. Tout d'abord, ce que je veux faire avec tout ce conteneur, c'est choisir une hauteur minimale. Je vais aller ici pour modifier le conteneur, assurer que je suis en mode mise en page, et je vais ajouter une hauteur minimale en pixels de 100 pixels. De plus, je veux passer en mode avancé. Je veux juste les ramener à zéro. Il n'y a aucun espace vide autour de quoi que ce soit. La hauteur est bonne, mais comme vous pouvez le constater, elle se trouve dans une boîte blanche située juste au-dessus du héros. Ce n'est pas ce que je veux. Ce que je veux faire, c'est utiliser un logo blanc et du texte blanc pour m'asseoir au-dessus du héros. Comment puis-je m'y prendre ? Eh bien, comme vous pouvez le constater, nous avons configuré ce conteneur avec une hauteur de 100 pixels. Ce que je dois faire, c'est choisir le conteneur situé sous le conteneur Hero et en modifier la marge. Passons ici à la section Avancé. Désactivons les valeurs liées. Maintenant, normalement, ce que nous ferions dans cette section, si nous voulions ajouter 100 pixels au-dessus, c'est exactement 100. C'est ce qui se passerait. Vous auriez un espace vide de 100 au-dessus. Mais je veux faire le contraire. Je veux -100. Tu vas l'écrire dedans. Mettez un signe moins à côté. Et voilà. Maintenant, le récipient au-dessus repose dessus. Oui, vous pouvez voir un petit espace blanc, mais il suffit de cliquer sur celui-ci. Tu vas le voir disparaître. C'est juste pour notre édition. Tu ne peux encore rien voir. Mais maintenant, le conteneur supplémentaire que nous avons ajouté se trouve au-dessus du conteneur ci-dessous. La première chose que je veux faire est de travailler sur le premier conteneur à l'intérieur du conteneur d'en-tête. Venons ici pour structurer. Choisissez votre conteneur supérieur, choisissez le sous-conteneur. Tout d'abord, passons simplement à Avancé et changeons tout cela à zéro. Il n'y a aucun espace vide autour de lui. Ce que je veux faire, c'est déposer le logo ici. Je viens tous ici pour ajouter un élément, déposer une image. Au début, nous obtenons la boîte grise. Choisissons l'image. Ce que je veux faire ici, c'est ajouter à nouveau mon logo. Maintenant, nous avons déjà utilisé celui-ci, qui est le style le plus vertical. Je veux le style horizontal, comme j'ai l'icône à gauche, puis le texte de Wolfgang Music à droite Choisissons-le. Cela a diminué. Mais où est-il passé ? Pourquoi ne puis-je pas le voir ? Si vous ne pouvez pas le voir, c'est parce que le conteneur situé sous le conteneur héros se trouve en fait au-dessus du conteneur d' en-tête. Tout ce que nous avons à faire est de dire Elementor que l'en-tête doit se trouver au-dessus Viens ici pour Structure. Alors conteneur, venez ici pour modifier, Conteneur, cliquez sur Avancé. La section que nous examinons ici s'appelle l'indice Z. Ce que nous pouvons faire ici, c'est saisir des nombres différents, ce qui signifie que plus le nombre est élevé, plus il sera élevé dans le système de superposition, étant donné que nous n'avons numéroté aucun des autres conteneurs ci-dessous. Un simple contenant suffira ici pour mettre ce qui signifie que plus le nombre est élevé, plus il sera élevé dans le système de superposition, étant donné que nous n'avons numéroté aucun des autres conteneurs ci-dessous Un simple contenant suffira tout cela au premier plan Revenons à cette section. Eh bien, mon logo est trop grand. Je pense que le contenant dans lequel il se trouve en prend trop. Je pense que j'ai besoin d'un peu plus d'espace pour le conteneur sur la droite, ici en structure. Passez à votre deuxième contenant, puis venez ici à la largeur, puis agrandissons-le un peu. Peut-être que 75 %, comme vous pouvez le voir, cela a un peu réduit le logo. En fait, c'est encore trop gros. Passons à 80. Ce que nous faisons ici, c'est simplement laisser beaucoup plus d'espace pour beaucoup plus de contenu dans cette section. Cependant, j'ai toujours l'impression que le logo est un peu trop grand. Ce que je vais faire, c'est sélectionner l'image soit ici dans la structure, soit en cliquant dessus. Alors je vais aller chez Style ici. Ensuite, je vais modifier la largeur du logo. Comme vous pouvez le voir, je suis en train d'en modifier les pourcentages. Je pense que 50 % c'est suffisant. Le seul problème, c'est qu'il se trouve juste au milieu de ce conteneur. Maintenant, je veux qu'il soit placé vers la gauche pour que tout soit aligné. Revenons au contenu , puis alignons-le sur la gauche. De plus, je veux qu'il soit plus centralisé dans ce conteneur de 100 pixels de hauteur. Passons simplement au sous-conteneur dans lequel il se trouve. Cliquez dessus, allez dans Mise en page, puis centrez le contenu. Maintenant, si j'appuie sur la flèche, c'est parti. Vous pouvez voir comment c'est assis. Maintenant, en haut de la page, tout est parfait. Pas d'espaces blancs vides. Un logo de taille parfaite se trouve juste là sur le côté gauche. ne me reste plus qu'à placer mes liens et mes boutons de réseaux sociaux sur le côté droit. Choisissons le conteneur ici sur la droite. Choisissez-le à nouveau dans la structure, allons-y. Nous n'avons pas toujours besoin de le faire , mais comme vous pouvez le constater, lorsque je l'ai fait, cela a éliminé les espaces blancs en haut. Cela garantit simplement qu'il n' y a pas d'espacement supplémentaire dans le back-end n' y a pas d'espacement supplémentaire dont vous ne saviez pas l'existence Cela peut gâcher la vue de vos utilisateurs. Ensuite, je veux ajouter une barre de navigation, c' est-à-dire une barre de navigation dans la colonne de droite Maintenant, la façon dont ces choses fonctionnent normalement sur les sites Web lorsqu' il y a plusieurs pages est qu'elles vous renvoient vers une autre page. Mais comme nous n'avons qu'une seule page, la façon dont ces boutons fonctionneront est qu'ils vous dirigeront vers cette partie du. Vous l'aurez vu ailleurs sur des sites Web d'une seule page. Ce que nous devons faire, c'est ajouter des boutons pour chaque section du site Web que nous voulons que les utilisateurs visitent. Nous allons choisir des guitares, des disques, des concerts et de la vieille école C'est très simple à faire. Passons ici à l'élément « + add ». Et nous voulons un bouton. Déposons simplement notre premier bouton ici. Il s'agit d'une petite boîte bleue. Cliquez ici dessus. Eh bien, tout d'abord, nous voulons que celui-ci parle de guitares. Alors ce que je veux, c'est qu'il n'y ait pas de boîte bleue ou d'espace autour du mot guitares. Passons au style, puis passons à la normale et survolons. Évidemment, pour les boutons, vous avez toujours une version normale telle que les gens la voient Ensuite, lorsque vous passez la souris dessus, la couleur que vous voyez en haut peut souvent changer Ce que je veux faire avec la version normale, c'est supprimer cette couleur bleue. Je vais cliquer sur la couleur, en gros, faire glisser celle-ci vers le bas jusqu'à 0 %. Maintenant, il est écrit «   guitares » à elle seule. Ensuite, l'autre point est juste l'espace qui se trouvait autour, ce dont vous avez besoin avec un bouton de couleur unie ci-dessous pour faire passer ce rembourrage à zéro. Nous y voilà. La seule chose que je veux, qui fonctionne très bien sur les sites Web, c'est que quelque chose de différent se produise lorsqu'un utilisateur le survole Pour le moment, c'est en blanc. Je vais dire que lorsqu'un utilisateur survole le texte, couleur du texte change Choisissons l'une de nos couleurs globales. Choisissons le secondaire. Comme vous pouvez le voir maintenant, ils passent juste en dessous de la boîte grise, et je passe le curseur sur le mot Guitars, il devient doré Ce que je veux faire, c'est simplement dupliquer ce bouton trois fois pour enregistrer des émissions en direct à l'ancienne. Passons donc à la structure. Cliquez avec le bouton droit sur le bouton Dupliquer, Dupliquer, Dupliquer. Maintenant, comme vous pouvez le voir, ils sont tous assis les uns sur les autres. Encore une fois, cela ne fonctionne pas parfaitement. Allons contenir le sous-conteneur dans lequel ils se trouvent. Accédez à la mise en page et changez la direction en ligne horizontale. Maintenant, ils parlent tous de guitares. Les autres problèmes que vous pouvez voir, c'est qu'ils se trouvent tous en haut de la boîte. Ce que je veux faire, c'est descendre ici pour aligner les éléments et m'assurer qu'ils sont alignés au centre. Ensuite, ils étaient assis au milieu de la page. Mais pour trouver un équilibre, je veux que le logo soit à l'extrême gauche. Je veux que ces boutons soient à l'extrême droite. Passons à la justification du contenu entre le début, le centre et la fin. Choisissons. Et vous pouvez voir si je le déplace vers le bas, ils sont tous assis là maintenant. Et ça a l'air parfait. C'est votre écran standard pour une barre de navigation. OK, maintenant revenons en arrière. Changeons le nom de chacun de ces boutons. Le premier, le second devraient être des records. Le troisième est diffusé en direct, le dernier devrait être Odom. Dernière remarque, je pense que chaque bouton est un peu proche du suivant. Retournons au conteneur. Les intervalles et les colonnes sont automatiquement définis sur 20. Si je veux mettre ce zéro, le placer l'un à côté de l'autre, je pense que 30 ou 30, c'est bien. Je pense que cela donne juste un peu plus d'espace entre les deux. Maintenant, je dois dire où se trouve chaque bouton sur la page. Si je clique sur le bouton et que je passe au contenu, comme vous pouvez le voir pour le moment, le lien n' est qu'un hashtag Ce que nous devons faire sur cette page, c'est créer un lien d'ancrage. Comme cela fonctionne, un clic sur ce bouton les amène à une certaine partie de la page pour y ajouter un lien d'ancrage. Venez ici pour ajouter un élément, tapez une ancre. Défilons ensuite jusqu'à la section où vous souhaitez placer ce lien d'ancrage, de sorte que lorsque quelqu'un clique sur une guitare, il soit redirigé vers cette section Ce que nous allons faire, c'est le prendre et glisser pour qu'il se trouve au-dessus du mot Guitars qui est tombé dans cette petite boîte grise Mais ne vous inquiétez pas de apparence, car ce n'est pas vraiment le cas. C'est un code caché qui, sur la flèche, vous le verrez disparaître. Les utilisateurs ne le verront pas. Ce que nous devons faire, c'est lui donner un identifiant. Cela signifie que nous pouvons indiquer au bouton en haut de la page d'amener les utilisateurs à cet identifiant. Écrivons simplement le mot guitares. C'est aussi simple que ça. Revenons ensuite vers le haut. Cliquez sur le bouton Guitars, laissez le hashtag là, écrivez ou collez votre mot Maintenant, enregistrons ceci, prévisualisons la page et vous verrez comment cela fonctionne. Lorsqu'un utilisateur arrive sur notre page, il passe la souris dessus, il obtient la mention « or S'ils cliquent sur celle qu'ils veulent voir, s'il s'agit de guitares, cela suffira Cela les amène à la section guitare. Le seul problème que je vois ici, c' est qu'il s'agit littéralement de les amener à ce mot, guitares. Le problème, c'est que ce texte est centralisé ici. Quand il a emmené les utilisateurs là-bas, il coupe cette image et on ne peut pas voir le visage de la fille. Donc, ce que je veux vraiment faire, c'est dire vous pouvez amener les utilisateurs juste au-dessus cette case afin qu'ils puissent tout voir en une seule fois. Revenons à l'éditeur. Déplaçons l'ancre. Ce que je veux en fait, c'est qu'il soit placé au-dessus de cette boîte. Si j'essaie de le faire glisser là-haut, le problème n'a vraiment nulle part où aller. Laissons-le là une seconde. Ce que je vais faire, c'est créer un autre espace vide au-dessus de ce conteneur. Je vais donc cliquer sur Ajouter un conteneur. Cliquez sur la case plus O et choisissez simplement le single. Faites ce que vous voulez dans ce contenant. Accédez à Avancé, mettez zéro ici et zéro ici. Faites ensuite glisser cette ancre que vous avez déjà configurée dans cette section. Vous pouvez maintenant voir où cela se trouve au-dessus de cette section. Si je dois enregistrer cet aperçu, la page, vous verrez quelle est la différence. Je clique sur les guitares, ça m'y emmène. Cela m'amène au petit espace au-dessus de cette section, afin que je puisse voir toute la section en une seule fois. Parfait. Faisons de même pour les trois autres sections. Revenons à l'éditeur. Comme cette ancre fonctionne parfaitement, nous pouvons simplement venir ici et faire une copie de ce conteneur. Faisons ensuite défiler la page jusqu' à ce point. Cliquez sur le signe plus, puis collez ce conteneur. Il est tombé exactement dans le même contenant que celui que nous avions pour les guitares, sans espace vide autour Passons ensuite au menu Anchor et changeons-le en Records. Je veux m'asseoir au-dessus de Records, veux m'asseoir au-dessus des concerts et je veux m'asseoir au-dessus de Old School. Dupliquons simplement deux fois celui que nous avons ici. Puis faites-les glisser vers le bas pour qu' ils soient placés au-dessus de chacune de ces sections. Encore une fois, comme nous avons défini des marges et un rembourrage de 0 %, y aura donc aucun espace vide entre chaque conteneur Nous avions des records. Allons-y et modifions-le ici. Émissions en direct et assurez-vous que tout cela n'est qu'un seul mot, orthographiez-le correctement. Pareil pour celui de la vieille école ici. Passons à celui-ci et changeons-le en old school, en un seul mot. Ensuite, nous allons revenir en haut de la page, jusqu' à présent, et nous assurer que tous ces boutons sont configurés de la même manière. Dans le premier, nous voulons qu'il soit écrit hashtag old school. Ce hashtag en direct montre ce hashtag records et donc celui-ci est Hashtag Guitars. Sauvegardons le brouillon, prévisualisons les modifications. Vous verrez maintenant que je clique sur l'une de ces guitares, que je vous emmène là-bas, enregistre, que je vous emmène à des concerts, vous emmène là-bas, une vieille école vous y emmène C'est parfait. Et comme vous pouvez le voir ici, ces deux choses, il n'y a pas d'espace vide, pas un seul pixel, pas une seule ligne d' espace blanc entre chacune d'elles. Nous avons configuré le logo, nous avons configuré la barre de navigation. Il ne reste plus qu'à ajouter les icônes des réseaux sociaux. Revenons donc à l'éditeur. OK, pour ajouter des boutons de réseaux sociaux après une barre. Allons jusqu'au point positif pour ajouter un élément, tapez des icônes sociales. C'est ce que nous voulons et nous voulons qu'il vive après la vieille école. Déplaçons légèrement la structure vers le bas. Par défaut, ces trois icônes apparaissent. Facebook, Twitter, Youtube. Ils sont arrivés dans ce style précis. Ce n'est pas à cela que je veux que cela ressemble, car je ne pense pas que cela représente notre site Web. Je veux juste que ce soient des logos blancs. De plus, je n'ai pas de page Twitter ou de page Youtube. J'ai juste Facebook et j'ai juste Instagram en premier. Supprimons celui de Twitter en appuyant sur le X. Idem pour Youtube. Ensuite, ajoutez un élément, créez un logo Word Press, je ne veux pas que le pointeur de la souris survole l'icône Cliquez dessus, puis la bibliothèque d'icônes s' affichera. Et voici les nombreuses options que vous pouvez avoir pour celui-ci. Je suis juste sur Instagram et voilà, cliquez sur Insérer. Maintenant, nous n'avons plus que des boutons pour Facebook et Instagram. Commencez par définir la forme autour de ce qu'elle dit. Arrondi, si vous pouvez le voir là-bas. Mais c'est comme un carré arrondi. Je veux juste que ce soit un cercle droit. Passons à la forme et choisissons bien mieux le cercle. Mon seul autre problème ici est qu'ils sont trop gros en fait. Passons au style, puis à la taille et jouons avec la barre de déplacement ici. 18 ans, je crois. Je pense que c'est assez important pour être honnête. Le rembourrage, c'est juste le rembourrage l'extérieur de l'icône Revenons maintenant au contenu, puis cliquons sur Facebook. Pour ce qui est de la couleur, eh bien, je ne veux pas que ce soit la couleur officielle. Je veux que ce soit une couleur personnalisée. Je peux donc choisir la couleur primaire et la couleur secondaire. Couleur primaire. Eh bien, assurons-nous que c'est blanc alors. Ma couleur secondaire, je veux que ce soit notre texte noir. Ça ressemble à ça. Pareil pour Instagram. Cliquez sur la couleur Instagram, couleur primaire personnalisée blanche. Couleur secondaire : noir. Il ne nous reste plus qu' à taper le lien pour Instagram. Je vais simplement coller mon URL. L'autre chose que nous voulons faire, c'est de cliquer sur Options des liens, puis de nous assurer nouvelle fenêtre est choisie, car que l'option Ouvrir une nouvelle fenêtre est choisie, car cela ouvrira une fenêtre distincte pour celle-ci. Cela signifie que les internautes ne quittent pas vraiment votre site Web, ils consultent deux pages distinctes. Les deux sont liés à votre entreprise. Ensuite, Facebook qui s' assure qu'il s'ouvre dans une nouvelle fenêtre et c'est tout. Maintenant, enregistrez le brouillon et prévisualisez-le. Nous y voilà. L'entête fonctionne parfaitement. Nous avons le logo de l'entreprise, le Navvar avec tous les liens d'ancrage et nous avons des liens vers nos deux pages de réseaux sociaux La version de bureau de votre site Web est désormais entièrement terminée. Vous avez votre en-tête. Tu as ton héros. Vous avez votre section d'introduction avec les images coulissantes. Ensuite, vous avez les deux versions différentes de la section À propos avec deux versions différentes d'enregistrements de texte animés, émissions en direct, de Old School. Vous avez vos trois témoignages des trois plus grands musiciens du monde. Et puis vous avez votre pied de page avec la carte et les informations permettant aux gens vous trouver ou de vous contacter Tout semble maintenant parfait. La version de bureau de votre site Web est complète et elle est superbe. Il ne nous reste plus qu'à le faire fonctionner sur tablette et mobile. 14. Réactif : tablette: Vous avez maintenant un site Web qui semble parfait et fonctionne parfaitement sur ordinateur de bureau. Cependant, nous devons voir comment il va s' afficher sur les tablettes et les appareils mobiles. C'est très facile de modifier Elementor, montez ici dans la barre supérieure. Et vous pouvez choisir entre un éditeur de bureau, une tablette ou un éditeur mobile. Il est très important de le faire dans cet ordre. Commencez par l'ordinateur de bureau, puis passez à la tablette, puis au mobile. mobile hérite des modifications apportées sur la tablette, et la tablette hérite de celles apportées sur l'ordinateur Vous devez toujours le faire dans cet ordre, sinon cela cassera votre site Web. Maintenant, nous l'avons parfait sur ordinateur de bureau. Jetons un coup d'œil à la tablette. En ce qui concerne l'éditeur de tableaux, vous verrez que tout est toujours là dans la même position, mais que tout ne s'aligne pas correctement. Si on fait défiler la page, ce héros a l'air bien. C'est juste cette barre de navigation, les icônes ici et le logo là-bas sont trop près du bord Puis, lorsque nous faisons défiler la page jusqu' à cette section, encore une fois, pas assez de rembourrage sur les bords de cette section il n'y a pas assez de rembourrage sur les bords de cette section. L' affichage est donc un peu étrange avec le texte il n'y a pas assez de rembourrage sur les bords de cette section. L' affichage est donc un peu étrange avec le texte si bas et l' image y étant insérée Celui-ci a l'air plutôt beau. Encore une fois, il faut juste un peu plus de rembourrage. De toute évidence, ces choses que vous pouvez voir, les ancres, ne sont pas vraiment là Celui-ci ne fonctionne pas vraiment. Encore une fois, avec l'alignement, il serait peut-être préférable que le chiffre soit au-dessus du mot guitares sur cet écran Eh bien, ils sont en fait très proches. Je pense simplement que les chiffres sont trop élevés. C'est probablement le seul changement dont nous avons besoin sur ce point. Mais je pense que cela fonctionne bien avec les doubles colonnes. Les témoignages fonctionnent sous forme de trois colonnes car il s'agit d'une courte quantité de texte Il suffit de travailler sur le rembourrage. Et pareil, le rembourrage. Il n'y a pas beaucoup de grands changements à apporter, mais je vais simplement vous montrer un bon moyen de le faire, un moyen très rapide de le faire. Allons au sommet. Le principal problème que nous avons ici est juste le rembourrage de chaque côté de ce conteneur, la barre de navigation, l'en-tête Cliquons sur les points ici et modifions le conteneur. Tout ce que je veux voir ici , c'est du rembourrage. Passons à Avancé, et passons au rembourrage Ici, le rembourrage est réglé à zéro pour le haut, la droite, le bas et la gauche Ce que je veux, c'est une quantité égale de rembourrage à gauche et à droite La taille en pixels que je choisis ici doit être utilisée chaque section ci-dessous pour garantir la cohérence. Tout d'abord, dissocions les valeurs. Je vais choisir 30 pixels à gauche et à droite. Vous pouvez voir que lorsque je clique sur la flèche, il y a suffisamment d'espace entre les deux. Donnez-lui juste un peu plus d'espace cette section , elle a l'air bien. Je pense que le logo est un peu trop petit. Cliquons sur le logo. Venez ici pour modifier l'image, passez au style. Augmentons-en simplement la taille. Le pourcentage, montons le à peut-être 75 %. Vous voyez à quoi ça ressemble ? Peut-être un peu trop gros, peut-être. Je pense que c'est un bon équilibre entre barre de navigation du logo et les boutons des réseaux sociaux Cool, cette section sur les héros qui fonctionne pour moi maintenant. Il remplit toujours la page entière car nous avons sélectionné le conteneur de héros principal pour qu'il soit à une hauteur verticale de 100 %. Comme vous pouvez le constater, cette section va directement du haut vers le bas. OK, nous avons un petit problème ici en termes d'alignement. Le texte va jusqu' en bas, puis il y a un grand espace vide en bas. Tout d'abord, jetons un coup d'œil au rembourrage. Cliquez à nouveau sur les points pour modifier le conteneur. Accédez à Avancé, dissociez les valeurs, et passons à 30, à droite, 30 à gauche Encore une fois, ça a l'air bien. Cependant, rien de tout cela ne correspond parfaitement, la bande de loups, qui ne convient pas vraiment, elle passe au-dessus de l'image et, de toute évidence, nous avons un grand espace de rembourrage sur le bord ici Ce que je veux essayer ici , c'est de changer la taille de chacune des colonnes internes comme nous l'avions configurée auparavant. Cela fonctionne bien, peut-être 20 % à gauche et 80 % à droite. Essayons un 50 ou un 50. Choisissons notre premier conteneur interne. Cliquez sur Modifier le conteneur, ou vous pouvez le choisir dans votre structure. Passons ensuite à l'endroit où il est écrit largeur. Il est actuellement défini en pixels, changez-le en pourcentage, puis faites-le glisser jusqu'à 100 %. Même si je veux qu'il occupe seulement 50 % de l'espace, nous avons juste besoin que la largeur de la tablette soit de 100 %. Ensuite passez à l'autre conteneur et faites la même chose, 100 %. Maintenant, c'est un alignement parfait. Il y a juste un petit espace vide supplémentaire en bas. C'est juste à cause du rembourrage que j'ai sur la première colonne Revenons au premier conteneur. Passez en mode Avancé, retirez ce 75. Nous y voilà. Maintenant, cela semble presque parfait, mais c'est encore trop proche de l'image sur le côté. Ajoutons peut-être 25 pixels pour l'ajouter partout. Permettez-moi simplement de le supprimer, de dissocier vos valeurs et de les remplacer par 25 pixels. Cela semble presque parfait. Je pense qu'il ne reste qu' un seul problème. Je ne pense pas que cette petite ligne doive être présente sur tablette. Je pense qu'il serait préférable le texte soit un peu plus haut. Revenons alors à l'éditeur. Je vais sélectionner le diviseur. Sélectionnez-le ici dans Structure, ou cliquez dessus. Accédez à Avancé, puis faites défiler l'écran jusqu'au mot responsive. Ce que nous faisons, c'est le cacher sur une tablette. Si je clique sur celui-ci, vous pouvez le voir disparaître. Nous avons les lignes lumineuses là-bas. Mais si je vais maintenant me cacher, le panneau a disparu. Ça a l'air parfait. OK, passons à la section ci-dessous. Modifions le conteneur. Dissocions les valeurs et mettons 30 à droite. 30 à gauche Ça a l'air génial. Je pense juste qu'il y a peut-être un peu trop d'espace entre cette section supérieure et la section ci-dessous. Je pense que tout va bien en bas, à peu près. Mais je pense que ces sections devraient être un peu plus rapprochées. C'est peut-être parce que sur le contenant supérieur, oui, j'ai une marge de 100 en haut et de 100 en bas. Dissocions-le maintenant, changeons-le simplement à zéro. Revenons à 100 en haut, puis je pense peut-être à 50 en bas. Parfait. Nous y voilà. C'est un bien meilleur affichage. Maintenant, tout tient dans une seule page et tout s'aligne parfaitement. Excellente. OK, passons à la section des guitares. Ça a l'air super. Je pense que pour le garder en deux colonnes, c'est juste le texte ici qui ne fonctionne pas vraiment. Je pense que c'est parce que nous l'avons configuré dans le sens horizontal. Je veux changer cela en direction verticale à l'intérieur de ce conteneur interne. Soulignons ce contenant. En cliquant dessus. Alors passons ici à la direction. Comme vous pouvez le voir, cette icône est remplacée par une tablette. Si vous souhaitez modifier une version en particulier, vous pouvez cliquer dessus sans avoir à cliquer ici en haut. Mais nous travaillons sur des tablettes, alors laissons les choses comme ça. Comme vous pouvez le constater, la direction est horizontale. Je veux le changer en vertical. Il suffit de cliquer dessus . Nous y voilà. Cela convient en fait beaucoup mieux maintenant. Quelques autres problèmes uniquement en termes d'espacement, d'alignement Tout d'abord, passons à cette colonne et ajoutons un peu de rembourrage ici Ce que je veux ici, c'est le même rembourrage que celui que j'ai sur la gauche de tous les éléments supérieurs, 30 pixels Je le ferais sur celui-ci interne, car si je le fais sur le conteneur principal, cela ajoute un espace blanc. Je ne veux pas le faire là-bas, je veux le faire ici. Mais la profondeur reste constante avec toutes les sections situées au-dessus du. Allons à l'intérieur de ce conteneur, celui qui contient le 01. Supprimons simplement le rembourrage qui s'y trouve, puis cliquons sur le texte, le titre, et modifions l'alignement vers la gauche Ça a l'air génial. Je pense que nous devons en modifier la taille. Je pense qu'il doit prendre un peu moins de place. Tout d'abord, achetons ce contenant. Accédez à la mise en page. Choisissons le conteneur global principal, puis passons à Layout. C'est ce que nous avons. Ça y est, nous y avons fixé une hauteur minimale de 75 %, changeons-la à 50. Nous y voilà. C'est un bien meilleur affichage. Cela convient presque parfaitement. Je pense que c'est peut-être un peu plus grand, 60 % oui. Revenons maintenant à ce conteneur et veillons à ce que tout soit centralisé. Ça a l'air génial. Ce n' est pas un grand changement. Cela signifie simplement que nous pouvons toujours voir l'image complète de la fille jouant de la guitare. Tout le texte est là. Je pourrais peut-être même simplement retirer un peu du rembourrage à côté du texte ici Passons à ce conteneur interne, passons à Avancé. Comme vous pouvez le voir, nous l'avons configuré comme un lien de 100 pixels, avons changé en peut-être 50. Nous y voilà. Je pense que cela nous donne juste un peu plus d'espace. En haut, en bas et à droite du texte. Ça a l'air génial. D'accord, cela nous ramènera à cette section. Comme je l'ai déjà dit, je vois juste en grand, le texte numérique au-dessus des images. Passons simplement à la modification du titre au style, à la typographie. Ah oui, on l'a dit à 400. Modifions-le peut-être à la moitié de la taille, 200. Un peu trop petit, 300. Ça a l'air génial. Je veux juste copier ce style et coller dans les numéros restants. Clic droit. Style de copie 03. Style de rémunération 04. Maintenant, voyons à quoi tout cela ressemble. Ça a l'air super. Je pense que cela fonctionne vraiment bien. Nous avons toujours cette section dans la section bordée de blanc, celle-ci sur fond rouge Ensuite, nous abordons les records, les concerts Old School. Ça a l'air génial. Juste une question très rapide sur cette section. Passons à Modifier le conteneur. Rappelez-vous que celui-ci est une grille. Nous avons précédemment défini les espaces entre chacun d'eux à 50 pixels. Cependant, je pense que c'est probablement trop gros pour ce que nous avons sur les tablettes. Modifions-le à 30. Cela nous donne juste un peu plus d'espace entre les deux. Ensuite, allez évidemment dans Avancé ici. Dissociez vos valeurs, 30 % 30 pixels vers la droite, 30 pixels vers la gauche Ça a l'air génial. Et il y en a toujours 100 en haut et 100 en dessous. Ensuite, ici, cliquons à nouveau sur le conteneur Il suffit de remplir l' ensemble du conteneur, 30 pixels supplémentaires Tout ce que j'ai fait là-bas, c'est que j'ai simplement dissocié les valeurs qui les ont ramenées à zéro Pour être honnête, je trouve que c'est plutôt sympa d'avoir la carte jusqu' au bord, mais il faut juste lui donner une petite bordure, peut-être 30 pixels sur tout le pourtour. Lions ça. Oui, je pense que cela donne juste un peu plus d'espace autour de la carte et du texte. Nous y voilà. C'était très rapide et très facile. Ce que nous avons fait ici, c'est que nous avons pris la version de bureau du site Web et nous l'avons modifiée pour qu'elle s'affiche parfaitement sur tablette. Mais il existe une autre méthode intéressante pour vérifier cela. Fermons ça. Sauvegardons notre brouillon, puis prévisualisons les modifications. Ce que je recommande de faire ici, c'est que si vous utilisez Google Chrome, allez dans la section des extensions du Chrome Web Store et trouvez celle-ci. Le simulateur mobile. Il suffit de le taper. Ce devrait être le premier à apparaître. Il s'agit d'un outil de test réactif. Trouve ça. Et puis le bouton ici indiquera installer dans. Cela signifie simplement qu' en haut se trouvent vos extensions. Lorsque vous consultez la page telle qu'elle sera consultée par vos utilisateurs, vous pouvez cliquer sur celle-ci, puis elle vous montrera à quoi elle ressemble sur de nombreux appareils différents. Il s'agit d'un autre outil qui possède une version Pro que vous devez payer. Cependant, si vous souhaitez simplement utiliser la version gratuite, elle est idéale car elle couvre tout un tas de mobiles, au moins quatre ou cinq tablettes, puis quelques autres. Même une Apple Watch Series Six. Celui que nous examinons ici est le mobile. Nous ne l'avons pas encore modifié. Passons à la section tablette et voyons à quoi cela ressemble sur iPad Mini. Eh bien, ça a l'air parfait. Oui, j'adore. Parfait. C'est toujours en train de glisser. L'animation fonctionne. Ah oui, ça a l'air génial. Cela semble absolument parfait. Sur tablette, c'était génial. iPad Mini 4. L'iPad 4 est également parfait. Même chose. L'iPad Pro 11 est également parfait. Même chose. Puis un Galaxy, une Tab Seven. C'est donc une version Android, semble également parfaite là-dessus. C'est génial si vous vous contentez d'aller dans l'éditeur, lui donner un aspect parfait, puis de jouer avec cette extension juste pour voir qu'elle fonctionne parfaitement sur un certain nombre d'appareils différents. Si vous regardez quelque chose comme ça, d'accord, je ne pense pas voir assez fille ici sur cet appareil. Vous voudrez peut-être simplement entrer et jouer avec l'espacement ici, car l'apparence est différente ici par rapport à cet appareil Utilisez simplement l'extension pour jouer un peu et vous assurer qu'elle fonctionne parfaitement sur tous les appareils que vous pouvez consulter ici. 15. Réactif : mobile: Revenons maintenant dans l'éditeur et examinons la version mobile. Cliquez ici. Maintenant, cette barre de navigation semble un peu plus difficile à utiliser. Passons au conteneur. Jouons d'abord avec l'espacement. Maintenant, le rembourrage est toujours réglé sur 30 à gauche et à 30 sur la droite C'est également bon pour les mobiles. Continuons comme ça. Le principal problème que nous avons est simplement que son alignement ne rentrera plus en ligne droite. Je pense que nous devons l'empiler. Disons simplement que nous avons le logo en haut, puis la barre de navigation en dessous, puis les boutons de réseaux sociaux en dessous C'est ce que je vais faire. Tout d'abord, je vais prendre ce conteneur qui contient à la fois la barre de navigation et les boutons des réseaux sociaux, et je vais le dupliquer Ensuite, je vais passer à la deuxième version et je vais supprimer tous les boutons que nous avons placés ici car ils existent déjà ci-dessus. Ensuite, je vais entrer dans ce conteneur et j'aimerais que le contenu soit centré. Nous avons deux, beaucoup de boutons de réseaux sociaux. Ce premier n' apparaîtra que sur mobile. Encore une fois, cliquons sur Modifier le conteneur, Passer à la version avancée, sur Responsive, puis sur Désactivons-le. Masquez-le à la fois sur le bureau et sur la tablette. Cela signifie simplement que lorsque je vais ici, ce n'est pas là. Et si je clique sur cette flèche, cela revient à ce qu'il était auparavant sur tablette. Vous pouvez le voir dans l'éditeur, mais il n'y est pas vraiment. Et vous le verrez lorsque vous prévisualiserez la page. De plus, ces boutons de réseaux sociaux ne devraient plus apparaître sur les mobiles. Cliquez sur les boutons des réseaux sociaux, accédez à Avancé et masquez-vous sur mobile. Maintenant, tout ce que nous avons, c'est le texte qui s'y trouve. De toute évidence, il est difficile de voir où tout se trouve actuellement. Mais allons-y pour modifier ce conteneur. Ensuite, nous avons un espace de 30 pixels entre chacun des boutons. Remettons-le rapidement à zéro. Maintenant, vas-y. Maintenant, nous pouvons tout voir ensemble en même temps. De toute évidence, chacune d'entre elles est trop proche l'une de l'autre. Disons cinq pixels, peut-être dix pixels. Je pense que c'est assez d'espace entre les deux. Et encore une fois, jouez avec cela lorsque vous le regardez sur différents appareils. Vous souhaiterez peut-être réduire légèrement le texte. Passons simplement à la typographie. Réglez-le peut-être sur 14 pixels, c'est un peu plus petit. Faites de même sur tout cela, cela dépendra du contenu que vous avez sur votre site Web. Joue un peu avec ça. Et si vous avez du mal à tout mettre en place, envoyez-moi simplement un message et je vous dirai comment l'empiler sur deux niveaux différents. Ce que je veux également, c'est que tout ce texte soit justifié. En gros, je veux que le contenu s'étende jusqu'aux limites. Comme vous pouvez le voir, à l'ancienne, cela va jusqu'au bout des sentiers battus , mais pas Guitars Je ne peux pas l'aligner à gauche ou à droite. Ce que je vais faire, c'est passer à cette section. Je suis en train de modifier le conteneur. Ensuite, dans justifier le contenu, cliquez sur celui-ci qui indique un espace entre les deux. Ensuite, il étale le tout. Ça a l'air génial. Maintenant, cela semble presque parfait, nous avons le texte ici, puis les deux boutons de réseaux sociaux ci-dessous. C'est juste que ce logo est un peu trop grand. Assez gros. En fait, cliquons sur l'image soit dans structure, soit en cliquant sur l'image. Changeons simplement la taille d'une taille beaucoup plus petite, peut-être 35 %, peut-être un peu plus grande, 40 %, alors eh bien, elle devrait être centralisée. Donc, si je vais au Content Alignment Center, maintenant si je clique sur la flèche, ce qui est de l'empilement, tout fonctionne vraiment très bien J'ai le logo, puis j'ai la barre de navigation, puis j'ai les icônes La seule chose que je pense que je veux faire ici est un peu ces icônes de réseaux sociaux. Espacez-les peut-être un peu, puis je dois juste jouer avec l'espace qui entoure tout ce qui se trouve ici. De toute évidence, le logo est trop près du haut. Il n'y a pas assez d'espace entre la barre de navigation du logo. Icônes des réseaux sociaux. Revenons à l'éditeur. Tout d'abord, jetons un coup d' œil à ces icônes sociales. Passons au style alors. La taille est de 18, changeons-la simplement en 14, puis je veux juste jouer avec l'espacement entre chacune Probablement cet espacement, oui. Je vais juste le traîner un peu. Je vais également le mettre à 14. Voyons à quoi cela ressemble. Oui, c'est beaucoup mieux car ce sont des boutons séparés Vous devez les appuyer séparément. Revenons au contenant. Passons à la section Avancé. Remettons simplement tout le rembourrage à zéro. Maintenant, ce que je veux faire, c'est ajouter un rembourrage supplémentaire sur le dessus. Peut-être 30 au total, pour être honnête. Disons que si c'est en haut, à droite et à gauche, voyons à quoi cela ressemble. Cela fonctionne beaucoup mieux en termes d'espace. Cependant, il y a un espace blanc en haut, nous pouvons travailler dessus. Examinons également l' ensemble du contenant et modifions ces espaces, qui sont désormais définis à zéro. Mettons-en dix et voyons à quoi ça ressemble. Oui, c'est parfait. Nous avons maintenant dix pixels entre le logo et la barre de navigation, et entre les boutons des réseaux sociaux ci-dessous, il y a juste cet espace blanc en haut. Pourquoi cela se produit-il ? Cela se produit parce que nous avons indiqué que la hauteur minimale de cette section était de 100 pixels. Cependant, c'est plus que cela. Maintenant que nous sommes en train de tout empiler, cliquons sur le conteneur principal Accédez à Modifier le conteneur, accédez à Layout, changez-le en 150 pixels. Laissez ensuite le conteneur sous le conteneur du héros. Celui-ci, ici. Modifions-le dans Avancé, 2 100,50 Assurez-vous qu'ils ne sont pas tous liés 150 et ensuite, on passe à -150 pour voir si ça marche. Cela fonctionne. Nous y voilà. Maintenant c'est parfait, n'est-ce pas ? Nous avons maintenant un bel espace vide. En haut, nous voyons le logo, toutes ces barres de navigation et icône du réseau social. Ça a l'air génial. Juste deux autres choses que j'ai remarquées ici. Dans cette vue mobile, le problème n'est-il pas la position de ces deux clients ainsi que la position et la taille du logo qui posent problème en mode tablette ou en mode ordinateur ces deux clients ainsi que la position et la taille du ? Quand je vais sur le mobile, le logo est trop petit et on ne voit pas vraiment les gens. Jouons simplement avec ces deux choses. C'est-à-dire, encore une fois, dans le conteneur principal pour le héros, nous sommes sur le conteneur Passons au style, passons à l'arrière-plan, et nous regardons l'image ici. Maintenant, ce que nous devons faire, c'est nous positionner. Nous avons le choix du centre, du centre, et c'est ce que nous avions. Nous pouvons choisir le centre gauche trop loin vers la gauche, le centre droit trop loin. Ou le meilleur que nous puissions choisir ici est personnalisé. Parce qu'avec cela, nous pouvons jouer avec la position X et la position Y. Jouons avec cette position en X et déplaçons-la un peu. Évidemment, je ne veux pas trop le déplacer de ce côté, j'ai juste besoin qu'il soit ici. Disons que même si c'est -200 moins 150. Désolée, 250. Nous y voilà. Je pense que c'est génial. Vous pouvez donc voir que deux personnes y regardent et qu'elles regardent les dossiers. Alors maintenant, agrandissons un peu le logo. Cliquez donc sur l'icône, cliquez sur Style, et c'est parti. Largeur, nous l'avons réglée à 15 %, peut-être aller jusqu'à 25, 30. Voyons à quoi ça ressemble. Ça a l'air génial. Maintenant, nous pouvons voir qu' il y a des gens regardent les articles dans le magasin. Notre barre de navigation, notre entête fonctionnent parfaitement. Tout est aligné, et nous pouvons voir l'icône principale de l'entreprise. Génial, sauvegardons ce brouillon, puis je passe à l'extension, et me voilà en train de regarder les smartphones Apple. Voici donc l'iPhone 13 Pro. Max est superbe là-bas. Regular Pro a également l'air bien. Tout est en ordre. Je peux tout lire, je peux tout parcourir. Et c'est le remplissage de la page complète pour chacune d'entre elles qui est parfaitement esthétique. Tout petit changement de ce type qui vous assure d'entrer dans l'extension et de l'y enregistrer en premier. Bon, revenons au rédacteur en chef. La section supérieure fonctionne. Voyons ce que nous avons ici maintenant. OK, ce qui s'est passé avec cette section, c'est qu'elle est passée de la direction horizontale à une direction verticale, ce qui est parfait. Je pense que cela fonctionne parfaitement là-bas. Plutôt que d'essayer de mettre les deux choses l'une à côté de l'autre. Le titre Wolfgang Music et le texte se trouvent au-dessus de l'image coulissante La seule chose que je pense vouloir changer, c'est juste un petit espace de ce côté de la boîte, juste pour que le texte s' étende jusqu'au bord. Cliquons sur ce conteneur ici sur Modifier le conteneur. Accédez à Avancé, supprimez cet espace de 25 pixels. Nous y voilà. Ce n'est pas un gros changement, cela signifie simplement que le texte aligné avec l'image ci-dessous. Cela fonctionne parfaitement. Celles ci-dessous, en fait, sont déjà parfaites. C'est fait, ils sont empilés automatiquement de toute façon. Elément ou pouvez lire ce que vous pourriez vouloir faire sur mobile et faire en sorte que cela se produise automatiquement. C'est génial. Aucun travail n'a besoin d'y être fait. Maintenant celui-ci. OK, c'est presque là, mais pas tout à fait. L'empiler à nouveau, comme nous l'avons fait ci-dessus, c'est parfait. Je pense que cela fonctionne vraiment bien. Cependant, l'espacement n'est pas tout à fait correct. Je ne vois pas vraiment l'image ci-dessous. Nous devons régler ce problème. Allons ici. Cliquons sur le conteneur. Accédez à la section Avancé. Ce que nous avons ici, c'est un rembourrage de 30 sur la gauche. Lions-les tous et faisons-en 30. Nous obtenons juste un peu plus d'espace au-dessus du 01 et un peu d'espace en dessous du texte. Ensuite, la seule chose que je veux faire, c'est sur ce sous-conteneur, supprimer l'espacement ici sur la droite Cliquez sur cette case Avancé, supprimez ces 50 pixels trop facilement. Cela fonctionne très bien. La seule chose qui ne fonctionne pas, évidemment, c'est que je ne peux pas voir cette image. Il est là et c'est le fond du contenant. Si cela fonctionnait auparavant, c'est parce que nous avions deux colonnes disposées horizontalement. Par conséquent, la hauteur de l'une des colonnes était également représentée par la hauteur de la colonne suivante. Cela ne se produit pas maintenant parce qu'ils sont empilés. Modifions simplement la hauteur minimale de ce conteneur. Cliquez sur Modifier le conteneur, venez ici pour définir la hauteur minimale. Et jouons simplement avec les pixels ici. Peut-être 400 pixels, peut-être 500, peut-être quelque part au milieu, 450. Nous y voilà. J'en suis content. Cela signifie simplement que les gens, lorsqu'ils accèdent à la section guitare, font défiler la page vers le bas, lisent un article à ce sujet, puis ils voient la fille jouer de la guitare. Parfait. Maintenant ceux-ci, 02 enregistrent des émissions en direct 0304. Écoutez, je pense qu'en termes d'espacement de tous ces éléments, ils fonctionnent parfaitement Il y a juste un problème évident ici parce que maintenant que je veux que ça passe de 02 à des records, alors je veux voir l'image 03 ici. C'est très facile à réparer. Ce que nous avons ici, c'est le conteneur principal global qui contient le texte pour les émissions en direct et l'image avec le 03, ils sont organisés de manière régulière. Cela signifie ligne horizontale et cela signifie de gauche à droite. Tout ce que je vais faire, c'est passer à cette flèche sur le côté qui indique que la colonne est inversée. Et il suffit de cliquer dessus. Ensuite, nous y voilà. C'est trop facile. Le 03 a atteint le sommet. Cependant, l'ancre qui est toujours au-dessus n' a pas bougé parce que nous ne l'avons pas placée au-dessus du texte. Si quelqu'un clique sur l' ancre alors qu'il est sur son mobile, il sera toujours dirigé vers ce 03. Voyons à quoi ressemble cette section pour l'instant. Cela passe bien de 02 à des records. 03 émissions en direct parfaites. Comme je le disais, cela n'a fait que changer l'affichage ou la mise en page de ce conteneur sur mobile. Si je passe aux tablettes, c'est toujours comme avant. Opposé, opposé. Ordinateur de bureau, comme c'était le cas auparavant. Opposé, opposé. Vous remarquerez qu'en revenant vérifier celles-ci, il n'y a eu aucun changement. Comme je l'ai dit, ils sont inhérents à cet ordre. Ce qui est fait sur le bureau est pris en compte dans le tableau. Ce qui se fait sur table est transféré sur mobile. Aucune modification que j'apporte sur mon mobile devrait avoir d'effet sur quoi que ce soit sur une table ou un ordinateur de bureau. Assurez-vous de les vérifier car quelque chose pourrait s'approcher de vous. Revenons au mobile. C'est presque terminé ici. Voyons ce que nous avons. Soyons honnêtes, les témoignages sont parfaits Je n'ai même pas envie de jouer avec ça. Et puis cette section en bas est presque parfaite, juste à côté de l'espace noir qui l'entoure. C'est littéralement juste l'espacement, le rembourrage sur ce côté et l'espacement au-dessus Passons à ce conteneur, cliquez sur Modifier le conteneur, puis sur Advance. Vous savez comment faire tout cela. Maintenant enlevez le rembourrage de gauche, puis en haut, disons 50 C'était 65 ans et ils sont tous liés. J'ai fait quelques erreurs là-bas. Dissocions-les et disons simplement qu'il y en avait 50 en haut. Nous y voilà. Si vous regardez cela, cela fonctionne parfaitement. Et c'était assez facile à corriger car nous l'avions configuré de manière à ce qu' il soit facile à modifier sur ordinateur de bureau, puis nous avons pu le modifier sur tablette rapidement et rapidement. Apportez ensuite les modifications que nous avons apportées, notre tablette apparaît également de la même manière sur mobile. Encore une fois, il suffit de l'enregistrer, puis de prévisualiser les modifications. Voyons juste à quoi cela ressemble. Nous en sommes déjà à une version mobile. Section supérieure, parfaite. Faites défiler la page vers le bas, Wolfgang. Musique Même s'il s' agit d'un téléphone plus épais, il l'étale. Les mots Wolfgang. Et Music That a l'air super. Parfait. Parfait. Parfait. 10 guitares visualisent parfaitement l'image Je peux la voir, je peux voir les disques de Guitar 02. J'ai toujours l'animation ici aussi. Cela est passé de l' ordinateur de bureau, de la tablette aux émissions en direct sur mobile, témoignages de la vieille école, puis au pied de page Vous disposez désormais d'un site Web complet. Quelque chose qui réunit chaque section et qui fonctionne parfaitement sur ordinateur de bureau, tablette et mobile. Faisons-le vivre. 16. Préparez votre site à être mis en ligne: D'accord, nous sommes maintenant prêts à mettre en ligne votre site Web. Comme vous pouvez le voir en haut, il est toujours indiqué qu'il s'agit d'un brouillon destiné à changer cela. Il suffit de venir ici à droite et de cliquer sur Publier. Lorsque c'est terminé, venez ici sur la gauche, cliquez sur le E et choisissez Exit to Wordpress. Rien à voir sur cette page, il suffit de cliquer sur le logo Wordpress. Cela vous ramènera aux pages configurées. La page que nous utilisons, Wolfgang Music que vous verrez maintenant est en ligne Il n'y a plus de brouillon à la fin. Nous devons cependant apporter un petit changement. Ce sera la page d'accueil. Cliquez sur Quick Edit, The Slug, c'est le nom qui vient après l'URL Lorsque vous avez plusieurs pages sur votre site, il s'agit d'une URL. Blog de contact. C'est la maison. Nous voulons juste y vivre. Allons faire le point. Ensuite, nous devons dire que ce sera la page d'accueil. Cliquez ici sur l'apparence et la personnalisation. Choisissez ensuite les paramètres de la page d'accueil. Vous avez le choix entre vos derniers articles ou une page statique. Nous voulons une page statique qui sera Wolfgang Music Cela changera automatiquement. Tout est maintenant configuré et il s'agit votre page d'accueil que tout le monde visitera lorsqu'il viendra sur votre site. Une fois que tout est fait, cliquez sur Publier, et vous êtes prêt à commencer. 17. Configuration de nom de domaine: La version test de votre site Web est donc entièrement configurée. Maintenant, si vous souhaitez le faire en direct, je vais vous montrer comment le faire dans Word of phi et comment modifier le nom de domaine. Revenez donc dans Word of Phi, assurez-vous d'être sur des sites. Puis cliquez sur le petit crayon. Je clique ici pour effectuer une mise à niveau. Comme vous n'avez qu'un seul site, assurez-vous de choisir cette option. Comme nous l'avons créé un site Web très petit, vous aurez besoin de la petite option ici. Choisissez chaque mois, chaque année, ce que vous souhaitez faire. Ensuite, choisissez de mettre à jour. Ensuite, lorsque vous avez ajouté les détails de la carte de crédit, c'est tout. Votre site Web est maintenant en ligne. Et c'est en utilisant l'URL qui a été configurée lorsque nous avons configuré notre inquiétude si je ne peux pas vous satisfaire de cela, laissez-le ainsi. Toutefois, si vous souhaitez le modifier, accédez à l'hébergement et aux domaines. Et ici, vous pouvez ajouter un nouveau domaine, mais celui-ci doit être acheté ailleurs. Et cela peut devenir un peu complexe, un peu déroutant de la mise en place. Quoi qu'il en soit, si j' ai un grand soutien. Cliquez donc sur cette icône. Ils peuvent avoir des informations sur ce dont vous avez besoin ici. Si ce n'est pas le cas, envoyez-leur simplement un message et ils vous en parleront. Quoi qu'il en soit, si vous souhaitez utiliser cette URL ou votre propre nom de domaine personnel, c'est tout. Vous disposez désormais d'un site Web en direct. Cliquez donc sur celui-ci. Vous verrez votre site Web complet en direct et vous pourrez le montrer à tout le monde dans le monde. 18. Merci: Merci d'avoir pris le temps de regarder l'intégralité de ce cours. Si vous avez suivi toutes les leçons, vous avez maintenant un site Web magnifique et vous savez quoi, je veux voir ce site Web, vous pouvez le télécharger ici dans la section projet ci-dessous. Si vous l'insérez , je vous ferai mes commentaires complets dès que possible. Si vous avez des questions au sujet de l'une de ces leçons, postez-les dans la section de discussion également ci-dessous. Lorsque vous aurez terminé le cours, ce serait formidable si vous pouviez me laisser un avis. Accédez à la section d'évaluation et cliquez sur Réviser. C'est génial. Comme vous pouvez me dire ce que vous avez vraiment aimé dans le cours, mais aussi ce qui peut être amélioré. Et cela m'aidera à modifier n'importe quelle partie du cours qui, selon moi, sera meilleure pour mes prochains clients. Et assurez-vous de cliquer sur mon nom ci-dessous pour voir mon profil complet de partage de compétences. Ici, vous verrez toutes les autres classes de site Web que je dirige. Nous en avons un sur la création d'un portfolio, utilisant également Elementor, et un autre sur ce qu' il faut faire avec les images, comment les télécharger et tirer le meilleur parti de votre site Web Tu peux aller les regarder toutes et t'assurer de me suivre. Vous pouvez donc voir dès que je téléchargerai de nouvelles leçons et vous pourrez en apprendre un peu plus Génial Passe une bonne journée.