Créer des sites Web modernes dans l'éditeur X

1. Bande-annonce du cours: [MUSIQUE] Je m'appelle Jeremy, un designer de marque de Sydney, en Australie. Dans la classe d'aujourd'hui, je vais vous montrer comment créer des sites Web dans Editor X. Je vais vous montrer les bases de la plateforme sur la façon de créer des sites Web vraiment sympas que vous soyez propriétaire d' une agence, freelance, ou quelqu'un qui souhaite passer à la conception Web. Editor X est un excellent outil de création Web qui vous permet créer des sites Web comme vous le souhaitez, les personnaliser comme vous le souhaitez sans même connaître le code. C'est un outil sans code, et c'est un outil vraiment génial créer des expériences incroyables sur le Web. Nous parlerons un peu des grilles et flexbox dans la mise en page des outils dans Editor X, et nous allons créer des sites Web sympas. [NOISE] Maintenant, pour le projet de classe, il suffit de créer un site Web basé sur un client réel ou un projet conceptuel. C'est peut-être pour une entreprise technologique, pour le café local, quel qu'il soit. Il suffit de créer un site Web simple, de mettre en pratique tous les trucs et astuces et d'agir à ce sujet. Inscrivez-vous au cours aujourd'hui et je vous verrai là-dedans, et créons ensemble des sites Web incroyables [MUSIQUE]. 2. Qu'est-ce que l'éditeur de l'éditeur X + fonctionnalités: [MUSIC] Qu'est-ce que Editor X et quelles sont ses fonctionnalités ? Editor X est un outil de création Web sans code qui vous permet créer des sites Web en faisant simplement glisser et déposer des éléments sur une page. Vous avez beaucoup de fonctionnalités. Vous pouvez également personnaliser le CSS si vous le souhaitez. Mais dans l'ensemble, c'est un outil facile pour créer des sites Web, et ils ont beaucoup de choses différentes. Mais certains des avantages et des inconvénients de mon point de vue personnel, c'est que les avantages sont, vous avez de beaux modèles modifiables. Vous avez des gabarits et des cadres métalliques à construire. Ils ont tout un tas dans ce magasin et vous pouvez les utiliser gratuitement, et ils sont très faciles à modifier, à ajouter vos logos, à ajouter vos couleurs, typographie, tout cela très facilement. Je pense que c'est l'un des principaux pros. La deuxième est qu'ils ont une académie remplie de tutoriels, donc ils sont faciles à suivre. Ils le décomposent en quelques tutoriels de 2 à 5 minutes, et c'est une belle académie. Ils décomposent tous leurs outils, donc si jamais vous êtes coincé et avez besoin d'aide, vous pouvez en fait sauter sur l' académie et apprendre quelque chose sur le processus de création du Web. Le numéro trois, comme je l'ai déjà mentionné, c'est glisser-déposer, donc je peux simplement faire glisser des éléments, des textes , des sections et des mises en page et tout un tas de choses et de compositions sur la page. Très facile et je peux simplement cliquer et le déplacer et j'aime cette flexibilité avec elle. Enfin, vous avez également obtenu le marché des applications, qui inclut l'intégration, afin que vous puissiez intégrer différentes choses. Vous pouvez installer un magasin, ou s'il s'agit d'un formulaire spécifique dont vous avez besoin ou d'un processeur de paiement, vous pouvez le mettre sur votre site Web et tout cela fait partie intégrante de l'éditeur X. ou s'il s'agit d'un formulaire spécifique dont vous avez besoin ou d'un processeur de paiement, vous pouvez le mettre sur votre site Web et tout cela fait partie intégrante de l'éditeur X. Les inconvénients auxquels je pense , c'est qu'il y a un peu de courbe d'apprentissage parce que ce n'est pas comme des semaines normales. éditeur X est différent, c'est plus pour les créateurs, les designers, les freelances et les agences. Il y a donc un peu de courbe d'apprentissage pour s'y habituer et construire le site Web. C'est l'un des inconvénients. Mais le deuxième inconvénient est qu'il comporte certaines limites. Il n'a pas de fonctionnalités folles en termes d'animations folles, vous pouvez faire des animations de base, ce qui est bien. Mais je pense qu'il manque d'autres choses aussi. Mais dans l'ensemble, il dispose des outils de base dont vous avez besoin. Mais ce sont les avantages et les inconvénients. Vous pouvez voir que je suis juste sur un site Web, si vous allez aux fonctionnalités/design, vous pouvez voir ici que vous avez l'essentiel qui est les points d'arrêt personnalisés. Vous pouvez travailler du bureau jusqu'à l' iPad et au téléphone, donc je pense que c'est vraiment mignon. Vous disposez également d'une grille CSS, ce qui vous permet de créer des grilles qui s'ajustent en fonction du minimum max ou du contenu. Donc, si vous voulez des colonnes, deux colonnes, trois colonnes, quatre lignes, quoi qu'il en soit, vous pouvez l'adapter et il sera réactif. Vous avez également le répéteur, donc si vous avez un blog ou que vous avez certains éléments de portfolio de contenu qui doivent être répétés, il le fait automatiquement pour vous et il fonctionne directement dans le CMS. Vous disposez également de l'outil de mise en page, ce qui vous permet de créer des mises en page flexibles qui sont essentiellement des boîtes réactives. Vous pouvez personnaliser des cadres de fil vierges et les déplacer et ils se déplaceront pour vous lorsque vous les redimensionnez vers le haut ou vers le bas. Vous avez également une station d'accueil. Vous pouvez ancrer des images, des éléments, des icônes ou du texte, quel que soit le contenu des conteneurs parents ou des différentes zones que vous concevez. Nous avons également des calques, donc comme Photoshop, il est toujours propre d'avoir des calques pour que vous puissiez gérer cela. Vous avez également une échelle de texte, donc l'échelle du texte vous permet de définir la taille minimale et la taille maximale, le site Web soit mis à l'échelle ou sur mobile, il va s'adapter aux tailles que vous avez définies. Ce sont les principales caractéristiques. Vous en avez également d'autres comme le maître, les pages, menus personnalisés, la pile, tous ces trucs. Vous pouvez le vérifier vous-même, mais je voulais juste mentionner ces principales caractéristiques. Maintenant, les autres caractéristiques principales matière d' interactions et d'effets, afin que vous puissiez le vérifier également sur le site Web, c'est qu'ils ont des interactions de survol. Vous pouvez également créer des états de survol. Lorsque vous placez votre souris sur un élément, elle va faire quelque chose, quelle que soit votre configuration. Je pense que c'est vraiment essentiel en matière de conception Web. Vous avez aussi du mouvement, vous avez une rotation, et c'est assez simple, mais c'est le cas. Vous avez de l'opacité, donc vous pouvez faire des masques. Vous pouvez également effectuer des séquences temporelles, donc si vous le définissez sur un certain objectif à un certain point de déclenchement. Vous avez également une opacité, changement de couleur et vous avez également des mouvements qui vous permettent de déplacer du texte. Ce sont les principales caractéristiques d' interaction. Ils ont un positionnement collant aussi bien que vous pouvez le voir, vous pouvez créer ces effets de défilement cool et beaucoup d'autres choses. sont les principales fonctionnalités lorsqu'il s'agit d'Editor X, vous pouvez donc voir qu'il est très, très buste, polyvalent et c'est génial si vous êtes un concepteur indépendant qui crée des sites Web pour vos clients. 3. Utiliser le tableau de bord: [MUSIQUE] Maintenant, je veux vous montrer le back-end de l'éditeur X lorsque vous commencez à vous connecter à votre compte et ce que vous pouvez faire. C'est le tableau de bord de votre compte pour que vous puissiez voir que j'ai d'autres sites Web ici. Maintenant, ce qui est génial avec cela, c'est que vous pouvez créer des dossiers, sorte que dans le coin supérieur droit, vous pouvez voir que je peux créer un nouveau dossier. Je veux peut-être appeler ça Clients 2022. Je peux créer cela et ensuite ce que je peux c'est faire glisser différents sites là-dedans et peut-être que je veux faire glisser ce côté, puis je peux cliquer avec le bouton droit de la souris sur et peut-être que je veux faire glisser ce côté, puis je peux cliquer avec le bouton droit de la souris sur la flèche et vous pouvez dire Déplacer vers et je peux cliquer dessus et cliquer sur déplacer ici. Il est très structuré en termes de facilité de le faire et de planifier votre contenu si vous avez un tas de clients différents. Vous avez également le coin supérieur droit, vous avez les paramètres de compte, le domaine, l'e-mail de votre entreprise, bons d'achat, des abonnements, des méthodes de paiement, tout ce qui se trouve dans le coin, c'est très facile à utiliser. En haut à gauche, vous avez votre tableau de bord Partenaire. Si vous cliquez également sur Mon site, vous pouvez sélectionner vos sites ici. Vous avez également les ressources qui vous emmènent à l'Academy x, fonctionnalités de conception d' inspiration que je vous ai déjà montrées. Ensuite, vous avez de l'aide, pour que vous puissiez cliquer sur Aide et vous accéderez aux questions fréquentes ou aux problèmes que vous rencontrez. Si vous souhaitez modifier les détails et les paramètres plus fins du site Web, comme le renommer, vous pouvez placer votre souris dessus et cliquer sur Sélectionner le site et vous diriger vers votre autre tableau de bord principal pour cela. site Web spécifique. Vous pouvez voir ici si j'ai besoin de connecter mon domaine ou de comparer des plans, je peux tout faire ici. Je peux aller à droite et cliquer sur les actions du site, je peux cliquer sur Renommer le site donc si je veux cliquer pour le renommer, je peux le renommer et cliquer sur « Enregistrer » et il va le mettre à jour vraiment simplement. Vous pouvez également obtenir des commentaires, afficher un site en direct, transférer le site à quelqu'un d'autre s'il s'agit d'un membre de l'équipe ou du client, vous pouvez inviter des personnes si vous avez des collaborateurs. Vous pouvez également déplacer l'attribution de doublons d'approbation ou y créer un nouveau site. Il vous donne également des analyses très intéressantes pour que vous puissiez voir les rapports Si vous cliquez sur Voir tous les rapports, cela vous montrera cela. Je peux voir combien de visiteurs j'ai. Ils vous donnent également quelques instructions pour vous guider dans la création de votre site, alors publiez-le, connectez-le à un domaine et vous trouverez sur Google et cela vous aidera à vous connecter à Google Analytics. Vous pouvez également personnaliser votre tableau de bord Si je clique sur le bouton gauche, vous pouvez voir que je peux ajouter des factures, ajouter des campagnes par e-mail, tâches à venir, etc., afin que vous puissiez gérer l'ensemble du projet un site Web client dans ce tableau de bord. Vous pouvez faire défiler vers le bas et vous obtiendrez également des suggestions ici et d'autres choses que vous pouvez ajouter au site Web. Dans le coin supérieur, vous pouvez voir votre boîte de réception ou messages, notifications et nouvelles versions. Ainsi, tout ce qui est nouveau publié par Editor X , vous pouvez le voir en haut. Ensuite, sur la gauche, vous avez toutes ces autres options comme les contacts, les communications, les automatisations, le marketing, référencement, les rapports, les finances, etc., et vous pouvez tout gérer depuis le back-end. Si vous souhaitez modifier le site Web, il suffit de cliquer sur Modifier le site et il vous amènera au concepteur et à l'espace de travail. Ce que nous allons faire, c'est que nous allons créer un nouveau site, il vous demandera quelle plateforme vous voulez cliquer sur Editor X et une fois que cela se produira , il vous demandera quelques instructions sur le type de site Web, est un magasin, un design, un événement, etc. Pour cela, je vais simplement cliquer sur Business et je vais vous donner quelques suggestions sur certains modèles ici. Vous pouvez donc voir ici que nous avons quelques modèles. Je peux cliquer en bas Voir tous les modèles si je veux et je vous en montrerai quelques-uns pour que vous puissiez voir qu'ils en ont d'autres ici. Je fais simplement défiler, que vous n'ayez pas à créer à partir de zéro, vous pouvez littéralement créer en utilisant [NOISE] ça. Vous pouvez également cliquer sur Wireframes en haut à droite, vous voyez ce petit bouton. Si je clique dessus, il me montrera juste filaire sans aucune image ni quoi que ce soit. Il vous montre les os nus et vous pouvez également créer à partir de cela. Pour ce que nous voulons faire, je vais simplement cliquer sur Blank Canvas car nous allons construire à partir de zéro. 4. Les bases de l'interface de l'éditeur X: [MUSIQUE] Nous sommes maintenant dans l'espace de travail principal de l'éditeur X. Maintenant, je vais vous montrer les bases et je vais commencer par certaines parties de celui-ci, puis nous allons éventuellement construire le site Web. Mais abordons d'abord quelques éléments de base. La première chose que je veux que vous remarquiez , c'est en haut du milieu. Vous pouvez voir que vous avez vos points d'arrêt. Je peux également cliquer ici et je peux voir mes pages. Je peux cliquer sur Gérer les pages, je peux créer d'autres pages. Je vais vous montrer comment faire ça dans une minute. Mais nous voulons payer pour utiliser les points d'arrêt. Ce premier point d'arrêt que vous pouvez voir, nous pouvons éditer à partir de 1 000 pixels et plus. Vous pouvez voir que la largeur du site est actuellement de 1 935. Le bouton central du point d'arrêt est un point d'arrêt plus bas, et il s'agit essentiellement d' un iPad ou d'une tablette. Si je clique sur le bas, vous pouvez voir qu'il a une vue mobile, et vous pouvez également le voir. Si je clique sur le bureau, je l'ai là. Je peux cliquer sur les boutons et ajouter des points d'arrêt personnalisés. Ce que je veux faire, c'est ajouter 1 440, et je vais cliquer sur « Terminé ». Maintenant, nous pouvons voir que nous avons un point d'arrêt personnalisé de 1440 et plus. Nous pouvons cliquer dessus comme vous pouvez le voir. Nous pouvons aussi venir ici. Il va s'adapter à votre point d'arrêt. Vous voyez la zone grise, elle s'accrochera à ce point d'arrêt, ce qui est vraiment cool. Je l'ai traîné. Nous irons au prochain point d'arrêt. Ensuite, si je traîne, j' irai au point d'arrêt suivant sur la ligne pointillée grise. Magnifique. Lorsque vous concevez une taille ou une résolution spécifiques pour votre client, cela facilitera la conception. Pour ce site Web, nous allons travailler dans 1 440, car c'est ainsi que j'ai conçu le site Web actuel sur lequel nous allons travailler. Alors c'est 1 930 ou 20, en gros si vous l'arrondissez. Maintenant, sur le côté droit, vous avez également l'inspecteur. Si je clique sur cette petite icône de mixage ici, vous pouvez voir qu'elle est « Inspecteur », cela vous permettra de concevoir certains éléments de la page, sorte que vous ajoutiez vos couleurs, par exemple l'arrière-plan. Mais vous voulez rendre ce fond noir pour l'instant, ou quoi que ce soit, vert ou rose, peu importe, ça n'a pas vraiment d'importance, je peux le rendre noir pour l'instant. Mais il vous permet essentiellement de personnaliser vos éléments. Si je clique sur l'en-tête, vous pouvez voir que je peux ajuster le dimensionnement, je peux régler le positionnement. Je peux cliquer sur cette petite icône avec un petit pinceau, et je peux également y ajouter le remplissage de l'arrière-plan. Je peux le changer là-bas. Peut-être que l'en-tête, nous voulons un vert ou un bleu, quel qu'il soit. Ensuite, nous avons une interaction avec le vol stationnaire. La balle de doublure est une interaction stationnaire, je peux cliquer sur « Ajouter une interaction », puis je peux aller de l'avant et commencer à jouer avec ça. Mais nous le ferons un peu plus tard. C'est l'inspecteur. Vous avez également vos commentaires juste à côté de cette icône. Si vous avez une équipe, vous pouvez ajouter des commentaires ici, dire : « Hé, concevez la page ». Si vous avez une équipe, elle verra ce commentaire partout où vous l'avez ajouté, ce qui est vraiment génial. Nous avons également reçu des notifications ici, donc si vous recevez des visiteurs du site, etc. En haut à droite, vous avez votre bouton Publier, vous avez des invitations. Si vous souhaitez inviter votre équipe à collaborer, vous pouvez le faire. Il vous suffit de taper l'e-mail et de l'ajouter à cela. Super facile à faire et super si vous travaillez dans une agence. Vous avez également Précédent, donc si je clique dessus, je peux consulter mon site Web en direct à tout moment. Je peux évidemment réduire cela aussi, et je peux l'adapter une fois de plus à ces points d'arrêt, et je peux voir à quoi cela ressemble en direct. De toute évidence, il n'y a pas de contenu là-dedans en ce moment, mais c'est vraiment pratique. Ensuite, il suffit de revenir en arrière et cliquer sur « Modifier le site » pour y revenir. Si vous allez à gauche, nous avons nos barres de menu ici, puis nous avons notre Ajouter des éléments. Je vais faire un clic gauche là-dessus. Cliquez sur « Elements ». C'est ici que nous pouvons ajouter notre contenu. La viande du site web. Nous pouvons ajouter des boutons, des titres, des paragraphes, des conteneurs , un modèle, des répéteurs, des menus, des formes, des lignes, etc. Nous pouvons également économiser des ressources dans cet espace. Nous pouvons déjà utiliser des compositions préfabriquées. Je peux littéralement cliquer dessus et l'ajouter directement sur le site Web sans avoir à faire grand-chose. Si je clique dessus avec le bouton gauche, vous pouvez voir un boom, cela ajoute cela exactement comme ça dans notre site Web. Je vais y retourner. Vous avez des outils de mise en page. Une fois de plus, j'ai déjà mentionné que nous avions des grilles, je peux donc ajouter une grille. Je peux ajouter la mise en page. Il y a des sections prédéfinies ici. Nous avons également le répéteur, ainsi qu'une boîte à lumière. C'est idéal pour une image de galerie ou une fenêtre contextuelle. Vous avez des boutons préfabriqués personnalisés. J'aime bien ça. Je n'ai pas à en faire un, je clique simplement dessus ou je le fais glisser, je le dépose là-dedans, et je peux ouvrir l'inspecteur, commencer à jouer, et changer les couleurs et les ombres, et tous ces trucs cool. Nous avons Textes, Menu, Recherche. Nous avons des barres de menu et des barres de navigation, tout un tas de choses différentes ici. C'est bon d'y aller à votre époque et de voir ce que vous avez. Vous avez également des formulaires de contact. Ensuite, vous avez d'autres choses comme, vous pouvez ajouter un blog à votre site. Vous pouvez ajouter une boutique, ajouter une réservation, des événements, un abonnement, un gestionnaire de contenu, qui est CMS et un site multilingue, qui est en version bêta. Vous avez tout un tas d'éléments à utiliser. La deuxième partie est la couche. Si je clique sur cette icône ici pour obtenir notre calque, je n'ai qu'une seule page, c' est-à-dire la page d'accueil. Vous pouvez voir en vert, c'est l'un de nos composants, qui est essentiellement un symbole réutilisable, et vous pouvez voir qu'il sera en vert. Je peux basculer la petite flèche, et elle va me montrer tous les éléments à l'intérieur de cette barre de navigation. Ensuite, vous allez dans Sections. Je peux voir les couches. Nous pouvons aller à la section ici, et cetera. Comment utiliser des calques assez simple. La prochaine chose, c'est les maîtres de site. Nous pouvons créer des sections maîtres de plusieurs pages. Par exemple, l'en-tête et le pied de page, il s'agit d'un maître, qui signifie que sur chaque page, il aura la même chose. Il aura le pied de page et le maître sur chaque page. Vous pouvez le définir par défaut. Vous pouvez réellement le dupliquer et créer autre chose. Si vous voulez modifier quelque chose, je modifierais l'en-tête en utilisant ceci car c'est pourquoi il est vert, puis il va l' appliquer à chaque page. La prochaine partie est Pages. Je peux cliquer sur « Ajouter une nouvelle page ». Vous pouvez voir qu'il s'agit d'une page dynamique, d'une conception unique, générer un nombre illimité de pages ou simplement d'une page blanche standard, vous pouvez donc choisir ce que vous voulez. Si je viens d'ajouter une page, je peux cliquer dessus, et maintenant aller sur Page, et je peux appeler cette équipe, etc. Maintenant, nous avons différentes pages, je peux cliquer dessus, et vous pouvez le voir. La seule ou la petite icône d'accueil, c'est votre page d'accueil. Souvenez-vous simplement de cela. Si vous souhaitez modifier les paramètres, vous pouvez cliquer sur les trois points. Vous avez les paramètres, le référencement. Vous pouvez renommer la couche, la dupliquer et modifier la page ou ajouter un commentaire à votre équipe. Nous avons également des styles de site. Vous voulez cliquer sur le A avec une petite gouttelette. Nous avons la typographie. Vous pouvez réellement contrôler les polices. Vous avez H1 à H6, puis vous avez un Paragraphe 1 à Paragraphe 3, vous pouvez donc personnaliser tous ces éléments. Si vous cliquez dessus, vous pouvez voir ce qu'il va vous montrer. Vous pouvez modifier la taille, l'audace, la mettre en italique ou ajouter une couleur, ce que vous voulez faire, vraiment. Si je clique sur « Appliquer », cela va s'appliquer . Vous avez également des couleurs. Je vais cliquer dessus avec le bouton gauche . Nous pouvons modifier nos couleurs globales ici, pour que notre palette de couleurs puisse changer cela. Vous avez également des transitions de page. Si vous souhaitez simplement définir des transitions générales pour les pages lorsque vous changez de page, vous pouvez le définir sur une sortie, ce qui est cool. Voici le marché des applications. Vous cliquez sur les petits carrés, en regardant par ici, et je dirais probablement ne pas installer trop parce que vous ne voulez pas vous enliser sur votre site Web, mais vous pouvez jouer et regarder les plus populaires. Si vous cliquez sur « Popular This Mois », vous pouvez voir ce qui est populaire ou les choix d'équipe. Vous pouvez voir les choix d'équipe ici. Des tas de plugins que vous pouvez utiliser pour votre site Web. Enfin, vous avez le gestionnaire de contenu sur la gauche ici, vous pouvez le voir. Si vous avez un blog un grand portefeuille ou un grand site Web de marketing, vous allez l'utiliser. Pour notre conception aujourd'hui, nous allons rester simples, donc nous n'aurons pas besoin d'utiliser le CMS. Enfin, nous avons quelques options de menu en haut. Nous avons notre diapositive, donc je peux cliquer dessus. Vous avez vos options ici. Vous pouvez inviter, dupliquer, transférer un site, passer à une version payante. Vous disposez d'un tableau de bord, de rôles et d'autorisations pour votre équipe Si vous souhaitez modifier cela, vous pouvez également gérer votre site ici. Vous pouvez également cliquer sur « Afficher ». Vous pouvez effectuer un zoom avant et un zoom arrière. J'utilise généralement les raccourcis, qui se trouvent ici, Control plus et moins. Vous avez également des outils ici. Si vous voulez cliquer sur Media Manager, ce qui est une autre chose clé dont vous avez besoin. Je vais cliquer dessus , et c' est ici que nous pouvons télécharger nos actifs. Je vais télécharger mes images ici. Si je clique sur « Télécharger », télécharger à partir de l'ordinateur ou que je veux faire glisser certaines choses, je peux maintenant passer ici et commencer à faire glisser mes images, donc je vais faire glisser ça. Je vais cliquer sur « Fichiers de site ». Vous avez également Unsplash. Vous pouvez voir que vous pouvez obtenir images gratuites directement à l'intérieur , donc tout est intégré. Mes fichiers de diapositives vont apparaître ici. Je vais faire glisser et déposer certaines des images que je vais utiliser. Il est très facile d'ajouter des images. Vous pouvez également les rogner , les modifier et les ajuster si nécessaire. Si je clique dessus, je peux cliquer sur « Améliorer » si je veux ajuster les choses, je peux améliorer automatiquement. Je peux régler la luminosité, etc. C'est comme Photoshop. Vous avez des filtres, vous pouvez découper des objets, ajouter des filtres si vous le souhaitez, c'est très utile. Je vais revenir en arrière et simplement cliquer dessus. Ensuite, vous avez également le mode Dev. Si vous souhaitez ajouter du code personnalisé à votre site Web, peut-être travaillez-vous sur un site Web créatif, vous pouvez cliquer sur « Mode Dev » et vous pouvez connecter des API, ajouter du code CSS personnalisé, et faites tout ça. 5. Outils de mise en page flexible: [MUSIQUE] Je veux vous montrer les principaux outils de mise en page de l'éditeur X qui, à mon avis, sont très utiles et faciles à utiliser. Je viens d'avoir une autre page ici, juste une page de base. J'ai quelques sections, comme vous pouvez le voir ici. Maintenant, je vais accéder à mes éléments Plus et vous voulez passer à Outils de mise en page. Maintenant, vous avez cinq outils ici. Vous avez des boîtes vides, également connues sous le nom de conteneurs. Vous avez des grilles, vous avez l'outil de mise en page, vous avez le répéteur et vous avez également des boîtes lumineuses. Maintenant, je vais vous montrer les bases de la façon de les utiliser. Une boîte vide n'est qu' une boîte moyenne. Vous pouvez voir que vous avez quelques variantes ici. Par exemple, je peux simplement glisser-déposer cette zone grise dans cette section. Vous pouvez voir ici, si je vais dans le coin supérieur gauche, vous pouvez le voir comme conteneur. Si je vais dans mes couches, cela appelle aussi ça un conteneur. Une boîte est connue sous le nom de conteneur qui devrait simplement appeler un conteneur à mon avis, mais pour l'instant c'est ce qu'elle s'appelle. Vous pouvez également l'étirer. Si je clique sur la petite icône en haut à droite, le conteneur remplira toute la taille de la section réelle ici, comme vous pouvez le voir. Je peux aller de l'avant et changer la couleur d'arrière-plan si je le veux. Je peux faire ce que je veux là-dedans. Dans ce conteneur, je peux commencer à ajouter des objets, des images, des icônes, quoi qu'il soit. Par exemple, si je veux ajouter une forme, je peux y déposer une forme. Si je vais maintenant dans mes calques, vous pouvez voir que dans ce conteneur se trouve une forme de base. Je peux déplacer cette forme , je peux la mettre à l'échelle. Je peux en changer la couleur. Je peux faire ce que je veux avec ça, comme vous pouvez le voir là-bas. Maintenant, je peux aller de l'avant et supprimer la forme. Je peux également supprimer le conteneur. Maintenant, il est toujours bon de construire des conteneurs parce que vous ne voulez pas enrichir de design. Si vous concevez ou modifiez quelque chose en arrière-plan, vous pouvez modifier le conteneur au lieu de modifier les cases individuelles de l'objet. C'est ainsi que vous utilisez le conteneur de base. Maintenant, l'autre est une grille. grilles sont vraiment utiles si vous souhaitez avoir une section coupée en différentes cases, colonnes ou lignes, c'est à vous de choisir. Par exemple, je peux utiliser cette grille deux par deux. Je peux l'étirer, je peux agrandir comme vous pouvez le voir là-bas. Juste en utilisant ma souris, je peux utiliser les outils d' alignement pour l'aligner au centre direct de cette section. Je peux réellement modifier la disposition de la grille. Si je clique avec le bouton gauche en haut, cela indique changer la grille. Je peux faire un par quatre. Je peux faire un quatre par un. Je peux passer en mode avancé et commencer à personnaliser le dimensionnement. Si vous avez ces deux petites lignes, je peux les faire glisser et je peux avoir des tailles différentes, comme vous pouvez le voir là. Je peux aussi augmenter la taille, la hauteur. Je peux cliquer sur le petit bouton Plus, il va ajouter une colonne. Vous avez tellement de contrôle sur ce que vous pouvez faire. Je peux aussi ajouter des espaces, peut-être que je veux un écart de 20 pixels. Vous pouvez voir que cela ajoutera un joli petit espace là. Il vous donnera quelques lignes directrices. Je peux cliquer sur « Terminé », puis nous avons cette grille. Je peux toujours revenir en arrière et changer de mode avancé et supprimer des pièces. Vous cliquez sur le texte et cliquez sur « Supprimer la colonne ». Peut-être que je veux juste une grille à deux comme ça, c'est très bien. Je peux également supprimer l'arrière-plan de la grille bas et cliquer sur « Supprimer la grille ». Je vais supprimer ce conteneur avant. Il est assez facile d'utiliser les grilles. C'est génial si vous avez des pièces de portefeuille. Maintenant, l'outil suivant s'appelle l'outil de mise en page. Vous pouvez voir ici que je suis dans la section et il y a des sections prédéfinies ici. À la mise en page, vous pouvez créer une section plus réactive. Je vais augmenter ça. Je vais cliquer sur le « Layouter » ici, rendre un peu plus large et un peu plus long. Si je clique sur « Options », vous pouvez voir que j'ai une mosaïque. Je peux faire des briques, des rangées, et je peux aussi faire des colonnes et un curseur. Maintenant, ce qui est cool avec cela, c' est que tout réactif et que vous pouvez tout personnaliser. Je peux le sélectionner et je peux le faire plus ou moins. Si je veux prendre plus d'espace, je peux changer cela. Vous pouvez voir si je voulais en faire plusieurs, peut-être que je veux rendre cela un peu plus long, vous pouvez le faire. Ensuite, ce que je peux faire, c'est que je peux simplement faire glisser et déposer des images ici, les faire glisser et ensuite je vais les étirer. Ensuite, je peux changer l'image. Peut-être que nous avons un membre de l'équipe, je peux double-cliquer pour le réajuster si nécessaire, et je peux également abandonner les images ici. Je peux déposer le texte si je le veux. Vous pouvez voir si je passe à la vue mobile, cela le rend réactif. C'est ce qui est cool avec la mise en page. Il le rend réactif et vous obtenez un look et une sensation plus personnalisés avec ces grilles que vous possédez. Je peux ajouter des images. Peut-être voulez-vous ajouter un peu de texte ici ou quelque chose, et changer l' arrière-plan en noir. là que tu y vas. Vous pouvez voir qu'il s'agit de l'outil de mise en page, et une fois de plus, vous pouvez voir qu'il est réactif. De toute évidence, les textes devraient être plus petits, mais c'est l'outil de mise en page. Maintenant, je vais juste aller dans cette autre section ici. Je vais vous montrer le répéteur. Maintenant, le répéteur est vraiment génial si vous avez des objets répétés du même genre, pour un article de blog ou un portfolio, etc. Vous pouvez voir que vous avez tous ces outils vraiment sympas. Je veux faire glisser et déposer celui-ci dedans et il dit remplacer la section, donc il va remplacer cette section. Superbe. Je vais juste m' assurer qu'il est mis à l'échelle. Je vais cliquer dessus. Je vais changer la couleur d'arrière-plan. Nous pouvons le rendre vert si vous voulez. Vous ne voulez pas obtenir la couleur grise. Je peux changer l'image. Si je clique deux fois dessus, je peux sélectionner, par exemple, nous allons sélectionner notre équipe ici. Vous pouvez voir que chaque garçon est pareil. Je vais juste m'assurer que ça reste comme ça. Cool. Maintenant, vous pouvez voir ici le texte, je peux venir ici et m'en souvenir. Vous pouvez voir, pour personnaliser les prises complètes qui existent déjà, cliquez sur « Modifier le texte ». Si je le personnalise, vous pouvez voir qu'il va changer l'effet de tous les textes car il répète essentiellement le même style et le même design sur chaque élément. Si nous l'ajoutons ou moins un élément ou un membre de l'équipe, il apportera ces modifications. Par exemple, je peux obtenir le paragraphe 3 et le rendre vert comme ça. Vous pouvez voir comment il se trouve dans une pile pour qu'elle soit groupée. Je peux double-cliquer et modifier le titre. Je veux peut-être faire comme une rubrique 3, ça va changer ça. Je veux peut-être changer le texte en script. Vous pouvez voir qu'il va changer tous les autres titres. Gardez cela à l'esprit. Un répéteur est vraiment génial lorsque vous l'utilisez correctement. Vous pouvez également changer le conteneur. Je veux que ce soit vert. Le texte ici, je peux également modifier un texte. Celui-là va passer au paragraphe, on y va. C'est super facile, le répéteur est génial. Assurez-vous de l'utiliser. Maintenant, je peux également cliquer sur « Gérer l'article ». Vous pouvez voir que je peux dupliquer un article. Si je clique sur « Dupliquer », il va dupliquer et commencer à ajouter d'autres membres de l'équipe. Peut-être que nous avons une équipe de six personnes, vous pouvez voir qu'elle ne fait que le répéter. Il est très facile de l'ajouter. Je peux cliquer sur « Modifier la disposition de la grille », et vous pouvez voir que je peux également modifier cela. Comme d'habitude, si vous voulez ajouter une grille individuelle là-dedans, je le peux. Utilisez un répéteur, c'est vraiment utile. Maintenant, le dernier s' appelle une visionneuse. Maintenant, ce sont essentiellement des pop-ups. Peut-être que vous voulez qu' un cookie apparaisse ou vous ayez comme une promo ou quoi que ce soit, alors nous pouvons totalement l'avoir. Je vais cliquer dessus, et cela va ajouter cette boîte à lumière de cookies. Je vais cliquer dessus et je peux changer la couleur. Allons-y avec le noir. Vous pouvez dire qu'il s'agit du paragraphe de la politique sur les cookies , c'est vraiment cool. Je peux cliquer sur « Configurer la superposition ». Vous pouvez voir que le fait de cliquer ferme la visionneuse, donc je peux l'activer et l'éteindre. Je vais fermer ça pour l'instant. Je peux également définir un point de déclenchement. Vous pouvez voir sa politique de cookies, afficher automatiquement la visionneuse sur les pages. Je peux dire « Oui ». Je peux montrer sur quelle page il va l'afficher. Il va faire le retard et vous pouvez voir qu'il se trouve dans le bouton X au lieu du bouton Fermer. Vous avez le choix, vous pouvez les personnaliser. C'est notre pop-up là. Vous n'avez que quelques options de style, alors il suffit de remplir la couleur pour l'instant. Je vais cliquer sur « Aperçu » et nous verrons ce qui se passe. Cool. Une fois que je suis satisfait de la visionneuse, je vais cliquer sur « Aperçu ». Redimensionnons la diapositive à la bonne taille et passons à la page Équipe et nous l'avons. Nous avons les cookies pop-up, les deux secondes de lumière en bas et je peux cliquer sur le petit « X ». En gros, c'est ce que nous faisons. Nous l'avons défini sur la page Équipe. Vous pouvez le personnaliser et le définir sur n'importe quelle page de votre choix. C'est super cool d'être utile. Fondamentalement, ce sont les cinq outils que vous pouvez utiliser, les outils de mise en page, ils sont vraiment utiles, vraiment géniaux, et les utiliser dans vos conceptions. 6. Bibliothèque de marque + barre de navigation: [MUSIQUE] Le site que nous allons construire est celui que j'ai construit dans Adobe XD. Il s'agit d'un portefeuille crypto où vous pouvez stocker des actifs, des jetons et des NFT à l'intérieur de votre portefeuille. Je vais rapidement fouetter cette simple page de destination et ensuite vous pourrez y voir la version mobile. Nous allons construire cela, en gardant les choses simples. Nous pouvons faire quelques autres pages, voir combien de temps la classe va de l'avant, mais c'est ce que nous allons créer et nous allons vous montrer comment le faire. Nous sommes dans l'éditeur X. Maintenant, je vais faire un clic gauche sur mon en-tête. La première chose que je veux faire est d'aller à mon inspection sur le côté droit, cliquer sur le pinceau et de changer l'arrière-plan. Mais vous pouvez voir ici, je n'ai pas mes couleurs. Je peux ajouter la couleur C personnalisée, ou je peux aller en haut à gauche et cliquer sur couleurs de mon site de marque et je vais changer mes couleurs principales ici. Pour mes antécédents, je vais aller sur XD et vous pouvez voir que je peux simplement copier les codes HEX que j'ai déjà créés. Vous pouvez le voir ici, cliquez dessus. Collez mon code HEX. On y va. Cliquez sur « Appliquer » et appliquer et cela devrait changer cela juste là. Je vais faire de même pour les gris. Là, nous avons nos couleurs pour l'arrière-plan et le texte , puis nos couleurs d'action, qui sont essentiellement appelées à des actions. Notre fond et nos trucs vont être verts. Pour le texte également, je vais également avoir besoin du vert ici. Certains textes doivent être verts. Superbe. Une fois que nous aurons fait cela et nous pourrons revenir en arrière. Je vais cliquer sur l'en-tête, cliquer sur le motif à droite. Vous pouvez voir maintenant quelles couleurs j'ai réellement ajoutées ici. Découvrez les couleurs de nos thèmes. Je peux aller de l'avant et les déposer. Je vais vraiment utiliser la couleur noire. Je vais faire de même pour le corps. Il en va de même pour le pied de page. On y va. Maintenant, je vais aller dans mon en-tête et double-cliquer sur l'image du logo. Je vais cliquer sur « Changer l'art vectoriel ». Je vais cliquer sur les fichiers de mon site à gauche et je vais sélectionner la conception du logo que j'ai créée. Boom, c'est très rapide. Il se charge juste comme ça. Je vais supprimer ce menu. Je vais aller sur le bouton Plus. Je vais ajouter un menu. Je vais passer au menu et chercher. Maintenant, ce que je veux faire, c'est ajouter un menu simple et nous allons le personnaliser plus tard. Juste cet en-tête ici, basique. Je vais l'apporter. Je vais copier. Assurez-vous de cliquer sur l'en-tête, puis de le coller dans l' en-tête en utilisant Control V. Maintenant, vous pouvez voir que j' ai mes pages ici. Maintenant, je dois également ajouter mon autre page. Si je vais sur les pages, assurez-vous d'ajouter une page. Je vais appeler celui-ci c'est le support, blog d' équipe et le support. Je vais cliquer sur le menu et cliquer sur « Gérer le menu ». Maintenant, vous pouvez le voir, n'importe lequel d'entre eux apparaît, donc j'ai besoin d'ajouter les autres pages. Je vais cliquer sur « Pages du site ». Je vais cliquer sur toutes les pages. Nous vérifions cela et nous cliquons sur « Appliquer ». Ensuite, ils devraient apparaître ici. Ensuite, je vais probablement cliquer sur « Gérer le menu ». Si j'ai besoin de déplacer des choses, vous pouvez les faire glisser et les déposer très facilement comme ça. Je vais aller voir l'inspecteur, passer au texte et changer la couleur en blanc. C'est pourquoi il n'apparaissait pas. Nous pouvons voir que la page sélectionnée sera de cette couleur verte. Je peux probablement changer cela. Si je vais remplir la couleur et le survol, vous pouvez voir qu'il y a ce vert, mais peut-être que je veux le rendre gris ou quoi que ce soit, vous pouvez changer ces choses. Je vais également changer mes polices. Je vais cliquer sur les styles de couleurs du site. Je vais passer à ma typographie. Maintenant, je vais fondamentalement changer. J'ai tous ces styles de personnages ici enregistrés dans notre XD. Maintenant, ce que je vais faire, la police que j' utilise est Space Grotesk. Je vais cliquer sur le petit crayon ici. Cliquez sur la barre de recherche et saisissez Space Grotesk. Ils ont ce qui est vraiment génial. Pour celui-ci, il devrait être audacieux, ce qui est vraiment cool. Ensuite, nous avons également nos paragraphes. Nous avons également obtenu notre H2, qui est de 42 pixels pour le premier H1, ce sera 56. Je vais cliquer sur « Appliquer ». Celui-ci a 40 ans. Maintenant, c'est Space Grotesk. Ce sera audacieux. Cliquez sur « Appliquer ». Ce sera aussi la couleur verte. H3 est 24, couleur verte audacieuse. Cela va nous faire gagner beaucoup de temps plus tard, donc je n'ai pas à le faire manuellement. Il va sauvegarder tous nos titres et nos paragraphes. J'ai aussi des paragraphes Space Grotesk, ça va être 16. Cela devrait être régulier, ce qui est génial. Nous avons le paragraphe 2 qui sera un Space Grotesk 16 blanc et s'appliquera. Nous avons une version noire et une version blanche. Ensuite, nous allons également avoir une version verte. Seize, saisissez Space Grotesk, cliquez sur « Appliquer ». Nous avons maintenant tout notre style de personnage enregistré ici. Si nous devons ajouter manuellement quelque chose comme le texte, par exemple, je vais aller à l'inspecteur, je clique sur le dessin, je clique sur le texte. Vous pouvez voir, évidemment, vous pouvez descendre et choisir la police à partir d'ici. Si je tape Space Grotesk, je peux généralement changer là-dessus. Si je clique sur le thème, il y aura tous nos styles de personnages sauvegardés que je viens de faire auparavant dans la bibliothèque. Maintenant, je peux sélectionner n'importe lequel d'entre eux. Si je vais à la rubrique 3 ou à la rubrique 6, quel que soit le paragraphe 1, cela va le changer en styles, les styles que je l' ai définis comme vous pouvez le voir. Maintenant, si je veux redimensionner, tout ce que je vais faire est de faire glisser la boîte pour que je puisse rendre vraiment large ou la rapprocher. Je vais passer aux éléments. Nous allons passer à Quick Add. Ce que je vais faire, c'est ajouter mon titre. Je vais cliquer et déposer ça comme ça. Super facile. Je vais également ajouter un paragraphe et ajouter un bouton. cool, c'est que nos guides que vous pouvez voir que j'ai allumés, donc tout va s'accrocher là où nous les avons définis. C'est vraiment cool. Je vais simplement étendre cette section. Je vais placer une autre section, faire une vierge. Ce que je peux faire, c'est simplement faire glisser ça vers le bas pour amener la hauteur. Je vais cliquer sur Maj et cliquer sur tous ces éléments. Ce que vous pouvez faire, c'est sélectionner une pile ou un groupe. Si vous l'empilez, il va le placer dans une pile , ce qui le rend réactif lorsque vous l'ajustez. Comme vous pouvez le voir, ce qui est vraiment cool. J'adore que la réactivité soit vraiment cool. Ce texte, je vais le changer, ce sera un H1. On y va. Lorsque vous cliquez à l'intérieur de la pile, il suffit de cliquer à nouveau à l'intérieur. Vous cliquez sur les bons objets. Apportez ça. C'est beau, ça a l'air bien. Je vais faire tomber ça comme ça. Double-cliquez sur le texte. Collez ça comme ça. Double-cliquez ici. Vous pouvez voir que nous avons notre bouton. Je vais concevoir ce bouton. Je vais changer cela. Nous allons aller voir l'inspecteur sur le côté droit et changer la couleur. En fait, les textes doivent être noirs. Ça a l'air bien. Maintenant, bouton. Je veux vraiment changer les coins. Dans l'inspecteur, vous voulez passer à la troisième option, c'est écrit coins. Je peux tout compléter. Au lieu de l'arrondir, je vais le mettre à zéro. Mais si je mets 100 pixels, vous pouvez voir qu'il devient arrondi. Je vais mettre 0 parce que je veux un rectangle plat. Vous pouvez ajouter une ombre qui est cool. Nous pouvons ajouter une ombre comme celle-ci pour le bouton. Une autre façon de le faire consiste simplement à ajouter une bordure. Je vais juste ajouter une forme rectangulaire de base. Je vais en changer la couleur. Un raccourci si je veux le ramener à l'arrière, je peux appuyer sur Ctrl et vers le bas. Elle est géniale. Je vais faire la bordure, la couleur verte. Dans l'inspecteur, je vais cliquer sur le tableau sur la forme. Je vais mettre l'opacité du remplissage à zéro pour cent. Je vais juste utiliser mes touches fléchées ici. Je vais le rendre un peu plus petit. Pour obtenir cet effet, comme vous pouvez voir comment nous avons ce petit aperçu. Il s'agit essentiellement d'un rectangle avec une bordure, comme vous pouvez le voir, ce qui est vraiment cool. Je veux juste m'assurer que j'appuie sur Control G, touche Maj enfoncée et en sélectionnant ces deux-là, nous avons maintenant ce bouton en groupe. Je vais double-cliquer sur le bouton à l'intérieur du groupe et cliquer avec le bouton droit sur le bouton. Maintenant, ce que vous voulez faire, nous voulons en faire un atout. Je vais descendre en bas, c'est écrit Enregistrer en tant qu'actif. Je vais cliquer dessus. Je vais appeler ça le bouton principal. Ensuite, nous pouvons l'ajouter pour dire que c'est tout. Je peux également créer une nouvelle bibliothèque. Je vais simplement cliquer sur « Ajouter ». Maintenant, si je vais sur le bouton Plus et que je clique sur Assets, il devrait être à l'intérieur d'ici. Ce que je vais faire maintenant, c'est que je vais ajouter une image. Je vais faire glisser et déposer une image ici. Je vais cliquer sur « Changer l'image ». Il va charger ma médiathèque. Je vais cliquer sur l' image de mon héros ici et cliquer sur « Mettre à jour ». Superbe. Maintenant, je vais juste faire glisser ça pour qu'il soit gros et qu'il s'enclenche jusqu'à la fin de cette section. Vous pouvez voir qu'il l'a automatiquement mis à l'échelle, ce qui me facilite grandement la vie . Maintenant, je vais ajouter ma deuxième image, qui va aller derrière. Un petit élément d'icône ici. Je vais appuyer sur Control Down et parler de ça. Vous pouvez également cliquer sur ce petit bouton d'étirement dans le coin droit et l' étirer sur toute la largeur de la section réelle. Si je ne le veux pas, je peux simplement l'éteindre et le mettre à l'échelle comme je le veux. Je vais juste l' amener derrière ici. Je peux utiliser mon Maj et j' appuie sur les touches juste pour garder cet effet. Superbe. Je pense que c'est vraiment cool. Cela commence également à ressembler à notre design ici. 7. Créer la page d'accueil: Maintenant, je vais cliquer sur « Ajouter un élément ». Je vais déposer un titre ici, et nous voulons également déposer du texte de paragraphe. Cette section est tout simplement simple, mais pour celle-ci, nous devons modifier l'orientation du texte pour le centrer. Je vais cliquer sur « Modifier le texte » et un autre outil de texte lequel vous avez l'alignement des paragraphes. Vous pouvez régler l'interligne, ainsi que l'espacement des caractères. Vous pouvez effectuer des points et des listes numérotées, et vous devez également modifier la direction du type. Vous avez également l'étiquette d' en-tête, et vous avez tout un tas d'options. Pour celui-ci, il s'agira d'un H2. Je vais juste aller de l'avant et commencer à copier ce texte comme celui-ci. Je dois aligner ce texte au centre, comme ça. Magnifique. Maintenant, le texte du paragraphe doit aller ici. On y va. Excellent. Ajoutez-en deux pour une raison quelconque. Je vais cliquer sur « Modifier le texte » et m'assurer que nous sommes réglés sur le texte blanc. faut parfois cliquer dessus, puis cliquer sur le paragraphe. beau, juste comme ça. Je vais cliquer dessus et ensuite mettre à l'échelle comme ça. Magnifique. Maintenant, je veux ajouter un élément ici, donc nous avons trois petites sections ici. Maintenant, ce que je peux faire pour cela, je peux simplement apporter cette section comme ça. Je vais ajouter une autre section. Magnifique. Maintenant, pour celui-ci, je vais cliquer sur le répéteur et vous pouvez voir qu'ils ont les trois ici. Je vais cliquer dessus et nous pouvons voir que nous avons ces trois petites cartes. Je vais faire glisser ça. Vous pouvez voir qu'ils les appellent des cartes, vous pouvez faire une liste, vous pouvez aussi faire un curseur, vous pouvez faire une cellule de grille, ce qui est plutôt cool. Je vais le garder juste sur les cartes. Il suffit de contrôler Z cela et je veux juste m' assurer que la mise en page est réellement centrée, belle. Maintenant, pour ces cartes, je veux juste que l'arrière-plan ne soit rien. Je vais l'éteindre. Maintenant, je dois ajouter notre titre ici. Je vais mettre le titre. Vous pouvez voir que je l'attache, c' est le répéter, ce qui est vraiment utile. Je vais faire glisser ici et vous verrez la petite boîte bleue dit Attacher comme ça. Je vais juste cliquer sur « Modifier le texte » très rapidement, paragraphe. Magnifique. Nous allons maintenant ajouter nos icônes dans le répéteur. Ce que je vais faire, c'est aller en plus, je vais me mettre en forme. Au lieu de faire une image, nous allons en fait charger un SVG. Je vais cliquer sur Shape. Je vais traîner ici et je vais l'attacher, je vais le réduire un peu. Ensuite, je vais cliquer sur « Changer la forme de base ». J'irai sur les fichiers de mon site, et vous pouvez voir que j' ai les versions PNG, mais nous voulons utiliser les versions SVG. Je vais double-cliquer. Ensuite, je vais simplement cliquer et changer les autres aussi. Juste comme ça. Je vais revenir à mon design. Assurez-vous simplement que tout est correct. Je pense que c'était l' inverse. Je vais ensuite copier et coller mon texte à partir du dessin. Cool. Maintenant, ça a l'air bien. Si nous devons étendre le répéteur, nous pouvons le rendre plus large et plus grand. Comme vous pouvez le constater, nous pouvons l' étendre et le texte va s'ajuster. De toute évidence, les formes sont en train de changer, donc nous devrons probablement réduire cela. N'oubliez pas cela si vous jouez avec la balance ou tout. En passant à la section suivante, je vais cliquer sur « Plus ajouter une nouvelle sanction », et celle-ci sera vide. Maintenant, pour celui-ci, je vais refaire un répéteur. Nous allons passer à Ajout rapide et je vais cliquer sur « Répéteur ». Je vais m' assurer que c'est au milieu quand j' ajoute un titre. Pour celui-là, je dois m'assurer qu' il est centré, que le texte, je centrerai ça et ça devrait être, je pense aussi un H1. C'est un H1 ou H2. Ensuite, nous allons créer cette section ici comme ça. Magnifique. Je vais cliquer sur l'article pour que vous puissiez voir que vous avez les différents articles. Je vais ouvrir mes couches. Je vais renommer ces sections afin de pouvoir accéder à des témoignages, des fonctionnalités, une introduction, il suffit de double-cliquer pour modifier les calques ici. Je sais ce qui se passe. Une fois que j'ai mon répéteur, ce que je vais faire, c'est aller chez l'inspecteur, cliquer sur le dessin, remplir l'arrière-plan et en faire cette belle couleur gris, gris foncé que nous avons là, et ensuite juste cliquez dessus. Maintenant, ce que je vais faire, c'est d'avoir ce look que j'ai ici, c'est que j'ai besoin d'une image, d'un texte, et nous devons également mettre cette petite icône de coche. Je vais commencer et je vais mettre une image ici, la glisser-déposer, et nous devrions voir attacher. C'est ce que nous avons. Ensuite, ce que je vais faire, c'est changer l'image. Je vais sélectionner la personne qui s'y trouve. Ensuite, je vais jouer avec celui-là aussi, changer celle-ci. Et si je voulais arrondir ça ? Je devrais pouvoir aller à l'image dans le clic attendu sur les coins et faisons peut-être 20 pixels, voir ce qui se passe. C'est génial. Faisons 100 pixels. Vous pouvez le voir trier un peu , mais ce que je veux faire, c'est que je veux le faire. On dirait plutôt un cercle. Nous allons le rendre un peu plus grand. Je pense que nous allons passer 500 pixels et cela devrait complètement arrondir cela aussi. Maintenant, je vais ajouter du texte. Je vais apporter l'écriture de texte de paragraphe ici, vais juste m'assurer qu'il est correctement mis à l'échelle. Maintenant, je vais sélectionner Paragraphe 2 lorsque j' ajouterai du texte. Petite zone de texte. Celui-ci, je vais le mettre au paragraphe 3. J'ai enfin défini la taille de l'image. Le texte est ancré à droite. Si vous voyez sur le côté droit le positionnement, je l'ancris en haut, et les marges ici sont de 120 pixels. Si j'ai besoin d'ajuster cela, je peux l'ajuster dans la mesure où l'espacement est correct. Ensuite, j'ai eu ces acheteurs vérifiés, j' ai juste besoin d'une icône pour obtenir le bouton Plus. Ce que nous pouvons faire, c'est cliquer sur « Shape ». De toute évidence, nous pouvons importer nos propres formes, mais je vais simplement changer la forme de base. Vous pouvez filtrer certaines formes. Si je clique dessus, je peux faire de l'art vectoriel. Vous pouvez également faire des catégories. Je vais chercher par icônes. Ensuite, je vais changer de catégorie et tu auras tout un tas d'icônes vraiment sympas. Vous pouvez voir que c'est vraiment incroyable. Je vais juste taper une coche. Voyons ce qui se passe. Cool. Nous avons ça. Je vais double-cliquer dessus, je devrais l'ajouter à la page. Je vais réduire ça. Je vais juste passer à ma couleur de remplissage et la changer par notre couleur verte ici. Je vais faire glisser ça. Je vais maintenir Control Alt juste pour que je le touche, et je vais le réduire. Zoomez un peu. Vous pouvez voir que mes guides le mettent en place. Je vais juste déplacer un peu l'acheteur vérifié vers la droite. Pas trop. Boom, nous l'avons là. Vous pouvez voir ici que celui-ci était une vérification de terrain, mais cela fonctionnera également. Je vais cliquer dessus. Je peux voir si je voulais l'ajuster, mais je pense que je vais le laisser comme ça. Magnifique. Nous allons maintenant passer à notre prochaine section. Mais d'abord, je veux juste ajouter rapidement la frontière. Vous pouvez voir sur cette photo que nous avons une petite frappe légère. Nous avons une taille de bordure d'un, et il est de couleur grise ici. Je vais cliquer sur le « Répéteur ». Je clique sur « Design » et nous voulons cliquer sur « Bordure ». Maintenant, ce que je vais faire, c'est aller à la bordure, cliquer sur le bouton gris et faire le pixel, un pixel. Vous pouvez voir qu'il l'a fait autour de l'ensemble de la boîte de répéteur. Vous pouvez le voir. Mais je veux le faire sur les carrés réels, les cartes. Je vais cliquer sur « Article », puis je vais changer la couleur grise de l'élément et un pixel. Assurez-vous que c'est 100 %. Vous pouvez le voir maintenant. Si je clique sur « Répéteur », je retournerai à Border et je l'éteins, le mettrai à zéro et je le vérifierai. Maintenant, nous avons une limite d'un pixel là-dessus. Super facile à ajouter, jolies bordures. Il fait juste ressortir un peu plus. Magnifique. Ce que je vais faire, c'est que je vais ajouter une autre section. Nous allons rester à blanc. Ce que je peux faire, c'est que je peux simplement copier toute cette section ou copier ce texte. Si je descends ici et que j'appuie sur « Coller », vous pouvez voir qu'il copie toute la section. C'est une façon d' accélérer les choses. Si je veux me débarrasser de cette section, je peux cliquer avec le bouton droit de la souris et cliquer simplement sur « Supprimer », et cela devrait s'en débarrasser. Maintenant, ce que nous allons faire, c'est que nous allons aller à xt ici. Je vais copier et coller mon texte. Ce texte sera un H1, et copiera ce texte. Je vais l'ancrer au sommet. Changez la station d'accueil. On y va. Nous allons maintenant avoir ces quatre icônes. Puis le bouton Télécharger. Pour cela, ce que je vais faire, nous allons sur le bouton Plus et nous allons sélectionner la « mise en page ». Je vais juste mettre des colonnes comme celle-ci. Nous avons quatre colonnes. Apportez ça comme ça. Je vais augmenter cette section. Zoomez un peu. Je vais faire glisser ça vers le bas. Maintenez la touche Contrôle et Alt enfoncée pour l' attacher à la section. Je ne sais pas ce qui est arrivé à ça. Ça devrait être comme ça. Je vais parler de ça. Cool. Je vais cliquer sur « Ajouter un article ». Je dois y ajouter les objets maintenant. Ce que je vais faire, je regarde plus, puis je vais ajouter de la forme, faire glisser et la déposer dans la boîte, et je vais changer de forme de base. Je vais aller dans «  Fichiers du site », puis je vais cliquer sur le SVG que nous avons ici du Chrome. Cliquez sur « Ajouter à la page ». Je vais juste le mettre à l'échelle ici. Juste comme ça. Je vais faire de même pour les autres boîtes. Magnifique. Maintenant, je vais simplement cliquer sur le « Layouter », je vais sur le côté droit. Ensuite, nous allons changer la couleur d'arrière-plan ou simplement la désactiver. Vous pouvez le voir. Je vais juste l'éteindre. Je vais ouvrir mes calques, donc je vais juste assurer que j'ai sélectionné l'élément. Je vais juste traîner. Je vais le laisser sur le dessin. Faites glisser ça aussi. Boom, et on y va. Comme vous pouvez le voir là-bas. C'est à peu près le dimensionnement, il suffit de le fixer, donc les colonnes. Allons à Espacement, passons à Item. Nous pouvons ajuster le rembourrage. Si nous avons besoin d'ajouter plus de rembourrage, vous pouvez taper quelque chose comme ça sur l'article. Je vais coller le bouton ici. Comme vous pouvez le voir, je vais faire défiler vers le bas. Je vais juste m'adapter. Je ne savais pas ce qui est arrivé à ça. Je vais juste ajuster ça très rapidement. Nous avons terminé notre page. Ajoutons maintenant le pied de page. Je vais aller dans COMPOSITIONS passer à NAVIGATION et cliquer sur « Pied de page ». Vous pouvez voir que nous en avons quelques-uns ici. Pour moi, je pense que je veux aller avec celui-là parce que c'est semblable à ce que nous voulons. Je vais cliquer là-dessus. Maintenant, si je zoom arrière un peu, je vais juste m'assurer que le pied de page est en bas, donc je vais double-cliquer, renommer le pied de page et le faire glisser vers le bas. Ce que je peux réellement faire, c'est que je peux définir comme maître et définir comme pied de page, mais ce pied de page est déjà en bas. Je vais cliquer dessus et je vais cliquer sur « Supprimer ». Sélectionnons ce pied de page et essayons de le refaire, Définir comme maître et cliquez sur « Pied de page ». Nous avons dû supprimer l'ancien pied pour en faire un pied de page. Maintenant, vous pouvez voir que nous avons notre pied de page ici, et je vais utiliser le texte ici. Ce sera le paragraphe 2 et ce que je peux faire, c'est simplement entrer, copier, double-cliquer dans l'en-tête J'ai cliqué sur l' art vectoriel du logo. Je vais le coller ici. On y va. Nous avons le logo pop-up. Je vais le déposer dans cette pile. Je vais déplacer le texte comme ça, gardant les choses vraiment simples. Je vais remonter ça. Je vais aller au plus, puis je vais me mettre en contact. Vous voyez qu'ils se sont inscrits, ils ont des formulaires de contact. Ce que je peux vraiment faire, c'est cliquer dessus. Il va déposer cette liste. Je peux l'amener ici. J'ai la clé de pile. Ce que je vais faire, c'est que je vais l' amener dans la pile. Je vais cliquer sur l'inspecteur. Je vais modifier la conception de ce champ. Je vais en faire cette couleur grise, je vais désactiver la bordure du texte. Je vais le rendre blanc. Ça pourrait aussi le rendre vert. Je veux aussi rendre cette police blanche, taille de police du paragraphe 2. Je vais faire comme si vous pouviez changer les couleurs d'entrée. Vous pouvez vraiment modifier tous ces paramètres. Je vais juste apporter une balance qui rentre à l' intérieur de la boîte. C'est là le message du succès. Si je veux le prévisualiser, nous avons reçu notre message de succès. Maintenant, cela apparaîtra une fois que vous aurez cliqué sur le bouton Joindre. Je ne sais pas si vous pouvez ajouter le texte comme je l'ai fait ici. Pour l'instant, nous allons juste laisser ça comme ça. Je vais supprimer le titre du champ de titre, donc nous n'en avons pas besoin et je veux retirer le bouton requis. Ce que vous allez faire, c'est cliquer sur le petit rouage et vous pouvez modifier ces paramètres. Vous pouvez ajouter des règles conditionnelles si vous le souhaitez. Je veux ajouter une règle pour le formulaire Wix, maintenant nous pouvons mettre un message. Je peux l'éteindre. Je peux le transformer en lien vers une URL externe si je le souhaite. Vous pouvez même ajouter un téléchargement, mais vous devez effectuer une mise à niveau pour cela, etc. Vous avez tout un tas de choses différentes ici. De toute façon, passons à la pile ici. Je vais le faire traîner ici. Je vais ajouter les pages. Nous avons téléchargé, ce sera le paragraphe 2. Je vais ajouter quelques marges. Je vais m'assurer que vous sélectionnez le texte, et nous avons 15 pixels. Je vais passer au contrôle C, Control V. Je vais aller dans le panneau de mes calques. Je vais cliquer avec le bouton droit de la souris. Je vais faire un double emploi. Vous pouvez également appuyer sur Control D et ajouter le texte à l'intérieur. Assurez-vous de l'ancrer à gauche et en haut. Encore une fois, 15 pixels. Sélectionnez le calque Control D et vers la gauche. Ensuite, je vais modifier. Nous avons reçu un blog et un support. Ensuite, j'ai cette pile. Je vais appuyer sur Control C, Control V et le coller, puis je vais l' accrocher comme ça. Très bien et je vais juste supprimer les autres. Doux, nous l'avons là. Cela doit être un peu plus comme ça. Je vais changer, laisser ça là-dedans et nous allons avoir Instagram, Facebook et Twitter. Je vais aller sur le bouton Plus sur les éléments. Nous pouvons réellement utiliser les médias sociaux. Je vais descendre pour trouver le bon. Vous voulez aller à l'intégration et aux réseaux sociaux, et vous allez trouver des liens sociaux. Vous pouvez le voir comme ça. Vous pouvez choisir le style que vous voulez. Je vais cliquer sur ce style. Je vais juste le déplacer ici. Nous voulons l'empiler dans cette barre comme ça. Maintenant, je peux définir les liens sociaux. Ce que vous voulez faire, c'est cliquer dessus, cliquez sur Définir les liens sociaux. Je peux ajouter des icônes si je veux. Mais je vais juste supprimer TikTok. Je pense juste qu'il s'agit d' Instagram, de Facebook, de Twitter. Instagram, Facebook, Twitter, c'est très bien. Je vais les supprimer. Je peux aussi cliquer sur le rouage. Vous pouvez modifier ces éléments pour Twitter et je peux cliquer sur le lien ici, puis je peux le mettre sur mon compte Instagram. Maintenant, je suis allé de l'avant et j'ai téléchargé les icônes sociales que je veux. Comme vous pouvez le voir ici. Maintenant, ce que je peux faire, c'est que je peux changer ces icônes. Je vais cliquer sur Ajouter. Je suis allé sur les fichiers de mon site. Je vais les ajouter à la galerie. Je suis allé de l'avant et j'ai ajouté ces icônes. Je peux les supprimer ici. Twitter cliquez sur Terminé, et il devrait ajouter ces icônes et si nécessaire pour modifier la mise en page. Vous pouvez cliquer sur le calque et cliquer à l'horizontale ou à la verticale. Je veux faire une photo pour celle-ci, je peux faire baisser la taille de l'icône ainsi que peut-être 25 espacement. Je pense que 10 pixels devraient être corrects. Je vais simplement garder la tâche facile, et je vais supprimer ce texte et garder les icônes à la place, tout simplement en gardant facilement et si je dois modifier les liens, je peux cliquer sur Liens sociaux et coller le liens à l'intérieur. beau, c'est beau. Je suis plutôt content de ça. Je vais cliquer sur Aperçu. 8. Page de l'équipe de construction: Maintenant, nous allons créer la page pour adolescents que j'ai conçue ici. Vous pouvez voir que je suis dans XD et j'ai créé ces belles images d'avatar de l'équipe. De toute évidence, ces images sont descendues d'Unsplash et j'ai créé un dégradé dans Photoshop. Vous pouvez voir dans Photoshop que j'ai pris les images puis ajouté ce dégradé et une certaine exposition et le filtre noir et blanc sur le dessus pour rendre ces images jolies et éclatantes. Mais nous les fabriquons simplement sur la marque très simplement, et nous avons comme une petite section d'emplois ici, nous allons créer certaines de ces cartes et ensuite aimer aussi les avantages. Je vais vous montrer comment concevoir cela. Allons dans l'éditeur X. Il est la page de l'équipe jusqu'à présent, je viens de créer une nouvelle page et j'ai déjà le texte de la page d'accueil ici. Je vais juste construire à partir de ça. Je vais revenir à mon fichier exe de l'éditeur, donc je peux simplement copier et coller le texte. Je vais le faire tout de suite. Je vais simplement copier et coller le texte ici. C'est pourquoi il est toujours bon de pré-concevoir votre site afin que vous puissiez simplement copier et coller, ce qui le rend super facile. Je vais juste mettre à l'échelle la taille de la section. J'ai juste besoin de s'assurer que c'est ancré. Je vais aller voir mon inspecteur et mettre ça en haut, pas en bas, et ensuite je veux redimensionner le bas comme ça. Super, super cool. Maintenant, pour celui-ci, je vais utiliser à nouveau le répéteur, qui est l'un de mes outils préférés. Nous pouvons utiliser les préfabriqués si nous le voulons. Mais pour cela, nous allons en créer un personnalisé, donc je vais faire glisser et déposer le répéteur là-dedans. Je vais aller à mon outil d'inspecteur et je vais mettre la largeur à 80 %. Je vais faire glisser ça et m' assurer qu'il apparaît, ajouter des lignes à mes textes à gauche, ce qui est vraiment beau. Maintenant, ce que je vais faire, c'est que je dois ajouter mes images. Je dois aller plus ajouter rapidement et ensuite je vais aller à l'image et faire glisser ça là-dedans, je vais mettre à l'échelle, ça va étirer l'image, je vais cliquer sur Changer l'image, puis je vais pour faire glisser mes images là-dedans. Sélectionnez-les, déposez-les là-dedans. Je vais sélectionner mon image principale et je veux juste m' assurer que la première, je vais cliquer sur ce clic mettre à jour, puis elle devrait être mise à jour là. Superbe. Je vais changer cette image, et je veux maintenant étendre le répéteur parce que nous avons besoin d'une sixième année. Allons dans les paramètres. Je vais cliquer sur le répéteur, je vais aller dans mes calques et m'assurer que je clique sur le répéteur ici. Vous pouvez voir qu'il y a des cartes. Ce que je veux faire, c'est cliquer sur Gérer les éléments. Ce que vous pouvez réellement faire, c'est dupliquer. Je peux dupliquer l'article 3, puis je le ferai encore quelques fois, et cela devrait automatiquement créer le même style et le même design comme ça. Maintenant, pour une raison quelconque, je viens de prolonger la hauteur de cela parce qu'il se heurtait au texte T. Je vais juste faire baisser ça. Juste comme ça. Super facile. Superbe. Maintenant, tout ce que je vais faire est de double-cliquer ou cliquer sur changer d'image, puis de sélectionner ces autres images maintenant, et la dernière là, boom, excellent. air super génial. Maintenant, ce que je vais faire, c'est ajouter du texte. Je vais passer au titre, et j'ai besoin de garder le contrôle, et aussi il le fixe à l'intérieur du répéteur. Je veux faire environ 18 pixels à partir du bas. Je pense que ça va marcher. Je vais cliquer sur Modifier le texte, puis je dois faire le texte blanc. Je dois le laisser sur H2 et je vais juste le changer en blanc, comme ça. Je pense que cela fonctionne. Superbe. Maintenant, je vais simplement copier et coller les noms des membres de l'équipe. Maintenant, tout le texte est là. Maintenant, si je le dépose à la vue mobile, nous pouvons voir que tout est là, nous allons juste devoir le réparer plus tard et le changer pour le rendre réactif, mais pour l'instant, c'est plutôt cool. Je vais juste ajuster la taille de ces blocs parce qu'il va être d'environ 450 pixels. Je vais aller voir mon outil d'inspecteur, et je dois aller à la hauteur. Laissez-moi voir ça. Je vais le changer à 450. Nous pouvons donc en avoir une meilleure vision. Maintenant, je vais juste cliquer sur Aperçu très rapide pour changer rapidement la bonne taille que nous avons utilisée, et cool, afin que l' image soit belle, je dois juste m'assurer que le dimensionnement ne fait pas cela. Je vais cliquer sur le répéteur et je veux m'assurer qu'il est en haut et non en bas. Je l'éteins. Je vais juste faire glisser ça vers le bas , le mettre en place, m' assurer de laisser un peu d'espace entre le titre. Je pense que c'est mieux. Cool. Excellent. Le DNS a l'air génial. Je suis content de ça. Maintenant, je vais passer à ma prochaine section. Nous avons des textes ici. Je vais ajouter un titre à nouveau. Je vais déposer ça là-dedans, faire glisser jusqu'à ce que j'ajoute à cette section, et nous devrions en faire le H1. Je pense que ça va marcher. Je vais aussi changer la largeur, j'irai 50 pour cent. On y va. Superbe. Faites-le glisser vers le haut à 50 pixels du haut , envoyez-le, je vais également faire glisser le bas de cette section pour l'agrandir. Superbe. Maintenant, nous avons des boîtes, donc ça va être un répéteur nouveau. Bon répéteur. Outils de mise en page, répéteur, et nous allons simplement faire glisser et déposer celui-ci comme celui-ci, et je vais faire 80 pour cent de largeur. Pour celui-ci, la hauteur est d'environ 300 pixels. Je vais m'assurer de sélectionner l'article, et je vais juste aller avec 300 pixels pour en faire plus un carré, et je vais cliquer sur le design et faire l'arrière-plan la couleur gris foncé que nous avons ici, et voir si nous pouvons y ajouter une frontière. Cool. Nous avons passé la frontière. Nous avons un joli ensemble de bordures que nous avons créé. Maintenant, ce que je vais faire, c'est ajouter du texte. Je vais déposer un titre là-dedans, nous allons également déposer un paragraphe, et nous aurons probablement besoin quelques paragraphes supplémentaires. Je vais cliquer sur Modifier le texte et je vais sélectionner la version blanche. On y va, je vais juste zoomer à nouveau, et je vais juste copier le texte à partir d'ici, je vais le faire glisser vers l'extérieur, celui-ci nous allons passer H2 et le rendre blanc, et nous devons juste mettre à l'échelle le largeur là-bas. Nous ne coupons pas le texte. Nous avons le concepteur visuel, nous avons ce texte ici, et nous allons également en faire le paragraphe vert. Nous allons le faire glisser vers le haut, je vais aussi faire glisser ça un peu sur le côté, à 25 pixels des bords. Maintenant, je vais ajouter un autre paragraphe ici. Je vais juste coller ça, puis nous allons sélectionner le paragraphe blanc. Assurez-vous qu'il s'enclenche en place, beau. Maintenant, nous avons de jolies tiques grises ici pour le salaire. Je pourrais simplement copier ce texte ici comme ça. Maintenant, je ne pensais pas avoir la bonne couleur pour elle. Je vais juste sélectionner la version noire, puis faire cette couleur gris clair. Je vais parler de ça. Superbe. Je vais réduire ça. Ensuite, nous allons ajouter un bouton dans le coin ici, cool. Je vais cliquer sur Modifier le texte, Appliquer maintenant. Nous allons passer au bouton Design pour changer l'arrière-plan à zéro pour cent d'opacité. Nous allons ajouter une bordure. Cette bordure va être, disons juste deux pixels et qu'elle sera verte, belle. Maintenant, je ne veux pas vraiment qu'il soit arrondi, donc je vais éteindre la rondeur et ensuite boom, nous avons presque exactement le même design que celui que nous avons créé ici que vous pouvez le voir. Ce bouton, je peux le déplacer vers la gauche. Le texte doit également être vert. Je vais aller au design, cliquer sur le texte, changer la couleur, cliquer avec le bouton gauche sur la couleur de notre thème. Boom, nous avons notre fond là. Superbe. Maintenant, ce que nous faisons, c'est simplement remplacer le texte des autres par ce que j'ai fait ici , puis nous avons fini pour cette petite section également. Superbe. Passons maintenant à la section suivante. Je vais appuyer à nouveau sur le plus, je vais choisir une section vide. Je vais aller dans mes couches et nommer cette section Avantages. C'est Jobs, et c'est que je vais juste appeler ça des tirs d'équipe. J'aime que les sections soient nommées « soignées, belles ». Maintenant, je vais descendre. Une fois de plus, nous allons changer la couleur comme d'habitude par la couleur noire. Je vais dupliquer ce texte et le mettre dans cette section ici. Assurez-vous d'appuyer sur Control C, puis sur Control V pour copier-coller, cela devrait fonctionner. Laissez-moi le mettre en place, des pixels fixes. Je vais aussi mettre à l'échelle la hauteur. Nous avons un texte ici. Je peux copier ce texte, le coller ici, ça devrait aller. Je voulais juste changer le texte. Je veux juste centrer ces textes comme ça. On y va, beau. Maintenant, celui-ci a un répéteur similaire à celui-ci. Je vais copier ce répéteur. Je vais le coller. est cool, c'est en fait dupliquer tout ça, ce qui rend ça super facile. Pour celui-là, nous n'aurons pas d'antécédents. Je vais faire glisser l'opacité et elle aura juste une bordure de pixel d'un point, comme vous pouvez le voir là. Que va-t-on faire maintenant ? Je vais supprimer le texte principal et m' assurer que vous le faites à partir de la première zone, puis il le supprime de toutes les autres cases parce que c'est un répéteur. Je vais supprimer ça, il a ces icônes, le H3 ou H2, puis le texte du paragraphe. Je peux supprimer cela, je peux aussi supprimer le bouton et je pense que nous sommes prêts à y aller. Pour celui-là, je vais modifier du texte. Je vais aller au H3. C'est un peu audacieux, mais je vais éteindre l'audace. Excellent. Je vais mettre à l' échelle la largeur du conteneur. Je vais faire glisser ça sur le côté, ce qui est cool. Probablement autour de 40 pixels ou 50 pixels. Je vais juste copier et coller ce texte ici. Maintenant, je vais juste voir la taille de ces boîtes. La hauteur est d'environ 210. Je vais changer cela. Cliquez sur l'élément, et je vais passer 210 pixels. Faites glisser le texte, puis je vais tout centrer. Si vous maintenez la touche Maj enfoncée et que vous sélectionnez par eux, je peux simplement appuyer sur Maj et les touches fléchées et je vais le toucher comme ça. Superbe. Je vais réparer les autres boîtes. Je veux juste ajouter mon icône ici. Ce que je peux faire, c'est aller à plus. Je vais cliquer sur Shape. Je vais enfoncer Control Alt, m' assurer qu'il clique et s' accroche comme ça. Je vais cliquer sur Modifier la forme de base. Je suis déjà allé de l'avant et je les ai téléchargés sous forme SVG et de PNG, juste au cas où. Je dois maintenant les ajouter rapidement au manager. Il va être trié par date. Vous pouvez voir qu'il va être téléchargé sous forme de SVG. Ça va vraiment les montrer dans le manager, ils sont magnifiques. Je veux cliquer sur celui-ci. Ensuite, comme je l'ai déjà fait dans XD, tout ce que j'ai à faire est de l' exporter et c' est vraiment facile de le faire. Maintenant, pour rester vraiment simple, je peux simplement maintenir Control Alt et adresse, dupliquer et coller. Il commence à le coller dans toutes les boîtes. Maintenant, c'est à l'intérieur du répéteur. Nous devons également cliquer sur Gérer les éléments. Maintenant, je vais cliquer sur les trois points et les dupliquer comme je l'ai fait la dernière fois. Maintenant, j'ai six boîtes comme ça. Ce que je vais faire maintenant, c'est juste m' assurer que je sélectionne le bon article. Cliquez sur l'art vectoriel. Je pense qu'il y a un double ici. Je vais changer l'art vectoriel. Le prochain est celui de la santé. Alors, c'est fini. Je peux cliquer très rapidement sur Aperçu. Ensuite, nous pouvons voir comment cela ressemble à la page de l'équipe, il y a l'animation de la chose originale. Je pense que nous devrions ajouter un peu d' animations pour que cela soit plus beau. Le bouton a l'effet de survol qui a l'air vraiment génial. Les textes sont allés vers la gauche, mais vous avez ces glacières et je pourrais peut-être y ajouter un truc de survol. Ce que je vais faire, c'est sur Edit. Je vais juste vérifier ces textes, m' assurer qu'ils sont en haut. Vous pouvez voir que j' éteins la station d'accueil et m' assure qu'elle est en haut. Je vais cliquer sur les cartes ici et sur les objets, et voyons si nous pouvons ajouter une interaction survol. Maintenant, ce que je veux faire, c'est faire un effet de croissance. Je vais le faire 0,5 seconde. Facile à entrer et à sortir, c'est magnifique. Vous pouvez voir que c'est à quoi cela ressemble lorsque vous placez votre souris dessus. Je vais cliquer sur Aperçu et voir à quoi il ressemble. Vous pouvez voir si vous placez votre souris dessus et maintenant tous ces éléments auront le petit effet d'animation, je pense que c'est assez soigné. Ça a l'air plutôt cool, j'adore ça. Nous avons un effet de vol stationnaire là. Maintenant, pour celui-ci, je peux cliquer sur le répéteur. J'ai sélectionné le répéteur. Je vais m'assurer de cliquer sur le bon répéteur, puis de cliquer sur l'élément car nous ne pouvons pas ajouter d' animation au répéteur, nous ne pouvons le faire qu' à l'élément réel. Je vais cliquer sur l'objet à Hover. Maintenant, pour celui-ci, nous pouvons ajouter autre chose. Allons-y avec le flotteur. Je ferai la même chose, nous ferons 0,5 seconde. Facilité d'entrée et de sortie. Comme vous pouvez le constater, c'est ce qu'il va faire. Si je clique sur Aperçu, vous pouvez maintenant voir ce qu'il fait. C'est ce qui fait ça, c'est plutôt soigné. Laissez-moi juste régler ça. génial, j'aime bien ça. Ajoute un peu d'effet, cool. Toutes ces interactions, il suffit d'ajouter plus de détails sur le site Web et rendre 10 fois meilleur. Enfin, nous ajouterons une animation à ces éléments. Je vais simplement dans les Calques, je clique sur l'élément, donc il va s'appliquer à tous. Cliquez à nouveau sur l'éclair. Je vais ajouter une interaction survol. Maintenant, nous allons faire autre chose. Essayons de l'avant. Voyons ce que ça fait. Facilité d'entrée et de sortie. Je pense que je vais y aller, essayons un évier. Joue ça et ça tombe, ce n'est pas trop mal. Nous pouvons également faire une rotation. Je pense que nous allons rester avec la rotation. Pour celui-ci, nous le laisserons sur 0,3 seconde. Nous ferons l'entrée et la sortie faciles. Je vais cliquer sur Aperçu. Cliquez sur la vue du bureau, il suffit de le mettre à l'échelle pour qu' il soit à la bonne taille de la conception, puis il fait un peu de rotation. C'est plutôt soigné. J'aime bien ça, vraiment génial. Superbe. C'est ainsi que se déroule la page de l' équipe. Je peux toujours y retourner et y ajouter des petites touches et des finitions, mais je pense que c'est vraiment beau. 9. Le fait de la sorte de la sorte à la lumière: [MUSIQUE] Une fois que vous êtes satisfait de votre site Web, votre page, quelle qu'elle soit, nous voulons aller à l'autre point d'arrêt et commencer à le rendre réactif. Je vais cliquer sur le point d'arrêt de l'iPad pour que nous puissions voir des choses hors de propos. Vous devez régler ça et aussi sur le mobile. Chaque fois que vous modifiez un point d'arrêt supérieur sur la résolution la plus élevée, cela devrait également être modifié sur les points bas. Si vous travaillez sur l'iPad, il doit être mis à jour sur le mobile. Je vais cliquer ici, puis j'en parlerai. Nous voulons simplement nous assurer que tout va bien. Je dois mettre à l'échelle les choses pour qu'elles s'adaptent , alors c'est totalement cool. Si j'y apporte un changement, vous pouvez voir que sur la vue du bureau, il ne devrait pas le remplir. Sur ce point de vue, je vais en fait ajouter un menu de hamburgers. Pour cela, ce que je peux réellement faire, c'est que je peux cacher les calques. Je veux cliquer avec le bouton droit sur le menu et je peux cliquer sur « Ne pas afficher », et cela devrait masquer cela. Si je vais à la vue du bureau, vous pouvez voir qu'il est toujours là. Si vous souhaitez masquer quelque chose, il suffit cliquer avec le bouton droit de la souris sur le calque et de cliquer sur « Ne pas afficher ». Si vous souhaitez l'afficher à nouveau, il suffit de cliquer sur « Afficher » et il devrait s'afficher comme ça. Mais si nous revenons à l'autre point de vue, il ne devrait pas le révéler. Sur un mobile, il ne devrait pas non plus le montrer. Ensuite, ce que nous pouvons faire c'est que j'ai déjà un menu de hamburgers ici et je vais juste changer la couleur en blanc. Vous pouvez le rendre vert si vous le souhaitez. Cela fonctionne. Je vais le redimensionner un peu, donc 40 pixels. Ce que nous pouvons faire avec ce menu de hamburgers, c'est que nous pouvons évidemment l'utiliser. Je vais cliquer sur « Ouvrir le menu ». Quand quelqu'un clique dessus, c'est à quoi ça va ressembler. Il est dans un conteneur. Je peux changer l' arrière-plan donc si je veux faire du vert ou du noir, peu importe ce que c'est. Je pense que je vais juste en faire une couleur verdâtre. C'est notre vert principal. Ensuite, je vais cliquer dessus et le texte, il peut être noir, c'est tout à fait correct. Je peux agrandir le texte si je veux, peut-être 24 pixels. Je pense que c'est très bien. Si je clique simplement hors de cela, vous pouvez le voir, si je clique simplement sur « Aperçu » et si je clique sur le menu des hamburgers, vous pouvez voir comment cela fonctionne. Il est déjà intégré, ce qui le rend très facile à utiliser. Ce que je vais faire ici, c'est que je vais ajuster la taille. Nous avons le texte T. Nous pouvons modifier un texte. On peut laisser tomber la taille, ou ce que je peux faire, c'est faire ressortir ça comme ça. Je vais également vérifier la vue du bureau. Je vais voir que ça ne pose aucun problème là-bas. Nous avons cette image. Celui-là, je peux le faire évoluer. Celui-là, je ne sais pas pourquoi il était là, donc je vais l' apporter là. Je vais aller sur mon agencement. Maintenant, je vais juste changer la hauteur. Comme vous pouvez le voir, je vais y mettre 300 pixels. Superbe. Maintenant, ce texte et ce bas devraient être en dessous. Je vais juste apporter ça. Supprimez ceci. Je vais dessiner la boîte, donc 360 pixels. Je vais faire glisser ça , puis le bouton Télécharger. Il a l'air bien. Maintenant celui-là, je vais simplement élargir le texte, la boîte là. va de même dans le répéteur. Je vais entrer dans les couches. Assurez-vous de sélectionner le texte. Je peux augmenter la taille du répéteur, donc si je veux le faire glisser, il devrait y remédier. Je veux cliquer sur le texte et je peux jouer avec les marges. Allons 250, et vous pouvez voir qu'il ajoute un peu plus d'espace. Superbe. Celle-ci aussi, je vais ajouter quelques pixels sur les marges. Je ne pense pas que ça marche. Cliquez sur le répéteur. Faites-le glisser vers le bord. Je vais ajouter un peu de rembourrage sur le dessus. 50 pixels, ça fonctionne. Ensuite, je vais faire de cela une seule ligne, alors je vais simplement le faire glisser et le faire glisser un peu vers le bas comme environ 28 pixels. Superbe. Ça a l'air beaucoup mieux. Maintenant, nous pouvons voir ici que ce texte est un peu bourré, donc je vais le mettre à l'échelle. Faites-le glisser vers le bas. On y va. Cela a corrigé ça. Il y a un peu trop taille, donc je vais ajuster la taille, marges sur le dessus ou le faire comme 90 pixels. Vous y allez. Superbe. Puis celui-ci, on peut jouer autour de la largeur. Je veux le mettre à 70 %. Je vais juste vérifier la vue du bureau. Superbe. Il n'y a aucun changement. Maintenant, je vais cliquer sur le point d'arrêt mobile pour que nous puissions le voir. Vous pouvez voir le maximum. Si nous augmentons le niveau, il sera 720 puis le plus bas sera 320 comme nous pouvons le constater. Le mobile sera très petit. Maintenant, vous pouvez voir que nous allons devoir encore faire quelques ajustements . Modifions le texte et modifions la taille à 40. [MUSIQUE] Maintenant, une fois que vous avez fait tout cela, tout devrait correspondre à la taille. C'est la vue iPad, puis le PhoneView aussi. Il suffit de régler le dimensionnement. Fondamentalement, il suffit d' aller à la taille, d'ajuster le fluide, puis d'ajuster la largeur pour beaucoup de choses. S'il s'agit d'un répéteur, d'une carte ou d'une disposition, il suffit de modifier la disposition par une disposition verticale. En général, lorsque vous cliquez avec le bouton droit de la souris, ils ont des paramètres , par exemple, les cartes ont un ListView. Mais il s'agit essentiellement de bien adapter le texte et de le rendre beau. Alors, c'est ça. Maintenant, une fois que vous êtes satisfait et que vous pouvez toujours cliquer sur « Aperçu », mais si vous souhaitez publier, il suffit cliquer sur le bouton « Publier ». Il va vous donner un lien Editor X. Vous pouvez voir ici que j'ai déjà défini un lien pour cela et je peux cliquer sur « Afficher le site ». 10. Ajouter des animations: Je vais vous montrer comment ajouter des interactions dans des animations. Ce que vous voulez faire, c'est de sélectionner une section. Je vais sélectionner ma section Héros ici. Comme vous pouvez le constater, il est sélectionné. Je vais aller à droite du Specter, cliquer sur le coup de foudre, et je vais cliquer sur « Ajouter une interaction survol ». Maintenant, ce que je peux faire est d'ajouter une interaction personnalisée, donc je vais cliquer sur ce bouton. Il vous donnera maintenant quelques instructions pour configurer le timing d'interaction, commencer à apporter des modifications de mise en page et de conception. Vous pouvez définir l'état du survol lorsque vous survolez le chargement initial du site Web. Je peux désactiver le timing. Par exemple, si je le déplace peut-être comme ça, et peut-être que nous le déplacons hors de l'écran. Je vais cliquer sur « Terminé ». Maintenant, vous pouvez voir si je retourne à l'Interaction survol, il y a les secondes là. Je peux donc cliquer dessus et je peux changer les secondes. Peut-être voulez-vous qu'il soit 0,6 et que nous voulons faciliter l'entrée et la sortie. C'est très bien. Nous pouvons changer cela. Celle-ci, je vais aussi faire 0,6. Maintenant, vous pouvez voir maintenant si je clique sur « Jouer », l'endroit où je l'ai placé, il va utiliser ce mouvement et le faire baisser. Vous pouvez donc voir qu' ils sont en place très facilement. Je vais cliquer sur « Terminé ». Maintenant, si je clique sur « Aperçu » et que je vais changer de vue, vous pouvez voir comment cela fonctionne. C'est tellement facile. Quand tu planes, c'est ça. Si je retourne à Edit, je ne veux pas que le survol soit sur le texte, je veux qu'il s'agisse d'un état initial, donc ça devrait être là-dessus. Je vais cliquer sur « Terminé ». Magnifique. Je vais maintenant cliquer sur le bouton. Je vais ajouter une interaction personnalisée. Pour le bouton, je vais en faire un état de survol. Je vais faire le fond, on peut le rendre plus sombre. Nous voulons le rendre vert foncé. Ça va être facile. Je vais juste partir sur 0,3 en fait. Je vais cliquer sur « Jouer ». Je vais cliquer sur « Terminé ». Ensuite, je vais cliquer sur « Aperçu » juste pour m'assurer que la vue est correcte. Maintenant, vous pouvez voir comment je survole là-dessus , cela prend effet. Il suffit de faire ces petites interactions, cela fait beaucoup de différence. Cela rend votre site Web beaucoup plus amusant. Vous pouvez également ajouter des éléments. Allons au répéteur. Je vais cliquer sur l'art vectoriel tout seul, et je peux réellement faire une animation juste sur l'art lui-même. Il suffit donc de double-cliquer à l'intérieur, vous assurer que vous êtes dans les calques à l'intérieur de l'objet et de cliquer sur « Animation ». Maintenant, je peux simplement ajouter des animations simples comme celle-ci au lieu de les ajouter à toute la section. Je peux faire flotter, je peux me retourner, tout ce que vous voulez faire. Il y a tellement de choses que vous pouvez faire : faire tourner, révéler, glisser. J'aime bien le glissement, alors je vais cliquer sur « Glide-in ». Je peux cliquer sur « Personnaliser ». Je peux donc changer la direction, la distance, changer cela, la durée, le délai, et n'animer que pour la première fois. Ensuite, je clique sur « Jouer », vous pouvez le voir. Si je veux augmenter la distance, faisons-le comme une durée de 150 pixels, passons 1,7 durée. Ensuite, nous pourrons jouer ça. C'est un peu trop lent. On y va. Nous avons maintenant une animation personnalisée. Lorsque vous le sélectionnez, vous pouvez voir qu'il est bleu, ce qui vous permet de voir qu'il est animé. Nous pouvons maintenant faire de même. Vous pouvez voir qu' il s'agit d'un répéteur, il applique la même animation. Donc, si je me rafraîchis, vous pouvez voir que c'est comme ça que ça passe. Vous pouvez ajouter des animations à des textes, des icônes, à n'importe quel calque, et c'est ainsi que vous ajoutez ces petits effets de survol et animations sympas. 11. Ajouter des applications à partir du marché: [MUSIQUE] Nous allons en haut à gauche et cliquez sur l'icône App Market. Vous pouvez voir qu'il va vous emmener le marché des applications chez vous pour les pages. Vous obtiendrez des recommandations, vous obtiendrez ce qui est tendance maintenant, vous y trouverez des solutions commerciales , des solutions payantes, certaines choses sont gratuites, certaines choses sont également des essais. Vous avez été fabriqué par Wix. Si vous souhaitez ajouter une galerie, vous pouvez ajouter des groupes de forum Wix, des magasins, même des réservations, c' est-à-dire des commentaires supplémentaires, etc. Vous pouvez filtrer par choix d'équipe, les applications les plus récentes, il y a 70 choses différentes que vous pouvez ajouter en fait. Si vous voulez ajouter, allez peut-être chercher des pistes. Nous pouvons voir, nous pouvons ajouter des formulaires ou des fenêtres contextuelles. Ce que je vais faire, c'est que je vais ajouter un chat Wix. Je vais cliquer là-dessus. Je peux voir à quoi ça ressemble un petit chat bot qui arrive. Si quelqu'un arrive sur mon site Web, il peut discuter avec le support client. Je vais voir que c'est un forfait gratuit disponible, ce qui est génial. Je peux regarder les vues, les critiques. Je vais cliquer sur Ajouter au site Wix. Maintenant, je vais simplement déplacer ça, inspecter ça. Nous pouvons maintenant voir que l'application se connecte automatiquement à votre site Web. Je peux cliquer sur les paramètres, il va ouvrir le chat Wix ici. Je peux m'engager là-dedans et changer les choses. Impliquez la capitale visitée A personnalisez-la. Je peux cliquer sur Gérer le chat. Je peux voir les heures de discussion. Vous devrez effectuer une mise à niveau pour cela, mais vous pouvez modifier les heures. Je peux choisir les champs de formulaire, le formulaire en ligne. Vous avez tellement de contrôle sur ce que vous pouvez réellement en faire. Je peux regarder l'écran. C'est à ça que ça ressemble. Ça a l'air plutôt cool. Il utilise mes polices utilisées et déjà définies pour le design. Je vais ajouter le logo là-dedans Vous pouvez voir qu'il ajoute le logo. Je peux changer la couleur des chats et peut-être que je veux la rendre comme la couleur bleue, si légèrement interférant avec le vert. C'est vraiment cool. Textes et icônes, c'est très bien. Je peux activer et désactiver l'icône. Je peux aussi le changer. Je peux mettre le logo si je veux. Je vais y aller ou vous pour cette ronde, je pense que c'est très bien. Je peux également regarder le texte. Envoyez un message en quelques heures pour vous aider. Je peux ajouter l'e-mail remio1 @gmail, c'est plutôt cool. Je peux changer cela. Je peux faire une animation. Vous prenez tout ce contrôle. Encore une fois, si je regarde l'écran, c'est à quoi il ressemblera. Je peux cliquer sur Ouvrir la boîte de réception et elle se connectera à ma boîte de réception intégrée intégrée dans mon site Web. Si je vais dans la boîte de réception, vous pouvez voir à quoi cela ressemblera si quelqu'un envoie un message, j'obtiendrai les messages ici et je pourrai répondre. Hey Dan, je suis là pour aider ou quoi que ce soit et je peux envoyer l'e-mail. Vous pouvez voir, comme ça, que je reçois les coordonnées. Je peux également modifier les paramètres ici. C'est vraiment facile à utiliser et c'est essentiellement comme ça que vous utilisez les applications et c'est vraiment cool. Si je clique sur Aperçu, et si quelqu'un clique dessus, vous pouvez voir à quoi il ressemble. Vous avez besoin d'aide pour une application ou quelque chose, quoi qu'il en soit. Vous avez des petits emojis assez éclairés. C'est un outil très pratique à ajouter lorsque vous ajoutez des applications à votre site Web. [MUSIQUE] 12. SEO de base: Je vais vous montrer comment effectuer un référencement de base sur vos pages de votre site Web. Vous voulez aller dans le coin supérieur gauche, cliquer sur Pages, puis accéder à la page d'accueil. Vous pouvez évidemment modifier chaque page. Je vais juste vous montrer comment faire la page principale pour l'instant. Ce que vous voulez faire, c'est cliquer sur ces trois petits points ici. Vous voulez passer à SEO Basics. Une fois que j'ai cliqué dessus, vous aurez tout un tas d' options à gérer dans le coin supérieur. Je peux accéder à la page Info. Je peux évidemment renommer la page. Je peux appeler ça chez moi si je veux. Il me dira que c'est la page d'accueil. Je peux cliquer sur Paramètres avancés. Je peux également contrôler manuellement la mise en cache. Je peux accéder à Permissions, et pour le moment, il est ouvert à tout le monde, mais il s'agit peut-être d'une page réservée aux membres ou d'une page de connexion, ou peut-être que c'est une page privée. Vous pouvez ensuite le placer sur les détenteurs de mots de passe et définir un mot de passe. Vous pouvez également cliquer uniquement sur les membres. S'il s'agit uniquement des membres ou clients payants, vous pouvez le sélectionner. Je vais revenir en arrière et cliquer sur tout le monde que n'importe qui puisse voir cette page. Je vais maintenant passer à SEO Basics, et cela nous permettra de modifier le titre ainsi les textes des paragraphes en ce qui concerne la méta-description dans Google ou n'importe quel moteur de recherche. Donc, en haut, vous pouvez le voir simplement le spectre domestique. Mais ce que je vais faire, c'est que je vais changer cela. Maintenant, ce que je peux faire, c'est modifier la balise de titre. Au lieu de simplement avoir Home Specter, vous voulez le rendre plus spécifique avec des mots clés. Je vais coller du texte. Specter, un portefeuille Ethereum sûr conçu pour les jetons et les NFT. Maintenant, je peux évidemment changer le texte si je veux le modifier. Ce que nous avons ici, c'est la méta description. Vous pouvez voir qu'il n'y a aucune description ici. Je vais coller des textes là-dedans. Maintenant, vous pouvez le voir apparaître. Sur Google, lorsque quelqu'un recherche Specter , c'est le texte qu'il verra sur le premier résultat. Je peux ensuite cliquer sur Aller à l'URL. Il va s'ouvrir ou afficher un aperçu et évidemment, il suffit de me montrer la page. Ensuite, en bas, vous voulez vous assurer que les moteurs de recherche indexent cette page, afin qu'elle apparaisse les moteurs de recherche indexent cette page, réellement dans Google. Si cette option est désactivée, les robots des moteurs de recherche ne vont pas parcourir les pages et tous les backlinks. Vous pouvez également accéder au partage social. Si quelqu'un partage votre site Web sur Facebook ou Instagram ou sur l' une de ces plateformes, vous obtenez généralement une fenêtre contextuelle qui donne un aperçu du site. Ce que vous voulez faire, c'est télécharger une image. C'est juste un ajout simple ici. Vous pouvez voir qu' au lieu d'avoir quoi que ce soit vide ou simplement aléatoire, la recherche consiste à sélectionner un logo ou quelque chose du site Web, n'importe quelle image, elle va apparaître avec cette image. ici et évidemment, il va copier le titre que j'ai fait dans SEO Basics et la métadescription ici. Vous pouvez voir ici que c'est à quoi ça ressemble à l' aperçu sur les réseaux sociaux. Je peux évidemment ajuster l'image et la déplacer, mais cette image était de 1 080 x 600 pixels, et vous pouvez voir à quoi elle ressemble. Ensuite, vous pouvez faire défiler vers le bas et les paramètres Twitter sont disponibles ici. Twitter est un peu différent comme vous pouvez le voir. Je peux le changer pour qu'il soit petit ou grand. C'est vraiment cool aussi, et je peux y éditer les métadonnées pour Twitter. C'est une autre chose cool aussi. Vous avez un référencement avancé. habitude, je ne joue pas avec ça. Vous pouvez l'appeler balisage de données structurées afin d' ajouter un nouveau balisage. Vous avez des balises Meta Robots. Donc, si vous ne voulez pas que les bots suivent ou indexent quelque chose de ce genre, vous pouvez modifier cela, et vous avez également des balises supplémentaires , mais je laisse généralement cela aux experts SEO. Vous pouvez également embaucher un partenaire SEO avec Wix et il va vous aider. C'est les bases du référencement. Je suivrais chaque page que vous avez conçue et je ferais la même chose, et cela va juste créer de meilleurs résultats pour vous. 13. Widget intégré: [MUSIQUE] Je vais vous montrer comment intégrer un widget sur votre site. Je suis dans Calendly et je vais cliquer sur le rouage et je vais cliquer sur Ajouter au site Web. Calendly est mon système de réservation de calendrier et je l'utilise pour mes clients. Je vais sélectionner l' option intégrer en ligne, et ce que vous allez faire est simplement de cliquer sur Copier le code et il copiera ce code HTML et JavaScript ici, ce qui est très bien. Je peux changer les couleurs, évidemment, mais je vais juste le copier, revenir à Editor x. Maintenant, ce que vous voulez faire est de cliquer sur Ajouter des éléments, et vous voulez passer à Embed and Social. Vous pouvez maintenant voir que vous pouvez incorporer un widget, incorporer un site et intégrer un élément personnalisé. Maintenant, ce que je veux faire est de cliquer sur Incorporer le widget, il va mettre une boîte ici. Maintenant, je vais juste ouvrir la boîte. Je vais cliquer sur le menu cliquez sur Entrer le code et je vais cliquer sur Control V pour le coller. Maintenant, je veux cliquer sur Mettre à jour. Ensuite, vous pouvez voir que nous avons déjà notre système Calendly intégré à cet endroit. Vous pouvez voir qu'il est intégré là. Je peux aller de l'avant et cliquer sur Aperçu. Je vais juste changer mon bureau à la bonne taille ici. Vous pouvez voir, je peux faire défiler et il y a une petite barre de défilement. Je vais devoir ajuster les marges de cette section. Ensuite, je peux cliquer dessus et je peux réserver un Calendly comme ça. Super facile à faire et vraiment facile. Si j'ai un mobile, on verra à quoi ça ressemble sur mobile. vois que c'est assez réactif. Évidemment, il y a la barre de défilement, donc je devrais probablement l'allonger. Revenons à modifier le site. Je vais juste passer à la vue du bureau. Je vais cliquer sur la section. Assurez-vous que je sélectionne la section ici. Ensuite, je vais juste ajuster la hauteur. Nous allons faire la hauteur de 1 200. C'est un peu trop. Nous allons passer 800 pixels. Il l'ouvre juste un peu plus pour que nous puissions le voir. Alors, évidemment, nous pouvons nous débarrasser de certaines de ces autres parties de Calendly, afin que nous puissions éteindre et cacher certaines d'entre elles et en avoir une ou deux, cela aura l' air un peu mieux. C'est ainsi que vous intégrez un widget. Vous pouvez intégrer tout un tas de choses. 14. Créer un blog: [MUSIQUE] Nous allons également travailler sur la page du blog. Nous allons construire cela. Pour cette partie, je vais en fait ajouter un blog. Je vais descendre en bas du 11e menu et cliquer sur « Blog » et vous pouvez voir qu'il y aura un bouton indiquant Ajouter au site. Je vais cliquer sur « Ajouter au site » et l'éditeur X va faire son travail. Maintenant, vous pouvez sélectionner tout un tas de choses. Vous pouvez faire un blog avec l'équipe de rédaction, bloguer avec les membres ou simplement un blog normal, ce que nous voulons. Je vais cliquer sur « Commencer ». Une fois que vous aurez ajouté le blog et que c'est à quoi il ressemblera, vous obtiendrez une barre de recherche en haut dans laquelle je peux personnaliser le design et cliquer sur « Paramètres ». Vous pouvez taper dans trouver un blog ou trouver une analyse ou quoi que ce soit. Vous pouvez également activer et désactiver cela. Vous pouvez également cliquer sur le dessin, pour que je puisse modifier la couleur de remplissage ou l'opacité. Je fais de l'arrière-plan un gris clair et je vais baisser l'opacité. Maintenant, modifiez la couleur du texte en gris plus clair, placez tout le texte en gris clair comme vous pouvez le voir. Les gens, s'ils veulent trouver des articles de blog. Nous avons également ces articles de blog. Gardez à l'esprit sur l'inspecteur qu'il vous donne simplement la taille de la station d' accueil et les outils de positionnement, vous devez donc modifier la conception de celle-ci. Il y a un fond blanc. Je dois cliquer ici sur « Paramètres » pour le blog car il s'agit d'un widget intégré, je dois modifier le design ici. Pour le design, je vais cliquer dessus. Vous pouvez voir que nous avons les étiquettes, les boutons, les marges, les publications et le menu du blog. Je peux cliquer sur « Menu du blog » comme vous pouvez le voir. Je peux revenir en arrière, les messages et je peux faire baisser l'arrière-plan des messages. Si je veux le changer, je veux peut-être faire le vert. Je pensais que c'était mieux avec le gris. Ensuite, avec le texte, je vais peut-être le changer en blanc comme ça. Vous pouvez voir qu'il met à jour les modifications, ce qui est vraiment beau. Je vais revenir en arrière, Boutons et marges, Couleur d' arrière-plan, c'est juste l'arrière-plan de la zone. Nous allons l' amener à zéro pour cent. Vous pouvez voir le fond là-bas, parce que je ne voulais pas ce truc blanc. La couleur du texte est correcte. Ce petit contour est bon. Vous avez des paramètres vidéo en survol, mais je ne vais pas avoir de vidéos, ce qui est tout à fait correct. Vous avez également la mise en page. Je peux continuer l'éditorial. Je peux le faire côte à côte et ça devrait changer ça comme ça. Vous pouvez faire du carrelage si vous le souhaitez. J'aime la façon dont il vous donne des informations prédétaillées. Vous pouvez avoir un post complet. Je l'aime bien. C'est vraiment bien. Je vais cliquer sur « Side By Side ». Je pense que j'aime vraiment ça. Il montre très bien les images. Vous pouvez afficher certaines choses. Si je veux me débarrasser du temps de lecture, je peux m'en débarrasser, la date de publication. Si je veux me débarrasser du badge, je peux aussi m'en débarrasser. Vous pouvez le personnaliser en l'apparence réelle du blog. Compteur de vues et commentaires, je vais m'en débarrasser, et le compteur likes, suffit de garder ça vraiment simple. Ensuite, ce que vous pouvez faire est d'aller dans Créer une publication ou je peux cliquer sur « Gérer « Publications ». Vous pouvez le voir ici. Je vais cliquer sur « Gérer » et cela va m'emmener dans mon tableau de bord principal où sont stockés les articles de blog. Sur le côté gauche, vous pouvez voir Blog, et j'ai mon aperçu, ma publication, mes brouillons, mon programme et ma corbeille. Vous pouvez voir les messages échantillonnés qu'il m'a donnés. Je veux le modifier, je vais donc cliquer sur « Modifier ». Je vais faire une start-up de type 10. Je peux modifier le texte ici. Vous pouvez voir que je peux écrire du texte, je peux appuyer sur « Plus », je peux ajouter une vidéo, des images, des cadeaux, des fichiers, des séparateurs. Vous pouvez faire tellement de choses avec ça. Je peux cliquer là-dessus. Je vais cliquer sur l'image, double-cliquer dessus et ça devrait m'amener à cela, je vais aller à Unsplash. Je vais taper créatif. Voyons ce qui se passe. Il y a plein de trucs sympas, j'aime bien cette photo en fait. Je vais cliquer sur « Ajouter à la page », et il va ajouter cette image de blog, puis je vais cliquer sur « Supprimer » sur cette image. Ensuite, vous avez un autre texte. Vous pouvez jouer avec tant de choses. Vous pouvez ajouter des balises, des catégories, du référencement, des paramètres, il y a tout un tas de choses différentes. Si je veux également modifier cette image, je dois cliquer sur « Mettre à jour ». Je vais également revenir à cette même image. Allons-y ici. Cela va changer l'image de la couverture de mon écran, pas seulement les images du blog mais aussi mon image d'affichage. La date de publication, vous pouvez voir 23, l'auteur, qui est moi. Si vous avez un membre de votre équipe, vous pouvez changer l' auteur par cette personne. Vous avez tellement d'outils. Une fois que je suis satisfait de cela, je peux cliquer sur « Enregistrer » , puis sur « Publier ». Maintenant, vous pouvez voir que mon article de blog est là. Revenons maintenant à la page et tout devrait être changé. Boom. Vous pouvez y voir ma nouvelle image et le texte. Ça a l'air super bien. Vous pouvez toujours revenir en arrière et cliquer sur « Gérer les publications » pour corriger ce problème et régler cela. Il y a beaucoup de fonctionnalités lorsqu'il s'agit de créer un blog. Vous avez quelques conseils ici, vous avez des modèles. C'est un très bon outil en termes d'éditeur X.