Webflow pour les débutants : concevoir le site de votre portfolio

1. Introduction: Je m'appelle Jeremy et je suis designer de marque de Sydney, en Australie, et je conçois sites Web depuis plus de huit ans. J'ai tout utilisé de Wix, Squarespace et même WordPress, mais maintenant j'ai puisé dans la puissance de Webflow. Je conçois Webflow depuis environ trois ans maintenant et je veux partager avec vous toutes mes connaissances que j'ai apprises sur la façon de créer des sites Web pour moi-même, mais aussi pour les clients, et vous donner tous les outils pratiques et astuces que j'ai appris pour vous aider à créer votre site Web. Si vous voulez apprendre à créer designs étonnants, en particulier en ce qui concerne la typographie, mise en page et l'interface utilisateur, je vais partager quelques conseils de conception de sites Web. Je vais vous donner quelques sites Web où je trouve mon inspiration personnelle. Je vais vous montrer le flux de travail et les prix de l'utilisation des blocs de construction, l'utilisation du modèle de boîte et de la création d'un site Web simple fonctionnel, qui comporte également des interactions. Je vais vous montrer un peu de l'animation, je vais également expliquer comment importer du code là-dedans. Je vais vous montrer tous les paramètres et tous les éléments de base sur l'utilisation de Webflow, comment tout fonctionne et je vous donnerai honnêtement mon expérience personnelle sur la façon de l'utiliser. Pour votre projet de classe, vous allez créer et concevoir votre propre site Web à partir de zéro, que vous soyez un designer, un artiste ou peut-être un photographe, et que vous souhaitiez créer votre portfolio, alors cette classe sera probablement géniale pour vous car vous pouvez vous mettre au défi créer un site Web à partir de zéro et le plus cool est que vous n' avez pas besoin de connaître de code pour Webflow, c'est un sans code Visual Builder. Si vous voulez apprendre à devenir un concepteur Web puissant ou peut-être simplement apprendre à créer des sites Web comme passe-temps, consultez certainement ce cours, c'est idéal pour les débutants, les graphistes ou les gens. qui veulent juste apprendre un nouveau passe-temps. Inscrivez-vous aujourd'hui et je vous verrai en classe et j'espère vous voir créer des sites Web incroyables. 2. Qu'est-ce que webflow: Qu'est-ce que Webflow ? Webflow est un site Web visuel sans code. Maintenant, j'ai tout utilisé depuis Squarespace, Wix, WordPress et même Shopify, et je peux vous dire que Webflow est le meilleur car c'est facile, fonctionnel, il possède tellement de fonctionnalités, et c'est tout simplement incroyable dans l'ensemble. C'est vraiment cool parce que vous pouvez réellement créer des sites Web fonctionnels, des blogs au commerce électronique, donc de simples sites normaux, même si c'est pour votre portefeuille. C'est pourquoi j'ai adoré la polyvalence de Webflow, et c'est ce que c'est. Il s'agit de créer et concevoir un site Web comme vous le souhaitez sans avoir à connaître tous ces codes et tous ces autres jargon, vous pouvez vraiment créer des sites Web assez facilement. C'est simple, et tout est visuel, il est beaucoup plus facile de construire tous les blocs ensemble. Quels sont les avantages ou les avantages de Webflow ? Certains d'entre eux sont, c'est une solution tout-en-un, il est facile pour les clients de le mettre à jour et de le modifier lorsque vous remettez enfin notre site Web client, vous n'avez pas besoin de plug-ins non plus, c'est aussi a beaucoup de fonctionnalités comme HTML embed, vous pouvez également exporter du code, ce qui est cool si vous êtes un développeur, et je veux approfondir le code. Tout est hébergé au même endroit, donc je n'ai pas besoin d'aller le comprendre et d'embaucher Bluehost ou un autre service d'hébergement, tout est intégré. Il inclut également un CDN, qui est un réseau Cloud qui permet à votre site d'être beaucoup plus rapide car il utilise serveurs partout dans le monde, et en plus de cela, il possède l'Academy X, qui est plein de tutoriels pour vous montrer comment apprendre Webflow et la grande communauté, des tas de soutien sur les forums, et les gens sont prêts à vous aider et à vous donner des conseils. Ce sont là les avantages et les avantages. Par contre, je n'en pense qu'à trois. Le principal est le coût que, parce que vous allez payer pour le compte et l'hébergement, cela peut coûter un peu cher, mais vous n'avez à payer après avoir utilisé deux sites ou plus, donc c'est gratuit en dessous de ça, donc c'est une affaire assez décente. Enfin, c'est la courbe d'apprentissage. C'est beaucoup plus élevé parce qu'il faut comprendre comment les choses fonctionnent. Vous devez comprendre un peu le HTML et le CSS, mais vous n'avez pas vraiment besoin d'expérience de codage. Il suffit de comprendre les outils, et vous allez apprendre que ce n'est pas aussi facile que le glisser-déposer. Vous allez le comprendre. 3. Modèle de boîte: [MUSIQUE] Maintenant, je veux mentionner le modèle de boîte. Ceci est basé sur CSS. Tout est question des blocs de construction et des fonctions principales du fonctionnement d'un site Web lorsque vous le construisez. Il y a quatre éléments clés. Le numéro 1 est le contenu. Le numéro 2 est le rembourrage. numéro 3 correspond à la marge et le numéro 4 est bordure. Ce sont les quatre éléments de base que nous devons comprendre avant de commencer à échanger le dimensionnement et la mise en page et tout cela. Je vais montrer une image ici très rapidement. Vous pouvez voir ici qu'il s'agit d'avoir des boîtes. Je ne sais pas si vous connaissez une poupée russe, comment l'ouvrir et elle en a une petite et une petite et vous continuez à l'ouvrir. Il y a tous ces blocs à l'intérieur. Pensez à des conteneurs dans conteneurs ou des boîtes dans des boîtes. C'est de ça qu'il s'agit. Lorsque vous disposez d'un bloc que vous utilisez pour jeter des images ou du texte à l'intérieur, vous commencez par le contenu principal. Ensuite, vous avez le rembourrage à l'extérieur. Ensuite, vous avez la bordure qui correspond au contour ou à l'extérieur du rembourrage. Ensuite, vous avez la marge qui est le bord même et en dehors de la boîte. Parfois, si vous souhaitez ajuster l'espacement entre deux objets, il suffit d'ajuster le rembourrage. Peut-être souhaitez-vous ajouter un contour à votre boîte. Ensuite, vous ajusteriez la bordure et ajoutez un trait à cela. C'est essentiellement ce qu'est le modèle de boîte CSS. J'essaie de rester très simple, mais c'est bien d'avoir la compréhension, donc lorsque vous construisez les blocs, vous vous souvenez, d'accord, ce sont toutes des pièces et des blocs de construction ensemble. 4. Inspiration et outils: [MUSIQUE] Je vais vous montrer quelques sites Web incroyables où je trouve de l'inspiration et quelques outils que vous pouvez réellement utiliser pour vos sites Web. Le numéro 1 sera Dribble, je continue toujours ici pour inspiration de la conception de l' interface utilisateur, donc si je tape la conception de l'interface utilisateur, vous pouvez voir que vous obtenez tout un tas de designs et de sites Web, et tout est simplement visuellement beau. Rappelez-vous simplement une chose que tous ces sites Web ne sont pas fonctionnels, ou sont conçus et construits dans un Webflow ou dans un site Web, ils peuvent être beaux mais ce n'est pas toujours pratique, faire Bien sûr que vous y réfléchissez, mais il y a des designs incroyables ici et je pense que c'est un super site Web. Nous avons ensuite Behance, un autre excellent site, surtout si vous êtes designer. Ils ont des sites Web incroyables, ils ont une image de marque, tout le shebang ici. Vous pouvez faire défiler ici et regarder tous ces sites Web intéressants ici avec beaucoup de contenu ici. La prochaine étape est en fait la vitrine de Webflow. Si vous accédez au site Web Webflow et que vous cliquez sur « Showcase » dans le coin supérieur, vous pouvez voir qu'il va vous montrer tous ces sites Web créés avec Webflow. Je peux en voir un tas de nouveaux ici, ils ont l'air vraiment cool et ce qui est cool avec Webflow, c' est que vous pouvez cloner certains de ces sites Web, je vais vous montrer comment le faire dans un autre module mais ils ont tellement de designs sympas comme même si je clique dessus. C'est beau, regardez ces interactions et oui je trouve ça génial. Je peux cliquer sur « Ouvrir » dans Webflow, si je veux voir rapidement comment il est construit et que vous pouvez voir ici, je peux voir tous les éléments et c'est tout simplement incroyable comment nous pouvons le faire. Je peux voir toutes les boîtes noires vraiment cool. C'est la vitrine de Webflow. Ensuite, il y a quelques modèles, il s'appelle flowbase.com. Maintenant, si vous accédez à ce site Web, vous pouvez télécharger des modèles gratuits, mais ils ont également des modèles achetables. Peut-être que vous créez un site d'adhésion ou que vous avez besoin d'un type spécifique de mise en page, de conception ou de composant, vous pouvez en fait l'obtenir à partir de ces sites, par exemple, vous pouvez voir qu'ils ont juste modèles de site Web normaux, mais ils n'ont que composants de base que vous pouvez obtenir. Ce 150 dollars vous permet d'obtenir une construction temporaire, donc c'est peut-être pour un client que vous pouvez gagner du temps et simplement télécharger un modèle , puis le concevoir comme vous le souhaitez avec les couleurs et la marque, etc., et les polices. C'est un site vraiment cool, j'adore aller aux modèles. Si je vais dans les modèles et que je clique sur «  Modèles gratuits » dans le menu, ils sont tous téléchargeables et vous n'aurez qu'à le copier et à le coller dans un projet de site Web. Le rend super facile et cela vous fera gagner beaucoup de temps. prochaine étape est Awwwards avec trois W, ne me demandez pas pourquoi ils ont fait ça. Mais ils organisent généralement des concours où plusieurs designers soumettent chaque année leur site Web et ils sont classés pour inspiration de base, en fait vraiment bon aussi. Ils sont plus créatifs, ils sont plus en dehors des sentiers battus au lieu d' site Web client standard, parfois c'est juste plus pour l'abstraction et la victoire. Vous pouvez les vérifier. Ils ont un menu ici pour que vous puissiez consulter les collections ou les gagnants, par exemple, dans les collections, ils ont du commerce électronique, ils ont des planeurs et des curseurs, tout un tas de choses. Peut-être que je veux regarder des galeries d'images et des diaporamas, je cliquerai dessus, et cela apparaîtra et me montrera tout un tas d'exemples de galerie, par exemple, je cliquerai dessus et cela semble joli cool. Je pourrais être inspiré de le faire, aucune idée de ça ou quelque chose du genre . Je pense que c'est génial. Le prochain, c'est land-book.com. C'est un site incroyable, je suis sur ce site depuis un moment. Si je fais simplement défiler vers le haut, vous pouvez voir c'est essentiellement de l'inspiration du site Web. Vous avez des portefeuilles de débarquement, donc en haut à gauche, vous pouvez voir peut-être que je veux filtrer par portefeuilles et en voir quelques exemples, et regarder tous ces sites étonnants pour l'inspiration, super incroyable. Peut-être que je voulais simplement cliquer sur l'un d' eux et, par exemple, cliquons sur celui-ci ici. Vous pouvez voir sur le côté droit qu'il me montrera le site Web pour que je puisse cliquer dessus et aller le vérifier. Je peux faire défiler et voir ce design principal ici, ai vraiment aimé le jeu de couleurs ici simplement noir et la couleur grisâtre. J'ai eu une interaction assez dope. C'est un excellent site pour trouver de l' inspiration et le découvrir. Maintenant, mobbin.design en est un autre, Mobbin ou Mobbin, je ne sais pas. Fondamentalement, ils disposent d'une bibliothèque complète de différentes startups technologiques et véritables entreprises et ils regardent l'écran, donc principalement pour les conceptions d'interface utilisateur mobile. Vous pouvez voir que vous en avez un tas, par exemple, Klarna est une application de paiement comme Zip Pay. Vous pouvez voir tous les écrans, vous pouvez même le télécharger, ce qui est fou et copier un design ou être inspiré, sorte que vous puissiez voir tous les écrans de l'application elle-même de sorte que vous puissiez voir tous les écrans de l'application elle-même et cela vous fera gagner du temps, surtout si vous construisez un site Web qui doit être adapté aux mobiles , ce sera le site à consulter. Si vous êtes quelqu'un qui aime les illustrations, vous pouvez consulter un tas de sites que l' on appelle blush.design, vous pouvez vérifier cela. Vous pouvez désormais combiner différentes images et réaliser vous-même quelques illustrations. Ils ont également différentes collections, si je vais à la collection Beep Beep, vous pouvez voir que vous pouvez télécharger tous ces actifs, ce qui est vraiment cool. Ils en ont gratuitement, mais ils ont également des plans différents , vous pouvez le vérifier. Ils ont le forfait gratuit et ils ont 12$, c'est un site cool pour certaines illustrations il y a beaucoup d'autres sites comme Envato Elements que j'utilise, mais je vous en montre quelques-uns spécifiquement pour illustrations. Vous avez aussi des illustrations noires, peut-être voulez-vous des images de style africain, elles sont vraiment géniales. Comme vous pouvez le voir, certains packs sont payés, je pense que la plupart d'entre eux le sont, mais il y a quelques packs gratuits, mais c'est vraiment sympa si vous voulez ajouter des illustrations différentes ici également. Peut-être que je veux des affaires comme des affaires que vous pouvez vérifier, ils ont comme ce sac cool et ce serait vraiment génial. Maintenant, si vous voulez des icônes 3D, 3dicons.co, c'est un pack gratuit conçu par un de mes camarades, il s'appelle Vijay. Vous pouvez les télécharger tous sous forme de PNG ou même de Figma. Si vous concevez Figma, vous pouvez obtenir tous ces fichiers et vous pouvez voir ici tout un tas d'icônes, ce qui est vraiment cool, vraiment [inaudible] Si vous aimez ce style 3D, Pensez certainement à en obtenir quelques-uns, je pense que c'est vraiment génial. Maintenant, si vous voulez plus d'icônes 3D, d'illustrations, tout un tas de choses, vous pouvez consulter iconscout.com. Ils ont des plans tarifaires. C'est assez abordable, c'est juste quoi ? 12 à 13 dollars, vous avez tous accès et vous pouvez obtenir tout un tas d'images. Peut-être que je veux même des animations pour lecteur web, je peux aller à l'animation Lottie et vous pouvez voir il y en a tout un tas que je peux utiliser pour un site web comme vous pouvez le voir, super dope donc c'est un autre grand site que je recommande. Si vous ne voulez que des icônes, flaticon.com est vraiment génial, ils ont des forfaits vraiment bon marché, ils ont également un plan gratuit, tout un tas d'icônes différentes, alors vérifiez définitivement Flaticon. C'est assez simple, ils ont juste des packs différents et des trucs comme ça. Le prochain serait également thenounproject.com. Ils ont plus de trois millions d'icônes, saisissons une pyramide ou quelque chose comme ça , nous verrons ce qui apparaît. Vous pouvez voir toutes ces icônes apparaître un tas de styles différents, d'autres sont des traits minces, autres sont épais, mais vous pouvez littéralement d' autres sont épais, mais vous pouvez littéralement les télécharger et les utiliser pour vos projets. Vous pouvez dire obtenir cette icône et il est évident que vous avez besoin d'un compte gratuit pour obtenir ces icônes. Où trouver des polices Google ? Il suffit d'aller sur fonts.google.com et vous pouvez télécharger tout un tas de ces polices, elles sont gratuites pour un usage commercial. J'utilise des éléments Envato pour obtenir mes polices et j'utilise également d'autres sites Web. Enfin, nous venons d'avoir un groupe Facebook. Cette clé s'appelle Webflow designers global. Il s'agit essentiellement d'un groupe où tout un tas de concepteurs de flux de du monde entier s'entraident, disent que si vous voulez poser des questions ou si vous avez besoin d'aide pour quelque chose, c'est un excellent groupe. pour être et les gens postent de l'inspiration et tout un tas de choses différentes. C'est donc un groupe gratuit, 20 000 membres, il suffit de le rejoindre. Je n'ai aucune affiliation avec elle, alors jetez-y un coup d'œil. Nous n'avons que quelques chaînes YouTube que j'adore, elles se concentrent spécifiquement sur Webflow. L'un s'appelle Timothy Ricks. Il a des tutoriels géniaux, vraiment incroyables, et vous venez de voir qu'il y a du design et des trucs. C'est vraiment génial pour Webflow et un autre gars aussi, Caler Edwards, il a des designs sympas spécifiquement dans Webflow, consultez ces chaînes et j'espère tous ces les ressources et les outils vous aident. Je sais que cela peut sembler beaucoup, mais ils vous aideront vraiment à prendre l'avance dans la conception de votre site Web. 5. Principes de conception de sites Web: Je veux vous donner cinq conseils de conception de sites Web qui m'ont vraiment aidé et je crois que vous devez mettre en œuvre lorsque vous concevez votre site Web. La première est celle des images de héros. Quand il s'agit d'images de héros, elles doivent être audacieuses, époustouflantes et belles car vous devez attirer l'attention de quelqu'un. Quand quelqu'un saute sur ce site Web, vous avez littéralement cinq secondes pour l'impressionner et c'est pourquoi vous voyez toutes ces startups technologiques et ces grandes entreprises, elles ont des maquettes incroyables et des dessins en première page, sur l'image même du héros, qui est la principale image du héros en haut de la page d'accueil. C'est de cela qu'il s'agit : attirer l'attention, être visuel, être audacieux, être créatif, mais aussi de se démarquer et d'être fonctionnel. Lorsque vous pensez à des images de héros, pensez à utiliser des illustrations, des images audacieuses, pensez à la couleur, pensez à la façon dont vous pouvez le rendre intéressant. Mon deuxième conseil est la simplicité. Quand il s'agit de concevoir un site Web, est-ce simple ? Est-ce facile à comprendre ? C'est un bouton, c'est le titre, c'est une image. Est-il facile de parcourir le site Web et de comprendre comment il fonctionne ? Parce que nous devons clarifier notre message principal. Est-ce que notre message principal et notre marketing et nos titres ont tous un sens ? Est-ce facile à lire ? Ce sont les choses qui font partie de la simplicité que je veux m' assurer d'implémenter sur mon site Web. Assurez-vous que c'est simple, assurez-vous que c'est clair et assurez-vous qu'il est également fonctionnel que quelqu'un puisse réellement l'utiliser sans être frustré. Le troisième conseil est le CTA, qui signifie appel à l'action. Avez-vous un simple appel à l' action audacieux ? Pensez à un bouton. Est-ce qu'il y a un contraste élevé ? Est-ce qu'il a de la couleur ? Est-il plus facile de cliquer sur ? Est-ce qu'il y a un état de vol stationnaire au-dessus ? Parce que vous devez vous assurer qu'un bouton est cohérent sur l'ensemble du site Web quelqu'un sache, si je mets ma souris ici, ce sera un bouton qui mènera à un lien ou à une page ou quelque chose comme ça. comme ça. Effectuez toujours l'appel à l'action clairement sur le bouton. Parfois, vous pouvez avoir un appel programmé ou réserver maintenant ou contacter maintenant ou devis aujourd'hui. Quoi qu'il en soit, pensez à un titre audacieux et clair lorsqu'il s'agit d'un appel à l'action parce que vous voulez que quelqu'un agisse, à l'action, prenne les prochaines étapes. Qu'il s'agisse de vous réserver pour un e-mail ou un appel, si vous êtes client ou quoi que ce soit. Assurez-vous que votre appel aux actions se démarque vraiment. J'utilise toujours la couleur et c'est généralement ce que j'ai fait pour la faire ressortir. J'utilise une couleur contrastée qui est vraiment à l'opposé de l'arrière-plan, et c'est comme ça que je fais habituellement mon appel aux actions. conseil numéro 4 est la structure ; la façon dont vous structurez votre site compte. Comme je l'ai déjà mentionné, nous avons l'image du héros en haut de la page. Alors, vous devez réfléchir, d' accord, qu'est-ce qui se passe ensuite ? plupart du temps, la preuve sociale est vraiment bonne, montrant les logos des clients passés ou les marques avec lesquelles vous avez travaillé, ce qui renforce la réputation et la confiance. Vous pouvez y penser, je dois mettre travail, des projets ou des services. Je dois ajouter des témoignages ou des commentaires si c'est un côté produit, j'ai besoin d'un pied de page en bas. Peut-être que j'ai besoin d'avoir un blog quelque part là-bas ou ai-je besoin d'une intégration de marketing par e-mail dont j'ai besoin en haut pour pouvoir obtenir plus d'options pour cela. Pensez à la structure du site et à la mise en page. Il est très important que vous construisiez avance et que vous le conceviez de manière à ce que lorsque vous créez le site Web, vous ayez une structure claire et facile à naviguer. Planifiez votre site, pensez logiquement et pensez à la hiérarchie. Quelles sont les informations les plus importantes qu' un client ou un client doit voir ? Mettez-ça en haut. Les choses en bas devraient être les moins importantes, mais garder tout le reste clair. Mon dernier conseil est la navigation. En matière de navigation, l'expérience utilisateur est primordiale. Tout doit être facile à suivre, et tout doit être logique. Les noms de page ont-ils du sens ? Les boutons ont-ils du sens ? Parce que si c'est une mauvaise navigation, quelqu'un va être frustré et sauter du site. Pensez à la façon dont les boutons interagissent, pensez à si quelqu'un est sur un téléphone portable, le menu hamburger réagit-il très rapidement lorsqu'il clique ? Ou est-ce trop loin à droite ou quoi que ce soit ? Pensez à la navigation, façon dont tout se déroule ensemble. Pensez à, quelle est la page suivante de la première page ? Quel bouton va sur quelle page ? Réfléchissez aux étapes logiques que quelqu'un souhaite prendre ou aux mesures que vous souhaitez qu'elle prenne en les guidant tout au long de la conception du site Web. Ce sont mes cinq conseils en matière de conception de sites Web. Il y en a beaucoup d'autres, mais j'espère que ceux-ci vous inspireront. 6. Les bases de l'interface Webflow: Maintenant, nous allons passer à la partie amusante. Nous allons créer cette conception dans Webflow. Dans Adobe XD, je viens de construire deux pages ici comme vous pouvez le voir. C'est un 1920 pixels par 1080, et vous pouvez voir juste fait un très simple, ajouté un peu de travail là-bas, quelques services, section témoignage, touche touche avec un titre. Ensuite, nous avons une page pour une pièce de portfolio ou une œuvre d'art. Peut-être êtes-vous photographe, peut-être que vous êtes concepteur de logo, quoi que vous soyez, cela peut fonctionner pour vous. Dans le cadre de la construction de votre projet de classe, vous devrez créer votre site Web, et vous pourrez suivre ou essayer de faire votre propre chose. Vous pouvez voir ici que j'ai déjà exporté certains actifs. Si je vais voir mes atouts ici, j'ai l'étoile, la flèche, puis les autres formes. Je peux l'importer dans Webflow. Je vais aller sur Webflow. Je vais aller le coin supérieur droit et cliquer sur « Nouveau projet », ce qui se trouve dans votre tableau de bord, pour que vous puissiez démarrer un nouveau projet. Je vais sélectionner le premier où il est écrit Blank, comme vous pouvez le voir. Je vais cliquer sur « Sélectionner », puis je vais dire Skillshare Class Project , cliquez sur « Créer un site ». Vous pouvez le nommer comme vous le souhaitez, probablement mettre votre prénom. Nous sommes maintenant dans Webflow. Avant de commencer la conception, je veux passer en revue les bases de l'interface Webflow. En haut, vous verrez cette barre, appelée points d'arrêt. moment, vous pouvez voir que j'ai ce point d'arrêt automatique, qui est le point d'arrêt du bureau. Si je déplace ma souris sur elle, vous pouvez voir le point d'arrêt de base, qui est le bureau, et vous devriez toujours commencer à concevoir sur le bureau. raison en est que lorsque vous concevez à partir d'un ordinateur de bureau, chaque modification que vous effectuez en suivant la vue iPad, puis sur le mobile, les conceptions descendent en cascade, donc c'est comme une cascade. Si vous apportez des modifications sur le bureau, elles devraient affecter les autres. Mais si vous concevez à partir d'un appareil mobile, les modifications que vous apportez n'affecteront pas la version de bureau. Gardez cela à l'esprit. Ce que je peux vraiment faire, c'est que je peux cliquer ici. Je peux changer la largeur à 1080. Vous avez également d'autres options ici, mais je vais appuyer sur « Entrée ». Maintenant, vous pouvez voir qu'il a changé, et c'est notre point d'arrêt. Je peux cliquer sur l'autre point d'arrêt pour accéder à la vue tablette, qui est la vue iPad. Vous avez un paysage mobile, je conçois rarement pour cela parce que les gens ne regardent pas de vidéos comme ça, moins qu'ils ne soient dans un train ou quelque chose comme ça. Ensuite, vous avez également le point d'arrêt mobile. qui est génial, c'est que vous pouvez faire glisser cet onglet. Si vous savez que vous concevez pour un téléphone ou un mobile spécifique, vous pouvez le faire glisser, et si vous faites attention au bas lorsque je fais glisser, il apparaît sur les différentes tailles de téléphone, donc 360 pixels est un Galaxy S8, S9, etc. Vous pouvez voir que l'iPhone 12 est un peu plus large. Je vais revenir aux points d'arrêt. Vous pouvez voir aux points d'arrêt, il devrait enregistrer les pixels. Vous pouvez voir si je reviens en arrière, ce n'est pas sauver le 1080 auquel je l'ai configuré et c'est parce que nous devons faire un nouveau point d'arrêt. Sur la gauche, vous voyez ces trois points, je peux cliquer dessus, et vous pouvez voir que je peux ajouter un point d'arrêt spécifique. Peut-être que je veux celui de 1920, je cliquerai dessus et je cliquerai sur « Créer ». Maintenant, vous pouvez voir qu'il y a ce point d'arrêt, 60 % là-bas, et ce point d'arrêt est à 100 %, ce qui est cool. Fondamentalement, c'est comme ça que vous utilisez les points d'arrêt, très simples, très faciles. Maintenant, nous allons aller voir le navigateur. Sur le côté gauche, nous avons notre navigateur. Vous pouvez appuyer sur « Z » pour l' éteindre et l'activer, et cela fait ressortir cela. C'est ici que nous avons tous nos éléments et notre couche. Pensez-y comme des calques Photoshop, c'est là que se trouvent toutes nos boîtes , toutes nos couches et toutes les choses que nous utilisons pour empiler tout. Vos sections, vos boîtes, votre navigation, etc. haut à gauche, sur le bouton Plus, vous pouvez ajouter des éléments. Vous pouvez également ajouter des mises en page. Si je clique sur « Mises en page », je peux faire glisser une mise en page prédéfinie, peut-être que je veux une barre de navigation, Sticky Nav, je peux faire glisser ça et ça va ajouter cette barre de navigation en haut, super facile. Dans mon navigateur, vous verrez qu'il apparaîtra, maintenant j'ai le Sticky Nav là, j'ai un conteneur. intérieur de cela, j'ai la grille de navigation et les éléments de liste, etc. Vous avez beaucoup d'options ici, jouez avec eux, amusez-vous avec elle, expérimentez. Nous avons des sections, des conteneurs et des grilles que nous utiliserons très certainement. Le bloc Div est le bloc de base que nous construisons, et nous l'utiliserons toujours. Vous avez la typographie, les en-têtes, les paragraphes, les citations, etc. Vous avez les éléments CMS. Vous pouvez ajouter des vidéos YouTube, des animations Lottie, des formulaires et des composants. Si vous voulez ajouter du code HTML, vous pouvez l'ajouter et l'intégrer, donc je peux y déposer un code intégré, déposer le code et ensuite il devrait y ajouter le code, évidemment nous ne l'avons pas pour le moment. Le prochain est celui des symboles. Un symbole ressemble essentiellement à Photoshop ou dans Illustrator Lorsque vous enregistrez un symbole, c'est essentiellement lorsque vous créez un bouton, vous pouvez l'enregistrer en tant qu'objet ou en tant que symbole, et il créera un afin que vous puissiez tout réutiliser via le site, et il aura les mêmes fonctionnalités. Super utile, permet de gagner du temps. Le troisième est votre navigateur là-bas. Ensuite, nous avons Pages dans le quatrième onglet. Nous avons des pages Utilitaires, vous avez E-commerce et CMS, celles-ci ne s'affichent que si elles sont activées, évidemment. Avec Pages, vous pouvez voir que je peux cliquer sur le sabot, je peux renommer le nom de la page, je peux définir d'autres pages comme page d'accueil. Vous avez également vos paramètres SEO ici, dont nous pourrons discuter un peu plus tard. Si vous souhaitez ajouter une page, vous pouvez aller en haut à gauche et cliquer sur « Ajouter une page ». Je vais ajouter les pages que je veux. Je vais créer ma page À propos, j'irai sur la page Contact, puis nous retournerons au travail, ou vous pourrez faire du portfolio, ce que vous voulez. Vous avez ces pages, donc je peux les faire glisser, et vous pouvez voir le remaniement, super facile à faire. Le cinquième onglet que vous pouvez voir est CMS Collections, nous n'allons pas utiliser cela. Vous avez également la section cartes, vous devez payer pour le commerce électronique, donc nous n'allons pas l'utiliser. Ensuite, vous avez votre gestionnaire d'actifs, c'est ici que nous déposons nos actifs. Je vais revenir à mes ressources ici, faire glisser et déposer ces fichiers. Avant de charger des fichiers, ce que vous voulez faire est d'aller sur TinyPNG et de compresser les fichiers, car vous souhaitez que le site se charge plus rapidement. Plus les fichiers sont volumineux , ils doivent être compressés, sorte que TinyPNG compresse les images. Par exemple, ce fichier est trop volumineux, je peux le faire glisser ici, il va compresser le PNG et en fait vous pouvez le voir réduit 60%, je peux le télécharger. C'est un autre conseil rapide dont vous devez vous souvenir également. J'espère que les ressources auraient dû y être téléchargées. Habituellement, vous pouvez faire glisser le bouton, mais dans ce cas, je vais simplement cliquer sur « Télécharger ». Je vais localiser les ressources et cliquer sur « Ouvrir ». Maintenant, il les télécharge pour que vous puissiez appuyer sur ce bouton pour télécharger des fichiers. Vous pouvez également ajouter des dossiers. Vous pouvez voir que j'ai toutes les images là-bas, vraiment cool. Ensuite, nous avons ce petit engrenage ici pour sauvegarder vos sauvegardes, très facile. Ensuite, en bas, vous avez d'autres petites choses comme des tutoriels vidéo. Si vous êtes bloqué, vous pouvez toujours cliquer dessus et regarder littéralement un tutoriel juste là et là. Si je n'enseigne pas quelque chose, vous pouvez toujours revenir en arrière et apprendre cela. C'est tout le panneau latéral gauche. Sur le côté droit, nous avons notre panneau de style. Lorsque nous avons un objet, nous pouvons réellement coiffer les choses. En haut à droite, nous avons des cours. Une classe est comme un style dans Illustrator, Photoshop, InDesign, lorsque vous créez un style graphique, c'est comme ça, c'est comme ça que j'essaie d'y penser. Mais une classe définit essentiellement un style spécifique pour un objet spécifique. S'il s'agit d'un conteneur, d'un en-tête spécifique, etc. nous avons également une disposition, donc vous avez votre statique, votre Flexbox, votre grille, etc. ici. Vous avez un espacement, nous pouvons donc ajuster nos marges, et nous pouvons également ajuster le rembourrage, ce que nous allons parcourir. Vous avez des tailles, donc n'importe quoi, la largeur, la hauteur. Vous avez le débordement, donc si l'image est en dehors des limites d'une div box ou d'un conteneur, vous pouvez l'ajuster. Vous avez aussi une position, que nous allons passer par là. Vous avez également la typographie, donc nous avons toutes les polices ici, très utiles. Vous avez du poids, taille, de la couleur, de l'alignement , du style, des outils très similaires si vous êtes concepteur et que vous avez déjà utilisé ce genre de choses. Vous avez également des arrière-plans, donc nous pouvons ajouter des images, ajouter des arrière-plans, des dégradés, nous pouvons ajouter un écrêtage, comme un masque de découpage, ce qui est également intéressant. Nous avons également une bordure, ce qui nous permet d'ajouter une bordure à un objet. Nous pouvons également ajouter un tiret. Ensuite, vous avez des effets en bas ici. Nous avons de l'opacité, des ombres, des transitions, des filtres, etc. Dans le coin supérieur droit, vous avez des paramètres. Parfois, lorsque nous avons un menu, par exemple, si je vais faire une navigation, je vais juste mettre un Nav ici. Vous pouvez voir les paramètres, il est écrit en-tête, puis nous avons une pièce d'identité, et vous obtenez des choses là-bas. Si je clique sur le bouton, vous pouvez voir qu'il y a les paramètres du lien. Je peux choisir ceci pour accéder à une page par exemple, choisir une page, vous pouvez accéder à une page Web ou autre. La prochaine chose est le gestionnaire de style. C'est ici que se trouvent tous vos styles. Si vous créez des classes ou des styles que vous n'utilisez pas, cela vous indiquera, et vous cliquez sur « Nettoyer », et il supprimera toutes les classes inutilisées. Parfois, vous avez peut-être un élément et peut-être que vous le stylisez, mais vous avez décidé de créer un nouveau bouton sur une autre page, et si vous ne le souhaitez plus, vous n'en avez plus besoin, vous supprimez le style. Ensuite, la dernière option est le menu Interactions avec un petit coup de tonnerre, qui est une icône sympa, et voici la façon dont vous pouvez ajouter déclencheurs et des animations, etc. interface de Webflow. Ensuite, nous allons rester coincés, nous allons commencer à concevoir. Une dernière chose est en haut à gauche, vous pouvez cliquer sur le bouton Webflow et cliquer sur « Tableau de bord » ou « Paramètres du projet ». Il vous ramènera. Vous pouvez voir si vous devez télécharger des polices, il suffit d'accéder directement aux polices. Si vous souhaitez revenir en arrière, vous cliquez sur le bouton « Designer » avec un petit pinceau, et il vous ramènera au concepteur Webflow. 7. Paramètres de compte: [MUSIQUE] Je vais vous montrer comment utiliser les paramètres de base du compte dans Webflow. Une fois que vous êtes dans le tableau de bord, vous pouvez voir que j'ai un tas de sites Web ici, sont mes sites Web actuels et des choses que j'ai archivées. Maintenant, pour accéder aux paramètres du compte, il vous suffit d'aller dans le coin supérieur droit, cliquer sur « Compte. Cliquez sur « Paramètres du compte ». Maintenant, une fois que vous êtes ici, vous allez placer tous ces onglets dans le coin supérieur gauche, sorte que vous puissiez voir tous ces onglets. Je vais les parcourir rapidement et vous montrer de quoi ils parlent . Vous avez d'abord un profil. Vous n'avez pas à vous soucier de cet onglet, il ne s'agit essentiellement que des informations de base de votre compte. Ce n'est fondamentalement pas nécessaire. Vous pouvez également télécharger une photo. Je vous recommande de télécharger une petite photo pour que vous puissiez voir si votre compte aide pour les visuels. Cliquez sur « Plans ». Je vais expliquer les plans de compte. Il existe une différence entre les plans de compte et les plans d'hébergement. L'hébergement est l'endroit où vous hébergez réellement un site Web spécifique avec toutes les fonctionnalités d'hébergement, puis le compte est un compte réel pour créer des sites Web avec Webflow. Je recommande de commencer par le compte gratuit car il est gratuit. Vous avez deux sites Web. Vous pouvez également effectuer la facturation client et la mise en scène gratuite. Maintenant, la mise en scène gratuite est lorsque vous pouvez prévisualiser le site Web en direct, pas sur votre propre domaine, bien qu'il s'agisse de webflow.io. Je suis actuellement sur le plan Lite. C'est ce que je recommande, à moins que vous ne soyez un concepteur web fou à temps plein et que vous vouliez faire des projets clients, alors optez pour le plan Pro. Je pense que le plan Lite est suffisant. Vous pouvez avoir jusqu'à 10 sites Web. Ils les appellent des projets. Vous pouvez voir ici 10 projets. Nous avons également une facturation client, une étape améliorée et une exportation de code. Je n'utilise pas l'exportation de code car je ne développe pas nécessairement en dehors de Webflow. Ce sont les plans de compte. Vous pouvez filtrer par année dans le coin droit ou cliquer sur « Mensuel » et vous pouvez voir le prix passerait à 24$ par mois. Vous pouvez cliquer sur l'onglet suivant du haut où il y a facturation, vous avez votre numéro, vous avez votre carte, et vous pouvez toujours modifier ou déplacer votre carte de crédit comme vous pouvez le voir. Vous pouvez également voir le montant de l'abonnement que je paie chaque année , puis évidemment tout le plan de site que j'ai hébergé de base. Vous pouvez voir que j'ai deux sites avec hébergement de base, 15$ par mois. Les factures et vous avez également des modifications dans les factures passées. Ensuite, les intégrations. intégrations sont nécessaires si vous souhaitez placer une clé API. Vous avez peut-être un modèle tiers dont vous avez besoin. Je suis presque sûr que vous pouvez réellement utiliser Zapier avec Webflow et d' autres outils qui permettent que les connexions ne soient pas actuellement intégrées, donc je ne me suis pas soucié de cela. prochain est celui des outils de facturation. C'est à ce moment que vous souhaitez facturer votre client via Webflow. Vous souhaitez peut-être avoir un plan de maintenance dans lequel vous mettez à jour le site Web tous les mois. C'est là que la facturation des clients est vraiment cool. Vous pouvez le configurer, commencer ici et définir le fonctionnement de cette facturation. Très probablement, cela fonctionne via Stripe ou PayPal. Le prochain est Purchase Template. Si vous achetez un modèle via Webflow, il apparaîtra ici. Ils ont également un ThemeForest ici. Si je clique avec le bouton droit sur Parcourir les modèles, vous pouvez voir qu'ils ont beaucoup de modèles qui sont comme un tas de choses et vous pouvez voir qu'ils sont toujours mis à jour avec de nouveaux modèles. Voici quelqu'un qui ne veut pas facturer à partir de zéro, veut gagner du temps puis investir dans un modèle. Il apparaîtra dans cette seconde ici dans la section Modèle d'achat. La prochaine étape est les paramètres de messagerie. Si vous mettez un formulaire Stand sur Webflow sur votre site Web, il s'agit de l'e-mail auquel le formel envoie les e-mails. Vous devez vous assurer qu'il s'agit de l'e-mail principal que vous utilisez. Vous pouvez ensuite sélectionner les notifications par e-mail. C'est assez simple. Vous pouvez choisir ce que vous souhaitez remplir dans la newsletter, etc. Il s'agit des paramètres de messagerie. Vous avez également la sécurité. Ici, vous pouvez activer l'authentification à deux facteurs pour plus de sécurité et modifier votre mot de passe et c'est tout. Il vous montrera les informations de connexion, l'activité s'il y a une activité suspecte, mais personne ne piraterait votre compte Webflow de sitôt. Une dernière chose, si je vais dans le coin supérieur droit, vous pouvez voir ça dit aller au profil public. Dans Webflow, ce qui arrive, c'est que vous avez réellement un profil public dans lequel vous pouvez partager vos sites Web réels. Vous pouvez partager cela avec la communauté. Vous pouvez voir que j'ai 90 vues là-dessus , ce qui est assez cool et quelqu'un peut voir mon site et vérifier tout ça. Vous pouvez également modifier. Vous pouvez également le désactiver si vous ne voulez pas qu'il soit vu. C'est essentiellement de cette façon que vous utilisez les paramètres de compte dans Webflow. 8. Paramètres de site + modifier les polices: Je vais vous montrer rapidement les paramètres du projet lorsque vous souhaitez voir le backend d'un de vos sites Web. Je vais utiliser mon exemple de mon site Web actuel, jeremymura.com. Une fois que vous avez sélectionné un site Web, vous pouvez cliquer dessus avec le bouton gauche pour indiquer Open Designer, qui prendra en compte la partie conception où vous pourrez commencer à créer un site Web. Mais au lieu de cliquer dessus, je vais cliquer sur les trois points ici et cliquer sur Paramètres. Vous pouvez voir que vous avez d'autres paramètres tels que dupliquer le site Web, vous pouvez passer à un dossier, partager le lien et accéder à l'éditeur, qui est le côté client de l'édition. Maintenant, je vais cliquer sur Paramètres et je vais vous montrer cette section car elle est en fait importante pour la création des sites Web. Dans les paramètres généraux, vous pouvez voir que vous avez le nom de votre site Web, puis que vous avez le sous-domaine. Lorsque je suis en train de mettre en scène le site Web et de le prévisualiser, il va y utiliser ce domaine. Maintenant, en ce qui concerne le Favicon, vous voulez faire attention à ce Favicon, il est dit que la taille du téléchargement est de 32 x 32 pixels. Lorsque vous créez une icône dans Illustrator ou Photoshop, assurez-vous de l'enregistrer pour le Web et de l'enregistrer au format PNG ou JPEG dans cette taille et assurez-vous que tout est bien. Vous pouvez simplement cliquer sur Charger , puis déposer l'image là-dedans. Ensuite, vous avez une jolie petite icône haut de votre navigateur, lorsque vous êtes dans l'onglet, c'est un Favicon. Maintenant, le clip Web, c'est uniquement pour iPhone. En gros, je n'en ai pas besoin mais j'y ai quand même mis mon logo. De même, il vous suffit de sauvegarder pour le Web et de l'enregistrer format PNG ou JPEG pour le télécharger. Vous avez des localisations dans les fuseaux horaires et vous pouvez également placer mots de passe d'un site Web pour que vous puissiez cliquer dessus et mettre un mot de passe. Si vous voulez que personne n'y accède par accident un pirate informatique ou quelque chose de ce genre, vous pouvez l'activer. Je ne l'utilise généralement pas parce que mes autres outils protègent mon navigateur. Maintenant, comme je l'ai mentionné dans le module précédent, ce que vous pouvez dire, c'est que si vous souhaitez que votre site Web soit présenté en public et que les gens peuvent le voir sur la vitrine Webflow, sur la vitrine Webflow, sur la page de destination, vous pouvez l'activer, mais vous pouvez toujours le désactiver pour obtenir simplement votre profil public. Vous avez également la possibilité de laisser la marque Webflow activée. Si vous souhaitez aimer un petit badge au bas de votre site Web, vous pouvez cocher cette case. Vous pouvez voir, évidemment, que je l'ai désactivé parce que je n'en veux tout simplement pas, mais je laisse le flux de travail dans le HTML, donc si quelqu'un veut consulter le site Web. Donc, si vous appuyez sur F12 sur un site Web, vous pouvez voir que Webflow apparaîtra quelque part ici. Je pourrais aller chercher, je pourrais taper Webflow et ça apparaîtra ici dans le code HTML. Je vais simplement cliquer sur Enregistrer là, puis il y a toujours une activité latérale en bas. Cool. La prochaine chose est l'hébergement, donc si vous souhaitez héberger un site Web, vous devez sélectionner le bon forfait. Maintenant, pour mes sites Web de base, si je ne crée qu'un portefeuille pour moi-même ou si c'est une petite entreprise qui n'a pas besoin de choses folles, il suffit de sélectionner le Basic. Je vais vous donner toutes les options ici. Vous pouvez lire cela dans votre propre temps. Vous avez inclus le SSL de domaine donc j'ai été protégé, vous avez un CDN, une bande passante, 100 pages sont abondantes, et vous avez obtenu 100 soumissions de formulaire, ce qui est cool. Maintenant, si vous voulez un CMS, CMS est un système de gestion de contenu. Si vous pouvez avoir un site qui possède un blog volumineux ou comporte plusieurs projets ou pages de planification, alors le CMS est probablement le meilleur à utiliser. Vous pouvez y voir les prix. Maintenant, si vous voulez faire comme une entreprise plus grande, je choisirais une entreprise. Si vous voulez faire de la boutique E-commerce, il vous suffit de cliquer sur E-commerce et les prix augmenteront considérablement, ce qui doublera, mais vous obtenez des fonctionnalités telles que Stripe et les intégrations PayPal. Vous avez des clients qui caisses, CMS, taxes, frais d'expédition, etc. J'avais un client qui utilisait la norme pour cela et cela a vraiment bien fonctionné. Alors évidemment, si vous sélectionnez annuel, le prix baissera. C'est pour l'hébergement. Ainsi, lorsque vous êtes prêt à héberger votre site Web, il vous suffit de sélectionner Basic, puis de payer et vous êtes prêt à partir. Vous n'avez à héberger que lorsque vous le souhaitez, car le compte vous offre deux sites Web gratuits, vous pouvez concevoir autant que vous le souhaitez, ce qui est plutôt cool. Maintenant, l'éditeur est le paramètre de l'éditeur. Ainsi, lorsque vous souhaitez ajouter un collaborateur, vous pouvez inviter quelqu'un. Ici, vous pouvez voir que mon e-mail, je peux modifier et publier. Pour faire plus de collaborateurs, vous devez ajouter un plan CMS ou un plan de site d'affaires Vous devez donc vous rendre ici. De plus, pour obtenir un marquage blanc, vous devez également mettre à niveau, ce qui vous donnera accès à cela. C'est génial si vous souhaitez que des collègues soient gérés par la conception ou plusieurs clients ou personnes l'équipe du client gèrent leur site, il s'agit donc d'une bonne fonctionnalité. Vous avez également la facturation ici. Une fois de plus, je peux voir la facturation exacte pour ce site spécifique, puis la facturation client, comme les autres paramètres que je vous ai montrés dans l'autre module. Ensuite, nous avons le référencement, donc l'optimisation des moteurs de recherche comme nous le savons la plupart d'entre nous. Vous avez une indexation, donc je ne veux pas que mon webflow.io soit indexé dans le moteur de recherche, donc je vais m'assurer que vous voulez le désactiver pour qu' il soit désactivé. Vous avez Robots.txt. Si vous devez télécharger ce texte, vous pouvez le faire. Vous voulez générer automatiquement le plan du site, je l'ai fait alors cochez oui pour cela. Cela vous permet de gagner du temps, donc Webflow le fait automatiquement pour vous. Vous pouvez également effectuer la vérification de votre site Google. Si vous utilisez Google Analytics, c'est ici que vous mettez votre clé et vous connectez à cela, ce qui rend la tâche vraiment, vraiment facile. Alors cette chose, je ne sais pas ce que c'est évidemment. Sur les formulaires. Un formulaire est que lorsque vous utilisez simplement le formulaire Webflow de base, vous n'en intégrez pas un de Mail ou de ConvertKit, vous utilisez simplement le formulaire dans Webflow. Voici les détails du remplissage ici. Le nom, l'e-mail auquel j'ai été envoyé, je veux donc le changer par e-mail de bonjour. La ligne d'objet qui peut être une nouvelle soumission, puis la réponse serait simplement l'un ou l'autre. Si quelqu'un le met via votre formulaire, même si sur ce site Web, je n'ai pas particulièrement de formulaire, mais si c'est le cas, je l'enverrai à mon e-mail. Vous pouvez également mettre le modèle d'e-mail qui enverra une petite chose à la personne qui répond. Vous avez également une validation de récupération, je ne l'utilise pas, puis vous avez des intégrations. Vous pouvez également masquer les envois de formulaires si vous le souhaitez. Restreignez l'accès téléchargé, je viens de l'avoir et de le laisser comme ça. Maintenant, l'une des plus importantes est celle des polices. Si vous souhaitez télécharger vos propres polices pour créer un site Web, vous devez venir ici et le faire ici. C'est super facile, c'est super simple. De toute évidence, je peux choisir des polices dans cette liste ici. Ils en ont en fait beaucoup, ils en ont en fait ajouté quelques autres que la dernière vérification, donc vous devez cliquer sur Google Fonts alors. Mais vous voulez vous résumer à des polices personnalisées. Maintenant, vous pouvez voir mes polices installées. J'ai déjà téléchargé ces polices personnalisées, c' est-à-dire ma police Montreux. Vous pouvez voir le style, si normal, italique, gras, etc. Il s'agit évidemment d'un fichier W-O-F-F, c'est le fichier que vous devez télécharger. Vous pouvez voir, je peux aller à droite et supprimer les polices que je ne veux pas. Si j'en ai un que je n'aime pas, je le supprime simplement. Vous pouvez voir qu'il n'y a que des polices de sauvegarde. C'est super facile, vous pouvez également mettre Adobe Fonts, API, mais mieux vaut laisser, il suffit de télécharger la police. Si je clique sur Charger, par exemple, j'irai dans la section Police de caractères. Vous pouvez évidemment voir télécharger une police. Il va l'importer dans cette fenêtre comme ça. Vous pouvez voir le nom pour que je puisse juste les enlever de 400. Assurez-vous de sélectionner le bon poids. Quel que soit le poids de vos programmes dans InDesign ou Illustrator, vérifiez simplement. Normal, et vous pouvez voir, je peux l'échanger, je peux changer la commande, etc. Ensuite, je cliquerai sur Charger le fichier et il sera téléchargé ici. instant, je ne veux pas faire ça, alors je vais juste laisser ça, mais c'est tellement facile et rapide. Ensuite, nous avons des sauvegardes. Les sauvegardes sont simples. Le site Web enregistre automatiquement une sauvegarde pour vous, de sorte que vous n'avez pas à vous en soucier. Super facile. Vous pouvez prévisualiser ou restaurer. Peut-être que le design, ça n'a pas aimé, tu peux juste revenir en arrière. Super facile. La prochaine étape est celle des intégrations. Maintenant, pour ce côté spécifique, j'ai mon Google Analytics car il suit ce site spécifique sur mes autres sites. Vous pouvez voir mon suivi Universal Analytics, c'est mon code. Maintenant, si je me connecte à Google Analytics, tout va être connecté. Vous avez également un pixel Facebook. Voici ce que je fais. Les publicités, il est connecté à ce pixel ici, et vous pouvez obtenir un code pour cela. Ensuite, la dernière consiste à ajouter du HTML et du CSS personnalisés. Vous pouvez voir ici, dans le code principal, j'ai ce code ici. Maintenant, ce code provient de Flodesk, mon fournisseur de messagerie. Si je vais sur Flodesk, j'utilise essentiellement une API depuis mon compte. C'est ce que j'utilise pour mes e-mails. En gros, c'est dire à Webflow récupérer les formulaires que j'ai créés dans mon Flodesk. Ensuite, il y a tous les onglets dans les paramètres de la fête. Vous avez d'autres choses ici, comme transverse, si vous cliquez sur ce bouton, vous pouvez transférer un site à votre client. Je peux le décomposer dans une vidéo similaire. Vous disposez également du bouton Partager. Vous disposez du bouton Designer, du bouton d'édition et de la publication, qui sont tous disponibles dans le concepteur. 9. Nav + héros: abord, nous allons travailler sur le Nav, donc je vais aller sur Webflow. Je vais aller à gauche et je vais passer à la mise en page et d'habitude, je m'en tiens simplement avec le Sticky Nav ici, simplement simple et facile. Cliquez avec le bouton droit. Je vais double-cliquer sur le « logo Nav » et cliquer avec le bouton gauche et cliquer sur le code, choisir l'image et je vais sélectionner mon logo que j'ai déjà téléchargé dans les images. Cool, donc le logo est dans, maintenant je vais aller à droite et passer au dimensionnement pour que je puisse changer le pixel de celui-ci. Je vais descendre et faire comme 150 pixels. Superbe. Ça devrait bien paraître. Maintenant, je vais aller à la navigation et à droite vous pouvez voir à l'intérieur de cette boîte, nous avons un conteneur et à l'intérieur, nous avons la grille qui contient ces listes de ces autres noms. Nous avons un élément de liste, puis entre ce lien se trouve juste le lien et ces liens vont vers une autre page. Je dois télécharger la police, donc je vais aller dans les paramètres du projet. Je vais cliquer sur « polices » et je vais cliquer sur « télécharger » et je vais localiser mes polices inter, et je vais avoir besoin de gras, de régulier, et celui-ci, et celui-ci, italique extra léger, si gras, régulier, cliquez en italique extra léger « ouvrir » et vous pouvez le voir là-dedans, puis je vais simplement cliquer sur « télécharger », télécharger et télécharger et maintenant j'ai ces polices magnifiques. Maintenant, je vais commencer par changer le site Web. Je dois travailler sur le processus et le contact. Vous avez du travail. Maintenant, je peux aussi appuyer sur « contrôle C », « contrôle V », et cela devrait être dupliqué. Si je le fais depuis le côté gauche, vous pouvez voir, vous pouvez voir, sélectionner l'élément de liste et dupliquer cela comme ça, comme vous pouvez le voir dans le menu du navigateur. J'ai du travail, du travail, du processus et du contact. Maintenant, je peux laisser ce bouton ici si je le veux, je vais simplement le supprimer et m'assurer que vous supprimez le bouton dans l'élément de liste pour que nous puissions le voir. Très bien, j'ai mon menu ici et ce que je vais faire, c'est que je vais le coiffer. Pour ce menu, vous pouvez voir que je double-clique dessus, il est 29 gras en haut. Je vais passer à la topographie, je vais trouver ma police, que j'utilise inter pour cela, je vais choisir le style, le poids, qui est aussi le style. Cliquez sur « gras » et je vais le faire 29, qui est évidemment trop gros à cette taille, mais à ce 1 920 n'a pas l'air si mal, alors je vais juste l'ajuster et allons y aller 19. Ça a l'air bien et la couleur, je vais juste le faire comme un noir pour l'instant, puis cliquez sur « plus », et vous pouvez voir ici, créer. Maintenant, si je retourne à XD, vous pouvez voir que j'ai les couleurs ici, différentes couleurs, donc je peux y aller de l'avant et ajouter cela. Je vais double-cliquer, le sélectionner, puis je peux coller le code hexadécimal ici, dessus avec le bouton gauche, puis cliquer sur « plus » et vous pouvez voir qu'il l'ajoute et je peux le nommer comme je veux. Je peux le changer, il suffit de le rendre gris, d'appuyer sur « créer ». Je vais le faire rapidement pour ces autres couleurs. Ce que vous voulez faire, c'est que si vous êtes sur la topographie, cliquez sur la « couleur » et nous pouvons y accéder et nous pouvons les ajouter. Maintenant, vous pouvez le voir, le contraste dit échouer pour des raisons d'accessibilité. C'est vraiment bien comment Webflow y arrive, mais évidemment, nous pouvons toujours utiliser le collège peu importe si le triple A est vraiment bon. C'est juste pour des raisons de contraste, mais dans ce cas, ça devrait être amusant. Je vais simplement supprimer cette couleur, coller, cliquer sur « plus » et créer. Superbe. Très bien, donc nous avons toutes nos couleurs vraiment cool. Je vais juste m'assurer d'avoir défini la couleur noire, et pour l'arrière-plan aussi, je vais descendre sur le côté droit de ma livre sterling aller à l'arrière-plan et cliquer sur la couleur et je suis Je vais le rendre entièrement blanc comme vous pouvez le voir et maintenant nous avons notre barre de navigation. Vous pouvez voir qu'il est entièrement réactif si je vais à la vue mobile. Superbe. C'est ce qui est génial avec Webflow. Il est simplement réactif automatiquement car nous avons utilisé ces modèles de mise en page. Incroyable. Maintenant, nous allons commencer à construire le reste de tout ça. Vous avez Sticky Nav ici et maintenant une astuce ou un raccourci cool est que vous appuyez sur « Control K » et je peux taper n'importe quoi. Si je peux taper dans div, je peux taper dans la section, je peux taper dans un conteneur, quel qu'il soit. Je vais juste taper dans la section, et vous pouvez voir que je vais juste faire glisser ça. Je vais faire glisser la navigation à l'intérieur de cette section, puis je vais contrôler K et appuyer sur « Container ». Très bien, vous pouvez également aller en haut à gauche et le faire à partir ici et simplement glisser-déposer un conteneur comme celui-ci à l'intérieur de la boîte, c'est très bien aussi. Nous avons le Sticky Nav, nous avons le conteneur, mais vous pouvez voir qu'il se trouve à l'intérieur du Sticky Nav, donc je vais faire glisser ça comme ça et le faire glisser en dessous. Vous pouvez voir que les calques comptent. Assurez-vous de faire glisser le curseur au bon endroit. Je vais appuyer sur « Control K », puis sélectionner un bloc div. Un bloc div est essentiellement comme un bloc normal. Je parlais de quatre problèmes pour construire un bloc de construction, comme un bloc de logo ou un conteneur, une boîte. Ce que nous voulons faire, c'est que nous voulons lui donner un cours ou un tag. Pour celui-ci, nous appellerons ça wrapper et nous pouvons faire de la largeur un certain pixel, donc elle est à 940. Je peux en faire 1 080 si je veux. Cela va s'étendre au-delà de cela. Je peux faire 500 pixels si je veux, comme vous pouvez le voir, donc c'est à vous de décider ce que vous voulez faire. Je peux le poser comme des idées, mais disons simplement que vous faites 600 pixels, vous pouvez aller sur le bouton d'espacement, cliquer sur ce petit carré, et ça va centrer la boîte. Maintenant, par exemple, si je dépose une image à l'intérieur de cette enveloppe, vous pouvez voir qu'elle est entièrement centrée et qu'elle ne fait que 500 pixels. Maintenant, si je clique sur le « wrapper » et que je le fais 1 000, cela va augmenter comme vous pouvez le voir comme ça. C'est assez simple. Je vais juste y retourner. Je vais juste le laisser à 940, parce que c'est réglé. Maintenant, ce que je voulais faire, c'est ajouter quelques éléments, donc je vais y aller, je vais ajouter un en-tête. Assurez-vous de cliquer avec le bouton gauche et de le faire glisser à l'intérieur de l'enveloppe. Je vais également appuyer sur « paragraphe » et nous aurons également besoin des deux images. Je vais juste copier et coller. Je vais copier et coller ça là-dedans, puis nous avons aussi un bouton, donc je vais aller plus, localiser le bouton et ensuite le faire glisser vers le bas comme ça, pour que vous ayez un bouton là. Cool, je vais juste laisser les images de côté pour l'instant. Cool. Maintenant, ce que je vais faire, c'est que je voulais les coiffer. Il s'agit d'un 85 points inter-gras. Je vais passer à la topographie, type 85. Cela pourrait paraître grand, parce que je concevais pour cette taille ici essentiellement. Je vais juste avoir 45 ans. C'est cool. Nous allons passer Inter, Bold. Excellent. Celui-ci est Inter , Regular ou Normal. Parfois, il n'affiche pas correctement les noms, ce qui est très bien. Je vais aller 16 pixels. Habituellement, 16 pixels, c'est bon. Pour le bouton, je vais descendre aux arrière-plans, sur le côté droit, puis je cliquerai simplement avec le bouton gauche sur la couleur que j'avais déjà là. Button, j'ai la couleur. Maintenant, pour le texte, je vais taper, et je vais cliquer sur le « menu » où il y a plus d'options de type. Maintenant, cela va me donner la capacité de capitaliser, sorte que je puisse capitaliser mon bouton, comme vous pouvez le voir là. Je peux double-cliquer dessus, coller ça, et je vais ajuster un peu le crénage, également connu sous le nom d'espacement entre les lettres. Je peux voir l'espacement des lettres si je tape cinq, vous pouvez voir qu'il va l'espacer. C'est juste trop. Je veux peut-être en faire deux. Oh, oui, je pourrais en faire deux, et ensuite je vais changer la police aussi, et ça peut être normal, comme vous pouvez le voir là-bas. Cela ressemble plutôt à ça. Superbe. Maintenant, ce que je peux aussi faire, c'est ajouter un rembourrage supplémentaire. Vous pouvez voir que nous avons du rembourrage ici. Je peux tenir Alt et si je maintiens Alt, il va augmenter les deux côtés, donc je peux tenir Alt et le faire glisser. Peut-être que je veux ajouter un peu plus d'espace, et peut-être que je veux faire 12 pixels. Sur le côté, je veux peut-être devenir un peu plus grand comme ça. OK, cool, c'est un bouton assez solide. Nous avons notre emballage, nous avons le titre, le paragraphe et le bouton. Maintenant, je peux donner une étoile à ça. Il est écrit titre, donc je peux faire le titre et taper H1. J'ai maintenant ajouté une classe combo. Je peux supprimer cette classe et renommer celle-ci en titre H1 comme ça et appuyer sur « Entrée ». Maintenant, il s'agit d'un en-tête de classe H1, ce n'est qu'un paragraphe, et ce n'est que le bouton. Vous pouvez toujours le renommer. Rappelez-vous simplement quels que soient les autres objets du site Web que vous donnez à cette classe, il va y ajouter le même style. OK, c'est cool. C'est ce que nous avons. Pour cet emballage, je vais ajouter un cours de combo, je vais l'appeler héros. Nous avons un wrapper, un héros, et ce que je voulais faire maintenant c'est que je vais y ajouter un peu de rembourrage, et peut-être beaucoup de pixels, donner de l'espace, donner de l'espace pour et peut-être beaucoup de pixels, respirer. Cool. Nous avons également cette section. Maintenant, dans cette section, je vais ajouter mes images. Au lieu d'ajouter les images dans l'enveloppe, je vais les ajouter à l'arrière-plan. En bas à droite, vous pouvez voir les arrière-plans , les images et les dégradés. Je vais cliquer dessus. Je vais aller du bon côté. Vous pouvez voir choisir une image et je vais sélectionner mon petit gars ici. Je vais cliquer sur « contenir » et je vais l'ajuster. Je vais enlever le carrelage. On ne veut pas carrelage ce type ici et on y va 90 pour cent. On peut faire des coutumes. Peut-être que je voulais juste mettre en pixels. Je peux peut-être faire 400 pixels. La largeur et la hauteur. Cool, génial. On a ce type, maintenant on va y ajouter un peu plus de rembourrage. La section, cool. Je peux également ajouter une autre image et je vais ajouter ce rectangle, désactiver le carrelage, puis je vais l'amener à la même position. C'est trop gros, donc on va passer à 50 ans. On y va, et je vais juste faire glisser ça vers le bas pour que tu puisses voir, je le traîne sous Jérémy et tu peux voir maintenant que j' ai ce type là, c'est moi. Je vais aller dans ma section et je vais en fait ajouter un peu de rembourrage. Si je déplace le rembourrage, vous pouvez voir qu'il déplace la partie inférieure, si j'ajoute de la marge, vous pouvez voir qu'il ajoute de l'espace à l'extérieur, mais nous voulons simplement supprimer le rembourrage que vous puissiez voir que la navigation est large, c'est pourquoi la tête est coupée, alors on veut faire tomber ça. Disons simplement une centaine de pixels, et nous pouvons également faire descendre cette enveloppe. Je vais ajouter un peu plus de rembourrage là-bas, et je peux le faire apparaître comme ça et cliquer sur la « section arrière » et si je veux aller de l'avant et peut-être réparer cela, peut-être 250, le réduire, je peux ajustez cela et vous n'avez qu'à jouer avec ces paramètres et si vous jouez, vous pouvez le voir. Je vais juste contrôler Z pour y retourner. Je peux éteindre le 2X, mais c'est éteint. Vous pouvez également ajouter des dégradés et des trucs comme ça et comme vous pouvez le voir, je vais juste contrôler Z et devenir [inaudible]. 10. Travail + services: Cool. Une fois que nous en avons fini, commençons à construire la section suivante. Je vais cliquer sur le « Plus », ajouter une section, la faire glisser et la déposer. Comme vous pouvez le voir, c'est beau, maintenant j'ai la section. Je vais commencer à construire là-dessus. Maintenant, je suis sûr qu'ils ont peut-être une mise en page ici. Vous pouvez voir qu'ils ont une section de cartes. Je vais littéralement faire glisser ça et laisser tomber ça. Vous pouvez parfois voir qu'il ajoute automatiquement la section, sorte que nous pourrions simplement supprimer cette section. Je vais juste commencer à copier ce texte ici. Maintenant, pour que ce texte soit le même que celui-ci, il suffit de sélectionner l'en-tête et de taper h1, et je peux voir les classes existantes. Maintenant, tout ce que j'ai à faire, c'est cliquer avec le bouton gauche et ça va ajouter le même style à la classe. Il va extraire la même police la même police et style bonus. C'est très facile de le faire. Reprenez ici, copiez le texte que j'avais déjà, que j'ai déjà écrit, supprimez ce paragraphe. Maintenant, j'ai ces cartes, ce qui est vraiment cool. Maintenant, je peux choisir une image. Je double-clique sur cette image, cliquez sur « Choisir une image », puis je vais l'ajouter comme ceci. J'ai celui-là, magnifique. Je vais juste le faire rapidement. Cela rend le processus très simple. Le style de paragraphe, assurez-vous que ceux-ci ont le style de celui-ci. Je vais taper un paragraphe, ajouter la classe. Même s'il a le nom du paragraphe, mais vous devez y ajouter la classe. Coiffer sur le côté, et il devrait prendre la police. Superbe. Maintenant, ce que je vais faire c'est cliquer sur la section Cartes. Vous pouvez voir que je suis dans la section Cartes. Retournez à l'arrière-plan, mais cette fois, nous allons cliquer sur « Couleur ». Je vais le sélectionner et choisir la belle couleur crème. Vous pouvez voir à quoi il ressemble. Ce que je vais faire maintenant aussi, je vais aller dans le conteneur de grille car il a automatiquement ajouté une grille. Si je veux modifier la grille, je peux cliquer juste sur la carte derrière elle et cliquer sur le petit carré rouge. Je peux ajuster la taille. Si je ne veux pas d'espacement, je peux simplement faire ça comme ça. Je peux raccourcir un côté si je veux, c'est vraiment à vous de décider, et je peux cliquer sur « Terminé » pour sortir de là. Maintenant, ce que je veux faire est à l'intérieur de cette carte, nous avons le masque d'image et nous avons également un bloc div. Le div block, je vais rendre le fond blanc pour ça. Je vais passer au blanc, cliquer sur « Plus », ce qui est génial. Je peux taper, je vais appeler ça un bloc de cartes. Maintenant, pour les autres, je vais lui donner le même style. Encore une fois, tapez carte, accédez à la classe existante, puis appliquez-la. Dans le bloc de cartes, vous pouvez voir le texte trop loin à gauche. Je peux cliquer sur le bloc de cartes et ajouter un peu de rembourrage. Mais vous pouvez voir que ça va changer les images. Comme vous pouvez le voir, il ajoute du rembourrage autour de tout. Mais ce que nous voulons faire, c'est simplement ajouter un remplissage à l'en-tête et au paragraphe. Nous pouvons ajouter une div et les mettre à l'intérieur de cette div ou de ce bloc. Ce que je peux faire, je vais faire une plongée. Sur le côté gauche, je vais faire glisser l'en-tête et le paragraphe à l'intérieur de cette zone. Je vais appeler ce texte de carte. Ensuite, sur le côté gauche, je vais ajuster quelques rembourrages. Vous pouvez maintenant y voir les rembourrages. Je vais faire environ 20 pixels. Ça a l'air juste. Je peux le tenir et le comprendre [inaudible]. Je vais juste le regarder. Je ne veux pas prendre trop de temps. Ensuite, nous balayons. Maintenant, tout ce que je dois faire est de faire même pour ces autres ici. Allez dans le sélecteur en haut et touchez le texte de la carte, et nous l'avons trouvé. Boom, doux. Maintenant, nous avons ces cartes qui ressemblent à moi de les concevoir. Nous pouvons ajouter un peu d'ombre si nous le voulons, mais je vais juste la laisser pour l'instant. Il est dans un conteneur centré et la carte est géniale. Je vais juste ajouter un peu de rembourrage sur le dessus. Allons 40 pixels juste pour donner de l'espace à respirer là-bas. Superbe. Maintenant, ce que je vais faire, c'est que je vais ajouter une autre section. Je vais juste le traîner ici. Je vais le faire glisser en bas, assurer qu'il est bleu, pas rouge, comme vous pouvez le voir. Les sections doivent être séparées, elles ne peuvent pas être dans une autre boîte, etc. Cette section, je vais la rendre de la même couleur qu'avant. Je vais ajouter un bloc de div et je vais le nommer l'emballage. Vous avez l'emballage là et nous avons juste besoin d'ajouter un conteneur. Je vais chercher un conteneur. N'oubliez pas que vous pouvez toujours faire un cours pour les conteneurs si vous vouliez une certaine largeur, mais je vais le faire comme ça. Je vais également changer la couleur de ce texte, ce n'est pas censé être noir. Ces en-têtes doivent être h2. Rendez-le noir. Je vais juste ajouter une autre section. Control K. Parfois, cela ne fonctionne pas comme vous le vouliez. Je vais juste ajouter une autre section pour voir le conteneur et l'emballage que j'ai. Ce que je vais faire, c'est ajouter une div. Je pourrais aussi ajouter une grille si je le voulais et en mettre une dans chacune. Je pourrais également ajouter une colonne. Je pourrais cliquer sur « Plus », obtenir des colonnes, puis le faire glisser. Faites glisser ça à l'intérieur de l'emballage que nous avons ici. Je vais appuyer sur « Control K » et taper l'image. Faites glisser ça ici. Ensuite, je vais appuyer sur « Control K », taper en-tête, puis faire glisser ceci comme ça. Je peux aussi aller ici et, encore une fois, faire glisser le paragraphe. Je vais également copier, coller, copier tous ces textes. Évidemment, je peux faire une liste et le faire de cette façon, mais je pense que c'est juste une façon [RIRE] plus rapide de le faire. Encore une fois, il suffit d'ajouter les styles au fur et à mesure. Maintenant, vous cliquez sur cette image. Je vais choisir l'image , puis je dois télécharger celle que je voulais. J'ai eu cette image de Unsplash, ça a l'air bien. Génial. Je peux appuyer sur Maj Entrée ici pour faire un point d'arrêt, vous pouvez voir la fin, juste pour que le texte soit plus serré. Ça a l'air bien. Je peux ajouter du rembourrage si je veux, donc 20 pixels pour l'aligner davantage sur le texte. C'est tout à fait très bien. Mais je pense que c'est très bien. C'est juste agréable à nommer. Vous pouvez également nommer vos sections. Évidemment, il est dit la section 2, je peux nommer cette section services. Je peux même faire un tiret, parfois c'est agréable d'ajouter des services de tiret, de section tiret. C'est la carte de celle-ci. Vous pouvez toujours revenir en arrière et ajouter les sections. N'oubliez pas que cela peut modifier d'autres parties de votre site avec le même style. Assurez-vous donc de nommer les choses dès le début du mieux possible. Je vais aller dans le conteneur, puis div block, coiffer cet emballage. Dans ce cas, nous allons avoir un en-tête. Vous pouvez voir. Vous pouvez également choisir les différentes rubriques. Si vous ajoutez une balise globale, donc si je clique avec le bouton gauche, vous pouvez voir qu'elle indique balise HTML et si elle est rose, cela signifie que si vous faites cela, toutes les balises avec ces paramètres comme H1, H2, H3 ont chacune son propre style. Cela ressemble à l'ajout d'une largeur de classe, mais cela l'ajoute à une balise globale par défaut. J'aime juste faire un cours, c'est tout simplement plus facile de suivre comme vous pouvez le voir ici. Nous avons des témoignages Maintenant nous devons avoir cette phrase, et pour celle-ci, ce que je vais faire, c'est que je vais en faire un cours de combo et l'appeler simplement centre. Maintenant, je vais aller dans Typographie et cliquer sur le Centre. Là. Maintenant, il devrait centrer ce texte comme vous pouvez le voir. Très facilement. Maintenant, pour cette section, j'ai besoin d'ajouter un peu de rembourrage juste pour l'éloigner de l'autre section afin que nous ayons de l'espace. Je vais maintenant obtenir un paragraphe. Désolé, pas un paragraphe. Nous devons ajouter une grille ici. Voyons la mise en page, voir s'ils ont quelque chose de similaire. Ils n'ont pas de témoignages. Je pourrais probablement refaire une section de cartes. Mais pour celui-là, je vais ajouter une grille. Je vais faire glisser une grille ici à l'intérieur de l'emballage. Sur la droite, je vais ajouter une autre colonne. Ce que vous voulez faire, c'est cliquer sur le petit bouton plus ici et vous pouvez également le faire ici. Les lignes, je vais supprimer la ligne et avoir trois colonnes comme celle-ci. Maintenant, ce que je vais faire, c'est aller paragraphe et puis nous avons un petit texte là pour que je puisse refaire un paragraphe, mais je vais aller en tête. Nous pouvons passer H5, donc toutes les rubriques H5. Je vais cliquer sur le sélecteur en haut à droite. Tous les réglages H5, nous allons leur donner Inter et nous allons aller plus léger comme ça. Ensuite, je peux copier le nom comme celui-ci et m'assurer que je le fais glisser à l'intérieur, assurez-vous qu'il se trouve dans la bonne grille. Je vais juste faire un div block que je puisse faire glisser les choses à l'intérieur de là. Je vais le faire dans ce cercle. Parfois, il ne fonctionne pas correctement. Je vais glisser à l'intérieur et faire glisser le paragraphe à l'intérieur. Maintenant, nous avons un bloc de div. Maintenant, il est toujours préférable de créer une chose en premier. Je vais ajouter 100 rembourrages en bas. Il est toujours bon de créer un bloc d'abord, puis vous pouvez copier et coller pour que ce soit beaucoup plus rapide. Je vais juste changer rapidement la police à la normale. Il va s'agir d'un paragraphe. Assurez-vous qu'il dispose de la bonne convention de dénomination. Cool. Je vais le coller là-dedans et parce que c'est centré, je vais créer un cours combo que vous puissiez y voir deux classes. Je vais aller à la typographie et le centrer comme ça. Je vais aussi prendre la direction 5 et centre comme ça, boum. Juste comme ça, nous avons un élément sympa. Maintenant, ce que je peux faire ici, c'est que je peux aussi appuyer sur un bloc div. Pour celle-ci, je vais ajouter image et j'ajouterai les étoiles. Ce serait mieux si je n'avais les cinq étoiles comme une seule image, mais pour cela, je pourrais simplement contrôler C et le coller. Mais c'est mieux si vous n'aviez qu'une seule image. Mais maintenant, j'ai un div block avec cinq images des étoiles comme vous pouvez le voir là-bas. Maintenant, je peux juste appeler ça une étoile en tant que classe, puis ajouter un peu de rembourrage, comme vous pouvez le voir là. Peut-être six pixels. Je vais juste supprimer ces autres et copier le coller à nouveau, donc il y a le rembourrage là. On y va, et il y a ce bloc, je vais appeler ça « Star Review », puis je vais centrer ça. Je vais aller sur mon écran Flexbox. Dans Layout, je vais cliquer sur Flexbox , puis nous voulons cliquer sur le centre ici. Il devrait aligner cela sur le centre. Nous avons maintenant nos témoignages. Il a l'air plutôt bien. Maintenant, je vais ajouter un peu de rembourrage ici. Je vais chercher le div block, je pourrais appeler ça un témoignage de carte. Ensuite, je vais copier et coller la même chose. Littéralement, nous le dupliquons comme ça, très facilement. Maintenant, je vais juste copier tout ce texte ici. J'ai les noms de mes clients que j'ai renommés. Je ne voulais pas mettre leur vrai nom. là que nous avons la section témoignage. On y va. Superbe. air joli [inaudible]. Maintenant, c'est presque fini. Juste une petite section avec le bouton et le pied de page. Je peux aller au Navigator. Si je veux appuyer dessus, il va l'épingler pour qu'il soit toujours là, mais j'aime avoir un sans épingle donc j'ai plus d'espace pour travailler. Vous pouvez voir, oui, c'est comme ça que j'aime ça. Je vais ajouter une autre section et la faire glisser vers le bas. Je vais faire la section CTA, changer la couleur. Ensuite, ce que je peux faire, c'est copier cet en-tête et le coller ici. Laissez-moi d'abord chercher le conteneur, puis div block. Ensuite, je le collerai à l'intérieur, donc c'est dans l'emballage. Il est toujours bon de s'assurer que les boîtes que nous empilons tout pour le garder propre et rangé autant que possible. Pour ce texte, il doit s'agir d'un centre H1. C'est là que tu y vas. Tout ce que je veux faire, c'est de pouvoir copier ce bouton si je le veux. Maintenant, si je veux créer un symbole à partir de ce bouton, il suffit de cliquer sur « Créer un symbole ». Je peux également cliquer avec le bouton droit. Il me demanderait de créer un symbole ici comme vous pouvez le voir. Ensuite, je peux appeler ça le bouton principal. Créer. Maintenant, il devient vert. Maintenant, ce bouton, je peux lui donner des paramètres, etc. Mais c'est vraiment utile. Maintenant que je veux accéder aux paramètres, je peux toujours utiliser la même instance. Je peux faire glisser et déposer l'instance de bouton et vous pouvez le voir comme bouton principal. Je peux toujours cliquer avec le bouton droit de la souris et cliquer sur Dissocier une instance. Cela permettra de s'assurer que ce bouton n'est pas l'édition principale. Parce que si je modifie ce bouton, il va affecter ce bouton et je veux donc le dissocier fondamentalement. Je veux ajouter un autre bloc div et simplement graver l'en-tête ici aussi parce que vous voulez que ces choses soient centrées. Ensuite, je vais cliquer sur le Flex, cliquer sur Vertical, puis Centrer. Maintenant, il s'agit d'envelopper et de placer cet objet au centre. C'est l'aligner et le justifier le bloc div que nous venons de créer. On l'a fait bloquer à l'intérieur de l'emballage. Appelons ça l'alignement du centre pour l'instant. Faites en sorte que votre marque se démarque. Appuyez sur « Entrée ». Maintenant, je pourrais ajuster la location ici. C'est un peu serré. Les hauteurs, on y va 50. On y va. La hauteur des lettres, d'accord, ce sera mieux. Section CTA, je vais ajouter un peu de rembourrage, donc je vais maintenir Alt, traîner. là que nous l'avons. Nous avons déjà créé notre page. Maintenant, pour le bouton, je peux cliquer sur le rouage, cliquer sur une page et disons qu'il va aller à la page Contact, puis cliquer sur nouvel onglet. Maintenant, si je clique en haut à gauche, vous verrez un aperçu. Maintenant, je peux voir à quoi ressemblerait mon site. Il y a un problème ici avec l'image. Je devrai peut-être arranger ça. C'est peut-être parce que mon PNG est un peu désactivé, mais de toute façon, ça n'a pas d'importance. Par exemple, cliquez sur le bouton maintenant. Je peux cliquer dessus avec le bouton gauche et j'irai sur l'autre page. n'y a évidemment rien sur cette page. En 20, 30 minutes, nous avons construit ce site. Je vais revenir sur ma page d'accueil et nous pourrons faire peu d'ajustements. Par exemple, ce bouton, et ce que je peux faire, c'est faire un état de survol. Je vais aller dans le sélecteur en haut, cliquer sur le menu déroulant, cliquer sur Survol. Maintenant, ce que je veux faire ici, c'est aller à la couleur et je peux la rendre noire ou comme un rouge foncé. Alors peut-être que je veux juste passer comme un rouge foncé ou quelque chose comme ça. Maintenant, si je clique sur un Aucun, je change les états de survol. C'est donc l'état de survol, puis je reviens en arrière, cliquez sur « Aucun ». Maintenant, si je clique sur « Aperçu », mettez ma souris, vous pouvez voir maintenant qu'il a un état de survol, ce qui est génial. C'est tellement bien quand on fait ça. Maintenant, vous pouvez faire des états de presse, vous pouvez faire des actions ciblées , etc., mais j'essaie rester simple et de laisser cela comme ça. Incroyable. Nous avons fait notre page maintenant, je veux créer la page portfolio. 11. Pied de page: Je vais rapidement terminer le pied de page , puis nous pourrons passer à la page suivante. Je vais juste revenir ici et copier ces liens. On peut voir ici. Copiez-les. Vous pouvez voir que les textes se trouvent dans chaque liste distincte. Vous pouvez voir qu'il s'agit d'une liste, puis dans la liste se trouve un élément de liste. Chaque texte est fondamentalement un lien différent. Il se peut que nous ayons besoin de taper à la maison, à propos et à contacter. Ensuite, nous allons supprimer les autres éléments de la liste, nous allons donc naviguer vers la gauche et laisser simplement ces éléments, puis les ressources. Je peux simplement taper des outils et des cadeaux. Je vous donne juste des idées sur certaines choses que vous pouvez avoir dans le pied de page. Habituellement, il s'agit simplement de liens supplémentaires pour aider les gens à vous trouver ou à vous contacter s'ils sont perdus. Ensuite, vous avez des réseaux sociaux. Eh bien, ça s'appelle Meta maintenant, donc on va juste l'appeler Meta. Instagram, Twitter. Ensuite, vous avez ce texte ici. Maintenant, nous pouvons changer l'image de cette situation. Habituellement, j'aime juste mettre le logo, ce qui est vraiment cool. Vous pouvez peut-être ajouter ça. Ensuite, le titre de pied de page. Je dois changer cela en inter, et nous allons devenir audacieux. C'est très bien. Ensuite, ce lien de pied de page. Même chose, je vais juste passer inter, normal. Puis pompez-le jusqu'à 16. Je pense que c'est vraiment cool. La page inférieure. Je peux copier ce texte, le copier et le coller, comme ça. Nous voulons nous assurer qu'il va ressembler à la façon dont nous l'avons conçu. Je suis dans le pied de page ici, et j'ai différents blocs de div. Si je copie et colle un autre bloc div, vous pouvez voir d'autres liens. Je vais faire glisser les blocs de texte l'intérieur d'eux et supprimer simplement les éléments de la liste, et l'en-tête peut être supprimé. Vous pouvez le voir, et je vais juste appuyer sur Entrée là-dessus, et cela devrait le faire comme ça. Ensuite, sur ce bloc de div, je vais juste appeler ça un copyright en tant que classe, ajouter un peu de rembourrage sur le dessus pour faire baisser si je veux, comme ça. Vous pouvez voir qu'il est en quelque sorte aligné là. J'utilise simplement mon œil pour le rendre exact. Je pense que 40 pixels vont faire. Ensuite, il suffit de changer la police, 60 normaux. On y va. Je peux lier le logo si nous le voulons, mais évidemment, cela va changer la taille et tout. Mais je pense que c'est très bien. Essentiellement, la même chose. Là, nous avons notre page principale, c'est superbe. Maintenant, quelques choses que je veux faire. Je souhaite sélectionner le pied de page et je souhaite cliquer avec le bouton droit de la souris et en faire un symbole. Je vais donc créer un symbole, et je l'appellerai un pied de page. Maintenant, lorsque nous l'utiliserons à la page suivante, ça va être pareil. Ensuite, je vais aussi faire cette navigation collante. Créez un symbole, et je l'appellerai simplement nav. Maintenant, nous sommes prêts à y aller. Ce que je vais faire, c'est que je peux continuer et dupliquer cette page pour la page de travail, ou je peux simplement accéder à la page de travail. 12. Page de projet: Commençons à construire ça. Je vais aller dans mon onglet à gauche, et vous pouvez voir que j'ai un nouveau symbole, le Nav. Ensuite, je peux également y faire glisser le pied de page. Avec le pied de page et la navigation, ce que je vais faire est appuyer sur « Control K », Rechercher la section, et d'y amener cette section comme ceci et je vais commencer à construire la page secondaire, ce qui devrait soyez assez facile. Nous allons ajouter un conteneur ici, puis dans ce bloc div. Ensuite, nous nommons le bloc div, l'emballage. Ensuite, nous allons ajouter un titre, qui sera un H1. Rendez ça noir. Fais-le comme ça. Je vais appeler ce wrapper, puis ajouter un autre cours appelé travail. Je vais ajouter un peu de rembourrage en haut et en bas, il y a 100 pixels. Je vais juste ajouter une autre section. En dessous, pour la partie suivante, je vais simplement changer la couleur de cette section suivante. Pour celui-là, nous avons également le texte. Ce que je peux faire pour celui-là, je peux ajouter une grille. Je vais juste ajouter une grille et nous n'avons pas besoin de ligne, alors je vais cliquer sur la petite poubelle. Je vais l'utiliser, je vais le faire glisser pour faire 1,75. Je vais cliquer vers le bas et faire glisser le titre à l'intérieur de cette boîte à gauche. Maintenant, sur l'autre case, je peux aller sur le paragraphe et c'est maintenant à l'intérieur de cette grille. Nous avons essentiellement deux colonnes dans cette grille et ce cool avec une grille, c'est qu'elle la rend réactive. Nous devons simplement nous assurer qu'il est vertical et qu'il s'empilera l'un sur l'autre. Mais il utilise essentiellement Flexbox, ce qui est génial. Ensuite, je peux juste aimer venir ici, copier et coller le texte. Je vais devoir sélectionner ce type et vous pouvez le sélectionner. Vous pouvez voir que vous avez quelques options ici, donc je peux insérer des liens. Je peux vraiment m'envelopper avec la travée. Si je dois créer une classe personnalisée dans ce paragraphe, je peux le faire. Si je clique dessus et que je l'appelle c'est H3, H2, ça devrait fonctionner. Je vais juste ajouter un en-tête, on peut passer l'en-tête H4. Je vais juste le faire glisser à l'intérieur de ça. Je vais juste faire une plongée pour que nous puissions jeter les choses dans cette boîte. Maintenant, toutes ces choses dans sa propre boîte et ensuite je peux taper rôle, donc je peux le supprimer ici. Il suffit de taper des tirets. Je peux copier coller l'en-tête, je le fais glisser ci-dessous. Nous ajoutons un paragraphe, puis nous le collons comme ça. Ensuite, l'année, même chose, copiez le collage, faites-le glisser en dessous. Nous avons un an et nous avons mis un paragraphe, mettez 2020 comme ça. Il suffit de le styler avec la classe de paragraphes. Paragraphe Juste comme ça. Alors, boum, on a quelque chose comme ça. Nous allons simplement passer à la conception de gabarits, excellent. Maintenant, nous avons notre page ici et nous avons fière allure. Il n'est pas nécessaire que ce soit exact. Nous pouvons toujours simplement simplifier les choses comme celle-ci. Cool, alors maintenant ce que je vais faire, je vais ajouter les images. Je peux en fait ajouter une autre grille si je le voulais, il suffit de rester très simple, je vais me débarrasser des lignes et me débarrasser de la colonne. Maintenant, j'ai une colonne. Je vais juste m'assurer que la grille se trouve dans le conteneur. Nous veillons à ce qu'il soit centré. Je pourrais le mettre dans l'emballage, mais le conteneur le centre déjà. Alors tout ce que j'ai à faire, je peux appeler cette grille 3 et on peut juste appeler ça marche. Maintenant, je vais sélectionner une image dans la section médias et je vais la déposer. Choisissez l'image et maintenant je peux commencer à coller ça. Ce que nous voulons faire, vous pouvez voir comment cette section la chevauche. Je vais juste ajuster le rembourrage de cette grille comme celle-ci en premier et la partie supérieure, je peux augmenter la marge. Je peux également ajuster le rembourrage. abord, je vais simplement copier et coller les images, puis je peux simplement passer en revue, c'est juste dupliquer le bloc d'image et ensuite je peux simplement passer en revue et changer les images. Je double-clique, remplace, remplace et maintenant vous pouvez voir que nous avons ces images comme ça, c'est ce que nous voulions. Pour chevaucher les sections, il suffit d'aller la grille et je pourrais le faire sur le conteneur. Mais si vous faites cela, il va changer tous les conteneurs avec cette chose. Mais je vais aller sur la grille et je vais changer le rembourrage et le faire glisser vers le bas. Je fais juste un clic gauche et je glisse pour faire moins. Allons-y moins 135. Je vais ajouter un peu de rembourrage à la partie supérieure. Passons à 100 pixels, puis nous reviendrons à la grille et nous obtiendrons moins comme 150, comme vous pouvez le voir en bas sur le côté droit. Maintenant, vous pouvez voir que nous avons cet effet de chevauchement. Maintenant, si nous passons au mobile, vous pouvez voir qu'il se chevauche toujours, ce qui est cool. beau, trop facile. Maintenant, nous allons juste ajouter la dernière touche finale. Je vais ajouter une div en bas ici, puis je vais ajouter un en-tête pour le prochain projet. Je vais juste le nommer encore une fois, Wrapper. Prochain projet, cela peut être un en-tête H1 et ce que je vais faire, c'est que je vais appeler ce wrapper ensuite, puis c'est que je vais appeler ce wrapper ensuite, appeler ensuite. Je pense que c'est à l'intérieur de la grille, donc j'ai juste besoin de le faire glisser à l'extérieur de la grille pendant une seconde. Je vais juste faire un autre conteneur et ensuite mettre l'emballage à l'intérieur de ce contenant. Assurez-vous de le faire glisser hors de là, de déposer ici et m'assurer qu'il se trouve à l'intérieur de la section. Vous pouvez voir les lignes, il vous indique où elles se trouvent, donc je veux simplement les faire glisser par-dessus. D'habitude, je traîne juste en dessous comme ça. Maintenant, c'est à l'intérieur de cette section. Je vais ajouter un peu de rembourrage à cette section. Allons 135 pixels et dans ce wrapper ensuite, j'ai ceci et j'ai besoin d'une image. Je vais choisir l'image, je vais sélectionner la flèche. Maintenant, pour obtenir la flèche à côté de cela, je vais aller à l'enveloppe, je vais aller dans Layout, cliquez sur la Flexbox et vous pouvez voir maintenant qu'il est passé à l'horizontale. Maintenant, sur cette image, je peux lui donner une classe de flèches, puis ajouter un peu de rembourrage comme celui-ci. La flèche est un peu trop grosse, donc je vais la rendre plus petite. Ce que je vais faire, c'est que je vais aller au plus haut et simplement modifier le pourcentage. Vous pouvez voir si vous cliquez sur le petit bouton ici, vous pouvez modifier les pixels. PX est des pixels, vous avez un pourcentage, vous avez EM, vous avez CH, que vous avez VW, qui est la largeur de vue, VH qui est la hauteur de vue, puis vous avez automatique. En général, j'utilise simplement le pourcentage, les pixels et parfois j'utilise aussi la hauteur de la vue. Mais pour cela, je vais utiliser le pourcentage. C'est à l'intérieur de cet emballage, cet emballage traverse tout le long. En gros, pour le moment, la largeur est de 39 % de la taille totale ou de la largeur de l'emballage réel. En appuyant sur Control Z, je vais juste changer cela à 20 pour cent pour la largeur, nous allons passer à 25 pour cent. Ensuite, je vais ajouter un peu de rembourrage juste pour le faire passer. Je vais laisser tomber le rembourrage de cela aussi et nous l'avons là, nous avons la flèche là qui ressemble un peu plus à la taille d'ici, ce qui est vraiment cool, beau. Maintenant que cette page fonctionne, je vais maintenant revenir sur mes pages, aller sur la page d'accueil. Maintenant, ce que nous voulons faire, c'est que nous voulons que cette carte soit liée à l'autre page. Ce que nous devons faire, c'est que nous avons ce bloc de cartes et nous avons le masque d'image de la carte. Ce que nous devons faire, c'est que vous devez ajouter un bloc de liens. Je vais appuyer sur le bouton Plus et descendre au bloc de liens. Maintenant, il s'agit simplement d'une boîte avec un lien attaché à celle-ci afin que nous puissions nous assurer que la carte sur laquelle nous cliquons sera liée. Je vais juste introduire le bloc de liens dans le bloc de cartes. Je vais introduire le masque d'image de la carte dans le bloc de liens. Je vais m'assurer que la largeur est à 100 % pour que vous puissiez le voir. Maintenant, nous avons le bloc de carte, nous avons un bloc de liens et, dans le bloc de liens, nous avons le masque d'image de la carte, avec les images. Je vais cliquer avec le bouton gauche sur le bloc de liens et vous pouvez cliquer sur le petit rouage ici, ou vous pouvez aller sur le rouage droit à droite. Comme vous pouvez le voir, j'aime bien le faire sur le côté droit, donc je vais cliquer sur le rouage, cliquer sur la page et je vais accéder à la section Travail. Si je veux accéder à un nouvel onglet, je peux cliquer sur ce bouton, mais si ce n'est pas le cas, je vais le quitter. Je vais aller dans le coin supérieur gauche et basculer l'aperçu. Maintenant, quand je passe au-dessus de ma souris, je vais cliquer avec le bouton gauche et ça va m'amener à la page Web, qui est celle que nous venons de créer, comme vous pouvez le voir là-bas. Maintenant, que se passe-t-il si nous voulions ajouter un survol au-dessus de l'image ? Je vais aller au bloc de liens ici, je vais faire défiler jusqu'au bas. Maintenant, ce que nous allons faire, c'est que nous voulons changer l'opacité. Je vais cliquer en haut à droite, sur le sélecteur, cliquer sur le bouton Survol et ce que je vais faire, c'est que je peux laisser tomber l'opacité vers le bas, ou je peux ajouter une couleur par-dessus. Ajoutons un filtre. Je peux faire de la saturation, par exemple. Si je voulais passer comme le noir ou le blanc, baisser la saturation à zéro pour cent. Maintenant, quand je survole ça, ça va devenir noir et blanc comme vous pouvez le voir. Par exemple, je clique sur « Aperçu », j'enfonce ma souris dessus et maintenant vous pouvez voir les changements de souris. Je clique dessus, boum, juste comme ça. Vous pouvez l'amener à changer de couleur. Vous pouvez le faire évoluer si vous le souhaitez. Vous pouvez ajouter n'importe lequel de ces effets ou couleurs, etc. Cela va littéralement changer son apparence. Si je passe en survol, si je vais aussi presser, je peux le supprimer. Pour ce qui est de cela, changeons simplement l'échelle. Maintenant, revenons en arrière. Maintenant, si je vais dans Aperçu et que je tire ma souris et que je clique avec le bouton gauche, vous pouvez voir qu'elle est mise à l'échelle. Vous voyez ça ? Si je lâche prise, ça va disparaître. Assez cool, vous pouvez faire comme de petites interactions et de petites choses, mais nous avons fait notre site Web et maintenant je vais vous montrer comment faire un peu de référencement dans certaines choses de dernière minute pour le site Web. 13. Rendez-la réactive: Maintenant, ce que je vais faire, c'est vous montrer comment rendre le site web réactif. Nous allons simplement utiliser la page d'accueil pour l'instant. Ce que je veux faire, c'est aller au point de rupture supérieur et cliquer sur la tablette. Comme vous pouvez le constater, nous commençons à voir certaines choses qui ne fonctionnent pas. N'oubliez pas que quel que soit le changement que nous effectuons sur le bureau affectera les modifications inférieures. Mais quel que soit le changement que vous apportez sur le mobile, n'affectera pas le bureau ou l'iPad. Il descend en cascade. Si j'apporte des modifications sur l'iPad, cela devrait affecter les plus bas et cela n'affectera pas le bureau. Si j'apporte des modifications ici, la vue du bureau ne sera pas affectée. Je vais cliquer là-dessus. Ce que je peux faire, c'est que je peux réduire le texte ou rendre l'image d'arrière-plan invisible pour le rendre ajusté. Par exemple, je vais cliquer sur « Section », puis je vais passer à Backgrounds, et je vais éteindre le globe oculaire. Maintenant, vous pouvez voir qu'il l'éteint. Si je retourne au bureau, vous pouvez voir que mon image de moi-même est là, et c'est tout à fait correct. Maintenant, revenez ici. C'est éteint. Si je vais sur le bureau, on peut voir que l'image a disparu, ce qui est super facile. Je peux laisser le texte là. Il est lisible. Il fonctionne. Tout s'intègre ici parce que c'est comme une belle carte qui fonctionne ici. Pour que nous puissions déplacer cela, au lieu de déplacer le rembourrage et la marge parce qu'ils sont placés dans une certaine zone dans une colonne, ce que je peux faire est de descendre et nous voulons passer à notre positionnement. Il est à l'état statique en ce moment. Ce que je veux faire, c'est cliquer sur « Relative ». Relative le fait fonctionner en fonction de la section dans laquelle il se trouve. Ce que je peux vraiment faire, c'est que je peux jouer avec la largeur ici. Je peux faire glisser le positionnement et il va le tirer vers la gauche, ce qui est cool. Pour le bureau, vous pouvez voir que rien ne se passe. Si je passe au mobile et que je fais défiler, vous pouvez voir que c'est vraiment gros. J'ai peut-être besoin de réduire ça. Vous pouvez voir, je peux éventuellement le ramener comme ça. Je vais revenir à la vue iPad. positionnement relatif nous permet de contrôler cette image casser en dehors d'une boîte et de l' amener en fonction de la section. Nous pouvons regarder des témoignages. Vous pouvez voir que la dernière est coupée. Ce que je veux faire, c'est que je vais sélectionner la grille. Ce que nous voulons maintenant faire, c'est que nous voulons changer la grille en deux lignes. Je vais cliquer sur « Modifier la grille ». Maintenant, je vais aller à droite, aller sur ce petit point rouge plus, et cliquer sur « Plus ». Maintenant, je vais supprimer cette ligne maintenant pour pouvoir cliquer avec le bouton droit de la souris et cliquer sur « Supprimer la colonne ». Ensuite, je peux cliquer ici avec le bouton droit de la souris et supprimer cette colonne ici, comme vous pouvez le voir. Je vais juste réduire cela à l'aide cette petite boîte à outils. Je vais appuyer sur « Terminé ». Maintenant, les témoignages sont au centre. Ce témoignage doit également être centré ici. Je vais ajuster le rembourrage ici et le pomper comme ça juste au centre. Je vais juste le regarder. Cool, facile. Ça a l'air bien. Ensuite, le bouton ici, nous avons le texte et le bouton qui semble être tout vertical. Je vais juste obtenir le bouton, puis je vais juste ajuster les marges pour y remédier. Superbe. La photo n'est pas trop mauvaise. Je pense que c'est bon. Je pourrais simplement laisser tomber la taille du texte ici, ce qui est génial. Désormais sur le bureau, la taille du texte est toujours la même que celle initialement conçue. La vue iPad va être un peu plus petite. Superbe. Ça a l'air bien. Ça a l'air génial. Je pense que je dois ajouter un peu plus de rembourrage à cette section, comme ça. Superbe. Il s'agit du mode paysage. En général, je ne touche pas à ça parce que évidemment, les gens ne regardent pas de vidéos comme ça à moins qu'il ne s'agisse d'un certain type de personne. Mais d'habitude, je saute ça et je vais directement au mobile. Le mobile est cette vue. Maintenant, vous pouvez voir que nous avons le menu. Il est déjà activé. Vous pouvez évidemment personnaliser ce menu ici. Je peux changer de couleur. Je peux modifier les liens. Je peux changer de téléphone, etc. Mais comme nous l'avions déjà, par exemple, si j'ai un survol, je vais changer la couleur, et nous irons comme cette couleur rouge. Maintenant, lorsque je survole ma souris, vous pouvez voir qu' il y a une sélection rouge. De toute évidence, lorsque quelqu'un est sur son téléphone, son pouce clique et fait défiler, de sorte qu'il ne pourra pas le voir. Mais s'ils sont en quelque sorte sur le navigateur et qu'il est de petite taille, cela ressemblera à ça. Je pense que c'est bien. Maintenant, ce que je vais faire pour cela, c'est de passer à ma typographie et je vais réduire considérablement la taille. Je vais changer la hauteur, qui est [inaudible] ou l'espacement entre les lignes. J'irai peut-être 30 ans. Changez cela par 25. Je vais aussi rompre ça comme ça. Maintenant, je vais aller à l'emballage et je vais aller sur le rembourrage à gauche et apporter ça comme ça. Je vais appuyer sur « Maj-Entrée » ici pour faire un saut de page. Ce que je peux faire, c'est réduire cela aussi si je le voulais, le rembourrage en bas. Le travail faisait déjà partie d'un joli petit groupe de cartes. C'est déjà tout réactif. Ici, je vais apporter le rembourrage. Ce que je peux réellement faire, c'est que je peux augmenter ou diminuer la taille de la police. Je veux juste appuyer sur « Entrée » et nous verrons ce qui se passe là-bas. Je pense que c'est bon pour cette image. Je pense que c'est très bien. Je vais juste le changer en statique. Il devrait être réparé. Voyons ici. Ensuite, la vue mobile. Facile. Je pense que c'est très bien. Le rembourrage. Les images. Je ne sais pas ce qui se passe avec ça, ça continue à grossir. Maintenant, nous avons aussi ces témoignages. [BRUIT] C'est dans une grille. Je vais juste m'assurer que tout est centré également. Prenez la carte, puis tirez ce rembourrage comme celui-ci. Vous avez maintenant un rembourrage sur les côtés, ce qui le rend ajusté. Le témoignage, il suffit d'ajuster le rembourrage là, s'adapte comme ça. Superbe. C'est trop facile. Je vais juste ajuster le rembourrage du bloc div dans lequel il se trouve, comme vous pouvez le voir. Le pied de page est déjà bon et prêt à être utilisé. C'est essentiellement de cette façon que vous rendez votre site Web réactif. Maintenant, si je clique sur « Aperçu » et que je réduit mon navigateur. Vous pouvez voir que si je réduit mon navigateur maintenant, il commence à devenir réactif. On y va. Il s'agit évidemment d'une certaine taille. Parfois, votre site Web ne sera pas parfait dans toutes les tailles, mais la plupart des tailles, il aura fière allure. Vous pouvez le voir là. Donc quelqu'un va [inaudible] voir à quoi ça ressemble. C'est pourquoi il est génial d'utiliser des grilles et des boîtes flexibles car il est facile d'empiler des objets et il est facile de les rendre réactifs. 14. SEO de base: [MUSIQUE] Je vais juste vous montrer comment faire un référencement de base. Une fois que vous avez finalisé votre site Web et que vous avez ajusté tout ce dont vous avez besoin, il vous suffit d'aller dans la section page en haut à gauche. Accédez aux pages principales qui contiennent le contenu et cliquez sur le petit bouton d'appel. Il vous amènera aux paramètres de la page d'accueil ici. Une fois que vous avez ajouté un plan de site, vous pouvez protéger par mot de passe une page d'apprentissage spécifique. Peut-être avez-vous un client privé ou une audience que vous souhaitez lui envoyer une certaine chose, alors nous aurons besoin d'un mot de passe. Mais c'est ça. Ensuite, nous descendons et nous avons obtenu les paramètres SEO. s'agit d'un aperçu de ce à quoi cela va ressembler dans Google Search. Par exemple, si je vais sur Google et que je saisis mon site Web, vous pouvez voir Jeremy Mura- Home. C'est ce qu'il dit ici et c'est le titre que j'ai là. Lorsque vous avez différents sites Web, vous pouvez voir Google, il possède les sous-sites qu'il affiche. Ce que nous devons faire, c'est ajouter la balise de titre. Chaque fois que vous faites cela, vous voulez vous assurer d'utiliser des mots-clés liés à votre créneau, à votre emplacement et à des éléments pertinents. En gros, je peux dire Brand Identity Designer à l'ouest de Sydney-Jeremy Mura. J'utilise Sydney, spécifique à Western Sydney. J'utilise Brand Identity Designer ou je pourrais dire concepteur de logo, qui pourrait fonctionner. Essayez de trouver vos mots-clés que les gens recherchent réellement. Ensuite, nous avons la description Meta. Cette métadescription est essentiellement le texte supplémentaire. Vous pouvez voir le texte ici en bas. Vous pouvez dire que Jeremy aide les petites entreprises à créer une marque stratégique pour développer leur activité en ligne. Ce n'est qu'une ligne. Généralement, vous voulez essayer d'avoir deux lignes, mais cela peut être assez court. Créez une marque stratégique pour développer leur activité en ligne et créer un public qui aime leurs produits. Cool. J'y ai mis des petites entreprises mais stratégiques. Soyez probablement bon si je dis identité de marque stratégique pour développer leur activité en ligne et créer un public qui aime leurs produits. Cool. Vous pouvez voir l'aperçu ici, quoi il apparaît ; c'est plutôt cool. Génial. Vous avez maintenant les paramètres Open Graph. Généralement, je ne le fais pas vraiment parce que je ne partage pas de choses sur mon site Web sur Twitter. Si je suis sur Instagram ou YouTube, je le partage directement sur mes autres pages sociales. Si vous avez des blogs et des trucs, cela est utile. Mais encore une fois, Open Graph. Il vous indique tout ce que vous partagez sur Facebook, Pinterest, Google depuis votre site Web. Vous pouvez également ajuster le titre, la description. Vous pouvez avoir une URL ici. Vous pouvez le faire. Mais en général, je laisse ça de côté. Vous pouvez voir ici Google a un compte et aller sur Google Classroom et continuer sur Google Drive. Si vous ne souhaitez pas que certains sites Web s'affichent, vous pouvez simplement cliquer sur « Exclure cette page des résultats de recherche de sites ». Cela signifie essentiellement qu'il le cachera des bots de recherche qui balayent cette page en gros. Mais si vous le voulez, alors vous pouvez voir que ce qu'il va apparaître en tant que balise de titre, je peux le désactiver ou l'activer, comme la description. Vous pouvez aussi avoir une image , mais c'est tout à fait très bien. Ensuite, vous avez également un code personnalisé. En général, je laisse ça, je ne touche pas à ça. Fondamentalement, c'est comme ça que vous ajoutez le référencement. Vous devez le faire pour chaque site Web individuel. Une dernière chose quand il s'agit également de référencement, en utilisant évidemment l'interface de ligne de commande, titres avec des mots-clés pertinents et des trucs comme ça. Mais vous pouvez également accéder à vos images. Je vais juste enregistrer les modifications. Je vais voir mes images. Par exemple, je vais voir cette image ici. Cliquez sur l'appel. Vous pouvez voir en bas il y a du texte Alt. Alt Text est un texte HTML qui apparaît pendant le chargement du site Web. Si le site Web ne peut pas charger l'image pour quelque raison que ce soit , Internet lent, etc., vous devez être descriptif ici. Je dirai l'image personne qui marche par la conception de la posture. Je suis descriptif, expliquant ce qu'est le site Web. Arrêtez complètement. Vous pouvez également utiliser des éléments décoratifs, ne pas transmettre de sens et ne nécessitent pas de texte Alt. S'il s'agit simplement d'une image comme une illustration, vous cliquez sur « Décoratif » ou sur une icône. Mais s'il contient un peu de description, vous pouvez l'ajouter à nouveau. De toute évidence, j'y suis retourné et c'est parti maintenant. Mais c'est Alt Text quand il s'agit de SEO. Le site Web vous indiquera généralement si vous devez l'ajuster. Généralement, si vous venez ici, il vous indiquera des choses à adapter au site Web. En dehors de cela, la seule autre chose est de s'inscrire à Google Analytics. Si je vais vérifier mon compte, je vais me connecter rapidement ici. Vous pouvez voir ici que je consulte quelques détails sur mon site Web. Deux cents utilisateurs, 230 sessions, taux de rebond est de 66 pour cent. Durée de la session. Combien de temps quelqu'un est sur mon site ? C'est pour une minute. Je peux découvrir ce qui est direct, ce qui vient du social, etc. C'est plutôt cool. Références, différents sites Web, YouTube, Webflow. C'est génial. Je peux regarder par pays, ce qui est génial aussi. Cela me donne tout un tas de détails pour que je puisse voir quelles parties de mon site Web font le mieux. La page d'accueil a le plus de vues, la boutique a le deuxième plus de vues. Ensuite, mon guide de conception gratuit est le suivant, puis la Mura Academy est la prochaine. Je peux voir si je peux améliorer mon site Web ? Puis-je améliorer la conversion, etc. ? Il est également bon de prêter attention aux ordinateurs de bureau et aux appareils mobiles. Beaucoup de gens regardent depuis un ordinateur de bureau, comme 75 %. Le mobile est à 23 % en ce moment, ce qui est cool. Configurez Google Analytics et cela va vraiment vous aider à gérer le site Web et à améliorer le référencement. Une dernière chose est Google My Business et vous obtiendrez un site Web qui apparaîtra, vous voulez cliquer dessus. C'est ainsi que vous obtenez une page sur Google. Vous pouvez vous inscrire. J'en ai déjà un pour pouvoir cliquer sur « Gérer maintenant ». Voyons s'il charge ma page. Superbe. C'est une autre bonne chose pour le référencement. Vous apparaîtrez lorsque des utilisateurs effectuent des recherches sur le moteur de recherche. Chez moi, je peux voir ici les vues que l'on appelle la performance. Je peux mettre à jour mes heures d'ouverture. Je peux regarder mes commentaires. Si je clique sur « Gérer les avis », vous pouvez voir tous mes commentaires comme celui-ci. Maintenant, si je vais très vite sur Google et que je tape designs Jeremy Mura, vous pouvez voir, boum, ça sort juste sur Google. Vous pouvez voir qu'il est certifié. Il me dit combien de vues, j'ai aussi mes commentaires sur le bon côté et il y a tous les détails. Je recommande également de le faire à des fins de référencement. Cela va booster ça. Évidemment, vous pouvez gérer les choses à partir d'ici, mais une fois que vous aurez tout mis à jour et mis votre site Web, cela facilitera la recherche et la recherche des utilisateurs . Ce sont mes conseils de base pour le référencement. 15. Intégrer un formulaire de calendrier et d'e-mail: [MUSIQUE] Maintenant, je vais vous montrer comment intégrer HTML. Vous avez peut-être un formulaire Mailchimp que vous souhaitez y mettre, ou peut-être que vous souhaitez mettre votre calendrier de rendez-vous ou vos calendriers, quelque chose comme ça. Je vais vous montrer comment utiliser ça. J'ai ma mise en page simple. Je viens d'avoir le conteneur, un emballage, puis une boîte de div, et je l'ai appelé Calendly. Ce que je vais faire, c'est d'aller sur le bouton Plus, défiler vers le bas et d'aller à l'intégration. Je vais faire glisser et déposer ça dans la boîte. Il va vous demander un code personnalisé. Ce que je vais faire, c'est aller sur mon Calendly, quel que soit le site que vous utilisez. Je vais cliquer sur le « rouage » et cliquer sur « Ajouter au site Web ». Ce que je peux faire, c'est en faire un texte contextuel ou une intégration en ligne. Pour cette situation, je vais utiliser l'intégration en ligne, et je vais cliquer sur « Continuer ». Ce qui va se passer, il va produire ce code ici, comme vous pouvez le constater, qui est essentiellement HTML. Ce que nous allons faire, c'est « Control C » ou nous pouvons cliquer sur le petit bouton « Copier le code ». Je vais le coller dans cette zone, puis appuyer sur « Enregistrer et fermer ». Chaque fois que vous effectuez une intégration HTML, elle ne sera pas diffusée en direct. Même lorsque vous le prévisualisez, il n'apparaîtra pas. Il n'apparaîtra que lorsque vous publiez réellement le site. Je vais dans le coin supérieur, puis je vais publier. Évidemment, je n'ai pas configuré de domaine pour cela parce que c'est juste une version que nous faisons pour la classe maintenant, mais je peux publier sur webflow.io. Je vais cliquer sur « Publier ». Une fois cela fait, il sera publié. Super. Succès. Maintenant, je peux cliquer avec le bouton gauche sur cette petite flèche, juste comme ça, et ça va m'emmener sur le site Web réel, avec le site web webflow.io. Je peux faire défiler vers le bas, et il a en fait mon formulaire Calendly intégré dans lequel les gens peuvent venir réserver un cours. Ils viennent ici, ils veulent peut-être réserver une consultation, ils peuvent cliquer ici, et cela les amènera au calendrier comme ça. Que se passe-t-il si je voulais ajouter un formulaire e-mail ? Je vais voir mes courriels, et je vais cliquer sur l'un de mes formulaires, que vous puissiez voir que j'ai mon guide d'identité de marque. Je peux cliquer sur ces trois points, et ce que je peux faire, c'est d'intégrer. Il devrait me donner un code, pour que je puisse voir le code de la ligne d'en-tête. Ce que je vais faire c'est de mettre cela dans le code d'en-tête, puis c'est le code en ligne pour l'intégration. Je vais copier ça. Je vais double-cliquer, et je vais le coller ici et cliquer sur « Enregistrer » et fermer. Nous sommes toujours dans la section Calendly, mais je vais l'échanger. Ensuite, pour ce code ici, je vais appuyer sur « Copier ». Fondamentalement, il doit envoyer un message au serveur de flodesk, afin qu'il puisse extraire les informations à partir de là. Ce que je peux réellement faire, aller cliquer sur la page « Contact », faire défiler jusqu'au bas, et vous pouvez voir, je peux mettre à l'intérieur du code de tête. Cela fonctionnera simplement pour cette page, mais si vous la placez dans le code principal dans les paramètres principaux, cela fonctionnera pour chaque page. Je vais le mettre là. Je vais cliquer sur « Enregistrer », puis sur « Publier », et nous verrons ce qui se passe. J'espère qu'il devrait y avoir ma petite forme là. Mais en gros, c'est comme ça que vous faites lorsque vous mettez un formulaire d'e-mail. Juste comme ça, vous pouvez le voir, nous avons notre formulaire. Je peux entrer ici et taper mon nom et mon adresse e-mail, et il enverra un e-mail, et j'obtiendrai cela, puis je peux cliquer sur « Télécharger » comme vous pouvez le voir ici. De toute évidence, il a un fond noir car c'est le design que j'ai conçu sur ce formulaire. Si je veux modifier le format, je vais devoir revenir en arrière et le modifier ici. Quelles que soient les couleurs de marque que vous utilisez sur votre site Web, assurez-vous qu'il s'agit de la même couleur d'arrière-plan pour qu'elle ressemble à un mélange. 16. Interactions simples: Maintenant, je vais vous montrer comment faire des interactions épicées. Je vais rester très simple. Je pourrais être plus avancé, peut-être plus tard en bas de la piste lorsque je mettrai à jour le cours. Mais pour celui-là, je pense très basique. Maintenant, je vais sélectionner l'en-tête, l'objet ou le bas, quoi qu'il soit, la chose que je veux animer en premier. Je vais sélectionner le « Header H1 ». Il a le style du cap H1, ce qui est génial. Je vais aller dans le coin supérieur droit, cliquer sur le petit coup de tonnerre. Cela va m'amener aux interactions. Ce que je veux faire, c'est plutôt que de faire un déclencheur d'élément, je veux faire un déclencheur de page. Lorsque la page se charge, je veux que le texte s'estompe. Je vais cliquer sur le petit bouton Plus ici, et je vais définir quand je veux que l'interaction s'active. Est-ce que je veux qu'il soit activé lors du chargement de la page ou du défilement de page ? Je vais charger la page. Ce que je vais faire, c'est passer à l'action, et je vais sélectionner « Démarrer une animation ». Cela me dit quand la page commence à se charger, c'est l'action qu'elle prendra. Je vais commencer l'animation. Je vais appuyer sur le bouton « Plus » ici, et maintenant, il m'amène au menu Action. Ce que je dois faire, c'est appuyer à nouveau sur le bouton « Plus ». Pour cela, ce que je veux faire, c'est que je veux faire de l'opacité. Ce que je vais faire, c'est que l'opacité va le faire passer à zéro. Il s'agit de la phase de départ. Je vais ramener ça à zéro. Vous pouvez voir que le cap H1 a disparu. Ce que je voulais faire, c'est que je veux ajouter la fin de l'animation et remettre l'opacité. Pour celui-ci, je vais ramener l'opacité à 100 %. Si j'appuie sur « Lecture », vous pouvez voir ce qui se passe ici. Il commence à zéro, et il passe très facilement à 100 %. Si je sélectionne l'une de ces choses, je dois sélectionner la première et cliquer sur « Définir comme état initial », sorte qu'il commence à zéro pour cent d'opacité. Assurez-vous que j'ai bien sélectionné les éléments. Vous pouvez maintenant voir ici que cela va affecter l'élément sélectionné H1. Vous pouvez voir que c'est un cap H1. Vous pouvez également le faire en classe. Cela signifie qu'il va affecter chaque titre ou titre avec l'en-tête H1 dessus. Je préfère le faire, donc cela affecte tout ce qui se trouve sur la page. Si j'appuie sur « Lecture », vous pouvez prévisualiser comment ça va baisser. Ce que je peux aussi faire, c'est que je vais sélectionner la dernière partie. Vous pouvez voir, je peux le démarrer après les actions précédentes, donc il va commencer après la première section. Je peux faire une facilité, donc une facilité le rend plus lisse. Je peux m'en douter. C'est vraiment cool. Ce que je veux faire, c'est que je voulais ajouter un délai de deux secondes, pour que nous puissions voir à quoi cela ressemble. La facilité d'entrée peut être la première 0,5 seconde. C'était très bien, et je pense que c'est très bien. Je vais cliquer sur « Enregistrer ». Je peux également le renommer. Juste avant de pouvoir le sauver, je vais dire « fondu ». Ensuite, je vais cliquer sur le bouton « Enregistrer ». Dans cette partie, vous pouvez voir qu'il y a du fondu. Si je clique dessus, il m'y ramènera et je peux le modifier. Je peux supprimer les choses et changer tout ce que je veux là-dedans. Ce que je peux faire, je peux cliquer sur « Aperçu », et vous pouvez voir le fondu comme ça. Évidemment, les deux secondes sont un peu longues, donc je vais revenir en arrière, changer le délai et faire une seconde. Cliquez sur « Enregistrer ». Je vais cliquer à nouveau sur « Aperçu ». Vous pouvez le voir, il s'estompe vraiment, très bien. Génial. C'est alors que la page commence à se charger. Je peux également ajouter une animation distincte lorsque le chargement de la pièce est terminé, mais je n'ai pas besoin de le faire. Si je continue et que je clique sur « Aperçu », vous pouvez voir que l'animation fonctionne. Nous y retournerons. Regardez le texte, il s'estompe bien et facilement. Que se passe-t-il si nous voulions ajouter des textes entrant ou le bouton qui vole ? Je vais cliquer sur mon texte « Paragraphe ». Je vais cliquer sur « Déclencheur de page ». Lors du chargement de la page, nous voulons effectuer une autre action. Au lieu de sélectionner l'élément « Fade in » ici, nous voulons en créer un nouveau. Pour celui-là, je vais bouger. Je vais cliquer sur « Définir l'état initial ». Ce que nous voulons faire, c'est déplacer l'axe des x de la page comme ceci, en venant de la gauche. Je vais en plus et je vais encore bouger. Pour celui-là, je vais m'assurer qu'il est à zéro. Nous voulons le sélectionner et sélectionner la « Classe ». Au lieu de ce seul élément, nous voulons en faire la classe entière. Le retard, je vais y arriver une seconde aussi. Je vais cliquer sur « Enregistrer ». Je vais cliquer sur « Aperçu » et prêter attention aux textes des paragraphes. Il devrait s'envoler. Cela arrive très vite. faut que ça soit un peu plus lent. Je vais y retourner. Nous avons cela, et nous avons la facilité. Nous devons vraiment nous calmer. Nous pouvons faire n'importe lequel de ces modèles personnalisés. C'est vraiment cool. Nous allons faire In Quart. Je vais retarder deux secondes, facilement, ou faire ça une seconde. Le film sera à zéro pixel, donc il redémarre dans cette position. Je pense que tout va bien se passer. Je vais y retourner. Je devrais le renommer et l'appeler bouger. Enregistrez, puis cliquez sur « Aperçu ». Voyons ce qui se passe. Vous obtenez le fondu et le texte s'envole comme ça. Superbe. Ensuite, nous pouvons maintenant sélectionner différentes animations. Si vous voulez voir le fondu, vous pouvez voir que cela fonctionne pour cette classe, et c'est vraiment facile de le faire. Fondamentalement, c'est ainsi que vous ajoutez des interactions. Que se passe-t-il si je voulais ajouter un déclencheur d'élément ? Je vais réserver sur le bouton principal. Je peux déclencher un élément. Je vais juste cliquer là-dessus. Je vais cliquer sur le « déclencheur d'éléments ». Que se passe-t-il si nous survolons la souris ? On peut ajouter tout un tas de choses. Nous pouvons faire une croissance ou un rétrécissement, un tour, une mouche, tout ce que nous voulons faire parce qu'il va même rebondir, mais nous pouvons faire tout un tas de choses. Ce que je peux faire, c'est faire une pop et voir ce qui se passe là-bas. Je vais retarder peut-être une seconde. En survolant, il se peut que nous puissions recommencer, puis nous allons cliquer sur « Aperçu ». Vous pouvez voir maintenant, si je place ma souris sur le bouton, regardez ce qu'il fait. Il surgit. Quand je l'ai lâché, ça reprend. Super génial. Permettez-moi de modifier cela. Je peux m'assurer que vous le faites sur le bouton principal, comme à l'intérieur de l'instance du bouton. Je vais cliquer sur le vol stationnaire ici, et peut-être voulons-nous faire autre chose. Peut-être voulons-nous faire une colonne vertébrale ou quelque chose comme ça. On peut faire du spin. Retard dans le sens des aiguilles d'une montre, nous ferons peut-être 0,5 seconde, 0,05. Sur celui-ci, nous allons faire les spin outs, 0,5 seconde. Nous allons cliquer sur « Aperçu » comme vous pouvez le voir. Si je clique sur le bouton « Aperçu », regardez ça. C'est plutôt cool. Voulons-nous qu'il tourne ? Allons dans le sens inverse des aiguilles d'une montre. Le délai ne serait que zéro. C'est en vol stationnaire. Cool. Je peux le mettre en classe. Ici, c'est écrit « élément ». Je peux changer de classe. Essayons ça maintenant. Le bouton si je mets la souris dessus, vous pouvez le voir, et il tourne. C'est plutôt cool. Si vous mettez des éléments invisibles et que je l'ai changé en classe, cela fonctionnera également sur ce bouton ici. [BRUIT] C'est assez dope. C'est ainsi que vous créez un déclencheur de page et un déclencheur d'élément, deux façons très simples de créer des choses. Vous pouvez jouer avec elle, comme si vous pouviez faire une souris sur le dessus ou survolez la souris. Vous avez peut-être des boutons ou des illustrations ou des icônes et que vous voulez qu'ils bougent, vous pouvez le faire. Si vous voulez un déclencheur de page plus simple où vous faites défiler, vous pouvez également faire bouger les choses. C'est une autre façon de le faire. J'espère que je vous ai aidé à comprendre comment utiliser les interactions de base. 17. Système de conception simple: Qu'est-ce qu'un système de conception ? Fondamentalement, un système de design combine tous les styles, éléments et composants d'une marque pour un site Web. C'est comme lorsque vous concevez une identité de marque et que la marque utilise imprimés comme des cartes de visite et possède un logo et toutes ces autres fonctionnalités. Il s'agit essentiellement d'un guide de style, mais pour le numérique, pour le web essentiellement. Il s'agit littéralement d'un système dans lequel vous, en tant que concepteur, ou si vous avez une équipe de designers ou l'entreprise lorsque vous remettez le projet, d'un système pour vous assurer qu'ils utilisent tous ces éléments ensemble dans le cadre de l'ensemble du site, sorte qu'ils ont des fonctionnalités globales. Maintenant, je vais vous montrer quelques exemples de systèmes de conception ici sur Dribbble. Par exemple, vous pouvez voir ici, si je clique sur l'un de ces éléments, vous pouvez voir ici un système de conception simple. Il y a les couleurs, les couleurs de la marque, le système de typographie, les en-têtes, les styles de paragraphes, les guillemets. Vous avez également certains composants de l'interface utilisateur. Si je descends, vous en trouverez d'autres ici. Par exemple, celui-ci a tout un tas de boutons, d' interface utilisateur, de modules, cartes, de tout un tas de choses différentes, même d'entrées pour les formulaires et les objets. Cela peut devenir très complexe si vous avez un gros site Web, mais s'il s'agit d'un simple site Web client ou pour vous-même, vous n'avez besoin de rien de fou. Il pourrait s'agir simplement d'un simple guide de style ou d'un système de conception. Maintenant, vous pouvez aller sur Dribbble et taper le guide de style en haut et vous obtiendrez tout un tas de choses. Vous pouvez également taper le système de conception ici, et si j'appuie sur « Entrée », vous obtiendrez un tas de choses différentes ici, différents composants, différents éléments. Celui-ci, vous pouvez voir qu'il y a les couleurs, la typographie, les barres d'onglets, les boutons, avatars, les icônes, les champs de texte. Fondamentalement, si vous avez mis à jour l'un de ces styles, cela va changer l'ensemble du style par rapport à tout ce qui se trouve sur le site Web. C'est un changement global. C'est pourquoi il est bon d'en avoir un parce que tout ce la même classe sur Webflow ou sur le site Web va en fait affecter un changement sur tout, et c'est pourquoi il est judicieux de concevoir comme ça. Vous pouvez maintenant accéder à Webflow. Si vous allez dans Showcase, vous voulez entrer dans la barre et vous pouvez taper un guide de style. Vous pouvez également saisir un système de conception et nous pouvons trouver un projet et le cloner. Il y en a quelques-uns ici. Je vais taper un système de conception parce que j'en ai trouvé un avant qui était vraiment utile. J'ai trouvé celui-ci, celui-ci était plutôt cool. Il y a déjà 400 clones, c'est vraiment cool. Vous pouvez cliquer sur « Afficher le projet ». Ce qui se passe ici, c'est que vous pouvez voir la conception réelle de la page dans Webflow. Je peux cliquer sur « Ouvrir dans Webflow », et ça va s'ouvrir. Vous pouvez voir cet exemple. Je vais regarder la page. Il ne s'agit que d'une page. Je peux cliquer sur « Aperçu », et vous pouvez voir si je clique sur ces onglets, il va faire défiler jusqu'à ces zones. L'en-tête est ici. Il y a de la typographie, des paragraphes. Il y a du texte riche, couleurs, des boutons, un tas de choses différentes. Si je vais dans le coin supérieur droit, vous pouvez le voir en mode lecture. Ce que je veux faire, c'est cliquer sur « Cloner le projet ». Maintenant, une fois que vous aurez fait cela, j'irai vers celui-ci parce que je l'ai déjà cloné, je peux voir tous les wrappers, les dibs, tout le contenu ici. Le fait est que je peux réellement modifier ça. Par exemple, cet en-tête peut être que je ne veux pas la police Inter, je peux la changer en police Merriweather, et maintenant elle va être modifiée dans tous les sens. Maintenant, si je crée un site Web, je fais les pages normales, ça va tout affecter, tant que les classes sont les mêmes. Il s'agit d'une rubrique H1. C'est vraiment cool. Il y a tout un tas de choses ici. Je recommande d'utiliser un système de conception de base pour votre site Web, cela va vous aider. Grilles aussi. Comme vous pouvez le voir ici, les espaces. Cela vous fera gagner du temps, mais il faudrait un peu de courbe d'apprentissage juste pour s'habituer à l'utiliser et à ce genre de choses. Mais dans l'ensemble, j'ai l'impression que c'est vraiment une bonne pratique à suivre. Mais si vous installez vos deux premiers sites Web, ne vous inquiétez pas trop, jouez et utilisez-les. Mais si vous voulez entrer dans ce domaine, clonez simplement un système de conception ne pas avoir à le faire à partir de zéro, et je suis sûr que cela va vous aider une tonne. 18. Ajouter des fichiers Lottie: Je vais maintenant montrer un outil incroyable qui vous permet d'intégrer facilement des animations à Webflow. Il s'appelle LottieFiles. Vous pouvez simplement vous rendre sur lottiefiles.com, et vous pouvez télécharger des animations gratuites. Voici à quoi ressemble le site Web. Il est soutenu par des entreprises incroyables, et c'est vraiment cool. Vous pouvez voir LottieFiles. L'un des avantages est qu'ils sont plus petits que les PNG et les GIF, et qu'ils se chargent plus rapidement que les MP4 Vous pouvez donc en voir un exemple ici. Il est beaucoup plus compressé, et vous pouvez voir que les gens téléchargent toujours nouveaux LottieFiles, animateurs, etc. Vous pouvez également télécharger le plug-in pour After Effects, que vous puissiez le vérifier. Ils ont les fichiers téléchargés ici. Il suffit d'aller dans le Design en haut, puis de cliquer sur « Créer avec After Effects ». Vous pouvez également utiliser l'éditeur, qui vous permet de modifier en ligne si vous n'êtes pas animateur. Vous pouvez simplement télécharger ces outils depuis Adobe Cloud ou le plug-in. Vous pouvez voir que vous pouvez l'exporter directement depuis After Effects vers un fichier LottieFile. C'est Lottie Files. C'est vraiment utile. Ce que vous voulez faire, c'est d'aller à Découvrir et de cliquer sur «  Animations gratuites » dans le coin supérieur gauche, et cela vous amènera à cette section ici, où je peux littéralement télécharger n'importe quelle animation, et vous pouvez utiliser les filtres en haut par Popular. Ce qu'ils ont maintenant s'appelle en fait des catégories, donc je peux rechercher des catégories spécifiques que je veux. Si je fais défiler vers le bas, vous pouvez voir qu'ils ont tout un tas de choses différentes : des graphismes animés, interface utilisateur, un tout autre truc, même des animations de bière, ce qui est cool. Cliquons dessus. N'hésitez pas à télécharger celui que vous voulez, quel que soit le flottement de votre bateau. Celui-ci a l'air plutôt cool, fête du Nouvel An, mais il y a tellement d'animations différentes. Je suis allé de l'avant et j'en ai téléchargé quelques-uns. Si vous voulez télécharger une animation, par exemple, si vous voulez celle-ci ici, je vais simplement cliquer dessus. Vous voulez aller en haut et cliquer sur « Télécharger », et ce que vous voulez télécharger est un fichier JSON Lottie. Vous pouvez télécharger les GIF et MP4, mais c'est celui que nous voulons, alors cliquez dessus et il doit être téléchargé sur votre ordinateur. Ce que je vais faire, c'est passer à Webflow. Maintenant, je suis allé de l'avant. J'en ai déjà téléchargé quelques uns auparavant, et ce que nous voulons faire, c'est l'ajouter, donc je vais simplement faire défiler vers le bas et je veux l'ajouter à cette section. J'ai une petite discussion. Ce que je vais faire, c'est cliquer sur le côté gauche, sur les ressources, et vous pouvez voir que j'ai déjà fait glisser celui-ci, mais je vais simplement faire glisser ces deux autres comme ça comme vous le feriez normalement comme une image normale. Maintenant, vous pouvez voir que nous avons ces fichiers JSON, qui sont l'animation. Je peux mettre ma souris dessus, et cela me montrera cela comme vous pouvez le voir là-bas. Maintenant, ce que je vais faire, c'est que je vais simplement cliquer dessus et le faire glisser dans mon conteneur ici. Je l'ai eu. Je peux en modifier la taille. Peut-être que je veux juste baisser les pixels, peut-être 300 pixels, comme ça. Maintenant, si je clique sur « Aperçu », vous pouvez voir que l'animation s'exécute automatiquement. Super facile. Je n'ai pas vraiment eu à faire quoi que ce soit parce que c'est automatique intégré. Vous pouvez voir comment l'animation s'est réellement arrêtée. Et si vous vouliez vraiment le faire en boucle ? Je peux revenir en mode Aperçu. Je vais double-cliquer, si je descends, vous pouvez voir qu'il est écrit « Boucle ». Je veux m'en occuper. Je peux également jouer en marche arrière, et je peux également modifier la durée intégrée si je ne suis pas en boucle. Je vais juste cliquer à nouveau sur « Aperçu », et maintenant il devrait être automatiquement en boucle encore et encore sans s'arrêter. Nous l'avons là. Si simple, si facile. Je vais maintenant vous montrer comment créer une animation avec LottieFile. Je suis allé de l'avant et je suis allé sur mon autre page, et vous pouvez voir ici, j'ai toute ma page de processus. J'ai trois étapes sur la façon dont je travaille. Ce que je vais faire, c'est passer à l'étape 2. Je vais vous montrer comment réaliser une animation de défilement à l'aide du fichier LottieFile, donc je vais cliquer sur la ressource. Je vais faire glisser ces graphismes, et simplement le faire glisser sous la section de paragraphe ici. Vous pouvez voir cette belle et grande icône. Maintenant, ce que je peux faire, c'est que je peux en modifier les pixels. Allons-y 600. Une fois que nous aurons reçu notre animation, nous voulons nous assurer de la sélectionner, je vais donc cliquer dessus et vous pouvez voir qu'elle est sélectionnée dans le navigateur. Je vais aller dans le coin supérieur droit et m'assurer que mes interactions sont sélectionnées ici. Accédez au déclencheur Element, puis cliquez sur le bouton « Plus ». Maintenant, ce que je veux faire, c'est passer à « Tout en faisant défiler en vue ». Cela va nous permettre, au fur et à mesure que nous défilons vers le bas, que l'animation cesse jouer. Maintenant, je vais cliquer dessus. Je vais cliquer sur « Sélectionner une action », puis sur « Lire l'animation de défilement ». Vous disposez de quelques paramètres sur les limites de l'animation. Vous pouvez jouer avec ça, mais je vais juste laisser ça pour l'instant, et vous pouvez voir que vous avez une animation de défilement, s'appelle New Scroll Animation. Je vais cliquer dessus et cliquer sur le « rouage ». Vous pouvez voir à droite, vous pouvez voir que vous avez une étiquette jaune d'exclamation, donc évidemment, ça ne fonctionne pas, donc je vais juste m'assurer que nous sélectionnons notre animation Lottie. Je vais cliquer sur « Plus » et je vais cliquer sur « Lottie ». Vous pouvez voir que l'intégration devrait apparaître, et vous pouvez cliquer sur « Lottie ». Assurez-vous qu'il est sélectionné et plus, puis nous y aurons le Lottie , comme vous pouvez le voir. Cool. Comme vous pouvez le constater, lorsqu'elle est à zéro pour cent, l'animation sera à zéro image, donc elle sera à l'arrêt, et lorsque nous sommes à cent pour cent, nous voulons faire avancer l'animation. Vous pouvez voir que l'animation est en cours de prévisualisation. Nous voulons qu'il soit à cent pour cent, alors ce que je vais faire est d'ajouter une facilité d'image-clé. Je vais mettre ça à l'aise, puis le 100 pour cent à l'aise, donc vous avez une animation fluide là-bas. Je vais cliquer sur « Enregistrer ». Au fur et à mesure que je fais défiler vers le bas, vous pouvez voir l'animation jouer. Vous pouvez le voir. Cela peut paraître un peu déjanté parce que j'enregistre l'écran, mais vous pouvez voir comment il bouge, ce qui est vraiment cool. Nous pouvons le faire avec n'importe quelle autre animation. Essayons la bière ici. Je vais faire glisser ça vers le bas. Je vais juste prendre l'aperçu. Nous avons celui de la maison, désolé. Nous avons celui de la maison, c'est cool. Je peux revenir en arrière et ajouter le déclencheur d'élément « En faisant défiler la vue bleue ». Je peux également cliquer sur le parchemin, et cela devrait également fonctionner. Je vais revenir en arrière. faisant défiler, vous pouvez voir que c'est de l'animation, et lorsque je fais défiler vers le bas, vous pouvez voir que ça arrive comme ça. Vous pouvez toujours revenir en arrière, et nous pouvons y aller et modifier l'animation de défilement. Nous pouvons modifier l'accélération si vous ne voulez pas que l'aperçu en direct d'accélération soit activé. Vous pouvez prendre un aperçu en direct en bas à droite, et vous pouvez voir à quoi cela va ressembler. Ça a l'air plutôt cool. C'est ainsi que vous ajoutez une animation de défilement. 19. Connecter le domaine: Maintenant que vous serez satisfait de votre site Web, je vais vous montrer comment connecter votre domaine. Maintenant, il vous suffit d'aller dans le coin supérieur droit. Lorsque vous cliquez sur « Publier » et que vous souhaitez le publier dans un domaine personnalisé, vous verrez un bouton ici indiquant « Cliquez ici ». Maintenant, je vais cliquer dessus et cela va m'amener aux paramètres du compte dans le backend du projet. Vous verrez que cela vous amènera immédiatement à la section facturation et c'est parce que vous devez payer pour un compte pour héberger le site Web. Une fois cela fait, vous pouvez connecter votre domaine. Si vous ne connectez pas le domaine, vous devez avoir JeremyMura.Webflow.ai ou quel que soit votre nom. Une fois cela fait, vous pouvez faire défiler vers le bas et accéder à la section Domaine personnalisé. Maintenant, vous aurez une option ici pour connecter le domaine parce que je suis sur le site que je ne l'ai pas, je vais passer de l'autre côté dans une seconde. Mais vous pouvez cliquer sur ce bouton ici et cela vous montrera comment connecter votre domaine. Maintenant, j'utilise personnellement GoDaddy pour cela. Je pense que GoDaddy est un excellent site Web pour acheter des domaines. Il est bon marché, abordable et très facile à utiliser. Ils ont une interface utilisateur vraiment propre. Maintenant, je vais retourner sur l'un de mes autres sites que j'ai. Maintenant, une fois que vous êtes dans les paramètres de domaine personnalisés, vous pouvez voir ici que le mien a été publié, tout est vert, tout est connecté. Désormais, vous pouvez également ajouter un domaine personnalisé, sorte que vous pouvez y placer un domaine ou acheter un nouveau via GoDaddy ou Google. Vous pouvez voir si vous cliquez sur « GoDaddy », il vous y conduira. Maintenant, ce que vous devez faire pour le connecter, c' est que vous devez vous connecter au DNS. Je vais aller sur mes produits et vous devez ajouter le numéro de domaine Webflow dans votre domaine. Je vais cliquer sur le domaine, cliquer sur les trois points et cliquer sur « Gérer DNS » qui signifie système de noms de domaine. Je vais faire défiler vers le bas. En ce moment, vous pouvez voir que j'ai un enregistrement CNAME et le proxy-ssl.webflow.com. Il est assez facile de l'ajouter. Vous pouvez le modifier. Vous pouvez simplement cliquer sur « Ajouter » dans le coin supérieur droit. Vous pouvez cliquer sur CNAME, puis taper WWW, et dans celui-ci, il vous suffit de le copier à partir du site Web, coller dans, et cela peut durer une demi-heure ou quoi que ce soit. Ensuite, vous ajoutez l'enregistrement et attendez simplement, parfois cela prend 30 minutes, une heure, peu importe. Ensuite, une fois que vous l'avez enregistré, il devrait automatiquement passer vert et vous êtes prêt à partir. 20. Merci: J'allais vous remercier d'avoir rejoint ce cours. J'espère que vous avez appris tous les outils et techniques dont vous avez besoin pour créer des sites Web sans code étonnant. N'oubliez pas de participer et de faire le projet de classe. Je vérifierai chaque projet et je donnerai des commentaires là où je peux et juste pour assurer que vous vous améliorez et que vous allez de mieux en mieux. Maintenant, si vous pouvez faire une chose et cliquez simplement sur le bouton « Suivre » de mon compte pour obtenir des mises à jour sur les nouvelles classes parce que j'ai eu tout un tas de nouveaux cours à venir en 2022. Vous ne voulez pas manquer ça. Si vous avez des questions ou si vous avez besoin d'aide, veuillez simplement poster une discussion dans le forum de discussion ci-dessous, et je répondrai à vos questions le plus rapidement possible. À l'avenir, je mettrai à jour petits morceaux supplémentaires dans une partie du cours. Si vous avez d'autres suggestions ou choses que vous voulez apprendre et que vous avez l'impression d'avoir manqué , mettez-en une suggestion dans un e-mail ou simplement une suggestion dans l'encadré ci-dessous. Merci beaucoup. Nous avons hâte de faire de nouveaux cours, et je vous verrai dans le prochain.