Bootcamp™ pour la création de sites stratégiques - Utiliser Webflow pour créer de beaux sites Web axés sur les résultats

1. Bienvenue dans la création de site Web stratégique: Qu'allez-vous apprendre exactement dans ce cours ? Maintenant, ce cours ne vous apprendra pas seulement à créer un site Web, mais il vous apprendra également à créer un site Web, ce qui aidera stratégiquement votre entreprise à se développer. La vérité est qu'avoir un site Web qui a juste une belle apparence ne vous donnera pas de résultats. Ce dont vous avez besoin, c'est d'un site Web beau mais qui peut également être stratégiquement axé sur les objectifs de votre entreprise. Maintenant, que vous n'ayez aucune expérience en conception de sites Web ou même un peu d'expérience en conception de sites Web, ce cours vous aidera à comprendre la conception de sites Web à un niveau que 0,1 % des concepteurs de sites Web ne comprennent pas dans le monde entier. Je peux le dire en toute confiance, car je sais que de nombreux concepteurs de sites Web savent comment créer un site Web Ils ne savent pas nécessairement pourquoi ils font ce qu'ils font. Dans ce cours, je vais vous montrer comment créer un site Web qui peut vous donner les résultats dont vous avez besoin. Nous allons apprendre comment pensent les visiteurs de votre site Web lorsqu'ils arrivent sur votre site Web, comment établir un lien de confiance avec les visiteurs du site Web, comment les guider dans la prise de certaines mesures nécessaires pour atteindre vos objectifs commerciaux. Et vous serez en mesure de créer le site Web de vos rêves simplement en suivant le processus étape par étape de ce cours. Il n'est pas nécessaire de payer des milliers de dollars pour un développeur de site Web coûteux. Le meilleur, c'est que vous n' avez pas besoin de comprendre quoi que ce soit sur le codage, le développement de sites Web, la stratégie ou le design, car nous pouvons vous aider à créer le site Web parfait pour votre entreprise grâce à de belles leçons simples et faciles à comprendre. De plus, en investissant dans ce cours, vous aurez accès à un modèle premium, que vous pourrez utiliser pour créer votre site Web plus rapidement et lui donner un aspect professionnel et fiable en quelques minutes. Ensuite, tout ce que vous avez à faire est de prendre le temps de personnaliser le site Web pour votre marque et votre entreprise, et vous avez le site Web parfait prêt à attirer des clients. Notre seul objectif pour ce cours était permettre à tout entrepreneur ou fondateur du monde entier de créer un site Web parfaitement adapté à sa marque en un rien de temps et à un coût réduit. Au lieu de dépenser des milliers développer un site Web vraiment génial, vous pouvez apprendre à le faire vous-même , à le créer pour votre entreprise et à le modifier au fil du temps et à mesure que votre entreprise se développe. En tant que fondateur ou entrepreneur, vous devez comprendre comment votre site Web peut évoluer avec votre entreprise après son lancement. Une fois que nous vous aurons aidé à lancer votre site Web et à accéder à la première page de Google, ce qui apparaît un peu plus tard dans le cours, nous vous apprendrons également à améliorer votre site Web au fil du temps à mesure que votre entreprise se développe. De plus, comme vous avez investi dans ce cours et que vous nous avez fait confiance pour vous guider tout au long de ce processus, nous allons vous offrir quelques cadeaux supplémentaires. Un peu plus tard dans le cours, nous allons vous montrer comment obtenir un support premium gratuit pour votre site Web. Cela signifie que si quelque chose ne va pas avec votre site Web 24 heures sur 24, 7 jours sur 7, vous avez quelqu'un pour vous aider à le remettre en marche le plus rapidement possible. Cela inclut également toutes les questions que vous vous posez si vous souhaitez apporter des corrections vous-même. C'est comme avoir un assistant gratuit pour vous aider à utiliser votre site Web jour et nuit, 24 heures sur 24, 7 jours sur 7. Je vais également vous donner un accès exclusif à notre pack d'icônes et de graphismes premium. Ces icônes et graphiques sont conçus sur mesure par notre équipe et ne sont disponibles que pour les étudiants de ce cours. Utilisez ces icônes et graphiques axim pour les sites Web des clients sur lesquels nous travaillons actuellement, coût allant jusqu'à 20 000$ Et comme si cela ne suffisait pas, nous allons également envoyer à terre tous les étudiants qui investissent dans ce cours pour savoir comment installer un logiciel qui peut vous aider à suivre les mouvements de souris de chaque visiteur qui visite votre site Web Cela peut vous aider à voir où les gens cliquent quoi ils ne cliquent pas, afin d'améliorer votre site Web au fil du temps afin d'optimiser la conversion et d' obtenir les meilleurs résultats. Maintenant, je sais que vous devez avoir hâte commencer, et moi aussi. Passons donc au cours, et je vous verrai dans la prochaine leçon. 2. Pourquoi Webflow est-il le meilleur ?: Alors, qu'est-ce que Web Floor et pourquoi est-il si spécial ? Eh bien, comme vous le savez sûrement, il existe de nombreux créateurs de sites Web en ligne. Cependant, il existe de grandes différences entre les autres créateurs de sites Web et entre Web Floor et ce que Web Floor a à offrir. Il existe maintenant de nombreuses raisons pour lesquelles Web Floor est la plateforme de création de sites Web qui connaît la croissance la plus rapide au monde. Et l'une des raisons pour lesquelles tant de personnes dans le monde entier abandonnent d'autres anciens créateurs de sites Web tels que tant de personnes dans le monde entier abandonnent d'autres anciens créateurs de sites Web WordPress, Wicks et Square est que sur le Web, vous pouvez littéralement créer de superbes sites Web axés sur les résultats et qui peuvent vous aider à développer votre activité en une fraction de temps sans code ni expérience, et gratuitement Dans un premier temps, vous pouvez créer l'intégralité de votre site Web gratuitement sans aucun code et sans expérience en matière de conception et créer des sites Web époustouflants, professionnels et fiables pour votre entreprise. Et ce n'est pas la seule raison pour laquelle tant de fondateurs et entrepreneurs quittent d'autres plateformes de création de sites Web telles que WordPress, Shopper fi, Wicks et Squarespace pour profiter pleinement des avantages du web floor et de ce que le web floor Si vous avez utilisé l'une des plateformes de création de sites Web, vous verrez qu'elles sont assez restrictives en ce qui concerne ce que vous pouvez créer. Cependant, le web floor est très, très différent. Web Floor vous donne une liberté totale pour créer ce que vous voulez, au pixel près. Et le meilleur, c'est que vous ne créez pas une seule ligne de code car Web Floor le fait automatiquement pour vous en utilisant IE. Et en tant que consultante en développement de marque, je crée personnellement des sites Web pour moi-même et pour mes clients . Chacun de mes proches, et chacun de mes sites Web que je possède personnellement se trouve sur une plate-forme Web. Web Floor m'a permis de créer des sites Web personnalisés sans qu'une seule ligne de code ne soit créée par moi-même. Ce qui a en fait aidé mon entreprise à se développer. Vous pouvez d'abord créer un site Web digne de confiance, exactement comme vous le souhaitez et qui ait l'air professionnel en un rien de temps. L'un des meilleurs avantages que j' apprécie est le fait que l'IE qui sous-tend flux Web est si intelligent lorsqu'il écrit le code de votre site Web en arrière-plan qu'il le fait de manière à accélérer le chargement de votre site Web et à créer une meilleure expérience utilisateur pour les visiteurs de votre site Web. Cela garantit également que votre site Web est entièrement réactif, quel que soit l'appareil sur lequel vos utilisateurs consultent votre site Web. Et comme si cela ne suffisait pas, ce qui m'a vraiment convaincu sur le Web il y a de nombreuses années, c'est le fait que leur support premium ne ressemble à rien de ce que j'ai connu dans aucune entreprise. En fait, je me rappelle avoir presque entièrement supprimé mon site Web. Mais heureusement, grâce à Web Floor, qui m'a littéralement répondu dans les 30 minutes suivant mon envoi par e-mail, ils ont réussi à enregistrer le site Web et tout allait parfaitement bien Maintenant, dans la prochaine leçon de ce cours, je vais vous montrer comment obtenir support premium gratuit avec Web Floor afin qu'ils puissent vous répondre plus rapidement et s' assurer que si vous avez des questions, ils vous contacteront assurer que si vous avez des questions, ils d'abord en tant que VIP. Je vais également m' assurer que vous avez accès à tous nos modèles pour vous permettre de créer votre site Web plus rapidement, à notre pack d'icônes et de graphismes premium, notre pack d'icônes et de graphismes premium ainsi qu'au logiciel de suivi des comportements pour vous aider à améliorer votre site Web au fil du temps. Quoi qu'il en soit, j'y reviendrai dans la prochaine leçon d'ici là. Merci beaucoup pour le temps que vous m'avez accordé et je vous verrai dans le prochain. 3. Obtenez vos cadeaux VIP Webflow gratuits: Alors, comment obtenir votre support premium gratuit , vos modèles de sites Web, vos icônes et vos graphiques, ainsi que des logiciels comportementaux afin de pouvoir suivre exactement ce que font vos utilisateurs sur votre site Web à tout moment Nous avons créé ce pack gratuit pour chaque étudiant qui a investi dans l'apprentissage de l'utilisation du Web Floor, car nous voulons que vous ayez la meilleure expérience possible sur la plateforme. Webflow est donc plus qu' heureux de nous aider à réunir tout cela pour vous offrir la meilleure expérience possible Donc, pour obtenir ces cadeaux gratuitement, vous suffit de vous rendre sur le site Forward Slash Webflow de Lancaster Academy of Design brand.com UN VIP. Je laisserai également un lien dans l'appel afin que vous puissiez simplement cliquer dessus pour accéder directement à cette page très facilement. Maintenant, lorsque vous visitez la page, vous verrez quelque chose comme ceci. Construisez votre site Web mieux et plus rapidement. Et si vous faites défiler l'écran vers le bas, vous pouvez voir que la première étape consiste à cliquer ci-dessous et à vous inscrire à un flux Web pour bénéficier d'un support premium gratuit. Maintenant, pour être totalement transparent, si vous copiez le lien, sur ce bouton en particulier et que si vous copiez le lien, sur ce bouton en vous recherchez ensuite de quoi il s'agit, il s'agit essentiellement d'un lien d'assistance VIP gratuit que nous avons mis en place avec Webflow pour nous assurer que vous prenez soin de vous lorsque vous utilisez la plateforme Et lorsque vous cliquez sur ce bouton, vous serez redirigé directement sur la page d'accueil de Webflow vous pourrez vous inscrire et commencer à créer votre site Web, dont nous parlerons un peu plus tard dans le cours Maintenant, une fois que vous êtes sur la page d'accueil de Webflow, il est très facile de s'inscrire. Mais si vous avez des problèmes, s'il vous plaît, faites-le moi savoir, contactez-moi, et je vous soutiendrai autant que possible. Ainsi, une fois que vous vous êtes inscrit et que vous avez communiqué votre adresse e-mail, souvenez-vous de cette adresse e-mail, car vous en aurez besoin à la deuxième étape du processus Maintenant, il est très important que l'adresse e-mail avec laquelle vous vous inscrivez sur Webflow L'adresse e-mail que vous utilisez à la deuxième étape du processus soit la même La raison en est très simple. En gros, lorsque nous enverrons votre modèle de site Web gratuit, nous l'enverrons directement à votre compte Web flow. Si vous n'utilisez pas les mêmes adresses e-mail pour les deux étapes, le modèle de site Web risque de se retrouver un autre compte et vous ne pourrez peut-être pas l'utiliser. Nous y enverrons également vos icônes et votre pack graphique, ainsi que le lien vers le logiciel comportemental à l'adresse e-mail que vous avez ajoutée à la deuxième étape. Et si vous êtes indépendant et vous créez des sites Web pour des clients, hésitez pas à utiliser ce lien chaque fois que vous inscrivez un nouveau client Vous pouvez non seulement leur obtenir un support VIP prioritaire gratuit, mais également leur obtenir un modèle de site Web gratuit afin que vous puissiez créer leur site Web plus rapidement N'oubliez pas de vous assurer que le client utilise le même e-mail pour l'inscription au flux Web et également pour la deuxième étape du processus, afin que nous puissions le vérifier et nous assurer que le modèle de votre site Web arrive sur le bon compte. Voyons, par exemple, que je me suis déjà inscrit sur Webflow avec mon adresse e-mail, puis j'ai voulu ajouter mon autre adresse e-mail ici, puis obtenir des cadeaux gratuits, correspondant au courrier électronique puis obtenir des cadeaux gratuits, de Webflow Parfait Ainsi, dès réception de votre e-mail, nous vous contacterons dans les 24 heures avec votre modèle, votre icône et votre dossier graphique, ainsi que le lien pour télécharger votre logiciel comportemental. Absolument gratuit. Aucune question n'a été posée. 4. Site Web 500 $ vs 10 000 $: La vérité est que si vous avez des prix auprès d'agences ou de freelances, vous verrez que vous pouvez payer entre 500 et 10 000 dollars pour un Pour être tout à fait honnête, un site Web à 500$ et un Web à 10 000$ peuvent se ressembler beaucoup Alors pourquoi quelqu'un paierait 9 500$ de plus pour un site Web de 10 000$ S'ils peuvent obtenir quelque chose qui ressemble beaucoup pour seulement 500$. Eh bien, permettez-moi de vous donner un petit aperçu de mon expérience et de la façon dont je suis passé de 500$ pour un site Web à 10 000$ en quelques années Bien que deux sites Web puissent sembler très similaires, les résultats réels produits par ces deux sites Web peuvent être très différents. Et cela est essentiellement dû à la structure du site Web, la copie sur les sites Web, la façon dont le site Web lui-même guide les utilisateurs vers certaines actions. Par exemple, il peut y avoir un site Web qui a une belle apparence et dont la création coûte 500 dollars par un indépendant, mais en réalité, il faut 1 000 personnes pour accéder à ce site Web pour obtenir un client converti qui paie pour quelque chose de la marque Maintenant, d'un autre côté, vous pourriez avoir un site Web qui a été développé et organisé de manière stratégique de manière à convertir plus de trafic en clients payants, et ce site Web ne prend que 50 clients pour convertir un client. Maintenant, comme vous pouvez le constater, 51 000, c'est très différent. Cette différence ne tient pas seulement à l'apparence du site Web, mais aussi à la façon dont le site Web est organisé et à la façon dont vous persuadez et poussez doucement les visiteurs du site Web à effectuer certaines actions sur le site Web Cela a été une période d'apprentissage énorme pour moi il y a environ huit ans. Quand j'ai commencé à vraiment comprendre quelles étaient les différences entre un site Web réellement développé en fonction des objectifs de l'entreprise et un site Web vraiment beau. Cela ne signifie pas qu'un site Web stratégique ne peut pas être beau, mais cela signifie essentiellement qu' il ne devrait pas être la priorité. Cela peut sembler beau, mais tout ne dépend pas uniquement de l'apparence du site Web. Comme nous venons de le voir, la première différence principale entre un site Web à 10 000$ et un site Web à 500$ réside en fin de compte dans le fait qu'il est axé sur les objectifs Le site Web à 500$ peut sembler beau et même agréable à utiliser, mais le site Web à 10 000$ sera conçu de manière stratégique pour vous aider à convertir plus de trafic en clients payants Maintenant, la deuxième raison est une question de calories. Et par calories, je ne parle pas des aliments que nous mangeons, mais des calories mentales. Ainsi, lorsque nous avons un site Web, qui nous permet d'obtenir facilement le résultat que nous voulons, nous consommons moins d'énergie mentale, ce qui nous rend moins susceptibles de ressentir de la fatigue mentale. Par exemple, si vous êtes déjà allé sur un site Web s'est avéré extrêmement compliqué à utiliser, et que vous consacrez beaucoup d'énergie à essayer de trouver le résultat que vous souhaitez. Et puis vous finissez par vous ennuyer et vous quittez complètement le site Web et trouvez une alternative différente. C'est ce qu'on appelle la fatigue mentale. Et cela se résume en fin de compte au nous utilisons trop d'énergie et de calories dans notre esprit pour obtenir le résultat que nous voulons. Maintenant, alors qu'un site Web de 500$ peut compliquer la tâche du visiteur du site Web pour obtenir ce dont il compliquer la tâche du visiteur du site Web pour a besoin, un site Web de 10 000$ simplifiera ce processus pour l'aider à se rendre là où il veut aller beaucoup plus rapidement Tout cela revient à structurer correctement votre site Web, ce que nous aborderons un peu plus tard dans le cours En fin de compte, nous voulons amener l'utilisateur de l'endroit où il se trouve à l'endroit où il doit être le plus rapidement et le plus efficacement possible. Comme vous pouvez l'imaginer à partir des deux premiers points, le troisième avantage de la différence entre un site Web à 10 000$ et un site Web à 500$ est simplement dû aux profits que cela peut générer Évidemment, si vous convertissez un utilisateur sur 50 sur votre site Web au lieu de 1 000, cela fera une différence significative dans le montant d'argent que vous pouvez générer chaque mois. acquisition de clients vous coûtera également moins et vous permettra également de renforcer la confiance des clients afin de vous permettre facturer plus tard . Donc, pour résumer les trois principales différences entre un site Web à 10 000$ et un site Web à 500$, que vous allez toutes apprendre à utiliser dans ce cours dans les prochaines leçons vous assurer que votre site Web est stratégiquement axé sur les objectifs de votre entreprise Si cela n'a pas encore tout à fait de sens , ne vous inquiétez pas. Nous allons tout couvrir très bientôt. Deuxièmement, un site Web de 10 000$ sera conçu de manière à ce que vos utilisateurs utilisent moins d'énergie mentale vous permet d'obtenir un meilleur taux de conversion sur votre site Web et, en fin de compte, de gagner plus d'argent, ce qui nous amène au troisième avantage, qui est de générer plus de profits et de revenus. Je considère toujours mes sites Web comme les meilleurs vendeurs de mon entreprise Chacun des sites Web que j'ai pour chacune de mes entreprises doit représenter cette marque en particulier de la meilleure façon possible. Cela devrait nous donner les meilleures chances de convertir une personne qui ne fait que visiter le site Web en client payant. Nous pouvons le faire, et cela aidera vraiment votre marque et votre entreprise à croître de façon exponentielle Et le meilleur, c'est qu'une fois que vous avez fait l'effort de créer le site Web, de le mettre en place correctement et, évidemment , de tout faire correctement, ce que nous allons aborder dans ce cours, vous n'aurez plus jamais à toucher au site Web. Vous disposez donc constamment de cet actif numérique et les employés travaillent presque d'arrache-pied pour vous chaque année afin de vous apporter plus d'argent et de ventes. Maintenant, comme je l'ai déjà mentionné, nous allons aborder toutes les étapes pour vous aider à apprendre à créer sites Web, comme je l'ai mentionné dans cette leçon. Alors, sans plus attendre, passons à la leçon suivante du cours. Je te verrai. 5. Créer une expérience utilisateur transparente: Alors, comment créer une expérience utilisateur fluide sur votre site Web ? Eh bien, la première étape consiste à comprendre la différence entre UX et UI. Alors, qu'est-ce que l'interface utilisateur ? Eh bien, l'interface utilisateur est l'interaction entre l'homme et l'ordinateur. Il s'agit essentiellement de la façon dont vous êtes un utilisateur et le site Web interagissent les uns avec autres pour créer une expérience globale, qui nous amène ensuite à U X, qui signifie expérience utilisateur. Désormais, l'expérience utilisateur est la façon dont le site Web est construit visuellement. Tout cela se concentre essentiellement sur la façon dont l'utilisateur sent qu'il interagit réellement avec votre site Web. Maintenant, cela vaut également pour les logiciels et les autres plateformes numériques. Mais pour le moment, nous nous concentrons uniquement sur votre site Web afin de nous assurer que vous puissiez créer l'expérience la plus fluide pour les visiteurs de votre site Web. Quelles sont donc les principales différences entre UI et UX ? Maintenant, la première différence principale est l'objectif du champ d'application. Maintenant que l'interface utilisateur se concentre sur les boutons et autres éléments avec lesquels l'utilisateur réel va interagir, l'expérience utilisateur est un peu différente. L'expérience utilisateur, quant à elle, ne se concentre pas sur des boutons ou des éléments spécifiques, mais plutôt sur la perception globale et l'expérience globale de l'utilisateur sur le site Web La deuxième différence majeure concerne les responsabilités. Où UY se concentre sur l' apparence du site Web , sur la couleur des objets et sur tout ce genre de choses ? L'expérience utilisateur se concentre sur ce que ressent réellement le client et sur son parcours réel pour se rendre de là où il se trouve à ce qu' il doit être pour que la marque atteigne ses objectifs. Donc, pour résumer, l'interface utilisateur se concentre sur l'apparence des choses, et l'expérience utilisateur se concentre sur ce que le client ou l'utilisateur ressent lorsqu'il visite un site Web en particulier. Quels sont donc les avantages de l'interface utilisateur et de l'expérience utilisateur ? Eh bien, la nouvelle écologique est que vous n'avez pas besoin d'être un expert en interface utilisateur et en expérience utilisateur pour créer un excellent site Web. La raison en est que nous avons déjà créé des modèles que vous pouvez utiliser pour développer votre site Web afin de vous assurer que toutes les principales règles de base sont déjà en place Cela signifie que peu importe ce que vous modifiez sur le modèle, celui-ci sera toujours basé sur les principes fondamentaux et les meilleures pratiques de l'interface utilisateur et de l'expérience utilisateur. Donc, en fin de compte, tant que vous ne supprimez pas complètement le modèle, vous ne pouvez pas aller loin. Quels sont les principaux avantages de l'utilisation de l'interface utilisateur et de l'expérience utilisateur et y penser réellement tout au long du processus de création de votre site Web ? Eh bien, le premier est l'augmentation de la satisfaction des utilisateurs. Cela signifie essentiellement que lorsque quelqu'un consulte votre site Web, il est plus susceptible d'atteindre les objectifs que vous avez fixés pour votre site Web, qui seront définis un peu plus tard dans le cours, et il aura également une expérience plus positive. Par conséquent, ils seront plus enclins à revenir sur le site Web à l'avenir, ce qui m'amène au prochain avantage , à savoir l' augmentation de l'engagement des utilisateurs Cela signifie essentiellement que les gens seront plus susceptibles de passer plus de temps sur le site Web, qui vous permettra de gravir les échelons sur Google et de vous faire accéder à la première page beaucoup plus tôt. Ne vous inquiétez pas pour le SEO pour l'instant. Nous aborderons cela plus tard dans le cours, car c'est en quelque sorte l'une des dernières choses que vous devez mettre en place avant de lancer votre site Web. Mais souvenez-vous simplement de ceci. Plus quelqu'un passe de temps sur les pages de votre site Web, plus Google est susceptible de vous faire confiance. Et croyez-moi, Google sait tout. Donc, si nous pouvons utiliser l'interface utilisateur et l'expérience utilisateur pour vous aider à créer un site Web qui attire finalement plus d' attention de la part des utilisateurs. Par conséquent, Google Sess était plus digne de confiance. Il est plus probable qu'il se trouve sur la première page de Google dans un avenir proche. L'un des principaux avantages de l'utilisation de l'interface utilisateur et de l'expérience utilisateur tout au long du développement votre site Web et d'une réflexion stratégique est le fait que cela vous permet d'économiser beaucoup de temps et d'argent dans le développement votre site Web et de vous assurer d'obtenir les meilleurs résultats possibles bien plus rapidement. n'y a rien de pire que de développer un site Web et d'apporter une tonne de modifications différentes. Cela va juste vous faire perdre beaucoup de temps et si vous payez pour que quelqu'un le fasse à votre place, cela vous coûtera également beaucoup d'argent. S'assurer que votre site Web est parfaitement conçu du premier coup vous évitera bien des tracas à long terme Maintenant, l'une des principales choses à garder à l'esprit du point de vue de l'expérience utilisateur et de l' interface utilisateur est de garder les choses claires et simples. Et si je ne cesse de mentionner la fatigue mentale et les calories mentales, c'est parce que nous voulons l'utilisateur utilise le moins de calories mentales possible lorsqu'il navigue sur votre site Web. Ils seront plus susceptibles de passer plus de temps sur votre site Web. Ils vont vivre une expérience plus positive. Enfin, ils atteindront l'objectif que vous avez mis en place pour votre site Web afin d'aider votre entreprise à se développer. Désormais, la cohérence est un autre rôle clé pour une bonne expérience utilisateur. L'un des exemples les plus simples est l'appel à l'action. Vous devriez avoir une couleur d'appel à l'action cohérente sur l'ensemble de votre site Web. Cela signifie que lorsque vous essayez d'amener l'utilisateur à effectuer une certaine action ou persuader d'accéder à une certaine page, ces boutons doivent tous être exactement de la même couleur, et ces boutons doivent se démarquer est essentiellement quelque chose de très simple que vous pouvez faire en quelques secondes, et cela peut réellement avoir un impact sur les performances de votre site Web. En fin de compte, nous formons l'utilisateur pour qu'il comprenne cela. Cette couleur particulière mène à l'action. Vous devez donc vous concentrer sur cette couleur particulière sur l' ensemble du site Web. Cela signifie essentiellement que chaque fois qu'ils voient un bouton de cette couleur particulière, cela les amène à droite sur ce bouton en particulier et ils seront plus enclins à appuyer dessus. Avant de terminer cette leçon, je voudrais simplement vous donner un exemple de ce que l'interface utilisateur et expérience utilisateur peuvent apporter pour réellement améliorer l'expérience utilisateur. Donc, si nous nous contentons de cet exemple de H&M, où l'entreprise dispose essentiellement d'une fonction de navigation par fil d'Ariane sur son site Web, vous pouvez vraiment voir en quoi cela pourrait être utile pour Par exemple, si quelqu'un cherche une serviette, puis qu'il va à la plage et aux serviettes de plage en coton, mais qu'il veut ensuite revenir aux serviettes pour découvrir d'autres options. Au lieu de revenir en arrière ou de recommencer le voyage à zéro, il leur suffit de cliquer sur des serviettes, et ils peuvent revenir directement à la page exacte dont ils ont besoin, sans tracas ni confusion C'est en fin de compte ce que sont l' interface utilisateur et l'expérience utilisateur. Cela permet à l'utilisateur de tout garder aussi simple et clair que possible . Encore une fois, vous n' avez pas besoin d'être un expert de l'interface utilisateur ou de l' expérience utilisateur, car nous avons déjà configuré les pages dans les modèles pour vous faciliter la tâche. Mais si je souhaite partager cela avec vous, c'est parce que si vous voulez réellement créer le site Web, vous devez rechercher des opportunités pour rendre le processus et parcours aussi faciles et simples que possible pour les personnes qui visitent votre page Web. Quoi qu'il en soit, j'espère que cette leçon vous a été utile. Merci beaucoup pour le temps que vous m'avez accordé et je vous verrai lors de la prochaine leçon. 6. Exemples de sites Web - E-Commerce Edition: OK, donc maintenant, je suis sûr que vous êtes prêt à voir d' excellents exemples de sites Web et à comprendre pourquoi ils sont si bons. Maintenant, les sites Web que je vais vous montrer sont destinés des entreprises qui vendent réellement des produits de commerce électronique. Ils vendent donc des produits en ligne et ils utilisent tous une approche très similaire pour ce faire. Et c'est exactement la même approche que je vais vous enseigner dans le cadre du cours. Vous savez donc exactement comment positionner votre produit ou votre marque de manière à ce qu'ils soient désirables et, en fin de compte, à même de satisfaire les besoins de vos clients. Maintenant, le premier site Web de marque sur lequel nous allons nous plonger n'est autre que Tesla. Maintenant, comme vous pouvez le voir sur le site Web de Tesla, cela commence par une belle vidéo du produit. Et vous pouvez voir qu' ils présentent le produit dans de nombreux environnements et dans de nombreuses situations différentes. Et la raison pour laquelle ils le font est de le présenter au client. Vous pouvez intégrer ce produit dans votre vie en toute simplicité. Faisons défiler un peu plus la page d'accueil vers le bas pour voir ce que nous pouvons trouver d'autre. Maintenant, si nous faisons défiler un peu la page vers le bas, vous verrez de belles photos du produit. Encore une fois, augmenter la désirabilité, ce qui est très important, surtout en matière de commerce électronique. Et si nous continuons à faire défiler la page, vous pourrez voir plus de modèles et d'offres de la marque. Ce sont essentiellement les différents véhicules que Tesla peut proposer à l'heure actuelle. Et ils simplifient les choses pour que vous puissiez finalement trouver la voiture qui correspond le mieux à vos besoins personnels, puis cliquer dessus pour en savoir un peu plus. Maintenant, une chose très importante à noter est le fait que ces images sont de très haute qualité. C'est en fin de compte l'une des plus grandes leçons en matière de commerce électronique. Vous pouvez littéralement vendre deux, trois fois ou même dix fois plus de produits en vous assurant simplement que la photographie de votre produit est parfaite. Ne vous inquiétez jamais à l'idée de payer pour des photos de produits de bonne qualité. Parce que plus la photographie de votre produit est bonne, plus votre produit sera attrayant pour le client qui le consulte sur le site Web, et cela les incitera non seulement à acheter, mais aussi à payer plus cher pour votre produit ou service, augmentant ainsi instantanément la rentabilité. Redescendons un peu plus loin pour voir ce que nous pouvons trouver d'autre. Maintenant, le site Web de Tesla semble être extrêmement visuel, ce qui, encore une fois, est très important pour les sites Web de commerce électronique, mais vous ne voyez pas beaucoup d' informations sur les pages elles-mêmes. En fait, il se concentre uniquement sur l'imagerie réelle du produit lui-même et sur les solutions, ce qui permet au client de trouver très facilement la page suivante indiquant où il doit se trouver. Ainsi, par exemple, si nous voulons examiner les différents véhicules et savoir plus sur la Model S, nous sommes ensuite redirigés vers une page de vente où nous pouvons en savoir plus sur la voiture et être finalement convaincus de ses caractéristiques et de ses avantages. Maintenant, il est très important d'avoir une page de vente distincte pour chaque produit que vous vendez car cela vous permet vraiment de convaincre les immigrants la valeur et de la valeur que votre produit peut apporter à votre public cible. Et comme vous pouvez le constater, même sur la page de vente, elle est extrêmement visuelle. Tesla ne vous vend donc pas vraiment les avantages et les fonctionnalités réels à ce stade. Ils continuent de vous convaincre du côté sexy de la voiture. En fin de compte, comme ils le savent, vous finissez par acheter un test raison de la conception de la voiture, et pas nécessairement parce qu' elle offre plus d'espace dans le coffre, ni même en raison du kilométrage ou de la nature électrique de la voiture Vous l'achetez parce que c'est un mouvement, probablement à cause d'Elon Musk, pour être tout à fait honnête, et aussi pour les économies, les allégements fiscaux, mais en fin de compte à cause de son apparence ancienne, parce que les voitures testées ne ressemblent en rien à aucune autre voiture sur le marché. Et avouons-le, comme si cette voiture extrêmement sexy, elle est superbe. Et le meilleur, c'est que lorsque vous commandez la voiture, cela vous permet de commencer à choisir la voiture que vous voulez très facilement et sans effort commencer à choisir la voiture que vous voulez Donc, si vous voulez que la voiture soit d'une belle couleur rouge, vous pouvez changer les roues et vous pouvez voir exactement à quoi ressemblera votre voiture sous tous les angles. Vous pouvez choisir l'intérieur, vous pouvez changer la couleur de l'intérieur. Vous pouvez littéralement avoir la voiture exactement comme vous le souhaitez. Maintenant, je sais que vous pouvez le faire avec peu près n'importe quel type de voiture de nos jours, à condition que vous soyez prêt à payer, mais c'est ainsi que Tesla vous montre la voiture et ses différents avantages sous forme visuelle. Ils permettent à l'utilisateur de comprendre très facilement ce qu'il obtient. Et par exemple, vous souvenez-vous que dans une leçon précédente, j'ai commencé à parler de calories mentales et fatigue mentale ? Réfléchis à ça. Tesla a littéralement déployé tous ces efforts pour présenter la fonction de pilote automatique améliorée dans un format visuel afin que vous puissiez réellement comprendre exactement ce que puissiez réellement comprendre exactement ce fait la fonction de pilote automatique sans avoir à lire un seul Cela montre littéralement la voiture que vous allez acheter en action sur la route, prête à utiliser la fonction de pilote automatique améliorée Ainsi, lorsqu'il s'agit de vendre cette fonctionnalité et cet avantage particuliers, vous ne vous contentez pas de lire des articles à ce sujet. Vous le voyez en fait en temps réel , et avouons-le. Peu de constructeurs automobiles le font. Et c'est ce qui rend Tesla si spéciale en tant que marque. Ils adorent utiliser de beaux visuels pour vendre leurs produits Voyons donc comment Apple pourrait faire les choses un peu différemment. Comme vous pouvez le constater, Apple est très attachée à l'esprit de Noël puisque le film sera tourné en décembre Il ne reste donc que quelques semaines avant Noël Vous pouvez donc constater qu'ils ont une longueur d'avance. Maintenant, si nous faisons défiler la page vers le bas, nous pouvons à nouveau voir le produit utilisé dans des situations réelles. Maintenant, je ne sais pas si vous vous en souvenez ou si vous avez la mémoire d'un poisson rouge, ce que je fais parfois, ce que je fais parfois, mais exactement la même approche a été utilisée sur le site Web de Tests Ils montraient comment la voiture peut profiter à l'utilisateur, s'intégrer facilement dans sa vie. Et c'est un thème très courant, que vous verrez sur tous les sites Web de commerce qui comprennent réellement comment vendre aux clients. Maintenant, si nous faisons défiler la page vers le bas, vous verrez à nouveau de magnifiques images pour augmenter la désirabilité Et un format très simple composé essentiellement de liens pour en savoir plus sur le produit. Nous allons maintenant aborder structuration de votre page d'accueil en tant que marque de commerce électronique et tout cela plus tard dans le cours Mais vous pouvez voir que le seul but de la page d' accueil est de vous permettre d'accéder aux pages de vente des produits particuliers qui pourraient vous intéresser le plus rapidement possible. Et vous avez littéralement devant vous tous les produits les plus populaires qu' Apple essaie de vendre . Vous avez l'édition Titanium de l'iPhone 15 pro. Vous avez l'iPhone 15 avec un nouvel appareil photo, nouveau design et une nouvelle foi C'est un nouveau mot. Je ne savais même pas que cela existait, mais vous avez les liens pour l'acheter et aussi pour en savoir plus directement sur la page de vente. Vous avez également le Macbook Pro, l'AP Hods Pro, la montre, la carte, le trading Vous avez littéralement tout ce dont vous avez besoin pour accéder aux pages des produits les plus consultés. Et vous pouvez constater que chaque produit, quel qu'il soit, est parfaitement présenté, de sorte qu'il est net et beau, quelle que soit l'image que vous regardez Encore une fois, il s'agit simplement de réaffirmer le fait que la photographie, lorsqu'il s'agit d'un commerce électronique, est essentielle. Donc, n'y allez pas à bas prix. Assurez-vous d'investir dans la photographie. Surtout lorsqu'il s'agit d'un site Web de commerce électronique. Maintenant, lorsque vous accédez au site Web et aux pages de vente d'Apple, les choses commencent vraiment à devenir claires. Vous voyez pour les AirPods Pro, qui sont littéralement l'un des produits les moins sexy au Vous les mettez littéralement dans vos oreilles, et ce sont essentiellement des écouteurs sans fil. C'est ça. Apple a cette façon de rendre ses produits vraiment sexy. Maintenant, cette animation réelle est développée en utilisant beaucoup d'animation. Et ce n'est en fait pas si difficile à faire tant que vous avez les médias nécessaires pour le faire. Maintenant, nous pouvons y revenir un peu plus tard dans le cours, mais concentrez-vous simplement sur la simplicité des pages de vente Apple. Ils ne présentent jamais trop d'informations et simplifient les choses. Après tout, ils ne vendent littéralement que des écouteurs et ils les gardent extrêmement basiques. Mais même en parcourant cette page en particulier, cela me donne envie de les acheter Cela donne au produit une apparence plus désirable qu' il ne l'est nécessairement. Et en fait, c'est l'une des principales raisons pour lesquelles j'ai fini par acheter ces écouteurs, car ils étaient tellement beaux sur le site Web que j'ai dû me rendre au magasin pour les voir par moi-même. Et une fois que je les ai mis sur mes oreilles, j'ai eu l' effet antibruit, ils m'ont été vendus Il me fallait les avoir. Maintenant, nous n'allons pas parcourir la page en entier. Mais comme vous pouvez le voir ici, Apple se concentre à nouveau sur la présentation visuelle des avantages du produit, comme vous pouvez le voir ici et aussi ici Et c'est quelque chose de très constant. Et vous le verrez sur le site Web de Tesla, sur le site Web d' Apple, ainsi le prochain site Web que nous examinerons. Ils aiment montrer visuellement les avantages du produit. Encore une fois, revenons à la fatigue mentale et consommez le moins de calories mentales possible. Nous sommes donc tous d'accord pour dire que le site Web d' Apple a l' air vraiment solide, surtout lorsqu'ils vendent un produit aussi basique et ennuyeux. Mais en ce qui concerne les produits ennuyeux, comment pouvons-nous devenir ennuyeux ? Eh bien, j'ai pensé que nous allions examiner le produit probablement le plus ennuyeux au monde afin de voir comment ils le vendent à leur public de Tarko Voici donc Ring, et Ring est essentiellement une sonnette vidéo qui peut vous aider à voir qui est à votre porte sans aucun effort, et vous pouvez surveiller ce votre téléphone et parler aux gens C'est plutôt intelligent. Mais c'est un produit plutôt ennuyeux. Alors, comment le vendent-ils ? Eh bien, allons-y et découvrons-le. Ainsi, comme vous pouvez le voir sur leur page d'accueil, encore une fois, vous pouvez voir que leur page d' accueil présente simplement tous les différents produits qu'ils peuvent offrir d'une manière très simple et facile à naviguer Vous pouvez accéder à n'importe lequel de leurs produits simplement en utilisant ces boîtes. Maintenant, bien sûr, vous pouvez également accéder à la barre de navigation où vous pouvez facilement accéder à n'importe lequel des produits ici. Passons donc à la caméra Stickup et voyons de quoi il s'agit D'accord, comme vous pouvez le constater, cette page produit en particulier est beaucoup plus conservatrice que les pages Apple et Tesla. Maintenant, ce que vous pouvez voir, c' est que la photographie du produit elle-même, encore une fois, est vraiment époustouflante. Ça a l'air incroyable. Et vous pouvez également voir les différentes couleurs qu'ils ont, des produits, ils les ont donc en blanc et en noir. Et vous pouvez également voir qu'ils ont de nouveau le produit, présenté dans certaines situations, et vous pouvez en voir plus. Donc, par exemple, vous allez ici, et vous pouvez voir, euh, il y a quelqu'un qui semble bien visible devant la Vous pouvez voir qui ils sont depuis la sécurité de votre téléphone, où que vous soyez. Il vous envoie automatiquement cette image. Encore une fois, cela limite la fatigue mentale que l'utilisateur ressent pour comprendre ce que ce produit peut apporter à ma vie. Eh bien, cela peut vous aider à rester en sécurité en ne vous laissant pas à la porte lorsqu' personne potentiellement dangereuse frappe à la porte Et encore une fois, cela vous montre d'autres avantages, comme, par exemple, la possibilité de surveiller certaines zones du jardin. Vous pouvez également le régler, il est donc très facile à régler et à recharger. Maintenant, tous ces petits avantages et fonctionnalités sont résumés dans cette section très facile à comprendre Et encore une fois, il s'agit en fin de compte d'éviter la fatigue des clients. Pensez-y donc toujours lorsque vous créez un site Web de commerce électronique, car en fin de compte, vous souhaitez limiter la quantité de calories mentales consommées par l'utilisateur. Et au fur et à mesure que vous faites défiler la page, vous pouvez voir interactions réelles et des situations réelles dans lesquelles l'utilisateur pourrait utiliser le produit. C'est l'intégrer dans votre vie. Cela vous montre que vous avez besoin ce produit en particulier pour assurer votre sécurité et celle de votre famille. n'est pas pour rien qu'un homme , sa femme, son petit garçon et une petite fille montrent que c' , sa femme, son petit garçon et une petite fille est parfait pour les familles, car cela vous aidera à assurer votre sécurité, et cela aidera également à assurer la sécurité de votre maison lorsque vous n'êtes pas là, et vous êtes en fait dans un restaurant italien en train et cela aidera également à assurer la sécurité de votre maison lorsque vous n'êtes pas là, et vous êtes de manger une pizza avec votre famille Ring fait un excellent travail comprendre exactement pourquoi les gens achèteraient ce produit en particulier, car ils veulent assurer la sécurité de leur famille et s' assurer protéger leur maison et leur famille. Et vous pouvez voir comment, encore une fois, ils mettent en valeur les avantages et les fonctionnalités du produit en question avec cette animation particulière Ils montrent que vous pouvez littéralement surveiller ensemble de la maison, y compris vos actifs, à savoir votre voiture et votre véhicule, en investissant simplement dans ce produit en particulier J'espère donc que cela vous donnera une idée de la façon dont vous pouvez aborder la création de votre site Web de commerce électronique. Maintenant, si vous consultez différents sites Web qui se trouvent dans votre espace, et qui sont similaires au différents sites Web qui se trouvent dans votre espace, et qui sont type de que vous allez vendre, c'est prendre le plus de prendre le plus possible sur chaque site Web, mais ne le copiez pas. Donc, en gros, ce que je veux dire, c'est essayer de prendre les meilleurs éléments que vous aimez de chaque site Web que vous trouvez, puis réunissez-les et créez-les pour créer un nouveau site Web qui soit personnel et unique pour vous et pour ce que vous faites en tant que marque. Quoi qu'il en soit, ce n'est qu'une source d'inspiration pour vraiment vous aider à démarrer. Nous allons bientôt commencer à créer votre site Web, donc sur cette note, je vous verrai dans la prochaine leçon. À bientôt. 7. Exemples de sites Web - Édition de marque personnelle: Donc, si vous créez un site Web pour une marque personnelle, il faudra vraiment adopter une approche différente de celle de la plupart des autres sites Web. La raison en est que les marques personnelles et les sites Web ne servent pas uniquement à vendre des produits. Il s'agit principalement de créer votre liste d'e-mails. Dans cette leçon, je veux vous montrer quelques exemples incroyables de sites Web qui vous mettent vraiment à l' aise et vous mettent dans une position où vous voulez vraiment donner votre adresse e-mail. Et je vais vous montrer comment ces trois sites Web, en particulier, utilisent des techniques vraiment intelligentes pour finalement obtenir vos données afin de vous les vendre plus tard. Commençons par mourir avec Huberman Lab. Maintenant, Huberman Lab, si vous ne le savez pas, ce très beau monsieur, c'est Andrew Il est neuroscientifique et podcasteur très populaire. Il a participé à de nombreux podcasts tels que Joe Rogan, John Peterson et bien d'autres En ce qui concerne son site Web particulier, il dispose de nombreuses méthodes pour capturer votre adresse e-mail. Mais si vous pouvez voir ici, son appel à l'action, et ceci est un CTA ici, un appel à l'action pour que vous passiez à l'action OK ? Maintenant, lorsque vous cliquez sur ce bouton particulier ici, vous accédez à cette petite fenêtre contextuelle. Qui le savait ? Il y a une petite vidéo qui vous explique à quel point cette chose dont vous avez besoin est géniale, quel point elle va avoir un impact sur votre vie. Et puis il vous donne une petite boîte ici pour jour à votre adresse e-mail. sites Web pour les marques personnelles sont axés sur la génération Vous pouvez donc vendre à ce même client encore et encore pour le développer en tant que prospect Maintenant, examinons un peu plus en détail en quoi consiste ce site Web. Maintenant, il y a beaucoup de renforcement de la confiance. Donc, en fin de compte, on lui accorde le plus d'importance possible pour le positionner, il a une autorité dans cet espace particulier. Et si vous faites défiler l'écran vers le bas, il ne s'agit littéralement que ses domaines d'expertise particuliers. Il s'agit donc de créer le plus de valeur possible. Il a une newsletter qui, encore une fois, traite de la génération de prospects. Il va vous envoyer des informations, se positionner comme une autorité. Et puis, le moment venu, il a peut-être un produit ou quelque chose qu'il veut vous vendre, ou peut-être qu'un sponsor pertinent par rapport à ce qu'il fait veut vous vendre. Il peut percevoir une commission pour chaque vente générée. Passons à ses événements. Il vend des événements, par exemple. Tu sais, il parle. Il peut donc réellement vendre des billets pour ses événements, parlant exactement de ce sur quoi il s' est positionné en tant que figure d' autorité. Ainsi, par exemple, il est à Melbourne, Sydney, Sydney, encore une fois, Los Angeles, New York, Toronto. Il organise donc ces événements et vend son temps en tant qu' organisateur d'événements pour finalement partager son expertise dans ce cadre particulier. Maintenant, si nous allons sur le site Web de Con Mari. C' est très différent. Maintenant, c'est Marie Condo. Maintenant. Je ne sais pas si tu l'as vue. Elle avait une série Netflix très populaire, intitulée Marie Condo Tidy Specialist, ou Tidy Mh Marie Condo, quelque chose Quoi qu'il en soit Maintenant, c' est essentiellement, en fait, ça ne l'était pas, ça s'appelait Spark with Joy ou quelque chose comme ça avec joie. Quoi qu'il en soit C'était vraiment très bon, vraiment thérapeutique, et vous pouviez le regarder et vous sentir vraiment détendu par la suite. C'était un peu comme méditation sur ce genre de sujet, mais c'était aussi assez petit. Vous pouvez voir ici que Marie Condo dispose désormais de plusieurs méthodes différentes pour saisir votre adresse e-mail. Elle avait en fait une fenêtre contextuelle, qui est apparue alors que j' arrivais sur le site Web, nous avons malheureusement manquée Mais elle a un petit cours. Elle a une boutique. Elle a également un bulletin d'information dans son pied de page, ce qui est à peu près très standard pour peu près tous les sites Web de marque personnelle Mais ce que Marie Condo fait très différemment, c'est qu'elle vend des produits et du coaching, ce qui est vraiment unique, surtout pour quelqu'un qui est essentiellement une marque personnelle. Elle s'est diversifiée et a créé une autre marque, Con Marie, autour de sa marque personnelle Sa marque personnelle consiste donc à ranger, à être bien rangée et à être organisée Elle a essentiellement créé un programme de coaching destiné à être vendu aux personnes qui veulent être bien rangées comme elle, et non seulement se fatiguer comme elle, mais aussi offrir cette propreté en tant que service à d'autres personnes dans leur Ils peuvent donc littéralement posséder leur propre entreprise, ce qui est super impressionnant, non ? Maintenant, en ce qui concerne son site Web en particulier, vous voyez qu'il est super propre. Vous pouvez voir qu'elle possède une boutique en ligne. Elle a plein de produits différents, ce qui est vraiment génial. Elle a tellement de produits différents, et le nombre de produits qu'elle possède est vraiment incroyable. Et vous pouvez voir qu'elle est toute entière, vous savez, des produits et toutes, vous savez, différents types de vêtements et de livres. Tu sais, elle a des organiseurs de bureau. Tout est axé sur l'organisation et la création d'un espace vraiment magnifique qui suscite la joie C'est en fin de compte l'une des principales raisons de son image de marque. Maintenant, si vous avez des difficultés avec marque et que vous n'avez pas encore terminé votre stratégie de marque interne, n' hésitez pas à consulter notre cours de stratégie de marque, qui est le premier cours de notre programme Brand Builder Pro. Il aura tout ce dont vous avez besoin pour vraiment comprendre comment développer une marque interne, comme Marie Condor ici, et comprendre quel est l'objectif de votre marque, votre énoncé de mission, vos valeurs, votre énoncé de vision Tout pour que tout soit vraiment aligné au sein de votre marque. Mais revenons au troisième exemple, celui de Ghetti Maintenant, Ichi, si tu ne le connais pas, est un peu comme un moine, un cher moine moderne, d'après ce que je dis ? Je crois qu'il a fait une sorte de retraite de moine pendant environ six mois, puis il a décidé que non, ce n'était pas vraiment bon pour moi. J'aimerais en quelque sorte revenir au monde moderne, mais il a certaines des leçons qu' il a apprises dans le village des moines. En ce qui concerne ce site Web en particulier, il est très, très similaire. Maintenant, il avait une fenêtre contextuelle, qui est apparue avant que j' aille sur le site Web, que vous n'avez pas réussi à voir. Mais en fin de compte, il essaie montrer autant de crédibilité et d'autorité que possible, en le montrant à l'Ellen Show, en le montrant à l'opéra, en le montrant dans différents films, en montrant ses livres. Et encore une fois, il vend essentiellement du terrain. Il te montre, OK, si tu veux être comme moi, tu peux être coach comme J Shelly, non Tu peux être coach comme moi. Devenez entraîneur et moine, Modern Day Monk, si c'est comme ça qu'il l'appelle. Voyez ici qu'il s'agit encore une fois d' autorité et de renforcement de la confiance. Encore une fois, il est très important de renforcer la confiance. Et encore une fois, au fur et à mesure que nous avançons sur le site Web, vous pouvez finalement acheter du coaching, des cours, des livres, le podcast. Eh bien, vous n'êtes pas obligé d'acheter le podcast, mais vous pouvez l' écouter, mais vous pouvez également réserver Je pour prendre la parole. Maintenant, il s'agit en fin de compte de renforcer le plus de crédibilité possible. Et lorsqu'il s'agit d' amener Je She à prendre la parole lors de votre événement, il montre en fin de compte qu'il est un expert dans ce domaine en particulier en présentant toutes ses expériences, les différentes émissions auxquelles il a participé En tant que marque personnelle, vous n'avez pas vraiment besoin de le faire. Vous n'avez pas besoin d' avoir choisi Ellen ou d'être soutenue par Oprah Mais il suffit de montrer que vous savez de quoi vous parlez. Vous pouvez le faire de différentes manières. Vous pouvez le faire avec un blog. Vous pouvez le faire avec la vidéo. Vous pouvez le faire avec un contenu vraiment informatif. Vous pouvez le faire en organisant, vous savez, des ateliers, des séminaires. Toutes ces choses sont essentiellement un moyen de renforcer l'autorité. Et au fur et à mesure que tu t' amélioreras et que tu grandiras, peut-être qu'un jour tu seras sur Ellen ou Opera, sur l'une de ces très grandes plateformes reconnaissables que tu pourras finalement utiliser pour te catapulter dans la célébrité Maintenant, écoutez, chacun de ces sites Web est unique et différent à sa manière. Mais l'une des choses communes à tous est qu' ils se concentrent vraiment sur le renforcement de l'autorité dans leur espace particulier. Ceci est essentiel si vous souhaitez créer un site Web pour une marque personnelle. Ce que je recommanderais, c'est de regarder certaines des personnes qui vous intéressent vraiment. Peut-être qu'ils font quelque chose de très similaire au type de choses que vous souhaitez proposer sur le site Web que vous créez, et qu'ils se rendent sur le site Web et qu'ils écrivent tout ce que vous aimez vraiment sur ce site Web en particulier car ils , car ils vous seront très utiles plus tard lors de la création de votre site Web. Quoi qu'il en soit, j'espère que ces exemples vous donneront un très bon aperçu et une idée façon dont vous pouvez aborder personnellement le développement de votre site Web. Plus tard dans le cours, lorsque vous créerez votre propre site Web, il sera très important pour vous de consulter d'autres sites Web qui vous inspirent vraiment. Sur cette note, j'ai hâte de commencer enfin à créer votre site Web. Passons à la prochaine leçon, et nous y serons très bientôt. À bientôt 8. Exemples de sites Web - Selling Services Edition: Si vous essayez de vendre un service à une personne ou à une entreprise, par exemple, vous devez comprendre comment s'y prennent les meilleurs sites Web au monde, afin de pouvoir intégrer ce que vous apprenez dans la conception de votre propre site Web. Et c'est vraiment génial d' apprendre comment les grands acteurs s'y prennent afin savoir exactement comment vous pouvez l'aborder et faire de votre mieux en fonction des ressources dont vous disposez. Et la meilleure chose à propos de Web Flow, c'est vous pouvez littéralement créer à peu près tout ce que vous voulez tant que vous maîtrisez les principes fondamentaux, ce que nous aborderons un peu plus loin dans le cours. Passons donc au premier exemple que nous avons, qui est Pentagram Aujourd'hui, Pentagram est une agence de design qui est finalement située dans quatre endroits différents dans le monde, dont New York, Londres, Austin et Berlin Pentagram existe donc depuis un certain temps, et ils ont beaucoup de succès Il y a donc probablement certaines choses que nous pouvons apprendre de leur site Web. Passons donc à leur page d'accueil, puis essayons de comprendre exactement ce qu'ils essaient de faire avec leur page d'accueil. Donc, comme vous pouvez le voir ici, ils ont un slider montrant huit types de travail différents, montrant essentiellement qu' il existe une agence de design D'accord ? Ils n'essayent pas de vous vendre quoi que ce soit. Ils disent simplement : écoutez, c'est ce que nous faisons, et si cela vous intéresse, n'hésitez pas à en savoir plus. Maintenant, si nous faisons défiler la page vers le bas, cela va simplement demander plus de travail. Il s'agit simplement de mettre en valeur le travail qu'ils accomplissent afin que vous puissiez finalement savoir si c'est le type de travail ou le type de style que vous souhaitez avoir pour votre propre entreprise Maintenant, ce que vous allez voir, c'est qu'ils ne s' intéressent pas vraiment aux services. Vous ne pouvez donc rien apprendre sur leurs services. Vous pouvez consulter leur travail et en apprendre un peu plus sur les types de travail qu'ils effectuent. Mais en fin de compte, ils ne disent pas si vous voulez un logo, par exemple, vous devez cliquer ici. Il s'agit simplement de consulter leur travail, puis si vous l' aimez, je suppose, il vous suffit de les contacter via la barre de contact et, finalement, de vous rendre au bureau ou de leur envoyer un e-mail. Maintenant, lorsque vous vous intéressez aux projets de Pentagram, c'est là que les choses deviennent très intéressantes, car vous pouvez vraiment voir leur expertise dans les différents projets présentés. Ainsi, par exemple, il s'agit d'une marque de vêtements de sport appelée Lens, où vous pouvez essentiellement voir à quel point le logo est dynamique, vous pouvez voir à quel point la palette de couleurs est belle Et en gros, vous pouvez vraiment avoir une du type de marque à laquelle vous avez affaire, vous pouvez voir qu' ils ont vraiment pensé aux différents détails et détails de la marque elle-même pour vraiment obtenir le meilleur résultat possible Vous pouvez voir que c'est très attrayant visuellement. Vous pouvez voir qu'ils mettent en valeur les différentes couleurs qu' ils utilisent dans leur application, sur le site Web, dans la publicité Ils présentent de nombreux visuels incroyables pour montrer à quel point la marque est géniale et quel point elle fait son travail Donc, si vous étiez une entreprise de vêtements de sport et que vous envisagiez d' engager Pentagram vous savez qu'elle peut faire le travail Ce n'est même pas une question, tu sais ? C'est donc le premier exemple d' une entreprise qui vend le service dans le cadre de ses activités, et qui présente essentiellement exactement ce qu'elle fait sans même laisser de place à l' erreur ou à l'émerveillement Bon, maintenant, nous avons vu le pentagramme et nous avons vu comment ils abordent les choses Comment aborderait une petite agence ? Je voulais donc vous montrer le site Web de l'un de mes entreprises, juste pour être totalement transparent, afin que vous sachiez que je pratique ce que je prêche Donc, si nous allons sur le site Web de Clementine House, vous pouvez le voir en quelques secondes, et nous y reviendrons plus en détail plus tard dans le cours Parce que cela va être très important lorsque vous commencerez à créer votre page d'accueil. Mais vous pouvez voir dès les premières secondes que vous savez exactement pourquoi vous êtes ici. Il s'agit donc d'une entreprise qui aide essentiellement, vous savez, marques à trouver les meilleurs noms pour leurs entreprises fonction de leur positionnement stratégique et de nombreux autres facteurs. Maintenant, ce site Web en particulier a été conçu manière à renforcer la confiance dès la première seconde où vous arrivez sur le site Web. Vous savez donc exactement où vous êtes, vous savez exactement pourquoi vous êtes ici. Ensuite, nous présentons certains des logos et noms que nous avons développés au fil des ans. Il s'agit tout simplement de présenter le travail exact que nous faisons et le travail que nous avons accompli dans le passé Puis, au fur et à mesure que nous descendons plus bas , cela met en valeur ce beau diable, qui ne sait pas qui il est, avec une vidéo pour partager ce que nous faisons en tant qu'entreprise et ce que vous pouvez attendre de nous dans le cadre de votre voyage avec nous Maintenant, vous pouvez voir ici que nous faisons en sorte que les choses extrêmement simples et faciles à digérer car il est vraiment important pour nous comprendre exactement ce que nous faisons de la manière la plus simple possible. Nous avons des tonnes de témoignages de nombreuses personnes différentes, et nous avons également nos prix sur notre site Web Maintenant, certaines agences ne le font pas. Certaines agences aiment garder les choses assez transparentes afin de pouvoir facturer, vous savez, les frais qu'elles vous savez, les frais qu' souhaitent à chaque client en particulier. Personnellement, je pense que la transparence est très importante. J'ai envie d'être honnête à tout moment. Et je pense qu'il est très important d'être transparent en matière de prix car cela montre simplement exactement ce que vous obtenez pour quel prix, et cela signifie également que chaque client qui vient sur le site Web paie exactement le même prix. Maintenant au sommet, nous avons également d'autres types de services, comme par exemple le développement de sites Web, nous sommes en train d'apprendre en ce moment. Mais la dénomination est la première partie du voyage. C'est là que nous jumelons la plupart de nos clients, puis nous arrivons finalement à un point où nous finissons travailler davantage avec ce client en particulier pour vraiment l'aider à obtenir le meilleur résultat possible. Nous avons consulté mon site Web. Je ne veux pas passer trop de temps ici parce que nous pouvons en apprendre beaucoup, mais je voudrais passer à un autre site Web, qui est un peu différent d'une agence. Je souhaite passer à un site web qui est principalement au service du logiciel. vous aidons donc à créer Nous vous aidons donc à créer des sites Web d'une manière principalement axée sur le commerce électronique. Maintenant, cette marque en particulier, Shopify, ne fait que vendre la possibilité de vendre des produits en ligne C'est tout ce qu'ils vous permettent essentiellement de faire. Ils vous permettent essentiellement de vendre votre produit en ligne à l'aide d'une boutique en ligne. Maintenant, certains de leurs modèles sont assez restrictifs, et c'est pourquoi j'utilise généralement flux Web pour être totalement honnête Mais vous pouvez voir comment ils se connectent instantanément à l'utilisateur réel qu'ils cherchent à cibler. Donc, les entrepreneurs, les fondateurs qui veulent vendre un produit Ils établissent essentiellement des liens avec eux en présentant des entrepreneurs ambitieux et passionnés par entrepreneurs ambitieux ce qu'ils font, quoi un fondateur et à quoi un fondateur et un entrepreneur seront toujours attachés Vous voyez également instantanément une section consacrée au renforcement de la confiance. C'est un point sur lequel nous reviendrons plus tard dans le cours, et il est vraiment important que cette section sur la confiance soit ici. Vous verrez que cette section de confiance est également très importante sur mon site Web, et elle le sera également sur votre site Web, car à moins d'être une grande entreprise comme Pentagram qui existe depuis plus de 30 ans, cela vaut toujours la peine d' y avoir une section de confiance, car en fin de compte, vous devez établir une relation de confiance avec de nouveaux utilisateurs qui sont Pentagram qui existe depuis plus de 30 ans, cela vaut toujours la peine d' y avoir une section de confiance, car en fin de compte, vous devez établir une relation de confiance avec vous venez sur votre site Web et n'avez aucune idée qui vous êtes et de ce que vous faites. Maintenant, encore une fois, vous pouvez voir ici qu' ils simplifient les choses. Et pour ce qui est de la valeur. Il ne s'agit pas de compliquer les choses, il s'agit de réduire au maximum la fatigue mentale, de vous fournir de petites informations et de s'assurer qu'ils utilisent des visuels pour montrer à quel point il est facile d' utiliser le logiciel Encore une fois, lorsque vous faites défiler , vous voyez de plus en plus de visuels, de graphiques, d'animations, ce qui vous montre essentiellement que vous pouvez vendre n'importe quoi à n'importe qui avec de nombreuses configurations de paiement différentes, et cela essaie essentiellement de vendre Shopify en tant que solution pour les entreprises de commerce électronique. Encore une fois, le site Web est super propre, super minimal, et la structure, même si ce site Web peut sembler un peu compliquée, elle ne l'est pas en fait. En fait, c'est vraiment très simple. Et chaque section de ce site Web a un objectif. Elle a une raison d'être. Et nous allons passer en tout cela dans le cadre du cours. Ne t'inquiète pas. Vous allez comprendre exactement ce que fait chaque section de ce cours. Vous allez comprendre comment ensuite en prendre et en apprendre le plus possible pour ensuite intégrer cela dans votre propre site Web à l' avenir. Vous serez donc en mesure d'avoir un site Web, qui est tout aussi bon, sinon meilleur, Shopify après avoir suivi ce cours et appris tout ce qu'il contient Maintenant, l'une des choses les plus importantes lorsqu'il s'agit de créer un site Web est en fin de compte d' en apprendre le plus possible à partir des sites Web que nous aimons Ensuite, prenez en compte ce que nous avons appris dans notre processus de développement de notre site Web. Et nous allons créer votre site Web très bientôt au cours du cours. Nous allons passer en revue tout cela très, très bientôt. Mais je veux simplement que vous compreniez qu'il ne faut pas se sentir mal à suivre certaines leçons et de prendre des choses que vous aimez sur certains sites Web, car tout cela fait partie du jeu. Tout cela fait partie de l' apprentissage de ce que vous voulez et de ce que vous ne voulez pas voir sur votre site Web. Et cela ne se fait qu'en explorant d'autres personnes, y compris vos concurrents, pour finalement créer un site Web qui, selon vous représente le mieux votre marque et vous-même. Quoi qu'il en soit, j'ai hâte lancer dans la création de votre site Web et de comprendre les principes fondamentaux de la conception de sites Web bientôt au cours. Je vous verrai donc lors de la prochaine leçon. Je vous en prie. 9. Faire grandir votre marque avec la conception de site Web: Pourquoi le développement d'un site Web axé sur les objectifs est-il important ? Eh bien, la question que vous vous posez peut-être est qu'est-ce que le développement de sites Web à objectif ciblé ? Eh bien, cela semble en fait beaucoup plus complexe qu'il ne l'est réellement. C'est vraiment simple. je dis cela simplement, c'est parce que je pense que chaque entreprise devrait avoir au maximum deux objectifs à atteindre avec son site Web. Permettez-moi donc de vous donner quelques exemples des types d' objectifs que les sites Web ordinaires auraient. Maintenant, évidemment, tout dépend du type de site Web que vous créez réellement. Par exemple, si une entreprise est une marque de commerce électronique, son objectif est de vendre autant de produits au prix le plus élevé possible. Et là où cela peut être leur objectif principal, un objectif secondaire peut être de capturer autant de prospects et d' e-mails que possible, car cela mène ensuite au premier objectif, qui est de leur vendre des produits plus tard. Maintenant, si quelqu'un construit une marque personnelle et crée un site Web pour cette marque personnelle, alors oui, bien sûr, vous pouvez toujours vendre des produits tels que des livres et des produits numériques, ou peut-être même des cours ou du coaching. Vous voudrez également développer votre liste de courrier électronique autant que possible. Parce qu'avec une liste d'e-mails plus grande, plus vous avez d'influence. Avec plus d'influence, vous pouvez également développer votre audience, ce qui crée en fin de compte plus d'autorité , ce qui vous permet de développer votre marque personnelle plus rapidement. Ainsi, pour un site Web de marque personnelle, il se peut qu'ils souhaitent simplement élargir leur liste d'e-mails et peut-être vendre certains produits en conséquence. Donc, pour un site Web axé sur l'image de marque personnelle. Cela se concentrera sur l'augmentation votre liste d'e-mails aussi grande que possible afin que vous puissiez leur vendre des produits plus tard et également sur un objectif secondaire de vendre des produits en attendant. Ensuite, si vous vendez un produit ou un service par voie numérique , vos principaux objectifs seront de vendre le produit ou le service à l'avance ou de créer une sorte de rendez-vous ou une sorte d' atelier ou de séminaire afin que vous puissiez finalement vendre le produit ou le service en personne pour obtenir le plus de ventes possible Par exemple, au sein de mon agence de développement de marque, je demande au client de répondre à quelques questions rapides puis je lui donne un système de prise de rendez-vous, lequel il peut planifier un appel avec moi pour discuter de 15 minutes pour voir si nous sommes la bonne personne l'un pour l'autre. Cela débouche ensuite sur un appel commercial cours duquel je peux essentiellement présenter nos produits et services pour les aider à obtenir la solution dont ils ont besoin. Maintenant, je veux vraiment examiner quelques sites Web différents qui peuvent vous donner un aperçu des un aperçu différents objectifs que chaque site Web essaie d'atteindre, afin que vous compreniez exactement comment trouver les objectifs pour votre site Web spécifique. La question que vous vous posez peut-être est donc comment puis-je trouver l' objectif de mon site Web ? Eh bien, je voudrais partager avec vous quelques exemples de sites Web de secteurs complètement différents afin que vous puissiez comprendre comment différentes entreprises abordent la recherche d'objectifs pour leur site Web. Et une fois que vous aurez trouvé l'objectif votre site Web et ce que vous voulez réellement que le site Web fasse pour vous en tant que travail et en tant que responsabilité, le processus de conception du site Web sera beaucoup plus fluide et beaucoup plus facile. Ainsi, par exemple, si nous examinons le site Web de Gym Shark, société de commerce électronique au Royaume-Uni qui vend des vêtements de fitness leggings et tout ce genre de choses, vous pouvez constater qu' ils ont des objectifs extrêmement directs Ils veulent commencer à canaliser les différentes personnes présentes leur page d'accueil dans la catégorie des femmes ou dans la catégorie des hommes. Vous pouvez donc cliquer ici pour accéder à Men's, par exemple, qui nous amène ensuite à tous les produits destinés aux hommes. de cette entreprise sont donc assez évidents objectifs de cette entreprise sont donc assez évidents. Les objectifs sont d'amener les visiteurs du site Web vers les pages pertinentes afin qu'ils puissent éventuellement acheter des produits le plus rapidement possible. Prenons l'exemple d'une autre entreprise de commerce électronique juste pour faire passer ce message. Donc, si nous allons sur le site Web d'Oak Monk, une marque vraiment cool basée à l'USC, je crois, et qui vend des produits vraiment sympas, vous pouvez voir ici qu'elle propose des produits très spécifiques Maintenant, si vous regardez les différents produits qu'ils proposent, ils ont une tonne de produits différents qu'ils peuvent potentiellement vendre à leurs clients. Ils ont des objets tels que des porte-allumettes, des horloges, des minuteries, belles tasses, des casse-têtes qui ont l'air plutôt cool, mais je ne sais pas vraiment ce que c'est, pour être tout à fait c'est, pour être tout à Ils proposent également des équipements tels que des boîtes d'excursions, par exemple, et des articles de papeterie, ce qui leur permet de proposer une très large gamme de produits. Mais si vous retournez sur la page d'accueil de l'entreprise et que vous jetez un coup d'œil aux principaux produits qu'elle essaie de vendre, qui sont essentiellement, j'imagine , le produit le plus rentable, , le produit le plus rentable, vous pouvez constater qu'elle essaie de vendre l'analogique et le kit de planification hebdomadaire, qui sont essentiellement les deux produits qu' elle essaie de promouvoir plus que tous les autres. Et lorsque nous examinons ce bouton en particulier, vous avez remarqué que sa couleur est complètement différente de celle du reste de la page d'accueil ? En effet, la marque souhaite que vous vous concentriez sur ce bouton en particulier et que vous le voyiez apparaître parmi tout ce qui se trouve sur la page. Et lorsque nous cliquons sur ce bouton, cela nous amène à une page qui contient essentiellement tout ce qui est lié à ce produit et à cette catégorie en particulier. Ce ne sont donc que deux exemples de la façon dont les entreprises de commerce électronique peuvent avoir un objectif très spécifique en ce qui concerne le fait d'inciter les utilisateurs à accéder à certaines pages et même de les inciter à se tourner vers certains produits Comment une marque qui vend un produit numérique, par exemple, pourrait-elle amener quelqu'un à faire exactement la même chose ? Eh bien, si nous allons sur le site Web de Hoot Suite, vous pouvez voir que leur appel à l'action est très clair Ils veulent essentiellement que l'utilisateur demande une démo ou, plus important encore, qu'il obtienne un essai gratuit du service Maintenant, ils ont beaucoup d'options et de pages différentes parmi lesquelles vous pouvez choisir, mais parmi toutes les pages qu'ils souhaitent que vous consultiez, la page de démarrage d'un essai gratuit est l'option qu'ils veulent que vous choisissiez. Ensuite, lorsque vous cliquez sur ce bouton, vous accédez à une page où vous pouvez dire que c'est juste pour moi. Ou j'ai une équipe. Il s'agit essentiellement canaliser le trafic du site Web vers des catégories pertinentes, afin que le client puisse créer le meilleur parcours client possible pour ces deux publics cibles pertinents Prenons un autre exemple de produit qui vend un service numérique que nous connaissons et aimons tous , à savoir Netflix. Maintenant, la page d'accueil de Netflix est vraiment simple. Maintenant, il vous permet essentiellement de signer Oh , il y a ce gros bouton rouge, que vous ne pouvez pas manquer, qui vous permet essentiellement d'ajouter votre adresse e-mail pour vous inscrire au jour le jour et annuler à tout moment. Maintenant, vous pouvez voir à quel point il est simple pour la personne de commencer, et ils disent également que cela ne coûte que 99 ti bat par mois. Si vous ne l'avez pas déjà remarqué, je suis actuellement en Thaïlande pour filmer ce cours en particulier, qui coûte environ 10$. Donc, en gros, ce qu'ils disent, c'est que ce n'est pas cher et que c'est pratiquement sans risque d' essayer, car vous pouvez annuler à tout moment. Comme vous pouvez le constater, Netflix a un programme très clair. Il veut que vous vous inscriviez pour que vous puissiez réellement accéder à la plateforme, et cela vous permet de le faire facilement. Cela ne complique pas trop les choses. Il veut que vous vous inscriviez le plus tôt possible pour accéder à la plateforme afin que vous puissiez réellement commencer à profiter du contenu et finalement en réellement commencer à profiter du contenu et devenir accro afin pouvoir commencer à leur payer des frais récurrents chaque mois Enfin, examinons certains sites Web destinés aux marques personnelles pour voir quels types d'objectifs elles ont mis en place. Donc, si vous connaissez Patrick Beck David, c'est un podcasteur, un homme d'affaires, une personne très inspirante Et en fin de compte, il a de nombreux objectifs différents sur son site Web. Maintenant, ce type existe depuis très longtemps, d'accord ? Et il a une équipe qui travaille au développement de sa marque personnelle. Maintenant, ce que je suggère personnellement, c'est que vous n' ayez pas autant d'objectifs sur votre site Web. Limitez-vous à un ou deux, un primaire et un secondaire ou secondaire. La raison en est que Patrick Beck David a une équipe de personnes qui gère son site Web et tous les différents aspects du site Web pour finalement créer cette très large gamme d'offres, qui lui permettra d'obtenir le points de contact possible avec des clients potentiels. Mais au moment où vous commencez tout juste à créer votre site Web, vous devez vous concentrer sur un seul objectif principal et peut-être deux à la fois pour démarrer. fur et à mesure que vous commencez à développer votre marque et à réellement développer votre site Web au fil du temps, identifiez une nouvelle opportunité, afin de pouvoir vendre davantage à vos clients et, en fin d' avoir plus d'objectifs en place. Vous pouvez voir ici que Patrick Bec David propose de nombreuses offres différentes. Il essaie de saisir votre adresse e-mail. Il essaie de vendre son livre. Il essaie de vendre du coaching. Il essaie de te faire écouter son podcast. Il a tellement d'objectifs différents, tous basés sur les différentes offres, packages et solutions qu'il peut vous proposer en tant que client. Examinons une autre marque personnelle pour voir si elle adopte la même approche. Maintenant, Jessie Isler est en fait l'une des personnes les plus inspirantes Il a une énergie super contagieuse, et c'est vraiment un bon gars. En gros, c'est comme ça qu' il me voit de toute façon. Maintenant, il a une autre très belle gamme de produits et de services à offrir. Mais il existe depuis très longtemps. Ce que je suggère encore une fois, c'est de se concentrer essentiellement sur un produit ou un objectif particulier sur lequel se concentrer. Parce qu'en fin de compte, ce que Jesse fait ici, c'est proposer du coaching Il vend un calendrier, qui est vraiment cool, qui vous aide à planifier votre année. Il tient également un bulletin d'information, des livres et organise des conférences. C'est exactement la même configuration. Mais en fin de compte, tout se résume à la même chose. Si vous voulez résumer tous ces services à un seul objectif, c'est de vendre le plus de produits possible. Essentiellement, si vous pensez à l'organisation des conférences, les livres, le calendrier et le coaching sont tous des produits. Ce sont tous des produits Jessie peut proposer à des clients potentiels En fait, je n'ai jamais consulté ce site Web auparavant, mais si je vais au bas des sites Web, je peux à peu près garantir qu'il y je peux à peu près garantir qu'il y aura une sorte de newsletter ou fonction d' inscription, car il essaiera essentiellement de s'inscrire pour que vous puissiez vous inscrire sur sa liste de courrier électronique afin qu'il puisse vous vendre une sorte de produit ou de service une sorte de produit ou de service plus tard. J'espère donc que cela vous donnera un petit aperçu de la façon dont vous pouvez personnellement trouver l'objectif de votre site Web. Assurez-vous de le noter et d' indiquer très clairement dans votre stratégie de création de site Web que vous voulez essayer d'atteindre un objectif spécifique et un objectif secondaire pour votre site Web, quel que soit le type de site Web que vous essayez de créer. Prenez donc le temps de vraiment comprendre exactement ce que vous voulez que le site Web fasse pour vous. Considérez votre site Web comme un employé numérique, et vous ne confiez à cet employé que deux responsabilités pour qu' il fasse extrêmement bien son travail. Parce que lorsque vous vous concentrez simplement sur une responsabilité principale puis une responsabilité de soutien, vous pouvez voir instantanément ce qu' il est important d'ajouter sur le site Web. Il ne va donc pas être trop encombré. Ça ne va pas avoir l'air très fréquenté. Il sera extrêmement clair et concis pour atteindre la seule chose que nous devions atteindre. Quoi qu'il en soit, j'espère que vous trouverez cette leçon utile, et j'ai vraiment hâte de vous voir dans la prochaine . À bientôt. 10. La 5-deuxième règle: D'accord, alors comment gagner la confiance des visiteurs d'un site Web en 5 secondes ou moins ? Maintenant, je suis sûr que vous savez parfaitement qu'au quotidien, les gens n'ont pas vraiment une longue durée d'attention avec TikTok et Instagram et que nous sommes constamment sur nos téléphones Nous donnons au site Web 3 à 5 secondes pour nous dire, d'accord, vous pouvez me donner ce dont j'ai besoin. Dites-m'en un peu plus. Maintenant, lorsque nous arrivons sur un nouveau site Web, et si vous visitez un nouveau site Web à l'avenir, vous pouvez réellement être conscient de vous-même et vous rendre compte que vous vous posez exactement ces trois questions dans cet ordre exact si vous regardez d'assez près. Maintenant, lorsque nous accédons à un tout nouveau site Web, si vous prenez du recul et réfléchissez aux questions que vous vous posez lorsque vous arrivez sur une nouvelle page d'accueil sur laquelle vous n'êtes posez lorsque vous arrivez sur jamais allée auparavant, nous nous posons généralement trois questions spécifiques dans l'ordre exact des SM à chaque fois. Il est très important de comprendre cela, car si vous créez un site Web et que vous n'en avez jamais créé auparavant, vous pouvez comprendre comment attirer attention de votre public cible dans les trois à cinq premières secondes, afin qu'il puisse passer plus de temps sur votre site Web et se rendre compte que vous pourriez être l'option pour lui de l' aider à trouver une solution au les exigences dont ils ont besoin. Donc, si vous savez comment attirer leur attention et les aider à rester un peu plus longtemps sur votre site Web, ils peuvent en apprendre un peu plus sur ce que vous avez à offrir et finalement vous choisir comme solution à leur problème. Si vous avez déjà créé un site Web et que son taux de rebond est très élevé, cela est essentiellement dû au fait que le site Web n'a pas attiré l'attention de la personne ou qu'il n'a pas été très clair quant à ce qu'il vend ou peut offrir Encore une fois, il est très important qu'en tant que personne qui crée un site Web, vous deviez vous assurer que les gens savent exactement ce que vous faites, ce que vous pouvez leur offrir. Le moyen le plus simple et le plus clair possible. Quelles sont donc ces trois questions que nous nous posons lorsque nous arrivons sur un tout nouveau site Web ? Eh bien, la première question est : que faites-vous et comment pouvez-vous m'aider ? Maintenant, ça fait deux questions. Alors restons-en à la question de savoir ce que vous faites parce que cela rend les choses vraiment faciles. Maintenant, que faites-vous signifie essentiellement : « OK, j'ai un problème, et je pense que vous pourriez être une solution. Pourquoi devrais-je te choisir ? Qu'est-ce que tu m'offres réellement ? Maintenant, si vous regardez ce site Web ici, par exemple, vous pouvez voir qu'il vous indique littéralement exactement ce qu'ils proposent dès la première seconde où vous arrivez sur la page d'accueil. C'est littéralement dire au client que c'est ce que nous pouvons faire pour vous, et c'est pourquoi vous devriez nous choisir. Il s'agit essentiellement de dire : écoutez, vous n' allez pas perdre votre temps en consultant notre site Web, vous êtes au bon endroit. OK, alors maintenant nous les avons au bon endroit. Ils savent qu'ils ne vont pas perdre leur temps. La prochaine question que nous nous posons habituellement est : OK, je suis au bon endroit. Tu pourrais avoir ce dont j'ai besoin, mais puis-je te faire confiance ? Maintenant, c'est la question suivante que chaque personne s'est posée lorsqu'il s' agit d'un nouveau site Web. Cette marque est-elle légitime ? Cette offre est-elle réellement authentique ? Est-ce que je vais leur donner mon argent et est-ce que je vais obtenir ce que j'attends ? Maintenant, il existe des tonnes de façons différentes de renforcer la confiance au sein de votre site Web. Et cette section devrait essentiellement se situer sous la section Hero, peu comme dans cet exemple, où vous pouvez simplement montrer que vous avez l'autorité dans ce que vous proposez en particulier ? Vous dites que, écoutez, je peux vous offrir ce dont vous avez besoin, et je l'ai déjà fait un million de fois. Donc, en fin de compte, vous ne serez pas déçu, et vous êtes essentiellement en bonne compagnie, comme si vous n'étiez pas la première personne à le faire, et que vous n'alliez pas être la dernière à acheter chez Okay. Maintenant, vous avez réellement la confiance du client, et il sait exactement ce que vous pouvez offrir. Quelle est la prochaine étape ? Eh bien, lorsque nous arrivons sur un site Web pour la première fois, la question est de savoir ce que vous pouvez faire pour moi ? Alors je peux te faire confiance. La question suivante est, OK, dites-m'en un peu plus, ce qui n'est pas vraiment une question, mais vous voyez l'idée. Ils savent donc que vous pouvez leur offrir ce qu'ils veulent. Ils savent également que vous êtes digne de confiance. Ils veulent maintenant en savoir plus sur les détails et les avantages que vous pouvez leur offrir dans le cadre de votre offre. Et c'est ici que vous pouvez expliquer plus en détail pourquoi les gens devraient acheter chez vous. Qu'est-ce qui vous différencie en tant que marque ? Pourquoi d'autres clients achètent-ils chez vous auparavant ? Et comment pouvez-vous vraiment obtenir à la personne le résultat ou la solution qu'elle recherche ? En fin de compte, tout se résume à établir confiance, puis à la concrétiser. Dans n'importe quel type d'entreprise, si vous pouvez simplement définir attentes, puis les atteindre ou les dépasser, vous ne pouvez pas vraiment perdre. Donc, pour résumer, la première question que se posera chaque visiteur d'un site Web est que faites-vous et comment pouvez-vous m'aider ? Deuxième question : puis-je te faire confiance ? Montrez-leur donc des éléments fiables de votre marque pour renforcer autorité et leur montrer que nous sommes ceux que nous prétendons être, et que vous pouvez nous faire confiance. Et la troisième question est : OK, dites-m'en un peu plus sur ce que vous pouvez faire pour m'aider à relever mon défi. C'est pourquoi vous présentez toutes les fonctionnalités et tous les avantages d'une manière facile à digérer. Et voici, mes amis, comment développer la page d' accueil idéale pour toute entreprise. Quoi qu'il en soit, j'espère que cela vous a été utile. Et si vous travaillez avec cette structure, cela vous aidera vraiment à créer un site Web qui obtient vraiment les résultats dont vous avez besoin. Quoi qu'il en soit, nous avons maintenant beaucoup d' élan pour la prochaine leçon, alors je vous y verrai. 11. Design de site Web 101 : alignement et grilles: Alors, que signifie l'alignement matière de conception de sites Web, et comment les grilles jouent-elles un rôle pour nous aider à créer de magnifiques sites Web qui attirent vraiment l'attention ? pour nous aider à créer de magnifiques sites Web qui attirent vraiment l'attention Eh bien, la vérité est que les grilles et les alignements aident à faire bien plus que simplement créer de beaux Ils peuvent également rendre les sites Web plus fonctionnels, plus réactifs et contribuer à améliorer l'expérience utilisateur. Commençons donc par l'alignement. Qu'est-ce que l'alignement ? Eh bien, l'alignement fait référence à la relation et au positionnement de certains éléments sur un axe commun. Lorsque les éléments sont alignés, cela donne une impression de structure et professionnalisme à un site Web. pages Web magnifiquement structurées et organisées contribuent vraiment à donner à votre site Web une touche professionnelle et améliorent également considérablement l' expérience utilisateur en aidant vos utilisateurs à naviguer sur votre site Web en utilisant moins de calories mentales. Il y a maintenant quelques points clés à garder à l'esprit lorsque vous vous concentrez sur l' alignement et que vous utilisez la grille. La première chose, c'est la cohérence. Maintenant, en utilisant un alignement et des notes cohérents sur l'ensemble de votre site Web, il sera très important de créer pages prévisibles qui soient non seulement professionnelles, mais également faciles à digérer par l'utilisateur. Cela inclut l'utilisation des mêmes alignements et grilles pour le texte, les images et même les boutons Cela vous aidera à obtenir une sensation esthétique globale qui semble vraiment professionnelle et digne de confiance. Maintenant, le deuxième point clé pour les immigrants vers l'alignement et les grilles est la hiérarchie Vous devez utiliser la hiérarchie en ce qui concerne les alignements et les grilles pour présenter d' abord les informations les plus importantes et vous assurer qu' elles sont présentées de manière claire, professionnelle et facile à lire C'est là que l'alignement et les grilles entrent en jeu. Cela crée une expérience prévisible sur les pages de votre site Web, afin que l'utilisateur sache où regarder ensuite. Et le dernier point clé, que nous avons abordé à quelques reprises tout au long de cette leçon, est le design réactif. L'utilisation de grilles est très importante pour vous assurer que votre site Web s'affiche parfaitement sur mobile, tablette et ordinateur de bureau En respectant l'alignement sur l' ensemble de votre site Web et les grilles que vous utilisez pour créer les pages de votre site Web, cela peut vous aider à créer une expérience de marque fluide, cohérente sur tous les appareils sur lesquels le visiteur est susceptible naviguer sur votre site Web Et ce que je veux faire, c'est partager ces deux pages du site Web avec vous et vous laisser décider laquelle, selon vous, présente le meilleur alignement et le meilleur maillage. Et trois, deux, un. Maintenant, si vous n'avez pas obtenu le bon résultat, ne vous inquiétez pas, reregardez simplement cette vidéo, et je suis sûr que vous l'aurez une deuxième fois. Mais si vous avez obtenu le bon résultat, alors félicitations, vous connaissez maintenant la différence entre un site Web parfait en termes d' alignement et de grain et un site qui n' utilise pas ces principes en ce qui concerne sa conception Maintenant que vous comprenez parfaitement l'alignement et le grincement, vous serez en comprenez parfaitement l'alignement et le grincement, mesure de créer des pages Web qui non seulement sont plus attrayantes visuellement, mais qui seront également en mesure offrir une meilleure expérience utilisateur afin que votre site Web aide vos utilisateurs à brûler moins de calories mentales, leur permettant ainsi de rester sur votre site Web plus longtemps Quoi qu'il en soit, j' espère vraiment que vous avez apprécié cette leçon et un petit exercice à la fin, je vous verrai lors de la prochaine leçon. À bientôt. 12. Design de site Web : hiérarchie visuelle: Hiérarchie visuelle et conception du site Web. Qu'est-ce que c' est et pourquoi est-ce si important ? Eh bien, discutons d'abord de ce qu'est réellement la hiérarchie visuelle. hiérarchie visuelle est la disposition ou la présentation de certains éléments pour mettre en évidence leur ordre d'importance. Un site Web bien conçu utilisant une hiérarchie visuelle peut contribuer à améliorer considérablement l'expérience globale Cela améliore la lisibilité, l' engagement et réduit également la quantité de calories mentales que l'utilisateur doit dépenser pour naviguer sur votre site Web et consommer les informations dont il a besoin pour Maintenant, certains éléments clés utilisent le plus souvent hiérarchie visuelle pour faire passer leur message plus efficacement. Et le premier de ces éléments est la typographie. sites Web bien conçus qui utilisent hiérarchie visuelle pour réellement améliorer l'expérience utilisateur utilisent différentes formes de typographie plus épaisses, plus fines et souvent d'une couleur différente, en utilisant finalement les principes clés de la hiérarchie visuelle Vous pouvez présenter exactement les mêmes informations d'une manière complètement différente, l'une étant extrêmement lisible et l' autre difficile à lire. Maintenant, un autre élément très important en matière de hiérarchie visuelle est le contraste des couleurs. Vous pouvez utiliser la couleur pour attirer l'attention de l'utilisateur sur certains éléments. Des couleurs plus vives qui captivent le regard peuvent être utilisées pour les appels à l'action, les boutons importants et même les informations importantes. Maintenant, une autre approche liée à la hiérarchie visuelle est celle des espaces blancs. Nous allons maintenant en apprendre davantage sur les espaces blancs plus loin dans le cours. Mais en adoptant l'utilisation des espaces blancs et en sachant comment les utiliser correctement, ce que je vais vous apprendre dans peu de temps, vous pouvez faire ressortir certains éléments, encore une fois, en améliorant la hiérarchie visuelle au sein de votre site Web Maintenant, comme petit exercice amusant pour terminer la leçon, je voudrais simplement vous montrer deux éléments de contenu et vous demander de choisir celui qui selon vous, utilise une hiérarchie visuelle pour guider la façon dont il est présenté. Donc, si vous devez choisir entre ces deux éléments de contenu, lequel est le plus lisible, le plus engageant et le plus susceptible d' offrir une meilleure expérience utilisateur Et je t'en donnerai 32, un. Tu as bien compris ? D'accord, donc si vous n'avez pas bien compris, revoyez cette leçon et vous pourrez peut-être en apprendre un peu plus sur ce que signifie avoir un site Web incroyable avec une excellente hiérarchie visuelle Mais si vous avez bien compris, félicitations, vous comprenez maintenant la différence entre un contenu qui est un peu mélangé et qui n'est pas vraiment réfléchi et un contenu qui a été organisé selon hiérarchie visuelle et un esprit, sorte qu'il est plus lisible, plus engageant et plus clair à digérer Quoi qu'il en soit, j'espère vraiment que vous apprécierez ce petit exercice ainsi que le contenu de cette leçon. Et j'ai hâte de vous voir dans le prochain. À bientôt. 13. Création de site Web : polices et typographie: Choisissez donc les bonnes polices et typographies pour votre site Web Comment le faites-vous ? Et pourquoi est-ce si important ? Maintenant, une erreur que commettent de nombreuses personnes qui conçoivent un site Web est que le choix de la bonne police ou typographie est une question d'esthétique Il ne s'agit pas uniquement de l'apparence du site Web. Même si cela reste très important. Désormais, il s'agit plutôt de choisir la bonne police et la bonne typographie c'est de créer un langage visuel qui peut aider à communiquer et à créer une perception autour de votre marque, ce qui peut également améliorer l'expérience utilisateur Et en fonction des polices et de la typographie que vous choisissez d'utiliser sur votre site Web, vous pouvez créer une perception complètement différente en fonction des types de polices et de typographie que vous utilisez sur chaque page de votre Par exemple, vous pouvez choisir une police plus amusante et plus ludique, une police super traditionnelle et professionnelle, ou vous pouvez choisir une police super simple et moderne. Ou une forme plus futuriste et créative. Maintenant, l'une des principales choses à retenir est que vous ne devez choisir qu'une ou deux polices différentes à utiliser sur votre site Web. Par exemple, vous avez une police principale, qui est généralement utilisée pour vos sous-titres et en-têtes, puis une autre police, utilisée pour le contenu général, qui est extrêmement lisible et facile à En effet, plus un texte est long, plus il est difficile de le maintenir en place Nous devons donc nous assurer que le texte est très facile à lire pour que votre utilisateur continue à lire sans le fatiguer mentalement Choisir les bonnes polices peut vous aider à susciter une certaine émotion chez votre client ou votre client Et il peut également démontrer un certain niveau de professionnalisme et de fiabilité qui peut vous aider à générer plus de ventes Maintenant, il y a quelques éléments clés à prendre en compte lorsqu'il s'agit de choisir les bonnes polices ou typographies pour votre marque Nous abordons maintenant le processus de choix de la typographie et des polices appropriées pour votre site Web et votre marque en général Cours numéro deux du programme Brand Builder pro. Ce cours est l'ensemble de notre expression visuelle, et il vous explique littéralement tout ce que vous devez savoir en ce qui concerne la typographie, les polices, les couleurs, la façon de concevoir le logo parfait, voix de la marque et toutes ces bonnes choses Maintenant, le cours va bien au-delà de ces éléments particuliers. Mais si vous pensez avoir besoin d' un peu plus de soutien dans ces domaines particuliers, n'hésitez pas à y jeter un œil. Maintenant, il est très important de choisir les bonnes polices avec la bonne personnalité. Comme je vous l'ai déjà montré au début de la leçon, utilisation de polices différentes permet polices pour les titres et les sous-titres faire passer un message complètement différent à propos de votre marque en utilisant différentes Par exemple, si je vous demande laquelle de ces deux polices est utilisée par une marque de luxe, je peux vous garantir que vous allez choisir celle-ci. C'est parce que cette police particulière a été créée il y a longtemps. Par conséquent, il a plus d'histoire. Par conséquent, on a l'impression qu'il y a plus de tradition, et la tradition et l'histoire sont plus étroitement associées au sentiment d'être luxueux. Maintenant, un autre point clé à retenir est la lisibilité. C'est un orgue et nous allons choisir une police super créative et super unique. Mais si votre client ne peut pas le lire, cela posera un problème. Tout ce que nous faisons en matière de typographie et de polices de caractères doit nous permettre de créer la meilleure expérience utilisateur possible Donc, si nous utilisons une police ou une forme de typographie très difficile à lire, cela nuit à l'expérience utilisateur, ce que nous ne voulons évidemment pas Assurez-vous donc que vos fonds sont faciles à lire, en particulier la police de votre contenu principal. Cela va être très important car il sera utilisé pour de longues portions de texte, ce qui fatiguera très facilement votre utilisateur et lui fera perdre son attention. Un dernier point essentiel à retenir est l'incohérence hiérarchique En ce qui concerne le dimensionnement, vous devez conserver ce ratio général pour votre en-tête, sous-en-tête et votre contenu général Maintenant, évidemment, vous devez rendre votre texte réactif en fonction de l'appareil. Par exemple, si je consulte un site Web sur mon ordinateur, le texte n'aura pas exactement la même taille de police que sur mon iPhone. Ainsi, même si la taille du texte change, le rapport entre la taille de l'en-tête, du sous-en-tête et le contenu général reste le même. Et cela vous donnera la hiérarchie dont vous avez besoin pour rendre votre contenu super lisible. Mais assurez-vous simplement de rester cohérent dans l'utilisation de cette hiérarchie sur l'ensemble de votre site Web. Cela vous aidera à créer une expérience d'échec cohérente, qui permettra à votre utilisateur d'utiliser les pages de votre site Web et de naviguer sur votre site Web à l' aise pages de votre site Web et naviguer sur votre site Web à l' Maintenant, juste à titre d'expérience, je veux juste souligner le fait que vous avez probablement appris quelque chose au cours de cette leçon. Je veux que vous preniez ces deux exemples de typographie et que vous me disiez essentiellement lequel des deux convient mieux à une entreprise de logiciels moderne Donc, si vous étiez le PDG d'une société de logiciels, laquelle de ces deux configurations de caractères choisiriez-vous pour le Et trois, deux, un, tu as bien compris ? Non, si tu n'as pas bien compris, ce n'est pas la fin du monde. Revoyez peut-être cette leçon et vous pourrez peut-être apprendre quelques autres choses avant de commencer à sélectionner la typographie et les fonds pour votre propre Je vais également ajouter des ressources très utiles au cours afin que vous puissiez réellement choisir les fonds les plus couramment utilisés sur votre marché et votre secteur d'activité. Je vais m'assurer d' ajouter la ressource dans le cours afin que vous puissiez la trouver facilement et que vous puissiez trouver les fonds parfaits pour votre site Web sans aucun effort. Choisir les bons fonds et la bonne typographie pour votre marque est très excitant, du moins pour moi en tout cas Je trouve ça super amusant. Quoi qu'il en soit, je vous verrai dans la prochaine leçon où les choses commenceront vraiment à prendre de l'ampleur. Je t'y verrai. 14. Design de site Web : créer des palettes de couleurs: Comment créer une belle palette de couleurs pour votre site Web ? Maintenant, en utilisant la bonne palette de couleurs pour votre site Web, pouvons-nous vous aider à créer la bonne perception, le professionnalisme et le bon mouvement chez vos clients lorsqu'ils naviguent sur vos pages Web. Désormais, chaque marque devrait avoir trois types de couleurs différents sur son site Web. La première est une couleur de fond, qui est généralement le blanc ou, si vous voulez vraiment expérimenter, une couleur super foncée. Aujourd'hui, 99 % des marques devraient utiliser le blanc ou un gris vraiment très clair comme couleur principale pour la couleur d'arrière-plan de leur site Web. Et la raison en est qu'il est très facile pour un humain de lire du texte noir sur fond blanc par opposition au texte blanc sur fond noir. Il utilise simplement moins de calories mentales, ce que nous voulons en fin de compte du point de vue de l'expérience utilisateur. Maintenant, les deux autres types de couleurs sont les couleurs d' accent et vos couleurs primaires. Désormais, votre couleur principale est en fin de compte la couleur pour laquelle vous voulez que votre marque soit connue. Maintenant, vous pouvez avoir deux couleurs primaires, mais personnellement, je pense qu'il vaut mieux s'en tenir à une seule. Nous abordons maintenant de manière beaucoup plus approfondie le processus de développement de votre propre palette de couleurs pour votre marque développement de votre propre palette de couleurs pour votre marque et expliquons comment vous pouvez réellement y réfléchir d' un point de vue stratégique. Le deuxième cours du programme Brand Builder Pro. Mais juste pour vous aider si vous ne voulez pas investir dans ce programme, ce qui est tout à fait normal. Notre site Web dispose d'un outil en ligne que vous pouvez utiliser pour trouver la meilleure palette de couleurs pour votre marque et votre site Web. Cela s'appelle Color Pro Plus, et vous pouvez le trouver en ligne. C'est vraiment facile et totalement gratuit à utiliser. Cela vous aidera à trouver une gamme de palettes de couleurs différentes que vous pourrez sélectionner puis commencer à utiliser pour votre site Web, afin que vous sachiez que votre site Web sera toujours beau. Maintenant, les couleurs d'accent dans votre palette de couleurs sont vraiment importantes. La raison en est que cela guide essentiellement l'œil de l'utilisateur vers l'endroit où il doit cliquer. Les couleurs accentuées sont généralement utilisées pour capter l'attention des gens et aussi pour indiquer aux utilisateurs où cliquer et ce qui est important. Nous allons maintenant expliquer comment utiliser réellement votre palette de couleurs dans une leçon un peu plus tard dans le cours. Mais pour l'instant, je veux simplement vous aider à créer une structure et un processus de réflexion pour chaque couleur de votre palette de couleurs pour votre site Web, afin que vous sachiez comment l'utiliser lorsque vous créerez votre site Web ultérieurement Maintenant, voici quelques points essentiels à retenir lorsque vous envisagez développer une palette de couleurs pour votre marque : l'alignement de la marque Assurez-vous donc que les couleurs que vous utilisez correspondent à votre marque et au message que vous souhaitez transmettre. C'est là que l' outil Color Pro Plus est vraiment pratique. Vous propose une sélection de palettes de couleurs magnifiquement conçues que vous pouvez utiliser sur votre site Web en quelques secondes. Et il vous indique également les types d'émotions et sentiments que cela va susciter chez vos clients ou clients potentiels Maintenant, une autre chose à laquelle il faut penser est le contraste et l'harmonie. Vous devez vous assurer que votre site Web présente un contraste suffisant pour qu' il soit facile à lire et qu'il crée une bonne expérience utilisateur. Vous devez également vous assurer que vos couleurs se marient parfaitement. Il existe maintenant de nombreuses méthodes différentes pour créer une plus grande palette de couleurs de site Web. Mais si vous ne voulez pas en apprendre trop sur théorie des couleurs et la psychologie des couleurs, et que vous voulez simplement avoir une très bonne palette de couleurs pour votre site Web , vous voulez simplement lui donner une belle apparence être vraiment présentable et digne Utilisez l'outil Color Pro Plus pour sélectionner une palette de couleurs, puis déterminer celle qui convient le mieux à votre marque. Toutes les palettes de couleurs présentées dans l'outil Color Pro Plus ont été conçues par des experts en design qualifiés qui comprennent comment les différentes couleurs fonctionnent bien ensemble. Vous n'avez pas à vous soucier d'apprendre la théorie des couleurs, ou vous n'avez qu' à sélectionner la palette de couleurs qui, selon vous, convient le mieux à votre marque. Vérifiez les émotions réelles que cette palette de couleurs particulière va transmettre et communiquer, puis essayez sur votre site Web et voyez ce que vous ressentez. Maintenant, un dernier point concerne la cohérence. La cohérence est très importante, car si vous commencez à utiliser différentes couleurs pour différents appels à l'action, cela ne fera que créer une expérience vraiment confuse pour l'utilisateur. En étant cohérent, cela signifie simplement que vous utilisez votre accent principal et vos couleurs de base la même manière sur l'ensemble de votre site Web. Par exemple, si l' ensemble de votre site Web était fond blanc, puis qu'une seule page était sur fond noir, avec du texte blanc, cela paraîtrait un peu bizarre et embrouillerait votre utilisateur. La cohérence est donc très importante. Et juste pour faire un peu d'exercice, pour s'amuser un peu. Je voudrais vous montrer ces deux pages Web et vous donner 3 secondes pour décider laquelle, selon vous, utilise le mieux la couleur. Et trois, deux, un. Tu as bien compris ? En fin de compte, le design qui utilise le mieux les couleurs suit les principes que vous venez d' apprendre dans cette leçon. C'est constant, il y a de l'harmonie. Il utilise des couleurs qui fonctionnent très bien ensemble. Il comporte suffisamment d'espace blanc et utilise du blanc comme arrière-plan pour donner au reste du contenu de la page le temps et l' espace nécessaires pour briller. L' autre design, cependant, ne le fait pas tout à fait. Il est assez mal conçu. Il ne s'agit pas vraiment d'utiliser correctement les couleurs, et nous allons en apprendre davantage sur la façon d'utiliser correctement les couleurs dans la conception de votre site Web un peu plus tard dans le cours. Sur cette note, je vous verrai dans la prochaine leçon. À bientôt. 15. Design de site Web : utiliser vos couleurs: Maintenant, vous avez probablement quelques idées ou peut-être juste une idée concernant la palette de couleurs de marque que vous souhaitez utiliser sur votre site Web. Maintenant, nous allons vous montrer comment l'utiliser sur votre site Web. Comment utilisez-vous votre palette de couleurs sur votre site Web ? Eh bien, à ce stade, soit vous avez utilisé l'outil Color P plus et disposez de la palette de couleurs de votre site Web, soit vous essayez de choisir entre deux et vous ne savez pas vraiment laquelle choisir. À la fin de cette leçon, vous saurez comment utiliser les différentes couleurs de votre palette afin de pouvoir faire quelques expériences et voir quelle palette de expériences et voir quelle couleurs vous préférez. Maintenant, n'oubliez pas que l'utilisation de votre palette de couleurs signifie essentiellement l'utiliser pour chaque élément votre site Web. Cela inclut le texte, les boutons, les autres éléments, les bordures, les lignes, votre logo et l'arrière-plan. N'oubliez jamais l'arrière-plan. Maintenant, comme je l'ai mentionné dans la leçon précédente de ce cours, vous devez vous assurer que vous êtes parfaitement cohérent avec les couleurs que vous utilisez et la façon dont vous les utilisez. Par exemple, n' essayez pas de faire preuve de trop expérimentation lorsque vous utilisez vos couleurs, mais dans cette leçon, je veux simplement vous donner quelques règles fondamentales et meilleures pratiques afin que vous puissiez utiliser les couleurs de la meilleure façon possible pour obtenir le meilleur résultat. Désormais, votre couleur principale doit être la couleur la plus dominante de votre site Web. Ainsi, par exemple, toutes vos icônes, votre logo, les en-têtes de votre site Web devraient tous être de cette couleur Met en valeur la couleur principale de la marque. Votre couleur principale doit être la couleur la plus utilisée sur votre site Web, à l'exception de la couleur d'arrière-plan. Si la couleur principale que vous avez choisie n'est pas la plus dominante sur votre site Web, à part la couleur d'arrière-plan, que vous faites quelque chose de mal. La règle de base que j'utilise toujours est tout ce qui compte est la couleur principale, à exception d'un appel à l'action, qui est la couleur d'accent. Ensuite, je fais toujours en sorte que l'arrière-plan soit blanc, et je fais toujours en sorte que tout le contenu général soit noir ou simplement noir, donc un gris très foncé. En faisant cela et en restant très simple, vous pouvez vous assurer que votre accent principal et vos couleurs de base sont tous utilisés correctement. Et n'oubliez pas que votre couleur d'accent doit être utilisée de manière à attirer l'attention de l'utilisateur. En faisant cela et en utilisant correctement votre couleur d'accent, vous serez en mesure d'indiquer à l'utilisateur de cliquer sur certains boutons et informations clés sur lesquels vous souhaitez réellement qu'il clique. Maintenant, pour faire un petit exercice amusant, je voudrais juste vous montrer deux exemples différents de pages Web, dont l'un utilise des couleurs en utilisant exactement les principes fondamentaux que je viens de vous enseigner dans cette leçon, et l'autre qui fait les choses d'une manière complètement différente. Alors, selon vous, lequel des deux utilise correctement la couleur ? Et 321. Tu as bien compris ? Comme vous pouvez le constater, ce site Web est tellement plus beau. Il s'écoule simplement beaucoup mieux. Vous savez exactement où ils cliquent ce qui est important et ce qui ne l'est pas. Et cela crée une hiérarchie et une expérience dont l'utilisateur peut profiter, par opposition à la conception d'un autre site Web, ce qui rend les choses un peu plus difficiles. Ce n'est pas vraiment simple et c'est un peu confus. Quoi qu'il en soit, j'espère vraiment que cette leçon vous plaira. J'ai hâte de vous voir dans le prochain. Vois ça. 16. Design de site Web : hiérarchie de button: La hiérarchie des boutons, qu'est-ce que c'est et pourquoi est-ce si important ? Eh bien, concevoir de superbes boutons peut essentiellement augmenter la probabilité que vous cliquiez Il y a quelques éléments clés auxquels vous devriez penser lorsque vous concevez les boutons de votre site Web afin de les rendre plus cliquables et, en votre site Web afin de les rendre plus fin de compte, d' amener l'utilisateur à faire ce que vous voulez qu' il fasse sur votre site Web Les boutons de votre site Web guident l'utilisateur sur guident l'utilisateur votre site Web vers l'endroit où vous souhaitez qu'il aille. Ils devraient aider votre utilisateur à naviguer efficacement sur le site Web afin qu'il puisse se rendre là où il doit être dans les plus brefs délais avec le moins de clics possible. Alors, d'abord et avant tout, qu'est-ce que la hiérarchie des boutons ? Eh bien, la hiérarchie des boutons est essentiellement la disposition ou le style des boutons afin de créer une expérience visuelle exceptionnelle et, en fin de compte, de rendre le bouton plus cliquable Nous utilisons la hiérarchie des boutons pour indiquer à l'utilisateur l' endroit où il doit cliquer. Que nous puissions obtenir le résultat souhaité sur le site Web. Cela nous permet de hiérarchiser les boutons sur lesquels les utilisateurs doivent cliquer afin qu'ils puissent accéder aux pages que nous voulons qu'ils consultent. En fin de compte, des boutons bien conçus et une hiérarchie bien structurée pour vos boutons devraient contribuer à créer une interface plus attrayante et plus amusante pour le plus grand plaisir de vos utilisateurs. Maintenant, quelques points clés à aborder en ce qui concerne la hiérarchie des boutons, et le premier de ces points est la taille et le placement. Or, plus un bouton est prédominant, plus il est peu probable qu'il soit cliqué La couleur est également incluse dans ce processus de prise de décision, mais nous en parlerons dans la dernière leçon. Pour le moment, concentrons-nous uniquement sur les boutons eux-mêmes. Maintenant, ce que vous devriez faire, c'est rendre les boutons les plus prioritaires pour vous personnellement, vos objectifs commerciaux, plus grands, plus évidents et plus visibles, tandis que les boutons, qui sont moins importants, sont finalement un peu plus subtils et un peu plus difficiles à voir Maintenant, une chose que vous devez faire pour vous assurer que Rob est cohérent avec le style de vos boutons. Une fois que vous avez confirmé le style et le système de vos boutons, ce système particulier doit être utilisé sur l' ensemble de votre site Web. Ainsi, par exemple, si vos interactions téléphoniques sont de la même taille sur l'ensemble de votre page d'accueil, cela devrait également être le même sur l'ensemble de votre site Web. Maintenant, comme exercice vraiment amusant, je voudrais simplement présenter deux exemples de hiérarchie des boutons et expliquer comment certains peuvent être très faciles à comprendre et très faciles à cliquer, et comment d'autres peuvent être un peu confus et moins faciles à comprendre. Alors, selon vous, laquelle de ces deux options est la plus facile à comprendre et sur laquelle êtes-vous le plus enclin à cliquer ? Je veux te donner 3 secondes. Donc, trois contre un, pour bien faire les choses ? Maintenant, si vous avez tout compris dans cette leçon, vous devriez avoir sélectionné les bons boutons. Mais si vous ne l'avez pas fait, ne vous inquiétez pas, relisez simplement cette leçon et j'espère que vous la reprendrez la deuxième fois. Maintenant, une chose qui vous sera montrée un peu plus tard dans le cours est de savoir comment créer des animations à l'aide de boutons pour vraiment leur donner vie. Cela ne veut pas dire faire des choses folles avec les boutons. Il ne s'agit que de petites animations professionnelles, que vous pouvez réaliser sur le Web en quelques secondes, et il est très facile de faire et il est très facile vos boutons à un niveau différent, une norme complètement différente où ils prennent vie et interagissent avec l'utilisateur pour créer une meilleure expérience utilisateur. Je vais vous montrer comment faire cela un peu plus tard dans le cours, et c'est vraiment très simple, alors ne vous inquiétez pas. Vous n'avez pas besoin de savoir comment coder, vous n'avez pas besoin de savoir quoi que ce soit sur la conception de sites Web. Littéralement aussi simple que de modifier un document Word. Quoi qu'il en soit, j'ai hâte de vous voir à la prochaine leçon, et j'espère vraiment que vous appréciez le cours. Je te verrai bientôt. 17. Création de site Web : l’importance de l’imagerie: Pourquoi est-il donc si important de choisir les bonnes images pour votre site Web ? Et surtout, comment vous y prenez-vous ? Eh bien, avant d' entrer dans cette leçon, dans la prochaine leçon de ce cours, je vais vous montrer des endroits spécifiques en ligne où vous pouvez obtenir des images libres de droits pour votre site Web qui ont un aspect incroyable Restez donc à l'affût. Mais voyons d'abord pourquoi les images sont si importantes sur un site Web. Eh bien, comme nous en avons déjà discuté plusieurs reprises dans le cours, lorsque quelqu'un consulte un site Web, la première chose qu'il se demande est : est-ce pour moi ? Puis-je utiliser ce que propose ce site Web ? peut donc être très important d'utiliser les bonnes images , car les humains sont des créatures visuelles. Nous voyons quelque chose et le comprenons beaucoup plus facilement que si nous lisons quelque chose et essayons de comprendre ce que les mots signifient réellement. Et en utilisant les bonnes images qui correspondent au sentiment général que nous voulons transmettre à notre marque, cela aidera les clients à comprendre qui nous sommes et ce que nous pouvons offrir beaucoup plus facilement et offrir beaucoup plus facilement et fin de compte, à créer une meilleure expérience utilisateur globale. Maintenant, le plus important lorsqu'il s'agit de sélectionner le type d'images à utiliser sur votre site Web, quel message est-ce que je veux transmettre ? Comment est-ce que je veux être perçue en tant que marque ? Est-ce que je veux être considéré comme plus luxueux, ou dois-je être considéré comme plus enfantin et plus joueur Ou est-ce que je veux être considéré comme plus moderne, ou dois-je être considéré comme plus futuriste ou même semblable à l'espace ? C'est maintenant la première étape. Vous devez déterminer comment vous voulez être perçu , puis sélectionner votre imagerie en fonction de cela. Maintenant, une autre chose très importante lorsqu'il s'agit de sélectionner les bonnes images est de s'assurer que vos images sont de haute qualité. Une chose que je dis toujours à mes clients lorsque je les aide à développer leur site Web si un site Web contient une image est la suivante : si un site Web contient une image empilée et de mauvaise qualité, quoi pensez-vous que cela reflète le service que le client pense qu'il va obtenir de cette marque en particulier Cela ne le reflète pas vraiment très bien, n'est-ce pas ? Choisir la bonne imagerie est donc une chose, mais s'assurer qu'elle est de haute qualité en est une autre. Assurez-vous donc de garder cela à l'esprit, et en cas de doute, retirez-le. Il existe des tonnes d'images différentes que vous pouvez utiliser. Ne soyez donc pas romantique à propos d'un seul. Ce n'est pas de la meilleure qualité. S'il est pixelisé, ne l'utilisez pas Maintenant, lorsque vous choisissez des images pour votre site Web, il faut tenir compte de certaines choses choisissez des images pour votre site Web, : elles doivent être pertinentes pour votre public cible et pour ce que vous proposez. En tant qu'être humain, nous communiquons beaucoup plus facilement avec les gens comme nous en fonction de leur origine ethnique, de leurs loisirs leur apparence , de leur sexe, leur taille, de leur attirance ou de leur manque d'attrait, ou de bien d'autres choses. Donc, en utilisant un avantage naturel. Si vous êtes une marque de yoga, par exemple, ou si vous vendez quelque chose concernant le yoga, alors votre site Web mettra en valeur les personnes qui constituent votre public cible idéal. Parce que l'utilisation de l'imagerie, qui est la plus pertinente pour votre public cible, sera la meilleure et la plus efficace persuader votre client de vous choisir pour être la marque auprès de laquelle il achète Maintenant, un autre élément très important lorsqu'il s'agit de sélectionner la bonne imagerie est un style cohérent. Par exemple, si vous voulez créer images en noir et blanc sur l' ensemble du site Web, faites-le sur l'ensemble du site Web. Ne commencez pas à faire apparaître différentes images en couleur ou, dans une teinte verte, par exemple, ça va juste avoir l'air nul Ce que vous voulez faire, c'est conserver la cohérence de vos images sur l'ensemble du site Web. Cela peut parfois s'avérer difficile si vous utilisez des images de stock. Donc, si vous utilisez des images d' archives et que le ton et le toucher de l'image réelle sont le ton et le toucher un peu différents, n'hésitez pas à les retoucher magasins de photos ou à quelqu'un de les retoucher pour vous assurer qu' elles sont toutes très cohérentes et qu'elles ont presque été prises lors de la même séance photo Cela peut être fait via Light Room ou Photoshop, sorte que toute personne possédant les compétences les plus élémentaires concernant ces deux programmes peut le faire très facilement. Ou si vous voulez que les choses restent vraiment simples, il suffit de les faire toutes en noir et blanc qu'elles soient toutes cohérentes malgré tout. Maintenant, une chose essentielle à retenir lorsqu'il s'agit de choisir une imagerie, c'est qu'en tant qu'humains, nous aimons voir d'autres humains faire des choses. Par exemple, il y a une raison presque toutes les marques de commerce électronique présentent le produit dans des situations réelles. Par exemple, ils peuvent montrer un sac à main sur un fond blanc, mais ils le montreront également sur l'épaule de la femme censée être le public cible idéal pour le client Alors, pensez-y vraiment lorsque vous choisissez l'imagerie de votre marque. Et évidemment, dans la prochaine leçon, je vais vous montrer pourquoi vous pouvez trouver une large gamme d' images gratuitement et sans aucun problème. Maintenant, comme petit exercice amusant, je voulais vous demander lequel de ces deux ensembles d' images et d'images fonctionne le mieux ensemble. Je vais donc vous donner 3 secondes, donc trois, deux, une. Tu as bien compris ? Comme vous pouvez le constater, ces images sont bien plus cohérentes. Et c'est ce que vous recherchez lorsqu'il s'agit de votre site Web. Vous devez vous assurer de garder cela à l'esprit. Parce qu'au fur et à mesure que les internautes parcourront vos pages et visiteront évidemment différentes pages, vous serez en mesure de créer une harmonie entre elles parcourront vos pages et visiteront évidemment différentes pages, vous serez en mesure de créer une harmonie entre Cela va donc créer une meilleure expérience utilisateur dans l'ensemble. Quoi qu'il en soit, je suis très heureuse de vous montrer des choses incroyables lors de la prochaine leçon, alors je vous y verrai. 18. Design de site Web : trouver gratuitement des images de site Web en ligne: Alors, où pouvez-vous trouver des images incroyables pour votre site Web gratuitement ? Dans cette leçon, j'ai en fait deux options gratuites qui sont fantastiques, et je les utilise tout le temps, ainsi que deux options payantes. Maintenant, j'ai créé des liens directs vers les pages Web spécifiques du cours, juste pour vous permettre de trouver très facilement chaque plate-forme. Maintenant, le premier site Web, qui est absolument gratuit, et vous pouvez obtenir autant de sites Web que vous le souhaitez sans payer un seul centime est Pixab Tout ce que vous avez à faire est de rechercher le type d' image que vous souhaitez et de faire défiler la page vers le bas, et vous trouverez des tonnes d'images correspondant à votre terme de recherche. Maintenant, une chose que j'aime vraiment faire, c'est cliquer sur certains photographes dont j'aime vraiment le style, parce que d' habitude, cela me permet d'obtenir différentes images pertinentes provenant du même photographe avec le même style, et généralement elles ont la même sensation de déchirure. Il est donc beaucoup plus facile de trouver des images cohérentes pour votre site Web de cette façon. Vous pouvez en fait utiliser exactement la même approche pour ma deuxième plateforme gratuite , Pixels. Maintenant, cela fonctionne exactement de la même manière que la bière Pixel. Il y a généralement quelques options supplémentaires ou différentes options sur ce site Web en particulier, mais cela fonctionne exactement de la même manière. Il vous suffit donc de rechercher les types d'images et d'images que vous souhaitez, puis il vous en donnera simplement une sélection en fonction de votre terme de recherche. Encore une fois, utilisez une astuce astucieuse que je vous ai expliquée à propos de la recherche de certains photographes ou, si vous aimez une certaine image, cliquez sur l'image et le photographe devrait apparaître en bas, et ils auront différents projets dans différentes catégories ou collections, ce qu'ils ont fait, qui devraient avoir la même déchirure, la même sensation et la même ambiance. Maintenant, en plus de ces deux plateformes gratuites, qui vous donneront choix entre de nombreuses images. Il existe deux autres options premium si vous voulez une photo super spéciale. Maintenant, le premier est Sugar Stop. Cela fonctionne exactement de la même manière que Pixel Beer et Pixel, mais les images sont juste un peu meilleures. Et en fin de compte, tout se résume à savoir si vous pensez qu'il vaut payer un peu pour la peine de payer un peu pour obtenir une image de qualité légèrement supérieure. Personnellement, j'ai utilisé **** of stock quelques reprises simplement parce que je voulais vraiment une image incroyable qui intègre parfaitement dans la section héros d'un site Web. Parfois, cela vaut la peine de relier une image simplement parce qu'elle est de meilleure qualité et qu'elle répond peut-être parfaitement à vos besoins. Mais évidemment, cela dépend entièrement de vous. Maintenant, Adobe Stock Images est un autre excellent endroit pour obtenir des images incroyables Personnellement, je préfère Shutter Stock à un Derby pour une raison ou une autre. Je ne sais pas pourquoi, mais tout dépend des images que vous recherchez. Personnellement, je vous recommande de tout rechercher et de simplement rechercher le type d' images que vous souhaitez, puis de choisir l'image qui vous convient le mieux. Évidemment, il n'y a pas de bonne ou mauvaise réponse, mais n'oubliez pas que j'ai créé une ressource que vous pouvez finalement utiliser pour accéder à chacune de ces plateformes dans les pages spécifiques afin que vous puissiez commencer à rechercher des images sans aucune difficulté. Je sais que cette leçon a été donnée par Sean Sweet, mais je devais la partager avec vous car il existe des tonnes d'images que vous pouvez utiliser, et je veux que vous trouviez les meilleures pour le site Web de votre marque. Quoi qu'il en soit, j'ai hâte de vous voir lors de la prochaine leçon. On se voit là-bas. 19. Les 101 de la création de site web : recadrer et cadrer (règle des tiers): Qu'est-ce que le recadrage et le cadrage ? Et qu'est-ce que la règle des tiers ? Eh bien, si vous avez de l' expérience en photographie, vous devez déjà connaître la règle des tiers. Mais en fin de compte, en comprenant le recadrage, le cadrage et la règle des tiers, vous pouvez vraiment ajouter beaucoup plus caractère et créer une image captivante à partir d'une image qui, à première vue, n'était pas vraiment intéressante Cela change vraiment la donne. Lorsque vous comprenez comment le faire correctement, cela peut vraiment aider à améliorer la conception de votre site Web si rapidement En effet, lorsqu'une image est recadrée et encadrée correctement en utilisant la règle des tiers, vous pouvez vraiment aider à guider l'œil de l'utilisateur et à créer une image qui peut vraiment susciter l'intérêt Alors, qu'est-ce que le recadrage et le cadrage avant tout ? Il s'agit essentiellement de prendre une image, de la redimensionner et de couper certaines parties pour finalement la rendre plus intéressante Maintenant, vous pouvez le faire en utilisant la règle des tiers, et la règle des tiers consiste essentiellement diviser l'image en neuf parties égales. Cela se fait en ajoutant deux lignes verticales et deux lignes horizontales directement sur l'image. Maintenant, il n'est pas toujours nécessaire qu'ils soient égaux, mais dans la plupart des cas, il y en aura. Maintenant, la règle des tiers n'est pas seulement utilisée dans la conception de sites Web ou la photographie, mais elle est également utilisée dans les films. L'utilisation de la règle des tiers vous aide à attirer l'attention sur certains éléments de l'image. Aide à créer des points focaux et aide essentiellement à rendre l'image plus intrigante et captivante Et vous pouvez utiliser la règle des tiers pour ajouter différentes dimensions l'image, différentes profondeurs. Vous pouvez également l'utiliser pour jouer avec le poids visuel de l'image, ce qui est vraiment intéressant, ce qui peut vraiment vous aider à éviter une approche centrée vraiment ennuyeuse, qui ne sera pas très intéressante à regarder. Maintenant, une chose à retenir est la cohérence. Donc, si vous comptez utiliser la règle des tiers sur l' ensemble de votre site Web, assurez-vous simplement de le faire pour chaque image afin d' intriguer chaque fois que chaque image afin d' intriguer chaque fois internautes voient des photos sur votre site Web. Donc, juste un petit exercice, je sais que vous n'êtes peut-être pas photographe, réalisateur ou concepteur de sites Web à ce stade. Bien que c'est ce que nous essayons de faire, j'aimerais que vous regardiez ces deux exemples et que vous me disiez lequel , selon vous, utilise la règle des tiers en ce qui concerne le recadrage et la libération Comme toujours, je te donne 3 secondes. Trois. Deuxièmement, je n'ai pas besoin que tu regardes. Un. Tu as bien compris ? Donc, comme vous pouvez le voir ici. Cette image en particulier est encore plus captivante. C'est juste plus intéressant, et ça vous attire. Cependant, avec cette image, n'est tout simplement pas très intéressant. C'est juste ennuyeux. Cela ne semble tout simplement pas attirer mon attention autant que l'autre. Donc, si tu as bien compris, donne-toi une tape dans le dos, tape dans tes mains, fais demi-tour, touche tes orteils et va prendre un café à ta rencontre, pour fêter ça, car nous sommes sur le point de commencer la prochaine leçon. Je te verrai bientôt 20. Création de site Web 101 : conception (et exigences légales aux États-Unis): L'importance du contraste dans la conception de sites Web. Pourquoi est-ce important et qu'est-ce que cela signifie ? Eh bien, commençons par comprendre ce que signifie réellement le contraste. Maintenant, certaines personnes pensent que le contraste n'est qu'une sorte d' astuce visuelle alors que c'est en fait bien plus que cela. Parce que le contraste dans la conception d'un site Web peut contribuer à la lisibilité Cela peut contribuer à améliorer l'expérience utilisateur, et cela peut également aider l' utilisateur à se rendre là où il doit être beaucoup plus rapidement en dirigeant son regard et son attention. Tout cela est extrêmement important, mais ce qui est encore plus important c'est que si vous n'avez pas un certain niveau de contraste aux États-Unis et que vous répondez à leurs exigences, vous pourriez vous retrouver avec une lourde amende Et celles-ci sont strictement appliquées en tant que norme ADA et également en tant que normes WC AG. En gros, si une personne malvoyante ne peut pas faire la différence entre certains éléments de votre page Web parce que le contraste n'est pas là et qu'il n'est pas suffisant, cela pourrait vous mettre dans l'eau chaude. Maintenant, vous pouvez vérifier le contraste sur ce site Web ci-dessous. Je vais également l'ajouter au cours afin que vous puissiez le consulter vous-même et l'utiliser lorsque vous créez votre site Web pour vous assurer que vous êtes légalement en sécurité. Maintenant, nous avons réglé les bases légales. Pourquoi ne pas utiliser le contraste pour améliorer l'apparence et la sensation de votre design pour l'utilisateur ? Eh bien, l'un des plus importants est la différence entre le contraste du texte et celui de l'arrière-plan. Maintenant, avec tout ce que je vous ai enseigné dans ce cours jusqu'à présent, vous devriez utiliser un fond blanc pour votre site Web actuel, puis vous devriez utiliser du texte noir ou un gris très foncé. Donc, du point de vue du contraste, tout devrait bien se passer. La seule différence est que votre couleur principale ou vos couleurs d'accent ne sont pas suffisamment contrastées par rapport au blanc, ce qui pourrait vous poser quelques problèmes Assurez-vous de consulter le site Web que je vous ai donné il y a peu de temps dans cette leçon, afin de vous assurer que le contraste de votre site Web est à la hauteur. Une autre chose vraiment intéressante en ce qui concerne le contraste est la hiérarchie visuelle. Par exemple, le site Web d'Apple l'utilise pour la barre de navigation. Il s'agit essentiellement d'une manière attrayante d' utiliser le contraste pour interagir avec l'utilisateur. Cela les aide à savoir sur quoi ils cliquent et où ils vont. Et en fin de compte, cela ne fait qu'ajouter à l'expérience utilisateur en créant un site Web incroyable qu'ils pourront parcourir Maintenant, ce que je veux vraiment faire, c'est simplement tirer la leçon de l' importance du contraste. Alors jetez un œil à ces deux exemples. Et laissez-moi savoir dans 3 secondes laquelle, selon vous, utilise correctement le contraste. Et 32 ans, un. Tu as bien compris ? Comme vous pouvez le constater avec la conception de ce site Web , tout semble bon. C'est très clair, je peux tout voir, et c'est vraiment facile à digérer. Cependant, sur l'autre site Web, c'est un peu différent. C'est un peu trop artistique, et je n'arrive pas vraiment à lire une partie du texte. C'est lisible, mais ce n'est pas vraiment aussi simple que l'autre design. Gardez cela à l'esprit lors de la conception de votre site Web. Simplifiez les choses. Honnêtement. L'une des choses que je dis littéralement à tous les étudiants, fondateurs entrepreneurs et designers avec lesquels je travaille au cours des dix dernières années, c'est de garder les choses simples. Inutile de réinventer la roue. Utilisez votre bon sens en ce qui concerne l'utilisation du noir sur fond blanc et choisissez une couleur vraiment unique pour votre palette de couleurs, mais assurez-vous simplement suivre les normes américaines si vous êtes là, car je ne veux pas que vous ayez des problèmes illégaux. D'accord ? Je te verrai dans la prochaine leçon. 21. Les 101 de la création de site Web : répetition et cohérence: Pourquoi la répétition et la cohérence sont-elles si importantes lors de la création d'un beau site Web ? Eh bien, lorsque ces deux principes sont réunis, cela contribue à créer une expérience utilisateur prévisible, aide l'utilisateur à utiliser moins de calories mentales lorsqu'il navigue sur votre site Web et crée une meilleure expérience utilisateur globale. Il ne s'agit pas simplement de tout dupliquer et de tout faire de Ce n'est pas de cela qu'il s'agit. Il s'agit de mettre en place certains systèmes au sein de votre site Web et le concevoir de manière à ce que, lorsque la personne fait défiler la page de votre site Web, cela ressemble à une expérience longue et fluide Et ce n'est pas compliqué à faire. En fin de compte, il s'agit simplement de s'assurer que vos couleurs, polices, images et autres éléments sont tous cohérents et que le style de chacun de ces éléments est répété sur l' ensemble du site Web. Cela peut aider à créer une expérience avec laquelle l'utilisateur pourra se familiariser. Et en utilisant la répétition et la cohérence sur chaque page de votre site Web, cela peut également aider votre marque à paraître plus professionnelle et donc plus digne de confiance. Mais cela inclut également des éléments tels que les boutons et l'espacement entre les lettres de votre texte et l'espace entre le titre et le contenu De nombreux éléments différents que vous pouvez essentiellement réunir pour créer une expérience globale sur votre site Web. Alors, comment pouvez-vous vous assurer que l'ensemble de votre site Web est cohérent et que vous utilisez la répétition d'une manière qui n'est pas ennuyeuse, mais plutôt engageante et qui renforce la confiance ? Eh bien, pensez-y comme ça. Toutes vos choses de base doivent être les mêmes. Mais vous pouvez vous exprimer de différentes manières afin de créer une expérience engageante pour votre utilisateur ? Par exemple, sur les articles de blog, vous pouvez placer l'appel à l' action au même endroit. Cela garantit que chaque fois que l'utilisateur lit différents articles de blog et essaie de s' informer, il sait à tout moment où se situera l' appel à l' action. L'incohérence des pétitions est également très importante en ce qui concerne les sites Web de commerce électronique en particulier Pensez aux pages de produits et à la façon dont les différentes pages de produits sont finalement toutes différentes parce qu'il s'agit d'un produit différent, mais les images réelles présentées dans le produit sont très similaires Ils ont les mêmes angles, le même style, peut-être le même fond coloré. Tout est réuni pour créer une répétitivité et une cohérence tout en permettant à chaque produit de briller à sa manière Une autre chose, qui n'est pas tout à fait visuelle, mais qui concerne davantage l'expérience utilisateur réelle, est s' assurer que les fonctionnalités de chaque page sont également cohérentes. Par exemple, avec votre barre de navigation, si votre barre de navigation est d'une couleur différente à chaque fois, elle passe à une page différente, elle ne sera pas vraiment très belle. Assurez-vous donc de garder à l'esprit que la cohérence et la répétitivité ne sont pas ennuyeuses C'est en fait quelque chose dont votre utilisateur a besoin. Ils doivent se familiariser avec votre site Web afin de pouvoir l' utiliser de la manière la plus efficace possible pour arriver là où ils doivent aller dans les plus brefs délais et avec le moins de clics possible. Maintenant, pour vous amuser un peu, examinons ces deux exemples, et vous me direz lequel des deux utilise la théorie et la pratique de la répétition et de la cohérence pour créer un meilleur fichier global, plus familier à l'utilisateur OK, je vais te donner 3 secondes, donc trois, deux, une. Tu as bien compris ? Maintenant, si vous n'avez pas bien compris, ne vous inquiétez pas. Nous allons apprendre et voir de nombreux autres exemples au fur et à mesure que nous avancerons dans le cours. Et la cohérence et la répétition seront très évidentes lorsque nous créerons notre site Web ultérieurement. Mais si vous avez bien compris, félicitations, bonne chance et encore un café pour vous. Et si tu n'aimes pas le café, alors je ne sais pas. Je ne sais pas quoi te dire. Quoi qu'il en soit, je te verrai à la prochaine leçon du cours ? J'ai hâte de voir ça. 22. Design de site Web 101 : se chevaucher: OK, alors qu'est-ce qui se chevauche dans la conception Web ? Eh bien, le chevauchement est une façon peu conventionnelle de développer votre site Web, car il s'agit généralement documents très structurés et organisés Mais le chevauchement peut ajouter un peu d'intrigue visuelle et rendre les choses un peu plus créatives En utilisant le chevauchement, vous pouvez vraiment attirer l'utilisateur et vous pouvez vraiment, vous savez, capter cette attention Alors, comment utilisez-vous correctement le chevauchement sur votre site Web Eh bien, vous pouvez utiliser de nombreuses méthodes différentes, mais en fin de compte, la règle principale consiste à enfreindre la règle qui consiste à utiliser des grilles, à superposer deux éléments afin de créer une sorte de profondeur intrigante Maintenant, ce que vous faites en fait avec chevauchement, c'est que vous permettez à un élément de dépasser ses limites Et en franchissant les limites extérieures, nos yeux sont instantanément attirés par elle, car fin de compte, elle n'est pas censée être là où elle se trouve. En fait, cela franchit limite d' un autre élément, ce qui peut donner à la page un aspect un peu désordonné, mais si c'est fait correctement, elle peut très bien Maintenant, voici quelques points à prendre en compte, si vous vous demandez si le chevauchement vaut la peine d'être fait pour votre site Web en particulier La première chose est que cela peut vraiment donner une belle touche moderne. Les sites Web traditionnels n'ont peut-être pas besoin de l'approche du chevauchement, mais si vous voulez qu'ils soient considérés comme un peu différents, un peu innovants, un peu nouveaux et modernes, chevauchement pourrait être une excellente approche pour vous Maintenant, une très bonne façon de penser au chevauchement est de l' utiliser comme des couches Ainsi, par exemple, vous avez couleur de base de votre site Web, qui est la première couche, puis vous avez la couche secondaire, qui est le premier élément, puis la couche supérieure doit être l'autre élément, qui se chevauche évidemment avec le premier élément Maintenant, l'élément supérieur, qui se chevauche, devrait être un peu plus petit car vous devriez pouvoir voir la base du site Web, la première couche et la deuxième couche en même temps Cela ne devrait pas trop se chevaucher , car cela finirait par masquer le premier élément et contredirait complètement toute la pratique du chevauchement au départ Une autre chose à prendre en compte est d' utiliser le chevauchement avec modération, car cela attire l'attention sur en compte est d' utiliser le chevauchement avec modération, le chevauchement, et c'est parce que vous pouvez attirer l'attention sur l'élément superposé, mais vous ne voulez pas vraiment l'utiliser trop souvent, car il perdra de sa nouveauté Et utilisateur, vous allez voir cela comme un peu ennuyeux au fil du temps. Le meilleur endroit où j'aime l'utiliser est dans la section des héros. J'attire vraiment l'attention des gens, cela les attire. Ensuite, vous avez leur attention pour qu'ils puissent parcourir le reste de votre site Web. N'oubliez pas non plus que vous pouvez utiliser le chevauchement pour mettre en valeur certains aspects d'un site Web, comme votre appel à l'action, par exemple Parce que n'oubliez pas que vous utilisez le chevauchement pour attirer l'attention des utilisateurs sur cet élément en particulier Utilisez-le à votre avantage, utilisez-le de manière stratégique. Je voulais maintenant vous montrer deux exemples. Juste un peu amusant, juste pour voir si vous pouvez repérer les chevauchements effectués correctement et les chevauchements bien faits, pas si Quels sont ces deux exemples qui vous semblent les meilleurs ? vous, lequel utilise le chevauchement de la bonne manière Trois, deux, un. C'est celui-là. Tu as bien compris ? Maintenant, si vous n'avez pas bien compris, ne vous inquiétez pas. Le chevauchement ne convient pas à tout le monde. De plus, nous en parlerons un peu plus tard dans le cours, afin que vous puissiez le suivre à ce moment-là. Mais si tu as bien compris, bravo, tape dans le dos, et je te verrai dans la prochaine leçon. À plus tard. 23. Design de site Web : espace blanc: Espace blanc dans la conception d'un site Web. Dans quelle mesure est-ce important ? Qu'est-ce que c'est ? Et comment pouvons-nous l'utiliser pour créer de beaux sites Web ? Comme je l'ai dit, au début du cours, je pense personnellement que 99 % des sites Web devraient soit avoir un fond blanc, véritable parcours professionnel. Et il y a une raison à cela parce que les gens aiment les Blancs. Spécialement moi. J'adore le blanc. Maintenant, si nous aimons le blanc, c'est parce qu'il permet aux éléments du site Web de respirer. Maintenant, les espaces blancs peuvent être appelés de différentes manières. Il y a un micro-espace blanc, espace blanc macro, nous aborderons un peu plus tard, mais c'est ce que l'on appelle aussi l'espace négatif, qui est également un peu lié à la conception de logos, si vous êtes concepteur de logo. Il est très important de se souvenir de certaines choses très important de se souvenir de lorsque vous utilisez des espaces blancs dans conception de votre site Web pour obtenir les meilleurs résultats. Maintenant, qu'est-ce que l'espace blanc d' abord et avant tout ? Eh bien, l'espace blanc est l'espace laissé intentionnellement et qui n'a rien dessus. C'est complètement vide. L'espace blanc donne essentiellement l'espace à tout le contenu et aux éléments de votre site Web. Et sans cette marge de manœuvre, votre site Web peut sembler assez contraignant et très fréquenté, et nous ne voulons pas vraiment qu' il ait l' air très fréquenté. Nous voulons qu'il soit un peu plus moderne, un peu plus aéré, afin que la personne se sente à l'aise lorsqu'elle parcourt lentement votre site Web pour en savoir plus sur vous parcourt lentement votre site Web savoir plus sur Maintenant, les espaces blancs peuvent vraiment aider à créer un design vraiment épuré. Et c'est la clé. Vous souhaitez rendre votre contenu très lisible pour vos utilisateurs, afin qu'ils puissent bénéficier de la meilleure expérience possible et qu'ils puissent consommer toutes les informations que vous devez assimiler. Cela conduit finalement à un design plus esthétique. Maintenant, si vous n' utilisez pas d'espaces blancs, vous risquez de surcharger pages de votre site Web et d'empêcher les gens de passer trop de temps à voir Apple utiliser des tonnes d'espaces blancs lors de la conception de leurs sites Web Et vous seriez surpris de constater à quel point texte simple avec une belle image et beaucoup d' espaces blancs peut vraiment donner vie à votre site Web. En ce qui concerne la conception de sites Web, parfois moins c'est plus. fait d'avoir une tonne d' espaces blancs peut donc vraiment aider à créer cette belle expérience laquelle vos utilisateurs peuvent s' attendre. Maintenant, quelle est la différence entre macro et un micro espace blanc ? Parce que c'est vraiment important. Maintenant, les micro-espaces blancs sont les éléments les plus importants, comme, par exemple , votre arrière-plan, comme le rembourrage et marge entre votre titre et le contenu, par exemple, l'espace entre le contenu de votre site Web étant le texte, puis aussi les images que vous avez à côté, peut-être, comme l'espace entre le bouton et le bas d'un texte au-dessus alors que les micro-espaces blancs sont un peu différents. s'agit de choses comme l'espace entre le texte de votre site Web, juste pour lui donner un peu de marge de manœuvre, ou peut-être même l'espace blanc accru entre le texte d'un bouton, par exemple, pour lui donner un peu plus de marge de manœuvre et l'aider à se démarquer. Maintenant, c'est un peu une expérience. Examinons deux sites Web différents, l'un utilisant correctement les espaces blancs et l'autre qui n' utilise pas vraiment les espaces blancs sur la droite. Lequel de ces deux utilise le mieux les espaces blancs selon vous ? Je vais te donner un peu de temps. Trois, deux, un. Tu as bien compris ? Comme vous pouvez le constater, utiliser correctement les espaces blancs peut vraiment vous aider à créer une expérience incroyable pour vos utilisateurs. Mais si vous ne l'utilisez pas correctement et que votre site Web est un peu encombré et pas vraiment organisé correctement, vous pouvez également avoir un effet négatif Prenez donc le temps, prenez du recul et souvenez-vous toujours que vous pouvez toujours ajouter, retirer et expérimenter lors de la conception de votre site Web. Quoi qu'il en soit, j'espère que cette leçon vous sera utile dans les exemples. J'ai donc hâte de vous voir plus tard dans le cours. À bientôt. 24. Création de site Web stratégique : définir vos objectifs: Comment définissez-vous l' objectif stratégique de votre site Web ? Eh bien, dans cette leçon, nous allons apprendre comment vous pouvez déterminer les objectifs de votre site Web, afin que vous puissiez vous assurer que votre site Web travaille dur pour vous tous les jours, 24 heures sur 24, 7 jours sur 7, 365 jours par an. J'aime penser à un site Web comme à un employé numérique. Mon site Web travaille donc d'arrache-pied pour convertir le trafic du site Web en clients payants. Tout ce que j'ai à faire, c'est passer un appel commercial rapide avec eux et leur faire franchir la ligne d'arrivée. Maintenant, évidemment, chaque entreprise est unique et légèrement différente à sa manière. Mais les objectifs que les sites Web de ces entreprises doivent atteindre sont très similaires. Alors, comment déterminez-vous personnellement les meilleurs objectifs que votre site Web doit atteindre pour votre entreprise ? Maintenant, la première chose que je veux dire, c'est que même si certains sites Web essaient d' atteindre plusieurs objectifs à la fois, c'est la première fois que atteindre plusieurs objectifs à la fois, vous créez un site Web, vous devez vous concentrer soit sur un seul objectif, soit un objectif principal et un objectif secondaire. Ne le faisons-nous pas si cela n'a pas encore de sens. Nous allons approfondir un peu cette leçon. Maintenant, si je pense qu'il faut se concentrer uniquement sur un ou deux objectifs, c'est pour simplifier les choses. En effet, lorsqu'un utilisateur vient sur votre site Web, la dernière chose que nous voulons, c'est qu'il soit confus. Et je vais vous montrer quelques exemples un peu plus loin dans cette leçon de sites Web qui utilisent l'approche à un ou deux objectifs, que je suggère à tous d'utiliser lors création d'un site Web pour leur entreprise pour la première fois. Maintenant, si vous créez un site Web pour une marque de commerce électronique, les objectifs que vous devriez avoir en place sont assez simples. Le premier objectif devrait être assez explicite, à savoir générer des ventes. Tout ce qui concerne votre site Web doit donc viser à générer autant de ventes que possible. Nous allons aborder certaines méthodes spéciales telles que la vente incitative, la vente croisée et diverses autres tactiques de marketing et de vente Mais à ce stade, nous devons simplement nous concentrer sur les objectifs de votre site Web et sur ce qu'il doit atteindre. Bien entendu, la vente serait l'objectif principal de toute entreprise de commerce électronique, mais l' objectif secondaire serait fin de compte de recueillir autant d'adresses e-mail que possible afin de pouvoir vendre à cette personne en particulier plus tard. Création d'une liste de courrier électronique qui vous permet de rester en contact direct avec clients potentiels intéressés par ce que vous avez à vendre. vous permet donc de générer plus de revenus plus tard. Maintenant, lorsque vous créez un site Web qui vend des produits ou services numériques, l'approche est assez simple et directe. Maintenant, pour que votre entreprise réussisse, vous devez en fin de compte vendre vos produits ou services. Et pour ce faire, vous devez passer une sorte d'appel commercial avec un client potentiel pour discuter de appel commercial avec un client potentiel pour ses besoins afin qu'il puisse finalement acheter chez vous et se sentir à l'aise de le faire. Donc, pour un site Web qui vend une sorte de service ou produit numérique ou quelque chose intangible, comme une marque de commerce électronique, par exemple, votre objectif principal devrait être de mettre en place une sorte d'appel de vente ou de déterminer si c'est possible. Personnellement, dans le cadre de mon activité basée sur les services, je me concentre sur la génération d'appels commerciaux, afin de pouvoir discuter du projet avec le client et finalement conclure la vente à partir de là. Maintenant, en tant qu'objectif secondaire, cela pourrait être de renforcer la confiance. Par exemple, pour le site Web de mon agence de marque , Clementinh do, j'ai positionné mon site Web de manière à mettre en valeur tout le travail que j'ai accompli au cours de la dernière décennie Je m'assure également de répondre à toutes les questions que les clients potentiels peuvent se poser en utilisant des FAQ et en ajoutant des témoignages clients précédents avec lesquels nous avons travaillé Et j'ai également veillé à ajouter des quiz sur le site Web afin que nous puissions réellement commencer à générer des prospects en posant des questions aux clients dans un environnement numérique La réalité est que les clients ne savent pas ce qu'ils ne savent pas. leur posant des questions qui suscitent la réflexion, cela nous positionne en fin de compte en tant qu'experts dans le domaine de la dénomination de marque, du design et du développement de sites Web. Ainsi, lorsque les clients nous le domaine de la dénomination de marque, du design de marque et du développement de sites Web. Ainsi, lorsque les clients nous contactent, commencent nos questionnaires et consultent notre site Web, ils ont au moins l'impression de savoir que nous savons de quoi nous parlons Désormais, la création d'un site Web pour une marque personnelle repose sur une gamme d' objectifs différents parmi lesquels vous pouvez choisir. Maintenant, ce sont les objectifs les plus courants que je vois sur les sites Web de marques personnelles Le premier objectif est de créer votre liste d'e-mails. Tout comme un site Web de commerce électronique, par exemple, vous essayez de créer une liste d'e-mails et une liste de personnes à qui vous pourrez vendre plus tard, le moment venu. Vous restez essentiellement en contact direct avec des personnes intéressées par ce que vous avez à voir et par ce que vous pourriez avoir à offrir à l'avenir. Donc, en fin de compte, le fait d' avoir une sorte de génération de prospects ou téléchargement gratuit où les gens peuvent échanger sorte de téléchargement gratuit où les gens peuvent échanger leur adresse e-mail contre cet actif en particulier vous aidera à développer votre liste d'e-mails très rapidement. Ce serait probablement votre principal objectif. Mais quels sont les objectifs secondaires que vous pourriez éventuellement explorer ? Eh bien, si vous voulez vraiment ajouter des objectifs secondaires, cela pourrait être d'augmenter votre audience sur les réseaux sociaux. Par exemple, quelqu'un peut vous trouver sur YouTube puis visiter votre site Web, et en ayant de petites icônes dans votre pied, indiquant essentiellement que vous êtes également actif sur TikTok et Instagram, gens pourront également vous trouver sur ces autres plateformes Donc, en gros, vous créez cet écosystème et cette communauté de personnes qui veulent en savoir plus sur vous et qui veulent en fin de compte suivre ce que vous avez à dire. Maintenant, à mesure que la marque personnelle d'une personne se développe, il est évident que le site Web devra également proposer différents types de produits. Par exemple, si la marque personnelle jouit d'une grande autorité et d'une grande confiance , cette personne peut être engagée pour conférences et peut-être pour promouvoir la marque. Vous allez donc devoir ajouter d' autres éléments au site Web pour y répondre. vais examiner différents sites Web et les objectifs qu'ils essaient d' atteindre tout au long du cours. Ne vous inquiétez pas si les choses ne sont pas encore claires à 100%. À ce stade, il vous suffit de commencer à réfléchir aux objectifs que vous souhaitez que votre site Web atteigne et de les noter. Parce que lorsque vous les notez, vous constaterez que tout ce que vous faites, lorsque vous commencez à concevoir et à créer votre site Web facilite la tâche lorsque vous vous concentrez clairement sur ce que vous essayez de réaliser. Quoi qu'il en soit, j'espère vraiment que cette leçon vous plaira et je vous verrai dans la prochaine. On se voit. 25. Création de site Web stratégique : trouver l’inspiration: Avant de commencer à créer votre site Web, vous avez besoin d'inspiration. Il existe maintenant deux endroits principaux où vous pouvez trouver une incroyable source d'inspiration lorsque vous concevez votre site Web et lorsque vous réfléchissez à des idées pour votre site Web. Maintenant, le premier se présente sous forme de café. Et pour être honnête, c'est à peu près de là que vient toute mon énergie ces temps-ci, avec un peu de sucre et un dessert. Et Binsu. Si vous n'avez jamais mangé BinSu, essayez-le C'est incroyable. Et un autre endroit où vous pouvez trouver l'inspiration , vous l'avez deviné ? En ligne. Je recommande donc ces trois sites Web pour trouver l' inspiration en ligne pour vos idées de développement de sites Web. La première place est donc attribuée aux récompenses orthographiées E W, W, W. Ards.com . Les récompenses sont essentiellement le summum de toute conception de développement de sites Web Non, les sites Web sont extrêmement bien conçus et ils sont essentiellement classés par des experts en développement de sites Web Vous pouvez donc obtenir les meilleurs sites Web beaucoup plus rapidement sans avoir à éliminer de nombreux mauvais sites Web, si cela a du sens Donc, si vous avez du mal à comprendre ce qui fait un bon site Web d'un mauvais site Web, vous pouvez consulter ces sites Web et savoir qu'ils sont tous assez bons. Maintenant, vous pouvez cliquer sur chaque site Web et découvrir un peu plus le site Web et comprendre un peu comment la personne a réellement eu l'idée, pourquoi elle a fait certaines choses, juste pour vraiment avoir une idée de la façon dont vous souhaitez aborder le développement de votre site Web. Maintenant, n'oubliez pas, et je l'ai mentionné plus tôt dans le cours, que lorsque vous consultez d'autres sites Web, vous n'avez pas à copier votre site Web, vous savez, Spade pour plus de rapidité, mais ce que vous pouvez faire, c'est que vous pouvez finalement regarder ce que vous aimez sur ce site Web, puis vous en inspirer pour l'utiliser dans le cadre de votre propre idée Donc, l'avantage des récompenses, c'est que vous pouvez visiter le site Web vous-même et voir complètement ouvert et en mouvement afin de pouvoir réellement découvrir ce que le concepteur a créé. Maintenant, un autre excellent endroit pour trouver l'inspiration est un site Web appelé B hands. Et encore une fois, il existe tellement de types de sites Web parmi lesquels choisir. Donc, si vous faites simplement défiler la page et que vous trouvez quelque chose qui vous semble cool, comme celui-ci, par exemple, vous pouvez suivre le processus explique comment qui explique comment ce designer en particulier a eu l'idée. Et encore une fois, vous pouvez simplement prendre ce que vous aimez sur le site Web. Peut-être que vous aimez vraiment la police et son élégance, peut-être que vous aimez la palette de couleurs et la façon dont la photographie harmonise parfaitement avec les blancs, les gris et les noirs des sites Web Peut-être que vous aimez le fait que c'est vraiment propre et simple, et qu'il ne se passe pas trop de choses. Prenez donc autant de notes que possible, car plus tard, lorsque nous aurons réellement créé vos sites Web, vous serez en mesure de comprendre exactement ce que vous aimez et ce que vous n' aimez pas , de sorte que le résultat final soit meilleur que vous ne pourriez l'imaginer. Pour être honnête, Be Hans possède la plus large gamme de sites Web incroyables pour des tonnes de types de sites Web différents Ainsi, par exemple, qu'il s'agisse d'une marque personnelle ou d'une entreprise de services ou même d'une entreprise de services dans un secteur particulier, vous pouvez rechercher le type de site Web que vous souhaitez voir. Et en fin de compte, B Hans vous donnera les exemples les plus pertinents qui sont également les plus appréciés, afin que vous obteniez les meilleurs sites Web possibles sur la plateforme sans aucun effort supplémentaire. Maintenant, le dernier endroit auquel vous n'avez peut-être pas pensé lorsque vous avez trouvé l' inspiration pour la conception de votre site Web est Pinterest. Maintenant, comme vous pouvez le voir ici, Pinterest propose des exemples incroyables de développement de sites Web, de nombreux types de sites Web différents, pour de nombreux types de secteurs différents, et vous n'avez pas à vous inspirer uniquement des types de sites Web spécifiques à votre marque en particulier. Vous pouvez consulter des sites Web de nombreuses marques différentes, et vous pouvez finalement tirer le meilleur parti de chacun d' entre eux pour créer une expérience vraiment unique pour votre utilisateur. Et tout comme B Hans, vous pouvez rechercher types de sites Web très spécifiques, tels que des sites Web de commerce électronique, des sites Web de marques personnelles ou des sites Web de services, pour trouver les types de sites Web qui correspondent à votre marque et à votre entreprise, afin de trouver l' inspiration bien plus rapidement. De plus, tout comme B Hands, Pinterest Sticks, les meilleurs sites Web au sommet, vous pouvez donc obtenir les meilleurs exemples possibles bien plus rapidement. 26. Création de site Web stratégique : exemples de sites Web e-commerce: création d'un site Web de commerce électronique signifie que vous devez essentiellement vendre autant de produits que possible pour le plus grand nombre possible. Et si vous voulez être le meilleur sur votre marché, vous devez rechercher les meilleurs produits dans votre secteur en particulier. Par exemple, si vous étiez une entreprise de bijoux, vous pourriez avoir affaire à quelqu'un comme Tiffany and Co qui sait exactement comment vendre des produits haut de gamme, n'est-ce pas ? Oui, en effet, ils existent depuis 1837, mais cela signifie simplement qu'il y a une mine de leçons à tirer pour vous puissiez découvrir ce que vous aimez et ce que vous n'aimez pas dans la façon dont ils gèrent leur site Web Maintenant, vous pouvez le voir ici, toutes leurs photographies de produits sont absolument impeccables Ils ont également découpé leurs produits avec de belles photos de style de vie, montrant leur produit remporté par un joli mannequin. Vous pouvez également constater qu'ils font assez souvent lorsqu'ils montrent le mannequin qui porte réellement le collier, juste pour susciter à nouveau l' intérêt de l'utilisateur, et ils ne se contentent pas de regarder produits banals encore et encore Vous pouvez voir que l'interface utilisateur est vraiment très fluide. Vous pouvez en fait parcourir les différents produits. Ainsi, vous pouvez vraiment comprendre ce que vous achetez avant cliquer sur le produit pour en examiner les détails les plus fins Et vous pouvez voir comment ils se concentrent sur l'utilisation d'une palette de couleurs très simple composée de gris et de blancs et, vous savez, de tons de bronze pour finalement bien positionner la marque et laisser transparaître la couleur principale de Tiffany Ce ne sont là que quelques points que j'ai retenus en consultant le site Web de Tiffany and Core pendant quelques minutes, mais vous devriez passer plus de temps sur les sites Web de vos concurrents pour finalement voir ce qu'ils font bien et ce qu'ils font moins bien Inspirez-vous, prenez des notes et découvrez ce que vous aimez et ce qui, selon vous , fonctionnera pour votre marque en particulier. Maintenant, en tant que marque qui sait ce qu' fait en matière de commerce électronique, c'est le moins qu'on puisse dire. Jetons un coup d'œil au site Web de Nike pour découvrir ce qu'ils font pour réellement entrer en contact avec leur public cible et pour finalement créer la meilleure expérience possible, qui soit conforme à la marque, afin de vendre le plus de produits possible. Ce que vous pouvez voir ici dès que vous arrivez sur le site Web de Nike, c'est qu'ils sont très axés sur les baskets. Et une grande partie des revenus de Nike provient en fait des chaussures et des baskets, et en particulier des baskets Jordan, qui sont extrêmement populaires aux États-Unis et peu près dans le monde entier. Donc, ce que vous pouvez en tirer, c'est que lorsque vous avez un produit principal ou un best-seller, cela doit être au premier plan de tout ce que vous faites sur votre site Web. Cela devrait être le premier produit que vous verrez. Ce devrait être le produit qui apparaît le plus facilement. N'oubliez pas non plus que lorsque nous consultons réellement un site Web, nous le voyons en haut à gauche bas à droite dans cet ordre. Nous faisons donc des files d'attente. Donc, en fin de compte, ce que vous voulez faire, c'est regarder les choses comme si vous lisiez un livre. À moins que, dans certaines cultures où l'on lit de droite à gauche, la plupart des gens du monde occidental lisent de gauche à droite. Gardez donc cela à l'esprit et assurez-vous de vous positionner dans les produits de gauche à droite en fonction de leur importance et de leur popularité. Encore une fois, je ne fais que regarder les différents éléments du site Web et j'essaie d'en prendre le plus possible. En fait, j'aime vraiment cette section en particulier où c'est un peu comme une carte-cadeau, non ? Tous les plus beaux cadeaux. Nike. Ça a juste l'air vraiment cool. J'adore la palette de couleurs, j'adore la façon dont l'or et le vert fonctionnent ensemble. Cela pourrait donc être quelque chose que je note ou peut-être même que je fais une capture d'écran pour dire : «   D'accord, si je dois faire une carte-cadeau, je vais faire quelque chose comme ça. C'est le type de style que je souhaite. Et je peux passer à l'étape suivante, qui consistera à créer le site Web et à utiliser cette partie du site Web comme le site Web et à utiliser source d'inspiration. Si je souhaite offrir une carte-cadeau dans le cadre de mon offre particulière. Ainsi, peu importe d'où vous puisez votre inspiration, qu'il s'agisse de B Hands, récompenses, de Pinterest ou de vos concurrents, tout ce qui compte, c'est que vous preniez le temps d'apprendre ce que vous aimez et ce que vous n'aimez pas. Ainsi, vous pouvez créer le meilleur site Web pour vous. Quoi qu'il en soit, j'espère vraiment que vous avez apprécié cette leçon. Je te verrai dans le prochain. On se voit. 27. Création de site Web stratégique : exemples de sites Web de marque: source d'inspiration pour les sites Web de marque personnelle, vous pouvez voir à quel point ce site Web en particulier est incroyable pour UC et Bolt, qui est un type extrêmement rapide que vous ne voulez pas courir après ou être poursuivi d'ailleurs Pour être tout à fait honnête, j'aime vraiment la simplicité de ce site Web, mais à part cela, je ne vois pas grand-chose sur le site Web que j'aime En fait, je n'utiliserais pas une grande partie de ce site Web dans ma propre conception. Je pense que c'est très simple très minimal. J'aime son image de marque avec ses couleurs, et j'aime beaucoup le logo. Mais à part ça, ce n'est pas vraiment ce que je recherche, et c'est bon. Ainsi, lorsque vous consultez un site Web, vous n'avez pas à tout aimer. Vous pouvez en fait ne pas aimer beaucoup de choses à ce sujet. Il suffit de prendre du recul et de regarder les choses du point de vue de l'utilisateur, n'est-ce pas ? Vous savez, si vous étiez l'utilisateur, qu'en est-il de ce site Web, trouveriez-vous des éléments qui ajoutent à l'expérience et qu'en retirez-vous ? Parce qu'en prenant le temps de comprendre exactement ce que vous aimez du point de vue d'un site Web, cela vous permettra de prendre meilleures décisions plus tard, mais vous vous permettez uniquement de prendre ces décisions et de découvrir ce que vous aimez et ce que vous n'aimez pas en prenant le temps de comprendre ce qui existe d'autre. Vous devez consulter les autres sites Web qui se trouvent dans votre espace pour comprendre ce qu'ils font afin de comprendre ce qui est pour vous et ce qui ne l'est pas tout à fait pour vous. Si nous regardons un autre site web de David Goggins, homme vraiment inspirant des Navy Seal qui était à l'origine très obèse, et qui est maintenant un vrai Jack Maniac. Il vous fait acheter son livre ces différentes plateformes. Il a également d'excellents témoignages de la part de Dyn the Rock Johnson et Joe Et en fin de compte, ce site Web n'est pas non plus fou. Je n' en suis pas complètement amoureux. Mais une chose que j'aime vraiment à propos ce site, c'est la page des réalisations. Il a donc une page qui raconte ses années de réussite sportive depuis 2005. Ce sont donc toutes les différentes courses auxquelles il a participé pour finalement en arriver au point où il est devenu un maniaque complètement nul, qui peut littéralement, vous savez, je veux dire, c'est en fait un exemple de lui quand il était de retour la veille de devenir Navy Maintenant, il est, vous savez, je pense, l'une des personnes les plus en forme et les plus athlétiques de la planète. Il est juste fou, non ? Donc, ce site Web montre réellement qui il est en tant que personne Cela montre le type de mentalité qu'il a, et il ne se contente pas de vous en parler En fait, il vous montre que j' ai fait toutes ces courses. Je suis arrivé premier, je suis arrivé deuxième. Vous savez, je n'ai pas obtenu ma place dans celui-ci, mais je l'ai quand même fait, et c'est comme une course de 22 heures, ce qui est fou. J'aime bien cette page en particulier en tant que facteur de confiance. Je pense donc que c' est quelque chose que je peux vraiment inspirer lorsque je crée mon propre site Web de marque. Une marque personnelle doit être en mesure de montrer aux gens qu'ils peuvent joindre le geste à la parole et parler, ce qui est très important car vous devez renforcer la confiance et l'autorité. Ainsi, peu importe d'où vous puisez votre inspiration, qu'il s'agisse de B hands, de récompenses, centres d'intérêt ou de vos concurrents, tout ce qui compte, c'est que vous preniez le temps d'apprendre ce que vous aimez et ce que vous n'aimez pas. Ainsi, vous pouvez créer le meilleur site Web pour vous. Quoi qu'il en soit, j'espère vraiment que vous avez apprécié cette leçon. Je te verrai dans le prochain. À bientôt. 28. Création de site Web stratégique : exemples de sites Web B2B: Maintenant, pour ce qui est de s'inspirer d' entreprises basées sur les services ou de vendre des logiciels, par exemple, monday.com est un très bon Maintenant, si vous ne savez pas ce qu'est monday.com, c'est essentiellement une plateforme de productivité où vous pouvez, en fin de compte, gérer votre journée ou gérer vos clients et tout ce genre de choses Cela ressemble beaucoup à une idée, mais c'est fondamentalement plus cher. Maintenant, en ce qui concerne monday.com, vous pouvez voir ici qu'ils proposent une très belle gamme d'options . Donc c'est essentiellement en tant que client, je vais choisir, d'accord, peut-être que je veux l'utiliser pour la création et le design, commencer. Donc, je commence essentiellement et cela m' amène directement à une page d'inscription. Je m'inspire donc en me disant  : OK, peut-être qu'en ce qui concerne mon activité en particulier, je veux présenter les options dont l'utilisateur devrait disposer, afin que, vous savez, nous puissions commencer à prendre tous les visiteurs du site Web et à les placer dans certains compartiments afin que je puisse créer une meilleure expérience à l' avenir , car lorsque je clique sur ce bouton, cela dit à monday.com de m'y emmener aux pages pertinentes pour la création et le design. Si je clique sur quelque chose comme le marketing, cela m'amène à une page plus pertinente pour le marketing. Si je clique sur quelque chose comme HR, il sait que je vais l'utiliser pour les RH. Pensez-y donc lorsque vous envisagez développer pages de votre site Web pour amener les internautes à accéder à la page pertinente le plus rapidement possible. Ils peuvent donc s'inscrire afin commencer à vous donner de l'argent et de travailler avec vous trouver une solution au problème. Maintenant, une autre chose vraiment intéressante que je voudrais vous montrer , parce que c'est ce que je pense des sites Web lorsque je les consulte , c'est à quel point c'est cool, comment ces petites choses s'illuminent pour interagir avec vous du point de vue de l'expérience utilisateur. exemple, j'aime le fait qu' elles s'adaptent toutes aux couleurs des icônes, et j'aime juste le fait que j' réellement avec le site Web, et que j'ai l'impression que ma main est une extension du site Web. Gardez donc à l'esprit que l' inspiration peut venir de n'importe où. Cela peut venir des couleurs, des fonds , de la structure. Soyez ouvert d'esprit chaque fois que vous développez un site Web ou que vous recherchez l'inspiration, car l'inspiration peut venir de n'importe où. Si nous allons sur ce site Web, qui est Canva, dont je suis sûr que vous avez entendu parler C'est une sorte de plateforme visuelle de design pour tout le monde. Maintenant, vous pouvez voir qu'ils utilisent littéralement exactement la même approche. Ils ont une sorte de section interactive où vous pouvez essentiellement dire : «   D'accord, je cherche à utiliser Canva pour des présentations, ou peut-être que je cherche à l' utiliser pour des sites Web C'est très pratique. Ou peut-être que je cherche à l'utiliser pour publier sur Instagram. Cela vous permet de trouver très facilement la page pertinente à laquelle vous devez accéder le plus rapidement possible. Et ce n'est pas par erreur. C'est en fin de compte le meilleur moyen inciter un utilisateur à s'inscrire, car Canva et monday.com ont pour objectif d'inciter les utilisateurs à s' inscrire pour utiliser Parce que s'ils ne s' inscrivent pas, devinez quoi ? Ils ne sont pas payés et ne peuvent pas générer de revenus. Donc, le fait de permettre aux utilisateurs de trouver très facilement la page ou les informations dont ils ont besoin et de se rendre là où ils doivent aller le plus rapidement possible augmentera le nombre d' inscriptions que ces deux plateformes peuvent atteindre Peu importe d'où vous puisez votre inspiration, qu'il s'agisse de B Hands, de récompenses, de Pinterest ou de vos concurrents, tout ce qui compte, c'est que vous preniez le temps d'apprendre ce que vous aimez et ce que vous n'aimez pas. Vous pouvez créer le meilleur site Web pour vous. Quoi qu'il en soit, j'espère vraiment que cette leçon vous plaira. Je te verrai dans le prochain. À bientôt. 29. Création de site Web stratégique : définir vos objectifs: OK, donc structurez les pages de votre site Web. Pourquoi commençons-nous et comment le faisons-nous ? Eh bien, si vous vous souvenez d'une leçon précédente, lorsque nous avons parlé de la page d' accueil et du fait d'attirer l'attention de la personne dans les plus brefs délais, vous connaissez déjà la structure que nous devons utiliser Et cette structure repose entièrement sur trois questions clés. Tout d'abord, suis-je au bon endroit ? La deuxième, c'est : puis-je te faire confiance ? Un être numéro trois ? Dites-m'en plus. Alors, qu'est-ce que cela signifie pour la structure des pages de votre site Web ? Quelle que soit la page dont vous parlez sur votre site Web, vous devriez en fin de compte structurer les pages de votre site Web autour ces trois questions à tout moment Et si vous suivez la formule simple, vous ne pouvez jamais vous tromper en essayant de créer une page pour votre site Web. Et cela s'explique par le fait qu'ils sont structurés exactement autour des mêmes questions qu'un visiteur d'un site Web se pose lorsqu'il visite votre site Web pour la première ou la deuxième fois. Pensez donc toujours aux pages de votre site Web dans cet ordre. Et cela vaut pour tous les types de sites Web, qu'il s' agisse d'un site Web de commerce électronique, d'un site Web de service ou d'un site Web de marque personnelle. Dans la prochaine leçon de ce cours, nous allons voir comment différents sites Web adoptent exactement la même approche et la structurent simplement d'une manière légèrement différente pour s'en approprier le contenu. De toute évidence, chaque entreprise est unique. Je veux vous donner un cadre solide et fiable à suivre lors de la création d'une toute nouvelle page pour votre site Web. Parce qu'en fin de compte, votre site Web doit être beau, mais il doit également obtenir des résultats, et c'est pourquoi nous sommes là. Maintenant, une chose que je trouve très utile lorsque je conçois un site Web à partir de zéro est de prendre un stylo et du papier et de dessiner un schéma très simple et facile à comprendre de ce qu'est chaque section et de ce qu' elle doit inclure Par exemple, pour la page d'accueil, je mettrais littéralement une case tout en haut comme section héros et je dirais au client pourquoi il est ici. La section suivante serait une section consacrée au renforcement de la confiance. Ensuite, dans la section ci-dessous expliquerez ce que nous faisons réellement et ce que nous pouvons vous offrir. Cela donnera au client exactement ce qu'il veut dans la commande qu'il souhaite. Et vous pouvez le faire pour chaque section du site Web. Et si vous prenez le temps de décrire très rapidement l'expérience sur votre site Web avec de simples cases et du texte, vous pourrez finalement identifier les problèmes ou les défis particuliers avant de passer à la phase de développement du site Web, qui aura lieu problèmes ou les défis particuliers avant de passer à la phase de développement du site Web, plus tard. Par exemple, il est très facile de griffonner une boîte et de changer quelques éléments sur une feuille de papier avec un stylo Mais une fois que vous aurez consacré le temps et les efforts nécessaires à la conception de la section, puis à sa création sur votre site Web sur Webflow, il sera finalement beaucoup plus difficile de la modifier, et vous devrez peut-être revenir au début pour recommencer à zéro À ce stade, nous pouvons faire toutes les erreurs que nous voulons et expérimenter autant que votre cœur le souhaite, car il suffit de quelques secondes pour tout griffonner, recommencer et écrire une toute nouvelle structure avec un stylo et du papier Mais pour vous assurer que vous êtes sûr à 100 % du type de structure qui, selon vous, fonctionnera pour votre site Web en particulier, nous allons examiner quelques exemples dans la prochaine leçon où vous pourrez voir comment d'autres entreprises ont utilisé la structure de leur site Web pour réellement créer une expérience exceptionnelle pour leurs utilisateurs. Alors, avec notre Fellow Delay, plongeons-nous dans cette leçon, et je vous verrai très bientôt. 30. Création de site Web stratégique : définir vos objectifs: Pouvez-vous réellement utiliser des modèles de sites Web ou vaut-il la peine de créer votre site Web à partir de zéro ? Eh bien, la vérité est que vous pouvez faire les deux. Mais en ce qui concerne les modèles, comme je l'ai déjà montré à plusieurs reprises dans ce cours, plupart des sites Web sont déjà très similaires Ils suivent pour la plupart exactement la même structure. Et les principales différences sont les polices qu'ils utilisent ? Les couleurs utilisées, le logo et les images. À part cela, la plupart des sites Web sont assez similaires. Maintenant, une chose qui est très différente est la raison réelle pour laquelle le site Web existe. Ainsi, par exemple, vous avez des marques de commerce électronique, des marques personnelles, puis vous avez également des marques qui proposent une sorte de service ou de produit numérique. Ce sont en fin de compte les trois types de sites Web différents qui existent. Au moins les sites Web méchants que vous trouverez en ligne aujourd'hui. J'ai travaillé avec des milliers de fondateurs au cours de la dernière décennie, et nous finissons par créer sites Web très similaires, mais ils sont simplement différents du point de vue de l'image de marque. Maintenant, vous vous demandez peut-être, Scott, est-ce même possible ? Puis-je réellement créer un site Web sur un modèle qui ressemble à marque et qui me semble totalement personnel ? Eh bien, laissez-moi vous donner un exemple qui pourrait bien faire passer le message. Créer un site web, c'est un peu comme décorer une maison. Si vous utilisez un modèle. La maison est déjà construite. Vous avez déjà toutes les briques en place. Tout va bien d' un point de vue structurel. Tout ce que vous avez à faire est de vous donner un peu de mal, d'y mettre des meubles, et le tour est joué Maintenant, vous pouvez par tous les moyens construire une maison entièrement personnalisée ailleurs au milieu de la colline avec une belle vue, mais cela va coûter beaucoup plus et cela va prendre beaucoup plus de temps. Tout dépend donc de ce dont vous avez réellement besoin à ce stade de votre entreprise. Avez-vous besoin de quelque chose qui soit vraiment solide, vraiment digne de confiance et beau ? Ou avez-vous besoin de quelque chose de complètement personnalisé, ce qui va prendre beaucoup plus de temps et beaucoup plus d'énergie et de ressources financières. Cela dépend évidemment entièrement de vous, mais la majorité des fondateurs avec lesquels nous avons travaillé au cours de la dernière décennie ont choisi la première approche. Ils ont essentiellement pris un modèle de site Web fiable et bien structuré et l'ont utilisé pour créer leur propre site Web. Et comme vous pouvez le constater, il existe de nombreuses façons d'utiliser exactement le même modèle pour créer des sites Web complètement différents. Maintenant, ne vous inquiétez pas, car plus tard dans le cours, je vais vous montrer comment le modèle que vous devriez avoir téléchargé dès la première phase du cours pour en faire un site Web personnel parfaitement adapté à votre marque et un site Web personnel parfaitement adapté qui vous semble totalement unique. Cela vous fera économiser beaucoup de temps, beaucoup d'argent, et cela vous aidera également à créer facilement un site Web incroyable , sans tracas ni assistance Maintenant, évidemment, je vais être là pour vous soutenir, mais je tiens simplement à vous faire savoir que si vous voulez le faire vous-même, ce que vous êtes, vous pouvez le faire très facilement grâce toutes les étapes que nous avons décrites dans ce cours et à quel point elles sont bien structurées. Nous voulions créer la solution parfaite pour tous, quelle que soit leur expérience en matière conception ou de développement de sites Web. Créez un site Web dont ils pourront être vraiment fiers. Très bientôt dans le cours, nous allons aborder le Web Floor et apprendre à utiliser le Web Floor pour modifier le modèle, commençant par les images, en commençant par le texte, puis en prenant réellement le modèle et en le personnalisant. Donc, si vous n'avez pas déjà suivi les étapes de la troisième phase de ce cours, afin de configurer votre compte Web Floor, vous pouvez également obtenir votre modèle auprès de nous, afin que vous puissiez réellement commencer à créer votre site Web plus tard dans le cours. N'oubliez pas d'utiliser exactement le même e-mail pour l'inscription sur le flux Web et pour l'e-mail que vous nous envoyez, afin que nous puissions vous envoyer le modèle directement. Quoi qu'il en soit, je suis très heureuse de découvrir la plateforme Web Flow, est très facile à suivre Je vous verrai donc dans la prochaine leçon. À bientôt. 31. Webflow 101 : Paquets Webflow: Je voudrais donc prendre un peu de temps pour vous expliquer les différents packages de flux Web afin que vous puissiez déterminer lequel vous convient le mieux. Pour être tout à fait honnête, lorsque j'ai vu les tarifs de Webflows pour la première fois, j'étais un peu confuse quant à ce pour quoi je payais Ce n'était pas vraiment très simple, et je me demandais : OK, je paie vraiment beaucoup argent ici pour héberger mon site Web chez vous, mais qu'est-ce que j'en retiens réellement ? Maintenant, ce que vous obtenez réellement avec la plate-forme Web Flow lorsque vous créez votre site Web sur Webflow, pas seulement ce que vous obtenez dans le package, mais aussi l'expérience globale Ainsi, par exemple, cela dépend de la valeur que vous accordez à votre temps, mais au lieu de passer 10 heures à modifier quelque chose sur votre site Web, vous pouvez le faire en 5 minutes environ. C'est donc la première chose, qui est au moins très précieuse pour moi. Le fait qu'au lieu de vivre une situation longue et frustrante où je dois peut-être engager quelqu'un pour changer quelque chose, ou où je dois passer beaucoup de temps à me débrouiller Web Floor rend les choses super faciles et sans stress, ce que je ne suis pas sûre pour vous, mais pour moi, cela vaut la peine de payer quelques dollars de plus juste pour m' assurer pouvoir passer mon temps libre faire ce que j' aime vraiment faire, au lieu d' essayer de me battre avec un site Web vraiment difficile à gérer Maintenant, une autre raison pour laquelle tant de personnes utilisent Web Floor est leur soutien. Maintenant, leur support est de loin le meilleur support disponible sur toutes les plateformes que vous pouvez toutes les plateformes que vous pouvez utiliser pour créer un site Web. Je me souviens en fait d'un problème que j'ai eu avec site Web d' un client il y a peu de temps. Et quand j'ai reçu un e-mail sur le Web, ils ne m'ont pas simplement répondu avec une sorte de lien vers une page communautaire où je devais le découvrir moi-même Le gars de l'équipe de support Web Flow s'est rendu sur le site Web, a apporté le correctif, puis m' a montré comment il le faisait. En fin de compte, si cela ne vous dérange pas stressé et de perdre du temps, être stressé et de perdre du temps, d'autres plateformes vous conviendront parfaitement, et il peut être intéressant d'économiser quelques dollars juste pour avoir ce stress et ce temps supplémentaire perdu. Maintenant, si cela ne vous dérange pas d'être stressé et de perdre beaucoup de temps, alors, vous savez, économisez entre cinq et sept dollars sur une autre plateforme, qui pourrait vous convenir un peu mieux Personnellement, il n' y a rien de pire que de perdre beaucoup de temps à essayer de résoudre un problème et obtenir finalement un support vraiment moyen et de simplement me faire pointer vers des articles à lire alors que le problème pourrait être résolu en quelques secondes. C'est pourquoi j'adore web floor, car il vous donne littéralement beaucoup de temps libre, et il vous aide à obtenir le meilleur site Web possible avec le moins d'efforts possible, et avec un support VIP premium , que vous devriez déjà avoir si vous vous êtes déjà inscrit . En fin de compte, j'ai juste l'impression que Web Flow s'en soucie vraiment. Examinons donc les forfaits qu'ils proposent, et je pourrai vous expliquer lequel pourrait être le mieux adapté à votre situation particulière. Donc, si nous examinons les différents forfaits, ils proposent deux types de forfaits différents. L'un est donc général, qui uniquement les sites Web généraux, par exemple, si vous vendez un service ou si vous un blog ou peut-être même, vous savez, si vous créez un site Web de marque personnelle, ou s'ils ont l'option commerce électronique, qui est assez explicite. Maintenant, ce qui est génial, c'est que vous pouvez passer de l'un à l'autre. Ainsi, par exemple, vous pourriez commencer avec un forfait de base de 14$ par mois, puis une fois que vous êtes prêt à vendre un produit et que vous avez des produits prêts à être vendus, vous pouvez passer au forfait de commerce électronique et passer directement au forfait standard Vous générez donc des ventes dès que vous êtes prêt. Maintenant, pour le package de démarrage gratuit, vous êtes limité à un domaine Web flow uniquement. Cela signifie donc essentiellement que vous ne pouvez pas avoir brand name.com comme domaine Vous devez réellement payer l'hébergement afin de connecter un domaine personnalisé à votre site Web. Nous aurons en fait une leçon sur la façon de connecter un domaine personnalisé au site Web un peu plus tard, alors assurez-vous de rester à l'affût. Ainsi, dans le package de démarrage, nous obtenons en fait deux pages, 50 éléments CMS, qui, si vous ne savez pas ce que sont les éléments du CMS, sont essentiellement blog, des produits ou peut-être des projets sur lesquels vous avez travaillé du point de vue du service. Et vous recevez également 50 soumissions de formulaires à vie sur le site Web. Maintenant, 50 soumissions de formulaires signifient essentiellement que si quelqu'un essaie de vous contacter via la page de vos contacteurs, il finira par envoyer cette demande ou vous redirigera vers votre adresse e-mail Nous passons ensuite à la localisation, c' est-à-dire essentiellement si votre site Web apparaît sur un ordinateur français au milieu de Paris avec un utilisateur français, puis l'ensemble du site Web apparaîtra en français, ou s'il est en Allemagne, alors il est en allemand , s'il est ailleurs, alors ce sera une langue différente, etc. En ce qui concerne le trafic limité, cela signifie en fin de compte, pour le package de démarrage , que 1 000 visiteurs seront autorisés à accéder au site Web. Maintenant, il s'agit d'un site Web entièrement gratuit et Web Flow héberge entièrement gratuitement pour vous en ce moment, alors gardez cela à l'esprit, mais le 1 gigaoctet de bande passante signifie essentiellement que le site Web va se charger à une certaine vitesse Ce n'est peut-être pas le site Web qui se charge le plus rapidement que vous ayez jamais vu de toute votre vie, mais il se chargera avec succès. La bande passante est liée à de nombreuses autres choses, mais c'est la chose la plus importante que j'ai trouvée, du moins pour moi. Lorsque j'ai un site Web de démarrage, qui n'a pas encore été publié, et qu'aucun domaine personnalisé n' y est associé parce que je n'ai pas d'option jumelée ou de package jumelé associé à ce site Web en particulier. Le chargement prend un peu plus de temps. Veuillez donc garder cela à l'esprit car il se chargera plus rapidement. Une fois que vous avez obtenu l'un des packages pairs connectés au site Web Maintenant, si vous passez au forfait de base, c'est 14$ par mois, ce qui, pour être honnête, est un acier absolu Et pour cela, vous obtenez votre domaine personnalisé Quel que soit le domaine que vous avez pour votre marque, vous pouvez le connecter très simplement, et je vous montrerai comment procéder plus tard dans le cours. Vous obtenez 150 pages pour votre site Web, ce qui est suffisant. Mais une chose que vous n'obtenez pas dans ce package en particulier, ce sont les éléments du CMS. Nous allons maintenant passer en revue les éléments du CMS plus tard dans le cours de manière très détaillée. Nous allons donc vous montrer comment les utiliser efficacement pour vous simplifier la vie un million de fois. Maintenant, en ce qui concerne la soumission de formulaires, vous en recevez 500 par mois, ce qui est beaucoup. En ce qui concerne la localisation, vous bénéficiez d'un aperçu gratuit. Encore une fois, en France, cela sera affiché en français en Allemagne , en allemand, etc. Maintenant, en ce qui concerne le trafic modéré, nous obtenons essentiellement 50 gigaoctets de bande passante et 250 000 visiteurs, ce qui, pour être honnête, si vous venez de démarrer un site Web, cela devrait suffire Cela signifie également que votre site Web se chargera très rapidement et qu'il sera super pour vos utilisateurs. Maintenant, si vous passez au package CMS, c'est le package que j'ai pour presque toutes les entreprises que j'utilise avec Webflow Maintenant, si j'utilise le package CMS c'est parce que je veux me permettre d'ajouter très facilement des articles de blog, d'ajouter projets sur lesquels nous avons travaillé en ce qui concerne mon agence de marque, ajouter des produits. Par exemple, si je crée une marque de commerce électronique, tout est une question d'efficacité. Ainsi, au lieu d'avoir à créer une toute nouvelle page, il suffit d'ajouter quelques éléments dans le backend du site Web, et la page sera automatiquement créée pour vous l'aide de la fonction CMS. Maintenant, également avec l'option CMS, vous pouvez soumettre un formulaire KR à trois créateurs de contenu, afin que les gens puissent réellement vous aider à créer contenu sur votre blog ou peut-être sur la page de votre projet, ou bien sûr, quelle que soit la raison pour laquelle vous utilisez le site Web. Et pour le package CMS, vous bénéficiez de 200 gigaoctets de bande passante, ce qui inclut la vitesse de votre site Web, mais également la quantité de contenu que vous pouvez réellement télécharger sur votre site Web. Ainsi, par exemple, si j'ajoute des images ou des vidéos pour la page du projet, ces images en particulier finiront par occuper de la mémoire. Mais ils peuvent tous être stockés sur le site Web afin que le site Web se charge très rapidement. Maintenant, vous obtenez également 250 000 visiteurs avec ce package. Ensuite, nous passons essentiellement au package commercial. Maintenant, pour être tout à fait honnête, je ne connais personne qui aurait besoin du package commercial démarrer un nouveau site Web Personnellement, je resterais très simple. Donc, lorsque vous créez votre site Web, je le garderais peut-être sous forme package gratuit jusqu'à ce que vous ayez besoin d'ajouter plus de deux pages ou que vous deviez commencer à ajouter des éléments CMS dans plusieurs catégories. Encore une fois, si vous ne comprenez pas encore ce qu'est un CMS, nous aborderons tout plus tard dans le cours, mais cela vous sera très utile et une fois que vous l'aurez appris, cela vous fera perdre beaucoup de temps dans le futur. Mais une fois que le package gratuit est dépassé, l'option suivante se situe essentiellement entre le package de base et le package CMS Maintenant, pour simplifier les choses , si vous pensez que vous n'avez pas vraiment besoin un blog, que vous n' avez pas besoin d'ajouter de projets, et que vous n'avez pas besoin d'ajouter le même type de contenu encore et encore, comme par exemple des exemples de votre travail ou, vous savez, des avis de clients ou quelque chose comme ça où vous pouvez réellement gérer les choses de manière très efficace en un seul endroit placez, puis utilisez simplement le package de base. Tu n'as besoin de rien de plus que ça. Cependant, si vous voulez réellement ajouter un blog et simplement simplifier les choses le site Web, le package CMS ne coûte que 9$ de plus, et il vous fait gagner dix fois le temps qu'il faudrait si vous n' aviez que le package de base Maintenant, pour être totalement transparent, ces prix sont basés sur une facturation annuelle Vous ne paierez donc qu' une fois pour l'année complète, puis votre site Web sera actif pendant toute l'année sans interruption Mais si vous vouliez payer mensuellement, cela augmente légèrement. Juste quelques dollars, donc ce n'est pas une bonne affaire. Mais si vous voulez économiser le plus possible, vous pouvez économiser jusqu'à 22 % en payant simplement pour l'année à l'avance Maintenant, pour les marques de commerce électronique, les choses sont un peu différentes. Donc, si nous allons dans la section commerce électronique, nous pouvons essentiellement voir qu' il existe trois options. Il existe des versions standard, plus et avancées. Encore une fois, si vous débutez en tant que marque, je ne vous recommande pas de choisir l'option plus ou l'option avancée. La raison en est que vous ne devriez pas avoir plus de 500 articles de commerce électronique sur votre site Web au début. Personnellement, je vous suggère d'en avoir cinq à dix au maximum. Désormais, chaque package de commerce électronique comprend un niveau différent d' articles de commerce électronique , d'éléments CMS et quelques autres fonctionnalités, que nous allons examiner maintenant. Par exemple, les versions Standard Plus et Advanced proposent différents niveaux d'articles que vous pouvez réellement vendre sur votre site Web. Par exemple, le package standard en donne 500. Le plus donne 5 000$ à l'avance donne 15 000$. Encore une fois, je ne peux pas imaginer une nouvelle marque ou une nouvelle start-up vendant plus de 500 articles. Je suggère simplement de s' en tenir à la norme. En ce qui concerne les éléments du CMS, vous en obtenez 2 000, 10 000 ou 10 000. Et en ce qui concerne les frais de transaction, cela signifie simplement que chaque fois quelqu'un achète quelque chose sur votre site Web, vous serez facturé 2 % du montant payé. Et cela s'ajoute aux frais pL ou Stripe, qui prélèveront également une petite réduction sur tout ce qui est acheté. Désormais, le forfait standard facturera 2 %, puis les frais facturés par PayPal et Stripe, tandis que le forfait majoré à l' avance facturera en fin de compte exactement ce que Peer pL et Stripe facturent. y aura donc pas de prélèvement supplémentaire de 2 % si vous optez pour le forfait plus ou le forfait avancé. Maintenant, l'avantage de tous ces packages est qu'ils incluent tous les fonctionnalités du plan CMS. Donc, si nous nous souvenons, allons payer 23$ par mois n'importe où pour les packages CMS Maintenant, si vous y réfléchissez, c'est en fait un rapport qualité-prix , car pour le package CMS, vous payez 23$ par mois Cependant, si vous souhaitez passer à package de commerce électronique à un moment ou à un autre, vous pouvez obtenir le package standard, qui vous suffira à seulement 29$ par mois, soit littéralement 6$ de plus que le package CMS Vous bénéficiez donc de toutes les fonctionnalités du commerce électronique et de la possibilité de vendre des produits et services directement depuis votre site Web, pour 6$ de plus, ce qui n'est vraiment pas tant que ça Et un autre avantage lorsque vous payez chaque année avec commerce électronique, c'est que vous réalisez des économies stupides. Vous pouvez économiser jusqu'à 30 % sur ce que cela vous coûterait habituellement si vous payiez mensuellement. Maintenant, évidemment, c'est à vous de choisir package que vous jugez le meilleur. Mais si vous n'êtes pas sûr, n' hésitez pas à me contacter car je serais heureuse de vous donner des conseils ou de vous raconter une histoire ou deux sur ce qui m'est arrivé lorsque j'ai commencé à utiliser Web Floor, sur le package qui me convenait le mieux à l'époque et sur les packages que j'utilise actuellement pour mes sites Web, que j'ai sur la plateforme Web Floor. Comme toujours, je suis là pour aider et soutenir de toutes les manières possibles, alors ayez une amie formidable. Merci beaucoup pour le temps que vous m'avez accordé et je vous verrai lors de la prochaine leçon. 32. Webflow 101 : Webflow vs autres plates-formes: Maintenant, nous savons tous qu' il existe des tonnes de plateformes de création de sites Web différentes en ligne. Mais en fin de compte, il existe cinq plateformes principales Word Press, Square Space, Wicks, Shopify et évidemment Web Maintenant, cela est basé sur mon expérience d'utilisation de différentes plateformes de création de sites Web au la dernière décennie, en tant que propriétaire de mon agence Brannan Clementine House Maintenant, lorsque j'ai utilisé ces différentes plateformes, j'ai l'impression de me retrouver dans situations vraiment délicates avec les clients parce que la plateforme m'a déçue. Et ce que je veux partager avec vous dans cette leçon, c'est simplement mon expérience personnelle basée sur les différentes plateformes que j'ai utilisées et pourquoi certaines sont bonnes et d'autres moins bonnes. Maintenant, je veux commencer par WordPress, car WordPress existe depuis très, très longtemps. Et en fin de compte, c'est la plus ancienne de toutes les plateformes de création de sites Web. Cela signifie en fin de compte qu'un large éventail de personnes utilisent la plate-forme. Mais en réalité, du point de vue de la maintenance, c'est ce qui m'a le plus dissuadé de WordPress. La raison en est que pour changer quelque chose de très simple, vous devez peut-être cliquer sur dix boutons différents puis le modifier, puis le sortir, l' enregistrer, puis le mettre à jour avec différents plugins et plein d'autres éléments compliqués, ce qui le rend vraiment difficile à gérer Donc, en gros, si vous devez gérer le site Web de manière très cohérente, encore et encore, il vous faut beaucoup de temps pour changer quelque chose, cela n'en vaut pas vraiment la peine pour moi. Je veux quelque chose qui me fasse gagner beaucoup de temps , qui soit vraiment facile à utiliser et qui ne nécessite pas de code personnalisé pour créer le site Web et modifier quoi que ce soit parce que, oui, vous pouvez utiliser des thèmes faciles à créer, où vous pouvez simplement les connecter au site Web de Word Press, , qui soit vraiment facile à utiliser et qui ne nécessite pas de code personnalisé pour créer le site Web et modifier quoi que ce soit parce que, oui, vous pouvez utiliser des thèmes faciles à créer, où vous pouvez simplement les connecter au site Web de Word Press, et c'est finalement bon, et vous pouvez simplement modifier le Mais ce que vous pouvez faire sur cette plateforme en particulier est très restrictif . Par exemple, si vous avez deux sites Web différents qui utilisent exactement le même thème, afin de modifier ces deux sites Web, vous devez connaître le code personnalisé pour leur donner un aspect unique. Ce que j' aime dans Web Floor, c'est le fait que vous n' avez pas besoin de code personnalisé. Personnellement, je ne connais pas une seule ligne de code, mais je sais comment utiliser la plateforme Web Floor pour la laisser s' occuper du codage et du travail à ma place Maintenant, il y a Square Space et Wicks, et si je combine les deux , c'est pour plusieurs raisons Donc, d'abord et avant tout, Square Space est un peu plus réactif que Wicks J'ai vu de nombreux exemples avec Wicks, où le site Web n' est pas très réactif, et cela signifie essentiellement que si je regarde un site Web sur mon ordinateur de bureau, il est peut-être beau Mais si je le regarde sur mon téléphone portable, il est loin d' être aussi beau. Et c'est un énorme problème. Et je ne dis pas qu'il est impossible d' obtenir un site Web réactif sur Wicks, mais ce que je veux dire, c' est qu'il est très difficile de le faire et difficile de le faire et de le faire d'une manière qui soit vraiment belle Si je préfère Web Floor c' est parce qu'ils simplifient les choses, et leur système qui garantit la cohérence du site Web sur tous les appareils et sur tous les types d'écran me donne l'assurance que les personnes qui consultent réellement les sites Web que je et leur système qui garantit la cohérence du site Web sur tous les appareils et sur tous les types d'écran me donne l'assurance que les personnes qui consultent réellement les sites Web que je crée vivront une expérience formidable, soit l'endroit où elles consultent le site Web. Maintenant, une chose que Square Space et Wicks ont en commun, c'est qu'ils migrent vraiment mal vers le référencement, moins d'après mon expérience J'ai créé des tonnes de sites Web sur Square Space et Wicks il y a de nombreuses années avant découvrir Web Floor Et la réalité est que je n'ai jamais réussi à créer un seul site Web construit sur espace carré ou sur la première page de Google Maintenant, cela est simplement dû au fait que le code utilisé ces plateformes particulières est parfois trop compliqué pour que Google le comprenne. C'est du moins ce qu' on m'a dit lorsque j'ai parlé à un expert en SU qui m'a parlé un peu des différentes plateformes et des avantages et inconvénients de chacune d'elles. Webflow, cependant, m'a permis de placer très facilement tous les sites Web que j'ai créés la première page de Google ou assez près Et cela consiste simplement à assurer que les articles de blog et tout ce que j'ai réellement mis sur le site Web étaient correctement structurés, et le flux Web rend cela très simple. La seule autre plateforme de création de sites Web , un peu différente de Word Press, Wicks et Square Space, est finalement Shoppi Désormais, Shopper fi est une plateforme purement axée sur le commerce électronique. Donc, en fin de compte, il ne sert à rien d'utiliser Shop fi à moins que vous ne vendiez réellement un produit. Maintenant, je dois être totalement transparent avec vous. Cela vous donne beaucoup de données pour vous aider à créer votre site Web et à l'améliorer un peu au fil du temps. Cependant, le logiciel de suivi comportemental, que je vous ai donné dans la première phase de ce cours, va littéralement vous aider à réaliser exactement la même chose. La seule différence est que vous pouvez réellement voir la souris de l'utilisateur qui se trouve réellement sur votre site Web, sorte que vous pouvez voir exactement ce qui le pousse à cliquer et ce qui l'empêche de cliquer. Vous pouvez littéralement réaliser à peu près exactement la même chose sur Web Flow. La seule différence, et l'un des gros points qui m'agace vraiment parfois à propos de Shopify, c'est que Shopify est encore une fois très restrictif, un peu comme Word Press, Wicks et Square Space du point de vue du design Vous devez d' abord et avant tout payer environ 350$ pour obtenir un très bon modèle Et puis, lorsque vous obtenez ce modèle, il n'a pas l'air très beau. La plupart des sites Web ont l' air plutôt grincheux, ils ne brillent pas vraiment et ils n'ont pas l'air vraiment uniques Cela peut finalement donner à la plupart des marques un aspect très générique. Et à peu près pareil. Et finalement, pour moi, cela n'en valait tout simplement pas la peine. Je voulais un modèle dans lequel je pourrais simplement ajouter mes propres petites touches uniques et vraiment créer une expérience de marque unique pour mes clients Et Web Floor vous y aide. Et une autre chose qui m'a vraiment ennuyée à propos de Shop offi, c'est que peu importe l'adhésion ou le forfait que vous choisissez avec Shop offi, ils vous facturent toujours Maintenant, j'ai eu la chance de devoir essayer toutes les plateformes au fur et à mesure de leur sortie. Et pour être honnête, c'est le web floor que j'utilise depuis que je l' ai découvert pour la première fois il y a quelques années. Je l'utilise littéralement depuis. Et maintenant, on me demande littéralement de créer sites Web pour des clients sur différentes plateformes, et j'insiste pour ne m'appuyer que sur le flux Web, simplement parce que cela nous fait gagner beaucoup de temps lorsque nous créons des sites Web pour les clients. Cela aide les clients à gérer les sites Web beaucoup plus facilement, en leur faisant gagner du temps et en réduisant le temps nécessaire pour les former à la gestion effective du site Web. Et parce que nous pouvons créer les sites Web beaucoup plus rapidement, et pour être honnête, le flux Web est tellement plus amusant à utiliser. nous pouvons créer des sites Web personnalisés d'une apparence incroyable En fin de compte, nous pouvons créer des sites Web personnalisés d'une apparence incroyable pour une fraction du coût par rapport à Shopify, Wick, Square base ou WordPress Quoi qu'il en soit, je comprends que vous devez prendre la décision en fonction de la plateforme qui vous convient le mieux, et je respecte pleinement la décision que vous prenez. Tout ce que je peux dire, c'est que j'ai essayé toutes les principales plateformes de création de sites Web en ligne, et Webflow est apparu sur celui les principales plateformes de création de sites Web en ligne, de Trump à chaque fois de vue du design, c'est principalement grâce à la liberté dont vous disposez pour créer quelque chose d'unique pour vous. Non seulement cela, mais c'est surtout le temps de gérer le temps créer un site Web incroyable et le gérer en un rien de temps pendant la semaine. C'est donc le plus important pour moi personnellement. Je ne sais pas à quel point c'est important pour vous, mais je veux pouvoir créer ce que j'imagine afin de créer le site Web qui convient le mieux à la marque. Ensuite, l'avantage secondaire pour moi est de m'assurer gagner le plus de temps possible lors de la création du site Web Webflow se met à jour automatiquement Contrairement à WordPress, par exemple, lorsque vous devez mettre à jour tous vos plugins et vous assurer que tout fonctionne toujours, Webflow fait tout seul Sans oublier que Webflow propose également un support premium incroyable Si vous vous êtes déjà inscrit à la première phase du cours, vous bénéficierez déjà de votre support VIP gratuit. Enfin, Webflow est tellement amusant à utiliser. C'est littéralement tellement immersif, et vous pouvez littéralement créer ce que vous voulez une fois que vous avez maîtrisé la plateforme. Et cela ne prendra pas très longtemps, et nous allons littéralement commencer à habituer à la plateforme et différents petits outils que vous pourrez utiliser dans les prochaines leçons. Quoi qu'il en soit, je suis très heureuse de commencer et de commencer à créer votre site Web Je vous verrai donc dans la prochaine leçon. 33. Webflow 101 : comprendre les points d’arrêt: Qu'est-ce que la réactivité d'un site Web ? Eh bien, la réactivité du site Web est essentiellement le fait que le site Web s'affiche parfaitement sur tous les écrans et appareils auxquels vous pouvez penser Cela inclut un ordinateur de bureau, un écran mobile, un iPad, à peu près tous les écrans auxquels vous pouvez penser. La réactivité d'un site Web peut sembler un peu effrayante si vous ne l'avez jamais fait auparavant, mais c'est vraiment simple, et c'est rendu très simple, en particulier dans le flux Web grâce à l'utilisation de points d'arrêt La question est de savoir quels sont les points de rupture, si vous ne les connaissez pas déjà Eh bien, un point d'arrêt est essentiellement un certain point dans les dimensions d'un site Web où celui-ci s'adapte à un écran différent pour s' assurer qu'il reste toujours incroyable Ne t'inquiète pas. Nous allons nous assurer que l'ensemble du site Web que vous créez dans le cadre de ce cours est entièrement réactif sur tous les appareils Je vais vous montrer comment procéder , et c'est très simple. Mais dans cette leçon, je veux simplement vous montrer ce qu'est un point d'arrêt, et aussi comment comprendre comment configurer des points d'arrêt afin que vous sachiez quoi faire plus tard dans le futur En fin de compte, le point d'arrêt devrait déjà être installé dans votre modèle, vous ne devriez donc pas avoir à vous en soucier du tout Mais il est très important que vous compreniez exactement ce que sont les points d'arrêt, afin de savoir à quoi vous attendre à l'avenir. Examinons donc quelques exemples de sites Web de marques que nous connaissons et aimons. Ainsi, nous pouvons finalement comprendre exactement ce que sont les Breakpoints et leur impact sur l'expérience sur le site Web Examinons donc le site Web de Tesla et voyons comment leur site Web s'adapte aux différents appareils. Donc, si vous allez sur le site Web, nous pouvons voir que si nous commençons à adapter la taille de l'écran, les choses commencent à changer un peu. Vous pouvez voir ici qu'il y a un point d'arrêt où la barre de navigation se transforme en barre déroulante. Si nous le prenons ici et que défiler la page vers le bas. C' est un point critique Vous pouvez voir ce petit point d'arrêt se produire lorsque la barre de navigation se transforme en ce type de menu, très facile à voir Maintenant, c'est la même chose pour peu près tous les sites Web. Ils ont tous des points de rupture différents. En utilisant simplement cette méthode très simple, vous pouvez voir à quoi ressemblera votre site Web sur un ordinateur de bureau. À quoi ça va ressembler sur un iPad, puis aussi à quoi ça va ressembler sur un téléphone portable. Et avec Web Flow, il est très simple de rendre votre site Web réactif sur n'importe quel appareil. Et nous vous montrerons comment procéder un peu plus tard dans le cours. Mais examinons un autre exemple le site Web de Nike pour voir comment leur site Web se brise à certains points de rupture afin de s'adapter aux différentes tailles d'appareils. Par exemple, ici, nous avons un beau grand écran, et au fur et à mesure que nous commençons à l'adapter, vous pouvez voir que cette image en particulier commence à devenir un peu plus petite. Et tout a commencé avec DAP More. Vous pouvez voir que la barre de navigation devient un peu plus petite, et nous voyons ici qu'il s'agit d'un point de rupture où le menu change. L'image réelle devient ici cette image à ce point de rupture, et nous voyons également que la barre de menu ici devient un menu Hamburger Encore une fois, chaque site Web suit la même structure. Et dans ce cours, nous allons vous montrer comment créer un site Web adaptatif. Alors ne vous inquiétez pas, tout cela est très simple et facile à comprendre tant que vous suivez les étapes de ce cours. Enfin, regardons le site Web d'Apple. Maintenant, le site Web d'Apple, évidemment, nous savons tous qu'Apple est incroyable. Ils vendent leurs produits et font en sorte que tout soit super sexy, même les AirPods, n'est-ce pas ? Maintenant, lorsque nous examinons leur site Web actuel, nous pouvons voir que, par exemple, nous avons six fenêtres différentes ici, une, deux, trois, quatre, cinq, six. Voyons maintenant comment ils s'adaptent à mesure que nous changeons la taille de l'écran. Ceci n'est qu'un exemple pour vous montrer comment Apple crée d'autres types de sections sur le site Web. Maintenant que nous voyons ici, nous avons un ordinateur de bureau, qui a l'air génial. Maintenant que nous l'adaptons et que nous le réduisons un peu, vous pouvez voir qu'ils sont un peu écrasés, mais qu'ils sont toujours dans la même formation Puis, au fur et à mesure que nous le faisons défiler vers le bas, nous attendons le point d'arrêt, et bien sûr, il est là Nous pouvons donc voir qu' au sein du point d'arrêt, le point d'arrêt se produit ici, où finalement le texte du dessin change Vous pouvez donc voir la taille du texte ici, puis au fur et à mesure qu'il atteint une certaine taille, la taille du texte change car il est plus petit, c'est un appareil plus petit. La taille de l'écran est plus petite. Nous avons donc besoin que le texte soit adapté à la taille de l'écran sur lequel il est affiché. Maintenant, si nous le faisons défiler encore plus vers le bas, vous pouvez voir que quelque chose d'autre va changer. Structure réelle de chaque carré. Nous avons en fait modifié la structure des carrés. Ainsi, par exemple, auparavant, nous en avions un, deux, trois, quatre, cinq, six en rangées de deux. Mais maintenant, si nous passons à la version mobile, nous en avons un, deux, trois, quatre, cinq, six, mais dans la même rangée. Maintenant, chaque bloc est empilé les uns sur les autres, car si nous l'avions dans sa forme originale, nous avons montrée auparavant, qui était conçue pour celle que nous avons montrée auparavant, qui était conçue pour une tablette ou un ordinateur de bureau, il ne rentrerait pas Il doit donc y avoir ce point d'arrêt pour que le contenu s'adapte à l'écran du téléphone portable Vous pouvez désormais utiliser exactement même approche avec votre site Web pour tester la manière dont le contenu interagit avec différents points d'arrêt Il s'agit simplement de voir si vous avez un petit aperçu de la façon dont Web Flow rend cela très facile Vous pouvez voir ici que ce sont vos différents points de rupture Voici donc votre point d'arrêt de base. Il s'agit donc en fin de compte de l'écran le plus moyen que les gens utiliseront. Ensuite, lorsque vous passez à un écran plus grand, cela ressemble finalement à un téléviseur, par exemple, si le site Web est visionné un téléviseur ou même sur un grand écran comme celui-ci. Et puis, au fur et à mesure que vous descendez, vous pouvez voir que vous avez une tablette , un téléphone paysage, puis un téléphone portable portrait. avantage du flux Web est que si vous modifiez quelque chose au point de base, cela affecte également les autres éléments de chaque côté. Cela facilite donc les choses, sorte que vous n'avez pas à repenser le site Web sur chaque appareil Il vous suffit de le modifier immédiatement, puis d'ajuster les choses au fur et pour que le site Web soit absolument parfait, quel que soit l' appareil sur lequel vous le consultez. Quoi qu'il en soit, nous allons bientôt nous pencher sur la création de votre site Web. J'ai donc hâte de vous voir lors de la prochaine leçon. Je t'y verrai. 34. Webflow 101 : le modèle de boîte: OK, alors quel est le modèle de boîte en ce qui concerne le sol Web ? Eh bien, si vous regardez la leçon précédente, vous saurez que j'associe la section, le conteneur et le diblock en un seul système J'aime bien appeler cela le système domestique, car si vous considérez que le terrain est la section, le conteneur étant la maison, puis les blocs étant les différentes pièces de cette maison, vous pouvez comprendre très rapidement vous pouvez comprendre très rapidement comment utiliser correctement chaque élément. Permettez-moi simplement d'expliquer cette section de tarification sur mon site Web pour vous montrer ce que je veux dire. Maintenant, cette section est en fait assez compliquée et il m'a fallu un peu de temps pour la construire. Eh bien, vous n'aurez jamais besoin de construire quelque chose comme ça. Mais si c'est le cas, faites-le moi savoir, et je serais ravie de vous aider et de vous soutenir. Maintenant, ce que vous pouvez voir, c'est que dans chaque bloc din, ces blocs di sont organisés sous la forme d'une grille, qui sera abordée un peu plus tard sur le parcours. Mais chaque bloc di et grille sont structurés dans un conteneur, puis ce conteneur est ensuite structuré dans une section. Comme vous pouvez le constater, en utilisant des sections comme terrain, des conteneurs comme page d'accueil, puis des blocs de division dans le conteneur pour créer plus de structure, vous pouvez créer des sites Web hautement réactifs qui vous permettront d' obtenir un site Web vraiment professionnel, peu importe où votre visiteur le consulte. Donc, si vous pensez toujours à utiliser les sections, les conteneurs et les blocs dI de cette manière, vous aurez toujours un site Web bien structuré qui peut être réactif sur tous les appareils sur lesquels le visiteur peut le voir. Prenons un autre exemple pour bien faire comprendre à quel point il est important d'utiliser la il est important d'utiliser méthode des boîtes et, en fin de compte, d'utiliser des sections, des conteneurs et des blocs de plongée de cette manière. Comme vous pouvez le voir ici, nous avons une section. Maintenant, dans cette section, nous avons un conteneur, qui se trouve à l'intérieur de la section, qui se trouve dans le corps, puis dans ce conteneur, nous avons également des blocs di. Ces blocs d' immersion sont donc appelés différemment parce qu'ils ont d'autres fonctions qui leur sont connectées ? Vous ne connaissez même pas encore ce dh, mais c'est exactement la même approche. Nous avons des blocs d'immersion à l'intérieur du conteneur, et le conteneur se trouve à l'intérieur de la section. En créant la structure, vous vous assurez que chaque site Web que vous créez et chaque section que vous créez sont correctement structurés. Et en structurant correctement votre site Web, vous pouvez ensuite créer des points de rupture efficaces au sein de votre site Web pour assurer que, quel que soit l'appareil sur lequel votre site Web est consulté, il a toujours un aspect fantastique Nous allons maintenant utiliser des blocs, des conteneurs et des sections di dans les leçons suivantes. Alors ne vous inquiétez pas si cela n'a pas encore tout à fait du sens ? Nous aborderons tout très bientôt. 35. Webflow 101 : Sections: Au cours des prochaines leçons, nous allons utiliser des sections, blocs d' immersion et des conteneurs pour finalement créer quelque chose de vraiment simple comme celui-ci. Je vais maintenant vous montrer chaque étape du processus afin que vous puissiez suivre. J'aimerais donc vraiment que vous puissiez me suivre tout au long du cours afin de savoir exactement ce que l'on ressent lorsque l'on crée quelque chose de vraiment simple comme cette section ici. Pourquoi commençons-nous ? Eh bien, nous commençons toujours par ajouter une section suffit donc d'aller ici pour ajouter Il suffit donc d'aller ici pour ajouter une section et de la faire glisser vers le bas, et vous voyez cette ligne bleue en bas, c' est là que la section va atterrir. Nous l'abandonnons donc, et vous pouvez voir que nous avons maintenant une section. Première étape, c'est fait. Maintenant, dans cette section, nous devons ajouter un conteneur, car le conteneur permettra au contenu de ce conteneur d'être réactif à tout moment, et il permettra de maintenir les choses en place. Alors, comment s'y prendre ? Eh bien, nous retournons à la case « plus », puis nous ajoutons un conteneur, et nous le déposons dans la section, vous pouvez le voir ici, il entre la section et nous le déposons dedans. Parfait. Maintenant, nous avons notre conteneur et nous l'avons dans une section. Maintenant, nous pouvons voir que tout est en ordre. Nous savons donc que tout est en place, pourquoi y a-t-il autant de place en haut de cette section et en bas ? Pourquoi est-ce que ça ressemble à ça ? Pourquoi le nôtre a-t-il l'air plutôt plat ? Eh bien, tout cela se résume à une petite chose appelée rembourrage, et vous pouvez ajouter du rembourrage aux conteneurs, aux blocs de di et aux sections Maintenant, le rembourrage est très important pour le développement d'un site Web car vous pouvez créer de l'espace entre les différents éléments Et encore une fois, cela peut être utilisé dans des blocs, des conteneurs ou des sections. Mais pour cet exemple en particulier, étant donné que nous nous concentrons sur les sections cette leçon en particulier, je voulais vous montrer qu' en ajoutant 75 pixels de rembourrage en haut et en bas, nous commençons à obtenir l' apparence que nous recherchons dans la section que nous essayons de créer Maintenant, évidemment, vous pouvez créer un peu plus, ou vous pouvez créer un peu moins, mais tout dépend de l'espace que vous voulez réellement. Mais si nous voulions vraiment être très précis en copiant une certaine section, nous pourrions simplement cliquer sur la section, et bien sûr, elle fait 80 pixels par côté, puis 30 pixels de chaque côté à gauche et à droite. Donc, si nous voulions copier cela, nous pouvons simplement passer à 80, 80, puis 3030 Alors maintenant, notre section a exactement le même rembourrage que la section ci-dessus Mais pourquoi est-ce que ça a toujours l'air différent ? Eh bien, tout dépend des éléments qui se trouvent à l'intérieur du conteneur. Pour le moment, ce conteneur contient des éléments. Celui-ci est vide. La section elle-même ne s'étend donc pas manière organique pour s'adapter aux éléments de la section. C'est juste très plat. n'y a rien là-dedans. Nous devons donc commencer à ajouter des éléments, ce que nous ferons dans la prochaine leçon. Maintenant, une autre chose que vous vous demandez peut-être est pourquoi notre section est-elle blanche ? Pourquoi n'est-il pas de la même couleur que celui-ci ? Eh bien, en général, chaque fois que vous ajoutez une section conteneur, un bloc de plongée ou tout autre élément à un site Web, il est blanc par défaut. Alors, comment changer la couleur ? Eh bien, vraiment très simple. Donc, si vous voulez exactement la même couleur que celle-ci, nous pouvons cliquer sur cette section, puis descendre ici. Ensuite, nous allons simplement voler ce code, le copier et le coller, puis sélectionner notre section et coller ce code particulier dans cette section. Et puis, comme par magie, nous avons exactement la même section, exactement le même rembourrage et exactement la même couleur Dans les prochaines leçons, nous allons aborder les conteneurs et les blocs d'embouts et terminer ce petit exercice que nous sommes en train de faire. Je vous verrai donc dans la prochaine leçon. 36. Webflow 101 : Récipients: OK, nous avons donc créé notre section, et maintenant nous avons un conteneur ici, que nous devons remplir avec certains éléments. Pour ce faire, nous devons commencer à ajouter une forme de blocs DID pour finalement commencer à organiser la section de manière à ce qu'elle ait une apparence professionnelle, et elle copie exactement la même section que celle que nous avons ici. Maintenant, il existe de nombreuses façons créer cette section, mais je veux vous montrer la meilleure méthode et la manière la plus efficace que j' utiliserais personnellement si je créais ce site Web pour un client. Et la première chose que je ferais serait d'ajouter une grille. Maintenant, la grille passe à l'intérieur de la colonne comme suit. Et à l'intérieur de la grille, je supprimerais essentiellement la section inférieure. Nous n'avons donc plus que les deux sections supérieures. Maintenant, la prochaine chose que je vais faire est de commencer à modifier la taille de l'écart ici. Je veux donc que les choses soient bien alignées afin qu'il y ait suffisamment d'espace pour que l'image et le texte soient séparés. Une fois que j'en serai satisfait, j'appuierai sur OK. Maintenant, nous avons le réseau, et tout semble très bien rangé et très beau Maintenant, à ce stade, je veux commencer à ajouter mes blocs de div, et je les ajoute simplement en les déposant dans la grille. Maintenant, j'ai ajouté un diblock ici. Maintenant, je vais ajouter un petit sélecteur de style et l'ajouter sous forme de texte Ce sera donc mon texto. Ensuite, je vais ajouter un autre bloc dI ici, qui sera mon image. Nous avons donc maintenant du texte, une image dans une grille, qui se trouve ensuite dans un conteneur, qui se trouve ensuite dans une section. OK, nous sommes donc arrivés à un point où nous avons nos blocs dI, nous les avons nommés. Nous avons également une grille dans un conteneur dans une section, et elle ressemble beaucoup à cette section, mais il y a une chose qui manque, ce sont les éléments réels de l'image, du texte et du bouton. Nous pouvons maintenant le faire de deux manières. La première est que nous pourrions simplement copier et coller cette image exacte dans ce bloc di particulier. C'est une façon de le faire, mais nous ne voulons pas être paresseux. Je vais donc vous montrer étape par étape. Et pour être tout à fait clair, nous pouvons également le faire avec du texte si nous le voulions. C'est vraiment simple. Tout ce que vous avez à faire est de copier-coller, comme si vous modifiiez un document Word. Vous pouvez l'essayer et expérimenter un peu, mais c'est aussi simple que cela. Maintenant, je vais vous montrer comment le construire à partir de zéro, afin que vous sachiez réellement comment le construire de première main Mais lorsque vous utilisez le flux Web, n'ayez pas peur d'utiliser la fonction copier-coller. C'est pour cela qu'il est là pour vous faire gagner du temps et économiser de l'énergie. Vous n'avez donc pas à refaire la même chose encore et encore. Mais débarrassons-nous de ces trois éléments, et nous reviendrons à notre point de départ. La prochaine étape consiste donc à commencer à remplir nos deux blocs D. Et c'est exactement ce que nous allons faire dans la toute prochaine leçon. Je t'y verrai. 37. Webflow 101 : Div Blocks: OK, nous avons donc notre section. Nous avons notre container. Nous avons notre grille à l'intérieur du conteneur, et à l'intérieur de la grille, nous avons deux blocs d, l'un nommé texte et l'autre nommé image. Commençons maintenant par la zone d'image pour le faire en premier, car c'est la solution la plus simple. Maintenant, pour ajouter une image dans cette boîte en particulier, nous devons cliquer sur le petit bouton plus, descendre à l'image, puis déposer l'image dans cette boîte avec le dragon . Nous avons donc maintenant notre bloc dI avec une image à l'intérieur. Maintenant, pour ajouter une image à cette boîte d'image particulière, nous devons cliquer sur le Little Cog Choisissez une image. Ensuite, nous arriverons à cette boîte où nous pouvons glisser-déposer des fichiers, où nous pouvons ajouter différentes images. Maintenant, c'est juste que le stock est un espace réservé, nous allons donc ajouter quelque chose d'un peu plus intéressant Donc, si nous cliquons sur le bouton de téléchargement, cela passe à notre écran d'accueil, et je vais ajouter cette belle photo d'un cygne. Nous cliquons donc sur Ouvrir. Il ajoute le cygne, et bien sûr, une fois que le cygne est chargé, il est ensuite appliqué à la section. Pour être honnête, je ne sais pas si c'est un swanlo ou un canard, mais disons simplement que c'est un oiseau très séduisant OK. Nous avons donc maintenant notre image définie. Comment commence-t-on à ajouter du texte de l'autre côté de la section ? Eh bien, c'est très simple. Commençons par le haut et descendons. Maintenant, si nous inspectons cet élément ici, vous pouvez voir qu'il utilise les paramètres de typographie suivants : aérien, 700 caractères gras, taille 38 et hauteur 44 Nous avons également le code couleur ici, qui est 333, et son alignement est à gauche. Ajoutons donc un titre. Texte vers la section. Et pendant que nous y sommes, nous pouvons également ajouter le texte du paragraphe, car cela sera nécessaire ensuite Nous l'ajoutons donc simplement en dessous, comme vous pouvez le voir, de la ligne bleue. Et après cela, nous pouvons également ajouter le bouton, ce qui peut être fait comme ça. Maintenant, ils se ressemblent beaucoup en ce moment, mais comment pouvons-nous les rendre identiques ? Eh bien, la première chose à faire est de s'assurer que les en-têtes utilisent les mêmes caractères et principes, donc Aerial 738 44 est parfait, exactement pareil Donc, si nous copions et collons ce texte, il devrait sembler identique. Bien sûr, c'est le cas. Mais changeons cela car ce texte est assez ennuyeux. Les cygnes sont géniaux. Exclamation, Mark. Génial. Encore une fois, je ne sais pas si c'est un cygne de Dock. Je suis juste en train de le diffuser. Maintenant, en ce qui concerne le texte suivant, vous pouvez voir qu'il s'agit d' Arial 400 normal 14 20. Voyons donc ici, Aerial 400 normal 14 20. Maintenant, je pense que nous sommes tous d'accord pour dire que c'est beaucoup de texte à lire, et même cela, c'est beaucoup à digérer pour un utilisateur. Alors changeons un peu les choses et disons simplement que les cygnes sont beaux, mais ils peuvent aussi être un peu méchants parfois Maintenant, nous avons ce texte, mais il est un peu petit, non ? C'est un peu difficile à lire sur ordinateur. Alors allons-le un peu plus grand pour pouvoir simplement ajouter ceci. Nous pouvons l'ajouter un peu différemment en ce qui concerne le plaisir. Ajoutons donc ceci sous le nom de Monsa peut-être. Allons le rendre un peu plus léger. Ça a l'air génial. Nous aborderons maintenant la typographie un peu plus tard, mais je veux juste vous donner un petit aperçu de la façon dont vous pouvez utiliser la typographie pour vraiment faire briller votre contenu Maintenant, comme vous pouvez le voir ici, c'est encore un peu difficile à lire. Donc, ce que je vais essentiellement faire, c'est parce que j'ai augmenté la taille du texte. Votre hauteur doit être d'environ 1,5 fois la taille du texte. Je vais donc le mettre à 30, ce qui en donne un peu plus, mais je vais en fait le réduire un peu et le porter à 28 parce que un peu et le porter je pense que c'est mieux. OK, parfait. Maintenant, comme vous pouvez le constater, notre section est un peu plus belle, et elle est également d'une bonne taille , exactement comme l'exemple que nous avions donné au début de la leçon. Maintenant, une chose qui m'a un peu agacée, c'est le fait que ce bouton soit d'une couleur vraiment étrange Maintenant, je veux le rendre super propre et super professionnel, comme dans cet exemple. Alors, comment dois-je m'y prendre ? Eh bien, la première chose que je vais faire est cliquer sur le bouton lui-même. Ensuite, je dois également m' assurer que la couleur est exactement la même que celle du bouton ici ? Copiez-collez cela ici. Cela devrait donc être Arial 412 20. Parfait. Et puis, si je clique sur Rejoindre le Swan Club, vous pouvez voir que cela commence à ressembler beaucoup plus au bouton ci-dessus, mais qu'il est tout de même très différent. Alors pourquoi est-ce que ça a l'air différent ? Eh bien, il y a deux choses principales en jeu ici. La première chose est le texte lui-même. Donc, bien que le texte soit exactement le même que l'Aerial 400 normal 12 20, puis l'Aerial 400 normal 12 20, il y a quelque chose de différent. Et cela se trouve dans les options de type plus nombreuses. Donc, là où vous pouvez voir que l'espacement des lettres est normal, l'espacement des lettres ici est Donc, si nous ajoutons un espacement entre deux lettres ici, cela ressemblera beaucoup plus à l'exemple ci-dessus Maintenant, cela semble très similaire, mais il y a quand même quelque chose de très différent entre les deux boutons. Pourquoi ça ? Est-ce la quantité de texte ? C'est possible, mais ce n'est pas le principal facteur. Le principal facteur ici est le rembourrage à l'intérieur du bouton. Vous souvenez-vous quand nous avons ajouté du rembourrage à la section pour lui donner un peu d'espace pour respirer ? Eh bien, il est très important que vous le fassiez également avec les boutons, car là où ce bouton possède actuellement 15 et 9 rembourrages, il en a 12 et 25 Maintenant, c'est un très bon ratio à utiliser pour la plupart des boutons. Mais l'une des choses les plus importantes à faire est vous assurer de conserver le même ratio, veillant à ce qu'il soit cohérent sur l' tout en veillant à ce qu'il soit cohérent sur l'ensemble de votre site Web. Maintenant, c'est un très bon ratio d'utilisation. Donc, si nous utilisons essentiellement ce ratio sur l'ensemble de notre site Web, cela devrait sembler assez cohérent ? Et très agréable à regarder. Donc littéralement 25, 12, 25 et 12. Vous pouvez voir maintenant que la pièce située à l'intérieur du bouton a beaucoup d'espace pour respirer. Cela semble beaucoup plus esthétique, et nous aborderons la création de boutons un peu plus tard dans le cours Mais pour cet exemple en particulier, je voulais juste vous montrer comment créer un bouton vraiment simple et pourquoi ce bouton est très différent de celui-ci. En fin de compte, nous voulons créer la meilleure expérience visuelle pour nos utilisateurs. Et la création d'un bouton, qui semble en fait très attrayant au clic, vous aidera à obtenir meilleures performances et un meilleur taux de conversion sur votre site Web. Maintenant, je suis plutôt content de l'apparence des choses. Mais si vous regardez cette section et cette section ici, il y a encore quelque chose qui ne va pas. Maintenant, dans ce bloc di particulier, que nous avons exposé il y a quelques leçons, qu'en est-il de ces éléments particuliers, qui sont encore très différents de ceux-ci ? Maintenant, si vous prenez un peu de temps pour y réfléchir, vous pouvez constater que l'espace entre le titre et le texte ici est à peu près le même. Il y a ici une marge de dix. Maintenant, le rembourrage et les marges sont très différents, et nous les aborderons tout au long du cours de différentes manières Mais vous pouvez voir ici que le rembourrage et la marge de l'en-tête ici L'en-tête ici sont littéralement identiques, 20 en haut et dix en bas Maintenant, il s'agit de quatre en-têtes assez standard et vous pouvez les ajuster comme vous le souhaitez Cependant, dans ce cas précis, ce n'est pas l'en-tête, c'est le problème ici. Le problème, c'est le texte à l' intérieur du paragraphe, car avec ce paragraphe en particulier, nous avons une marge de 24 pixels, alors qu'avec ce texte, nous n'avons qu'une marge de dix. Donc, si nous changeons ce 24, cela semble beaucoup mieux, et nous avons un bel espace entre le paragraphe et le bouton, le titre et l'image, mais il y a toujours quelque chose qui ne va pas Et c'est simplement là que ces éléments sont placés. C'est pourquoi il est très important qu'un conteneur, une section et le bloc di fonctionnent bien ensemble. En effet, si nous voulions prendre ce texte comme cet exemple et le placer au centre de l'image. Tout ce que nous avons à faire est d' aller dans cette section ici dans le diblock and click center Cela le rend tellement plus propre, beaucoup plus aligné et tellement plus présentable C'est pourquoi il est si important que les sections, les conteneurs et les blocs DI fonctionnent bien ensemble. Parce que si nous n'avions pas ce diblock, nous ne pourrions pas contrôler où nous voulions que les éléments soient Nous ne pouvions l'avoir qu' en un seul endroit. Et en le plaçant au centre, cela lui donne un aspect beaucoup plus présentable et beaucoup plus professionnel Cela couvre tout ce qui concerne les sections, les conteneurs et les blocs d'immersion. Nous allons maintenant les aborder tout au long du cours lors de la création de votre site Web, alors ne vous inquiétez pas. Mais cela devrait vous donner une très bonne compréhension de la façon d'utiliser trois éléments ensemble pour créer un site Web vraiment bien structuré. Quoi qu'il en soit, passons à la leçon suivante du cours. Je te verrai bientôt. 38. Webflow 101 : Grilles: Pour créer cette grille, nous allons créer une nouvelle section, comme toujours. Et dans cette section, nous allons appeler cette section la section grille sexy. Maintenant, lorsque nous entrerons dans cette section, nous allons ajouter un contenant comme d'habitude, et comme avant, si vous vous souvenez, il n'a plus aucun rembourrage et aucune idée réelle de sa taille Nous allons donc ajouter un peu de rembourrage, comme avant Ça a l'air juste. De chaque côté. OK, nous avons donc un peu de marge de manœuvre maintenant. Maintenant, en ce qui concerne l' ajout de la grille, nous devons d'abord aller en bas ici et ajouter la grille ici. Et cela nous a donné le choix entre plusieurs options. Nous pouvons maintenant ajouter de nouvelles sections de grille ici, et nous pouvons ajouter une autre section de grille ici, par exemple. Mais je veux m'en tenir à deux et peut-être à trois. D'accord ? Parfait Encore une fois, si nous voulons créer un peu de largeur ici, nous pouvons le faire. Et si nous voulons créer un peu de largeur ici, nous pouvons le faire également. N'oubliez pas que si vous modifiez la taille de cette ligne en particulier, vous devez également modifier la taille de cette ligne, afin qu'elle soit connectée à ce stade. Maintenant, une fois que la grille est entièrement configurée, nous allons aborder l'ajout d' éléments à la grille de différentes manières . Maintenant, une solution consiste à faire comme nous le faisions auparavant, ajoutant le bloc di. Ensuite, nous pourrions ajouter un autre bloc div, puis nous pourrions ajouter un autre bloc div , etc. Maintenant, cela peut devenir extrêmement fastidieux. Maintenant, je préférerais simplement sélectionner ce diblock, le copier, puis appuyer sur la grille, puis coller le même diblock sur chacun d'eux Maintenant, je veux vous montrer comment vous pouvez utiliser cela de manière à vraiment vous aider à économiser beaucoup de temps et d'énergie. Ainsi, par exemple, je souhaite créer une petite grille pour mettre en valeur certaines photos que j'ai prises. J'ai pris des cours de photographie et je veux montrer mes photos au monde entier. J'ai donc mon bloc d'identification, qui est vraiment important. Encore une fois, la section contenant di, souvenez-vous toujours de cela, descendez à l'image. Parfait J'ai donc une image dans mon bloc dI, qui se trouve dans ma grille, puis j'ai mon conteneur, qui se trouve dans ma section de grille. Eh bien, ma section sexy sur la grille, évidemment. Maintenant, si nous cliquons, cette image ici, et nous allons choisir l'image. Ensuite, nous téléchargeons toutes les images que j'ai enregistrées. Ensuite, il commencera à télécharger toutes les différentes images que j'ai Maintenant, une fois que je l' ai enregistré, je peux commencer à gagner un peu de temps. Et je peux le faire en copiant et en collant simplement le bloc div et en le collant plusieurs fois sur le Maintenant, quelque chose que je peux faire est d'aller sur chacune de ces images, puis de sélectionner une image différente à ajouter à chaque bloc. Maintenant, cela va me faire économiser beaucoup de temps et d'énergie. Alors que je commence à ajouter différentes images à mon nouveau portfolio de photographies. Maintenant, une chose qui est en fait assez agaçante est le fait que mes images ne sont pas toutes de la même taille. L'un est un peu plus grand que l'autre. L'un est le paysage et l'autre le portrait. Alors, comment pouvons-nous résoudre ce problème ? Une façon de le faire est donc de simplement redimensionner la taille des images elles-mêmes, mais il existe un autre moyen Et il produit en fait un effet de grille sans utiliser la fonction de grille, que je vais vous expliquer maintenant. Maintenant, cette autre méthode consiste simplement à ne pas utiliser du tout la fonction de grille, mais à utiliser un conteneur. Encore une fois, dans la section elle-même, nous allons ajouter un conteneur, et nous allons supprimer cette section juste pour vous montrer exactement ce que nous allons faire. Et dans ce conteneur, nous allons ajouter un effet de grille. Et dans ce conteneur, nous allons maintenant ajouter toutes nos images. Nous allons donc ajouter celui-ci. Ensuite, nous allons ajouter celui-ci, puis celui-ci. Je n'en ai que trois exemplaires aujourd'hui. C'est pourquoi je suis un peu lent que d'habitude. Parfait Nous avons donc maintenant quelques images, toutes de tailles toujours différentes. Et ajoutons-y aussi le canard , juste pour faire bonne mesure. OK. Donc, en gros, ce que fait le conteneur c' est simplement empiler toutes les images les unes sur les autres, ce qui, vous savez, n'a pas l'air mal, mais cela n'a pas non plus l' air beau Alors, comment pouvons-nous y remédier et obtenir une sorte d'effet de grille ? Eh bien, une façon de le faire est d'en faire deux ici, où il est écrit colonnes. Et lorsque nous cliquons sur la colonne d'effet de grille, qui n'est pas une grille, souvenez-vous qu'il s'agit d'un véritable conteneur. Désormais, vous pouvez voir les images s'empiler automatiquement les unes sur les autres par défaut. Maintenant, ça n'a pas l'air mal, mais ça n'a pas vraiment l' air génial, non ? Vous devez faire défiler la page vers le bas pour voir toutes les images. Alors, comment pouvons-nous résoudre ce problème et le faire ressembler à une grille sans utiliser la fonction de grille ? Eh bien, nous pouvons faire quelque chose en utilisant ce petit élément appelé l'effet de colonnes. Nous pouvons donc essentiellement prendre le conteneur, descendre deux colonnes et en taper deux. Voilà, vous avez littéralement une très bonne façon condensée de mettre en valeur vos images. Maintenant, nous pouvons en mettre trois, nous pouvons en mettre quatre, mais je pense que deux, en fait, c'est beaucoup mieux. Maintenant, il y a en fait un peu d' espace entre les deux colonnes. Et ce que nous pourrions faire, c'est ajouter un peu d'espace supplémentaire si nous voulions créer un peu plus d'écart. Nous allons donc ajouter ce chiffre à 20, juste pour ce qui est de l'intention. Ça a l'air génial, mais qu'en est-il en dessous de chaque image ? Pourquoi n'y a-t-il pas d'espace sous chaque image pour, vous savez, les diviser un peu ? Eh bien, c'est très simple, il suffit donc d'ajouter l'image, puis de lui donner un peu de marge de 20. Et voilà. Nous avons littéralement exactement le même rembourrage sur le côté que sur l'image Tout ce que nous avons à faire, c'est simplement de parcourir les images et de faire de même pour chacune d'elles, et nous sommes littéralement prêts à partir. Alors voilà. Il existe donc deux manières différentes d'ajouter votre grille à votre site Web de manière vraiment efficace. L'un d'eux est donc un peu plus organisé, et c'est là que vous avez finalement des images ou des éléments qui ont tous exactement la même taille. Mais s'ils ne sont pas tous de la même taille et que vous recherchez quelque chose d'un peu plus polyvalent et qui peut en fait être un peu plus dynamique en fin cette option peut être la meilleure option pour vous. Quoi qu'il en soit, j'espère vraiment que cette leçon vous plaira. Je te verrai dans le prochain. 39. Webflow 101 : Blocs de liens: OK, alors comment ajoutez-vous réellement un bloc de liens ? Désormais, les blocs de liens sont très simples. Ils ressemblent à peu près à des boutons , sauf qu'ils ne ressemblent pas à un bouton. Ils ressemblent juste à un petit texte. Maintenant, une chose que j' aimerais vraiment faire est simplement de vous montrer la différence entre un bloc de liens et un bouton. Donc, si nous prenons ceci ici, maintenant, cela me donnera un bloc complet, en gros, donc par exemple, je pourrais mettre cette image ici, et un bloc de liens agit un peu comme un bloc dI. Désormais, un bloc de liens peut être utilisé de différentes manières. Maintenant, les deux principales façons d' utiliser un bloc de liens sont fin de compte comme moyen d' amener les gens à accéder à une certaine page. Ainsi, par exemple, nous pourrions le mettre ici, puis nous pourrions ajouter cette image. Nous allons donc supprimer le bloc dI et ajouter l'image au bloc de liens. Et puis, en gros, ce que nous pourrions faire c'est prendre le bloc de liens, si quelqu'un clique sur cet élément en particulier ou sur ce bloc de liens en particulier, là où se trouvait le bloc dI auparavant. Le bloc dI est donc essentiellement remplacé par le bloc de liens. En fin de compte, vous pouvez ajouter un autre domaine, ou vous pouvez vous rediriger vers une autre page du site Web, vous pouvez ajouter un e-mail, vous pouvez ajouter un numéro de téléphone. Vous pouvez essentiellement faire effectuer n'importe quelle action lorsqu'ils cliquent sur cet élément en particulier. C'est très utile, car si vous voulez les amener sur la page Swans, par exemple, ou sur la page Duck, selon votre préférence, cela leur facilitera la tâche, et elle sera finalement masquée, de sorte que vous ne verrez pas vraiment le bouton Maintenant, cela peut également être très utile pour un certain nombre d'autres raisons. Et l'une des façons dont j'aime utiliser le bloc de liens est de créer au final un bouton presque invisible. Donc, en fin je prendrais le bloc de liens, je l'ajouterais en bas. Alors laissez-moi simplement ajouter ceci ici, alors copiez, supprimez, collez. Vous pouvez le voir ici, nous avons le bloc de liens là. Maintenant, je veux créer un bouton invisible pour cette section particulière. Je vais donc le copier-coller. Je vais ajouter du texte ici. OK. Nous allons nous débarrasser de cette ligne dans quelques secondes, puis je la percerai ici J'ai donc exactement la même fonctionnalité dans ce bloc de liens, et je peux créer un lien vers la même page que celle vers laquelle le bouton mène, d'accord ? Maintenant, quand utiliserions-nous un bloc de liens plutôt qu' un bouton dans ce but précis ? Eh bien, nous l'utiliserions lorsque le bouton lui-même n'est pas une priorité. Ainsi, par exemple, si nous allons sur mon site Web, clementh.com, ce bouton est une priorité car il m' aide réellement à générer des ventes et à générer des prospects Mais si nous y allons, vous verrez que ce n'est pas une priorité. Ce n'est pas vraiment une priorité. Ce n'est pas vraiment une priorité, et ça l'est non plus. Si nous allons un peu plus loin, c'est une priorité, car cela permet aux gens atteindre l'objectif que mon site Web essaie d'atteindre. Si nous descendons, c'est encore une fois un bouton très important. Il s'agit d'un bouton important car les utilisateurs peuvent télécharger un exemple de ce que nous allons leur fournir. C'est très important car il peut vous montrer tous les articles, bien que cela puisse également être mis en tant que bloc de liens secondaire. De plus, il s'agit un autre bouton important pour amener les gens à aller là où je veux qu'ils aillent. Donc, en gros, le bloc de liens doit être utilisé pour tous les boutons secondaires, lorsqu'ils ne sont pas principalement axés sur l'objectif que votre entreprise essaie d'atteindre. Et la première chose à faire pour qu'il ait exactement la même apparence que ce bouton est de s'assurer qu'il est identique, qu'il a le même espacement Et nous pouvons également nous assurer qu'il s'agit de la même couleur, car pour le moment, c'est essentiellement lié à cela. Donc, si nous changeons la couleur, cela change tout, ce qui semble parfait. Et puis, si nous cliquons simplement sur ce petit x ici, cela enlève le soulignement, ce qui lui donne un aspect beaucoup plus propre et professionnel. Nous avons donc essentiellement le bouton, nous pouvons donc simplement le retarder. Il est déjà aligné à gauche. si nous voulions mettre peu de rembourrage et le faire ressortir un peu, Mais si nous voulions mettre un peu de rembourrage et le faire ressortir un peu, nous pouvons le faire très facilement Mais maintenons-le simplement aligné à gauche pour le moment. Donc, quand je regarde ça, ça ne ressemble pas vraiment à un bouton, n'est-ce pas ? Nous ne saurions pas qu'il s' agit d'un bouton à moins de regarder derrière le site Web ou de cliquer dessus découvrir qu' il mène quelque part Comment pouvons-nous faire en sorte que cela ressemble davantage un bouton en utilisant la fonction de blocage de liens ? Eh bien, nous pouvons le faire en utilisant simplement quelque chose comme ça, une petite flèche. Vous pouvez les utiliser et les trouver en ligne en recherchant simplement les icônes sur Google, copiant et en collant, et je vais vous montrer où vous pouvez les trouver Donc, si nous allons littéralement dans notre petit bloc de liens et que nous l'utilisons, cela ressemble maintenant beaucoup plus à un bouton. Maintenant, il existe de nombreuses autres façons de faire en sorte que cela ressemble encore plus à un bouton. Et pour ce faire, nous pouvons simplement faire des choses comme, par exemple, survoler Et quand il est en survol, je dirais que nous pouvons réduire l' opacité à 40 Et puis quand on revient à « non » , cela signifie simplement qu'il ne lui arrive rien . Il est juste là. Sa capacité est de 100 %. Mais lorsque nous le survolons, il devient transparent, ce qui indique essentiellement à l'utilisateur lorsque vous cliquez dessus, quelque chose va se passer, d'accord ? Donc, quand on fait ça, je pense que c'est un peu trop rapide. Cela n'a pas vraiment l'air très esthétique, non ? Genre, ça a l'air un peu nerveux et peu professionnel Alors, comment pouvons-nous le rendre plus beau ? Eh bien, ce que nous pouvons faire, c'est passer aux transitions. Nous pouvons passer en revue toutes les propriétés, puis les rendre un peu plus fluides. Donc, plus ce nombre est élevé, plus il est fluide. Environ 500 devraient suffire. Et maintenant, lorsque nous le survolons, il devient transparent de manière plus fluide Donc ça m'a vraiment fait du bien. Mais je veux que ça ressemble un peu plus à un bouton. Je veux que les gens sachent que si vous cliquez dessus, vous allez aller quelque part. Alors, comment pouvons-nous le faire ? Comment pouvons-nous faire en sorte que ce bouton ressemble davantage à un bouton qu'à un simple texte ? Eh bien, comme il s'agit d'un bloc de liens, et vous pouvez le faire avec n'importe quel élément, mais comme il s'agit d'un bloc de liens, cela ressemble essentiellement à un bloc de texte et il mène en fait quelque part. C'est donc plus discret et c'est un peu plus propre. Ce que nous pouvons faire, c'est retourner à Hover. Nous pouvons passer à deux transformations en D et appuyer dessus, et voici la position des éléments réels. Nous pouvons donc déplacer les choses. Nous pouvons faire plein de choses géniales. Nous pouvons même le déplacer de gauche à droite. Et je pense en fait que cela pourrait être une très bonne option. Déplaçons donc cela de 15 à gauche. Et ensuite, quand nous reviendrons ici, il devrait déménager. Chaque fois que nous cliquons dessus, cela a l'air super professionnel et propre. Et c'est un très bon exemple de la façon dont la hiérarchie des boutons peut être très importante lorsque vous concevez votre site Web. Vous pouvez voir ici parmi ces deux boutons, le bouton principal et ce petit bloc de liens, lequel se démarque le plus ? Celui qui a une solide expérience. Celui-ci est beaucoup plus discret et beaucoup plus subtil Vous pouvez donc utiliser les différents types de boutons pour vous concentrer davantage sur les boutons sur lesquels vous souhaitez que les utilisateurs appuient. boutons supplémentaires ou les boutons bonus sont en fin de compte ceux qui ajouteront le plus à l'expérience utilisateur, peu comme le Swan Club, évidemment. Vous pouvez faire exactement la même chose avec ce bouton pour lui donner un peu de vie, et écoutez, nous allons aborder de nombreuses choses importantes et amusantes tout au long de ce cours alors que nous commencerons à créer notre site Web ensemble. Ainsi, par exemple, si nous passons à nouveau le pointeur de la souris et que nous revenons à l'arrière-plan Ensuite, nous pourrions potentiellement rendre cela un peu plus sombre. Nous pourrions également augmenter ce chiffre, peut-être un peu, afin rendre un peu plus élevé Oui, ça a l'air bien. Va ici. Ensuite, il suffit de transférer toutes les propriétés, rendre un peu plus fluides car 200, c'est encore un peu nerveux Mais environ 500, c'est à peu près juste. 575 aura l'air bien. Parfait. Alors maintenant, lorsque nous le survolons , il fait plus sombre et il apparaît un peu plus doucement Ce n'est donc qu'une petite chose très subtile, mais qui fait toute la différence. Maintenant, juste pour que cela soit extrêmement évident pour tous ceux qui se demandent encore s'il s'agit d'un bouton, et c'est un bouton ou non, vous pouvez simplement aller sur le bouton, accéder au pointeur, et pareil ici. Et puis, en fin de compte, si vous vous contentez de prévisualiser votre site Web, chaque fois que vous le survolez, il s'agit clairement d'un bouton. chaque fois que vous le survolez, il s'agit clairement d'un bouton. Et la petite animation et la petite différence subtile, vous savez, entre le moment où survolez et le moment où il ne s'agit pas vraiment communiquer à l'utilisateur en utilisant le moins de calories mentales possible, que vous êtes sur le point d'appuyer sur un bouton et que vous êtes sur le point d'aller quelque part Maintenant, je sais que nous étions censés simplement nous plonger dans la boîte à liens dans cette leçon en particulier, mais je n' ai pas pu m'empêcher de vous montrer quelques astuces pour vraiment aider votre site Web à prendre vie de manière professionnelle. Il y en aura encore beaucoup d'autres dans la prochaine leçon, donc je vous y verrai. 40. Webflow 101 : Buttons: Alors, comment ajouter des boutons à notre site Web sur Web Flow ? Eh bien, c'est super simple. Alors prenons ce bouton ici et supprimons-le simplement. Au revoir. Ensuite, il suffit d'aller sur le bouton plus et d'appuyer sur le bouton, faire glisser dessus, et le tour est joué. Voilà ton bouton. Maintenant, ce bouton en particulier n'est pas très beau à moins que vous n'aimiez vraiment le bleu. Donc, ce que je veux faire, c'est vous montrer comment concevoir le bouton pour le rendre plus beau et l' adapter à l'esthétique de votre marque et de votre site Web Donc, ce que nous pouvons faire, c'est commencer à modifier un certain nombre de choses. Il s'agit donc simplement de modifier le rembourrage de chaque côté. Et si vous choisissez simplement une option ou une commande sur votre clavier, vous pouvez modifier les deux en même temps. Ajoutons un peu de rembourrage sur les côtés. 30 ça a l'air bien. Maintenant, ajoutons un peu de rembourrage sur le dessus 12. Ça a l'air bien. Et puis, deux choses à retenir, c'est que lorsque vous modifiez le bouton, la taille du bouton se distingue par le texte à l'intérieur, la taille du texte, l'espacement entre chaque caractère et le rembourrage autour du texte, Donc, si nous changeons le texte en Swan Club, puis si nous le sélectionnons à nouveau, que descendons et que nous augmentons la taille de la technologie, vous pouvez voir que le bouton commence également à changer de taille. Maintenant, vous pouvez également modifier l'espacement à deux, par exemple, pour l' étaler un peu, un peu comme dans cet exemple ci-dessous Mais ce que vous pouvez aussi faire, et c'est là que les choses deviennent très intéressantes, c'est que vous pouvez commencer à manipuler et à modifier le design, l'apparence et le toucher du bouton, en utilisant des éléments tels que la couleur d' arrière-plan, qui se trouve ici, afin que je puisse littéralement en faire la couleur que je veux. Faisons-en une belle en or. Ça a l'air bien. Sympa. Parfait. Donc, je veux dire, ça a l'air plutôt bien comme ça. Mais ajoutons peut-être quelques courbes au bouton. Rendons-le un peu plus élégant. Six, ça a l'air bien. Et si, par exemple, vous vouliez modifier différents coins avec différents styles, vous pouvez le faire, ce qui donne ce type d'effet de sution Non, je veux que toutes les courbes soient là, donc je vais les modifier à nouveau. Vous êtes maintenant dans une position où vous avez un beau bouton, mais comment pouvez-vous le relier page séparée ou peut-être à une page ou peut-être si vous vouliez créer un bouton pour Carnes, en appelant le Swan Club ? appelant le Swan Club Comment faites-vous cela ? Eh bien, il vous suffit de cliquer sur le bouton. Accédez aux paramètres. Et dans les paramètres, vous verrez simplement cinq options. Le premier est donc le téléphone. Ainsi, lorsque vous cliquez dessus, vous pouvez simplement ajouter votre numéro de téléphone. Maintenant, la deuxième option est le courrier électronique. Il s'agit donc essentiellement de l'e-mail auquel vous souhaitez que le bouton vous amène pour envoyer un e-mail à cette adresse e-mail particulière. Et puis vous avez également la barre de sujet. Maintenant, la barre d'objet va essentiellement dire quelque chose du genre «   Hey, Swan Club, je veux m'inscrire ». Pièce détachée. Cela va donc essentiellement apparaître comme objet. Si je clique sur ce bouton et qu'il est connecté à un certain e-mail. Maintenant, l'option suivante est la page. Donc, ce que je veux dire par page, c'est si je vais jusqu'ici et que j'appelle cela la section portfolio, je peux ensuite la lier à la section portfolio. Ainsi , lorsque je commence à parcourir le site Web, je peux simplement cliquer dessus, et cela m' amène automatiquement à cette section. Et revenons en arrière. Maintenant, il s'agit d'une page séparée. Ainsi, par exemple, il s'agit d'une page qui se trouve en interne dans votre site Web. Maintenant, il est très important que vous l' utilisiez si vous souhaitez créer un lien interne sur votre site Web car si vous utilisez l'URL, peut changer à l'avenir. Donc, si elle change, l'URL réelle peut être erronée, et cela va probablement gâcher complètement l'ensemble de votre site Web, ce qui n'est pas génial. Alors gardez cela à l'esprit. Si vous créez un lien en dehors de votre site Web, utilisez cette option, l'option URL. Vous allez essentiellement créer un lien vers une page de votre site Web, donc en restant dans votre domaine, utilisez cette option. Et si nous voulions avoir une option Cars et nous envoyer un e-mail ? Eh bien, nous aurions l'option Cars ici comme ça. Ensuite, ce que nous pourrions faire, c'est littéralement copier et coller ceci. Nous avons donc maintenant deux boutons qui sont essentiellement exactement les mêmes. Dans ce bouton, nous pourrions essentiellement mettre des e-mails. Ensuite, nous pourrions modifier cela dans les paramètres. Vers l'option e-mail. Swans sur swans.com. Alors tu as des cygnes. Oh, tu es un cygne. OK. Exclamation, Mark OK. Nous avons donc maintenant deux boutons. L'une consiste à appeler ce club O, et l'autre à envoyer un e-mail à ce club. Maintenant, ça a l'air bien, mais deux choses me dérangent vraiment Tout d'abord, je n'aime pas la façon dont ces boutons sont empilés les uns sur les autres Alors, comment pouvons-nous résoudre ce problème ? Nous pouvons résoudre ce problème avec un bloc dF. Nous ajoutons donc le bloc d'immersion. Ensuite, nous ajoutons, nous le copions et le collons. Maintenant, vous pouvez voir qu' ils sont côte à côte, ce qui est dix fois plus beau, mais il n'y a aucun écart entre eux, et c'est vraiment ennuyeux. Alors, que pouvons-nous faire ? Nous pouvons ajouter un peu de marge. Les éléments intérieurs sont donc du rembourrage et les éléments extérieurs des marges Il y a donc déjà une marge en dessous, ce qui est formidable, mais nous pouvons en fait retirer parce que nous n'en avons pas vraiment besoin, mais nous pouvons donner une petite marge vers la droite, ce qui permet de séparer les deux boutons. Maintenant, ces deux boutons sont superbes. Mais ce qui est vraiment important, c'est d'avoir une hiérarchie des boutons Si vous avez déjà suivi cette leçon particulière dans ce cours, vous comprendrez ce que je veux dire. Maintenant, si vous ne comprenez pas la hiérarchie des boutons, allez consulter cette leçon maintenant, car elle sera très utile pour vous. Donc, ce que je vais faire, c'est que j'aime apparence de ces deux boutons. Mais je veux que le bouton des appelants soit plus visible et le bouton des e-mails moins visible, d'accord ? Donc, ce que je vais faire, c'est donner à ces deux boutons nom différent. La raison pour laquelle je le fais aussi. Permettez-moi simplement de vous montrer que si je change l'arrière-plan ou le texte de ce bouton en particulier, cela les changera pour les deux. Cependant, si j'appuie sur le bouton 4, que j'appelle Carl et que ce bouton envoie des e-mails, ils ne sont plus connectés, d'accord ? Ils peuvent donc être conçus comme je le souhaite. Donc ce que je peux faire, c'est prendre ceci, je peux prendre ceci, ajouter un petit peu. Vas-y ou même ça. Terminez, emportez-le. Ensuite, je peux également ajouter du texte. J'ai l'air bien mieux. Voilà. Ça a l'air dix fois mieux. Maintenant, ce que je vais aussi faire, c'est ajouter un petit contour d'oreille autour de cela, juste pour que ce soit beau et uniforme. Parfait. Maintenant, lorsque nous examinons cette section en particulier, nous pouvons voir qu'il y a un bouton très rocheux ici. Nous voulons que les gens appuient d'abord sur ce bouton, mais s'ils veulent nous envoyer un e-mail, ils sont libres de le faire. Cette option existe toujours. Mais comment donner un peu vie à ces boutons ? Parce que lorsque nous les survolons, rien ne se passe vraiment. Nous sommes juste une sorte de petite main se lève pour montrer qu'il s'agit d'un bouton, mais cela ne fait pas grand-chose. C'est un peu embêtant. Voyons donc comment nous pouvons leur donner vie. Et l'une des façons de leur donner vie est d' utiliser l'animation survolée , ce qui est très simple Vous pouvez donc y aller, appuyer sur le survol, descendre, et vous pouvez finalement un peu de pacité à 65, revenir à zéro, puis quand nous jouons, vous pouvez voir que le bouton Carlos possède une petite fonction qui indique que vous appuyez dessus ou qu' il a été survolé, devrais-je dire Maintenant, ça n'a pas vraiment l'air très beau, si vous le regardez. Il passe en quelque sorte à 65 pacité très, très rapidement. Et c'est ce que nous ne voulons pas. Nous voulons, c'est que ce soit beau et fluide. Nous avons donc fait une transition, et nous avons porté ce chiffre à environ 500. Cela va paraître beaucoup plus fluide. Tu vois ça ? Non, cela a l'air beaucoup plus professionnel et beaucoup plus digne de confiance. Nous pouvons maintenant aller plus loin. Nous pouvons revenir à la section de survol, toujours sur ce bouton ici, le bouton des appelants. Nous pouvons aller jusqu'à deux transformations en D. Nous pouvons passer à cette section, et nous pouvons la déplacer un peu plus haut de quatre. Cela ne fait que quatre pixels. Maintenant, nous n'en revenons à aucune. Nous y revenons. Et nous pourrions tout aussi bien modifier cela pour toutes les propriétés. Donc, avant, il était simplement défini sur Apcity, maintenant ce sont toutes des propriétés Donc, toutes les modifications que j'apporte à ce bouton en particulier sont effectuées avec un intervalle de 500 millisecondes Alors laisse-moi juste vérifier ça. Ce bouton est toujours le même. Ce bouton. Ah, ça a l'air bien. Regarde comme ça a l'air doux. Très sympa. Alors, comment animer ce bouton ? Eh bien, nous pouvons le faire de différentes manières . Si nous retournons à Hova, nous redescendrons. Nous pouvons voir que le texte est actuellement en or. Changeons-le en blanc. Ensuite, je veux changer l' arrière-plan à cette couleur. Ça a l'air bien. En fait, je veux le rendre un peu plus sombre. Nous y voilà. Voyons à quoi ça ressemble. Je vais également changer cela. Parfait. Maintenant, je vais revenir à rien. Ensuite, je vais passer aux transitions, souvenez-vous. Accédez à toutes les propriétés. Passez à 500, 525, ce sera bien. OK. Alors maintenant, lorsque nous testons les deux boutons, Call us semble correct. Un e-mail semble bien. Nous avons donc maintenant deux boutons entièrement animés. Maintenant, il s'agit simplement, vous savez, de réunir différentes animations. Je ne recommanderais pas vraiment d'utiliser ces deux animations l'une à côté de l'autre. Il devrait y avoir un élément de cohérence à cet égard. Je voulais juste vous montrer comment créer très bons boutons en très peu de temps. Et une fois que vous avez les animations générales de vos boutons, vous suffit de copier-coller, et vous pouvez simplement copier ces boutons n'importe où sur le site Web de votre choix. Et il en sera toujours de même pour l'animation, et vous pourrez même modifier le texte. Parfait. J'espère donc que cela vous donnera un petit cours intensif sur l' ajout de boutons sur votre site Web Je vous verrai donc dans la prochaine leçon. On se voit là-bas. 41. Webflow 101 : Typographie: Donc, de la typographie sur le sol du Web. Comment pouvons-nous créer notre typographie sur le Web ? Comment pouvons-nous rendre le texte nos sites Web incroyable tout en comprenant comment le modifier pour obtenir le site Web parfait que nous voulons ? Maintenant, dans cette leçon, nous allons tout aborder dans cette jolie petite boîte. Vous savez donc parfaitement utiliser la typographie sur le Web. Commençons donc à jouer. Donc, en ce qui concerne la police, c'est assez explicite. Vous pouvez sélectionner l'une des polices standard sur le Web ? Mais vous pouvez également ajouter des polices personnalisées. Pour ce faire, il vous suffit de cliquer ici , pour accéder directement à la section Polices du panneau des paramètres. Ensuite, il vous suffit télécharger le fichier de police de votre choix, appuyer sur Enregistrer, puis d'appuyer sur publier et de publier le site Web, et le tour est joué. Supposons, par exemple, que nous voulions changer cela en Mon Serrat Parfait. Ça a l'air génial parce que les cygnes sont géniaux Si nous voulions l'agrandir un peu, nous pourrions utiliser cet outil. Il s'agit donc essentiellement des différents poids que nous avons pour cette police ou cette police de caractères en particulier. Maintenant, ce que vous allez voir, c'est que toutes les polices ne disposent pas de la sélection complète. Vous devrez donc peut-être les ajouter manuellement si vous avez spécifiquement besoin, vous savez, Aerial Thin, par exemple, car il n'est pas disponible par défaut sur Web Flow. Mais heureusement pour nous, Monsat a tous les poids disponibles, alors choisissons le plus audacieux, et examinons cela. Mmm. Pas mal. Maintenant , c'est là que les choses commencent à devenir un peu plus intéressantes Nous pouvons donc modifier la taille de ce front en cliquant simplement vers le haut et le bas, ou nous pouvons même y mettre un chiffre, et nous pouvons distinguer la taille du texte réel. En fait, je pense que c'est un peu trop petit. Allons-y pour 35. Parfait. Maintenant, la hauteur est un peu différente. Donc, pour ce qui est de la hauteur, laissez-moi juste vous montrer, car les demi-ailes, évidemment. Maintenant, la hauteur est le petit espace entre les lignes de mots. Donc, si nous passons à 40, vous verrez que cela se resserre un peu. Si nous passons à 60, vous verrez que cela s'élargit beaucoup. Aujourd'hui, les meilleures pratiques sont environ 1,5 fois supérieures à ce que vous avez ici. Donc, si c'est 30, par exemple, alors si nous mettons cela comme 45, cela correspond à peu près à la bonne quantité d'espace que vous souhaitez pour vos en-têtes Et il en va de même pour le texte de votre paragraphe et pour tous les autres éléments de texte. Nous avons donc abordé toutes les questions de base. De toute évidence, nous savons ce qu'est la couleur, alors nous nous intéressons trop à cette question. L'alignement est assez simple. Il s'agit simplement de la façon dont le texte est aligné dans le cadre dans lequel vous le trouvez. Nous pouvons mettre le texte en italique. Nous pouvons également ajouter une ligne dans le texte, aligner en dessous du texte et également une ligne au-dessus du texte. Je vais être totalement honnête. Je ne sais pas quand vous placeriez une ligne au-dessus du texte, mais les options s'y trouvent si vous en avez besoin. Maintenant, ces paramètres supplémentaires ci-dessous sont essentiellement cachés dans cette barre d'options de type plus large. Donc, si nous cliquons simplement dessus , nous pouvons commencer à changer des choses comme l'espacement des lettres, qui est essentiellement la quantité d'espace entre chaque lettre dans la boîte Ensuite, nous devons mettre le texte en retrait. Donc, si nous mettons dix, cela va mettre en retrait le premier caractère du texte Supposons, par exemple, que nous voulions mettre un petit retrait de cinq, ou peut-être que nous voulions commencer encore plus loin. Nous en mettrons 30. Pour être honnête, je ne l'utilise pas très souvent, mais il est là si vous en avez besoin. Maintenant, en ce qui concerne les colonnes, nous l'avons déjà utilisé ici. Donc, ce que nous pouvons faire, c'est que si nous mettons cela en deux, cela décompose tout en deux colonnes distinctes pour le rendre un peu plus captivant, je suppose Je ne sais pas vraiment quand vous l' utiliseriez pour un titre, mais vous pouvez l'utiliser, par exemple, si vous créez l'effet un peu comme dans un journal où vous avez deux lignes de texte de chaque côté et que vous lisez la première à gauche et la seconde à droite, c'est peut-être à ce moment-là que cela est utilisé Mais pour être tout à fait honnête, je ne l'utiliserais pas du tout pour les en-têtes Maintenant, l' outil capitalisé est vraiment important car il peut réellement vous faire gagner beaucoup de temps. Par exemple, si vous souhaitez que vos en-têtes soient tous en majuscules, vous pouvez appuyer dessus et modifier cela comme vous le Vous pouvez également vous assurer que chaque premier mot Vous pouvez également vous assurer que chaque première lettre est également en majuscule Donc, même si j'ai les lettres dactylographiées comme ça et que j'appuie dessus, chaque mot de cette phrase est automatiquement mis en majuscule phrase est automatiquement mis en Ou, bien sûr, vous pouvez également l'avoir avec toutes les lettres minuscules, ce qui est également très bien. Débarrassons-nous de cela pendant une seconde, et choisissons simplement de capitaliser, que ça soit un peu plus beau Maintenant, cette petite fonction ici est essentiellement la direction. Donc, pour le moment, il va de gauche à droite, mais si je le change ici, il commence à aller de droite à gauche. Encore une fois, je ne sais pas vraiment quand vous utiliseriez cette fonction en particulier, mais elle est là si vous en avez besoin. Maintenant, si vous avez déjà suivi la leçon sur la réactivité des sites Web de ce cours, vous saurez ce que sont les points d'arrêt Mais si ce n'est pas le cas, un point d'arrêt est essentiellement le moment où l'écran devient suffisamment petit, par exemple ici, où les lignes commencent à se briser à certains points, en fonction de la taille de l'écran, sur lequel vous consultez le site Web Et cela comporte plusieurs options différentes. Ainsi, par exemple, il est possible de diviser un, donc en gros, n'importe quelle lettre ou n'importe quel mot peut finalement être divisé, en fonction de la taille, ou vous pouvez même sélectionner Tout conserver, qui revient essentiellement à tout garder sur une seule ligne et à ne pas diviser les choses. Vous pouvez maintenant le faire par mot, ou vous pouvez également le faire par ligne. Alors expérimentez un peu avec cela si vous le voulez vraiment, mais je vais être totalement honnête. Je n'ai jamais utilisé ces deux éléments dans aucun des designs que j'ai créés au cours des dix dernières années, ce soit sur Web Flow ou sur une autre plateforme. Maintenant, en ce qui concerne le rap, je ne suis pas vraiment fan de rap moi-même. Je préfère rega, mais je peux dire qu'en ce qui concerne cette fonction particulière, je pense que si vous l' utilisez, vous compliquerez peut-être le site Web un peu plus le site Web un peu plus que nécessaire Et la raison pour laquelle je dis cela est que vous pouvez réellement envelopper le texte manuellement dans le texte lui-même. Ainsi, par exemple, je pourrais emballer Great. Donc c'est séparé, et c'est en fait, vous savez, contenu, alors je pourrais même mettre une petite marge de six et six. Ça a l'air bien. Eh bien, c'est 60 scots, donc divisons-le par dix Parfait. Alors ce que je pense que nous pourrions faire, Mm. Intéressant. Passons au blanc. OK, donc nous ne pouvons pas le voir du tout pour le moment, mais volons cet or, et changeons cet arrière-plan en or. Oh, mon Dieu. Ça a l'air incroyable. Et vous pouvez faire plein de choses créatives avec cette fonction particulière. Ainsi, lorsque vous sélectionnez un texte, vous pouvez essentiellement ajouter un lien si vous le souhaitez vraiment. Je ne sais pas à quel point cela serait beau ou quand vous le feriez, mais peut-être que vous pourriez être utile. Vous pouvez les envelopper avec du spam , comme nous l'avons fait ici, et vous pouvez également effacer le formatage. Ainsi, par exemple, si je voulais effacer ceci, et que je voulais tout effacer complètement, il me suffirait de cliquer dessus et de revenir à la normale. Mais j'aime bien ça, donc je vais le garder tel quel. Quoi qu'il en soit, j' espère vraiment que cela vous a donné un petit aperçu de la façon d'utiliser correctement la typographie dans un flux Web J'ai donc hâte de vous voir dans la prochaine leçon. À bientôt. 42. Webflow 101 : Images: D'accord, nous avons déjà ajouté et remplacé des images dans ce cours, mais je voulais juste consacrer une seule leçon à vous montrer tout ce que vous devez savoir sur l'ajout d' images sur le Web car c'est très simple et facile à comprendre. Maintenant, si nous retirons cette image en particulier et que nous la supprimons, ce qui est formidable, nous n' avons pratiquement rien sur le côté droit, et c'est exactement ce que nous voulons. Alors, comment ajouter une image ? Eh bien, nous allons à la petite croix ici. Nous faisons ensuite défiler l'écran jusqu' à la barre d'image, et nous y insérons simplement notre image. Maintenant, pour le moment, nous avons simplement une image fictive, donc nous n'avons rien à montrer à qui que ce soit, qui n'est pas une bonne chose car ce n'est pas vraiment une image Ce n'est qu'un espace réservé. Alors, comment ajouter une image ? Eh bien, c'est peut-être juste ce petit bouton qui dit « Choisir une image ». Donc, si nous cliquons dessus, cela ouvrira notre barre d'actifs ici sur le côté gauche, et il ne nous restera plus qu'à sélectionner l'image que nous voulons. Et voilà, presto, l' image est maintenant là. Maintenant, comme vous pouvez le voir ici, l'image est un élément à part entière. Ainsi, par exemple, si vous sélectionnez l'image, vous pouvez ensuite accéder au style, à taille, et vous pouvez ajouter 50 % à la moitié de la taille de l'image. Maintenant, bien que cette image soit 50 % sur cet ordinateur de bureau, si nous passons à l'ordinateur portable, qui est essentiellement au cœur de tout ce qui est réactif sur le Web, vous verrez que l'image est à 100 % ou automatique pour le moment. Mais si vous revenez au grand bureau, vous verrez qu'il est toujours fixé à 50. Alors pourquoi ça ? Eh bien, la raison en est que si nous le retirons, par exemple, et que nous le remettons simplement à Auto, il redeviendra comme avant. Maintenant, si nous revenons au centre, qui est le cœur, si tout ce qui est réactif sur le Web Floor, si nous changeons quelque chose ici avec la petite étoile dans le coin supérieur droit, cela changera automatiquement tout vers la gauche et tout vers la droite pour qu'ils soient exactement les mêmes. Et c'est ainsi que vous créez très facilement des sites Web réactifs sur le Web. Donc, par exemple, si nous continuions ici, et si nous le modifiions à 70 %, voyons que cela change la taille ici, mais cela change également la taille sur tous les autres appareils, voyons que cela change la taille ici, mais cela change également la taille sur tous les autres appareils, qu'ils soient plus grands ou même plus petits. Et si nous voulions qu'il y en ait 70 sur cette page en particulier, mais que nous voulions ensuite qu'il soit 100 sur mobile. Eh bien, nous pouvons simplement le sélectionner ici, le mettre à 100 %. Et voilà, Presto, c'est de retour. Et comme cela se situe au bout de l'échelle de réactivité, vous pouvez essentiellement vous assurer que vous ne modifiez que cet appareil en particulier Cela n'aura aucun impact sur les autres paramètres de l'appareil sur l'ensemble du site Web ni sur sa réactivité. Faisons comme si nous prenions la voie automatique. Et nous le remettons également à l'ordre. Et si nous voulions changer cette image ? Et si nous n'aimions pas ces adorables enfants pêcher ? Eh bien, très facile. Il suffit de cliquer sur le rouage, de remplacer l'image, de cliquer sur la nouvelle image Et voilà. Quoi qu'il en soit, j'espère que cette leçon vous a été utile. Immigrés vers l'ajout d' images au flux Web. Je te verrai dans la prochaine leçon. On se voit là-bas. 43. Webflow 101 : vidéos: Il existe essentiellement deux manières d' ajouter des vidéos au flux Web, et je veux vous montrer comment. La première chose à faire est d' ajouter la vidéo au flux Web. Donc, la première chose à faire est de passer à Media, Dragon Drop Video. Et puis il devrait apparaître avec les paramètres vidéo. Maintenant, pour l'URL, vous pouvez soit ajouter votre vidéo, ce que je préfère généralement car elle a l'air beaucoup plus propre, soit simplement ajouter une vidéo YouTube, exemple, tapez l'URL. Présentateur, et il apparaît automatiquement avec la vidéo. Maintenant, ce que je viens de faire, c'est que j'ai dû ajouter un peu de largeur juste pour mettre en valeur la vidéo. Donc, environ 400 fonctionnent parfaitement pour cela, et vous pouvez le constater. Et si nous visionnons réellement le site Web, vous pouvez voir que la vidéo apparaîtra et qu'elle sera diffusée sans effort. Connectez-vous. Maintenant, si nous descendons, dans l'autre sens, vous pouvez finalement ajouter une vidéo dans Webflow. Vous l'avez donc ici. Nous allons intégrer la fonction YouTube directement dans le Hero Split. Et encore une fois, nous allons ajouter cette URL de 400 pixels qui l'indique. Et l'avantage de cette fonction particulière est que vous pouvez ajouter le début. Supposons, par exemple, que nous voulions commencer à 1 minute et 15 secondes. Vous pouvez définir le mode de confidentialité de la lecture automatique. Vous pouvez également afficher les commandes ou ne pas les afficher, vous pouvez également les désactiver Et vous pouvez également limiter les vidéos associées à une chaîne. Alors, si nous y jouons maintenant, et que nous crions « start », aux éléments du CMS Un 150. Les éléments du CMS sont de couleur perl distincte Et c'est en fin de compte ainsi que vous ajoutez des vidéos sur le Web Floor. Vous pouvez désormais également ajouter des vidéos sur le Web à l'aide de la fonction vidéo d' arrière-plan. Et la façon de le faire est très simple. Donc, avant tout, vous aurez besoin d'une section , que nous pouvons ajouter ici. Et dans cette section, nous allons ajouter la fonction vidéo d'arrière-plan, qui se trouve dans les paramètres avancés. Comme vous pouvez le voir ici, vous avez finalement la vidéo de fond, il vous suffit de télécharger un fichier vidéo. Maintenant, une chose à retenir est que vous ne disposez 30 mégaoctets d'espace de fichier à télécharger pour une Donc, avant tout, assurez-vous que la vidéo est de haute qualité car la dernière chose que vous voulez, c'est une vidéo pixelisée juste pour montrer que vous ne vous souciez pas vraiment du contenu de votre site Web Ce n'est pas ce que nous voulons. Mais deuxièmement, vous devez vous assurer que la vidéo est courte, car cela réduira considérablement la taille réelle du fichier et permettra à la vidéo de se lire correctement. Vous pouvez maintenant choisir si vous souhaitez placer la vidéo en lot, ce que je recommande de lire, ce que je recommande, et également inclure un bouton de lecture ou de pause, ce que je ne recommanderais pas. Et une fois que vous avez fait cela, vous pouvez simplement appuyer sur Play, et votre vidéo sera diffusée en bas de l'écran. Maintenant, une fois que vous avez configuré la vidéo d' arrière-plan, vous pouvez réellement ajouter la vidéo comme ceci, et le chargement et le formatage peuvent prendre un peu de temps . Mais une fois que c'est le cas, votre vidéo sera lue automatiquement, elle se lancera en boucle, et elle sera lue automatiquement sans même que vous ayez besoin de lever le petit doigt. Ainsi, dès que quelqu'un accède à votre site Web, vous pourrez voir exactement ce que contient la vidéo. Ainsi, une fois formatée, vous pouvez voir la vidéo ici Vérifions-le sur le bouton du lecteur. peux voir ici que la vidéo elle-même est un peu fausse, mais c' est simplement parce que j'ai téléchargé un fichier d'une taille seulement 11 mégaoctets Si vous en avez téléchargé un qui est un peu plus grand, il aura l'air beaucoup plus propre, il contiendra plus de pixels et il aura un aspect de meilleure qualité. Maintenant, l'avantage des vidéos d'arrière-plan est la section essentiellement active Je pourrais donc ajouter ce conteneur dans la vidéo d'arrière-plan, et le faire en sorte que tous mes éléments soient présents. Si je le place dans un conteneur et que je traite simplement la vidéo d'arrière-plan comme une section, en gros, je peux avoir exactement la même chose ici, mais avec une vidéo de fond diffusée derrière. Maintenant, je ne sais pas à quoi cela va ressembler. Cela ne semble peut-être pas très bon, mais nous pouvons certainement voir le potentiel de l' utilisation d' une vidéo d'arrière-plan dans le cadre de la conception du site Web. Maintenant, je ne recommanderais pas de le faire. En fait, je pense que l'utilisation vidéos de sites Web n'est pas vraiment idéale pour les arrière-plans dans de nombreux cas. Il est de loin préférable d' ajouter la vidéo elle-même, mais elle est là si vous souhaitez l'utiliser. C'est une autre façon de s'exprimer, mais attention, car le contraste n'est pas excellent et cela n'améliore pas vraiment l'expérience utilisateur. Et en fin de compte, comme vous pouvez le voir ici, cela ralentit considérablement le site Web. Maintenant, ce n'est pas parce que le chargement n'est pas assez rapide que vous ne devriez pas le faire de toute façon. J'espère vraiment que vous avez apprécié cette leçon en particulier en ce qui concerne ajout de vidéos à Web Floor, mais je vous verrai dans la prochaine leçon, et j'ai hâte de vous y voir. 44. Webflow 101 : Animations Lottie: Que sont les animations Lotty ? Eh bien, les petites animations sont très utiles pour un certain nombre de choses différentes, et je veux vous montrer l'une des meilleures façons de les utiliser dans la conception de votre site Web Maintenant, pour ajouter beaucoup d' animation à votre site Web, c'est vraiment très simple. Et tout ce que vous avez à faire est de créer une nouvelle section, qui se trouve ici. Et pour ajouter beaucoup d' animation à votre site Web, il vous suffit d'avoir un conteneur, qui se trouve ici. Et dans ce conteneur, nous ajouterons votre bloc di. Cela n'est pas entré dans le conteneur. Donc, copions-le et collons-le à l'intérieur, pour obtenir le bloc DIF qui se trouve à l'intérieur du conteneur Ensuite, à l'intérieur du bloc di, nous ajouterons notre animation Lottie Voici donc l' animation de Lottie ici. OK, donc ça n'a pas marché. Donc, copions-le et collons-le. Ensuite, collez-le dans le bloc diff. Nous y voilà donc. Nous avons donc notre animation lotty bloc diff à l'intérieur d'un conteneur, qui se trouve à l'intérieur de la section En ce qui concerne une animation de grande envergure, c'est exactement la même chose que d' ajouter une image ou une vidéo Il vous suffit d'appuyer sur le petit rouage. Vous remplaceriez la séquence de lotty par une nouvelle séquence de lotty, je vais vous montrer où l' obtenir dans peu Et puis, en gros, vous dites simplement « durée intégrée », pour voir combien de temps vous voulez réellement que cela dure. Vous appuyez également sur la touche Boucle, ce qui signifie qu'elle bouclera constamment encore et encore, pour une apparence parfaitement fluide. Ensuite, vous pouvez également appuyer ici pour le jouer à l'envers. Maintenant, vous vous demandez peut-être ce qu' est réellement une animation loufoque Maintenant, votre animation est essentiellement une animation vraiment fluide. Vous pouvez l'ajouter comme une image, mais c'est un peu comme un cadeau, mais c'est une animation très fluide, qui peut finalement durer éternellement sans jamais s'arrêter. Et cela peut être très utile si vous souhaitez présenter, par exemple, certaines statistiques concernant votre entreprise ou peut-être des clients avec lesquels vous avez travaillé ou, vous savez, publications qui vous ont présenté , car le fait d'avoir cela sur votre site Web sous la forme d' une animation Lotty peut donner l'impression d'un super professionnel, vraiment propre et vraiment beau Permettez-moi de vous montrer un exemple de nombreuses animations que j' utilise sur mon site Web. Il s'agit donc essentiellement de deux animations intéressantes. Celui-ci va à une vitesse légèrement plus rapide, et celui-ci ici va à une vitesse plus lente. Et comme vous pouvez le constater, il a l'air super épuré, superprofessionnel et cela nous aide vraiment à nous positionner tant qu'experts dans le domaine de l'image de marque, mettant en valeur les différentes marques que nous avons développées et créées ces dernières années Maintenant, où pouvez-vous réellement obtenir beaucoup d'animation ? Ou peux-tu même en créer une toi-même ? La vérité est que vous pouvez en créer un vous-même si vous le souhaitez vraiment. Personnellement, je ne sais pas comment faire, mais je sais où trouver beaucoup d'animation à très bas prix. Vous pouvez donc au départ obtenir beaucoup d'animation pour 15$ sur des sites comme la fibre optique Vous pouvez même les obtenir gratuitement même à bas prix. Pour être honnête, ils coûtent 5$, ce qui est vraiment génial. Et tout ce que vous avez à faire est simplement de leur dire exactement ce que vous voulez, leur donner tous les fichiers, et ils devraient être en mesure de le découvrir pour vous. Et puis, une fois que vous avez votre fichier, il vous suffit de le télécharger sur le site Web, en cliquant simplement sur le Cog, remplacer un lot de séquences, et la séquence LotTI devrait être ici, et elle devrait être Maintenant, de nombreuses animations se présentent sous forme de fichiers JSN. Donc, si vous pouvez obtenir le fichier JSN auprès de quelqu'un de Fiber ou d'un autre concepteur, que vous connaissez quelqu'un ou que vous avez un membre de votre famille, dès que vous avez ce fichier JSO, il vous suffit de l'ajouter à votre site Web comme s'il s'agissait d'une image, puis dès que vous publiez votre site Web, il commencera à jouer automatiquement J'espère donc vraiment que vous trouverez le temps d' investir dans une animation Lotti si elle convient à votre site Web, mais j'espère que vous trouverez cette leçon utile, et je vous verrai dans la prochaine 45. Webflow 101 : Formulaires: Alors, comment créer un formulaire sur Web Flow ? Maintenant, je peux vous dire que c'est très, très facile. Je vais vous montrer exactement comment procéder dans cette leçon. Si vous souhaitez créer un formulaire dans une section, par exemple, la première chose à faire est créer un formulaire dans une section, par exemple, d'accéder à la section des formulaires en appuyant sur le signe plus, puis ajouter l'élément du bloc de formulaire, que vous y placerez simplement. Et comme vous pouvez le voir ici, ça n'a pas l'air génial. Je vais le copier-coller dans le bloc DIF. Et maintenant, au moins c'est centré. Il s'agit maintenant de la première étape pour créer un formulaire. Vous devez tout avoir dans un bloc de formulaire. Ajoutez donc d'abord le bloc de formulaire, puis nous pourrons commencer à le créer. Vous pouvez désormais créer le type de formulaire de votre choix. Et tout ce dont vous avez besoin pour créer un formulaire se trouve dans cette petite boîte. Ainsi, par exemple, utilisons chacun des éléments contenus dans cette boîte particulière pour vous montrer comment utiliser chaque élément. Nous avons donc déjà utilisé le bloc de formulaire. Ajoutons maintenant une étiquette. Donc, si nous voulons ajouter une étiquette, nous avons essentiellement besoin d'autre chose à ajouter au bloc de formulaire. Ajoutons donc cette zone de texte ici, qui ne se trouve pas dans la boîte. Ajoutons donc ce copier-coller dans le formulaire. Parfait Et puis le bouton d'envoi devrait être en bas, alors ajoutons-le ici. Parfait Nous avons donc ajouté ceci ici, qui est essentiellement une zone de texte, ce qui est très beau. Ajoutons ensuite une étiquette, qui se trouve ici. Ajoutons-le au-dessus du bloc de texte. Oh, donc c'est en dessous de ça. Ajoutons donc cela au-dessus de cela. Parfait Nous avons donc maintenant un champ de texte supplémentaire, notre boîte d'adresse e-mail et également notre zone de nom. Faisons-le ici et nommons ce message. Maintenant, ça n'a pas l'air génial, mais nous y arrivons. Nous faisons des progrès. Soyons donc patients. Passons aux autres éléments. Alors peut-être ajoutons-nous également une case à cocher à l'intérieur. Et nous allons modifier le nom pour vous inscrire dans les e-mails marketing. Démarrage vérifié, obligatoire. Déposez-le un peu et ajoutez un peu plus de marge. OK, donc pour une raison ou une autre, la marge ne fonctionne pas, et je pense que c'est parce qu'elle est un peu trop grande. Nous allons donc l' agrandir. Nous ajoutons une petite marge. Donc 20 Ensuite, nous ajouterons 20 à celui-ci également. Allons-y. Maintenant, nous avons un peu de marge de manœuvre. Maintenant, je n'aime pas ce que c'est du squash. Ce n'est pas vraiment génial, alors je vais en ajouter 20 entre les deux. Je vais modifier ce bouton d' envoi en cliquant simplement dessus pour envoyer un message. Ensuite, je vais changer cela en envoi de message. Allons-y. Donc ça a l' air un peu mieux, mais ça a quand même l'air vraiment exigu Alors, comment pouvons-nous résoudre ce problème ? Eh bien, si nous appuyons sur la section appuyons verticalement et que nous l'étirons, cela devrait fonctionner. Mais ensuite, si nous passons au conteneur de blocs DIV, nous pouvons commencer à vraiment comprendre comment étirer encore plus les choses. Allons-y. Nous venons donc de publier toutes sortes de contraintes provenant du bloc de sections, ce qui a permis au formulaire d'être complètement développé, ce qui est beaucoup plus beau. Maintenant, j'aime bien ça, mais je pense que ces étiquettes n'ont tout simplement pas l'air très propres. Je préférerais les avoir dans les boîtes elles-mêmes, juste pour offrir une expérience plus fluide à l'utilisateur. Alors, comment pouvons-nous le faire ? Eh bien, nous pourrions simplement le supprimer, puis cliquer sur le petit rouage, puis mettre le mot Nom ici, ce qui semble tellement mieux Faisons de même pour l'adresse e-mail. Parfait Et puis faisons de même pour le message. Parfait Ensuite, nous pouvons le supprimer. Excellente. Ça a l'air tellement mieux. Maintenant, une fois que nous l'avons fait, ajoutons un peu plus d'écart. Ça a l'air bien. E-mails de marketing. Allons-y. Ça a donc l'air bien mieux. Je vais ajouter un en-tête au-dessus, qui n'a pas besoin d'être à l'intérieur du bloc phm, il doit juste être au-dessus, mais je vais le mettre le conteneur juste pour qu'il soit dans le conteneur juste pour qu'il soit réellement aligné avec le reste des éléments Et je pense que la meilleure façon de le faire est de simplement l'obtenir et de le faire au-dessus du bloc phm. Allons-y. Ensuite, je voudrais ajouter un peu plus d'espace ici. Allons-y. Ça n'a pas l'air trop mal. Ça n'a pas l'air trop mal du tout. La section des noms m'agace un peu. Et si nous pouvions mettre prénom et le nom de famille dans le bloc de formulaire ? Comment ferions-nous cela ? Eh bien, c'est en fait assez facile. Donc, la première façon de le faire est essentiellement, ou la meilleure façon, devrais-je dire, d'ajouter un bloc dI. Ensuite, à l'intérieur de ce bloc di, qui est actuellement là, nous avions une grille, qui se trouve ici. Nous l'avions donc à l'intérieur du bloc d'identification. Nous avons maintenant la grille, et à l'intérieur de cette grille, nous allons également ajouter deux nouveaux blocs dI. N'oubliez pas que les blocs iD ne sont que les pièces à l'intérieur de la maison. Nous créons donc simplement des pièces supplémentaires à l'intérieur de la maison, d'accord ? Ensuite, nous allons simplement le copier-coller. En fait, non, ne copions pas et ne collons pas. Mettons-le manuellement. Faisons-le correctement et arrêtons d'être paresseux, Scotty. OK, donc nous avons tout là-haut maintenant. Maintenant, ce que je veux, c'est ajouter une zone de saisie dans le bloc d. Parfait Je vais maintenant ajouter une autre zone de saisie dans le bloc di. Excellente. Je suis plutôt content de ça, pour être honnête. D'accord. Excellente. Je vais donc modifier cette grille. Je vais regarder l'espacement ici et l'atténuer, donc je n'aime pas ça, c' est trop Et en fait, ça a l' air plutôt bien. Alors maintenant je vais le supprimer. Je n'en ai donc plus besoin. Ça y est. Ça y est. Ça y est. Je vais donc le remplacer par le prénom. Et j'explique ensuite quel est le nom et le texte de l'espace réservé, ainsi le texte de l'espace réservé, ainsi que la différence entre les deux Mais pour l'instant, je me concentre uniquement sur sa conception. OK, parfait. Le formulaire est donc à peu près terminé. Maintenant, en ce qui concerne l'utilisation du formulaire, je vais ajouter un peu de rembourrage, donc je vais en ajouter peut-être 15 ici et peut-être 45 ici Je vais prendre ce bloc de plongée et en faire en sorte qu' il soit d'une couleur différente Allons-y. Allons-nous vraiment refaire de l'or ? Pourquoi pas ? Refaisons-en de l'or. Parfait Nous allons le rendre blanc. Et nous allons le rendre blanc. En fait, non. Ne le faisons pas. Faisons-en un or vraiment foncé. D'accord. Ça n'a pas l'air trop mal. Restons attentifs à cela, car nous ne nous concentrons pas trop sur le design. Je veux juste vous montrer comment créer un bloc de formulaire et un formulaire pour votre site Web. Nous avons donc l' air plutôt beau, mais ce qui m'embête, c'est que l'espace entre ces deux éléments n'est pas le même que ceux-ci. Donc ça m'embête vraiment. Donc, ce que je veux faire, c'est accéder au réseau. Je vais vérifier une grille. Il y en a donc 16, il y a 16 pixels entre les deux colonnes ici, d'accord ? Maintenant, je peux soit changer cela, soit modifier l'espace entre ces sections, ce qui, si vous le faites, devrait nous aider un peu. truc, c'est que la meilleure façon de le faire est peut-être de le faire moi-même, parce qu'il y a déjà des pixels . Ça a l'air bien mieux. Alors maintenant, je vais ajouter sept pixels supplémentaires à celui-ci. Et voilà, c'est parfait. Tout est proportionné maintenant. Excellente. J'en suis content. Génial Maintenant, en ce qui concerne le formatage, les différents éléments du formulaire, il vous suffit de vous assurer que lorsque vous ajoutez, par exemple, le bloc de prénom, le bloc de nom famille, l'adresse e-mail, le message texte, la boîte de message, qui se trouve ici, et puis évidemment l'option d'accepter les e-mails marketing. Lorsque vous cliquez sur le Cog, vous devez vous assurer que celles-ci sont nommées, car lorsque les données sont envoyées à votre adresse e-mail, vous devez vous assurer qu'elles étiquetées, car si ce n'est pas le cas, vous obtiendrez simplement les informations vous obtiendrez simplement les informations et vous ne saurez pas de quoi il Vous ne saurez donc pas si c'est leur prénom, si c'est leur nom de famille, si c'est leur message Il est donc très important de les étiqueter. L'espace réservé est donc le texte à l'intérieur de la boîte, alors que le nom proviendra en fait de l'e-mail qui vous sera envoyé lorsque quelqu'un vous contactera. Nous vérifions donc celui-ci. Celui-ci est évidemment requis parce que nous devons connaître leur nom en ce qui concerne celui-ci, nom de famille, mais c'est un nom, c'est bien, et c'est une adresse e-mail requise, parfaite. OK, c'est bon. Et le type. Nous avons donc cinq types de données différents. La première est simple, ce ne sont que des lettres normales. Vient ensuite l'adresse e-mail. Le suivant est un mot de passe. Le suivant est le téléphone, et le suivant n'est qu'un numéro. D'accord ? Ainsi, en fonction du type de données que vous essayez d' obtenir de l'utilisateur ou du visiteur du site Web, vous devez sélectionner le type de données que vous essayez de faire saisir par la personne dans cet élément. Par exemple, ici, il s'agit d'un e-mail, il est écrit e-mail en haut et il écrit adresse e-mail, ce qui est parfait. Maintenant, en ce qui concerne le message, vérifions-le en dernier. Donc, ce champ est toujours dit. Nous ne voulons donc pas qu'il voie cela. Nous voulons qu' il voie le message requis. Écrivez votre message ici. J'aime bien ça. C'est le texte de l'espace réservé. Excellente. Alors maintenant, tout semble plutôt bon, mais pourquoi celui-ci est-il devenu un peu fou ? Je ne comprends pas Pourquoi est-ce que ça devient un peu fou ? Rafraîchissons-le et voyons ce qui se passe. OK, donc tout semble être en ordre. Nous pouvons donc réellement vérifier cela. Nous pouvons effectivement vérifier ce formulaire. Et avant de vérifier le formulaire, examinons simplement ce qui se passe à l'extérieur. D'accord. Donc, forme de nom. Si vous souhaitez rediriger vers une autre URL, vous pouvez l'indiquer ici. En ce qui concerne les actions, il s'agit d'un flux Web par défaut, et vous n'aurez à le modifier que si vous souhaitez le lier à un fournisseur de messagerie tel que Mailchimp, par exemple, ou quelque chose comme ça Et si vous souhaitez le connecter à un fournisseur de messagerie tel que Mail Chip ou à une autre plate-forme basée sur le courrier électronique, consultez leurs didacticiels spécifiques, qu'ils auront sur leur site Web car chaque plate-forme est légèrement différente. Alors on y va. Tout semble bon. Nous allons mettre un formulaire de message. P. Ensuite, nous allons simplement vérifier le backend dans les paramètres. OK, tout a l'air bien. Tout a l'air bien, tout semble bon. Parfait Ensuite, si nous cliquons sur Succès, voici ce qui s'affichera lorsqu' un formulaire réussi vous sera finalement soumis. Nous voulons donc simplement changer cela parce que cela semble réel, très mauvais actuellement . Change ça. Changez le texte ici en blanc. Parfait Et puis que se passe-t-il en cas d'échec ? Erreur. Parfait Ça a l'air bien. Génial Donc, lorsque nous l' essayons réellement, nous y allons. Enlevons-le vraiment. Parfait Allons-y. Essayons-le. OK, donc Scott Lancaster, scott@gmail.com. J'adore les cygnes. OK, inscrivez-vous, envoyez-moi un message, et cela ne fonctionne pas en mode aperçu. Mais si cela a réellement été publié, c'est ce que nous allons faire maintenant, et si nous le consultons en ligne, si nous allons en bas de page et que nous le testons pour de vrai, alors j'adore le point d' exclamation de Burger Un message, une réussite. Nous avons donc littéralement créé un formulaire en 10 minutes ou 15 minutes. Et, tu sais, ce n'est pas le plus beau formulaire au monde. Évidemment, vous pouvez prendre plus de temps et chercher l'inspiration autour de vous. Mais maintenant, vous savez exactement comment modifier un formulaire et même créer un formulaire à partir de zéro. Nous venons de le faire nous-mêmes au cours des dix ou 15 dernières minutes. Vous pouvez donc créer un formulaire à partir de zéro, mais n'oubliez pas non plus que les modèles que nous allons vous fournir dans le cadre de ce cours contiennent tous des formulaires déjà préparés pour vous Vous n'avez donc pas à créer un formulaire à partir de zéro si vous ne le souhaitez pas. Quoi qu'il en soit, j'espère vraiment que cette leçon vous sera utile, et j'espère vraiment que vous aimerez créer formulaires pour votre site Web à l'avenir. J'ai hâte de vous voir lors de la prochaine leçon. On se voit là-bas. 46. Webflow 101 : Barre de navigation: OK, supposons, par exemple, que vous souhaitiez ajouter une barre de navigation à votre site Web. Encore une fois, les modèles que vous alliez utiliser dans ce cours comporteront tous des barres de navigation déjà intégrées. Mais si vous souhaitez créer votre site Web à partir de zéro, vous pouvez trouver la barre de navigation juste en bas. Et il vous suffit de le faire glisser vers le haut. Laisse-le aller. Et voilà, Presto, vous avez votre barre de navigation. Maintenant, une fois votre barre de navigation configurée, il ne vous reste plus qu'à la styliser et à ajouter votre logo, par exemple. Nous allons donc passer à la petite boîte de la marque ici. Ensuite, ce que nous devons faire, c'est essentiellement rentrer chez nous. Donc, chaque fois que vous appuyez sur cette touche, quelle que soit la page sur laquelle elle se trouve, cela nous ramène automatiquement à la page d'accueil, c'est ce que nous voulons, d'accord ? L'étape suivante consiste donc à commencer à styliser la barre de navigation Nous allons donc passer au style et cliquer sur la barre de navigation. Nous allons descendre, et nous allons le rendre beau et blanc. Je me démarque donc. Parfait. De plus, je veux ajouter un peu d'espace et de rembourrage entre le haut et le bas Je veux donc simplement maintenir l' option enfoncée et ajouter environ huit pixels de rembourrage de chaque côté, ce qui est bien Maintenant, je veux mettre un logo à l'intérieur. Alors, comment puis-je m'y prendre ? Eh bien, passez au signe plus jusqu'à l'image. Ajoutez l'image à l'intérieur de la boîte. Comme vous pouvez le voir ici, l'image se trouve à l'intérieur de la boîte à liens de la marque. Et puis il ne me reste plus qu'à ajouter le logo. Maintenant, en ce qui concerne le logo d'une marque, il y a un logo sur lequel je travaille depuis un certain temps une petite entreprise que je suis créer, appelée Amazon, , créé par une petite entreprise que je suis en train de créer, appelée Amazon, et oui, si vous en avez entendu parler, alors félicitations. Je ne pense pas que beaucoup de gens aient entendu parler de nous, mais nous y arrivons lentement mais sûrement. Maintenant, comme vous pouvez le voir, ce logo est en quelque sorte attaché au haut du conteneur pour une raison quelconque. Et pour être honnête, je ne sais pas vraiment pourquoi. Donc, ce que nous pouvons faire pour résoudre ce problème, c'est simplement ajouter un peu de rembourrage pour le réduire. Et le logo Presto est maintenant au milieu. Il ne nous reste plus qu' à changer le nombril. À ce stade, vous devriez savoir de quelles pages vous avez besoin pour votre site Web. Ainsi, par exemple, nous n'avons pas besoin d'une page d'accueil car le lien situé sous l'image renvoie directement à la page d'accueil, et il nous y amène toujours, quelle que soit la page publiée. Nous n'avons donc pas réellement besoin d'un lien vers la page d'accueil dans notre option de navigation. Nous avons donc tout ce qu'il faut savoir sur nous. Peut-être que nous avons besoin d'un contact. Ouais. Et puis je pense que nous avons besoin de services. Maintenant, je veux ajouter un lien de navigation supplémentaire ici pour les services. Mais comment puis-je m'y prendre ? Eh bien, nous pouvons simplement copier-coller, à propos de nous. Changez cela en services, et voilà. Donc, comme vous pouvez le voir ici. Ça a l'air plutôt bien. Nous avons le logo, qui nous ramène à la page d'accueil. Nous avons également abordé les questions qui nous concernent, les services, les moyens de nous contacter. Maintenant, pour le moment, ça n'a pas l'air mal, mais ça n'a pas l' air trop beau non plus, non ? Alors, que pouvons-nous faire pour donner un peu vie à ces éléments ? Eh bien, ce que nous pourrions faire, c'est réduire un peu la couleur ici, peut-être à ceci. Ensuite, nous pouvons simplement le copier pour chacun des éléments. Et c'est un peu la même approche qu'Apple. Avec ce site Web, et j' adore la façon dont ils le font également. D'accord ? Nous avons donc les trois options. Maintenant, peut-être voulons-nous ajouter un peu d' espace entre eux, peut-être 25 ou 25 également. Parfait, il y a un peu plus d'espace. Et puis, lorsque vous passez la souris dessus, je veux qu'ils deviennent bien plus sombres. Allons-y. J'ai l'air tellement mieux. Et nous appuyons également sur Selected. Lorsqu'elle est sélectionnée, lorsqu'elle est pressée. Nous devrions également passer à cette option. Parfait. Vous pouvez donc voir ici comment il devient gris plus foncé lorsque nous le survolons et lorsque nous appuyons dessus Il suffit donc de faire exactement la même chose pour chacune de ces autres options. Génial Ensuite, il ne nous reste plus qu'à revenir ici et à sélectionner les transitions. Toutes les propriétés. Environ 425 devraient suffire. Propriétés 425. Assurez-vous simplement qu'ils sont tous identiques pour qu' ils soient beaux et cohérents, ce qui est génial. Génial Et maintenant, vous pouvez voir qu'il a l'air super propre et super professionnel. Ils l'ont donc. Vous savez comment créer une barre de navigation très simplement sur votre site Web avec un minimum de tracas. N'oubliez pas que les modèles que nous proposons dans le cours comportent tous des barres de navigation déjà intégrées. Vous n'êtes pas obligé de faire tout ce travail, mais je veux juste m' assurer que vous avez la pleine capacité de tout créer sur votre site Web à partir de zéro , au cas où vous le souhaiteriez. J'espère que cette leçon vous sera utile, et je vous verrai dans la prochaine. 47. Webflow 101 : Symboles: D'accord, alors comment pouvez-vous créer des symboles pour vous faire gagner beaucoup de temps lors de la création de votre site Web ? Eh bien, laissez-moi vous montrer comment faire. Donc, ce petit symbole ici, excusez le jeu de mots, est essentiellement ce que nous aimons appeler des symboles dans le flux Web Vous pouvez donc les appeler composants ou symboles. J'aime les appeler des symboles parce que vous pouvez les utiliser pour répéter certains éléments de votre site Web sur l'ensemble de votre site Web avec un minimum de tracas. Et le mieux, c'est lorsque vous créez un symbole, comme celui-ci, et que vous créez finalement ce doublon. Ensuite, lorsque vous modifiez quelque chose dans cet élément en particulier, cela le change sur l'ensemble du site Web. Maintenant, cela peut être très utile car, par exemple, voyons que nous voulons le créer sous forme de symbole. Nous allons donc à cette section, nous cliquons simplement dessus, nous créons cette section. Voici notre section d'information. Parfait. Nous avons donc maintenant un nouveau symbole ici. Supposons, par exemple, que nous voulions ajouter l'un d'entre eux plus bas dans la page, d'accord ? Alors on le prend, on le copie, on le colle. Nous y voilà. Nous avons donc maintenant deux sections sur quatre au bas de la page. Maintenant, si je change cela ici, et que vous devez cliquer sur deux symboles pour les changer également, vous cliquerez dessus , puis cela vous permettra de le modifier. Vous allez dire la même chose que Scott est moche, plaisante, alors devinez quoi ? Lorsque vous allez en bas, cela le change automatiquement. Maintenant, cela peut être très utile pour des choses comme formulaires si vous souhaitez avoir le même formulaire au bas de chaque page, ou si vous souhaitez ajouter des avis, et si vous souhaitez mettre à jour une seule case sans à jour chaque avis sur l'ensemble du site Web et si vous voulez avis sur chaque page. Cela peut être super super utile. Utilisez donc des symboles, chaque fois que vous voulez gagner du temps, utilisez-les pour votre barre NaF, utilisez-les pour les pieds de page, et vous pouvez avoir plusieurs symboles, peu près autant que vous le souhaitez pour vous faire gagner le temps dont vous avez Quoi qu'il en soit, j'espère vraiment que ce petit conseil vous sera utile. Et j'ai hâte de vous voir lors de la prochaine leçon. À bientôt. 48. Webflow 101 : boîtes à lumière: OK, alors qu'est-ce qu'une lightbox et comment pouvez-vous l'utiliser ? En fait, j'utilise beaucoup les lightboxes sur mon site Web, où j'ai essentiellement un petit bouton créé par un lien vers une lightbox, lequel vous pouvez finalement voir ouvertures pour présenter une sorte de vidéo ou d'image Je l'utilise donc ici, mais je utilise aussi un peu plus bas sorte que lorsque quelqu'un veut regarder des témoignages vidéo de clients, il lui suffit de cliquer sur ce lien et la vidéo apparaît automatiquement Maintenant, il s'agit d'un moyen très simple faire apparaître des vidéos et des images, peu importe ce qui est pertinent pour votre marque en particulier, peu importe ce qui est pertinent pour votre marque en particulier, lorsque quelqu'un clique sur un lien, et c'est un moyen très simple de le faire. Et je vais vous montrer comment utiliser un lien Lightbox dans cette vidéo Bon, nous sommes donc de retour sur notre petit site expérimental, où nous ne nous soucions pas vraiment ce qui se passe en cas de panne, et je n'ai pas vraiment envie de trop m' embêter avec site de mon agence de Brandon parce que je peaufine ce site Web depuis dix ans, et je ne veux rien casser Alors allons-y et voyons comment nous pouvons finalement utiliser cette fonction de lien Lightbox pour obtenir, vous savez, une expérience vraiment agréable pour nos utilisateurs lorsqu'ils visitent notre site Web La fonction lightbox est donc là. Nous allons donc l'ajouter au conteneur. Et pour une raison ou une autre, il ne veut pas y entrer. Donc, ce que je vais faire, c'est juste le déposer ici. Ensuite, ce que je peux faire, c'est simplement copier. Ainsi, lorsque vous faites cela, une image est automatiquement placée dans le lien Lightbox Donc, ce que je vais faire, c'est que je ne veux pas l'image réelle, je vais juste supprimer l'image et prendre la lightbox Ling, donc je vais la copier et la percer Alors je vais me lancer ici. Encore une fois, n'oubliez pas que vous devez double-cliquer pour accéder aux symboles, comme nous l'avons mentionné dans la leçon précédente. Double-cliquez. Maintenant nous sommes à l'intérieur. Vous pouvez voir que cette section est surlignée. Ensuite, je souhaite supprimer ce bouton et ajouter un lien lightbox Parfait. Voilà. Nous avons donc maintenant ajouté le lien lightbox à cette section particulière Maintenant, je ne veux pas que le lien de la lightbox soit en dessous. Je veux que ce soit sur le côté, d'accord ? Voyons donc comment nous pouvons le faire. Je vais donc simplement le copier-coller à nouveau. Le bouton se trouve à l'intérieur du bloc D. Donc, si j'appuie sur Coller ici, puis sur faire, ça passe sur le côté. Maintenant, je veux faire en sorte que ce lien lightbox ressemble à un bouton. Alors, comment s'y prendre ? Eh bien, vous pensez peut-être pouvoir le faire en ajoutant simplement un bouton. Cependant, vous ne pouvez pas utiliser d'élément renvoyant ou associé à un lien dans le lien Lightbox, car cela créerait de la confusion pour l'ordinateur et pour le flux Web en tant que plate-forme Vous leur dites essentiellement de faire deux choses très différentes avec le même élément, ce qui ne fonctionnera tout simplement pas. Nous ne pouvons donc pas ajouter de bouton. Alors, comment pouvons-nous le faire ? Eh bien, si nous considérons le lien Lightbox un peu comme le bloc de liens, et si vous avez suivi la leçon sur le blocage de liens un peu plus tôt dans ce cours, vous saurez exactement ce que nous allons faire Donc, ce que nous pouvons faire, c'est que, même si nous ne pouvons pas y mettre de bouton, nous pouvons y mettre du texte, donc nous allons ajouter du texte, ce qui est génial. Maintenant, ne vous inquiétez pas si cela est souligné pour le moment. Tout cela va changer dans peu de temps. Regardez les critiques. OK, c'est tellement parfait. Nous avons donc le texte. Nous allons descendre ici, ce qui est actuellement souligné. Souvenez-vous de la leçon de typographie. Si vous ne l'avez pas encore vérifié, jetez-y un coup d'œil maintenant. Nous allons le supprimer, puis nous supprimerons le lien associé à. Donc, pour supprimer cette ligne, nous allons d' abord et avant tout changer la couleur du texte. Ensuite, ce que nous allons faire, c'est accéder au lien Lightbox, et nous allons supprimer la ligne située en dessous, comme ça Nous avons maintenant le texte à l'intérieur du lien Lightbox, de sorte que chaque fois que vous appuyez dessus, une vidéo apparaît Maintenant, comment ajouter la vidéo ? Il suffit donc de sélectionner le lien Lightbox, d' aller dans les paramètres. Et ce que vous verrez en gros, c'est ce on appelle du contenu multimédia dans les paramètres des liens de Lightbox Il ne vous reste plus qu'à ajouter une image ou une vidéo. Maintenant, en ajoutant la vidéo, il vous suffit de la télécharger sur Vimeo, puis ajouter le lien dans cette section particulière, qui présentera la vidéo lorsqu'elle apparaîtra. Ou vous pouvez simplement ajouter des images. Maintenant, l'image qui est actuellement en place est ce petit espace réservé, mais nous ne voulons pas que cela se produise Nous allons donc essentiellement remplacer cela par cette photo de cet excellent monsieur ici présent. Alors maintenant, quand nous y retournerons. Par exemple, vous pouvez également ajouter d'autres médias. Nous pouvons donc ajouter cette image. Ensuite, nous pourrions ajouter une autre image. Vous pouvez donc ajouter autant d' images que vous le souhaitez. Maintenant, une chose à retenir est que vous ne pouvez pas ajouter d'images et de vidéos, et vous ne pouvez pas non plus ajouter deux vidéos. D'accord, vous devrez essentiellement éditer ces deux vidéos ensemble pour en faire une seule. OK, nous avons donc trois images en jeu maintenant. Donc, si nous cliquons dessus, tout devrait être configuré. Passons donc à cette section, cliquez dessus. Et bien sûr, trois images apparaissent. Maintenant, vous pouvez utiliser cette fonction particulière pour de nombreuses choses différentes, et c'est juste un endroit très simple propre pour tout cacher. Maintenant, une chose que vous pourriez faire, par exemple, c'est que si vous vouliez que votre portfolio soit, vous savez, un peu plus propre et moins désordonné, vous pourriez finalement ajouter un lien lightbox vers cette section de la grille Et puis, dans cette image en particulier, vous pourriez finalement changer cette image pour ce type, encore une fois. Et puis quand on clique dessus, vous pouvez accéder aux paramètres et ajouter ce type Et vous pouvez réellement ajouter des vidéos aux médias ainsi que des images en même temps. Cependant, je ne le suggérerais pas simplement parce que cela peut être un peu déroutant pour l'utilisateur. Mais nous pouvons ajouter de nombreuses images différentes et créer une expérience beaucoup plus propre pour l'utilisateur. Par exemple, ajoutons simplement une autre image ici. Nous y voilà. Maintenant, par exemple, au lieu de laisser notre portefeuille tourner, nous pouvons évidemment, vous savez, ajouter un peu de marge en dessous, comme ça. Nous y voilà. Maintenant, par exemple, lorsque nous consultons notre portfolio, au lieu d'avoir toutes les images que nous avons, nous pourrions avoir, vous savez, si nous avions plus d'images de ce monsieur en particulier, nous pourrions l'avoir de telle sorte que lorsque quelqu'un clique dessus, les autres images pertinentes pour cette photo en particulier soient mises en valeur pertinentes pour cette photo en particulier soient peut donc s' agir de projets différents, puis lorsque vous cliquez dessus , plus de photos, plus de photos, vous savez, plus de médias, plus d'exemples liés à ce projet spécifique. Bien, j' espère vraiment que vous avez apprécié cette petite leçon sur l'utilisation de la fonction Lightbox, et j'ai hâte de vous voir dans la prochaine leçon. À bientôt. 49. Webflow 101 : curseurs: D'accord, alors comment pouvez-vous utiliser les curseurs dans le flux Web pour créer une expérience utilisateur exceptionnelle Eh bien, nous avons récemment organisé fonction Ear Slider pour la marque d' oreilles avec laquelle nous travaillions, qui met en valeur tous les témoignages de cette entreprise en particulier Alors, comment créer une excellente fonction de slider sur votre site Web Eh bien, c'est en fait très simple. Donc, si vous descendez, nous ajouterons une autre petite section ici, que nous appellerons la section du curseur Bien qu'il ne veuille pas vraiment y aller pour une raison ou une autre. Voilà. Nous y sommes finalement arrivés. Nous avons donc maintenant la section. Ajoutons un contenant à l'intérieur. Ajoutons un peu de rembourrage. Disons 100, 100 ici, 30 de ce côté également. Nous y voilà. Donc, en ce qui concerne l' ajout d'un slider, nous allons simplement ici Nous passons à la fonction de diapositive, qui se trouve ici. Nous le mettons dans le conteneur, et le curseur est déjà presque terminé Comment pouvons-nous commencer à le modifier ? Eh bien, la première chose que vous devez faire est de modifier votre curseur maintenant Alors, descends ici. Maintenant, il y a des tonnes d'options différentes ici. Maintenant, ce que j'aime, c'est qu'en fin de compte, j'aime arranger les diapositives de manière à ce qu'elles soient aussi minimes que possible. Ce que je veux dire par là, c'est que je n'aime pas vraiment qu'ils soient numérotés. Plus personne n'utilise vraiment de chiffres dans les diapositives. C'est très démodé. Cela a l'air beaucoup plus propre et beaucoup plus beau. Vous pouvez également choisir s' il est arrondi ou carré, afin de voir ici comment il évolue Je vais les garder arrondis. Maintenant, vous pouvez également ajouter une ombre si vous le souhaitez vraiment, ce qui peut parfois sembler plutôt cool, mais j'aime qu'elle soit belle et nette, agréable et minimale. Vous pouvez également inverser les couleurs afin de les assombrir. Tout dépend évidemment du type de site Web que vous avez. Mais en ce qui concerne ce cas particulier, je vais les garder blancs et gris simplement parce que j' aime le minimalisme Maintenant, vous pouvez également augmenter l'espacement entre les diapositives si vous voulez quelque chose d'un peu plus moderne et futuriste, vous pouvez l'ajouter à dix peut-être Mais dans ce but, je vais juste m'en tenir à cinq. En ce qui concerne l'ajout de diapositives, vous pouvez ajouter des diapositives assez facilement. Ce que je vais faire, c'est parce qu'il est assez difficile de voir ces boutons sur une diapositive, par exemple si la diapositive est blanche. Maintenant, d'habitude, ce que j'aime faire, c'est prendre le slider Nav et le placer en dehors du slider lui-même Mais dans ce cas, le fond est blanc, je vais juste le garder tel quel. Sinon, je devrais essentiellement le modifier pour avoir une ombre ou pour inverser les couleurs, par exemple, et cela me permettrait de le mettre ensuite hors des sentiers battus Mais dans ce cas, je vais juste garder les choses telles qu'elles sont. Donc, maintenant, nous avons réellement le slider. Comment pouvons-nous commencer à l'utiliser ? Donc, pour ajouter une diapositive, il vous suffit d'ajouter la diapositive ici. Nous avons donc maintenant trois diapositives réunies. Et pour accéder à ces diapositives, il suffit d'appuyer sur ce bouton dans les paramètres. Maintenant, nous sommes à la diapositive 2, maintenant aux diapositives 3, maintenant la diapositive 1, donc c'est aussi simple que cela. Alors, comment pouvons-nous réellement commencer à éditer ces diapositives ? Eh bien, cette diapositive ressemble essentiellement à un bloc dI. Et ce que je veux dire par un bloc dI, c'est que vous pouvez en faire à peu près tout ce que vous voulez. Vous pouvez donc, vous savez, ajouter, par exemple, une grille. Ou vous pourriez faire quelque chose de plus simple en fait. Vous pouvez simplement ajouter une image, par exemple, qui sera insérée à l'intérieur. Choisissez une image. Choisissons le cygne. OK. Ensuite, vous pouvez simplement ajouter une sorte d'image. Choisissez l'image ici, et nous allons la centrer, si c'est vous l'image. De plus, nous y avons le cygne. Vous pouvez donc simplement ajouter une image comme celle-ci si vous le souhaitez vraiment, mais vous devrez ensuite passer à la diapositive 2. Et dans la diapositive 2, vous ajouteriez une autre image à l'intérieur. Encore une fois, sélectionnez simplement l'image qui vous convient le mieux. Ensuite, vous pouvez simplement le placer comme bon vous semble. Voilà. Donc, si nous y jouons réellement maintenant, vous pouvez voir qu'il fait défiler différentes images Maintenant, vous pouvez l'utiliser pour un portfolio, peut-être pour des produits ou pour tout ce dont vous avez besoin pour votre site Web spécifique. Mais pour ajouter une diapositive, c'est vraiment très simple. Et finalement, si vous voulez faire quelque chose d'un peu plus, je ne sais pas. Complexe. Alors tu pourrais. Permettez-moi de retirer cette boîte à images de l'intérieur. Parfait. Nous revenons donc au point de départ. Maintenant, si vous vouliez créer quelque chose comme la section des témoignages, que je vous ai montrée au début de cette leçon, nous pourrions le faire un peu comme ceci Je vais donc simplement en créer un très simple. C'est donc un diblock, mais on peut mettre un diblock à l'intérieur d'un diblock. Alors, comment faire en le slider se joue automatiquement tout seul Nous n'avons donc pas besoin d'utiliser ces flèches, et cela se produit automatiquement pour l'utilisateur. Eh bien, ce que nous pouvons faire, c'est nous pouvons avoir la durée ici, qui est essentiellement de 5 secondes. Ensuite, ce que nous pouvons faire, c'est lire automatiquement les diapositives. Temps et délais. À moins que vous ne vouliez un délai, je suggère de mettre zéro. Nous pouvons donc supprimer ces icônes, mais cela dépend entièrement de vous évidemment de ce que vous voulez. Vous pouvez soit supprimer cette section en particulier ici en cliquant simplement dessus. Vous pouvez également cliquer sur la flèche gauche et la masquer comme ceci, pour que ce soit beaucoup plus propre. Et puis, lorsque nous y jouons, vous pouvez voir ici que les éléments changeront d'eux-mêmes au bout de 5 secondes environ. Voilà. Au bout de 5 secondes, il passe automatiquement à la diapositive suivante. Maintenant que c'est fait, nous pouvons commencer à ajouter des avis. Alors, comment s'y prendre ? Eh bien, pour le moment, l'élément lui-même est gris. Il a donc un fond gris. Maintenant, ce n'est pas ce que nous voulons. Nous voulons qu'il soit totalement transparent. Ce que nous allons faire ensuite, c'est parce que nous ne pouvons pas vraiment voir ces éléments en bas pour le moment. Ce que nous allons faire, c'est régler les paramètres, ajouter une ombre et peut-être même inverser les couleurs Nous y voilà. En fait, ça a l'air bien mieux. Maintenant, ce que nous allons faire maintenant, c'est commencer à ajouter les avis, afin que nous puissions ajouter les avis en ajoutant simplement une grille, qui se trouve ici. Ensuite, nous allons supprimer cette section inférieure car nous n'avons pas besoin de trop de sections en bas. Nous n'en voulons que deux. Ensuite, dans chacun d'entre eux, nous allons ajouter un bloc div. Nous allons donc ajouter un bloc dI ici. Nous allons ajouter un autre diblock ici. Maintenant, une petite astuce que je vais vous montrer ressemble beaucoup à celles que je vous ai montrées dans les leçons précédentes la copie et le perçage de blocs di, vous n'avez pas besoin de blocs di dans ces deux sections Vous devez concevoir un diblock, puis, lorsque vous le faites, vous pouvez le multiplier l' ensemble du slider Donc, par exemple, ici, nous allons simplement ajouter un en-tête très simple. Pour le nom de la personne, paragraphe ci-dessous. Nous allons ajouter une sorte d'image, qui devra être placée dans un autre bloc dI. Nous allons donc ajouter une autre image, qui devrait se trouver ici. Nous y voilà. Parfait. Nous avons donc maintenant notre en-tête, qui est le nom de la personne. Nous avons leur avis. Jupes. Le cours Webflow ne l'est pas C'est mauvais du tout. J'ai réussi à payer mon vendeur de lait cette semaine. Bonne nouvelle. Et voilà, il ne nous reste plus qu'à vérifier l'orthographe. Maintenant, pour cela, ce que nous pouvons faire, c'est ajouter une critique cinq étoiles, par exemple. Passons donc à Google, avis Five Star, aux images. Et ici, ce que nous pouvons voir, ce sont essentiellement cinq étoiles. Maintenant, ça n'a pas l'air très bon. En fait, je préfère celui-ci . Celui-ci est au format PNG, nous allons donc utiliser celui-ci. Enregistrez donc cette image. Ensuite, nous allons enregistrer cela sur le bureau. Évidemment, vous pouvez créer le vôtre si vous le souhaitez vraiment , choisir une image, surligner. Et puis les cinq étoiles devraient bien apparaître dans le viseur. Maintenant, vous pouvez voir ici que vous ne pouvez pas vraiment les voir. Maintenant, c'est parce que l'image est trop grande. Donc, ce que nous pouvons faire, c'est le rendre plus petit, c'est génial. C'est une bonne chose. Ensuite, ce que nous pouvons faire, c'est parce qu' gros, cette image est un carré, ce que je n' aime pas vraiment. Je pense que nous devrions plutôt faire, et vous pouvez le faire un peu plus professionnellement, mais je vous montre juste que pour être rapide donnez-moi quatre étoiles Nous y voilà. Au lieu d'utiliser cette version carrée, je vais essentiellement la changer avec la capture d'écran, qui est simplement un peu meilleure pour ajouter un formulaire. Et comme si tu ne le savais pas, c'est maintenant. C'est peut-être un peu petit, juste un peu plus grand. Voilà. Nous avons donc maintenant la critique. Maintenant, comment pouvons-nous le rendre un peu plus beau ? Eh bien, nous avons le diblock ? Nous pouvons lui donner un peu de rembourrage, je pense, juste pour lui donner un peu plus d'apparence quand nous partons Ensuite, ce que nous pouvons faire, c'est aussi courber un peu les coins. Nous pouvons ajouter une petite ombre, déplacer ma tête vers l'extérieur. À l'extérieur. Maintenant, j'ai une petite ombre, pour une raison ou une autre, les ombres étant coupées en haut et en bas du curseur Et la raison en est que cela se chevauche essentiellement avec la fonction de diapositive elle-même Donc, ce que nous devons faire, c'est ajouter un peu de rembourrage le dessus et sur les côtés Je veux juste en faire 15 juste pour être gentil et lui donner un bon chiffre. 15, 15. Et tout cela ne fait que donner de l'espace à l' ombre pour respirer, n'est-ce pas ? Je sais que c'est une ombre très simple. Voyons voir ce que dit David. Nous y voilà. Donc David Copperfield. Nous y voilà. David C. Encore une fois, ce que j'ai déjà mentionné, c'est que nous pouvons simplement les dupliquer et en créer autant que nous le souhaitons pour être totalement honnêtes Nous pouvons donc même dupliquer la diapositive elle-même si nous ne voulons pas refaire les choses encore et encore. Cela vient donc de Parla H. Dites littéralement exactement la même chose parce que, de toute évidence le cours de webflow est fantastique, même si elle ne serait pas Allons ici. Nous allons passer à la diapositive suivante, et cette diapositive est vide. Nous devons donc tout reconstruire à partir de zéro. Maintenant, je n'ai vraiment pas envie de faire ça, est-ce pas ? Supprimons donc simplement cela. Passons à cette diapositive, appuyez simplement sur Copier, puis sur Masquer et coller. Nous avons donc maintenant plusieurs avis, que nous pouvons modifier et modifier après avoir conçu la première boîte. Ainsi, une fois que nous avons conçu cette première boîte, nous n'avons littéralement plus besoin de travailler. Tout ce que nous avons à faire est copier-coller les autres avis, ajouter le nombre d' étoiles correspondant nos produits ou services, par exemple, et vous pourrez ensuite les gérer très facilement. Si vous avez des questions concernant cet élément en particulier, je sais que c'est l'un des éléments les plus compliqués de Webflow, mais pour être honnête, c'est assez simple et assez simple Donc, si vous avez besoin d'une assistance supplémentaire, veuillez me contacter et me le faire savoir, mais cela devrait être à peu près tout. Je vous verrai donc lors de la prochaine leçon. Vois ça. 50. Webflow 101 : onglets: D'accord, alors qu'est-ce qu' un onglet et comment pouvez-vous les utiliser pour créer de belles fonctionnalités sur votre site Web ? Eh bien, nous utilisons la fonction onglets pour faire de nombreuses choses sur le site Web de mon agence de marque. Ainsi, par exemple, nous organiserons les articles de blog d'une manière très simple et facile à comprendre. Et le plus important, je pense, c'est quand nous l'utilisons dans notre portefeuille. Ainsi, par exemple, si quelqu'un vient nous et chez la marque de fitness R A , par exemple, il pourra finalement venir voir le type de travail que nous faisons. S'ils recherchent un nom de marque, ils peuvent consulter les différents projets de dénomination de marque sur lesquels nous avons travaillé. autre côté, s'il s' agit d'une entreprise de commerce électronique, de fitness, par exemple, et qu'ils veulent savoir, d'accord, quels types de services ou avec quels types de services ou d' entreprises vous avez travaillé dans le domaine du commerce, ils pourraient venir ici, consulter le commerce électronique et découvrir toutes les marques liées au commerce électronique avec lesquelles nous avons travaillé au fil des ans Cela donne simplement à l'utilisateur un moyen très simple et facile de trouver les informations dont il l'utilisateur un moyen très simple et facile a besoin, car lorsqu'un client cherche à engager une agence de marque, par exemple, recherche des exemples de travaux pertinents par rapport à ce qu' il souhaite réaliser pour sa marque. Donc c'est vraiment génial. Les onglets sont donc un excellent moyen organiser les informations sur votre site Web afin de vous permettre de donner à l'utilisateur ce il a besoin de manière beaucoup plus simple et plus facile. OK. Nous sommes donc de retour sur notre petit site de test, que nous n'avons pas vraiment envie de trop déchiffrer parce que nous ne faisons que jouer. Comment utilisez-vous réellement les onglets ? OK, ajoutons donc une section ici entre ces deux éléments. S'il veut me le permettre. Oui, s'il ne vous permet pas d'ajouter des sections ou d'ajouter des éléments à des endroits particuliers, copiez-le et collez-le ou utilisez cette barre de navigation ici pour l'afficher exactement où vous le souhaitez, et ce sera un peu moins compliqué Au container. Ensuite, ce que nous allons faire, c'est ajouter un peu de rembourrage, comme d'habitude Donc c'est peut-être juste oui, 65 ans, c'est bien. Et nous en mettrons 40 de chaque côté. Ça a l'air bien aussi. Parfait. OK, alors maintenant c'est en place. Nous allons passer à la fonction des onglets ici et la déposer directement à l'intérieur. Maintenant, ce que vous pouvez voir ici, c'est que nous avons trois onglets différents. Et si nous consultons réellement le site Web, vous pouvez voir que chacun de ces onglets est actuellement actif, d'accord ? Alors, comment commencer à utiliser ces onglets pour en faire quelque chose d' utile ? Eh bien, faisons quelque chose très simple, d' abord et avant tout. Ce que je veux faire, c'est présenter les différents types d'images que j'ai prises en tant que photographe. Je ne suis pas un vrai photographe, mais je l'utilise simplement comme exemple où vous pouvez sélectionner le type d' image en fonction de l' onglet sélectionné. Donc, par exemple, je vais mettre des animaux, des personnes, des bâtiments. OK ? Je suis donc photographe et je crée cette fonction d'onglet pour la présenter à des clients potentiels ? S'ils veulent quelqu'un qui puisse prendre une photo d'une personne, alors qui ils veulent. Et si vous voulez quelqu'un qui puisse prendre des photos de bâtiments, voici quelques exemples de bâtiments que j'ai photographiés. Et évidemment, les animaux, ça va de soi, les animaux sont géniaux. Alors, comment pouvons-nous réellement commencer à faire en sorte que cela soit beau ? Et comment commencer à ajouter du contenu aux onglets ? Plongeons-nous donc d' abord et avant tout. Alors, comment pouvons-nous réellement commencer à styliser ce menu à onglets ? Donc, pour le faire, il suffit d'aller sur le lien de l'onglet. Couleur. Et on peut colorer celui-ci en vert. Par exemple, rendons également ce texte blanc. Le noir et le vert ne me conviennent donc pas vraiment. Oh, le contraste est extrêmement faible. Améliorons un peu les choses. Légèrement mieux. OK. Parfait. Pour les gens, choisissons à nouveau. Optez pour le blanc. Mais cette fois, c'est parti pour un beau rouge. Cela convient à ces animaux. OK. Parfait. Maintenant, ce n'est pas de loin la palette de couleurs la plus esthétique, mais je veux simplement vous montrer et garder les choses vraiment simples et claires pendant que nous développons OK. Voilà. Parfait. Ajoutons simplement ceci à cela. Vous. Parfait. OK, maintenant nous devons commencer à ajouter ces images ici, donc ce que nous pouvons faire, c'est simplement ajouter un bloc DIF. Dans l'épingle à onglets. Maintenant, un onglet panoramique est essentiellement un bloc dI à l'intérieur de la fonction onglets, alors gardez cela à l' esprit, car cela vous simplifiera les choses. Maintenant, si nous sélectionnons réellement un diblock, nous pouvons alors commencer à ajouter l'image ou les images du canard ou du cygne que nous avons Nous y voilà. Parfait. Et puis, si nous nous adressons aux gens, pourquoi cela ne change-t-il pas ? Hum. Intéressant. Eh bien, ce que nous devons faire c'est simplement aller dans le menu des onglets, cliquer sur les paramètres. Et quand on passe aux paramètres, vous pouvez voir cette petite fonctionnalité ici. Et lorsque nous cliquons sur l'onglet deux, cela signifie que l'onglet deux est sélectionné, ce qui nous permet de recommencer à ajouter notre diblock. Ajoutez notre image, puis nous pourrons ajouter la photo d'une personne. Est-ce une personne ? Parfait. Ensuite, nous faisons exactement la même chose pour la section du bâtiment, ajoutez Dave Block. Et une fois que vous aurez commencé à utiliser ces éléments, il vous sera beaucoup plus facile de créer des sites Web. Tout cela passe par la pratique. En fait, je me souviens de la première fois que j'ai commencé à créer des sites Web et que j'ai dû apprendre le webflow en une semaine, ce qui, vous savez, était certainement très stressant pour le projet sur lequel je travaillais parce que le client voulait vraiment utiliser le flux Web Mais après une semaine passée à vraiment se concentrer sur l'apprentissage des fondamentaux, on s'y habitue vraiment très rapidement. Maintenant, je suis sûr que vous avez remarqué qu'en gros, selon lequel de ces boutons est sélectionné, cela change les boutons situés en haut. Maintenant, évidemment, nous ne voulons pas que cela se produise. Donc, ce que je vais faire, c'est le style Tab One. Ainsi, lorsqu'il est réellement sélectionné, il est associé à du courant. Maintenant, ce que nous allons faire, c'est passer à cet onglet 2. Nous allons le faire avec ça. Nous y voilà. Vous pouvez être très créatif avec, vous savez, façon dont ils sont disposés, et, vous savez, vous pouvez les faire apparaître avec différentes couleurs, par exemple. Mais en fin de compte, ce que vous essayez de faire, simplement vous assurer que c'est cohérent dans l'ensemble de la fonction d'onglet. Donc, la prochaine étape que nous allons faire est p, allez ici, et nous pouvons passer à cette section. Nous y voilà. Cela doit donc être mis à jour. Nous y voilà. Ensuite, il ne nous reste plus qu'à passer au dernier, qui est l'onglet 3. Donc, pour une raison ou une autre, celui-ci est sélectionné, donc cela va nous donner un peu de chance, mais passons à cette section ici Nous y voilà. Alors maintenant, lorsque nous y jouons, lorsque nous sélectionnons les différentes options, vous pouvez présenter certaines images pertinentes pour l'onglet spécifique que nous avons configuré. Et tu peux l'utiliser pour à peu près tout. Vous pouvez l'utiliser pour présenter des projets. Vous pouvez le choisir pour la vitrine et les différents produits. Vous pouvez même l'utiliser pour présenter différents packages, n'est-ce pas ? Vous pourriez avoir un package de base, un package pro et un package plus. Tous ces éléments incluent des éléments différents, et lorsque vous sélectionnez ce package, il peut finalement présenter les différents types de packages et ce qui est inclus dans ce package Et lorsque vous serez un peu plus avancé, vous pourrez même commencer à faire des choses comme ce que nous avons fait pour ce client ici, où il propose essentiellement les différents forfaits, à fois une option de paiement unique et une option de financement. C'est littéralement exactement la même chose que ce que nous venons de faire sur le site Web de test. La seule différence se situe au sein du bloc DIV, de l'onglet. Nous avons essentiellement simplement changé cela pour ajouter plus d'informations. Nous n' ajoutons donc pas simplement une image, mais nous ajoutons toutes ces informations ici, qui se situent évidemment, vous savez, dans le haut de gamme de la complexité que l'onglet devrait ou pourrait être. Mais je ne fais que vous montrer le potentiel réel d' utilisation appropriée des onglets, car il est très simple et facile pour la personne de naviguer entre les paiements uniques et les options de financement. C'est vraiment un excellent outil à avoir dans votre boîte à outils. Quoi qu'il en soit, j'espère vraiment que vous l'avez trouvé moins précieux. J'espère vous voir utiliser des onglets sur votre site web car ils sont super utiles si vous savez comment les utiliser correctement. J'ai donc hâte de vous voir lors de la prochaine leçon. À bientôt. 51. Webflow 101 : ajouter des boutons pour les réseaux sociaux: OK, alors comment pouvez-vous ajouter très belles icônes de réseaux sociaux sur votre site Web Web Flow ? Eh bien, c'est en fait super simple. Donc, si nous allons sur notre site Web, lequel nous ne faisons que nous embrouiller actuellement avec lequel nous ne faisons que nous embrouiller actuellement, tout au long de ce cours, nous pouvons maintenant ajouter ces boutons très facilement Donc, comme toujours, nous allons ajouter une section. Si ça me permet. Parfait. Maintenant, nous allons simplement les ajouter au centre juste pour vous montrer comment les ajouter et comment le faire manière très simple. Nous allons donc ajouter un conteneur. Comme d'habitude, nous n'allons pas ajouter de modèle pour le moment car cela ne nous est pas vraiment utile. Ensuite, dans ce conteneur, nous ajouterons un bloc dif. N'oubliez pas que la section est le terrain sur lequel se trouve la maison, le conteneur est la maison et le diblock est la pièce N'oubliez donc pas que lorsque vous créez votre site Web, vous allez devenir un k. Nous avons donc maintenant le bloc di. Maintenant, il ne nous reste qu'à ajouter, par exemple, je ne sais pas, Facebook, Instagram, Twitter ou X, par exemple. Passons à la grille. Ensuite, nous pouvons également utiliser un petit élément de grille supplémentaire. OK. Ensuite, ce que nous pouvons faire, c' est utiliser le bloc dF pour les rendre plus centraux. Nous allons donc les réunir. Le réseau est donc plus central. Ensuite, il ne nous reste plus qu'à ajouter des blocs dI dans chacune de ces sections de la grille. OK, nous avons donc configuré la structure maintenant, nous pouvons donc simplement ajouter nos éléments. Maintenant, comment ajoutons-nous nos éléments ? Eh bien, il y a plusieurs façons de le faire. Et pour être honnête, vous n'avez même pas besoin d'ajouter ces blocs di. Vous pouvez simplement utiliser directement le bloc de liens lui-même, mais personnellement, j'aime simplement ajouter des blocs dI simplement parce que cela me donne un peu plus de structure lorsque je crée mon site Web. Je peux donc simplement y déposer des blocs de liens. Maintenant, vous n'avez pas réellement besoin d'ajouter ces blocs dI. C'est exactement ce que j'aime faire parce que cela me donne un peu plus de structure avec le site Web. Mais une fois que vous avez les blocs dI, il vous suffit de déposer les blocs de liens à l'intérieur. Comme vous pouvez le constater, cela les pousse vers l'extérieur, donc je vais simplement le copier puis le percer dans chacun Maintenant, notre bloc de liens se trouve à l'intérieur chaque bloc dI de la grille à trois sections. Maintenant, comment commencer par nos icônes ? Eh bien, si nous voulons qu'ils ressemblent à ceci, nous pouvons finalement faire quelque chose sur ce site Web. Alors, où pouvons-nous réellement obtenir les icônes du site Web ? Eh bien, nous pouvons le faire de différentes manières . Donc, par exemple, si nous voulons ils s' illuminent comme ça, pour qu'ils aient l'air vraiment cool, nous pouvons aller sur Google, taper des icônes gratuites. Vous pouvez mettre un espace, ou si vous êtes paresseux comme moi, vous n' avez pas besoin d'en mettre un. Accédez à ce site Web, qui est flacon.com, puis mettons simplement des icônes de réseaux sociaux Ce qui devrait vous rester , ce sont essentiellement toutes ces différentes options d'icônes pour les réseaux sociaux Nous voulons donc Facebook, Instagram, et faisons simplement TikTok, simplement parce que pourquoi pas ? Nous allons donc le télécharger, en PNG, en téléchargement gratuit. Parfait. Nous avons donc maintenant toutes les icônes dont nous avons besoin. Maintenant, pour moi, personnellement, je vais avoir besoin obtenir et de les ajouter à mon bureau, simplement parce que c'est ainsi que fonctionne mon bel ordinateur. Pour une raison ou une autre, celui-ci ne fonctionne pas. Maintenant, une chose à retenir, lorsque vous sélectionnez les icônes de votre site Web c'est de vous assurer qu'elles sont toutes cohérentes, car si elles ne le sont pas , disons, par exemple, si vous avez deux icônes circulaires et un carré, ne seront pas très belles. Si vous regardez le site Web de Nike, ils sont tous très similaires et ils se trouvent tous exactement dans le même cercle de taille. Donc, lorsque nous les ajoutons au site Web, et que nous allons les ajouter au site Web maintenant, alors ajoutez l'image à l'intérieur, choisissez Télécharger. Nous allons choisir Instagram et TikTok. Ensuite, nous allons tous les ajouter à notre barre d'actifs. Il y a d' abord et avant tout Facebook. Ensuite, nous pouvons simplement le copier-coller à l'intérieur, puis changer les images Instagram, et celle-ci, passer à TikTok Nous allons parfaitement nous y prendre. Vous pouvez voir qu'ils sont tous de la même taille. Maintenant, ils sont évidemment bien trop gros. Alors, comment pouvons-nous les réduire ? Eh bien, nous les ajoutons simplement. Et vous pouvez voir ici que nous en avons 75 75, donc nous pourrons simplement ajouter ceci ici, 75, pour qu'ils aient tous exactement la même taille. Et puis vous y allez, vous y avez vos icônes. Alors, comment pouvez-vous réellement commencer à les associer à vos comptes de réseaux sociaux ? Eh bien, c'est vraiment facile. Accédez simplement à votre bloc de liens. Cliquez sur le petit rouage. Et puis ici, il vous suffit de mettre l'URL de votre plateforme de médias sociaux. Donc, par exemple, je vais aller sur Instagram, aller sur mon profil, cliquer sur le petit lien, et je vais juste ajouter ceci, et bien sûr, si j'y vais et que je clique sur ce lien, cela m'amènera à ma page Instagram. Maintenant, ça a l'air plutôt bien, mais ça ne semble pas aussi beau que la version de Nike. Maintenant, vous pouvez évidemment le faire blanc ou en gris ou comme bon vous semble. Mais comment obtenir ce joli petit effet de survol qui, lorsqu'un élément est surligné, apparaît en quelque sorte Eh bien, c'est en fait très simple, et nous avons abordé exactement cette même méthode dans leçons précédentes si vous ne l'avez pas déjà apprise. Alors, comment pouvons-nous le faire ? Eh bien, la meilleure chose à faire est d'accéder au bloc DIFF, descendre à l'opacité, juste ici, et de taper quelque chose comme Cela nous donne donc une apparence agréable et plus verte. Nous allons donc faire celui-ci également. Bloc Diff, 50 %. Et enfin, TikTok, 50 %. OK. Alors maintenant, si nous y jouons et que le survolons, il ne s'allume toujours pas Alors, comment le faire s'allumer ? C'est vraiment simple ? Accédez au bloc Div, passez au survol, descendez, passez à Pacity et augmentez-le. À plein régime. Faites de même ici. Survolez. Accédez à la capacité, 100 %. Génial. Nous faisons tellement de progrès. Passez la souris, 50 %, puis on y va. Ils se connectent tous bien. Maintenant, évidemment, si vous avez regardé l'une des leçons précédentes de ce cours , vous devriez l'avoir fait. Vous savez que si vous ajoutez une petite transition, elle sera un million de fois plus belle. Maintenant, juste une petite expérience, examinons les trois niveaux de transition différents que vous pouvez effectuer en termes de vitesse ou de fluidité. Donc c'est comme, vous savez, 950 c'est très, très, très élevé. Mais regardez-les. TikTok n'a donc littéralement aucun paramètre de capacité de transition, il devrait donc littéralement disparaître noir, gris. Du gris noir , vraiment très net. noir, gris. Noir, gris, noir, gris. Facebook, cependant, a défini 500 comme fluidité de la capacité lorsque vous essayez finalement de la modifier Donc ça a l'air plutôt beau, non ? Lisse. Maintenant, Instagram en compte 950, je crois, donc ça va être extrêmement lent, mais ça reste très, très beau. Donc, celui-ci est un peu plus rapide. Celui-ci est un peu plus lent. Maintenant, vous pouvez choisir ce que vous préférez personnellement. Cela n'a pas vraiment d'importance. Il n'y a pas de bonne ou de mauvaise réponse. Tout dépend de vos préférences personnelles. Tout ce que je peux voir, c'est que je le sais, rien qu'en regardant. C'est peut-être l'exemple. Regarde ici. Il est également extrêmement fluide. Cela représente donc environ 500, je crois, ou peut-être 400. C'est donc beaucoup plus proche des paramètres Facebook que nous avons actuellement. Celui d'Instagram est un peu plus lent. C'est comme doubler la vitesse ou la fluidité. Cela va donc être un peu lent, mais ça a l'air beaucoup plus fluide. Tout dépend donc de vos préférences personnelles. Sélectionnez celui qui vous convient le mieux. Cela limite donc à peu près l' ajout de boutons de réseaux sociaux à la leçon de votre site Web. J'espère donc que cela vous a plu, et j'ai hâte de vous voir dans le prochain. À bientôt. 52. Webflow 101 : cours: OK, alors que sont les cours ? Eh bien, les cours sont un outil très utile au sein flux Web pour vous faciliter la vie. Alors laissez-moi vous montrer comment ils fonctionnent. Maintenant, si nous ajoutons un conteneur ici, puis que nous ajoutons quelques boutons, vous pouvez voir que tous ces boutons sont identiques. Et étalons-les un peu pour leur donner un peu d'espace, et voilà. Donc, pour le moment, aucune classe n'est attribuée à chacun de ces boutons . Comment pouvons-nous changer cela ? Commençons par concevoir ce bouton en particulier. Tapons donc Gold Ticket. Dans celui-ci, tapons Golden Dog. Et dans celui-ci, tapons Golden cat. Je ne sais absolument pas pourquoi j'utilise ces mots, mais supportez-moi. Ce n'est pas important. Mais la prochaine chose que je vais partager avec vous est très importante. Donc, si nous modifions ce bouton en particulier et que nous le rendons doré, par exemple, vous verrez qu'il n' affecte en rien la forme ou la forme des autres éléments de cette section. Ainsi, bien que le bouton doré du ticket soit doré, Golden Dog et Golden Cat ne le sont pas. Alors, comment pouvons-nous changer cela ? Ce que nous pouvons faire, c'est prendre le bouton et y ajouter une classe. Pour le moment, cette modification est considérée comme le bouton 5. Ce que nous allons faire, c'est renommer cette classe Mettons donc le bouton doré. Maintenant, pour le moment, ce bouton s' appelle le bouton doré, mais celui-ci n'est qu'un bouton froid, et rien n'y est attaché. Alors, comment pouvons-nous faire en sorte que ce bouton soit doré comme celui-ci ? Eh bien, il y a deux façons. La première consiste à copier et coller ce code, puis à l'ajouter. Mais c'est un peu trop long pour moi. Faisons-le donc de la manière la plus intelligente. Nous entrons en classe, nous prenons la classe existante qui est attachée à ce bouton, et nous l'appliquons à ce bouton, comme ça. Et vous pouvez le faire avec n'importe quel élément de votre choix , y compris une section. Ainsi, par exemple, pour cette section particulière, elle est actuellement connectée au rembourrage, et il s'agit de la classe à laquelle ces caractéristiques lui sont attribuées Mais que se passerait-il si on ajoutait du doré ? Le fond devient doré ? Donc, en gros, ce que vous pouvez faire, c'est utiliser les cours pour vous faciliter la vie. Si vous voulez que tous vos boutons soient exactement identiques. Ainsi, par exemple, si nous commençons maintenant à modifier le rembourrage, sur ce bouton en particulier Cela affectera également tous les autres boutons de cette classe particulière. Mais disons, par exemple, si nous ne voulons pas modifier chaque bouton pour qu'il soit exactement le même. Maintenant, je ne sais pas pourquoi vous ne le feriez pas, mais disons, par exemple, si nous avions une autre section ci-dessous et que les boutons ici étaient un peu différents. Ajoutons donc une couleur d'arrière-plan comme celle-ci, et ajoutons du blanc. Maintenant, ces sections sont toujours connectées par le biais de la classe de section 5. Mais celui du haut a une classe différente, qui est le blanc. Celui-ci n'a pas cette classe supplémentaire. Donc, si nous changeons l'arrière-plan de cette classe en blanc, il deviendra blanc et il y restera sans affecter cette classe en particulier. Donc, en fin de compte, si vous ajoutez une classe supplémentaire, quoi que vous ajoutiez et que vous modifiiez sur cette classe en particulier, cela remplacera ce qui est fait sur la classe standard Maintenant, disons, par exemple, si nous changeons cela en or. Donc, s'il s'agit d'un fond doré et que vous pouvez à peine voir les boutons. Maintenant, si nous changeons ces boutons, en noir, par exemple, cela changera tous les boutons auxquels cette classe est attachée. Alors, comment pouvons-nous changer cela ? Eh bien, nous pourrions, par exemple, créer un tout nouveau bouton. J'aime bien ce bouton. J'aime le fait qu' il soit bien dimensionné, le rembourrage soit beau, que le texte soit beau Alors, comment pouvons-nous simplement changer la couleur d' arrière-plan sans complètement gâcher le reste des boutons qui sont excellents sur un fond blanc ? Eh bien, c'est en fait très facile. Nous ajouterions donc simplement une classe supplémentaire pour remplacer le bouton doré. En gros, cette classe est toujours très active, mais elle remplace cette classe Donc, ce que nous ferions, c'est simplement ajouter du noir ici, le changer en noir. Et comme vous pouvez le voir ici, cette classe en particulier remplace maintenant la classe précédente Et vous pouvez l'utiliser pour n' importe quel élément de Webflow. Vous pouvez l'utiliser pour les icônes afin obtenir le même flux pour chaque classe. Vous pouvez l'utiliser pour les évaluations. Vous pouvez l'utiliser pour le texte afin que tous vos titres soient exactement de la même taille. Vous pouvez l'utiliser partout. J'espère donc que vous trouverez cette piqûre utile, et j'ai hâte de vous voir avec la prochaine. À bientôt. 53. Webflow 101 : Arrière-plans: Donc, des arrière-plans. Quels sont-ils et pourquoi sont-ils importants ? Et comment pouvez-vous réellement les modifier ? En fait, c'est très simple. Il existe maintenant deux manières différentes d'utiliser les arrière-plans. La première méthode consiste maintenant à modifier l'arrière-plan d'une section particulière. Donc, évidemment, nous pouvons sélectionner cette section, passer aux arrière-plans, puis nous pouvons changer la couleur ou nous pouvons faire un certain nombre d'autres choses, nous pouvons donc ajouter une image en arrière-plan, par exemple, ou nous pouvons éventuellement ajouter un dégradé, ce qui est fait ainsi. Ou nous pourrions ajouter un dégradé circulaire, qui est essentiellement identique à l'option de dégradé, mais cela vous donne évidemment couleur la plus foncée ou la couleur alternative à l'extérieur. Enfin, vous pouvez simplement ajouter une couleur normale. Maintenant, la raison pour laquelle vous pouvez ajouter ces différents éléments est que vous pouvez réellement les ajouter les uns sur les autres. Ainsi, par exemple, nous l' avons actuellement comme arrière-plan, mais nous pourrions également ajouter le calibrage auriculaire en tant qu'arrière-plan Alors changeons simplement cela un peu plus sombre. Et ensuite, nous pourrions finalement modifier l'ordre. Donc, en gros, l'élément qui se trouve en haut sera celui qui est le plus important sur la page. Et nous pourrions l'ajouter et le régler à 100 %, et vous ne verrez rien, ou moins il y a d'opacité, plus vous pourrez facilement voir l'élément qui se trouve derrière Maintenant, cela peut être utilisé de nombreuses manières différentes. Donc, ce que j'aime faire, c'est que si j'ai cela ressemble à une section de superposition, j'ajouterais quelque chose comme une image, ce que vous pouvez faire ici, et nous pouvons ajouter cette image ici, qui n'a pas l'air trop mal Maintenant, cette section explique essentiellement pourquoi vous souhaitez qu'il soit positionné. Donc, si vous voulez qu'il soit positionné plus haut, vous devez essentiellement sélectionner cette option, si vous le voulez plus bas, ici, à gauche , ici, à droite ici, puis au centre là-bas. Maintenant, vous pouvez également sélectionner « contenir la couverture » ou « personnaliser ». Personnalisé signifie que vous devez, vous savez, sélectionner manuellement sa hauteur, sa petite taille et tout ça. J'ai tendance à me contenter de CV, cela rend les choses super faciles Ensuite, vous pouvez sélectionner la position que vous souhaitez. Et celui-là a vraiment l'air très beau. Maintenant, par exemple, ce que je vais faire ici juste pour vous montrer, c'est que nous allons utiliser l'option contain, qui garantit simplement que l'image complète est utilisée comme arrière-plan autant de fois que nécessaire pour remplir réellement l'espace. Maintenant, ce que vous pouvez faire ici, c'est parce que cela semble un peu bizarre Vous pourriez ajouter cette superposition au-dessus de l'image, pour faire ressortir davantage cette section, qui, comme vous pouvez le voir, aide simplement l'élément à se démarquer un peu plus et l'aide simplement à devenir plus visible Une autre chose que vous pouvez faire en ce qui concerne votre section est de les supprimer toutes d'ici et mettre d'accord comme avant. Donc, une autre chose que vous pouvez faire est de changer l'arrière-plan de tout le corps. Ainsi, par exemple, si vous vouliez le modifier pour qu'il soit complètement rouge, vous pouvez le faire. Maintenant, je ne sais pas pourquoi tu ferais ça, et ce serait assez bizarre pour toi de le faire. Donc, changeons cela en arrière parce que je pense que le fait que tout soit rouge m'inquiète. Revenons donc en arrière. Trop blanc. Maintenant, vous n'avez pas vraiment besoin de mettre quoi que ce soit comme couleur d'arrière-plan pour votre corps, mais vous pouvez également ajouter des images. Donc, par exemple, si nous voulions l' ajouter comme image globale, cela ne semble pas très beau, et c'est en fait extrêmement confus, mais vous pouvez le faire de cette façon. Tu peux t'en servir. Et ce n'est que la puissance du flux Web. Il vous aide à créer des designs vraiment créatifs très facilement, sans le stress et le codage. Vous aide à tout faire très facilement. En fin de compte, c'est ainsi que vous pouvez utiliser les arrière-plans. C'est vraiment simple, très facile, et vous pouvez faire preuve de beaucoup de créativité avec le type d'arrière-plan que vous utilisez. Par exemple, si nous allons site web clementinhous.com de mon agence de marque, vous pouvez voir ces cercles avec une ombre derrière eux, ce qui est super subtil, mais ça fait tellement beau sur le site web, et c'est une petite fonctionnalité vraiment sympa juste pour faire ressortir un peu l'arrière-plan J'ai également utilisé une approche très similaire pour ce site Web pour un client, où nous sommes essentiellement ces petits motifs, petits cercles et ces X, juste pour que ce ne soit pas super ennuyeux et banal Alors n'hésitez pas à laisser libre votre imagination et évidemment, ne considérez pas le fond comme étant simplement blanc, vous pouvez ajouter de petits éléments pour le rendre plus intéressant. Quoi qu'il en soit, j'espère que cette leçon vous sera utile, et j'ai hâte de vous voir dans la prochaine. À bientôt 54. Webflow 101 : Paramètres d’affichage et réactivité: OK, alors affichez les paramètres et rendez votre site Web réactif sur tous les appareils. Comment pouvons-nous le faire ? Eh bien, c'est en fait très simple et direct, et vos paramètres d'affichage sont visibles ici en haut de votre écran. Nous avons donc actuellement quatre points d'arrêt différents en jeu. Nous avons votre point d'arrêt de base, nous avons votre tablette, nous avons Landscape Mobile et nous avons Portrait Mobile Nous pouvons maintenant ajouter trois autres points d'arrêt, l'un étant le 12 à 80 pixels, ce qui est finalement bon pour votre Macbook Air et les autres appareils Apple, et vous pouvez également ajouter votre point d'arrêt de 14 à 40 pixels, et enfin, votre point d'arrêt de 1920 Maintenant, pourquoi est-il important d'avoir tous ces différents points de rupture Eh bien, la raison pour laquelle c'est important, c'est que aidera votre site Web à être réactif sur tous les appareils. Et je vais vous montrer comment faire maintenant. Si vous consultez réellement le site Web tel quel, vous pouvez constater qu'il fonctionne bien sur tablette, paysage, portrait, ainsi que sur tous les autres points de rupture. Maintenant, si nous commençons réellement à modifier la taille du site Web, vous pouvez constater qu'il change de manière assez significative. Maintenant, si vous revenez sur notre site Web de test et que vous essayez de jouer avec cette section en particulier, que nous avons créée précédemment dans le cours, nous pouvons voir ici qu'elle est actuellement réactive sur les 1920 pixels et plus, mais qu'elle semble malheureusement très différente lorsque nous commençons à passer à la section mobile et même au point de base. Alors, comment pouvons-nous changer cela ? Eh bien, ce que nous devons faire, c'est essentiellement commencer à le reconstruire comme point de base. Maintenant, le point de rupture de base dicte en fin de compte tout ce qui se passe à la hausse et à la baisse. Reconstruisons donc cette section particulière au point de base, puis nous pourrons commencer à comprendre le fonctionnement de la nature réactive du flux Web. Descendons donc pour créer une nouvelle section, ou nous pouvons créer exactement le même rembourrage Nous allons faire un peu de rembourrage sur le côté. C'est ajouter un conteneur. Parfait. Nous y voilà. Ensuite, nous pouvons essentiellement commencer à ajouter. Et n'oubliez pas que nous nous appuyons en fait sur le point de rupture principal, le point d'arrêt principal, le point d'arrêt de base Nous ne nous appuyons pas sur cette section, qui n' affectera aucun des éléments. Parce que lorsque vous vous basez sur le point d'arrêt de base, vous affectez tout ce qui se passe sur le mobile et sur tout ce qui passe à un écran plus grand également Alors que lorsque vous modifiez quelque chose sur le point d'arrêt le plus élevé et également sur le point d'arrêt du portrait mobile, vous ne modifiez rien d'autre N'oubliez donc pas que le point d'arrêt de base tombe en cascade vers le bas et aussi vers le haut. Mais lorsque vous modifiez à la fin des points d'arrêt, vous ne modifiez rien d'autre Cela s'applique également si vous modifiez le point d'arrêt du paysage Si vous modifiez ici, cela affecte également ce point d'arrêt ici, et si vous modifiez le point d'arrêt de la tablette, cela affecte également ces deux Cela se produit également dans l'autre sens. Ainsi, par exemple, si je modifie ce point d'arrêt, cela affecte ce point d'arrêt dans ce point Cependant, si j'ai ajouté ce point d'arrêt, il ne modifiera pas celui-ci, mais il le modifiera vers la gauche Gardez donc cela à l'esprit, car cela va être très important lorsque nous commencerons à comprendre comment rendre votre site Web réactif, et je vais partager avec vous dans cette leçon le processus que j' utilise pour m'assurer que l'ensemble de mon site Web est réactif à tout moment. Vous concevez toujours sur les points d'arrêt de base. Souvenez-vous donc de cela. Maintenant, si nous le reconstruisons dans la section des points d'arrêt de base, nous pouvons simplement diviser ce héros Nous pouvons ajouter un diblock à ce conteneur. Nous pouvons ajouter une grille. Nous n'en avons pas besoin de deux. Nous n'en avons besoin que d'un pour pouvoir le faire. Ensuite, nous pouvons prendre ceci, ajouter un bloc dif à la grille Sur la gauche, ça semble bon pour l'instant. Ensuite, nous pouvons simplement ajouter un autre bloc di de l'autre côté, puis revenir en arrière. Regardez la vidéo YouTube ici, et voilà. Maintenant, en ce moment, cela semble extrêmement nul. Alors pourquoi ça ? Eh bien, c'est parce que la largeur maximale de cet élément particulier est actuellement de 46 %. Nous ne voulons pas cette largeur maximale. Par exemple, si je commence à augmenter ce chiffre, il commence à se remplir. Donc, si je le remplace par aucun, cela remplira essentiellement l'intégralité de la section. Mais nous voulons un peu de motif, juste pour nous assurer qu'il ne se rapproche pas trop de l'image. J'en suis donc plutôt content. Maintenant, comme nous avons dupliqué tout ce qui se trouve sur le point de rupture de base, celui-ci n'est réellement activé qu' tout ce qui se trouve sur le point de rupture de base, au dernier point d'arrêt du système et que le flux Web est réactif Donc, en gros, ce que nous devons faire, c'est commencer à le concevoir ici. OK ? Donc, si nous prenons cela, par exemple, nous pouvons commencer à regarder à quoi cela ressemble. Je suis donc content de ce à quoi cela ressemble. Je suis content de ce à quoi cela ressemble en ce moment. Mais ce que nous pouvons faire, c'est commencer à modifier ce bouton en particulier. Nous changeons donc cela. Nous pouvons nous en débarrasser pour le moment. Nous n'en avons pas vraiment besoin pour le moment. Nous changeons donc cela. Nous changeons la couleur en or. Nous pouvons également changer le rembourrage pour le rendre un peu plus beau Encore une fois, maintenez simplement l'option enfoncée pour assurer que je les modifie tous les deux en même temps. Nous pouvons également ajouter un peu de marge de manœuvre, puis nous pouvons commencer à modifier. L'élément lightbox, qui consiste simplement à changer cela, à changer de couleur Nous y voilà. Donc, une fois que nous sommes satisfaits de l'apparence d'une section. Nous pouvons alors commencer à regarder à quoi cela ressemble sur d'autres appareils. Permettez-moi donc d'ajouter un arrière-plan coloré ici pour que nous sachions exactement ce que nous faisons. Et changeons cela en une belle couleur violette. Juste à ma convenance. Nous y voilà. Parfait. En fait, j'en connais un peu plus sur le bleu. Parfait. Nous avons donc maintenant cette section. Vérifions-le donc à chaque point de rupture pour voir à quoi il ressemble sur un écran légèrement plus grand. Ça a toujours l'air bien. J'en suis content. Sur un écran encore plus grand, ça a toujours l'air bien. J'en suis content. Nous en sommes là, et cela semble bien dans cette section deux. Passons maintenant à la tablette. OK. C'est là que les choses se compliquent un peu. Donc pour le moment, c' est évidemment un peu de squash, non ? Cela n'a pas vraiment l'air très beau, alors que pouvons-nous faire ? Eh bien, nous pouvons le réduire un peu. Maintenant, n'oubliez pas que lorsque je fais des modifications ici, cela n'affecte rien à l'avenir. Cela n'affecte que la descente. Encore une fois, si vous allez ici, c'est toujours 38. J'étais là, il a 30 ans maintenant. Maintenant, comme je l'ai dit, cela aura également une incidence sur la baisse. Donc, si je le modifie ici, cela affectera également les deux options mobiles. Donc, si je le modifie sur tablette, cela affectera également les deux paramètres mobiles. Je vais donc le modifier pour rendre un peu plus petit, puis je vais réduire la taille. Je pense que si je veux les avoir côte à côte, je dois le réduire beaucoup, alors ramenons-le à dix. En fait, ça n'a pas vraiment l'air très beau. Peut-être que je devrais juste le garder comme ça et le dire comme ça. Ensuite, je peux simplement le réduire, faire paraître un peu plus petit. Ensuite, je peux le centrer, pour qu'il paraisse plus centré et le rendre un peu plus petit. Et ça devrait. Ça a l'air bien mieux, d'accord ? Réduisons-le un peu. Nous y voilà. Ça a l'air bien mieux. C'est beaucoup plus aligné. Maintenant, nous devons regarder et utiliser une tablette, alors voyons à quoi cela ressemble en mode paysage. Donc c'est là que les choses commencent à paraître très, très exiguës, d'accord ? Nous n'avons donc pas beaucoup d'espace. Et si vous y réfléchissez, lorsque vous tenez votre téléphone portable, il va vraiment avoir l'air nul, et vous ne serez probablement pas en mesure de voir tous les éléments. Alors, comment pouvons-nous changer cela ? Eh bien, nous pouvons passer à la grille, nous pouvons modifier la grille, cela ne fonctionne pas vraiment de cette façon, alors essayons d'ajouter une section ci-dessous et faisons-le un peu comme ça. Donc ça a l'air bien mieux en fait. Maintenant, il y a un petit élément ici, alors réduisons peut-être la grille pour réduire la taille de la rangée afin de les rapprocher. Et ça paraît dix fois mieux. Ça a l'air 100 fois mieux. Et nous pouvons même si nous le voulions, si nous voulons le rapprocher, le tirer un peu vers le haut, ce qui le rendra encore plus compact. Mais nous n'avons pas à le faire. Tu peux juste le garder tel quel. Mais comme vous pouvez le constater, comme j'ai modifié ici le point d'arrêt du paysage mobile, cela n'affecte rien hausse. C'est toujours pareil. Il est donc réactif sur tous les appareils, tant qu'il tombe en panne ou qu'il augmente par rapport au point d'arrêt principal Donc voilà, ça a l' air plutôt beau ici. Voyons donc maintenant à quoi cela ressemble sur mobile portrait. Et n'oubliez pas que si je le modifie ici, il se transformera en portrait mobile. Donc ça a déjà l'air bien. Il semble déjà très bien présenté. C'est donc ainsi que vous devez envisager de concevoir des sites Web réactifs. Tout d'abord, vous le créez au point de rupture principal, le point d'arrêt de base, puis vous le modifiez essentiellement vers le bas puis vous le modifiez vers le haut pour vous assurer que chaque section est parfaite, quel que soit l'appareil sur lequel vous la regardez J'espère donc que cette leçon vous sera utile. Si vous avez des questions, n' hésitez pas à me le faire savoir. Je suis là pour vous soutenir autant que possible, mais j'ai hâte de vous voir lors la prochaine leçon. On se voit là-bas. 55. Webflow 101 : Optimisation d’image et charge paresseuse: OK, donc en ce qui concerne l' optimisation de l'image et le lazy load, voici ce que vous devez savoir, et c'est très simple. Ainsi, par exemple, si vous avez une image qui se trouve sur votre page d'accueil dans la section héros et que vous avez besoin qu'elle se charge plus rapidement que tout autre élément de votre site Web. En fin de compte, vous devez vous assurer que cette image est priorisée car lorsque quelqu'un consulte votre site Web, vous ne voulez pas attendre le chargement de cette image Parce que si vous avez un site Web que vous visitez et que l'image ne se charge finalement que 3 secondes plus tard, cela ne sera pas beau en qui concerne la conception de votre site Web. Cela va très mal refléter votre entreprise car si vous ne pouvez pas faire fonctionner correctement un site Web, comment êtes-vous censé servir correctement vos clients ? Alors, comment pouvons-nous changer cela ? Et comment pouvons-nous prioriser les images qui se chargent sur notre site Web ? Ils se chargent donc le plus rapidement possible ? Eh bien, il y a en fait deux façons de le faire. La première méthode consiste donc à sélectionner finalement l'image elle-même. Et appuyez sur ce petit rouage, qui finira par faire apparaître quelque chose de très similaire à ce qui se trouve dans cette section, à savoir les paramètres de l'image Une fois que vous avez cliqué sur le petit rouage et que vous avez finalement accédé aux paramètres, il existe quelques options concernant le chargement, que vous pouvez voir ici Maintenant, le premier est Lazy Load. Le chargement différé signifie essentiellement qu'il se charge dans l'ordre dans lequel la page est définie. Il ne va donc pas prioriser quoi que ce soit. Maintenant, l'option suivante est le chargement rapide. Cela signifie qu'il se charge en même temps que la page. Il va donc essentiellement se charger le plus tôt possible, et il sera défini comme une priorité. Et puis il y a l'automobile. Cela signifie donc essentiellement que la priorité absolue du navigateur se chargera en premier, ce que nous ne voulons évidemment pas faire car les différents navigateurs peuvent avoir des priorités différentes Nous allons donc sélectionner Eagle load. Maintenant, cela permettra de s'assurer que lorsque quelqu'un visite essentiellement notre site Web. Cette image est placée en tête de la file d'attente. Il est chargé en premier, et c'est ce que nous voulons. Cela va donc être très important pour un certain nombre d'éléments différents. Ainsi, par exemple, vous voulez vraiment le faire également pour votre logo. Vous ne voulez pas que votre logo finisse par se charger après tout le reste sur le site Web. Vous voulez donc vous assurer que c'est assertif, et cela dit au site Web, écoutez, je dois d'abord charger parce que je suis très important, et c'est en fin de compte ce que les gens verront dès qu'ils visiteront votre site Web Assurez-vous de donner la priorité à vos images, en particulier aux images de votre section héros, sur laquelle nous en apprendrons un peu plus au cours des autres leçons de cette phase particulière. Et toutes les images que vous considérez personnellement comme une priorité pour votre site Web, votre entreprise ou votre marque, assurez-vous de les prioriser avec Eagle Load, car c'est ce qui les chargera en premier et offrira à votre utilisateur la meilleure expérience possible sur votre site Web. Quoi qu'il en soit, j'espère vraiment que cette leçon a été utile. Je sais que c'était court et agréable, mais je voulais juste m'assurer que vous compreniez la différence entre les deux paramètres de chargement afin de vous assurer que votre site Web est le meilleur possible. Je te verrai dans la prochaine leçon. 56. Webflow 101 : le positionnement: Dans cette leçon, nous allons nous concentrer sur le positionnement. Nous avons actuellement des systèmes statiques, relatifs, absolus, fixes et persistants. Que signifient-ils et comment pouvez-vous les utiliser ? Commençons par le statique. Static est essentiellement l'option par défaut dans les flux Web. Si vous ajoutez un nouvel élément, une nouvelle image, du texte ou autre, sa position est automatiquement attribuée à une position statique. Et si on changeait ces deux relations ? Que signifie même relatif ? Eh bien, relatif est en fait très similaire à statique, mais il offre plus d'options de positionnement. Maintenant, si nous choisissons relatif, cela nous permet de modifier la position réelle de l'élément par rapport à lui-même. Maintenant, pensez à votre indice Z, mais nous y reviendrons un peu plus tard. Maintenant, l'option suivante est absolue. Lorsque vous sélectionnez Absolu, vous pouvez voir ici, et cela est décrit ici dans le site Web lui-même, qu' dans le site Web lui-même, positionne absolument un élément par rapport à son parent le plus proche ou qu'il tombe sur l'élément body. Donc, si nous regardons cela ici, l'image se trouve en fait à l'intérieur de la section. La section est donc le parent de l'image. Pour le moment, la section n'a aucun paramètre. Ainsi, l'image sera automatiquement positionnée en parfaite adéquation avec le corps, qui est le parent le plus proche. Alors, comment pouvons-nous conserver l' image à l'intérieur de la section ? Eh bien, c'est en fait très simple. Tout ce que nous faisons, c'est mettre le positionnement de la section sur relatif. Et voilà, maintenant, vous pouvez vous assurer que l'image est pertinente par rapport à la section car la section est le parent le plus pertinent de l'image, comme vous pouvez le voir ici Maintenant, que se passera-t-il si nous choisissons le mode fixe ? Désormais, fixe signifie en fin de compte que l'élément est pertinent pour la fenêtre du navigateur et qu'il reste en place lorsque la page défile Ainsi, par exemple, en choisissant fixe puis en le plaçant dans le coin supérieur gauche, peu importe où nous faisons défiler la page, il est désormais fixé dans ce coin supérieur gauche. Vous pouvez voir ici que cela concerne le corps et que cela ne peut pas être changé. Comment cela peut-il être très utile ? Eh bien, si nous choisissons cette barre de navigation comme élément, et pour le moment, elle est simplement définie comme relative, c' est-à-dire juste la norme pour une barre de navigation, mais si nous la définissons comme fixe, vous pouvez voir ici qu'elle est fixée en haut de la barre de navigation Donc, peu importe où nous faisons défiler la page, elle sera toujours là. Maintenant, ce que nous pouvons faire, c'est répartir cela de manière à ce que lorsque nous faisons défiler la page, la barre de navigation soit toujours en place. Par conséquent, vous ne pouvez pas perdre la barre de navigation, quel que soit l'endroit où vous faites défiler l'écran. C'est extrêmement utile, car lorsque vous créez une page Web, vous voulez pouvoir voir la barre NAF vous faites défiler la page afin de permettre à votre utilisateur de naviguer sur le site Web sans avoir à le faire défiler à nouveau vers le haut pour revenir à la Cela peut donc nous être très utile. Maintenant, il existe une autre façon utiliser Sticky, où Sticky est une approche plus unique pour fixer la position de l'élément. Et je vais vous montrer pourquoi. Maintenant, stick est essentiellement la même chose que le correctif, mais il comporte quelques paramètres supplémentaires que vous pouvez utiliser, ce qui signifie que vous pouvez manipuler le positionnement de l' élément collant pour le rendre plus réactif et avoir un peu plus de contrôle sur l' endroit où il défile vers le bas et, finalement, sur le moment où il arrête de défiler. Une chose à surveiller est l'indice Z, car il peut être extrêmement utile en tant qu'outil. Donc, lorsque nous prenons autant d' animation et que nous définissons cette relative, elle était évidemment statique auparavant, qui est standard, mais si nous la définissons comme relative, alors si nous faisons défiler la page vers le bas, vous pouvez voir que la barre de navigation passe actuellement au-dessus de l'animation de loterie comme ça Et si, pour une raison ou une autre, nous voulions que cet élément soit au premier plan de tout ce qui se trouve sur le site Web, sorte que même si la barre de navigation défilait dessus, il serait toujours classé comme étant au-dessus de la barre de navigation juste pour rendre la page Web intéressante Eh bien, nous pouvons le faire comme ça. La section d'index Z ici fait essentiellement de l'élément le plus numéroté l'élément le plus important. Donc, par exemple, ici, nous avons mis 99999 de sorte que lorsque nous le visualisons et que nous faisons défiler la page Web vers le bas, il passe au-dessus de la barre de navigation, ce qui est assez intéressant, mais nous pouvons en fait le rendre encore plus intéressant Nous pouvons donc mettre cette image particulière comme relative. Nous pouvons mettre cette image comme relative, cette image comme relative, et celle-ci est relative. Maintenant, ce que nous pouvons faire ici, c'est simplement le faire très haut du point de vue de l'indice Z. Peu importe ce qui fait défiler ces images, elles seront toujours tout en haut Il n'est pas possible de les faire défiler. Et juste pour vous montrer à quoi sert l'indice Z. Si nous faisons défiler la page vers le bas maintenant, vous pouvez voir l'animation Lotty, dont l'indice Z est supérieur à celui de la barre de navigation Il passe au-dessus de la barre de navigation. Mais vous pouvez voir ici que cette image n'a aucun paramètre d'index Z. Celui-ci le fait. Celui-ci le fait, pas celui-ci. Voyons donc comment cela l'affecte . Nous faisons défiler la page. Vous pouvez voir ici que cela remplace la barre de navigation et qu'elle passe en haut, ce qui peut paraître super cool Bref, j'espère que vous apprécierez cette leçon de non-positionnement, et j'ai hâte de vous voir dans la prochaine leçon. À bientôt. 57. Webflow 101 : Sections de héros: Sections sur les héros. Alors, comment créer la section parfaite pour les héros ? Cette section consacrée aux héros est certainement parfaite, mais il se peut que vous ne trouviez rien de Qu'est-ce qui constitue réellement une section de héros idéale pour votre entreprise et votre marque ? Eh bien, cela dépend de l'objectif que vous essayez d'atteindre. Par exemple, si vous consultez le site Web de cette marque, Web de cette marque essaie de canaliser les individus, les couples et les adolescents dans leur entonnoir marketing, et l' entonnoir marketing est spécifique à leurs besoins et exigences spécifiques Ainsi, par exemple, si vous êtes un individu et que vous avez des crises de panique , vous devez cliquer sur ce bouton pour accéder à une page spécifique aux crises de panique. Encore une fois, si vous formiez une équipe et que vous finissez par exprimer votre colère et que vous voulez régler le problème, vous avez une page spécifiquement liée à la colère. Maintenant, c'est évidemment quelque chose différent pour chaque marque. En fin de compte, la section héros chaque site Web devrait littéralement vous donner exactement ce que vous devez savoir dès que vous arrivez sur la page d'accueil. Ainsi, par exemple, pour Clementine House, site web de mon agence Brannan, nous expliquons aux gens exactement ce que nous faisons en six mots simples, nommant les start-up ambitieuses D'accord. Nous vous disons donc littéralement que c'est ce que nous faisons. Nous nommons les startups ambitieuses de demain. Maintenant, si nous allons sur cet exemple de site Web, nous pouvons voir que la section des héros vous indique exactement à quoi vous attendre de ce site Web. Il s'agit donc évidemment d'une influenceuse du fitness appelée Sandra Leon's. Atteignez vos scores de condition physique. Après avoir obtenu un baccalauréat en nutrition et en conditionnement physique, j'ai commencé à travailler avec des gens du monde entier et à changer leur vie pour toujours. Vous savez donc exactement ce que vous obtenez dès que vous arrivez sur cette page d'accueil, et vous savez exactement à quoi vous attendre. Vous pouvez donc faire l'hypothèse suivante c'est pour moi ou ce n'est pas pour moi. Regardons un autre exemple, HubSpot. HubSpot vous indique donc exactement ce qu'ils proposent. Plateforme client HubSpot. Alors, développez-vous mieux avec HubSpot. logiciel puissant, et non trop puissant, connecte de manière fluide vos données, équipes et vos clients sur une plateforme client qui évolue avec votre activité Tu es exactement ce que tu vas obtenir. Et vous verrez toutes les marques réellement concentrées sur l'atteinte d'un certain objectif et se positionnant réellement d'une certaine manière Elles veilleront à respecter exactement ce principe. Il vous indique exactement qui ils sont dans les 3 premières secondes suivant leur arrivée sur la page d'accueil. Maintenant, si vous travaillez sur Webflow et que vous souhaitez créer vous-même votre propre mise en page et votre propre section de héros, alors c'est très bien Maintenant, nous fournissons évidemment des modèles que vous pouvez utiliser, et ils contiennent déjà des sections sur les héros. Mais si vous souhaitez choisir le vôtre, vous pouvez finalement accéder à la section de mise en page des annonces. Et en gros, choisissez une mise en page très similaire à celle que je viens de vous montrer. Maintenant, évidemment, vous devrez peut-être modifier un peu le texte changer la couleur ajouter quelques motifs et ajouter un arrière-plan. Mais en fin de compte, vous pouvez l'utiliser pour créer une section de héros qui peut vraiment attirer l'attention de quelqu'un, car c'est la clé. Vous devez vous assurer que dans les 3 premières secondes de création de votre section de héros, vous finirez par dire aux gens que c'est ce que nous faisons, que nous pouvons vous aider. Ce sera l'une des choses les plus importantes pour s' assurer que les gens ne viennent pas sur votre site Web, puis le repartent instantanément. Ils doivent savoir exactement ce que vous pouvez leur proposer dans les 3 premières secondes suivant leur arrivée sur votre page d' accueil. C'est la section des héros. C'est exactement ce sur quoi vous devriez concentrer 80 % de votre attention avant commencer à développer le reste de votre site Web. Assurez-vous que c'est parfait. Assurez-vous que les lettres et les mots que vous utilisez sont aussi minimaux que possible. Aussi simple que possible et montrez exactement ce que vous pouvez offrir au client. Assurez-vous qu'elle comporte un appel à l'action et assurez-vous également que l'image est pertinente et qu'elle met en valeur ce que vous pouvez offrir au client ou au client potentiel Quoi qu'il en soit, j'espère que vous avez apprécié cette petite leçon sur les sections consacrées aux héros. J'ai hâte de vous voir lors de la prochaine leçon. À bientôt 58. Webflow 101 : CMS et le flux dynamique: OK, alors qu'est-ce que le CMS et le contenu dynamique ? Et comment pouvons-nous l'utiliser pour mieux gérer le contenu de notre site Web ? Eh bien, votre CMS est essentiellement votre système de gestion de contenu. Et je vais vous montrer un exemple de l'un de mes sites Web et de la façon dont nous structurons notre système CMS pour en faciliter la gestion. Maintenant, comme vous pouvez le voir ici, ce sont les paramètres du CMS, et nous avons plusieurs systèmes CMS différents en jeu. Maintenant, l'un d'entre eux est celui des projets. Dans le cadre du projet, nous avons donc tous les clients avec lesquels nous avons travaillé au cours des dernières années, qui sont régulièrement mis à jour par notre équipe. Maintenant, si vous cliquez sur chaque projet, vous verrez que certains onglets doivent être remplis tout au long de chaque projet. Par exemple, le nom du client, le slog, qui est essentiellement l'extension de l'URL Nous avons également le nom de marque particulier, Project Insight. Il s'agit donc essentiellement d'un aperçu ce que fait l'entreprise elle-même et du marché sur lequel elle Nous avons le logo, nous avons les services fournis à gauche, les services fournis à droite. Nous avons le problème qu'ils ont, la solution que nous leur avons donnée. Le client, le nom et le rôle, nous avons un véritable témoignage du client lui-même, autres images liées au projet lui-même, puis nous avons un lien vers le projet suivant dans le pipeline, puis un lien vers le projet afin qu'ils puissent réellement voir le projet lorsqu'ils cliquent dessus sur notre page d'accueil ce qui concerne le CMS, il est en fait très facile de créer un système CMS, et il vous suffit de cliquer sur le petit bouton ici pour créer une nouvelle collection. Maintenant, lorsque vous créez une nouvelle collection, vous avez finalement le choix d'ajouter différents champs. Maintenant, par différents champs, j'entends simplement les différentes choses que vous souhaitez modifier sur la page principale de votre site Web. Par exemple, je voudrais peut-être créer une collection entièrement axée sur les blogs et les actualités que nous publions sur le site Web de Clementine House Ainsi, par exemple, si nous accédons à notre blog et à nos actualités, il vous suffit d' appuyer sur Ajouter un champ, puis nous créerons les champs dont nous avons besoin pour chaque page de chaque article de blog. Ainsi, par exemple, si nous allons sur le site Web de Clementine House et que nous accédons à un véritable article de blog, choisissons simplement celui-ci, par exemple Je peux voir ici que nous avons l'image moyenne, qui est finalement l' image qui est ici. Nous avons également l'image secondaire, au cas où vous voudriez ajouter une autre image dans le bloc de publication, une troisième image, au cas où vous voudriez ajouter une autre image, le texte concernant l'article, qui se trouve ici. Ensuite, nous avons également la sélection du sujet. Donc, en gros, à quel sujet l'article est-il pertinent ? S'agit-il de stratégie de marque, de création d'identité de marque ou de dénomination de marque. Nous avons également l'heure et la date de publication, que vous pouvez voir ici, juste en dessous du titre sur la page du billet de blog. Nous avons ensuite le lien vers la page du projet, qui est essentiellement l'URL, qui est réellement activée lorsque vous cliquez sur l'image sur la page principale du blog. Nous avons également l'auteur, que vous pouvez voir ci-dessous. Ainsi, vous pouvez gagner beaucoup de temps lorsque vous ajoutez de nouveaux articles de blog, par exemple, de nouveaux produits ou de nouveaux projets. Vous pouvez simplement tout gérer dans le back-end de cette manière. Ainsi, par exemple, si nous voulions changer, vous savez, le titre de cet article de blog en particulier, pourquoi la fidélité à une marque est complètement absurde, nous pouvons consulter les actualités du blog, puis nous pouvons essentiellement expliquer pourquoi la marque est absurde. Cliquez ici pour de vrai. Ainsi, au lieu de modifier chaque élément du site Web lui-même, nous pouvons simplement modifier ces éléments ici. Modifiez le texte réel de l'article. Nous pouvons ajouter d'autres images. Nous pouvons changer l'image réelle de la miniature réelle, c'est-à-dire la suivante Nous pouvons changer la personne qui a réellement écrit le billet de blog. Nous pouvons modifier le texte d'aperçu pour inciter les internautes à lire le billet de blog. Ainsi, par exemple, si nous le publions pour de vrai, que nous l'enregistrons, puis que nous le publions, puis si nous allons vérifier sur le vrai site Web, vous pouvez voir qu' il est automatiquement mis à jour sur la page Web principale, même si nous venons de le modifier dans le système CMS dans le backend du site Web. Vous pouvez maintenant ajouter un élément CMS à votre page Web en ajoutant simplement la collection comme suit. Et vous pouvez utiliser toutes les leçons que vous avez déjà apprises au cette phase particulière du cours pour ajouter, par exemple, un bloc DIF à chaque section, puis vous pouvez également ajouter l'image Ensuite, tout ce que vous avez à faire est de double-cliquer sur le système auquel vous souhaitez le connecter, et il fait automatiquement glisser vers l'avant tous les éléments que vous avez dans ce système CMS particulier, et vous pouvez finalement l' afficher comme vous le souhaitez, mais vous vous sentez le mieux Et vous pouvez ajouter, par exemple, une image dans cet élément en particulier, et elle renseigne automatiquement tous les autres éléments pour vous Par exemple, nous ne voulons pas choisir une image. Nous voulons réellement obtenir l' image du billet de blog. Nous allons donc ajouter l'image principale. Et ici, appuyez sur Exécuter chaque image, qui se trouve dans le backend du site Web et le système CMS sans que nous ayons à lever le petit doigt. Nous pouvons donc dans un premier temps en ajouter autant que nous le souhaitons. Nous pouvons ajouter l'en-tête, par exemple, dans chaque bloc Dave. Et puis, au lieu d'avoir à toutes les taper, nous n'avons eu que le nom de la section elle-même, et c'est le ta. Maintenant, évidemment, cela ne semble pas très beau, mais vous avez en quelque sorte compris l'idée, non ? Il s'agit de gagner le plus de temps possible. Et si vous pouvez le faire , et si vous pouvez vraiment utiliser le système CMS à votre avantage, votre site Web sera très facile à gérer, et vous économiserez beaucoup de temps en changeant les choses et, en fin simplifiant la vie en gérant votre site Web. Quoi qu'il en soit, nous aborderons les systèmes CMS plus tard dans le cours. Restez donc à l'affût , mais j'espère que vous avez apprécié cette leçon, et je vous verrai bientôt. 59. (Audio remasterisé et 16: D'accord, nous allons donc partir de zéro et créer notre site Web ensemble. La première chose à faire est donc de créer la structure du site Web. Et nous pouvons le faire très facilement en utilisant certaines de ces bibliothèques intégrées à Webflow J'en ai déjà installé quelques-uns, mais vous pouvez en avoir plein. Ceux que j' utilise habituellement sont ceux qui ont le plus d'options. Lorsque je crée un site Web, je veux m' assurer d'avoir le choix entre différents formats et différentes sections. Et celui-ci est l'un de mes préférés. Laisse-moi voir. Ceux-là n'ont pas vraiment le choix. Celui-ci n'a pas beaucoup de choix, mais vous pouvez simplement l'installer en cliquant sur ce bouton, puis sélectionner le site Web sur lequel vous souhaitez l'installer. Maintenant, j'ai déjà trop de bibliothèques sur mon site Web. Je ne peux donc pas en installer un nouveau. Revenons donc en arrière et je peux simplement les utiliser, car ce sont toute façon mes bibliothèques préférées, vous pouvez donc choisir la bibliothèque que vous voulez. Mais pour les besoins de cette vidéo, je vais juste utiliser celle que je connais le mieux, et aussi celle que je pense être je connais le mieux, la meilleure. Et évidemment, vous pouvez choisir celle-ci si vous le souhaitez vraiment, et c'est en fait une très bonne bibliothèque à utiliser. En gros, une bibliothèque n' est qu'une sélection de sections qui peuvent vous aider à créer un site Web dix fois plus rapidement. Alors, d'accord, commençons par créer la page d'accueil. Nous allons donc utiliser une interface utilisateur sans titre, que j'adore vraiment en fait Il y a des tonnes d' options différentes. C'est vraiment génial. Choisissons une barre de navigation. OK. Choisissons celui-ci. Non, en fait, choisissons-en d'autres. Oui, choisissons celle-ci en fait, parce que ce sont des photos là-bas. Il vous suffit donc de glisser-déposer la barre NaF dans le corps du site Web Et c'est fait. C'est super simple. Maintenant, je vais vous montrer comment créer une barre de navigation universelle plus tard dans le cours, de sorte que si vous modifiez votre barre de navigation sur une page, elle changera sur l'ensemble du site Web, et c'est très simple Ne t'inquiète pas Mais oui, je vous montrerai comment faire un peu plus tard. En ce moment, n'oubliez pas que nous nous concentrons uniquement sur la création de la structure des pages du site Web. Nous ne regardons pas les couleurs, nous ne regardons pas les images. Nous ne nous concentrons sur rien d'autre que de placer les sections au bon endroit. Donc, ce que je recherche, c'est une section consacrée aux héros, je pense que celle-ci fonctionnera très bien en ce qui concerne ce dont nous avons besoin. Ouais. OK, parfait. Ouais. Donc, vous savez, cela nous permettra de dire littéralement aux gens exactement pourquoi ils devraient passer plus de temps sur notre site Web. N'oubliez pas les trois questions que chaque personne se posera lorsqu'elle visitera votre site Web. Premièrement, sont-ils au bon endroit Vous devez donc vous assurer qu'ils savent qu' ils sont au bon endroit. Deuxièmement, puis-je vous faire confiance C'est pourquoi nous recherchons maintenant une sorte de section sur les fonctionnalités ? Hum, pour montrer les différentes personnes avec lesquelles nous avons travaillé ou, vous savez, les différents logos que nous avons créés, ou les différentes marques avec lesquelles nous avons travaillé, par exemple. Cela dépend évidemment du type de service que vous offrez. Et puis la troisième question qu'ils se poseront essentiellement est, d'accord, que pouvez-vous réellement faire pour moi ? Souvenez-vous donc de cela lorsque vous créez une page d'accueil. Première question, suis-je au bon endroit ? Tu dois répondre à cette question. Deuxièmement, puis-je vous faire confiance C'est pourquoi nous avons ajouté la section des fonctionnalités ? Et puis, troisièmement, que peux-tu faire d'autre pour moi ? Comment peux-tu réellement m' aider ? Et c'est moment-là que nous pouvons commencer à envisager différents services ? Nous pouvons donc réellement présenter les différents services. Regardons cette section sur les fonctionnalités. OK. Peut-être celui-ci. Peut-être celui-ci. Ouais. Cela devrait être plutôt beau. J'ai donc littéralement cliqué dessus, et il a été ajouté directement au site Web OK, parfait. Parfait, parfait. Donc ça a l'air plutôt bien. Et encore une fois, nous ne nous concentrons pas sur les couleurs, nous ne nous concentrons sur rien d'autre pour le moment que sur la structure. La raison pour laquelle nous le faisons est de rechercher simplement des témoignages ou une section de critiques La raison pour laquelle nous procédons de cette façon est simplement de pouvoir nous concentrer sur la construction du site Web, puis de nous concentrer sur les détails finaux par la suite. C'est ainsi que les choses devraient se passer. Parce que si vous essayez de tout faire ensemble, vous finissez par passer beaucoup trop de temps à essayer de tout faire correctement et de tout faire parfaitement, au lieu de simplement faire 80 % du travail lorsque vous construisez la structure du site Web. OK, nous avons donc une section de témoignages qui est bonne. Regardons l'ajout, comme une petite page de blog, juste pour montrer que nous sommes des experts dans ce que nous disons. OK. Parfait. C'est ce que nous avons. Ça a l'air bien. Et puis je pense que tout ce dont nous avons besoin maintenant, c'est d'un pied de page OK, jetons un œil aux pieds de page. Découvrez lequel nous convient le mieux. OK, celui-ci est beau et simple. Et écoutez, souvenez-vous que nous allons changer, par exemple, les onglets et, vous savez, tout le reste par la suite. Maintenant, une chose qui arrive parfois lorsque vous utilisez ces modèles est qu'ils ont des largeurs, des tailles, des hauteurs prédéfinies et des éléments espacés Donc parfois, surtout avec ce modèle particulier et cette bibliothèque, la largeur est toujours fixée à 126. Je ne sais pas pourquoi c'est vraiment ennuyeux pour moi, mais ça vaut le coup car cela me fait gagner beaucoup de temps. J'ai donc passé 5 minutes à changer littéralement quelques éléments. Si cela vous semble un peu bizarre, il suffit de le vérifier, et il est probablement fixé à 126. Donc oui, il suffit de le remettre mode automatique et tout ira bien. OK, tout cela semble plutôt bon pour la page d'accueil, pour être honnête. OK, génial. Dans ce cas, commençons par créer une sorte de page de blog, une page d'article, par exemple. Commençons donc par créer une page d'article. Encore une fois, nous allons simplement ajouter la barre de navigation. Et encore une fois, cette barre de navigation changera un peu plus tard , alors ne vous inquiétez pas. Je vais vous montrer exactement comment procéder. Hum, nous avons le fourrage. OK, ajoutons simplement ça. Je vais également vous montrer comment utiliser le pied de page afin de créer un pied de page universel Cela va vous faire gagner beaucoup de temps. Cela me fait vraiment gagner beaucoup de temps lorsque vous pouvez créer une seule section, qui peut finalement être la même sur tout le site Web. Et si vous le modifiez sur une page, il change sur chaque page. Je vais donc vous montrer comment procéder un peu plus tard. Mais oui, ça va te faire gagner beaucoup de temps. OK. Plongeons-nous dans le vif du sujet et mettons ça ici. Je m'assure juste qu'il est connecté au corps et non à une autre section, donc je le tourne de droite à gauche. OK. Nous y voilà. Ça devrait être une bonne chose. Génial. OK, donc c'est quelque chose de bien. J'aime bien ça. Ça a l'air plutôt bien. OK, commençons par, euh, vérifier quelques points juste pour nous assurer que tout est en place. Maintenant, en ce qui concerne les articles, nous allons créer un CMS plus loin dans cette leçon. Maintenant, ce qu'est un CMS est essentiellement un moyen de créer plusieurs pages autour de la même structure de page. Ainsi, par exemple, les blogs , les articles sont vraiment excellents pour cela, ainsi que pour les projets. L, par exemple, si vous vendez, vous savez , du design de logo, par exemple. Vous pouvez créer une page de projet où vous pouvez simplement modifier les logos que vous avez évidemment conçus, l'écriture, d'autres éléments tels que le titre, le nom de la marque. Et ce que fait le CMS, c'est qu'il crée essentiellement de nouvelles pages. Et je vous montrerai comment faire plus tard. C'est super super simple. Il crée essentiellement des pages uniques très rapidement sans que vous ayez à les créer manuellement. Il vous suffit donc de changer le nom, de changer les logos et de remplir automatiquement toutes les pages pour présenter votre travail C'est super intelligent et vraiment très efficace. Cela vous fait vraiment gagner beaucoup de temps. Vous êtes peut-être déjà familiarisé avec l'utilisation des CMS. Si c'est le cas et c'est génial, je vais vous montrer comment le faire sur Webflow Si ce n'est pas le cas, ne vous inquiétez pas. C'est très simple à configurer et cela vous fera gagner beaucoup de temps à l'avenir. Ceci n'est qu'un exemple de modèle d'article que j'utilise pour Lancaster Academy Mais j'en ai des tonnes, j'utilise des CMS pour tout. Et il vous suffit de saisir le champ personnalisé. Ainsi, par exemple, nous avons la page principale de l'article, nous avons les sujets, la couleur des sujets. Vous n'avez pas besoin de le faire avec autant de profondeur, vous n'avez pas besoin d'être aussi détaillé, vous savez. Vous allez principalement utiliser le texte, le bouton de texte, le texte enrichi, l'image et le lien, et peut-être une vidéo. Vous n'aurez pas besoin de beaucoup plus que cela. Mais en gros, ce que vous faites, c'est une fois que vous avez créé les champs dans la section CMS du site Web. Ensuite, vous pouvez essentiellement le lier. Donc, par exemple, je l'ai lié au sujet, de sorte que dans ce cas, il s'agit de stratégie de marque. Cela se connecte au temps réel, quel que soit le temps réel dans le CMS, il le verra ici, l'image principale de l'article, qui se trouve ici, et ainsi de suite. C'est vraiment, vraiment génial. Et ici, je crois que j'ai 47 articles différents, et vous pouvez voir qu'ils sont tous liés à un champ personnalisé différent, et vous pouvez être aussi complexe ou aussi simple à ce sujet. Tu n'as pas besoin de devenir fou comme moi, mais tu sais, reste super simple, mais on réglera tout ça un peu plus tard. Maintenant, à Margo, je veux juste vérifier cela pour l'instant. C'est 126, comme je l'ai déjà dit. Je dois donc m' assurer que cela change. Bonjour Mogo, je ne pense pas que nous ayons besoin de trois contributeurs différents Alors changeons-en un. Je ne pense pas que nous ayons besoin de ces boutons de réseaux sociaux. Tu peux les y garder si tu veux, mais je ne pense pas qu'ils soient très bons. Change ça. OK. Je vais vous parler de : commençons à créer une autre page, et commençons à créer votre page d'article dans son ensemble, car il sera vraiment très utile d'organiser tous vos articles et tout ce que vous souhaitez partager. Parce qu'en fin de compte, en tant qu'agence, vous voulez montrer que vous avez une expertise, vous savez, dans différents domaines, n'est-ce pas ? Ça va donc être très important. Donc, avoir un blog et s' assurer de le présenter de manière vraiment professionnelle et minimaliste. Cela va vraiment aider, vous savez, à convaincre le client et à l'amener à vous faire confiance, et c'est ce que vous voulez qu' il fasse en fin de compte avant qu'il ne prenne un appel avec vous ou qu'il ne vous engage pour vos services et, en fin de compte, qu'il ne vous donne de l'argent. OK. C'est élégant. Bien. OK. Nous pouvons arranger tout cela un peu plus tard, mais vous pouvez voir ici que la boîte de liens est réglée sur un, 26. Ça a juste l'air un peu bizarre, alors réglons ça. Et oui, d'accord, ça a l'air bien. J'en suis content. Et nous pouvons, nous pouvons changer ces petites choses par la suite. Dans l'ensemble, nous avons l'air plutôt bien ici. Et vous devez, vous savez, apprécier ici aussi, car grâce à ces bibliothèques, car grâce à ces bibliothèques, nous construisons littéralement un site Web complet en un rien de temps. Je veux dire, cela ne fait que 11 ou 12 minutes que nous avons vraiment commencé. Et nous avons déjà littéralement construit trois ou quatre pages. Et ces pages ont l'air bien. Par exemple, ces pages ont vraiment l'air professionnelles. Et ils seront bien plus beaux une fois que nous les aurons terminés, que nous les aurons colorés et que nous aurons fait toutes nos autres choses, désolée. OK. Passons à la page des contacteurs Les pages de contacteurs sont généralement assez simples. Nous allons donc simplement ajouter le Nav et le fudder. Et puis ajoutons la section contact du. Nous voulons donc simplement quelque chose de beau et de simple. Nous ne voulons pas devenir trop fous. Je pense que c'est probablement ce qu'il y a de mieux pour être totalement honnête OK. Jetons un coup d'œil à ça. OK. Ajoutons-le ici. OK. Parfait. Créons-le, puis vérifions-le à nouveau. OK. Passez donc à 126, comme vous pouvez le voir. Et puis nous avons OK, tout est là. OK, parfait. Parfait. Parfait. OK, ça a l'air bien. Passons maintenant à la page de politique de confidentialité. Maintenant, en ce qui concerne les politiques de confidentialité et les pages juridiques, l'ensemble, elles sont toutes conçues à peu près de la même manière. Cependant, ils sont en fait très faciles à faire. La seule différence est, évidemment, le contenu réel de la page elle-même. Donc, comme j'aime le faire, je cherchais ici une section prête à être construite, mais je pense qu'il est en fait plus facile de le faire manuellement. Je peux donc vous montrer comment procéder. C'est tout aussi simple, mais il n'est pas nécessaire que cela soit très joli, vous n'avez donc pas besoin d' avoir, vous savez, design vraiment complexe pour une page de politique de confidentialité Pour être honnête, personne ne va vraiment le lire. C'est juste là d' un point de vue juridique ou du point de vue de la clause de non-responsabilité. Nous allons donc simplement le construire manuellement, je pense. Je vais donc vous montrer comment procéder. OK, vérifiez. Pare-chocs. OK. Nous avons donc simplement ajouté une section, puis nous allons ajouter un conteneur, puis nous allons ajouter un en-tête. Ajoutons ensuite un paragraphe. Maintenant, cela pourrait fonctionner avec un paragraphe. Je ne sais pas si cela fonctionnera avec une section de paragraphe ou un texte enrichi. Nous verrons. Mais oui, si cela ne fonctionne pas avec un paragraphe, nous le ferons ensuite avec du texte enrichi. Ce ne sera donc pas un gros problème. La politique de confidentialité peut donc être créée simplement en utilisant ce site Web, free privacy policy.com, et les avantages de ce site Web en particulier Je vais ajouter tous les liens pour vous savez, politique de confidentialité, l' expédition et les retours, termes et conditions, les cookies, tout ça. Je vais lier tous les éléments du cours afin que vous puissiez simplement cliquer dessus et accéder directement à la section correspondante. Site Web. Désolée. Maintenant, ce qu'ils essaient de faire, c'est qu'ils essaient essentiellement de vous faire payer si vous le souhaitez, comme une politique de confidentialité vraiment professionnelle, ce qui, pour être honnête, je ne suis pas avocat, mais je n'en ai jamais utilisé, vous savez, une politique super professionnelle en dehors de mon agence, ce que j'ai évidemment fait avec mon avocat. Mais, euh, oui, tu n'en as pas besoin pour être totalement honnête. Je pense que lorsque vous débutez en tant que marque, il suffit de cliquer, je n'en veux pas, comme une politique de confidentialité professionnelle, et vous pouvez l' obtenir gratuitement. Donc, oui, c'est probablement ce que je suggérerais. Ici, vous n'avez pas besoin de saisir votre adresse e-mail correcte. Donc oui, je ne ressens pas le besoin de le faire. Mais en gros, maintenant, vous pouvez soit essayer de le copier, mais sur certains ordinateurs, mais sur certains ordinateurs pour une raison ou une autre, cela ne vous le permet pas. Vous pouvez copier le presse-papiers et vous pouvez le faire en faisant presque comme un codage Vous devez donc simplement le copier dans un code personnalisé, un code HTML. Maintenant, si vous ne savez pas comment coder, il existe un moyen simple de le faire, et je peux vous montrer comment faire. Maintenant, le meilleur moyen, je pense , c'est qu'ils devraient t' envoyer un e-mail. Permettez-moi de vérifier mes e-mails afin que je puisse essayer de vous montrer ce qui vous sera envoyé. Ils se foutent, laissent ça charger. Allons-y. Ils vous enverront donc quelque chose comme ça. Mais pour être honnête, cela vous renvoie généralement directement à la page de politique d'origine. Donc, ce que je fais habituellement, ce qui fonctionne le mieux, c'est le télécharger sous forme de document Word. Et vous pouvez le faire en allant simplement ici pour générer des fichiers. Donc, si vous voulez générer des fichiers, cliquez simplement. J'utilise généralement le fichier Doc car il est déjà formaté et tout le reste. Et puis si vous cliquez dessus et que vous l'ouvrez, cela devrait vous permettre de simplement le copier-coller directement sur votre site Web. OK, mettons-le simplement au travail. OK, maintenant ça marche. Parfait. Allons-y. Vous pouvez donc voir ici qu'il est déjà entièrement formaté Il est déjà quasiment prêt à être utilisé. Essayons donc de l'ajouter à la section des paragraphes et de voir à quoi cela ressemble. OK, donc vous pouvez voir le problème ici, non ? Vous pouvez voir que le problème est qu'il ne l'a pas formaté. La raison en est qu'il s'agit simplement d'une section de paragraphe réservée à un seul bloc de texte. Ce n'est pas comme un bloc de texte formaté. Donc, ce que nous devons faire, c'est remplacer cette section par une section de texte enrichi, ce qui sera beaucoup plus utile. OK, alors faisons-le. Vous pouvez donc voir ici ce format différent, vous pouvez donc le voir ici. Je viens de copier-coller exactement le même texte, et nous pourrions modifier l'espacement entre certaines sections et d'autres Mais dans l'ensemble, ça a l'air super, comme vous le savez, ça a l'air professionnel. Il semble bien formaté. Tu sais, pourrions-nous légèrement modifier l'espacement ? Oui, sans aucun doute. Mais vous savez, toutes les informations sont là, et c'est fait de la bonne façon. Une chose à laquelle je dois faire attention est de m'assurer qu' ils voient parfois des choses comme en savoir plus sur les cookies sur le site Web gratuit de politique de confidentialité. Ils se contentent donc de se faire connaître dans le cadre des politiques de confidentialité actuelles. Vous pouvez les retarder si vous voulez avoir l'air un peu plus professionnel, car évidemment, les gens savent que vous avez obtenu la politique de confidentialité sur un site Web gratuit, ce qui n'est pas une mauvaise chose, mais les gens peuvent regarder cela et penser qu'ils ne sont peut-être pas aussi professionnels que je le pensais. Maintenant, avec la page À propos de nous, nous essayons essentiellement, vous savez, de dire aux gens ce qui nous rend spéciaux ? Qu'est-ce qui nous différencie et pourquoi devriez-vous nous choisir comme agence, n'est-ce pas ? Donc, ce que nous allons faire maintenant, c'est créer la section À propos. Maintenant, nous avons la barre NAF, nous avons le Fuda comme nous aurions dû Et maintenant, nous devons enfin commencer à raconter l'histoire de notre marque, celle de notre entreprise et ce qui nous différencie. Donc, ce que je fais ici, c'est juste que je cherche, est-ce que je veux ajouter une vidéo ? à fait honnête, je ne sais pas si je veux réellement ajouter être tout à fait honnête, je ne sais pas si je veux réellement ajouter une vidéo Est-ce que je souhaite ajouter une vidéo ? Eh bien, c'est une lightbox. Donc, en gros, ce qu' est une lightbox , c'est que vous pouvez masquer certains médias, qu'il s'agisse d' une image, d'une sélection d'images ou d'une vidéo à l'intérieur de la lightbox, de sorte que lorsque les gens cliquent sur l' image ou sur la lightbox, la vidéo elle-même, ce qui est, euh, super utile je ne sais pas si je veux vraiment Mais je ne sais pas si je veux vraiment écouter une vidéo. C'est le truc. Je pourrais donc opter pour quelque chose d'un peu plus simple, comme juste une image ou quelque chose comme ça. Je vais juste voir si je peux y trouver quelque chose. OK. À quoi cela ressemblait-il ? À quoi cela ressemblait-il ? Ici. Ça a l'air plutôt bien. Je veux juste quelque chose de très simple. Je veux juste quelque chose de très simple, mais je ne suis pas sûr de ce que je veux dire, n'est pas trop mal. Qu'en est-il de celui-ci ? Oui, on peut le faire. OK, génial. OK, faisons-le. Parfait Ensuite, je pourrai modifier les images et tout le reste un peu plus tard. Ce n'est pas grave. Mais il contient tout ce dont j'ai besoin. Il y a un en-tête. Il y a un petit texte. OK, parfait. Commençons par examiner d' autres sections à ajouter en dessous, juste pour vérifier les choses. OK. Encore une fois, avec la page À propos de nous, nous essayons simplement de dire aux gens ce que nous pouvons réellement faire pour eux. Voilà ce que nous sommes, et voici ce que nous pouvons faire pour vous. Un peu comme la page d'accueil, mais la page d'accueil est un peu comme ici une page de destination pour essayer de gagner la confiance. La section À propos de nous est celle où les gens s'intéressent réellement à ce que vous devez faire et à la manière dont vous pouvez réellement les aider. Et c'est à ce moment-là qu'ils commencent à demander plus de détails Vous pouvez donc être un peu plus technique sur la page À propos de nous pour indiquer aux gens le type de services que vous pouvez leur offrir. Nous allons donc ajouter une petite section sur les services ici. Trouvons juste quelque chose qui soit beau. Mmm mm. Et cette bibliothèque, en particulier, je l'utilise pour de nombreux sites Web différents. Vous pouvez l'utiliser pour les sites Web d' agences, sites Web de marques personnelles, les sites Web de commerce électronique, et vous pouvez le modifier pour lui donner l'apparence que vous souhaitez. Oui, c'est super utile, vraiment utile. Et ce que j'adore avoir une page à propos, c'est parce que les gens vont avoir des questions à poser, n'est-ce pas ? J'ajoute donc toujours une section FAQ car elle nous permet de répondre aux questions. À propos de nous en très peu de temps et d'espace sur le site Web. Donc oui, au lieu de, vous savez, lire environ 20 sections différentes sur, vous savez, répondre à différentes questions et le faire de manière très longue, nous pouvons simplement avoir une petite section FAQ, qui met en évidence toutes les questions les plus fréquemment posées le client afin qu' il puisse simplement décider si répondre à différentes questions et le faire de manière très longue, nous pouvons simplement avoir une petite section FAQ, qui met en évidence toutes les questions les plus fréquemment posées par le client afin qu' il puisse simplement décider si nous leur conviennent ou non. Maintenant, j'aime beaucoup cette petite section à la fin de la section FAQ sur cette bibliothèque en particulier , car elle contient en quelque sorte un appel à l'action. Mais encore une fois, comme sur les photos, elles étaient légèrement rembourrées, j'ai donc dû changer cela Et puis, pour une raison quelconque, je pense que cela n'est pas transmis correctement. Oh, excusez-moi. Oui, il n'est pas correctement formaté, donc je dois en changer le format et déplacer le pied de page vers le Ouais OK, vous pouvez donc voir ici qu'il y a un petit problème parce que la section se trouve dans une autre section, ce qui est évidemment un problème. Donc, le moyen de résoudre ce problème est de les séparer. Je vais donc le faire en cliquant simplement sur le corps. En m'assurant que je copie le pote, vous pouvez voir ici que le rembourrage est un peu foutu Je vais donc simplement ajouter cette section à nouveau parce que, je crée la structure du site Web, lorsque je crée la structure du site Web, je veux m'assurer que la structure du site Web est parfaite afin que je puisse me concentrer sur le design par la suite. Le design est la partie amusante. Le design est ce que j'aime le plus. Il est très important de commencer par la bonne structure , car si vous ne trouvez pas la bonne structure, vous devez tout recommencer à zéro. Alors concentrez-vous vraiment sur cela. J'ai donc réduit la barre de navigation et je vais simplement ajouter le pied de page en bas Donc, ajoutons simplement cela ainsi. Nous avons le héros, nous avons les services, nous avons la FAQ, nous avons le pied en bas de page. Parfait Ça a l'air bien. Ensuite, je ne suis pas sûr que nous pourrons y réfléchir . Ajoutons-en deux, en fait. Ajoutons simplement deux services car nous n'avons pas à devenir trop fous. Vous pouvez en ajouter autant que vous le souhaitez, mais ajoutons-en deux pour le moment principal. OK, parfait. OK, alors maintenant, regardons, vous savez, un seul projet. OK ? Donc, quel que soit le type de service que vous offrez, qu'il s'agisse de conception de logo, de photographie, rédaction, etc., vous avez besoin d'une seule page de projet pour réellement expliquer et presque créer une étude de cas pour les différents clients avec lesquels vous avez travaillé Il est donc très important de bien faire les choses. Maintenant, ce que j'aime utiliser, c'est une astuce très élégante où j' utilise essentiellement un modèle d'article pour la page du projet, qui fonctionne vraiment très bien parce que c'est tellement fonctionnel Je vais donc vous montrer ce que je veux dire dans un instant, mais j'ai ajouté la barre NAP, j'ai ajouté le pied de page. Maintenant, nous allons juste mettre de l'ordre dans les choses car ce modèle en particulier est très utile pour, vous savez, une page de projet, et il a l'air super professionnel Une fois que tout sera fini de toute façon. OK, alors changez-le simplement en tant que créateur. Alors, qui a réellement travaillé sur le projet ? Nous n'avons pas besoin de tout cela car il n'y a pas d'article. Il suffit donc de changer cela. OK, parfait. Et puis ce que nous devrions probablement ajouter, c'est du texte. Il faut donc ajouter un paragraphe par la suite, juste pour écrire un peu sur le projet lui-même. Nous avons donc le titre du projet lui-même. OK. Parfait. Ça n'a pas l'air trop mal. Nous allons probablement apporter quelques modifications juste pour le remettre à zéro. Mais d'accord, ajoutons un point. Ajoutons une grille. Ce que je veux faire, c'est mettre en valeur d'autres images, surtout si vous aimez créer un logo ou faire de la photographie, vous savez, vous voulez qu'elles soient très riches en images, n'est-ce pas ? Vous ne voulez pas que ce soit, vous savez , juste un texto ou trop de texte, devrais-je dire. Alors oui, ajoutons quelques images ici. OK, nous avons donc ajouté une zone de grille, nous avons ajouté un bloc d, puis nous allons simplement ajouter une image à ce bloc d. Nous y voilà. Parfait Comme vous pouvez le voir ici, il y a un peu de rembourrage, il suffit de l'emporter. Cette norme avec chaque image sur le flux Web en gros, il suffit donc de la supprimer. Je vais juste l' ajouter à 100 %. Cette base va donc remplir complètement le bloc div. Ensuite, nous allons copier-coller un diblock, nous avons donc de nombreuses images différentes Donc, juste y, mettons-en peut-être six, ce qui va être très beau. Et puis allons-y, nous devons être en mesure d'expliquer le projet réel. Essayons donc de trouver quelque chose. En fait, qu' allons-nous faire ici ? Qu'est-ce que je recherche ? Qu'est-ce que je recherche ? Allons, section FAQ. Ajoutons. Je ne veux pas la section FAQ dans son ensemble. Je veux juste l'appel à l'action. C'est ce que je veux le plus. Je vais donc simplement accéder à la section FAQ, puis je vais simplement supprimer la section FAQ et conserver l' appel à l'action lui-même Donc oui, je n'ai pas besoin de toutes ces questions. Je vais juste les supprimer toutes. OK. Allons-y, juste pour prendre ça. Et puis nous avons en gros le bel appel à l'action en bas de page, qui est parfait. Réduisons simplement le rembourrage pour qu'il ne soit pas aussi gros Réduisez ce rembourrage sur l'image. Supprimez simplement ce schéma. Allons-y. Génial. Génial. Nous avons maintenant un joli petit appel à l'action en bas de page, ce qui est parfait. Allons-y. Réduisez un peu ce schéma. Et ça a l'air plutôt bien. J'en suis plutôt content en ce moment. Ça a l'air plutôt bien. Génial. Réduisez un peu ce schéma , juste pour rassembler les choses, car je veux que l'espace soit à peu près le même. Emporte ça. OK, ça a l' air super propre. J'adore ça. Génial, génial, génial, génial. OK. Incroyable. Très bien, vérifions-le. OK. OK, nous allons maintenant créer la page du portfolio proprement dite. Donc, la différence entre la page de projet unique et la page de portefeuille est que la page unique montre un seul projet, la page de portefeuille montre tous vos projets, d'accord ? Construisons donc une structure pour cela. Et encore une fois, nous pouvons être un peu intelligents et utiliser cette section. OK. Nous ne voulons donc pas mettre en valeur notre équipe. Nous voulons simplement mettre en évidence les différents travaux que nous avons réalisés. Hum, c'est encore une fois, au format 21, 26, donc nous pouvons corriger cela. Elles sont toutes réparées. Il y a une petite marge là-dessus, alors enlevez-la. OK, ça a l'air plutôt bien. Donc, évidemment, ici, nous n' allons pas les utiliser pour mettre en valeur les membres de notre équipe parce que je ne suis pas sûre que vous avez des membres de l'équipe Si c'est le cas, alors c'est fantastique Si tu ne le fais pas, c'est bon. Nous allons essentiellement l'utiliser pour présenter notre travail. Supprimons donc simplement quelques-unes d'entre elles afin d' avoir un peu plus d' espace pour travailler. OK. Oui, je pense que trois c'est bien. OK, faisons-le. OK, ça a l'air bien. Parfait Maintenant, commençons à voir comment nous pouvons vous faire savoir ce dont nous avons réellement besoin pour convaincre les gens, vous savez, en regardant le travail que nous avons accompli. Donc, ce que nous pouvons faire, c'est nous concentrer uniquement sur la création d'un. Ensuite, une fois que nous en avons créé un, comme nous l'aimons, nous pouvons simplement le dupliquer et l'avoir pour plusieurs projets différents sur lesquels nous avons travaillé. OK, donc ici, par exemple, nous allons simplement changer cela pour, par exemple, un peu plus sur le projet, regardez OK. OK, retardez ça. J' essaie juste de faire en sorte que cela apparaisse correctement, car il s'agit évidemment d'une page de portfolio Je veux donc m'assurer qu'elle soit belle. Nous pouvons donc le dupliquer et en avoir plusieurs versions différentes. Cela peut sembler un peu étrange pour le moment, mais soyez indulgent. C'est un travail en cours, donc je suis en train de travailler dessus avec vous. Encore une fois, je veux un appel à l'action, comme sur la page d'un projet unique. Je vais donc ajouter à nouveau la section FAQ dans le corps du message Et encore une fois, je vais le modifier pour ne pas avoir à me poser toutes les questions et autres choses. Retardez ça. Retardez ça. Allons-y. Parfait Génial génial génial. Emportons-le. Réduisons cela. OK, ça a l'air un peu mieux. Encore une fois, je sais que je l'ai déjà mentionné à quelques reprises, mais nous nous concentrons uniquement sur la structure ici. Rien d'autre ne nous intéresse. Juste la structure réelle. Réduisons-le un peu à quatre. OK. Ça a l'air plutôt bien. Ça a l'air plutôt bien. Nous avons la structure nécessaire. Maintenant, nous avons la structure, et tout est, vous savez, au bon endroit. Commençons par concevoir le site Web, non ? 60. (Audio remasterisé et 16: Commençons par concevoir le site Web, non ? Donc, toutes les structures sont réalisées sur toutes les pages. Commençons par concevoir le site Web. Nous voulons donc ajouter ici quelques images. Ce ne sont que quelques images que j'ai arrangées juste pour accélérer un peu le flux , afin que je puisse le terminer avec vous beaucoup plus rapidement. Je vais donc simplement ajouter quelques images. Changeons donc le logo. Je viens de trouver ce logo en ligne sur Google, creative in. Ajoutons simplement ceci ici. Supprimons ceci. En fait, cette petite icône. Nous n'avons pas besoin de cette icône. Supprimez-le simplement. Parfait. Nous y voilà. Tout est donc là. Ce que vous pouvez faire, c'est prendre le lien de navigation et appuyer simplement sur le petit ****. Et puis réglez-le comme chez vous. Vous pouvez donc faire de même dans les paramètres où il vous suffit de cliquer dessus , de choisir une page. Ainsi, chaque fois que quelqu'un clique sur votre logo, vous renvoyez directement sur la page d'accueil. C'est une chose assez courante. Et cela signifie également que dans la barre NAF, nous n'avons pas réellement besoin de l'onglet d'accueil Modifiez simplement l'image rapide qui s'y trouve. Conservons ces logos , car les clients gagnent évidemment du temps. Imaginons que nous ayons travaillé avec Coin Based, Web Flow, Slack, Zoom, etc. Avec cette petite section ici. Donc, ce que je fais ici, c'est que je change les images dans les icônes. Et pour ce faire, il vous suffit d'obtenir une image, cliquer sur ce copier-coller, puis vous avez une image à l'intérieur, que vous pouvez modifier. Vous ne pouvez pas modifier les icônes. Vous devez ajouter une image, puis la transformer en PNG. Ici, par exemple, j'ai trois PNG, une étoile, qui est là, puis je trouve la bonne taille parce que la taille est un peu trop petite Oui, je dois augmenter un peu cette taille. Je suis juste en train de les supprimer. Laissez-moi vérifier la taille. Cette taille est un peu meilleure. Encore une fois, je vais juste copier et coller. Copiez et collez. Voilà, j'ai la plus grande à l'intérieur, et ensuite je peux juste changer l'image réelle. J'ai trouvé la bonne taille . Je vais juste changer le PNG à l'intérieur. Et un PNG, si vous n'êtes pas familier avec un PNG, le PNG est simplement une image sans arrière-plan. C'est juste transparent. OK. Les critiques semblent donc bonnes. Si nous n'avons pas besoin de les changer. Nous n'allons pas passer beaucoup de temps à modifier tous les textes, car c'est quelque chose que vous pouvez évidemment faire très facilement. C'est comme modifier un document Word. OK. Nous allons modifier certaines images dans la section blog. OK. Regardons ça. Parfait. Nous l'avons. Ça a l'air bien. Bien entendu, nous pouvons modifier les titres du blog et d'autres éléments, mais ce n'est pas nécessaire pour cela. C'est quelque chose que vous pouvez faire à votre rythme. Euh, je veux être aussi respectueux que possible de votre temps. OK, donc on a ça, on a ça. OK. Nous changeons simplement le logo exactement de la même manière qu'avant. Encore une fois, nous pouvons le connecter à la page d'accueil. OK. Maintenant, jetons un coup d'œil aux icônes des réseaux sociaux. Alors, pour cela en particulier, sommes-nous sur Facebook ? Non, on est sur Twitter ? Non. Roni sur Linked in in Instagram, donc je viens de les supprimer. Et il suffit de les supprimer, de cliquer littéralement dessus et d'appuyer sur trop tard, comme dans un document Word. Très simple. OK. Allons-y, pour une raison ou une autre, je trouve ça un peu bizarre, mais en fait, ça a l'air bien. Pour être honnête, ça n'a pas l'air trop mal. Mais passons à faire en sorte que cela ressemble un peu plus à la marque. Alors, mettez simplement ma marque. OK. Et je pense que 2077 est encore loin, alors passons à 2024 Et puis, je veux dire, ça n'a pas l'air trop mal, non ? Nous avons les images en place. Vous savez, nous y avons mis le logo. Tout se présente plutôt bien en ce moment. Je pense que la prochaine étape consiste à créer la page À propos de nous, car la page À propos de nous et la page d'accueil sont en fait assez similaires, est-ce pas ? Ils sont très similaires. Donc, ce que nous allons faire, et j'ai même légèrement modifié, la structure à propos de nous, parce que je n'aimais pas l'image de cette section en particulier au début, et c'était un peu plus difficile à modifier parce qu'elle comportait plusieurs couches. J'ai donc juste changé cela vous montrer la méthode la plus simple. Mais encore une fois, nous ne faisons que changer le logo à l'intérieur du pied de page Juste pour tout savoir sur la marque. Et c'est un peu la partie amusante, juste là où vous pouvez parcourir le site Web et, vous savez, changer les couleurs, changer les images, changer le texte. Je change généralement le texte en dernier, juste pour que je puisse, vous savez, faire en sorte que l'image soit en quelque sorte parfaite, et ensuite nous pouvons vraiment prendre le temps d' obtenir les droits d'auteur. Je créerai probablement un cours de rédaction plus tard, mais c'est juste pour le moment. Maintenant, en ce qui concerne la barre de navigation, nous allons créer cette barre de navigation universelle en un rien de temps. Maintenant, vous pouvez voir ici que nous avons cette barre de navigation ici, qui se trouve sur la page d'accueil Maintenant, nous n'avons pas besoin de ce bouton, nous pouvons donc le supprimer. Nous n'avons pas besoin de l' inscrire, nous pouvons donc simplement le remplacer objectif le plus important, objectif stratégique de notre site Web, qui est de nous contacter. Nous pouvons le remplacer par un joli rose. OK, je suis cramoisi, dois-je dire ? Changeons-le en cramoisi juste pour correspondre à cela. Maintenant, ce rose n'est pas le même que le rose du logo. Déconnectons-le donc. Je vais donc récupérer le cramoisi et le déconnecter. Ensuite, je vais l'ajuster légèrement jusqu'à ce qu'il soit identique au logo. Nous y voilà. C'est un petit peu mieux. OK, je vais enlever le plan. Mais d'accord, quand je le survole, il devient violet. C'est super embêtant. OK ? Passons donc au survol. Passons à la section des couleurs. Choisissons simplement le cramoisi. OK, parfait. Et maintenant, quand je le survole, il devient un peu rouge plus foncé Il est donc montré que j'interagis avec le bouton lui-même, et c'est exactement ce que je veux. Et cela dit, l' avantage ces modèles, c'est que lorsque vous modifiez une chose, cela change tous les boutons de l' ensemble du site Web, vous n'avez donc pas à le faire plusieurs fois. Par exemple, ici, je connecte simplement le bouton des contacteurs à la page des contacteurs Ici, nous n'avons pas vraiment besoin d'une maison, nous pouvons donc le regretter, car le logo nous ramène déjà chez nous Nous n'avons donc pas besoin de section d'accueil. Ici, nous pouvons remplacer cela autre chose, comme des services, par exemple. Et cela peut simplement aller sur notre page à propos de nous ou quelque chose comme ça. Et lorsque nous le survolons, nous pouvons le changer pour qu' il devienne réellement rose, ce qui ressemble à la marque, voilà. Ça a l'air plutôt cool. Maintenant, si cela ne fait pas la même chose pour les ressources, mais qu'il a le même effet pour la tarification, c'est parce que les ressources sont une liste déroulante. C'est un élément déroulant, alors que les services et les prix sont un élément sous forme d'onglet, d'accord ? Donc, tu sais, tu peux faire exactement la même chose, mais juste pour expliquer pourquoi c'est arrivé. OK, nous avons donc le bar NaF là-bas. Maintenant, nous allons créer un nouveau composant. Qu'est-ce qu'un nouveau composant ? Donc, si nous créons un composant appelé Agency NAV Bar, cela nous permettra de simplement utiliser ce composant sur l' ensemble du site Web à tout moment. Vous pouvez donc voir à quel point c'est vert. Nous pouvons désormais prendre ce composant et l'utiliser sur chaque page de l'ensemble du site Web. Et lorsque nous changeons quelque chose, par exemple, nous ajoutons peut-être une autre page à la barre de navigation. Une fois que nous l'aurons modifié sur la première page, cela changera sur l' ensemble du site Web, c'est exactement ce que nous voulons. Cela va nous faire gagner tellement de temps, tellement de temps. Nous pouvons donc l'utiliser pour des tonnes de choses différentes, et nous l'utiliserons un peu plus tard pour le fourrage, surtout Et puis oui, je voulais juste vous montrer non seulement comment créer un site Web très rapidement, mais aussi comment configurer choses de telle sorte que lorsque vous gérez votre site Web, vous puissiez également le gérer très rapidement, car ce sera un élément très important parce que élément très important votre temps est très précieux, n'est-ce pas ? Vous voulez donc vous assurer que le site Web est configuré pour vous faciliter la vie au maximum. Et c'est l'une des raisons pour lesquelles j'aime le flux Web. C'est pourquoi j'investis dans le système CMS Webflow, car le système CMS vous fait gagner beaucoup de temps Et le temps est très précieux, et il est très important, vous savez, de ne pas perdre de temps. Alors d'accord, passons à la page des articles du blog. Cela nous amène en fait à la page de contact. Faisons d'abord celui-ci. Donc, ici, évidemment, vous pouvez ajouter votre adresse e-mail, vous pouvez ajouter vos coordonnées et tout le reste. Je veux juste changer la couleur réelle en rose, évidemment pour le moment, c'est du violet, et ça n'a pas l'air très beau Et si vous cliquez sur ce petit bouton violet ici, vous accédez à plein de couleurs différentes, comme vous pouvez enregistrer des couleurs, ce qui est super cool. Donc, c'est juste pour que je sauvegarde ça. Je vais juste sélectionner le même rose. Cela vous évite donc de retrouver la même couleur encore et encore ou ajouter le même code hexadécimal encore et encore. Super super intelligent. OK. OK, maintenant nous pouvons évidemment ajouter notre barre NaF universelle parce que l'autre était l'ancienne Nous ne faisons donc que l'ajouter là. Vous pouvez voir à quel point il est rapide et facile de créer une page de contacteurs qui ressemble vraiment à une marque Cela nous a littéralement pris environ 5 minutes . Ce n'est pas difficile. C'est vraiment très simple. OK. Jetons ce coup d'œil. OK. Nous y voilà. Parfait. OK. Maintenant, ça a l'air plutôt bien. OK. Passons à la page unique du projet. C'est pourquoi nous pouvons commencer à, vous savez, faire en sorte que les choses soient vraiment très belles. Et la page du projet est très importante pour toute agence ou fournisseur de services parce que vous êtes simplement, vous savez, ce n'est pas tant une page de projet, mais plutôt une page d' étude de cas, n'est-ce pas ? J'utilise juste une page de projet pour cette circonstance particulière. Il est très important de présenter votre travail sous son meilleur jour, car c'est ce qui vous permettra d'être embauché, d'accord ? Alors, échangeons simplement ce fourrage. Donc oui, en vous assurant que vous aimez investir du temps , vraiment mettre en valeur votre travail de la bonne façon et le faire correctement, vous économiserez beaucoup de temps et d'énergie pour beaucoup de temps et acquérir de nouveaux clients plus tard. En gros, plus votre site Web est beau, plus il vous sera facile d'obtenir des clients. Notre site Web est actuellement très bien situé et nous l'avons affiné au cours de la dernière décennie. Et maintenant, notre site Web vous indique, ou nous donne, vous savez, 30 à 25 prospects par jour, et nous rejetons la plupart de ces prospects parce que nous ne voulons pas travailler avec ces entreprises en particulier Cela montre donc simplement le pouvoir d' obtenir de belles images et de présenter votre travail de la bonne façon Je vais donc simplement ajouter quelques images ici comme des espaces réservés Mais une chose que je dirais également, et je l'ai mentionnée dans d'autres cours et également au début de ce cours, c'est de vous assurer que vous recherchez les meilleurs services de votre secteur dans le cadre des services que vous offrez. Et apprenez d'eux, apprenez ce qu' ils font, comment ils présentent leur travail, puis faites-le de la même manière car vous serez alors en mesure, vous savez, de vendre vos services beaucoup plus facilement. Parce que, tu sais, ils sont les meilleurs dans ce qu'ils font. Il y a donc une raison pour laquelle ils sont si bons et pourquoi ils peuvent vous faire payer une fortune, comme Pentagram, par exemple, une entreprise de design de marque qui possède des bureaux dans le monde entier Cela représente des centaines de milliers, voire 50 000, 50 000 à 100 000 dollars par projet de développement d'identité de marque. Ajoutons donc quelques textes, car cela va être important pour expliquer ce que nous faisons réellement dans le cadre du projet. Je ne vais pas vraiment ajouter le texte car cela ne va évidemment que vous faire perdre du temps, mais vous pouvez évidemment prendre le temps de rédiger une jolie petite critique de projet. OK. Ajoutons une petite envie de travailler avec nous. Oui. Ajoutons-le ici. Ensuite, il suffit de le lier à la page Contactez-nous. Ainsi, les gens peuvent entrer en contact avec nous. Ce qui est génial. OK, ça a l'air plutôt bien. Vous pouvez voir comment, nous n'avons pas passé beaucoup de temps à créer ce site Web. Nous sommes littéralement en train de créer le site Web. Et je pense que c'est environ, vous savez, 40, 46 ou 47 minutes. Nous sommes en train de créer le site Web. Et ce n'est vraiment pas difficile. Mais si nous avons pu le faire si rapidement, c'est parce que, vous savez, j'avais préparé toutes les images et, évidemment, je n'écris pas le texte. Mais environ 90 % du travail de création du site Web. Tu peux le faire. Et puis il ne reste que les 10 %, dont vous avez vraiment besoin pour prendre votre temps. Et je vous recommande vraiment prendre votre temps, vous savez, les détails les plus fins, comme la façon de présenter votre travail, façon de rédiger le texte, tout ce genre de choses est vraiment important. OK. Changeons simplement la barre NaF et le fourrage. Parfait. Et une fois que vous êtes familiarisé avec le flux Web, vous commencez à, vous savez, à ajouter plus de choses et à comprendre plus de choses. Votre site Web ne cesse de s' améliorer. Et en ce qui concerne le site Web également, je dois ajouter ici un logiciel de suivi comportemental où vous pouvez réellement voir comme la souris. OK, donc ce que je vais faire ici, c'est juste m' arrêter une seconde. Je vais ajouter le CTA, appel à l'action sur l'autre page D'une manière bien plus simple. Donc j'ai ceci. J'ai sélectionné la section proprement dite. Je vais créer un composant. Souvenez-vous de la même chose que la barre de navigation et le fourrage. Et je vais créer une session ou une section d'appel de découverte, où nous pouvons essentiellement l'ajouter à différentes sections, et tout ira au même endroit pour la section d'appel de découverte. Nous y voilà. Capital D. Parfait. Créez. OK. Maintenant, vous pouvez voir que c'est vert. Cela signifie que sur l'ensemble du site Web, ce sera exactement pareil. Ajoutons-le donc également à la section du portfolio. Parce que je pourrais garder celui-ci actuellement le bleu. Mais en réalité, je vais y aller, cela me demandera plus de travail plus tard parce que je vais devoir modifier deux sections différentes, où si je fais le travail maintenant, je peux les supprimer. Ensuite, je peux simplement ajouter l'autre section d'appel de découverte, qui est universelle, afin qu'elle change facilement sur l' ensemble du site Web, et je n'ai pas à faire le même travail deux fois, ce qui est très important, vous savez. OK. Jetons un coup d'œil à ça. OK. C'est tout bon. C'est tout bon. C'est tout bon. Commençons par ajouter, puis nous allons commencer à ajouter du b, du b, du bum, du bum. Oh, oui, ce que je disais tout à l'heure concerne l'ajout d'un logiciel de suivi comportemental pour améliorer votre site Web. Ainsi, chaque mois, fois que vous aurez créé votre site Web et qu'il sera en ligne, vous commencerez à attirer des clients. OK ? Je vais juste ajouter quelques images pendant que je vous en parle parce que c'est vraiment important. Lorsque vous commencez à suivre les visiteurs de votre site Web chaque mois, n'est-ce pas ? Donc, juste un jour par mois, à la fin du mois, très probablement, vous regardez simplement des enregistrements, et je peux vous montrer comment installer le logiciel Hot Jar J'ai en fait un lien où vous pouvez l'obtenir gratuitement, gros, il est joint à ce cours. Lorsque vous appliquez quelque chose comme Hot Jar au site Web, cela vous montre comment vos visiteurs comportent sur votre site Web, puis vous pouvez apporter des modifications en fonction du comportement réel visiteurs de votre site Web Ainsi, au lieu de simplement deviner et de simplement modifier le site Web en fonction de ce que vous trouvez beau ou autre, vous pouvez le faire la bonne manière pour les bonnes raisons pour obtenir les résultats que vous souhaitez Et il y a une énorme différence. Vous savez, quelqu'un qui change simplement le site Web parce qu' il est plus beau. Ils n'ont aucune idée de ce qu'ils font. Ils vont tourner en rond parce qu'ils ne prennent pas de décisions en fonction de ce qui se passe réellement. Ils prennent simplement des décisions en fonction de ce qu'ils pensent se passer, ce qui est, vous savez, plutôt stupide, non ? Donc, ce que je fais ici, c'est que je vais juste créer comme une photographie, comme un site Web de photographie ici. Ce sera donc un studio de photographie. Ensuite, nous pourrons changer cela. Encore une fois, vous savez, nous pouvons jouer avec les textes et tout le reste, mais dans l'ensemble, cela semble plutôt bon Alors, euh, jetons un petit coup d'œil à ça. Donc, ce que je veux faire, créer une sorte d'animation ou une sorte d'effet cool lorsque quelqu'un survole Parce que pour le moment, lorsque nous le survolons , rien ne se passe vraiment C'est juste que ça a l'air joli, assez ennuyeux, pour être honnête. exemple, je n'aime pas, d'accord, alors maintenant, quand je le survole, cela change de capacité OK, c'est bon. Nous l' avons donc. OK, parfait. OK, allons-y. Faisons autre chose. Faisons autre chose de plutôt cool. Changeons le Peut-être que nous pouvons ajouter, par exemple, un peut-être que nous pouvons l' agrandir un peu lorsque les gens cliquent dessus ou passent la souris dessus Pas beaucoup, juste un tout petit peu. Voyons quelle en est la taille. OK. Cela ne le rend pas beaucoup plus grand, alors allons-le un peu plus. OK. Et puis ajoutons peut-être. Que pouvons-nous faire d'autre ? Que pouvons-nous faire d'autre ? Que pouvons-nous faire d'autre ? Je ne veux pas le faire aussi, trop fou. Ajoutons peut-être un filtre ou quelque chose comme ça. Ajoutons un filtre ? Oui, ajoutons un filtre. Ajoutons un peu de flou Ajoutons que nous ne voulons pas faire ce genre de choses. Ce genre de choses devient un peu trop intense. Ajoutons un flou. Et nous ne voulons pas l' ajouter trop flou, mais juste un petit peu, juste pour le rendre intéressant OK. Alors maintenant, lorsque vous passez la souris dessus, hum l'image Cela devrait avoir l'air flou. Il suffit de passer aux transitions au préalable, puis d'accéder à toutes les propriétés, puis de les obtenir littéralement pour environ 375, puis de les atténuer un peu plus élégamment, donc de les améliorer Ensuite, vous allez cliquer dessus pour enregistrer automatiquement. Et maintenant, lorsque nous le survolons, vous pouvez voir qu'il a un effet vitreux cool, ce qui, vous le savez, est tellement plus beau OK. Maintenant, ils savent que c'est un peu un effet artistique, non ? Et tu peux en faire ce que tu veux. faut vraiment du temps pour jouer avec ça parce que c'est, vous savez, Il faut vraiment du temps pour jouer avec ça parce que c'est, vous savez, l'un de mes aspects préférés de la conception de sites Web, simple fait d'ajouter de petites animations et des imations sympas comme celle-ci Je vais ajouter un pointeur pour que , lorsque les utilisateurs le survolent, il passe du statut de souris à celui de main, juste pour qu'ils sachent qu' il est cliquable Hum oui, à part ça. Je pense que ça a l' air plutôt bien. Cela semble bien mieux que ce à quoi je m'attendais en fait. OK. Regardons peut-être parce que ce n'est pas vraiment cliquable pour le moment Ce n'est qu'une image, ce qui pose problème, évidemment, car si les utilisateurs ne peuvent pas cliquer dessus, ils ne peuvent pas accéder à la page du projet Nous devons donc ajouter un bloc de liens. Nous allons donc ajouter un bloc de liens ici. Cela pourrait poser un petit problème. Nous allons donc y travailler ensemble. Juste pour que je puisse vous montrer exactement comment vous devez l'aborder. OK. Nous avons donc ceci. Je l'ai copié et collé. OK, donc c'est évidemment bien trop petit. Nous allons faire cette voiture. OK. Alors maintenant, c'est comme si c'était souligné, ce qui n'a pas l'air très net, non ? Donc, ici, ce que nous pouvons faire, c'est ajouter la page à laquelle nous voulions aller. Mais je n'aime pas la façon dont c'est souligné. OK , cliquons dessus. Débarrassons-nous de ces lignes en dessous. OK. Il ne reste plus qu'à sélectionner l'article. Ensuite, le bloc de liens, puis il suffit cliquer dessus et de cliquer dessus, et c'est bon. Nous y voilà. OK, aussi. Alors maintenant, tout va bien, tout devrait être prêt. Maintenant, en ce qui concerne le CMS, c'est là que les choses peuvent devenir un peu plus intéressantes. 61. (Audio remasterisé et 16: OK, donc avec les sections CMS, je veux juste vous montrer comment en configurer une. Et vous pouvez utiliser les sections du CMS pour littéralement tout. Vous pouvez l'utiliser pour vos articles, vous pouvez l'utiliser pour les pages de projets, vous pouvez l'utiliser pour les produits si vous êtes sur le site Web du commerce. Mais pour cet exemple, nous pouvons littéralement, vous savez, créer une collection pour nos exemples de portfolio, n'est-ce pas ? Donc, vous savez, nous ajoutons les images principales, le type de travail, vous savez, le type de projet. Nous pouvons ajouter, évidemment, que nous avons le nom ci-dessus en texte brut. La pente, qui est, vous savez, des informations de base, nous en avons besoin, le texte du Blurb Taser. Cela va donc en dire un peu plus sur vous savez ce à quoi ils peuvent s'attendre. Et puis, si nous le créons réellement, nous pouvons simplement ajouter cinq éléments. Ce ne sont que des espaces réservés, nous n'avons donc pas besoin de les utiliser évidemment, mais cela va juste vous montrer comment les ajouter OK. Alors, quand on passe à la page P 40 ici, au lieu de créer, vous savez, d'ajouter des liens et de tout faire manuellement. Nous pouvons en fait faire quelque chose d' assez cool où nous pouvons simplement créer cela sans aucun problème, n'est-ce pas Nous ajoutons donc simplement la barre NaF. Ajoutons cette section, donc je vais simplement la copier et coller cette section ici. J'ai reçu l'appel à l'action. Et nous allons également simplement ajouter le pied de page. Et puis vous pouvez voir ici que cela n'est pas lié au corps, mais c'est le cas maintenant, mais ce n'était pas le cas. Passons au pied de page. OK. Nous avons donc de nouveau cette page, mais nous l'avons effectivement créée, comme vous pouvez voir dans le coin supérieur gauche. C'est une boîte violette maintenant. Cela signifie que c'est dans la section CMS. Ce n'est pas une page statique, elle se trouve dans la section CMS. Donc, ce que je peux faire , c'est commencer à regarder, je me demande si ce n'est pas la meilleure façon de le faire en fait. Ba, ba, ba, ba OK. Créons un compte, un compte séparé. Ensuite, réduisons simplement la marge latérale à environ 30. À peu près. Je pense que 30 devrait être une bonne chose. Aucun. C'est donc plein. OK, vous pouvez voir comment tout l'écran est rempli , ce qui est bien. Ensuite, nous pouvons jouer avec les marges et tout le reste et faire tout ce genre de choses. Mais ajoutons simplement le bloc CMS à ce C, voir ici. C'est ce qu'on appelle la liste des collections. Nous le déposons donc là, ce qui est génial. Double-cliquez ensuite, sélectionnez la source, qui dans ce cas, est constituée d'exemples de portfolio. Et puis vous pouvez voir ici que les cinq articles sont un peu comme des espaces réservés, ce que nous avions auparavant Maintenant, si vous accédez à la liste des collections et que vous cliquez sur la grille, cela divise les choses pour que vous puissiez les rendre belles et professionnelles C'est à peu près la même chose que ce que nous avons ci-dessous. Maintenant, vous pouvez simplement copier cet élément, alors cliquez sur le bloc de liens. Copiez-le et collez-le dans ce qui précède. Alors maintenant vous avez ça, vous savez, air très, très, vous savez, eh bien, en fait, il n'a pas l'air très beau. OK, comment pouvons-nous résoudre ce problème ? Parce que je veux m'assurer que nous pouvons régler ce problème ensemble. OK, image principale, connectons-la simplement à l'image et voyons ce qui se passe. OK, ça n'a pas marché non plus. Alors pour le moment, connectons simplement les données réelles et voyons ce qui se passe. Nous ne faisons donc que nous connecter aux différents éléments, par exemple le type de travail. Ah, ok. Ah, c'est pour ça que ça ne fonctionnait pas, c'est parce que la quantité réelle de contenu n'était pas suffisante pour remplir tout l'espace. Ah, ok, ok, ok. Et maintenant c'est logique. OK, alors maintenant nous l'avons. Maintenant, nous l'avons. Maintenant, il ne nous reste plus qu'à changer le CMS à l' arrière du backend. OK, parfait. Il n'y a donc pas vraiment eu de problème avec le modèle. Donc, si nous avions ajouté le contenu depuis le début, nous n'aurions pas eu de problème. La raison pour laquelle nous avons eu un problème, c'est parce que nous avons fini par ne pas avoir le contenu là-dedans. OK. Donc, ce que nous pouvons faire maintenant, c'est simplement le supprimer ou nous en débarrasser parce que nous n'avons pas besoin des deux. D'accord. Ensuite, ce que nous pouvons faire, c'est ajouter des éléments au backend du CMS lui-même, qui va à tous ces éléments. Ainsi, les images et le texte sont tous extraits des exemples de portfolio de la collection CMS Supprimons donc ces deux-là. Et ajoutons trois projets juste pour vous montrer comment cela fonctionne. C'est vraiment simple et facile, il suffit de suivre. OK, alors remplaçons l'un d'entre eux. OK. Appelons simplement cette plante. Ensuite, le slogan se remplit généralement tout seul, mais évidemment, dans ce cas, nous allons simplement changer de type de travail C'est donc le type réel d'œuvres ou de photographies. OK. Et puis le texte du blurb ou du teaser Il ne s'agit que d'un petit aperçu du projet lui-même et de ce à quoi vous attendre lorsque vous cliquez dessus. OK. OK, aussi. Laisse-nous partir. Maintenant, une fois que nous avons terminé, nous pouvons voir si l'élément réel est déjà rempli sur la page du portfolio. Il a donc déjà été édité pour nous. Nous n'avons rien d'autre à faire, c'est pourquoi j'adore les systèmes CMS ainsi que les collections et leur utilisation, car ils permettent de gagner beaucoup de temps. Euh, donc, encore une fois, je vais juste changer ça en tête. Passons simplement à la photographie. Remplaçons ça par I love my head shot. Nous y voilà. Sif. Et puis pour le dernier, nous allons, nous allons juste faire, je ne sais pas. Choisissons simplement ceci. Allons-y, puis faisons quelque chose d'autre en rapport avec cela. Et évidemment, comme pour les collections CMS, il faut un peu de temps pour s'habituer à les utiliser. Mais honnêtement, dès que tu t'habitueras à les utiliser, tu vas, genre, c'est l'une de ces choses que je veux que tu apprennes. Tu es tellement contente de l'avoir fait, et tu aimerais juste avoir appris à t'en servir plus tôt. Donc, la création de votre site Web de cette façon vous permettra de gagner beaucoup de temps. OK, voici donc les trois objets. Alors maintenant, lorsque nous revenons à la page du portfolio, vous pouvez voir qu'elle a été modifiée, mais oui, pour une raison ou une autre, celle-ci est toujours un peu ennuyeuse. OK. C'est donc ce qui se passe. OK ? Cela nous pose encore un petit problème. Alors, qu'est-ce qu'il doit y avoir d'autre ? Il doit y avoir autre chose à l'origine du problème. Résolvons le problème et réglons le problème. OK. Passons au bloc DIF. est donc le bloc dif qui va le plus le formater Ah, cette lacune, d'accord. Mm. Parfois, il s'agit simplement tripoter des choses, puis revenir sur soi pour trouver une solution Options, ajustement de la housse. Mmm, largeur maximale. Ce n'est pas ça. OK. Il y a certainement quelque chose qui fait que cela ne semble pas parfait. J'ai juste besoin de découvrir ce que c'est. Mm. OK. Bloc Di. Go a fait un bloc. Cela ne prendra que quelques minutes pour bien faire les choses. Objet de collection OK. Objet de collection. Je pense que c'est définitivement l'objet de collection ou le bloc div. C'est l'un d'entre eux. Ou peut-être que c'est le cas, peut-être que c'est l'image en fait. Vérifions-le. OK, jouons. OK. Ah. OK. Mmm. J'ai pensé que c'était peut-être ça, mais rien. OK. Essayons ça. Je suis juste en train de bricoler en ce moment, pour essayer de trouver comment Mettons-y complètement fin. Alors reprenons-le en compte. Remettons ça en place. Et il suffit de cliquer sur commande Z, la commande Z, pour la ramener là où nous le voulions. Emballage d'images. Ah, c'est peut-être l' emballage de l'image. C'est peut-être l'image wrapper. Je n'avais pas vu ça avant. Peut-être que ce n'est pas ça, alors. C'est peut-être ça. OK. Bloc Mm. Non, c'est pas ça. Flex. Bloc de liens. Je ne fais donc que passer en revue les options. À ce stade, je ne fais que passer en revue les options, en essayant de comprendre ce que cela pourrait être. Et comme vous pouvez le faire, vous pouvez commencer à voir la différence, d'accord. Ah, on y va. Alors revenons en arrière et voyons comment cela a été résolu. Nous avons donc le Lock Flex. À. Bloc flexible. Accédez au bloc DIF. Nous pouvons donc simplement accéder au bloc dif. Passons au bloc DIF. Cliquez sur le bloc central droit. Nous y voilà. Donc, en gros, le bloc dif a été défini comme Flex au lieu de block, et il l'a juste corrigé littéralement tout de suite, donc ça a l'air génial OK, parfait. Maintenant c'est réglé. Je suppose que la dernière étape consiste simplement à commencer à finaliser les choses et à les terminer. Ensuite, nous pouvons et ensuite nous pouvons commencer à vraiment lancer la fête . Vous pouvez le voir ici. OK. Regardons donc ce petit menu déroulant ici. Régler ce cliché. Vous pouvez donc le voir ici. Ça n'a pas l'air très beau. Maintenant, si vous vous souvenez d'avant, nous avons fixé la largeur à un, deux, six. Donc, si nous changeons cela, cela changera tout et résultat sera 1 million de fois plus beau. Génial. OK ? Et encore une fois, nous pouvons l'utiliser pour établir des liens vers différentes choses, et cetera Mais évidemment, nous vous avons déjà montré comment procéder, afin que nous n'ayons pas à recommencer . OK. Maintenant, nous avons essentiellement une situation où le site Web est à peu près terminé. Vous savez, évidemment, c'est un site Web très basique. Ce n'est rien de trop fou, mais évidemment, vous allez y passer beaucoup plus de temps. Tu vas tout passer en revue. Avons-nous réellement besoin de ce petit élément ou non ? Avons-nous besoin de ça ? Peut-être que nous pouvons juste , euh, changer de couleur si nous le voulons. Nous pouvons changer la couleur ou simplement la supprimer. Cela dépend entièrement de vous. OK. Nous y voilà. Je change simplement la couleur réelle de la section. Ensuite, nous pouvons et ensuite nous pouvons essentiellement passer aux paramètres. OK, alors déconnectons-nous. Déplaçons ça. Parfait. Génial génial génial. Nous y voilà. OK. Nous l'avons donc. Ça a l'air bien. Ça a l'air bien. Ça traîne trop en rose. Des changements ont été apportés à notre cramoisi, désolé, encore une fois, cramoisi. Continuez à vous tromper. Pourpre pourpre Allons-y. OK. OK, alors tout le reste va bien. Évidemment, nous pouvons relier tous les boutons et autres éléments, mais c'est le cas, vous suffit de cliquer dessus , de cliquer sur le petit rouage, puis choisir le bouton que vous voulez ou la page que vous souhaitez consulter Tout le reste semble plutôt bon. C'est ici. Bien évidemment, vous pouvez changer le texte, changer les couleurs. Vous pouvez également créer une section CMS pour cette section, si vous le souhaitez. Je l'utilise parfois si j'ai plus de trois articles. Mais c'est généralement ce que je fais ici, car je mets juste les articles les plus populaires ici. Celles que je veux que les gens lisent réellement, ce qui aide simplement à garder les choses bien organisées. OK. Parfait. C'est ce que nous avons ici. Oui, oui, nous pouvons simplement l'ajouter en tant que CMS si nous le voulons de la même manière qu'avant. Mais oui, je veux dire, tout va plutôt bien. Passons donc aux paramètres et abordons simplement quelques points importants que vous devriez prendre en compte lorsque terminez votre site Web. Il suffit de ne pas le charger Très rapidement. OK. Tout d' abord, cela vous mènera à la page générale. La première chose à faire est d'ajouter votre fabCon. Désormais, un favicon ne peut mesurer que 32 pixels sur 32 pixels, et votre clip Web doit mesurer 256 x 256 pixels Avec le FabCon et le clip Web, restez très simples, car s'ils sont trop détaillés ou s'ils ont trop de choses à faire, ils vont avoir l' air vraiment stupides Ça n'a pas l'air très beau. Alors, gardez-les très simples. Ensuite, nous passerons aux formulaires. Allez ici et dites simplement désolé », allez ici et ajoutez votre adresse e-mail. Il s'agit de l'adresse e-mail laquelle tous vos formulaires seront envoyés. Ainsi, par exemple, si quelqu'un entre en contact avec votre formulaire de contact, c'est ici que le message sera envoyé, puis assurez-vous de cliquer sur Enregistrer Passons ensuite aux plans. Donc, si vous voulez un CMS, et j'ai CMS pour chacun de mes sites Web avec Webflow, c'est 29$ par mois, facturés mensuellement, c'est un peu moins cher si vous le créez chaque année, mais cela en vaut vraiment la peine, car cela vous fait gagner beaucoup car cela vous fait gagner Si vous ne voulez pas de CMS, mais que vous souhaitez tout de même un domaine personnalisé, l'option de base est probablement la meilleure pour vous. Mais si vous le souhaitez, par exemple pour un domaine de flux Web, vous pouvez simplement cliquer sur le plan de démarrage. Le plan de départ. Donc, évidemment, je suis sur le CMS, le package CMS. Mais avec le plan de démarrage, le fait est que si vous n'avez pas de vrai domaine connecté à votre site Web, en tant qu'agence, les gens ne vous prendront pas vraiment au sérieux. C'est ce qui vous empêchera de facturer beaucoup d'argent. Donc oui, et puis évidemment, vous pouvez connecter votre domaine et vous allez y aller, mais j'espère que vous avez aimé regarder ce site Web se construire. Si vous avez des questions, n'hésitez pas à me le faire savoir. Mais oui, passons à la section suivante du cours, et je vous y verrai. 62. (Audio remasterisé et 16: D'accord, nous allons donc créer ce site Web de commerce électronique à partir de zéro dans Webflow Maintenant, la première chose à faire est de configurer nos bibliothèques. Maintenant, j'ai déjà téléchargé des bibliothèques sur ce site Web. Ce ne sont que mes préférés, mais tu peux choisir ceux que tu veux. Ceux que je préfère sont généralement ceux qui ont le plus grand choix. Vous verrez donc ici que, vous savez, celui-ci contient environ 283 éléments différents. Celui-ci en compte 226. Celui-ci en compte 200. Je choisis donc généralement ceux-ci, simplement parce qu'il y a tellement d'options. Il y a tellement d'options, désolée. Certains des autres n'ont pas autant d'options, donc c'est un peu moins attrayant pour moi. Mais ensuite, il vous suffit d' installer la bibliothèque, cliquer sur le site Web sur lequel vous souhaitez l'installer. Et puis, je pense que pour moi, cela ne me permettra plus d'en installer simplement parce que j'en ai déjà téléchargé tellement, mais pour vous, cela devrait fonctionner, et ils sont tous gratuits au moins au moment de l'enregistrement. Donc oui, tu peux y jeter un œil. Faisons simplement le plein. Et je vais vous montrer comment créer un site Web, un site Web de commerce électronique, pour votre marque ou pour la marque Ear en temps réel. Cela ne va pas prendre très longtemps. Cela prendra peut-être environ 45 minutes à une heure, en tout. Et nous allons vous montrer chaque étape. Ça va être super facile. Donc, la première chose que nous allons faire est d'accéder à notre bibliothèque d' oreilles et d'ajouter une barre de navigation. OK, ajoutons donc cette barre de navigation. Et une chose à dire, et bien, ajoutons également une photo très rapidement. Une chose à dire, c'est qu'à ce stade, nous nous concentrons littéralement sur la création de la structure du site Web. C'est ainsi que nous commençons à chaque fois. La structure du site Web est le squelette stratégique du site Web. Sans structure, vous savez, le site Web peut être super joli, mais la structure est la stratégie, d'accord ? Nous devons donc d'accord, je pense que cela peut fonctionner pour n'importe quel site Web de commerce, mais je veux aussi une image qui ressemble vraiment à la pièce, vous savez ? Essayons celui-ci. Voyons si cela fonctionne. Mais je pense que c'est un peu trop compliqué. Mm. Oui, ce n'est pas le cas, je ne suis pas sûr. Je ne sais pas si ça me plaît ou non. Supprimons cela, supprimons-le parce que je ne veux pas que ce soit trop compliqué. D'accord, il y a beaucoup beaucoup d' images différentes là-dedans. OK, je ne veux vraiment pas ça. n'est certainement pas ce que je veux. D'accord. Oui, changeons cela parce que nous ne voulons pas que ce soit le cas, nous voulons juste une image. Comment trouver une seule image ? Trouvons un héros sympa avec une seule image. C'est généralement une section plutôt sympa pour ce genre de choses. J'aime bien cette bibliothèque pour ce genre de minimus cinq, mais il ne semble y avoir rien Allons-y, allons-y. Ah. Allons-y. Ça a l'air plutôt cool. Mm, essayons ça. Essayons ça. Ça a l'air plutôt bien. Génial OK, je ne sais pas si j'aime que ce soit sur le bon côté. Je pense que l'alignement de la main droite, si vous avez suivi la leçon d'alignement plus tôt dans le cours, cela semble très étrange. Je pense que je vais prendre cette commande vers la gauche parce qu'elle est juste plus belle. Alors prenons ceci ou partons vers la gauche. Et il suffit de cliquer sur cet élément et prendre une ligne à gauche, de quitter la ligne, quitter la ligne, de passer ce bouton au-dessus. Allons-y. Je veux dire, ça a l'air dix fois mieux. Si cela semble mieux, c'est parce que la plupart des cultures lisent de gauche à droite de haut en bas. C'est donc simplement plus confortable. C'est plus familier pour nous. Je sais que certaines religions et d'autres cultures interprètent différemment, mais dans la grande majorité des cas, vous savez, ce sera la meilleure option pour vous. Ajoutons donc une autre section. Donc, si vous vous souvenez, lorsque nous créons un site Web, la page d'accueil doit répondre à trois questions. Premièrement, je suis au bon endroit. Donc, dans la première section, celle des héros, vous devez leur dire qu' ils sont au bon endroit. Tu ne vas pas perdre ton temps. La deuxième section, que nous venons d'ajouter, ressemble à une section en vedette, n' est-ce pas ? C'est comme renforcer la confiance, comme nous avons figuré dans, vous savez, cet endroit, cet endroit, cet endroit, et cela va montrer que vous êtes sérieux et crédible. La section suivante sera, vous savez, fin de compte consacrée au site Web de commerce électronique, mais pour un autre site Web , ce serait bien, que pouvez-vous m'offrir ? Que peux-tu réellement faire pour moi ? Donc, du point de vue du commerce électronique , tout va bien, ajoutons simplement ceci à Auto. Oui, vous en trouverez quelques-uns et limitons ce nombre à quatre. Avec certaines des bibliothèques que vous utilisez, ils aiment toujours définir certains éléments sur 126 pour une raison ou une autre. Je ne sais pas pourquoi ils le font. Ne me demandez pas, je n'ai pas créé ces bibliothèques, mais vous devez parfois ajuster la largeur de 126 à l'ordre. Donc, si quelque chose ne semble pas correct, alors jetez un œil, et c'est probablement la solution. Alors oui, qu'est-ce que je voulais dire à propos de cette section ? Donc oui, première section, suis-je au bon endroit. Vous devez leur montrer qu'ils sont au bon endroit dès le début, puis ils arriveront sur votre site Web. Deuxièmement, puis-je te faire confiance ? Ce sera une section en vedette ou peut-être des commentaires de clients ou quelque chose comme ça. Enfin, que peux-tu réellement faire pour moi ? Ajoutez donc une sorte de produit, ajoutez une sorte de service ou autre. Évidemment, pour tout site Web de commerce, nous voulons mettre en valeur les produits. Et pour le moment, nous utilisons une section « Rencontrez notre équipe ». Mais nous allons transformer cela en une section de produits très rapidement. N'oubliez pas qu'en ce moment, nous nous concentrons littéralement sur ce qui se passe ici, s'agit d'une 126 auto, et elle a l'air bien mieux. Pour le moment, nous ne nous concentrons pas sur le texte, nous ne nous concentrons pas sur l'imagerie. Vous pouvez voir que cette image est légèrement rembourrée, alors nous l'avons simplement supprimée. Nous nous concentrons uniquement sur la structure réelle du site Web. L'histoire que nous essayons de raconter. Nous ne voulons pas nous laisser emporter, vous savez, par la création de nombreuses images différentes et par trop de modifications d' images en ce moment. Pour le moment, nous nous concentrons uniquement sur en place de la structure du site Web. Parce qu'ensuite, cela va nous aider à terminer les choses dix fois plus vite, et nous allons littéralement créer un site Web en temps réel en 45 minutes à une heure dans cette même vidéo. Je vais donc vous montrer que c'est possible. D'accord. Nous avons donc nos deux premières sections sur la page d'accueil. Ajoutons une section de blocs en bas juste pour que nous puissions le mettre en valeur. OK, donc tu peux voir que ça a l'air un peu bizarre, non ? Vous pouvez donc voir que ça a l'air un peu bizarre. Remplaçons cela à zéro. Baignoire, baignoire, baignoire. Vous pouvez voir le titre Excusez-moi. Le titre est 126. Changez cette auto. Bien. D'accord. C'est également 126. Changeons cela. D'accord. Faisons en sorte que la marge soit nulle. Idéal. Nous avons la section des blocs, nous avons ceci, ça a l'air vraiment génial. J'adore ce à quoi ça ressemble. D'accord. Modifions-en un peu la taille pour obtenir la bonne structure. Je veux dire, ça a l' air plutôt bien. D'un point de vue structurel , ça a l'air plutôt bien, ok. Ajoutons un exemple de bloc. Vérifions-le. Une page de blocage. Encore une fois, nous allons simplement ajouter une barre de navigation et un pied de page. Nous allons me créer. Nous allons créer une barre de navigation et un pied de page universels plus tard dans le cours. Ne vous inquiétez donc pas. Je vais vous montrer comment faire. Plus loin dans cette vidéo, devrais-je dire ? Ne vous inquiétez donc pas à ce sujet. Je vais vous montrer comment faire. Et cela vous permettra de modifier quelque chose sur une page, et votre barre de navigation et votre photo s'afficheront automatiquement sur chaque Alors oui, passons à l'ajout. OK, je pense que celui-ci est plutôt bon. J' aime vraiment la structure. Je pense que celui-ci est le meilleur de tous ceux que j'ai vus, et j'en ai beaucoup utilisé, mais celui-ci semble être le plus professionnel et le plus engageant. Assurez-vous qu'il se trouve entièrement vers la gauche afin qu'il soit connecté au corps du site Web et non à la section. OK. Et maintenant on y va. OK, donc tout est déjà fait pour nous. Nous l'avons déjà fait. Nous pouvons peut-être supprimer certaines choses, donc nous pouvons peut-être supprimer certains de ces contributeurs parce qu'il y en a un peu trop pour être honnête. Mais oui, en ce qui concerne le blog lui-même, nous allons mettre en place un CMS pour le blog ou les produits un peu plus tard dans cette vidéo, afin que je puisse vous montrer comment procéder. Comme vous pouvez le voir ici, un CMS est essentiellement une collection de choses similaires. Ainsi, par exemple, dans ce cas, des articles ou des produits, et vous pouvez stocker des informations. Ainsi, par exemple, ici Look, vous pouvez stocker des informations afin de créer des pages uniques à cet article ou produit en particulier sans avoir à créer une nouvelle page à partir de zéro. D'accord ? Je vous montrerai comment faire plus tard, mais c'est super utile. La raison pour laquelle c'est très utile, c'est qu'il vous permet de créer plusieurs pages en une fraction du temps, et elles ont toutes exactement la même apparence. Ils correspondent donc tous parfaitement à la marque. Vous n'avez pas à vous soucier de la taille ou de quoi que ce soit Super super bénéfique. J'adore utiliser le système CMS. Je vous en parlerai un peu plus tard, mais je pense juste que c'est super utile, vraiment utile. Vous pouvez le voir ici, je l'utilise pour les articles du site de la Lancaster Academy Nous l'utilisons pour les pages de produits. Nous l'utilisons pour mon agence de branding. Nous l'utilisons pour le projet lui-même, comme les projets réels présentés dans les études de cas que nous créons. Mais ici, nous ne l'utilisons que pour le contenu. Et c'est très utile, car vous n'avez pas à gérer plusieurs pages, vous n'avez qu'à gérer une seule collection, ce qui est vraiment génial. Je vous en parlerai un peu plus tard, mais je tiens simplement à souligner à quel point c'est important. Je pense que j'ai environ 47 articles différents en ce moment. Et évidemment, nous avons la page principale du produit, l'article lui-même, qu'il soit présenté ou non, cela n'a pas à être si cela n'a pas à être compliqué pour vous personnellement. Tu n'as pas à le faire très compliqué. Mais en général, les seules choses que vous allez utiliser parmi tout cela, pour être honnête, au début, sont du que vous allez utiliser parmi tout cela, pour être honnête, au début, sont du texte brut, du texte enrichi, une image, peut-être une vidéo, et c'est à peu près tout. Pour être totalement honnête, vous n'aurez pas vraiment besoin de plus que cela Et puis il ne vous reste plus qu'à connecter le titre. Au titre et aux L, par exemple, ici, nous avons relié le sujet de l' article à celui-ci, donc dans ce cas, il s'agit de l' image de marque, de la nouvelle heure. Donc, juste de petits détails qui vont changer au fil de chaque article, mais vous pouvez choisir un produit ou autre, puis vous pouvez l'ajouter à la page sans vraiment l' ajouter à la page. Il vous suffit donc de le taper et il le fait pour vous, ce qui est super intelligent. Mais vous pouvez voir ici que, vous savez, pour mes articles, nous avons peut-être quinzaine d'éléments différents qui fonctionnent tous ensemble. Et je n'ai pas besoin de les reconstruire séparément encore et encore. Je ne le fais qu'une fois, et c'est tout. Revenons donc à la création de notre site Web de commerce électronique. Et nous parlerons un peu plus en détail des CMS plus tard. Mais je parlerai des collections CMS plus tard. Mais pour l'instant, supprimons-en quelques-uns car je ne pense pas que nous ayons besoin de trois contributeurs. Supprimons les icônes des réseaux sociaux. Regardons les autres pages que nous pouvons créer. D'accord, d'accord. Créons la page des articles du blog. C'était donc la véritable page de l'article. Cette page regroupe tous les articles. Donc, vous savez, tous les différents articles que vous avez sur votre site Web sur une seule page afin que les gens puissent réellement les trouver, d'accord ? Je trouve donc ton article. Dois-je voir et trouver le meilleur article pour eux. Je pense que ce sera probablement la meilleure option. Vérifions-en quelques autres, juste pour voir. Mais je pense que pour être tout à fait honnête, je pense que cela pourrait fonctionner, mais aussi, euh , oui, j'ai tendance à rester assez simple. J'ai tendance à opter pour les mêmes mises en page tout le temps, simplement parce qu'elles sont si belles Personnellement, celui-ci est mon préféré. Pour être honnête, je l'utilise pour tous mes sites Web . Ça a l'air tellement bon. Vous pouvez voir ici, ça a l'air un peu bizarre, donc vous pouvez voir que c'est encore un problème d'un ou 26. Il suffit donc de cliquer dessus. Cela ne vous arrive peut-être pas, mais cela m'arrive toujours pour une raison ou une autre. Je ne sais pas s'il s'agit peut-être de certains paramètres de mon site Web, mais oui, juste pour en tenir compte. Encore une fois, 126. Je vais littéralement désigner le problème 126, parce que c'est littéralement le problème qui revient le plus souvent. Voilà, mais ça ne prend pas longtemps à réparer, donc tout va bien. D'accord. Est-ce que c'est quelque chose de bien ? Ouais Avons-nous réellement besoin de l'option d'onglet ci-dessus ? Peut-être, mais peut-être aussi pas, je pourrais juste le supprimer un peu plus tard. D'accord. D'accord, mais nous l'avons maintenant. Passons donc à la page Contact Dust. Et encore une fois, les gars, vous vous souvenez que nous ne faisons que construire la structure du site Web en ce moment ? Nous ne faisons rien d'autre ? Nous ne nous soucions pas des couleurs, de la photographie , de l'imagerie, du texte. Rien ne nous intéresse à part la structure du site Web. Cela va nous aider à créer le site Web, alors faites 80 % du travail très rapidement afin que nous puissions ensuite nous concentrer sur les autres aspects du site Web. Par exemple, l'imagerie, par exemple, la rédaction, parce que le droit d' auteur devrait passer en dernier, à mon avis, parce que c'est ce qui devrait vraiment prendre le Vous pouvez voir ici encore, le problème 126. Cela arrive littéralement beaucoup trop souvent. Euh oui, le simple fait de construire la structure du site Web vous aide à voir le site Web, à quoi il peut ressembler. Ensuite, vous pouvez comprendre les choses, changer les choses et modifier les choses comme bon vous semble. Mais le simple fait de le faire, vous savez, très tôt est vraiment très utile. Donc, la politique de confidentialité et, vous savez, la livraison et l' expédition et, vous savez, les clauses de non-responsabilité, etc., ces types de pages sont vraiment faciles à créer Et, en gros, je pense que la meilleure façon de le faire n'est pas d'utiliser les modèles, mais simplement d'ajouter les textes eux-mêmes. Je pense que cela doit simplement rester très simple. J'essaie de trop compliquer les choses. Cela va juste laisser les gens un peu perplexes et ce n'est tout simplement pas nécessaire, car avouons-le. Qui lit réellement les sections sur la confidentialité de toute façon. La politique de confidentialité, les clauses de non-responsabilité, vous savez, tout ça. C'est juste là pour les questions juridiques. Donc, termes et conditions, vous pouvez simplement ajouter les éléments séparément. Ajoutez donc une section. Ensuite, ajoutez simplement le récipient. Eh bien, vous pouvez ajouter à l'avance, mais je pense qu'il est préférable d'ajouter le conteneur simplement parce que cela le rend réactif. Oui, nous ajoutons donc un en-tête. Ensuite, nous pouvons ajouter le hum, nous pouvons essayer avec un paragraphe, mais pour être honnête, je veux juste vous montrer la différence entre l'ajouter avec un paragraphe et l'ajouter avec du texte enrichi juste pour que vous puissiez comprendre la différence entre les deux éléments. OK, nous avons donc l' en-tête, mettez la politique de confidentialité. Et juste pour vous informer, j'ai ajouté un lien dans le cours lui-même. Vous devriez pouvoir le trouver sur les différents liens vers la politique de confidentialité, les politiques de livraison et de retour gratuites , tout ça. Et il s'agit souvent à peu près du même site Web. Mais c'est très utile d'avoir tous ces liens. Ajoutez simplement tous les détails de votre site Web et tout le reste. Et puis vous pouvez, euh, oui, simplement vous débarrasser de toutes vos affaires légales. Ils essaient de vous faire payer pour, vous savez, des documents officiels ? avez-vous besoin au début de votre activité ? Je dirais que non. Je pense, vous savez, si vous les créez pour un client ou vous créez le site Web pour vous-même, et que vous n'en êtes qu'à vos débuts, avez-vous vraiment besoin de toutes ces grandes dispositions légales en place ? Vous savez, peut-être que vous êtes dans un secteur en particulier où tout va bien. Donc oui, il essaie de nous faire acheter des choses, mais nous n'en avons pas besoin. Il suffit donc de cliquer sur «   Non, je ne veux pas d'une politique de confidentialité professionnelle », puis de la générer. Maintenant, vous n'avez pas vraiment besoin de saisir votre adresse e-mail correcte. Dans certains cas, vous le faites, mais dans celui-ci, ce n'est pas le cas, car vous pouvez simplement ajouter de différentes manières à votre site Web. La première méthode consiste donc à essayer de le copier-coller. Maintenant, j'ai découvert que sur mon Safari, parfois cela ne fonctionne pas, et parfois sur Chroma, cela ne fonctionne pas Vous pouvez donc parfois copier dans le presse-papiers. Et ce que cela signifie essentiellement, c'est intégrer les données, c' est-à-dire que si vous n'êtes pas sûr de ce que cela signifie, ne vous inquiétez pas Tout tourne autour du HTML et du code. Vous n'avez pas besoin de savoir comment coder, mais vous pouvez simplement copier ce code dans une boîte d'intégration dans Webflow, peu comme si vous alliez ajouter du code personnalisé Vous n'avez pas besoin d' apprendre à le faire. Je veux juste vous montrer l' e-mail que vous recevez lorsqu'ils vous envoient la politique de confidentialité , juste pour que vous puissiez la voir. OK, voilà. Ils vous renverront donc simplement sur la même page. Donc c'est ce que j'aime faire en général. Mais ce qui est bien, c'est qu'il contient en fait tous les liens vers les différents autres sites Web qu'ils ont, donc si vous avez besoin d'autre chose, vous pouvez simplement l'y mettre, vraiment très utile. Vous venez donc de vérifier le bas de l'e-mail, devrait contenir un lien vers les différents formulaires et politiques qu'ils peuvent créer pour vous. Maintenant, la façon dont j'aime ajouter la politique au site Web consiste essentiellement à générer des fichiers. Vous pouvez donc générer un fichier doc X, qui n'est en fait qu'un fichier Word. Et puis quand vous l'ouvrez, il, euh, laissez-moi simplement le générer dans Chrome. Pour une raison ou une autre, ça dérange un peu le safari. C, ouvre-le. Parfait Donc, lorsque nous le copions et le transperçons dans le site Web, si nous le faisons dans une section de paragraphe, c'est la section ici Si nous le faisons dans une section de paragraphe, cela a l'air terrible, non ? Il n'est pas formaté, et explique par le fait que les sections de paragraphe ne sont pas destinées à de gros blocs de texte Ils sont destinés, vous savez, une petite quantité de texte sous un en-tête ou à un petit bout de texte, vous savez, peut-être sous une vidéo, par exemple, ils ne sont pas conçus pour de longs blocs de texte. Donc, ce que nous devons réellement utiliser, c'est ce qu'on appelle un bloc de texte enrichi. Nous l'ajoutons donc essentiellement ici. Vous pouvez voir que c' est très différent. Et lorsque nous copions et collons exactement le même texte, tout est formaté et son apparence est bien meilleure C'est juste, tu sais, tellement plus facile. Vous savez, vous pouvez voir que l'espacement demande un peu de travail, mais dans l'ensemble, il est beaucoup plus beau, et vous savez, vous pouvez être beaucoup plus heureuse avec cela Maintenant, il faut faire attention lorsque vous utilisez ces fournisseurs de politiques gratuits et ces créateurs de politiques, vous savez, des créateurs de documents. Y a-t-il parfois une politique de confidentialité gratuite, une sorte de politique de confidentialité gratuite, un site Web et des conseils sur les articles. Ils redirigeront donc vers leur propre site Web, ce que nous ne voulons pas faire. N'hésitez donc pas à le supprimer. Mais oui, vous pouvez simplement , vous savez, prendre le temps de le lire et vous assurer qu'il n'y a rien qui y soit dit qui ne devrait être dit par vous ou par votre entreprise. OK, donc la page A US pour n'importe quel site Web de commerce. Encore une fois, nous allons ajouter la barre NAF. Nous allons ajouter le fourrage. Et n'oubliez pas que nous allons créer des barres NAF universelles et des pieds de page universels un peu plus tard afin qu'il en soit de même sur l'ensemble du site Web Et encore une fois, nous allons nous concentrer uniquement sur la structure pour le moment. Gardez cela à l'esprit. Je sais que le site Web actuel ne ressemble à aucun site de commerce, mais à la fin, il le fera. Et ça ne prendra que 45 minutes à une heure. OK, ajoutons donc une section ici. Donc, la page À propos de nous du site Web de commerce électronique N doit raconter une histoire, d'accord ? Nous expliquons aux gens pourquoi vous devriez acheter chez nous, car il existe des tonnes d'autres personnes ou marques à qui vous pouvez acheter à peu près exactement le même produit. Vous savez, peu de produits sont vraiment uniques. Alors pourquoi devriez-vous acheter chez nous ? Qu'est-ce qui nous rend spéciaux ? Nous pouvons donner à notre marque apparence plus spéciale en racontant une histoire. Et c'est l'une des choses les plus puissantes. Donc, si vous consultez, par exemple, site Web de Rolex, vous savez, ils racontent une belle histoire à propos de chacune de leurs montres, et, vous savez, cela ressemble simplement, vous savez, l'imagerie et à tout le reste. C'est tellement logique. Et vous pouvez comprendre pourquoi il s'agit d'une marque haut de gamme. Pour ce site Web, vous savez, nous n'allons évidemment pas avoir d'images Rolex, mais nous pouvons tout de même raconter une histoire. Donc, ce que j' essaie de faire ici, c'est de créer une petite page produit. La première section est donc la section Haro. Nous allons en dire un peu, nous verrons un peu ce qui nous rend uniques là-bas. Ensuite, nous allons ajouter une section ici pour les produits. Maintenant, nous pouvons utiliser cette section d'équipe. C'est très bien. Sa structure est vraiment géniale. Supprimons simplement ces éléments. Ici. D'accord. Départons simplement. Ouais L'espacement ici est assez mauvais, alors changeons-le. Nous n'avons donc pas vraiment besoin de tout cela. Nous allons juste être, encore une fois, un, prenons ce que vous faites d'abord, juste pour vous simplifier les choses. D'accord. Tout d'abord, organisons la liste de manière à ce que nous puissions obtenir les choses par quatre, je veux juste quatre éléments. Je veux juste quatre produits. Donc je ne veux pas vraiment, vous savez, des tonnes de produits là-bas. Ajoutons-les donc à nouveau dans une section. D'accord. Ensuite, nous pouvons ajouter un conteneur. Et puis, en fait, il se peut que nous n'ayons même pas besoin de le faire. J'essaie de trouver le moyen le plus simple de le faire pour toi. D'accord. Hum, je pense que nous gardons les choses simples, en fait. Je pense que nous voulons simplement garder les choses simples. D'accord. Allons, euh, ça. Mettons-le ici. Cette grille. D'accord. En fait, je ne pense pas que ce soit la meilleure façon de le faire non plus. OK. Alors maintenant, nous allons ajouter. Nous allons donc maintenant ajouter quelques produits. Reprenons donc la section sur l' équipe. Sois un peu créatif. D'accord. Alors évidemment, le formatage de celui-ci est de base. Partons d'ici qui sera dix fois plus beau. Enlevons-en une partie. En fait, enlevons ces boutons. Supprimons l'espacement. Avoir les huit produits, c'est généralement beaucoup, alors partons de cela. D'accord. Allons-y. Il tombe beaucoup. Nous n'avons évidemment pas besoin des icônes des réseaux sociaux parce que c'est tout simplement stupide. Regardons Okay, ça a l'air bien mieux. Et évidemment, cela ressemble toujours à une page d'équipe en ce moment, mais nous le sommes en fait, ajoutons-les à nouveau Oui, c' est beaucoup plus logique. D'accord. Oui, nous ne voulons certainement pas d'icônes de réseaux sociaux. Mais regardons le fait qu'il s'agit évidemment d'une section d'équipe, mais que nous allons la créer dans une section de produits. Ainsi, lorsque vous choisissez des sections, ne regardez pas l' imagerie réelle de la section. Regardez plus en détail les éléments réels qui se trouvent dans la section et le format. Parce que tu peux toujours prendre des choses et mettre des choses comme, tu sais, emporter des choses, ajouter des choses. Mais je ne sais pas si j' aime cette section FAQ. Oui, je pense que je vais m'en débarrasser. Cette section FAQ n'est pas ma préférée. Trouvons-en un meilleur, car il y a certainement de meilleurs. D'accord, bombons. Ajoutons-le ici. Je pense que cela va paraître beaucoup plus propre et bien meilleur. Allons-y. Ça a l'air. Ça a l'air bien mieux. plus propre, beaucoup plus facile à lire. Parfait. Et ce type d'animation prendrait littéralement à quelqu'un, vous savez, peut-être une heure ou deux heures au moins pour faire ce type d'animation, alors que, vous savez, la réponse dans la section FAQ est, vous savez, en quelque sorte se révéler elle-même. Cela prend littéralement environ 2 secondes pour le faire ici. C'est tellement facile. Et c'est ce qui rend le flux Web si génial. C'est ce qui rend littéralement l'élément de création du site Web si rapide, et cela vous fera gagner beaucoup de temps. D'accord. OK, ajoutons ceci ici. Encore une fois, nous avons la section, elle semble correcte. Nous allons ajouter toutes les différentes images et autres éléments plus tard. Mais pour le moment, nous nous concentrons uniquement sur les structures des sections, d'accord ? Structure des pages. D'accord. Passons maintenant à la partie intéressante et ajoutons une page produit. Ajoutons une véritable page de produit et voyons comment cela va se dérouler Parce qu'il y a une chose à propos des bibliothèques et des modèles de webfloor, qu'ils n'ont pas encore de modèle axé sur les produits ou le commerce électronique. Ils l'auront peut-être à l'avenir, au moment où vous regarderez ceci, ils l'auront peut-être. Mais créons ici une page produit l'aide de ce modèle de blog. Et il s'agit littéralement du même modèle d'article que celui que nous avons utilisé auparavant. Mais je pense que sa structure est vraiment géniale. Je pense que si nous supprimons ce contenu ici, ce qui me semble un peu mieux. être honnête, nous pouvons probablement l' enlever. Je ne suis pas sûr que ces icônes sociales soient belles. Mais oui, sortons vraiment ça et emportons-le. D'accord. Donc, ce que nous faisons maintenant, c'est créer la section des produits. Ramenons tout pour que je puisse vous montrer exactement comment je veux m'y prendre. Nous allons donc y ajouter l'article du produit. Nous allons prendre ça Euh, nous allons emporter ce genre de choses, je pense. Vous pouvez voir ici à quoi cela ressemble à des parchemins, et c'est vraiment beau quand cela ressemble à des défilements Je pense que ce que nous pouvons faire, c'est probablement ajouter le titre ici. Nous n'avons donc pas vraiment besoin de cette section supérieure. Nous pouvons simplement ajouter le titre réel. Ajoutez ensuite le Mm mm mm. OK, débarrasse-toi de ça. Nous sommes donc repartis avec la partie inférieure, qui défile très bien C'est peut-être un peu trop élevé. Ajoutons-en deux. D'accord. C'est un petit peu mieux. Et vous vous demandez peut-être quoi ressemble cette page produit ? Fais-moi confiance. Ça va être génial. Faites confiance au processus. Donc, nous allons nous en débarrasser. Nous allons nous débarrasser de toutes ces choses. Tout ce que nous voulons, c'est la fonction réelle des builds, n'est-ce pas ? La structure, la page elle-même. Nous voulons donc ajouter une petite grille ici. Excusez-moi Ensuite, nous allons commencer à ajouter des images. Nous pouvons donc nous débarrasser de tout ce texte. Je veux dire, vous pouvez y garder le texte si vous le souhaitez, mais pour cela, je ne veux aucun texte. Je veux que tout soit visuel. D'accord. Ajoutons une image ici. Où est l'image ? Tapez simplement une image. D'accord ? OK, je ne sais pas ce qui s'est passé là-bas , mais ensuite, copiez-collez ceci, retirez le rembourrage. Copiez-le et collez-le dans le bloc DIP, faites-en un 100 %. Nous y voilà. Donc, tant que l'image est carrée, elle aura l'air carrée. OK, alors il suffit de coller ça. Et puis, en gros, ce que nous avons ici, c'est , écoutez, nous avons le véritable titre. Donc, le nom du produit, le prix sur le côté gauche, que nous pouvons modifier en une minute. Mais ensuite, nous avons une belle série d'images défilantes , ce qui est superbe Il a l'air vraiment élégant. Ça a l'air vraiment cool. Donc, je veux dire, ça a l'air bien. Je suis excitée. Est-ce que ça a l'air mieux ? En fonction. Selon le type de produit que vous vendez, vous pouvez simplement placer, vous savez, la grille sous forme d'une colonne. Mais je pense que pour ce cas, je vais juste le garder au 222. D'accord. Commençons à combler l'écart. J'ajoute donc simplement une classe différente, donc, vous savez, vous pouvez le faire comme vous le souhaitez, mais j'ajoute juste un petit espace à chacun des éléments sur le côté gauche. J'ai donc le titre, donc la page du produit elle-même, donc l'en-tête. Ensuite, j'ai un petit paragraphe juste pour expliquer un peu le produit. Ensuite, j'ai intégré ça, puis j'ai le prix, et puis tout ce dont j'ai besoin maintenant c'est d'un bouton, non ? Comme un bouton d'achat, que je peux ajouter ci-dessous. OK, alors copiez le supprimé, puis collez-le dans cette section Et puis je peux juste dire maintenant, évidemment, pas comme ça. D'accord. Et puis il ne me reste plus qu'à ajouter There we go. Parfait Parfait, parfait. Parfait. D'accord. Je veux dire, ça a toujours l'air absolument nul, mais ça va être mieux. J'ai confiance en moi. D'accord. Nous pourrons déterminer à quoi ressemblent les choses plus tard, mais du point de vue des fonctionnalités, cela ressemble à une belle page. D'accord. D'accord. Que devons-nous faire d'autre ici Donc je pense que c'est à peu près tout. Peut-être que Mm, peut-être que nous ajoutons quelque chose juste en bas. Peut-être que nous ajoutons, par exemple, une section de produits supplémentaire, peut-être. Ça pourrait être cool. Alors, vérifions-le. Au-dessus de ce clochard. Vérifions-le ci-dessous. Encore une fois, ici, vous pouvez voir que c'est le même problème. , ce que je vais vous montrer plus tard, c'est utiliser la fonction des composants dans Web Flow où vous pouvez essentiellement créer un élément universel, qui change sur utiliser la fonction des composants dans Web Flow où vous pouvez essentiellement créer un élément universel, l'ensemble du site Web. Nous allons donc l'utiliser pour le NapPar. Nous allons l'utiliser pour le pied de page. Nous allons également l'utiliser pour les produits. Ainsi, par exemple, si vous avez quatre produits que vous essayez de vendre, vous savez, à un public spécifique ou à une période précise de l'année. Vous pouvez changer les produits, donc les quatre produits, vous pouvez les changer, et cela changera à l'échelle du site. Vous n'avez donc pas à changer chaque page, ce qui est super utile. Je vais donc vous montrer comment procéder un peu plus tard dans la vidéo, mais pour l'instant, restez connectés, et nous y reviendrons. Donc, ici, nous allons simplement ajouter un petit appel à l'action ci-dessous, juste pour le rendre un peu plus professionnel. Et ensuite, jetons un petit coup d'œil. Allons y jeter un petit coup d'œil. 63. Création de site Web : site Web e-commerce (partie 2): Ici. OK. Nous parcourons donc toutes les pages en ce moment. Nous avons toutes les pages, peu près là où nous voulons qu'elles soient. Commençons, vous savez, changer les choses maintenant et à concevoir des choses. Je vais donc juste ajouter quelques images que j'ai en quelque sorte rassemblées, juste pour accélérer un peu les choses, je suppose. Nous allons donc d'abord changer le logo. Cela ne ressemble pas un site Web de commerce électronique pour le moment, mais il ressemblera beaucoup plus à un site Web de commerce électronique à la fin. Fais-moi confiance. OK ? Nous allons donc d'abord ajouter ceci. Ajoutons simplement ceci ici. Ensuite, nous pouvons changer cela. Cela semble avoir été un peu étiré pour une raison ou une autre. Automatisons simplement cela. Max Wit. OK. Je ne sais pas pourquoi ça a l'air un peu bizarre. Permettez-moi de cliquer à nouveau dessus. OK, c'est le rembourrage. En fait, nous y voilà. Vous pouvez donc voir le filet de squash rembourré. Nous y voilà. Ça a l'air bien mieux. Génial Donc oui, nous l'avons , ce qui est parfait. Ensuite, il ne nous reste plus qu'à vérifier les autres éléments. Maintenant, ce que nous avons gros, c'est que nous avons créé la structure complète du site Web. Maintenant, nous devons simplement organiser les autres éléments du site Web. Par exemple, en changeant les polices, vous pouvez prendre le temps que vous voulez pour jouer avec cela et obtenir quelque chose qui vous satisfasse vraiment . Mais pour être honnête, c'est ce qu'il y a de plus drôle. Comme vous avez fait la structure du site Web, qui est le travail le plus important pour être honnête, comme la mise en place de la structure des pages du site Web Maintenant, c'est la partie amusante. Maintenant, vous pouvez expérimenter des choses, vous pouvez créer, vous savez, faire différentes versions. Vous pouvez ajouter des images différentes, vous pouvez écrire la copie. C'est ce que j'adore. Je pourrais littéralement passer toute la journée créer un site Web pour le plaisir, tu sais ? OK, jouons un peu avec ça. Je suis juste en train de changer les polices et tout le reste. Je suis juste en train de jouer. Le PT S semble correct avec des poids normaux de 400. Cela semble juste. Ensuite, je change juste les couleurs. Je joue juste pour voir ce qui est beau. Je vais juste choisir un joli thème en noir et blanc. j'aime bien la façon dont, lorsque je passe le curseur sur le bouton en haut, il passe à une sorte de vert très foncé, à ce vert vraiment élégant OK. Ok, ok. OK. Maintenant, je vais changer cela. Je vais donc simplement créer un lien. Vous pouvez simplement accéder aux paramètres et modifier votre logo pour revenir à la page d'accueil. C'est assez standard. Vous pouvez évidemment également lier toutes les autres pages vers le haut. Je ne vais évidemment les passer en revue avec vous, mais vous pouvez le faire vous-même. La prochaine étape consiste essentiellement à commencer à envisager de changer le puits, créer les composants, afin que nous puissions réellement commencer à fabriquer nos éléments internationaux. Par exemple, ici, vous voyez en quoi c'est vert. Cela signifie essentiellement que la barre NAF sera la même sur l'ensemble du site Web Nous allons faire exactement la même chose avec le pied de page. Faisons donc d'abord en sorte que ce soit parfait. Il suffit de mourir, de retarder, de le supprimer. Supprimer de supprimer. OK, parfait. Nous y voilà. Il n'y a pas de rembourrage, parfait Et puis il ne nous reste plus qu'à ajouter la page d'accueil. Enlève-ça. Oh, en fait, c'est vraiment très gros. Pourquoi est-ce si gros ? C'est tellement dingue. Pourquoi est-ce si gros ? Je pourrais juste le remettre à 126. En fait, je veux un problème 126. OK, allons-y. Supprimons cela. Je veux juste qu'il soit beau et propre. Je ne veux pas qu'il y ait trop de monde. Bien entendu, vous pouvez modifier le texte en bas si vous le souhaitez vraiment, mais pour créer un composant il vous suffit de sélectionner l'élément, que vous souhaitez voir identique sur l' ensemble du site Web. Cliquez sur, créez un nouveau composant, puis donnez-lui un nom, puis cliquez sur Créer. Et puis dès qu'il passe au vert, vous savez que c'est pareil sur l'ensemble du site Web. Vous pouvez donc voir ici, vous pouvez voir ici. Nous allons l'utiliser à nouveau pour les produits. Mais oui, juste pour le moment, gardez à l'esprit que cela vous fera gagner beaucoup de temps. OK, commençons à jouer avec l'imagerie et à mettre les choses en place. Nous avons donc cette image ici, qui est géniale. Encore une fois, mettez-le en place ici. OK, ça a l'air bien. Évidemment, une base de pièces et tout ce genre de choses. Nous ne voulons pas que cela soit là, alors changeons-les simplement. Oui, changeons-les un peu. Nous pouvons donc avoir figuré dans le Daily Mail, CBS, New York Times, juste pour lui donner un peu de crédibilité. OK, ça a l'air bien. OK. Ensuite, nous pouvons commencer à ajouter. De toute évidence, nous pouvons modifier les textes et d'autres choses. Nous pouvons, vous savez, c' est évidemment, vous savez, je ne vais pas aborder l'aspect rédactionnel, mais, vous savez, évidemment, vous pouvez organiser les choses comme vous le souhaitez De plus, lorsque vous concevez votre site Web, assurez-vous d'utiliser autres éléments du cours, comme, par exemple, les leçons précédentes sur, vous savez, la conception de sites Web, sur, vous savez, le flux Web, vous savez , comme le cours intensif sur les éléments du flux Web, pour répondre à vos questions , obtenir les réponses dont vous avez besoin et pour donner à votre site Web apparence et vous savez , par exemple, comment utiliser du texte, vous savez, les différents types de typographie, vous savez, comment créer votre palette de couleurs, comment utiliser votre palette de couleurs Ici, je vais juste modifier un peu ces coins pour qu'ils correspondent au bouton dans le coin supérieur droit. OK. Parfait. Bien, commençons à plonger dans cette section et créons notre petite gamme de produits. OK, cool. Ajoutons donc quatre. Parfait. Nous y voilà. Alors. Rendons les choses super simples. Nous avons donc le sol là. Génial, génial, génial. On y va, on y va, on y va. OK, nouvelles sorties. Et évidemment, vous pouvez mettre ce que vous voulez, mais c'est juste, d'accord, ajoutons simplement quelques images. Ajoutons simplement quelques sacs. C'est pour une marque de mode, un peu de photographie crasseuse. Une chose également, si vous créez une marque de commerce électronique et que vous voulez que le site Web soit vraiment beau. La photographie de vos produits est littéralement la chose la plus importante. C'est à peu près la chose la plus importante si vous voulez vendre quoi que ce soit. Et une chose que j'ai trouvée, qui est très bénéfique, c'est de trouver un gris très clair ou un bleu très clair et de l'utiliser comme couleur de fond au lieu du blanc, juste pour donner l' impression que cela aide à encadrer les choses et à leur donner un cela aide à encadrer les choses et à leur donner aspect super professionnel. Évidemment, vous pouvez alors, vous savez, ajouter le nom du produit et faire tout ce genre de choses. Je ne vais pas vous faire perdre votre temps à passer par tout ça. Mais voyez ici comment, vous savez, nous avons les différents produits maintenant tous arrangés. Mais ce que nous voulons faire, c'est créer un lien pour accéder à la page du produit lui-même. Donc pour le moment, si nous cliquons dessus, cela ne mènera nulle part. Nous allons donc obtenir le bloc de liens. C'est un petit problème. Ça n'a pas vraiment l' air très beau. Passons donc au bloc de liens et c'est assez amusant. C'est 126 auto. Faisons un clic dessus. Nous y voilà. De bonnes choses. Maintenant, il faut y aller. OK. Ensuite, ce que nous allons faire, c'est que nous pouvons littéralement le dupliquer trois fois, puis littéralement le copier-coller, copier et le coller, le copier-coller, et ensuite c'est parti. Ensuite, nous avons tout avec un bloc de liens, de sorte que si nous voulions créer un lien vers une page produit, nous le pouvons. Je n'aime pas ces lignes sous le texte, alors il suffit de cliquer dessus. OK. Parfait. Et puis voyons, il suffit simplement, vous savez, de choisir la page que vous voulez, puis elle sera automatiquement liée à cette page en particulier. Et puis, lorsque nous arrivons à cette section, il suffit d'ajouter une belle image. OK. Génial. Parfait Et puis, évidemment, nous écrivons juste un peu sur l'histoire de la marque, et nous voulons simplement amener les gens à en savoir plus sur la marque à ce stade. D'accord ? OK, alors vérifions-le. OK. Ça a l'air plutôt bien. OK. OK. Et j'ai littéralement copié et collé les textes ci-dessus, le bouton et tout le reste ne pas avoir à le créer à nouveau Par exemple, je veux juste que tout reste cohérent. Et vous pouvez littéralement simplement copier et coller comme modifier dans un document Word. C'est super facile. Vous pouvez le faire avec tous les boutons. Je ne vais pas vous faire perdre votre temps et vous savez, entrer vraiment dans les détails, mais, vous savez, vous pouvez le faire à votre rythme, et je veux juste vous le montrer une fois, juste pour que vous compreniez comment faire OK, donc nous avons tout ça. OK, éditons le blog juste à cause de ce bloc. Ces bloqueurs de posts ne sont pas vraiment très beaux pour le moment. Nous y voilà. Donc, donnez-leur un peu plus de marque, je suppose. Génial Ça a l'air bien. OK, parfait, parfait. Parfait OK, mode, mode. Génial OK. Maintenant, nous ne faisons que mettre la touche finale. Nous voulons littéralement, vous savez, mettre les choses en place, mettre toutes les images en place. Vous savez, si vous modifiez un peu de texte, nous n'aurons pas besoin de collaborateurs. Je trouve que ça n'a pas l'air aussi propre. Changez-le en noir ou en gris ou quelque chose comme ça. Ouais Gardez simplement les choses belles et simples. Mais oui, en ce moment, nous ne faisons que jouer avec les choses, et je pourrais passer des heures à le faire, comme, littéralement, vous savez, faire différentes couleurs et, vous savez, essayer différentes choses. C'est littéralement la partie préférée de tout le processus. Je l'adore absolument. Alors oui, prends ton temps avec ça. Tu sais, tu as créé la structure. C'est le plus important. Eh bien, ils sont tous les deux également importants, mais la structure est importante car elle aidera en fait à créer l'expérience pour l'utilisateur et à l'amener à aller là où vous le souhaitez. Mais maintenant, vous pouvez vous amuser avec l'esthétique et l'apparence réelles du site Web. C'est là que les choses deviennent super intéressantes. Voici donc la page de l'article, donc encore une fois, vous pouvez simplement la modifier. Je vais vous montrer comment configurer un système CMS plus tard. C'est super simple, super facile, alors ne vous inquiétez pas. Mais je vais vous montrer comment procéder pour cette marque en particulier dans peu de temps. Nous n'avons pas besoin de contributeurs. Je ne pense pas. Nous devons absolument nous abonner à notre newsletter car la liste d'e-mails est reine. Nous avons donc tout cela. Nous avons tout cela. OK. Maintenant, nous n'avons plus besoin de ces barres de navigation car nous avons notre barre de navigation universelle Nous pouvons donc nous assurer que vous la connectez au pied de page du corps, et voilà Ensuite, nous sommes prêts à partir. Ensuite, nous pouvons faire exactement la même chose avec la barre de navigation en haut, ce qui va être génial. Et puis on y va. Donc, littéralement, cette barre de navigation et ce pied de page seront les mêmes où que nous allions sur le site Web Ce sera toujours pareil. Cela nous donnera toujours le même look, la même sensation. Si nous changeons quelque chose, cela changera également sur les autres pages du site Web. Encore une fois, comme vous pouvez le voir ici, nous devons généralement créer la barre de navigation à partir de zéro refaire encore et encore, puis la modifier encore et encore, mais vous n'êtes pas obligé de le faire lorsque vous créez le composant. Alors assurez-vous de le faire, cela vous fera gagner beaucoup de temps. OK. Donc, ici, évidemment, vous pouvez changer la couleur des choses si vous le souhaitez vraiment. Évidemment, pour cela, je vais simplement le garder. Je vais juste le garder noir. Tu sais, changer tes coordonnées, tout ce genre de choses. Je vais juste changer cela, pour que ce soit un peu plus une question de marque. Parfait OK, cool. C' est fait, vous savez, L, nous créons littéralement un site Web en 45 minutes à une heure, et c'est pratiquement fait maintenant, vous savez. C'est comme si ce n'était pas trop loin. OK, ajoutons ceci. Donc, en temps réel, jetons un coup d' œil à celui-ci ici. Donc, des sacs géniaux. Évidemment, nous allons dire aux gens à quel point nos sacs sont géniaux. Ajoutons simplement ici une nouvelle image. OK. Ajoutez simplement cette image. Pour présenter les fondateurs de cette entreprise de sacs. Ce sont de charmants fondateurs. OK. Nous sommes donc arrivés à un point où nous devons littéralement créer à nouveau les sacs, les sacs et tout le reste. Je ne veux pas faire ça. Je veux être aussi paresseux que possible lorsqu'il s'agit de créer le site Web et de le gérer. Donc, ce que nous allons faire, c'est créer un composant. Nous allons donc revenir à la page d'accueil pendant que nous avons déjà fait ce travail. Nous allons obtenir la section proprement dite, d'accord ? Nous allons nous assurer que c'est le bon, puis cliquer pour créer un nouveau composant. Alors, regardez. OK, alors trouvez celui qui est le plus près du corps. Cliquez ensuite sur composant. Ensuite, nous allons passer aux produits, etc., voilà. Au revoir, bam bam Ensuite, nous allons revenir à la page. Nous avons donc créé le composant maintenant. Ce sera le même sur chaque page du site Web. D'accord ? Alors plongeons-nous dans le vif du sujet et examinons les cargaisons du CIFA. OK. Donc, vous savez, nous devons également l'ajouter sur cette page. Alors retirons-le parce que nous n'en avons pas besoin. Section, supprimer. Et ensuite, allons-y. Et voilà, c'est parfait. Génial, génial, génial, génial, génial, génial. Nous y voilà. A, b, bum, bum, bum pa, ba, ba, ba, put, bum put. Jetons un petit coup d'œil à ça. Regarde ça. OK. Faisons juste signe pour que ça se charge un peu. Une chose que j'ai trouvée, c'est que le flux Web a tendance à mieux fonctionner sur Safari, et je ne sais pas pourquoi. Désolé, cela fonctionne mieux sur Chrome. Cela ne fonctionne pas aussi bien sur Safari, et je travaille sur Safari en ce moment. Et oui, c'est un peu plus lent, mais ce n'est pas trop mal. Cela fonctionne toujours, mais c'est un peu plus lent. Oui, vous pouvez donc voir que j'ai utilisé le composant et que je l'ai simplement intégré, et c'est pareil sur l'ensemble du site Web Utile Assurez-vous donc de le faire si vous voulez avoir la même section ou la même, vous savez, une partie du site Web à plusieurs endroits différents du site Web. Assurez-vous de l'ajouter, car c'est littéralement une solution pour vous faire économiser beaucoup de temps et d'énergie, les gars. Fais-moi confiance. OK. J' ajoute donc simplement une petite section pour entrer en contact ici. OK, connecte-nous simplement à la page des contacteurs. Parfait OK. Encore une fois, nous n'avons pas besoin de créer à nouveau la photo. Nous pouvons littéralement le supprimer et l' obtenir, le faire ajouter depuis la section des composants. Nous y voilà. Génial. Ça a l'air tellement beau. Vous souvenez-vous que cela ne ressemblait en rien à un site Web de commerce électronique ? Maintenant, cela ressemble vraiment à un site Web de commerce électronique ? La magie du temps, du temps et de la patience. OK. Nous pouvons donc voir ici maintenant, évidemment, vous savez, que le texte et tout le reste peuvent être modifiés, mais, vous savez, nous avons un très bon début ici. Il s'agira de la véritable page du produit. Donc, ce sera probablement la chose qu'il est important de bien faire. Nous avons donc les produits supplémentaires qui existent ? C'est une bonne chose. Commençons par embellir tout cela et commencer les choses Encore une fois, avec cela, vous pouvez voir en quoi cela ne se produit pas sur le corps. Montez sur le corps. Nous y voilà. Maintenant c'est mieux, et celui-ci aussi. Encore une fois, nous n'avons pas besoin de le refaire. Oh, attends une seconde. Nous l'avons déjà fait, non ? Nous avons déjà fait cette section auparavant. Nous n'avons pas besoin de refaire cette section. Alors revenons en arrière. Et encore une fois, c'est ainsi que nous devrions travailler, les gars. Nous devons donc nous assurer de gagner du temps à l'avenir, car votre futur moi vous en remerciera. Vous devez donc revenir à la section, créer, il vous suffit donc de sélectionner la section que vous souhaitez copier. Ensuite, créez-le, je suis en train de le rechercher. En fait, je le cherche ici. Je ne sais pas pourquoi je fais ça. OK. Allons-y, c'est faux. OK, qu'est-ce que je fais ? Qu'est-ce que je fais ? Scott, ressaisis-toi. Donc, ce que j'ai fait là-bas, c'est que j'ai essentiellement ajouté le pied de page dans cette section au lieu de créer un composant Je vais donc plutôt sélectionner, créer un nouveau composant, nous contacter. Nous y voilà. Maintenant, nous l' avons en vert. Nous pouvons maintenant accéder à la page du produit, et maintenant nous pouvons l'ajouter au bas de la section, qui se trouve ici. Nous y voilà. Et nous pouvons simplement ajouter cela ici, et tout ira bien. Parfait Nous y voilà. Agréable et propre. Ça a l'air super. OK. Maintenant, débarrassons-nous de ce fourrage moche et installons notre bon fourrage ou notre fourrage ou notre OK, génial. Et maintenant , commençons à peaufiner et à l' arranger parce que je pense que nous avons juste besoin de quelques images du produit et de tout arranger quelques images . OK. J'ai déjà arrangé quelques images. Vérifions-les. Nous y voilà. Ils devraient être plutôt beaux. Je viens de les acheter ici et une sorte de modèle en ligne. Encore une fois, ce n'est pas le produit que je possède réellement ou quoi que ce soit d'autre. Je viens de les trouver en ligne, alors j'ai pensé qu'ils seraient plutôt sympas à utiliser juste pour vous les montrer. OK. Nous l'avons donc. Ajoutez simplement ces images. C'est vraiment simple. Vous pouvez voir maintenant que la page commence à prendre vie un peu, non ? Juste à cause de l'imagerie, et ajoutons-en deux autres. Je pense qu'environ six images, c'est à peu près correct. Nous y voilà. On y va, on y va, on y va. OK. Génial. OK. De bonnes choses. Ça a l'air bien. Ça a l'air bien. Ça a l'air bien. Ce sac a l'air vraiment grand quand elle le tient. Je ne savais pas que c'était si gros. OK, génial. OK, Button, volons juste ce bouton de contact, et ajoutons-le dedans. Et nous allons simplement changer cela comme maintenant. Évidemment, nous n'allons pas accéder à la page de contact DS. Nous passerons soit, vous savez, à un processeur de paiement, soit au plan de commerce sur Web Flow, que je vous parlerai un peu plus tard. Et cela coûte un peu plus cher, mais c'est certain que c'est un bon investissement si vous êtes une marque de commerce électronique. OK. Donc, oui. OK, le prix réel. Ne le donnons pas trop cher. Nous n'en avons pas vraiment besoin. Nous n'avons pas vraiment besoin de cette section, n'est-ce pas ? Ouais. Débarrassons-nous de cela, mais nous pourrons ensuite ajouter, par exemple un stock limité ou quelque chose comme ça, stock limité ou quelque chose comme ça juste pour créer un peu d'urgence. Mais cette couleur rose ne me convient pas vraiment, donc ce que je veux faire, c'est utiliser comme du bleu ou quelque chose comme ça, comme un bleu froid. Je pense que ça va probablement être un peu mieux. Passons aux arrière-plans. Joli bleu. Nous y voilà. Ça a l'air, je veux dire, oui, ça a l'air décent. Ça a l'air décent. J'en suis content. OK. Ensuite, boutique sur le blog. Ça a l'air plutôt bien, maintenant. Ça a l'air plutôt bien. Évidemment, vous ajouteriez le texte, la page du produit, le nom de l'article, tout ça. Mais maintenant, ce que je veux te montrer. Je veux vous montrer le CMS très rapidement, car le CMS vous fera gagner beaucoup de temps, comme les composants. Le CMS va vous faire gagner beaucoup de temps. Maintenant, il s'agit de la section Commerce électronique actuel. De toute évidence, si vous payez réellement pour le plan de commerce électronique, vous l'obtenez et il est déjà entièrement intégré, tout est déjà configuré, vous n'avez donc pas à vous soucier de quoi que ce soit Il suffit donc d'acheter le plan et vous pouvez simplement tout configurer. Et si vous avez des questions, posez-les nous ou vous pouvez les poser directement à weblow Les flux Web sont généralement les meilleurs pour le commerce électronique, car ils peuvent vous guider à travers des vidéos Mais avec le CMS, vous pouvez créer une collection CMS pour les différents produits que vous vendez. Maintenant, la raison pour laquelle cela est très utile est que, par exemple, examinons ces actifs. Voici donc tous les produits que nous vendons à la Lancaster Academy sur notre site Web C'est littéralement juste pour aider les gens à, vous savez, développer leur marque de la manière la plus simple. Nous avons donc différentes choses comme le nom, vous savez, le point de vente, ce qui rend le produit spécial. Mais nous pouvons réellement créer une collection CMS pour les produits. Sur votre site Web. C'est vraiment simple. Donc, par exemple, ici, nous allons juste jouer, non ? Nous allons simplement utiliser cette collection CMS existante et en créer une sorte de balisage Par exemple, supprimons simplement tout ce qui se trouve sur cette page. Donc, copions simplement ceci. Copie. Je l'ai copié. OK. Et passons à l'autre section ici. Donc, si vous regardez cette page ici, il s'agit simplement d' une page produit que nous avions l' habitude de concevoir auparavant. Et nous pouvons littéralement prendre la page que nous venons de concevoir pour la marque de commerce électronique et l' utiliser pour créer quelque chose dans le CMS. Donc, une collection CMS, qui va nous permettre d'ajouter des produits gérer des produits et de modifier des produits beaucoup plus facilement, et je vais vous montrer ce que je veux dire dans une seconde. Nous supprimons donc tout ce qui se trouve sur cette page, et nous copierons et collerons. Nous l'avons donc, ce qui est parfait. Ensuite, nous pouvons simplement ajouter notre barre NAF et notre fourrage. Ici, ici. OK, alors il suffit d' ajouter le pied de là. Ensuite, nous allons commencer à tout relier. Ainsi, par exemple, nous allons simplement le faire rapidement. Je ne créerai pas une toute nouvelle collection de SMS. À propos de la collection CMS, devrais-je dire. Nous allons simplement reconstruire la page. Au sein d'une collection CMS. Parce que pour le moment, c'est sur une page statique. Il s'agit de la page du CMS. Les pages violettes sont la page du CMS, comme vous pouvez le voir dans le coin supérieur gauche. Il y a une petite boîte violette. C'est la page CMS, le signe d'une page CMS. OK, alors réorganisons les choses ici. Pour que les choses se présentent bien. OK. Nous ajoutons donc nouveau notre composant avec les différents produits. Ça a l'air parfait. OK, génial, génial, génial. Nous y voilà. OK. Ça a l'air bien. Maintenant, lorsque nous examinons la création d'une page ou d'un système sur la page du CMS. Vous pouvez voir ici que lorsque nous cliquons sur un élément, nous avons la possibilité, non seulement de le modifier, mais aussi de le lier à quelque chose. D'accord ? Alors laissez-moi vous montrer ce que je veux dire. Nous passons donc à la section CMS. Collections de blogs. Ce n'est qu'une collection, avec laquelle nous ne faisons que jouer. Modifions-le un peu. Supprimons donc simplement ceci. Et puis bloquons simplement la collecte. OK, tu vois, ce sont tous des éléments préexistants issus d'une collection de blocs que nous avons créée il y a quelque temps. Nous en avons un nouveau maintenant. Mais par exemple, si nous ne regardons que l'imagerie, utilisons simplement les champs d'image. D'accord ? Nous avons donc quatre images. Ajoutons-en deux autres. Nous allons donc mettre l'image 5. Puis image 6. OK. Parfait Alors nous avons le nom. Nous pouvons donc simplement l'utiliser comme nom du produit. Nous l'avons. Nous pouvons simplement l'utiliser comme contenu. Et puis nous avons le bloc Author , que nous pouvons transformer en prix, a ? Encore une fois, nous faisons les choses très vite ici, juste pour vous montrer comment faire, d'accord ? Enregistrez donc la collection. Que Dieu te bénisse. Excusez-moi, dois-je le dire ? Pouvez-vous voir ici comment, au lieu de changer l'image, nous la connectons à un champ du CMS. Nous cliquons donc sur un petit bouton violet, et nous avons fait le numéro un, numéro deux, le numéro trois, voici le numéro quatre. OK. Nous pourrions donc cliquer sur remplacer l'image, mais nous ne voulons pas remplacer l'image. Nous voulons le connecter au CMS lui-même. OK. Nous l'avons donc là. Connectez donc celui-ci à cinq. Et puis connectez celui-ci à l'image 6. Nous y voilà. Parfait Connectons-les deux et voyons ce qui se passe. Connectez-vous à quatre, puis connectez celui-ci à trois. OK. Cool. Associons-le au nom ou au titre du bloc de titre, mais il peut s'agir du nom du produit, peu importe. Cela relie cela au sujet du contenu. Reliez cela au prix. Si nous voulons le trouver, nous y allons. Et puis connectez-le au lien. Nous voudrions essentiellement lier cela à, vous savez , quoi, si nous faisons comme un paiement, comme un paiement. Processeur, ou nous faisons, vous savez, l'ajout à la carte, par exemple, nous l'associons simplement à un processeur pour ce boîtier, nous l'associons simplement à un comme P pal, Pioneer ou Air Walx ou quelque chose comme ça , mais vous pouvez le faire d'une façon ou mais vous pouvez le faire d'une façon ou Alors maintenant, tout a disparu, ce qui est un problème, mais ce n'est pas vraiment un problème. Laissez-moi vous montrer pourquoi. Donc, si nous ajoutons cinq types d' espace réservé aux commandes, désolé, des articles, ici, vous pouvez voir que nous avons ceci Maintenant, si nous en supprimons quatre parce qu'ils gaspillent notre énergie cérébrale, nous revenons aux collections de blocs, que nous ajoutons simplement un exemple de sac et que nous regardons les images. Ignorez simplement tout le reste, concentrez-vous uniquement sur les domaines sur lesquels nous nous concentrons. Nous avons six images à ajouter. Vous pouvez voir ici, comme pour le moment, un exemple de sac, et nous avons six images qui n'ont aucun rapport avec les sacs, d'accord ? Et le texte n'a aucun sens. Revenons donc à l'élément CMS proprement dit. Et ajoutons une photo du sac. Ajoutons une autre photo. Nous ajoutons donc simplement les photos des sacs pour le moment. C'est ça ici. Et puis évidemment, ajoutons les deux autres éléments, ou les deux autres images à la fin. OK, c'est bien. Et puis pour le sujet du contenu, écrivons simplement quelque chose de fou, comme, vous savez, quel sac incroyable. J'aimerais savoir épeler. OK, cool. Et puis Price, mettons juste quelque chose dedans. Nous allons juste y mettre un peu plus de texte. Tout semble être en ordre. images 5 et 6, pour une raison ou une autre, n'ont pas été mises à jour, mais oui, c'est une autre. Ne vous inquiétez pas trop pour l'instant. OK. Je vais donc vous montrer en fait parce que images 5 et 6 n'ont pas encore été mises à jour, donc je vais vous montrer ce que cela signifie. Prix, modifions-le très rapidement. 79$. Assurez-vous d'y mettre le signe de 1$. Ensuite, essayons de le sauvegarder, mais cela nous redonnera du fil à retordre car le lien est erroné. Voilà, alors ajoutons simplement le slog. Comme le dit si bien, ce n'est pas bien. Donc, si vous redescendez, nous verrons. Nous devons donc y ajouter un lien, comme un vrai lien. Pour cet exemple, récupérons simplement un lien depuis le domaine. OK. Nous y voilà. Sauvegardez-le, et cela devrait fonctionner. Et puis tout devrait être parfait. Sauf que deux images devraient être erronées, car nous ne les avons pas encore mises à jour. Et bien sûr. Nous y voilà. Les deux images ci-dessous sont fausses. OK. Alors, que pouvons-nous y faire ? D'accord ? Nous devons donc essentiellement retourner dans le CMS et ajouter les images du sac. C'est la seule solution que nous pouvons apporter pour le moment. Ils sont tous deux connectés aux bons objets, mais ils ne le sont tout simplement pas ils ne sont pas connectés à la bonne image. Alors allons-y, c'est bon. C'est une bonne chose. C'est une bonne chose. C'est une bonne chose. Remplaçons simplement ces deux photos par les photos du sac, et ensuite c'est parti. OK, calme-toi. Cela devrait donc automatiquement configurer les choses là-bas. Et puis je pense que j'aime bien avoir les photos de la fille en bas pour une raison ou une autre. Alors, mettons ça en bas. Je vais donc simplement copier et coller ce copier-coller en bas. Nous y voilà. Nous y voilà. Take There, on y va. Parfait. Génial. OK. Idéal. Ça a l'air bien. J'en suis plutôt content. OK. Incroyable. Donc oui, donc tout est à peu près prêt maintenant. Oui, je veux dire, c'est à quel point il est facile de créer une collection CMS et de créer une très belle page de produits où vous pouvez simplement avoir tous vos produits. Vous savez, nous avons littéralement créé un site Web de commerce électronique complet en moins d'une heure et 10 minutes, vraiment très rapidement. Et il y a une chose que je veux juste vous montrer, c'est dans les paramètres. Donc, si nous passons aux paramètres du site, je pense que vous devez savoir avant prendre en compte le tissu, assurez-vous qu'il fait 32 pixels sur 32 pixels, votre clip Web, assurez-vous qu'il fait 256 x 256. Ne les compliquez pas trop. Sinon, ils auront l' air affreux. Formulaires. Assurez-vous de saisir votre adresse e-mail dans le formulaire. Cela permettra simplement de s'assurer que toutes les personnes qui vous contactent accèdent à votre adresse e-mail actuelle , celle correspondante, et enregistrer, de la publier. Aussi bien planifié. Donc, pour les sites Web de commerce électronique, vous devez vous assurer de sélectionner un plan de site de commerce électronique. Donc, pour être honnête, je ne pense pas que vous aurez besoin de quoi que ce soit d'autre vous aurez besoin de quoi que ce soit d'autre que la norme, mais évidemment, vous savez, cela dépend entièrement de vous. Mais je pense que vous pouvez également vous connecter à un processeur de paiement, comme pay pL ou autre, et laisser les gens payer de cette façon et simplement utiliser le CMS ou le CMS de base. Si vous n'avez qu'un ou deux produits, vous pouvez simplement utiliser le produit de base l'utiliser et le faire de cette façon. Le problème avec le starter c'est que vous ne pouvez pas ajouter de domaine personnalisé, vous n'avez donc pas vraiment l'air très professionnel et crédible. Il est donc très peu probable que les gens achètent chez vous. Et aussi, vous savez, vous ne pouvez pas créer plus de cinq pages, donc c'est un peu ennuyeux. Mais si vous souhaitez ajouter votre domaine, vous pouvez le faire ici J'ai une autre vidéo plus tard dans le cours où vous pourrez réellement apprendre à le faire. Mais assurez-vous de tout publier, et c'est à peu près tout. Assez simple, assez simple. Et oui, c'est vraiment très bien de tout décomposer, et j'espère que vous avez apprécié cette leçon autant que j'ai aimé la préparer. OK. À bientôt. Au revoir. 64. (Audio remasterisé et 16: OK, comme vous pouvez le constater, nous partons de zéro et construisons ce site Web à partir de zéro. Maintenant, la première chose à faire est de commencer à créer la structure du site Web. Et nous pouvons le faire en accédant à la mise en page du flux Web , puis en ajoutant des modèles provenant essentiellement de la bibliothèque. Et il y en a de très bons ici, par exemple, celui-ci est vraiment bon. C'est celui que j' utilise beaucoup. Hum, discutez simplement du fait qu'il y a le plus de choix. J'aime ceux qui ont, vous savez, le plus d'options, juste pour que je puisse jouer avec différents formats. Donc oui, ceux qui ont le plus de choix, vous savez , sont ceux que je vais choisir. Ensuite, il vous suffit de l' ajouter à la bibliothèque. Ils sont tous totalement gratuits. Et puis une fois que vous les avez ajoutés, vous pouvez simplement les utiliser. Et c'est absolument fantastique. Maintenant, j'en ai déjà trop sur mes comptes, donc je ne peux pas en ajouter un autre. Mais j'ai déjà ceux que je veux utiliser de toute façon, donc je peux simplement les utiliser sans avoir à les réinstaller, d'accord ? Oublions donc cela pour charger, puis nous pourrons continuer Mais la construction de la structure du site Web est très importante, car cela représente littéralement, vous savez, 50 à 60 % du travail réel. Vous savez, pour créer un site Web, vous devez vous assurer que les structures sont correctes. Commençons donc par, vous savez, examiner l'une de ces bibliothèques. Utilisons celui-ci. Maintenant, la première chose que nous devrions envisager est de créer une barre de navigation. Maintenant, un peu plus tard, je vais vous montrer comment créer la barre de navigation de manière à ce que vous n' ayez à la créer qu'une seule fois, et que vous n'ayez plus jamais à la créer. Nous allons également créer la photo, mais nous le ferons un peu plus tard. Alors, jetons un coup d' œil à celui-ci, peut-être. Oui, celui-ci a l'air bien. OK, parfait. Maintenant, nous allons changer le logo, vous savez, un peu, vous savez, les polices, les couleurs et tout ça un peu plus tard. Mais pour le moment, nous nous concentrons uniquement sur la structure du site Web. Donc, ne vous inquiétez pas encore pour les couleurs, les images et tout le reste. Nous le ferons plus tard. le moment, nous cherchons simplement une section dédiée aux héros pour notre site Web. Et évidemment, ce site Web est destiné à une marque personnelle. Nous cherchons donc quelque chose qui puisse représenter la marque personnelle, vous savez, d'une excellente manière. Je veux dire, celui-ci a l'air plutôt beau, en fait. Celui-ci a l'air plutôt polyvalent. Il y a une belle grande image. Il va être super réactif. Oui, allons-y avec celui-ci. Celui-là a l'air plutôt bon. Nous pouvons jouer avec les choses, les supprimer, les modifier par la suite. Pour le moment, encore une fois, nous nous concentrons uniquement sur la structure du site Web. D'accord ? Cherchons une autre section à ajouter sous la section des héros. Et encore une fois, c'est super facile à utiliser. Vous pouvez simplement les glisser-déposer, et, vous savez, c'est super facile. Honnêtement, je ne comprends pas comment flux Web a rendu si facile la création de super beaux sites Web. OK, ajoutons cette petite section sur la confiance ici, qui indique essentiellement que nous avons été présentés, ou du moins que nous pouvons l'utiliser comme section vedette. Assurez-vous simplement de le placer sur le côté gauche, afin que ce soit sa propre section, sinon il sera en quelque sorte à la hauteur de la section précédente. OK. Donc ça a l'air bien. Nous pouvons changer cela par la suite, mais encore une fois, nous nous concentrons uniquement sur la structure pour le moment. Ne vous inquiétez pas pour les couleurs, sinon création du site Web prendra beaucoup plus de temps. Concentrez-vous simplement sur la création de la structure. OK. Donc oui, nous pouvons changer cela un peu plus tard et peut-être en avoir un peu, présenté dans la section, ce qui sera une bonne chose, et cela renforcera la confiance des visiteurs de notre site Web. Maintenant, regardons quelque chose. Pour les services ou les choses que nous pouvons essentiellement fournir. Oui, ça a l'air bien. OK. Parfait. Nous pouvons changer les icônes, nous pouvons changer le texte plus tard. Ce n'est pas un problème, mais j'aime bien son apparence car nous commençons finalement par la section des héros. Encore une fois, c'est pourquoi vous êtes ici, nous vous expliquons exactement pourquoi vous êtes ici. Alors vous nous dites, eh bien, alors nous leur disons qu'ils peuvent nous faire confiance pour la section en vedette. Ensuite, nous leur disons ce que, eh bien, le visiteur du site Web, puis nous leur disons : OK, voici ce que nous pouvons faire pour vous. Par exemple, ce sont les services que nous pouvons fournir, ou c'est ce que, vous savez, en tant que marque personnelle, je peux faire pour vous. OK. Une jolie petite section de critiques maintenant. Ça a l'air bien. Et nous pouvons simplement ajouter, vous savez, peut-être, vous savez, des témoignages de l'un ou l'autre des employeurs Vous savez, quelle que soit votre marque personnelle, vous pouvez l'ajouter ici. Et ajoutons une section de bloc, en fait. Ce serait bien. Juste pour montrer notre expertise. Et je pense que nous allons en faire un site de mode sur le mannequinat pour une marque personnelle de mode sur le mannequinat, ce qui devrait être assez amusant. OK. Génial, alors ajoutons simplement du fourrage OK. Celui-là a l'air plutôt propre. OK, parfait. Ça a l'air bien. OK. Nous pouvons modifier certaines de ces choses par la suite. L'une des choses, c'est que pour une raison ou une autre, la largeur de la taille, ils la fixent parfois automatiquement à 126, et vous pouvez le voir ici, elle n'a pas vraiment l' air très belle Et vous pouvez le modifier très facilement, allant littéralement à l'élément 126 et en le réglant simplement sur automatique, et il le corrigera. En gros, il configure tout correctement. Mais oui, pour une raison ou une autre, c'est ce qu'il fait. Mais cela me fait gagner tellement de temps à créer des sites Web que je ne m'intéresse pas vraiment. Je suis heureuse de les modifier. Prenez 10 minutes pour les modifier , car cela me fait gagner beaucoup de temps en créant des sites Web en utilisant ces dix plaques. Ils sont très utiles. OK. Parfait Génial Je suis plutôt content de l'apparence de la page d'accueil. Commençons par réfléchir à la création de la page suivante, qui sera, je pense, le blog. Commençons par créer la page de blog. OK. Encore une fois, le pied de page. Encore une fois, pour le pied de page et pour la barre de navigation. Nous allons vous montrer ou je vais vous montrer comment créer une barre NAF universelle plus tard Vous n'avez pas à vous soucier d'ajouter, vous savez, les titres ou quoi que ce soit d'autre. Concentrez-vous simplement sur la construction de la structure du site Web. Je sais que je n'arrête pas de le dire, mais oui, c'est vraiment important parce que je veux juste vous montrer comment vous pouvez littéralement créer un site Web incroyable en 45 minutes. Comme nous allons littéralement le faire, il faudra environ 45 à 50 minutes pour créer ce site Web. OK. Passons donc à cette section de blocs ici. Encore une fois, assurez-vous simplement qu'il est super sur la gauche pour qu' il n'intervienne pas avec d'autres éléments, donc qu'il soit tout seul. OK, ça a l'air cool, et nous allons le modifier par la suite. Alors ne t'inquiète pas. Je sais que cela ne ressemble pas vraiment à de la mode ou à une marque personnelle pour le moment, mais je vais vous montrer comment le modifier un peu plus tard. Ne vous inquiétez donc pas. OK, génial. OK, nous l'avons. Maintenant, nous avons les paramètres SMS , et je vais vous montrer comment les configurer car cela permet de gagner beaucoup de temps. Donc, par exemple, ici, vous pouvez dire que j'ai des tonnes d'articles. Cela m'évite de créer de nombreuses pages différentes pour différents articles. Donc, au lieu de créer 50 ou 100 pages différentes, je peux simplement créer une page. Voici donc, par exemple, le blog de la Lancaster Academy Vous savez, j'ai peut-être 50 à 80 articles dedans et une seule page, donc si je le voulais, je pourrais littéralement avoir des milliers d'articles différents, jamais avoir à faire deux fois la même page. Ce n'est littéralement qu'une page, et il la remplit automatiquement pour qu' elle ait une apparence et un toucher super professionnels à chaque fois Mais il faut juste le temps de bien faire les choses une fois. Ensuite, une fois que vous l'avez fait correctement une fois, vous n'aurez plus jamais à le créer à nouveau. Je vais donc vous montrer comment faire cela un peu plus tard et vers la fin. Mais pour l'instant, je suis juste vous montrer quelques de vous montrer quelques choses différentes que vous pouvez faire juste pour, vous savez, rendre la page de blocage un peu plus belle Nous allons donc changer les couleurs et autres choses un peu plus tard. Ne vous inquiétez pas, mais voici quoi devrait ressembler une bonne page de bloc. Vous savez, cela pourrait certainement être amélioré. Je pourrais certainement vous en dire un peu plus sur le contenu. Mais c'est finalement à cela que cela devrait ressembler dans l'ensemble. OK. Donc, et ce sont tous les différents articles que j'ai, oui. J'en ai donc 47 au total, et je vous montrerai comment configurer les différents paramètres du CMS plus tard dans le cours, car cela vous fera gagner beaucoup de temps. Et cela coûte un peu cher lorsque vous hébergez le site Web si vous souhaitez obtenir les paramètres du CMS. Mais en sélectionnant la configuration du CMS, vous pouvez simplement vous simplifier la vie dix fois. C'est juste que c'est un investissement qui en vaut la peine. Ainsi, par exemple, ici, regardez, vous pouvez voir que le nom de l'article de blog lui-même est lié au backend du site Web, qui indique en fin de compte à la page ce qu'elle doit mettre. Il s'agit donc de leur indiquer le titre. Cela leur indique le temps de lecture en minutes, sujet dont il s'agit, l'image à mettre. Vous savez, cela fait avancer le contenu. C'est donc littéralement tellement utile. Et je vais vous montrer comment faire un peu plus tard , mais honnêtement, cela ne me plaît pas, expliquer combien de temps cela va vous faire gagner. Donc, oui, je veux juste vraiment, vraiment faire passer ça. Mais L Commençons par regarder la page de notre blog actuel. Commençons par regarder k, donc c'est 126, alors changeons cela. OK, donc ça a l'air bien. Pour être honnête, tout se présente plutôt bien. Ce n'est pas à 1 million de kilomètres. Nous les retirons peut-être simplement parce que nous n'avons pas besoin de trois contributeurs. Nous n'en avons pas besoin. Nous avons certainement besoin d'une petite inscription à la newsletter. Cela va certainement être utile car en tant que marque personnelle, vous voulez vraiment augmenter votre liste d'e-mails. C'est littéralement ce qu'il y a de plus important. Tellement génial. C'est ce que nous allons faire. Articles de blog, Génial génial génial. C'est ce que nous allons faire. Faisons le genre de page de blog principale où nous montrons tous les différents articles de blog que nous avons créés afin que les gens puissent réellement lire notre contenu. OK. Lequel est le plus beau en fait ? Celui-ci a l'air plutôt cool, mais je veux juste les voir tous ensemble. OK. Oui, utilisons celui-ci en fait. Voyons juste à quoi ça ressemble. Et encore une fois, les gars, souvenez-vous que nous allons simplement créer une structure en ce moment. Nous ne nous concentrons littéralement sur rien d'autre. Nous allons tout changer en 20 à 25 minutes environ. Ne vous inquiétez donc pas. Attends bien, on va s'en sortir, et ça va être superbe. OK, oui, c'était 126, donc j'avais juste besoin de changer ça. Encore une fois, nous pouvons modifier tous les textes, vous pouvez le voir ici. Ça n'a pas l'air génial ici. Nous devons donc vérifier cela. Oui, ça fait 126 aussi. Change ça. Ça fait 126 aussi. Oui, donc, je veux dire, c'est un peu ennuyeux à changer lorsque vous utilisez ces modèles faciles à créer, mais ils vous font gagner beaucoup de temps, honnêtement. Donc ça vaut vraiment le coup, tu sais ? Parfait. Parfait Parfait Ça a l'air bien. Ça a l'air bien. Ça va faire tellement beau quand on y trouvera, vous savez, des articles de blog. OK. Passons à la page de contact. Maintenant, cette page va être super simple, nous allons donc y ajouter une barre NaF Ce qui est agréable et facile. Et encore une fois, nous l'appellerons un peu plus tard. Faisons également le formulaire de contact. Celui-ci a l'air bien, mais je pense que Mm. Lequel a l'air ? Cela ne ressemble même pas un contact ou à une section, n'est-ce pas ? Je pense que c'est probablement le meilleur, non ? Oui, celui-ci a l'air bien. OK. Utilisons-le. Encore une fois, assurez-vous qu'il est complètement sur la gauche. Vous pouvez le voir sur le côté droit. Vous devez vous assurer qu'il n'est pas niché dans d'autres conteneurs ou sections. OK. Parfait Encore une fois, prenez simplement ceux de parce que c'est 126. Vous pouvez voir quand il est un peu rayé. Tu peux le dire. OK, ça a l'air bien, ça a l'air propre à nouveau. Nous changerons toutes les couleurs et tout le reste un peu plus tard. Mais ça a l'air plutôt bien. J'en suis plutôt content. OK. Quelle est la prochaine étape ? Passons à la page de politique de confidentialité, car, oui, ces types de pages sont très importants pour à peu près types de sites Web, pour être tout à fait honnêtes. Mais surtout pour une marque personnelle, où vous voulez évidemment vous assurer que tout est en place légalement. En fait, je vous montre comment obtenir, par exemple, texte de votre politique de confidentialité et tout ce genre de choses un peu plus tard. Je vais vous montrer comment faire, car c' est vraiment très simple. Mais oui, cela va juste vous aider à mettre les choses en place très, très facilement. Parce que, vous savez, personne ne veut rédiger une politique de confidentialité complète ou même en payer une. Ce n'est certainement pas ce que tu veux. Donc oui, nous allons chercher une section. Je pense en fait qu'il suffit de le faire manuellement. Nous n'avons même pas besoin d' utiliser un modèle pour cela. Ajoutons simplement une section ici. Juste une section normale. Encore une fois, assurez-vous qu'il est connecté au corps. Ajoutons ensuite un titre. Maintenant, en fait, ajoutons un conteneur. Donc, le conteneur va juste s'assurer que tout est beau et réactif et qu'il ne se répand pas sur les côtés. Nous ajouterons un en-tête, puis nous ajouterons le texte normal, le texte du paragraphe. Nous allons également ajouter un peu de marge entre les deux. En haut de la section. Ensuite, nous ajouterons également une petite marge entre l'en-tête et le paragraphe, juste pour nous en assurer. Il s'agit donc du site Web sur lequel vous pouvez obtenir votre politique de confidentialité. Je vais l'ajouter quelque part dans le cours juste pour que vous puissiez l'obtenir, mais il s'agit essentiellement d'une politique de confidentialité gratuite. C'est vraiment très facile à obtenir. Et j'ajouterai le lien proprement dit quelque part dans le cours. Alors, assurez-vous simplement de vérifier cela. Et utilise-le. Mais c'est vraiment facile. Ils essaieront de vous facturer, vous savez, des politiques de confidentialité professionnelles. Mais vous savez, à ce stade de votre entreprise, je ne sais pas si vous en avez besoin, mais vous pouvez voir ici qu'ils essaient de vous facturer 24$, 14$, 24$ Vous savez, en fin de compte, c'est une entreprise, alors ils essaient de vous soutirer de l'argent, mais vous n'en avez pas besoin. Ils donnent l'impression que vous devez le faire, mais, vous savez, vous ne le faites pas vraiment, pour être totalement honnête OK. Allons-y. Alors laissez-moi passer à l'étape suivante. OK. Cela me demande de faire Oui, nous ne voulons pas une politique de confidentialité professionnelle. Oui, donc oui, donnez-moi simplement ma politique de confidentialité, et ensuite tout sera prêt. Génial Vous n'avez pas vraiment besoin de saisir votre e-mail pour cela. Vous pouvez simplement le prendre directement d'ici. Mais pour certaines choses, vous devez saisir votre adresse e-mail exacte. Donc, vous savez, vous pouvez saisir votre adresse e-mail correcte, mais c'est en fin de compte notre politique de confidentialité. Tout est prêt à partir. Nous pouvons maintenant le copier dans notre presse-papiers Essayons ça. Essayons de le copier dans le presse-papiers Ensuite, nous pouvons essayer de le mettre sur le site Web afin que tout soit déjà formaté, ce qui serait formidable Et vous pouvez voir que cette politique de confidentialité m'a littéralement pris 5 minutes, peut-être je ne sais pas. C'était donc super rapide. Laissez-moi vérifier s' ils m'ont envoyé l'e-mail. OK, oui, ils m'ont envoyé le mail, ils m'ont déjà envoyé le mail. OK, voyons le meilleur moyen de l'obtenir. OK. Ils viennent donc de me renvoyer à la page actuelle. OK, j'essaie de trouver la meilleure façon de le faire spécifiquement pour vous, juste pour vous faire gagner beaucoup de temps. Nous allons générer des fichiers. Ce sera probablement le meilleur moment. OK. Parfait C'est ce que nous allons faire. Faisons un dossier sur les canards. OK. Génial Et puis ouvrons-le. Et puis je pense que nous devrions pouvoir simplement copier et coller ceci dans une section de texte enrichi. Il se peut donc que nous devions changer cela. C'est ce que nous allons faire. Ajoutons-le simplement à une section de texte enrichi. Je vais vous montrer comment faire. Nous devons le télécharger. Génial Donc voilà. Nous avons littéralement une politique de confidentialité complète prête à être utilisée formatée avec des en-têtes, des sous-titres, des espacements, etc. Nous devrons peut-être mettre les choses en ordre un peu, mais, vous savez, c'est, vous savez, c'est là Vous pouvez donc voir que cela s' est produit parce qu'il s' agit d'un élément de paragraphe. Et nous devrions essentiellement faire tout l'espacement nous-mêmes Et je ne pense pas que ce sera une telle perte de temps. Je pense donc faire un texte enrichi. Allons-y. Utilisons-le. Cela va nous faire gagner beaucoup de temps. D'accord ? Nous le copions donc littéralement et le collons à nouveau et nous l'examinons. J'avais l'air dix fois mieux. Génial Vous savez, peut-être que nous avons mis quelques espaces entre les choses, mais dans l'ensemble, vous savez, vous pouvez tout voir, tout est là. Tu sais que tout est écrit. Assurez-vous de bien vérifier. Tu peux le voir. Il indique un générateur de politique de confidentialité gratuit. Vous pouvez le supprimer si vous le souhaitez. C'est juste un lien vers le site Web pour attirer d'autres personnes. Vous pouvez le voir encore une fois, leur look. Cela indique que vous pouvez simplement le supprimer. Ce n'est pas nécessaire. Mais oui, vous pouvez voir qu'il contient tout ce dont vous avez besoin, qu' il est également très rapide et facile, et que vous n'avez pas à payer pour cela, pour obtenir une politique de confidentialité pour votre site Web. Je pense que c'est un peu une perte d'argent, surtout pour une start-up. Donc oui, nous l'avons. Parfait. Commençons la page À propos de nous maintenant, car la page À propos de nous est très importante. Nous voulons raconter une histoire. Nous voulons avoir un espace où nous pouvons réellement, vous savez, montrer aux gens pourquoi ils peuvent nous faire confiance, ce que nous pouvons leur offrir, vous savez, quel est notre positionnement dans le monde en tant que marque personnelle. C'est donc une excellente opportunité pour cela. Ajoutons-y donc quelques sections nous permettre de raconter notre histoire d'une manière facile à digérer. D'accord ? Ça a l'air bien. D'accord, nous pouvons peut-être y ajouter une vidéo. Mmm, peut-être. OK. Il s'agit donc essentiellement d'une lightbox. Donc, ce qu'est une lightbox, c'est que lorsque vous cliquez sur la lightbox, lorsque vous cliquez sur le petit bouton du lecteur , une vidéo ou, vous savez, une image s' ou, vous savez, une image Donc, dans ce cas, il s'agit d'une vidéo. Nous pouvons donc modifier cette vidéo. Nous pouvons donc avoir, par exemple, une vidéo de marque personnelle pour parler de nous aux gens et, vous savez , pourquoi ils finissent par nous faire confiance, nous choisir ou acheter chez nous. Mais je ne pense pas vouloir une vidéo sur ce site en particulier. Je pense que nous allons simplement rester simples et gentils avec une belle image. Trouvons quelque chose de vraiment propre. Je ne suis pas sûr qu'il y ait vraiment quelque chose dans celui-ci. J'utilise beaucoup cet ensemble de modèles, et je ne pense pas qu'il y ait quoi que ce soit que je puisse utiliser ici. Je veux dire, il y a probablement quelque chose, mais je ne pense pas qu' il y ait quelque chose qui soit, vous savez, vraiment révolutionnaire OK. Je veux dire, ça pourrait marcher, je suppose. Cela pourrait fonctionner. Je veux dire, c'est propre, tu sais que ce n'est pas trop autoritaire OK. Vérifions-en un peu plus. Voyons d' autres sections. Et à ce stade, lorsque vous créez réellement votre page à propos de mai ou à propos de nous. Encore une fois, vous ne voulez pas submerger les gens. Tu veux juste leur parler un peu de toi. Vous voulez leur dire, vous savez, qui vous êtes, ce que vous êtes, vous savez, ce qui vous différencie, tout ce genre de choses. C'est ce qu'il y a de plus important. Ce que je cherche maintenant, c'est que je cherche certaines choses pour que nous puissions leur dire ce que nous faisons. Donc, la section supérieure est toujours correcte, genre, à quoi ressemble la mission globale ? Par exemple, quel est notre positionnement général, vous savez, qu'est-ce qui nous différencie ? Ensuite, nous pouvons commencer à dire aux gens, d'accord, c'est ce qui nous différencie, mais c'est ce que je peux réellement vous offrir. C'est donc un service ou, vous savez, nos produits que je propose et auxquels je peux vous vendre, vous savez, si vous êtes fan ou quoi que ce soit d'autre. OK, donc oui, essayons cette section. OK. Oui, on peut les ajouter. Nous pouvons les arranger. Ce n'est pas un problème. Ça a l'air bien. Et nous pouvons simplement ajouter, vous savez, peut-être que nous n'avons pas besoin des quatre, peut-être que nous en avons juste besoin de deux, mais nous verrons. À ce stade, cela n'a pas vraiment d'importance. Nous pouvons supprimer des éléments par la suite. Mais oui, nous devons juste nous en assurer. Parfois, cela peut être un peu compliqué, d'ailleurs, lorsque nous essayons d' obtenir des sections et de les placer dans des sections, et, vous savez, cela peut être un peu gênant Soyez donc prêt à jouer avec les choses. Nous voulons donc simplement ajouter une petite section FAQ. Et voilà, nous venons de tout effondrer, et puis d'accord, ça a l'air plutôt bien. Vous pouvez voir ici que cela est écrasé, donc tout va bien. Oui, nous devons juste réduire la marge, je pense. Il y a une marge de 13 %. Il y a toujours une marge de 13 sur les images pour une raison ou une autre, et c'est super ennuyeux. Mais encore une fois, cela vous fait gagner beaucoup de temps. Oui, ça vaut le coup. OK. Ajoutons donc cette section FAQ en bas, et cela devrait être le cas. Je pense que cela devrait être à peu près notre page d'information globale, à peu près terminée. Je ne pense pas qu'il nous reste encore grand-chose à faire. Ouais Nous essayons donc simplement de comprendre la structure réelle de la page en ce moment, simplement parce que nous avons les éléments dont nous avons besoin, mais nous avons juste du mal à les intégrer. OK, ça a l'air d'aller bien. OK. Nous avons la photo en bas. Nous avons la section des questions fréquemment posées. Ah, pourquoi est-ce ici ? OK. Passons à autre chose. OK. Ouais En fait, gardons celui-ci. Oui, ça a l'air bien. Ça a l'air bien. OK, alors arrangeons le tout pour que soit un peu plus facile à gérer. Nous ajoutons le pied en bas, puis nous ajoutons la FAQ. Allons-y. Parfait. Allons-y. Ça devrait être une bonne chose. Génial Et cette page Web a l'air super propre, super professionnelle. Il est réactif, ce qui signifie essentiellement qu'il fonctionne sur n'importe quel appareil car il est déjà configuré. Abaissons ça à deux parce que nous n'en voulons que deux. Nous ne voulons pas submerger les gens Mais cette page est, tu sais, super belle. OK. 65. (Audio remasterisé et 16: Commençons donc à jouer avec le Napa. Commençons par concevoir le site Web car nous avons maintenant la structure réelle. Commençons par concevoir des choses. J'ai changé la couleur des boutons pour les peindre juste pour voir à quoi ils ressemblent. Mais pour le moment, je vais juste ajouter quelques images, des icônes et d'autres éléments, que j'ai sélectionnés précédemment. Donc, évidemment, vous pouvez prendre le temps de, vous savez, trouver ces icônes et, vous savez, des images et d'autres choses pour vous-même, pour votre propre marque personnelle, ou peut-être pour la marque personnelle de votre client. Mais oui, nous ajoutons simplement un logo ici, donc un logo en script très simple, que j'ai trouvé sur Google. Donc je pense que c'est écrit celui d'Evelyn. Créons donc ce site Web pour Evelyn. Encore une fois, nous venons de supprimer la petite case, il suffit de cliquer dessus et de la supprimer, comme vous le feriez sur un document Word. Nous allons mettre ce bouton en retard. Le bouton de connexion car nous n'en avons pas besoin. Mais ce que nous voulons faire, c'est que nous n'avons pas besoin de ce bouton d'accueil car nous pouvons simplement obtenir le logo, en cliquant sur le lien ici. Et puis nous pouvons littéralement dans les paramètres, nous pouvons littéralement le configurer de telle sorte que lorsque vous cliquez sur le logo, il revienne à la maison très facilement. Et c'est très courant pour de nombreux sites Web. Si vous cliquez sur le logo, vous rentrez chez vous. Nous allons faire ça pour moi, donc c'est bien. Nous allons changer cela en « Oui, faisons-en une boutique ». Ce n'est pas vraiment important pour le moment, mais je veux juste m' assurer que nous vous montrons à peu près comment changer les choses, comme le texte et les images. Et puis, tu sais, tu peux faire les choses toi-même. Une fois que vous avez compris comment modifier les images, comment supprimer des éléments, vous pouvez simplement savoir ce que vous voulez. OK, alors bienvenue dans ma marque personnelle. D'accord. Ensuite, nous allons modifier cette image. Changez-le pour celui-ci. D'accord. Maintenant, en ce qui concerne cette section, évidemment, vous savez, nous n'avons pas figuré dans Web Flow ou Zoom ou, vous savez, dans du contenu pour Spotify ou quoi que ce soit d'autre, ou peut-être que vous avez figuré dans Spotify, mais nous voulons juste ajouter des logos plus pertinents , tels que les médias , Netflix, etc., juste pour le rendre un peu plus réaliste. Excusez-moi. Mais oui, avec les logos eux-mêmes, avec ce type de sections, j'aime que tout reste de la même couleur. Si je peux, juste parce que ça a l'air beaucoup plus propre que d'avoir des tonnes de couleurs différentes. Je les ai donc toutes arrangées en gris. Il a donc l'air beaucoup plus propre. OK, alors, oui, tu peux juste changer les boutons comme tu veux. Et évidemment, vous pouvez choisir ce que vous mettez dans le texte. Vous pouvez changer les choses comme bon vous semble. Vous savez, je vous montre juste une idée approximative de ce que vous pouvez faire et, vous savez, vous donne quelques idées, puis vous pouvez faire ce que vous jugez le mieux pour votre marque, parce que c'est votre marque, votre entreprise, c'est votre client. Vous pouvez donc utiliser votre expertise sur ce que vous avez appris précédemment dans nos autres cours sur la conception de sites Web ou dans ce cours, et simplement créer votre propre version. C'est vraiment important que tu fasses ton propre truc. D'accord. Donc, maintenant, nous allons simplement changer ces icônes. La façon de changer les icônes est très simple. Ainsi, au lieu de changer les icônes, vous ne pouvez pas réellement changer ces icônes. Au lieu de cela, vous mettez simplement une image, vous cliquez sur l'icône, puis vous copiez et collez une image, puis vous la dimensionnez différemment, puis vous supprimez simplement l' icône d'origine. Voici donc l'icône originale. Vous copiez et collez l'image. Et puis, littéralement, tu le changes. C'est donc super simple. Et évidemment, assurez-vous qu'il est suffisamment petit pour tenir dans la petite bulle. Et puis oui, cela peut être, vous savez, représenter des services ou ce qu'ils veulent. De toute évidence, cela n'a pas besoin de beaucoup changer. Je ne vais pas vous faire perdre votre temps ajouter des critiques et d'autres choses, car c'est évidemment quelque chose que vous pouvez faire à votre rythme. Mais ajoutons des images plus pertinentes pour le blog. Mais évidemment, vous pouvez utiliser la section CMS pour cela, et je vais vous montrer comment le faire un peu plus tard dans dix ou 15 minutes. OK, donc nous les supprimons simplement parce que nous n'en avons pas besoin. Mais je pense qu'il y a un peu trop de monde. Vous pouvez les conserver si vous le souhaitez, mais je voulais juste les supprimer pour le moment. Je pense que nous allons changer la couleur de ces boutons, car pour une raison ou une autre, les roses ressortent tout simplement et ça n'a tout simplement pas l'air bien Alors changeons-le. Vous pouvez le modifier de plusieurs manières. J'aime bien le compte-gouttes. Oui, cette couleur est bien meilleure. D'accord. Génial Ça a l'air bien. D'accord. Alors maintenant, nous pouvons aussi bien changer cela, afin qu'ils puissent simplement changer l'image, puis la supprimer. Donc, supprimez, supprimez, supprimez. Et puis il est déjà formaté pour vous. Supposons, par exemple, que vous n'êtes pas sur Twitter, supprimez-le simplement. J'y suis connecté, Facebook et Instagram. Gardons-les deux. D'accord. D'accord. Alors évidemment, avec les liens, allez littéralement sur le lien. Ouais Ainsi, lorsque vous êtes sur votre compte Facebook, vous pouvez simplement ajouter votre lien ici. Et cela va créer un lien vers votre page Facebook. Vous pouvez également cliquer sur Ouvrir un nouvel onglet, ce qui est parfois très utile. Cela signifie simplement que cela n'enlève rien à la page du site Web Ils sont donc toujours connectés à votre site Web ou votre site Web est ouvert, mais ils ouvrent simplement un nouveau navigateur leur téléphone sur leur ordinateur de bureau. Donc oui, je ne recommanderais pas d'avoir plus de trois ou quatre onglets dans votre pied de page Donc oui, nous avons juste quelques onglets différents ici juste pour vous montrer que vous pouvez les modifier, et c'est très simple. Il vous suffit littéralement de cliquer sur le lien. Voici, regardez, le lien en bas de page de l'IE. Ensuite, il vous suffit de cliquer sur le petit rouage, puis vous pouvez simplement choisir la page à laquelle il va accéder Je vais juste changer la couleur du survol. Donc, par exemple, allons-y. Nous pouvons donc le modifier de telle sorte que lorsque quelqu'un passe la souris dessus, il passe à une couleur différente, et nous pouvons faire de même avec celui-ci Il suffit donc de cliquer littéralement sur le lien. Montez pour survoler. Ensuite, il suffit de le déconnecter. C'est vraiment important. Cliquez sur le petit compte-gouttes. Allons-y. Ensuite, nous avons terminé ces deux tâches, mais nous n'avons pas encore épuisé les ressources. C'est ce que nous n'avons pas fait. Nous allons donc simplement nous en occuper. Nous ferons exactement la même chose oh. Nous y voilà. Et puis nous sommes littéralement déconnectés, déconnectés. Allons-y. Et nous y voilà. Ensuite, nous pouvons simplement ajouter le code hexadécimal, et nous sommes prêts à partir Nous sommes prêts à faire du rock and roll. Génial D'accord. Je veux dire, évidemment, que vous pouvez ajouter différents liens dans le Navar, etc., mais je veux juste vous montrer à peu près comment vous pouvez le faire pour que les choses restent vraiment simples pour vous Ensuite, vous pouvez jouer avec les polices, jouer avec les couleurs et déterminer exactement ce que vous voulez. Mais il ne s'agit que d'un cours intensif de création du site Web. Donc, ce que je fais ici, c'est créer un composant, donc finalement une barre de navigation universelle Alors, que faites-vous, et je vais vous le montrer à nouveau avec le pied de page. Vous sélectionnez donc l'élément. Donc dans ce cas, c'est le pied de page, d'accord ? Vous pouvez donc voir comment le pied de page est sélectionné sur l' ensemble du pied de page. D'accord. Accédez ensuite à cette petite case, cliquez sur Créer un nouveau composant, puis étiquetez-le, créez-le simplement. Et tu vois, c'est vert maintenant. Quand il est vert, cela signifie que tant que cet élément est vert. Quelle que soit la page du site Web sur laquelle il se trouve, ce sera la même chose. Donc, si vous le modifiez sur une page, il changera sur toutes les pages, ce qui peut être très utile. D'accord. Commençons par concevoir la page du blog. Enlevons quelques trucs en fait, parce que je ne veux pas qu'il y ait trop de monde. Changeons la couleur. Alors changez cela, changez également cette couleur. Passons au bleu foncé. D'accord. Il passe également au bleu foncé. Pourquoi nous le gardons simplement, gardez-le rose. C'est une image. Encore une fois, j'ai juste pris quelques photos avant de les arranger, juste pour m'assurer qu'elles étaient prêtes, et j'ai respecté votre temps. D'accord. Donc, pour une raison ou une autre, cela ne se charge pas. Mettons-en un pour le moment. Et puis ce contenu. Je vais donc vous montrer comment configurer le CMS en une seconde. Et une fois que vous aurez compris comment configurer un CMS, cela changera littéralement la façon dont vous travaillez réellement sur le flux Web. C'est super facile. D'accord, par exemple ici, le Nav et le pied de page sont tous deux l'ancienne version. D'accord ? Nous pouvons donc maintenant ajouter la nouvelle version. OK Alors additionnez ça ici, et voilà. Oh, attends une seconde. Il n'y est pas complètement. Vous pouvez voir qu'il n'est pas connecté au corps, voilà. Maintenant c'est le cas. Cela, pour qu'il soit connecté au corps, tirez-le complètement vers le bas. Assurez-vous que c'est sur la gauche. Nous y voilà. Donc maintenant, si nous changeons quelque chose sur la barre NAF de la page d'accueil, cela va changer à l'échelle du site, chaque endroit du site Web, où se trouve cette barre NAF en particulier, cela va OK, nous pouvons consulter cette page de blog. D'accord. Donc, avec la page de blocage , en fait, faisons-le un peu plus tard car c'est ainsi que je peux vous montrer le CMS. Faisons-le donc un peu plus tard. Contactez-nous sur notre page, cela devrait être assez simple. Encore une fois, vous pouvez modifier l'adresse e-mail, le numéro de téléphone, etc. Je vais juste changer de couleur et vous montrer comment changer de couleur parce que c'est un peu la partie la plus difficile. Évidemment, je ne connais pas votre adresse e-mail ni votre numéro de téléphone, vous pouvez donc le modifier comme vous le souhaitez. Mais oui, ajoutons simplement la barre NAF ici. Encore une fois, assurez-vous simplement qu'il est connecté au corps. Ensuite, nous choisissons le fourrage. D'accord. Parfait Je veux dire, c'est à peu près terminé maintenant. C'est presque terminé. Passons maintenant à la page à propos de nous. D'accord. D'accord. D'accord. Maintenant, nous l' avons en fait, utilisons celui-ci. Je crée une deuxième page à propos de nous. Et c'était assez similaire. Mais je voulais juste ajouter quelques autres choses simplement parce que je voulais juste le rendre un peu plus différent de la page d'accueil. Donc oui, j'ai juste légèrement modifié la structure. Mais c'est à peu près la même chose. Je vais donc faire exactement la même chose. C'est juste une mise en page différente. D'accord, ajoutons-y un titre gentil, gentil et humble Et ajoutons-en quelques unes que je ne connais pas. Ajoutons quelques images. Je ne sais pas quelles images nous devrions utiliser. Ajoutons peut-être ceux-ci. Disons peut-être qu'elle aime la photographie ou quelque chose comme ça, et disons peut-être qu'elle met en et disons peut-être qu'elle met valeur ses talents de photographe Génial. Ce sont comme des images de stock provenant d'un site Web que j'ai trouvé. Je pense que c'était pixels.com, que j'ai également mentionné plus tôt dans le cours Et vous pouvez simplement supprimer ces éléments ou y ajouter du texte. Cela dépend entièrement de vous, évidemment. Je vous montre juste une sorte de version simplifiée de ce que vous pouvez faire. D'accord. Je prends également de superbes photos de photographie. Mon travail. Allons-y. Alors on peut juste écrire un petit peu. Mais le fait est qu'il est vraiment important d' utiliser des modèles et un peu d'orthographe. La raison pour laquelle nous utilisons des modèles et la raison pour laquelle nous configurons les choses de cette façon est de nous faire gagner beaucoup de temps et assurer que le site Web est réactif. Ce site Web fonctionnera donc bien, tant que vous utilisez les modèles, vous ne modifiez pas trop le formulaire et que vous supprimez des éléments ou que vous modifiez le texte ou les images, tout sera parfaitement formaté. C'est juste la façon dont ils sont construits. Donc, par exemple, ici, regardez, vous pouvez voir, vous savez, le petit euh que vous connaissez, ouverture et la fermeture de la section FAQ. Cela prendrait tellement de temps à créer par vous-même. En l'ayant comme ça, il est littéralement beaucoup plus facile de créer un site Web et de créer un beau site Web, qui est réellement fonctionnel. D'accord. Donc, dans cette petite section située en dessous de la section FAQ, ajoutons simplement que vous souhaitez réserver avec moi. Oui, vous pouvez me réserver ci-dessous. En d'autres termes, écrivons quelque chose comme « réservez-moi ». C'est Pink, passez le curseur dessus. Donc, si vous voulez changer cela, allez-y littéralement. Déconnecteur. Allons le rendre un peu plus léger. Cette courbe, donc la courbe que je viens vous montrer, est essentiellement tant que vous choisissez une couleur sur cette courbe, elle s'adaptera à la couleur principale, donc à la couleur la plus foncée. C'est un petit conseil pour toi. D'accord. La barre de navigation sur le pied n'a donc toujours pas été modifiée, alors changeons cela. D'accord. OK, allons-y. De plus, il n'est pas connecté au corps. Il est connecté à la section. Alors changeons cela. Est-ce que c'est à cela qui est connecté au corps maintenant. C'est une bonne chose. Génial D'accord. C'est très bien C'est très bien. Ça a l'air bien. Génial Bien, commençons par regarder les articles du blog. Je pense que c'est ici que je peux vous montrer comment utiliser le CMS. Cela en sera le meilleur exemple. Restons donc simples et supprimons simplement les onglets qui s'ouvrent. Vous pouvez l'ajouter si vous le souhaitez, mais c'est un peu plus compliqué, mais je veux juste que les choses restent aussi simples que possible pour le moment. Ensuite, si vous voulez que j' ajoute une leçon supplémentaire au cours, envoyez-nous simplement un e-mail et nous pourrons l'organiser. J'ajoute donc simplement un conteneur. Ensuite, dans le conteneur, je vais ajouter un composant CMS, que je vous montrerai une fois que je ouvert et placé au bon endroit. Nous y voilà. Il vous suffit de cliquer sur le petit bouton plus, puis sur la liste des collections. C'est ainsi qu'il s' appelle en fait, mais il s'agit essentiellement d'un élément du CMS. Mets-le dans le récipient. Ensuite, la source doit être le CMS, une collection, accord, ce que je vais vous montrer comment faire dans un instant. Vous pouvez voir ici qu'il n'y a pas encore d'articles, mais nous allons en ajouter d'autres dans une seconde. D'accord ? Nous pouvons donc le voir, état vide. Il n'y a donc rien. Nous voulons qu'il soit inscrit dans une grille. Nous allons donc faire une liste de collecte, puis appuyer sur la grille. Cela va fragmenter les choses et nous voulons trois colonnes adaptées aux colonnes ci-dessous. D'accord. Nous l'avons donc là. C'est parfait. Maintenant, la prochaine chose que nous devons faire est d' accéder aux paramètres du CMS. Voici donc la collection que nous avons mise en place avec le CMS, et nous allons simplement en ajouter cinq. Ce ne sont que des maquettes. Ils ne sont pas sérieux. Ils s'ajoutent presque comme des espaces réservés. Nous pouvons donc les ajouter. Passons à quelques-unes pour le rendre un peu plus facile à gérer. Ensuite, nous pouvons en prendre une et simplement envisager de changer l'image miniature Nous allons simplement remplacer l'image miniature par quelque chose que nous jugeons un peu plus pertinent Nous y voilà. Cela fonctionne. Et nous pouvons simplement ajouter le premier bloc, parfait. Celui-ci, changeons-le simplement en blog 2. Nous allons changer le vrai OK, changez l'image. Et enfin, blogue 3. Et vous pouvez voir ici que dans la section CMS, il est tellement plus facile de changer des choses, et c'est beaucoup plus organisé. Maintenant, il s'agit en fait d'une configuration CMS préexistante comme mon site Web actuel, afin que je puisse vous montrer tous les détails et autres choses, et je ne pars pas de zéro, mais par exemple, le vôtre sera beaucoup plus simple et beaucoup plus facile à gérer. De toute évidence, ce sera unique pour vous. Donc, pour le moment, regardez, vous pouvez voir que je viens de copier-coller l'élément, les éléments du design du modèle précédent Alors, laisse-moi te montrer. D'accord. Laissez-moi juste essayer de comprendre pourquoi cela ne me permet pas de le coller. D'accord. Ajoutons à nouveau cette liste de collections. Accédez à la section Bloquer les collections. Parfait Et puis l'emballage. C'est là. Ouvrons ça un peu. Objet de collection. Nous y voilà. Nous avons donc copié et collé l'élément Nous avons donc littéralement pris l'un de ces éléments et nous l'avons simplement copié et collé. Alors maintenant, nous n'en avons plus vraiment besoin . Nous le supprimons simplement. C'est fini. D'accord. Et le truc avec l'élément de collection c'est qu'une fois que vous modifiez quelque chose dans un élément, cela change dans tous les éléments. Donc, au lieu de remplacer l'image, nous pouvons simplement cliquer sur ce petit bouton violet ici, puis nous cliquons littéralement sur l'image miniature, et elle la change automatiquement Nous y voilà. Allons-y. Maintenant, pour une raison ou une autre, cela nous donne une petite marge, alors retirez-en 13, c'est parfait. Maintenant, pour une raison ou une autre, cette image centrale n'a pas changé, mais nous la modifierons plus tard, un problème soudain. Nous allons donc remplacer celui-ci par le titre, voir bloc un, bloc deux, bloc trois. Nous pouvons changer cela si nous en avons un, nous pouvons le connecter au CMS, mais dans le cadre de cette leçon, ne le faisons pas. Changez cela pour le contenu. Et puis pour ça. Encore une fois, regardez, si nous changeons le lien, reliez la section du bloc en cours. C'est ce que tu veux. Donc, le titre et les liens de chacun des éléments de la collection doivent être liés à la section actuelle de l'article. Alors regardez ici. Alors collection de blocs actuelle, désolé. Nous y voilà. L'image du milieu n'a donc pas été mise à jour. Revenons donc au CMS, à la collection de blocs, au bloc deux. Ah, je n'ai pas vraiment économisé. C'est pourquoi. OK, remplaçons-le. Allons-y, assurons-nous qu' il se charge vraiment cette fois. Il semble que tout soit chargé, enregistrons-le , puis vérifions-le. Assurons-nous qu'il soit mis à jour. Est-ce que ça marche ? Allons-y. Génial Maintenant, nous pouvons en ajouter 50 à 1 million, comme vous pouvez le constater. Je l'ai remplacé par le thème de la mode sur un seul article, et je l'ai littéralement changé pour chacun d'entre eux. C'est donc pareil pour tout. Vous pouvez avoir 1 million d'articles différents. Je pense qu'il y a un nombre illimité d'articles que vous pouvez créer, et cela les modifie si facilement. Vous n'êtes pas obligé de les modifier un par un. C'est la puissance de la configuration du CMS. Donc, nous avons cette configuration maintenant. Changeons simplement ce Foer et cette barre de navigation, parce que ça m'embête. OK, allons-y. Allons y jeter un petit coup d'œil. Baignoire, baignoire, baignoire. Allons-y. Et changeons simplement cela. Et évidemment, cela peut vous prendre un peu plus de 45 minutes, mais je vous montre simplement que si toutes vos images sont prêtes et que tout est formaté, vous savez, avec un peu de pratique, vous pouvez les réaliser très rapidement Et cela peut vous prendre un peu plus de temps la première fois que vous le faites, mais ensuite, cela ne vous prendra pas du tout de temps. D'accord. Donc je veux dire, nous avons un site Web assez solide ici, attendez qu'il se charge. Mais, vous savez, nous l'avons littéralement construit en 45 minutes d'affilée. Le site Web est adaptatif. Vous savez, il nous a fallu 45 minutes pour créer ce site Web, et je veux dire littéralement, vous pouvez également ajouter le CMS, d'ailleurs. Vous pouvez donc ajouter exactement la même fonction et la limiter à trois, afin de pouvoir simplement afficher, par exemple, les articles les plus récents. Euh, oui, juste pour te le faire savoir afin que tu n' aies pas à le faire manuellement. Mais je veux dire, dans l' ensemble, le site Web semble vraiment bon. Je voudrais vous montrer quelques points concernant les paramètres avant de terminer , car cela nous aidera simplement à tout terminer. Mais oui, vous savez, en 45 minutes, nous avons réussi à le créer. S'il charge un peu plus vite, ce serait fantastique, mais je pense que mon Internet était juste un peu lent. Vous savez, lorsque vous pouvez créer un site Web réactif, prêt à fonctionner en 45 minutes, vous ne pouvez pas vraiment vous plaindre trop. Tu sais ? C'est vraiment génial. Le fait que tu puisses le faire. OK, alors jetons un petit coup d'œil à ça. D'accord. Je veux dire, toutes les pages sont belles. Les pages statiques sont les éléments les plus importants. Par exemple, vous savez, ceci se trouve sur une page statique. C'est donc ici sur une page statique. D'accord. Mais pour l'article, par exemple, si vous souhaitez que la page remplisse automatiquement d'elle-même, vous devez créer les pages de collection du CMS, c' est-à-dire en voici un exemple pour le site Web de la Lancaster Academy Ainsi, par exemple, si je change, si je crée un élément ou un article CMS, il est automatiquement renseigné sur la page elle-même, et il crée une page séparée sans créer de page supplémentaire si cela a du sens. Donc, il vous suffit de cliquer ici. Je ne pense pas en avoir trop, donc cela ne me permettra pas de mettre à jour mon plan, mais le plan CMS est parfait. Nous allons donc simplement vous montrer l'intérieur des collections du blog. Vous pouvez donc voir ici que j'ai des tonnes d'éléments différents. Désolée, je viens de le pirater. J'ai des tonnes d'éléments différents comme le texte enrichi, le lien vers l'image. Ce sont les principaux que vous allez utiliser : texte brut, texte enrichi, image, lien vidéo et lien. Vous n'allez pas vraiment utiliser grand-chose d'autre, mais vous pouvez utiliser d'autres choses si vous le souhaitez. Créez simplement les éléments dont vous avez besoin, généralement sur chaque page. Il suffit ensuite de les créer. C'est vraiment très facile, vraiment très simple. D'accord. Regardons maintenant quelques paramètres. Passons à la barre des paramètres du site. Maintenant, la première chose à mentionner juste avant de terminer est le favicon et le clip Web Cela doit donc être de 32 x 32 pixels, et cela vous indique finalement dans l'onglet chaque fois que quelqu'un visite votre site Web. Le clip Web doit mesurer 256 x 256 pixels. Maintenant, en ce qui concerne les forfaits, vous pouvez simplement rester sur le plan de départ, qui est gratuit, mais vous ne pouvez pas connecter un domaine personnalisé. L'option CMS vous permettra en fait de configurer le CMS, ce qui, encore une fois, est très utile, donc je le recommande vraiment si vous avez l'argent pour y investir. Et cela vous donne également un domaine personnalisé, ce qui est excellent. L'option de base vous donne essentiellement la possibilité de connecter le domaine et vous offre un hébergement légèrement plus rapide, mais elle ne vous donne pas l'option CMS. Ensuite, une fois que vous avez un plan, qu'il s'agisse de l'option de base ou de l'option CMS, vous pouvez ajouter votre domaine, que vous venez de voir. L'option du formulaire, alors assurez-vous d'ajouter votre adresse e-mail ici. C'est ici que si quelqu' un entre en contact avec vous à propos de votre formulaire de contact DS ou de quoi que ce soit d'autre, je vous contacterai là-bas, mais une fois que vous aurez terminé, il vous suffira de le publier et votre site Web sera terminé. Tout est fait. Oui, bon travail. D'accord. Je vous verrai dans la prochaine leçon, mais oui, merci beaucoup de m'avoir donné le temps d' en parler avec vous, et je vous souhaite une bonne journée. À bientôt 66. Lancement de site Web : obtenir votre site Web sur la page #1 de Google: Comment préparer votre site Web et accéder à la première page de Google le plus rapidement possible ? Eh bien, il y a certaines choses essentielles que vous devez garder à l'esprit lorsque vous préparez réellement votre site Web. Dans cette leçon, nous allons tous les aborder. Maintenant, la première chose que vous devez mettre en place, ce sont vos mots clés. Désormais, vos mots clés sont essentiellement les mots auxquels vous pouvez être associé pour votre marque et ce que vous pouvez réellement offrir, qui sont uniques et distinctifs pour votre marque spécifique. En gros, accédez à Google Keyword Planner , puis recherchez termes de recherche pertinents que quelqu'un saisirait dans un nouveau Google afin de trouver votre marque. En gros, réfléchissez aux mots auxquels vous souhaitez être associé pour votre marque. Vérifiez ensuite le planificateur de mots clés de Google pour vous assurer que le volume de recherche est suffisant, ce qui signifie essentiellement qu' un nombre suffisant de personnes recherchent réellement ce terme ou ce mot en particulier afin que vous puissiez vous assurer qu'il y a suffisamment de personnes recherchant ce terme pour vous trouver sur Google. Maintenant, une autre chose à vérifier est de voir quels termes et mots clés ont le moins de concurrence. L'astuce consiste à s'assurer que le terme de recherche pour lequel vous êtes connu est aussi unique que possible. Par conséquent, lorsque quelqu'un le recherche réellement sur Google, vous êtes plus susceptible d'apparaître. Désormais, les mots clés ne sont pas les seuls éléments dont vous avez besoin pour être trouvé sur Google. Une autre chose que vous devez vraiment avoir en place est le référencement sur les pages. Cela signifie essentiellement s'assurer que vos titres et sous-titres sont tous pertinents par rapport au type de produit que vous proposez. Cela aidera les clients à trouver réellement vos produits en ligne et vous permettra également de vous assurer que, lorsque vous ajoutez des images à votre site Web, un texte descriptif y est joint afin que Google puisse réellement reconnaître le sujet de l'image et en quoi elle est pertinente. Assurez-vous également que toutes vos URL sont belles, propres et concises Par exemple, ne prolongez pas votre URL et n'ajoutez mots inutiles, car Google pas de mots inutiles, car Google ne saura pas quoi faire avec votre URL et vous ne serez pas trouvé sur la première page de sitôt. Maintenant, une autre chose qui est vraiment importante pour référencement et pour être trouvé sur Google est un contenu de qualité. C'est en fait l'une des approches que j'ai personnellement adoptées pour chacune de mes entreprises afin de m' assurer que les gens trouvent mon site Web et finissent acheter mes produits et services. Essentiellement, lorsqu'il s'agit de contenu de qualité, cela signifie écrire des articles de blog ou peut-être publier des vidéos, pour garder les utilisateurs sur votre site Web. Google se soucie de deux choses simples lorsqu'il s'agit de classer votre site Web. Premièrement, combien de temps l'utilisateur passe sur votre site Web. Parce que plus une personne passe de temps sur votre site Web, cela indique à Google que la qualité du contenu est beaucoup plus élevée, ainsi que la pertinence du contenu par rapport à ce que la personne recherche Et ces deux éléments travaillent main dans la main pour dire à Google que lorsque quelqu'un recherche un terme de recherche en particulier, si vous lui montrez cette page, il sera satisfait et obtiendra les réponses qu'il recherche. Google se soucie essentiellement de donner à la personne ce dont elle a besoin le plus rapidement possible de la meilleure façon possible. Donc, si vous pouvez réellement résoudre ce problème et leur donner le meilleur, ils finiront par passer plus de temps sur votre site Web, et Google travaillera en votre faveur et vous placera en haut de la première page. Maintenant, une autre chose à garder à l'esprit est la vitesse de la page. Maintenant, vous pouvez littéralement trouver des outils en ligne pour vérifier la vitesse de votre site Web, recherchant simplement sur Google, page de mon site Web, puis en ajoutant simplement votre URL C'est donc très facile à vérifier, mais assurez-vous que votre site Web est aussi rapide que possible. Cela signifie qu'il ne faut pas ajouter de fichiers trop longs et volumineux sous forme de vidéos sur votre page d'accueil, car cela augmentera en fin de compte le taux de rebond Et quand je parle de taux de rebond, je veux essentiellement dire que les gens viennent sur votre site Web puis repartent immédiatement si votre site Web ne se charge pas instantanément Assurez-vous donc simplement que votre site Web se charge très rapidement et qu'il permettra aux internautes de se rendre là où ils doivent être et passer plus de temps sur votre site Web, car cela offrira une meilleure expérience. Maintenant, une autre chose dont vous devez vous assurer est l'expérience utilisateur. Nous avons déjà abordé ce sujet dès le début du cours, mais il est très important de s'assurer que le client ou la personne puisse se rendre là où il le souhaite en suivant des étapes faciles à suivre. Cela signifie qu'ils ne seront pas frustrés , qu'ils ne cocheront pas le site Web et qu'ils y passeront plus de temps, ce qui indiquera à Google que votre site Web est de haute qualité, lui donnera ainsi de meilleures chances d'être bien classé. Maintenant, quelques autres éléments vraiment importants pour votre site Web sont les liens internes et les liens entrants. Maintenant, les liens internes sont l'endroit où vous avez de nombreux articles de blog différents, et ils sont tous liés les uns aux autres pour finalement créer un réseau d'articles de blog qui se complètent tous bien. Par exemple, dans un article de blog, vous pourriez parler du même sujet, sur lequel vous avez déjà écrit un autre article de blog Vous pourriez donc créer un lien vers ce billet de blog pour que les internautes restent sur votre site Web plus longtemps. Maintenant, les liens de retour sont légèrement différents. Les liens de retour sont essentiellement des liens provenant d'autres sites Web que Google connaît déjà et auxquels il fait confiance. Ainsi, par exemple, si vous êtes une toute nouvelle entreprise et que vous créez simplement un site Web à partir de zéro, vous pouvez toujours contacter différents sites Web qui se situent dans votre créneau pour lien de retour entre les pages de votre site Web et les leurs, et vice versa, afin de partager le trafic et renforcer la confiance avec Goole dans l'intervalle Maintenant, je sais que c'est beaucoup à assimiler. Mais personnellement, ce que je ferais si vous vous sentez un peu dépassé, c'est simplement concentrer sur la création de contenu et d'articles de blog de haute qualité sur votre site Web. C'est quelque chose que j'ai fait personnellement pour chacune de mes entreprises en ligne, et cela fonctionne extrêmement bien. Tout simplement parce que lorsque quelqu'un vient votre site Web et qu'il dit que vous sur votre site Web et qu'il dit que vous y avez beaucoup de contenu de qualité, il a tendance à vous faire beaucoup plus confiance. Et en fin de compte, s'ils passent plus de temps sur votre site Web, Google vous fait également beaucoup plus confiance. Quoi qu'il en soit, je sais que ce cours n'est pas basé sur le référencement, et nous le ferons le 1er mai dans le futur, mais dans ce cas, nous voulions juste vous donner un bref aperçu éléments auxquels vous pouvez penser lorsque vous développez le référencement et votre présence numérique pour votre site Web. Cependant, si vous avez des questions concernant le référencement, n'hésitez pas à nous contacter. Je suis plus qu'heureuse de vous apporter le plus de soutien possible. Mais à part ça, je vous verrai dans la prochaine leçon. À bientôt. 67. Lancement de site Web : sécuriser un domaine pour votre site Web: Alors pourquoi est-il si difficile de trouver un bon domaine pour votre site Web de nos jours ? Eh bien, en fin de compte, juste pour vous donner un petit aperçu du contexte, les gens ont commencé à acheter des domaines au cours des deux dernières années, puis les vendre moyennant un supplément Ainsi, par exemple, si quelqu'un tombe sur un domaine pour 20$, ce qui correspond généralement au prix d'un domaine, et qu'il ne veut pas l'utiliser personnellement, mais qu'il le considère comme un domaine que quelqu'un d'autre pourrait potentiellement utiliser pour une entreprise ou pour un projet quelconque. En gros, ils achèteront le domaine pour 20$, et ils paieront 20$ par an pour le conserver. Et puis, lorsque quelqu'un d' autre trouve ce domaine et le recherche, il le met en vente en ligne moyennant un supplément pour quatre ou 5 000$ au minimum Maintenant, je pense que c'est l'un des pires aspects de l'industrie des domaines. En fait, je travaille avec de nombreuses entreprises pour les aider à trouver le nom de marque parfait Aman. L'une des choses que beaucoup d'entreprises souhaitent, c'est une forte demande pour leur site Web. Maintenant, pour être tout à fait honnête, si vous recherchez un nom de marque composé de moins de six lettres, il sera très, très difficile de trouver un domaine de 2 à 5 lettres, qui soit disponible, et surtout disponible à un prix inférieur à un chiffre très élevé chiffre Et non seulement disponible, mais cela vous coûtera probablement un bras et une jambe si vous voulez vraiment l'acheter. Maintenant, ne t'inquiète pas. Nous avons en fait quelques astuces vraiment intéressantes que vous pouvez utiliser pour obtenir un domaine très précieux pour votre entreprise et qui vous permet également d'économiser beaucoup d'argent. Le nom de votre marque est peut-être déjà en place. Et si vous êtes totalement convaincu par le nom de votre marque, alors une excellente méthode, que nous utilisons tout le temps avec nos clients, consiste à ajouter un mot pertinent. Par exemple, si vous êtes dans un magasin de commerce, vous pouvez ajouter quelque chose comme un magasin, par exemple, ou vous pouvez même ajouter un magasin avant le nom de la marque. Ainsi, par exemple, si le nom de votre marque est Nike, cela pourrait être shop nike.com Ou peut-être, vous pouvez toujours ajouter store à la fin, qui est essentiellement nike store.com, ou si vous êtes une agence, par exemple, vous pouvez toujours utiliser le mot agence dans votre domaine également En gros, tout ce que vous avez à faire est de vous assurer que le mot que vous ajoutez correspond à ce que vous vendez actuellement et à ce que vous pourriez vendre à l'avenir. Et en fait, si vous n'avez pas les moyens de vous payer le domaine .com propre, donc simplement votre marque sur le .com au début de la création de votre entreprise, de nombreuses entreprises, y compris Facebook au tout début, par un domaine, qui n'est en fait qu'un domaine à 20 dollars avec un mot ajouté, mais plus tard, lorsque l' entreprise devient très rentable ils achètent le domaine claim.com parce qu'ils ont les fonds nécessaires C'est donc la première approche, à ajouter un mot simple qui correspond à ce que vous faites et à ce que vous proposez à votre nom de domaine. Maintenant, si cette approche ne fonctionne pas pour vous, vous pouvez toujours payer une prime. Maintenant, vous pouvez parfois négocier et obtenir un très bon prix pour votre nom de domaine. Et en fin de compte, la personne qui gagne cette négociation est celle qui s'en soucie le moins. Donc, si vous avez un plan de sauvegarde, comme ajout d'un mot, et que vous l' ajout d'un mot, et que vous offrez à quelqu'un qui détient ce domaine depuis longtemps, vous pourriez l'obtenir à un prix assez décent. Maintenant, évidemment, toutes les personnes qui vendront un domaine ne seront pas les mêmes, donc quelqu'un sera plus proche négociation et d'autres, eh bien, pas tant que ça. Mais tout ce que vous pouvez faire, c'est simplement vous renseigner et poser la question, et s'ils vous proposent un prix dérisoire, il est probablement préférable d' envisager d'autres options Maintenant, une autre façon très intelligente d'obtenir un domaine .com vraiment génial est de changer l'orthographe Par exemple, nous avions une marque avec laquelle nous avons travaillé il y a peu de temps, appelée Spruce, mais au lieu d'utiliser l'orthographe courante de SPUCE, remplacé le C par un S, qui apparaissait toujours comme de l'épicéa, mais qui avait essentiellement beaucoup plus C'était mieux pour le référencement, et cela nous a également aidés à obtenir un domaine claim.com, qui ne comportait que cinq lettres Maintenant, c'est en fait presque inédit lorsqu'il s'agit de trouver des domaines à cinq lettres, et cela avait l'air si beau Mais nous avons réussi à le trouver, et nous avons eu beaucoup de chance. N'hésitez donc pas à vérifier cela si vous le souhaitez vraiment et à essayer d'utiliser cette approche pour voir à quel point vous avez de la chance de trouver votre domaine. Maintenant, si vous ne souhaitez pas modifier l'orthographe du nom, vous ne voulez pas payer de prime et vous ne voulez pas non plus ajouter de mot. Il est toujours possible de modifier l' extension à la fin. Maintenant, la plupart des gens veulent qu'un domaine .com soit totalement honnête, mais ce n'est pas le seul domaine disponible. Il existe de nombreuses autres options. Ainsi, par exemple, si vous êtes basé en Angleterre ou en France, vous pouvez utiliser point at UK ou do fr , en fonction de votre situation géographique particulière. Ce n'est peut-être pas la meilleure option pour quelqu'un qui cherche à faire des affaires à l'international, comme dans le cas d'une marque commerciale, par exemple. Si vous souhaitez vous concentrer uniquement sur le niveau local, cela pourrait être une excellente option pour vous. Si aucune de ces options ne fonctionne et que vous n'êtes même pas sûr du nom de domaine que vous souhaitez utiliser ou du nom de marque que vous possédez, il peut être intéressant d' explorer un nom de marque complètement différent. Au cours des dernières décennies, mon équipe et moi-même, à l'agence Clement Tn House Brand, avons aidé des milliers d'entrepreneurs différents à utiliser notre approche unique dénomination de marque pour trouver le nom de marque parfait pour leur entreprise. Malheureusement, nous avons réservé jusqu'en 2025. Cependant, notre processus est défini comme un cours en ligne , que vous devriez pouvoir trouver en consultant notre profil. Assurez-vous donc de vérifier cela, et cela pourrait vous aider à trouver un nom de marque incroyable pour votre entreprise. J'espère vraiment que cette leçon vous a aidé à comprendre comment obtenir un très bon nom de domaine pour votre marque. Mais à part cela, si vous avez des questions, veuillez me faire savoir que je suis là pour vous soutenir et vous aider autant que possible. Mais j'ai hâte de vous voir à la prochaine leçon. Je t'y verrai donc. 68. Lancement de site Web : ajouter un domaine personnalisé à votre site Web: Comment associer un domaine personnalisé à votre site Web Web Floor ? Eh bien, c'est en fait très simple. Alors allons-y et je vais vous montrer comment procéder. La première étape consiste donc à accéder à votre site Web. Maintenant, il s'agit évidemment du site Web de la Lancaster Academy of Design and Brand Et lorsque nous irons dans cette section, vous verrez un petit bouton appelé Paramètres du site. C'est donc là que nous voulons aller. Maintenant, lorsque vous cliquez sur Paramètres du site, vous êtes redirigé vers cette page, où il vous suffit de cliquer sur Publier. Et vous vous retrouverez ici, où vous la production et vos domaines personnalisés ci-dessous. Maintenant, comme vous pouvez le voir ici, j'ai déjà des domaines personnalisés attachés à mon site Web. Mais si vous regardez juste au-dessus de ces domaines, vous pouvez voir un petit bouton indiquant Ajouter un domaine personnalisé. Selon mon expérience, la meilleure façon d'ajouter un domaine personnalisé, si vous avez votre domaine avec Go Daddy ou Google Domains, par exemple, est de simplement sélectionner le domaine Quick Connect. Parce que cela permettra essentiellement d' ouvrir un processus de sélection rapide où vous pourrez finalement commencer à ajouter vos domaines ou WWW point, domain.com En fait, cela supprime également le point WWW, puis cliquez sur Continuer. Il analysera ensuite le domaine, détectera le fournisseur DNS, puis nous commencerons également à configurer les détails. Maintenant, évidemment, je n'ai pas besoin de connecter ce domaine à ce site Web en particulier. Une fois que vous avez connecté votre domaine en utilisant cette approche, il est très simple de le publier. Maintenant, les paramètres DNS de votre domaine prennent parfois un peu de temps. Connectez-vous à la plateforme Web Flow, ce qui peut prendre entre quelques heures et 48 heures. Mais une fois qu'il a été lié avec succès et que tout est parfait, il sera connecté à côté de chacun des domaines. À ce stade, il vous suffit publier votre domaine en cliquant sur ce bouton ici, puis appuyant sur publier les deux domaines sélectionnés. Maintenant, si nous allons sur un autre site Web, je veux juste vous montrer à quoi cela ressemble si vous n'avez pas domaine facilement attaché à votre site Web. Maintenant, cela me dit essentiellement que si je veux ajouter un domaine personnalisé, je dois ajouter un plan de site Web jumelé. Dans une leçon précédente, je vous ai montré les différents plans de sites Web, et en fin de compte, cela devrait vous aider à prendre la meilleure décision en fonction de ce qui vous convient le mieux. Mais en fin de compte, dans cette situation, je dois cliquer sur ce bouton, puis choisir plan de site Web qui répond le mieux à mes besoins personnels. Maintenant, juste pour résumer, encore une fois, le plan de démarrage, vous ne pouvez pas ajouter un de me personnalisé dans ce plan en particulier. Maintenant, le plan de base est pour vous si vous n'avez pas besoin d' ajouter une sorte de blog ou une sorte de fonction CMS. Mais si vous devez ajouter un blog et que vous souhaitez réellement ajouter du contenu sur votre site Web, choisissez la fonction CMS, car c'est la plus populaire, car c'est tout simplement la meilleure. Optez pour l'option CMS pour chacun de mes sites Web, et je paie toujours chaque année simplement parce que cela permet d'économiser un peu d'argent. Maintenant, évidemment, si vous êtes une marque de commerce électronique, vous devez vous assurer de sélectionner un site de commerce électronique, et généralement la norme sera largement suffisante pour vous. Ainsi, une fois que vous avez sélectionné le plan qui vous convient le mieux, il vous suffit de le payer. Ensuite, lorsque vous revenez à la page, vous devriez être en mesure de connecter votre domaine personnalisé en utilisant la technique que je vous ai montrée plus tôt dans cette leçon. Quoi qu'il en soit, si vous avez des questions ou quoi que concernant la connexion de votre domaine, veuillez me le faire savoir. Je suis plus qu'heureuse d' essayer de vous aider autant que possible. Mais à part cela, j'espère que cette leçon vous a été utile, et je vous verrai dans la prochaine. 69. Après le lancement : installer Hotjar: Qu'est-ce que Hot Jar ? Comment peut-il vous aider à améliorer votre site Web au fil du temps et à obtenir finalement de meilleures performances de votre site Web ? Et comment l'installez-vous ? Eh bien, Hotjar est en fin de compte un logiciel qui vous permet de suivre exactement ce que font les visiteurs de votre site Web lorsqu'ils visitent votre Grâce à la plateforme Hotjar, vous pouvez littéralement voir chaque mouvement de souris effectué par quelqu'un lorsqu'il visite votre site Web pour vous assurer que vous savez que votre site Web fonctionne et fait ce qu'il est lorsqu'il visite votre site Web pour vous assurer que vous savez que votre site Web fonctionne et fait ce qu'il est censé faire Parce que, comme vous pouvez le voir ici, j'ai littéralement des centaines d' enregistrements provenant du monde entier de personnes qui ont trouvé mon site Web et qui finissent par laisser enregistrements afin que je puisse voir exactement ce qu'ils ont fait sur le site Web, pourquoi ils l'ont visité et pourquoi ils n'ont pas acheté quelque chose si j' essaie de leur vendre quelque chose. Cela vous aide essentiellement à découvrir exactement ce qui se passe sur votre site Web sans faire suppositions et sans vous demander si vous avez raison ou tort Parce que vous pouvez réellement voir les mouvements de souris que la personne fait sur votre site Web. Vous pouvez voir sur quoi ils cliquent, sur quoi ils hésitent, sur quoi ils ne cliquent pas Peut-être que si un bouton ne fonctionne pas, cela devrait l'être. Vous pouvez littéralement tout voir, et vous pouvez affiner et perfectionner les choses au fur et à mesure. Maintenant, la meilleure chose à propos du logiciel est qu'il est absolument gratuit et que vous n'avez pas à payer un seul centime pour cela jusqu'à un certain nombre de visiteurs du site Web. Maintenant, une fois que votre site Web est très fréquenté, vous pouvez obtenir 100 sessions quotidiennes au lieu de 35. Mais personnellement, j'ai l' impression que 35 ans, c'est suffisant pour moi. Cela m'aide simplement à voir quelques sessions par jour et à affiner mon site Web en fonction de ces sessions. Je ne ressens pas le besoin de passer à 100 sections ou même à 500 sections, car je ne pense pas que cela en vaille la peine pour moi personnellement. Et en fait, je ne vous suggère pas de le faire non plus tant que votre site Web ne reçoit pas beaucoup de trafic. Il est donc évident que nous connaissons les avantages qui peuvent découler de l' observation des performances et du comportement de chaque visiteur sur votre site Web. Vous pouvez vous aider à surmonter les défis et à affiner votre site Web plus facilement et beaucoup plus rapidement. Alors, comment installez-vous réellement Hotjar sur votre site Web ? Maintenant que Webflow et Hot Jar fonctionnent ensemble sans effort, cela rend les choses super simples, et je vais vous montrer comment procéder dans Maintenant, la première chose à faire est de créer un actif sur Hotjar Donc, si vous allez ici et que vous cliquez sur Ajouter un nouveau site, vous pouvez simplement ajouter l'apa, ajouter un nouveau Scott Limited, organisation publicitaire. Enfin, vous ajouterez le nom, qui est scotlncaster.com URL du site. Utilisons exactement le même. Dans le secteur industriel, Passons au commerce électronique. Je déclare par la présente que je suis propriétaire de ce site publicitaire. Maintenant, assurez-vous de bien copier et coller le lien dans cette section car pour une raison ou une autre, il n'aime pas que vous ne mettiez pas le HTTPS devant lui. Cliquez ensuite sur Ajouter un site. Ensuite, vous serez redirigé vers cette page où, évidemment, j'ai beaucoup de sites Web différents que je gère en même temps avec mon agence de marque. À ce stade, il vous suffit accéder à cette section particulière, qui concerne votre site Web, et de cliquer sur Installer le code de suivi. Cela peut sembler un peu effrayant, mais c'est très simple. Croyez-moi, suivons-le étape par étape. Maintenant, si nous cliquons sur Installer le code de suivi, vous verrez ce code ici. Vous ne savez rien du code pour l'installer sur votre site Web, et je vais vous montrer exactement comment procéder. vous suffit donc d'aller ce bouton supérieur ici et de cliquer sur Copier le code. Une fois que cela est copié, rendez-vous simplement sur le Web de votre flux Web et cliquez sur les paramètres du site. Ensuite, lorsque vous arrivez ici, cliquez simplement sur le code personnalisé. Maintenant, n'oubliez pas que nous ne faisons aucun codage ici en copiant et collant. C'est la même chose que de copier-coller du texte dans un document Word, et c'est super simple à faire, ne vous inquiétez pas Maintenant, une fois dans cette section, vous aurez le code principal et le code photo. Maintenant, le code principal dont vous avez besoin est endroit où vous souhaitez coller le texte Maintenant, vous verrez ici que j'ai effectivement collé ce texte ici Maintenant, c'est exactement le même texte que celui que j'ai sur Hot Jar. Ça dit littéralement Hot Jar, et ça se termine par un script. Maintenant, une fois que vous l'avez ajouté, il s'agit évidemment de celui Lancaster Academy of Design and Brand, qui est un peu différent car elle en fait un nom commercial et repose évidemment sur un ensemble de code différent Mais c'est exactement pareil. Tout ce que j'ai fait, c'est appuyer sur Copier le code , puis je l'ai ajouté dans l'en-tête du code. Une fois que vous avez fait cela, il vous suffit d' appuyer sur Publier, puis de retourner dans Hot Jar et de vérifier l'installation. Et ce qui se passera lorsque vous aurez vérifié l'installation, c'est qu'elle vous donnera une bonne approche écologique, et vous savez que Hotjar et Web Flow travaillent ensemble pour commencer à suivre les visiteurs de votre site Web Ensuite, chaque fois que vous voulez voir l'un des enregistrements de votre site Web, il vous suffit de vous rendre sur hot jar.com et de les consulter, car ils seront tous bien organisés pour vous . Vous pourrez les voir, les consulter et les rechercher pour améliorer votre site Web au fil du temps En fait, je passe en revue les données de mes hot jar tous les mois pour simplement voir pourquoi les gens consultent mon site Web, ce qu'ils font sur mon site Web, s'il y a quelque chose qui peut s' améliorer. Ensuite, je du temps tout au long du mois pour améliorer le site Web, afin que mon site Web s' améliore constamment au fil du temps. Je le fais toujours le premier ou tous les mois, juste pour m' assurer que je suis au courant de tout et que mes sites Web fonctionnent parfaitement. Si vous avez des questions concernant Hot Job, n' hésitez pas à me le faire savoir. Je suis toujours là pour vous soutenir et vous aider, mais cela devrait être assez simple, et j'ai hâte de vous voir dans la prochaine leçon. À bientôt. 70. Après le lancement : créer une stratégie de marketing pour site Web: D'accord, vous avez donc créé un site Web incroyable pour votre entreprise. Alors, comment commencez-vous réellement à y attirer du trafic ? Les gens peuvent donc réellement acheter chez vous et en savoir plus sur ce que vous avez à offrir ? Maintenant, tout se résume au trafic sur le site Web et à l'élaboration d'une stratégie marketing, qui peut vous aider à attirer du trafic pertinent vers votre site Web afin que les internautes puissent découvrir qui vous êtes et comment vous pouvez les aider. s'agit évidemment d'un cours de développement de site Web qui vous aidera à créer un site Web exceptionnel pour représenter parfaitement votre marque. Mais si vous pensez qu'il serait utile d' apprendre à développer une stratégie marketing exploitable pour votre marque afin de générer du trafic pertinent vers votre site Web afin d'obtenir plus de clients et de générer plus de revenus et de ventes, le cours suivant du programme Brand Builder P pourrait être exactement ce que vous recherchez cadre de ce cours, nous vous aidons à définir vos objectifs commerciaux et marketing, puis nous vous aidons à les atteindre, que vous disposiez ou non du plus gros budget au monde. Pas de budget. En fin de compte, nous voulions donner à chaque entrepreneur, quel que soit le montant d'argent dont il disposait le plan pour l' aider à perfectionner son marketing Dans ce cours, nous abordons l'entonnoir marketing, qui est essentiellement ce que toutes les entreprises utilisent pour générer des clients pour leur marque Maintenant, il s'agit d'un processus en quatre étapes, et tout commence par la prise de conscience. Donc, en fin de compte, la première étape pour amener quelqu'un à acheter chez vous est de lui faire savoir ce que vous avez à lui offrir. Maintenant, il existe des tonnes de façons différentes de le faire, comme YouTube, Instagram et des tonnes d'autres méthodes qui ne sont absolument pas liées aux médias sociaux, nous abordons en détail dans le cours de marketing afin de trouver la meilleure solution pour vous. En fin de compte, si quelqu'un ne sait pas qui vous êtes ou ce que vous pouvez offrir, il ne pourra jamais acheter chez vous. Mais une fois qu'ils savent qui vous êtes, l'étape suivante de l' entonnoir est la prise en compte Maintenant, c'est là qu'ils vous considèrent réellement comme une option potentielle ou une solution potentielle à leurs défis. C'est ici qu'ils consultent votre site Web. Ils essaient de savoir si vous êtes la bonne option pour eux. Et finalement, une fois qu'ils ont décidé que vous êtes la meilleure option et le meilleur rapport qualité-prix pour cette situation particulière, passent à la troisième étape, qui est la conversion. C'est là qu'ils achètent réellement chez vous. C'est là qu'ils sortent leur argent durement gagné de leur poche et vous le donnent en échange de ce que vous avez à offrir. Votre site Web est désormais un élément clé pour réussir cette conversion. Parce que si votre site Web n'est pas à la hauteur, ce qui devrait être le cas si vous avez suivi ce cours, vous n'obtiendrez jamais conversion parce que votre site Web n'est pas digne de confiance, et cela ne donnera pas au client la tranquillité d'esprit de mettre la main dans sa poche, vous donner son argent, parce qu'il ne va pas croire que ce qu' ils recevront en échange de leur argent en vaudra la peine. En gros, un client a l'esprit tranquille lorsqu'il a le sentiment qu'il va obtenir ce qu'il attend ou peut-être même qu' dépasser ses attentes lorsqu'il vous donne son argent. C'est pourquoi les marques existent réellement, car lorsque nous donnons de l'argent à une marque de confiance, nous savons que nous allons obtenir quelque chose en retour, ce qui correspond à nos attentes. Si nous n'avons jamais fait affaire avec une personne ou une marque auparavant, nous nous sentons finalement un peu incertains lorsque nous remettons notre argent, car c'est un peu plus risqué Maintenant, vous vous demandez probablement quelle est la dernière étape de cet entonnoir marketing Et c'est cela, en fin de compte, la rétention. Maintenant, une fois que vous avez converti un client, vous avez déployé tant d'efforts pour obtenir cette vente. La meilleure chose à faire est de garder cette personne fidèle à votre marque et à ce que vous avez à offrir. C'est pourquoi des marques comme Netflix, par exemple, et Apple sont des entreprises très lucratives, car elles peuvent en fin de compte générer des revenus récurrents parce qu'elles sont payées régulièrement chaque mois Par exemple, j'ai peut-être acheté ces écouteurs et cet ordinateur chez able, mais je paie également 10 $ par mois pour mon Cloud, où je stocke essentiellement tous mes fichiers. C'est de l'argent qui entre instantanément dans les poches d'Apple chaque mois. Et le seul moyen pour moi de leur reprendre ça c'est de prendre tous mes fichiers et de les mettre ailleurs. Ça n'en vaut pas vraiment la peine. Netflix, c'est exactement pareil. Si vous vous arrêtez ici Netflix, vous n'avez plus accès à tous les excellents contenus. Donc, en fin de compte , vous donnez simplement à Netflix les dix à 12 dollars par mois pour que vous puissiez profiter de vos soirées de farniente avec votre partenaire Maintenant, c'est en fait quelque chose que nous abordons de manière beaucoup plus approfondie et beaucoup plus détaillée dans le cours de marketing. Mais évidemment, nous voulons respecter le temps que vous avez passé ici. Maintenant, en ce qui concerne la création d'une entreprise, première étape consiste à recruter votre premier client ou à en obtenir un. Mais c'est en gardant ce client que l'essentiel des bénéfices est réalisé. Donc, si vous pouvez essayer de modifier votre modèle commercial pour finalement vendre davantage à cette seule personne afin de vraiment maximiser le CLV, la valeur à vie du client, vous pouvez tirer le meilleur parti de chaque orange qui arrive sur votre site Web, c'est-à-dire un client En fin de compte, obtenez le plus de revenus possible dans les plus brefs délais. Maintenant, évidemment, c'est un peu plus compliqué que ça. Et évidemment, nous ne pouvons pas tout aborder dans ce cours en particulier, car il tout aborder dans ce cours en particulier s'agit principalement d'un cours de développement de sites Web, mais n'hésitez pas à me contacter si vous avez des questions, je suis ravi de vous aider et de vous apporter le plus de soutien possible car je veux vous voir réussir. Quoi qu'il en soit, j'espère que cette leçon vous sera utile, et je vous verrai dans la prochaine. À bientôt. 71. Après le lancement : affiner votre site Web pour l’optimiser: Comment pouvez-vous affiner votre site Web pour optimiser la conversion et les performances ? Eh bien, la première chose que je vous recommande vivement de faire est réserver un jour par mois pour consulter les données de vos hot jar. Maintenant, si vous avez consulté la leçon précédente du cours sur l'installation de Hot Jar, vous devriez déjà l'avoir sur votre site Web, et vous devriez être prêt à commencer. Maintenant, une fois que vous l'avez installé, réservez un jour précis par mois, potentiellement le premier du mois, ce que j'utilise personnellement, où vous prenez le temps de voir toutes les visites et toutes les personnes qui ont consulté votre site Web, ont réellement fait quelque chose sur votre site Web et ont peut-être cliqué ou simplement exploré au cours En fin de compte, il peut s' agir de plusieurs enregistrements si votre site Web est populaire. Et si c'est le cas, c'est fantastique. Mais ce que je suggère, c'est passer le plus de temps possible à examiner ces enregistrements , puis de simplement prendre notes à côté pour dire  : « OK, sur cette page en particulier, les gens ont tendance à ne pas trouver le bouton d'appel à l'action très facilement. Comment puis-je utiliser ce bouton pour le rendre plus visible sur la page ? C'est quelque chose que j'ai appris très récemment sur une page spécifique de l'une de mes entreprises, ce qui m' a finalement permis d'augmenter mon taux de conversion pour les prospects générés jusqu'à 4 %. À l'origine, je n' obtenais que 2 % de conversion, puis ce chiffre est passé à six par une seule modification. Même si vous faites des calculs, vous pouvez constater que Même si vous faites des calculs, c'est un résultat assez décent étant donné que je n'ai fait que changer un seul bouton sur la page, ce qui m'amène à ma prochaine approche lorsqu'il s'agit optimiser réellement votre site Web sur le flux Web ? Maintenant, tout cela se résume à ce que l'on appelle les tests AB, qui ne sont pas de la science des fusées. C'est en fait très simple, alors ne vous inquiétez pas. Maintenant, ce qu'il est vraiment important retenir lorsque vous testez différentes choses sur des pages c'est de ne pas trop en changer en une seule fois. Par exemple, si je prenais cette page avec ce seul bouton, que j'ai modifié et que j'ai modifié trois ou quatre autres éléments sur la page, je ne saurais jamais ce qui a réellement eu un impact le taux de conversion plus élevé Cela aurait pu être le bouton, bien sûr. Cela aurait pu être le changement de titre. Cela aurait pu être un changement de pied. Cela aurait pu être le changement d'image que j'ai fait. Si je les faisais tous en une seule fois, je n'aurais aucune donnée pour refléter le nouveau comportement. Donc, ce qu'il vaut mieux faire, c'est prendre le design existant et de changer une seule chose avant passer à autre chose et de s'améliorer lentement, mais sûrement, au fil du temps. Parce que, par exemple, si je change ce seul bouton et que le taux de conversion se détériore, je saurais qu' il faut je saurais qu' il remettre ce bouton tel qu'il était. Et si vous pouvez suivre cela garder un œil sur cela et adopter une approche très graduelle en ce qui concerne votre façon d'être , en concevant votre site Web et en l' améliorant au fil du temps , vous obtiendrez progressivement un bien meilleur résultat à la fin. Mais ce que font la plupart des gens, c'est qu'ils essaient de se précipiter pour changer l'intégralité de leur site Web en une seule fois. Et ils n'ont rien à comparer car ils ne savent pas ce qui fonctionne et ce qui ne fonctionne pas Vous êtes donc constamment dans le jeu des devinettes J'avais en fait un site Web sur lequel je l'ai créé pour un client. Cela a coûté environ 15 000 dollars. Et deux semaines après avoir remis le site Web au client et m' être assuré que tout était en place, ils ont finalement changé à peu près toute la page d'accueil Ce n'était évidemment pas idéal, car nous ne savions même pas ce qui fonctionnait et ce qui ne fonctionnait pas. Nous étions tout simplement aussi bien informés qu' au tout début, lorsque nous n'avions aucune donnée. Maintenant, les gens consultent le site Web, et heureusement, j'ai réussi à le comprendre et à revenir à ce que nous avions avant que les choses ne deviennent trop compliquées. Mais en fin de compte, nous devons nous assurer d'adopter une approche très prudente lorsque nous développons notre site Web, lorsque nous optimisons les choses, lorsque nous essayons de les améliorer. Parce que si vous n'avez rien à comparer, et que vous ne savez pas vraiment si vous vous améliorez ou non. Vous ne savez pas vraiment ce qui apporte l'amélioration. Et par conséquent, vous restez simplement au même endroit ou pire encore. Maintenant, cela prend un peu de temps et un peu de patience pour vraiment appliquer correctement cette approche. Maintenant, si vous avez des questions concernant l'utilisation de Hot Jar ou l'évaluation des données de votre site Web, n' hésitez pas à nous contacter. Je suis là pour te soutenir de toutes les manières possibles. Je veux vraiment vous voir réussir, alors n'hésitez pas à me contacter si vous avez besoin d'une aide supplémentaire. Mais j'espère que cette leçon vous sera utile, et j'ai hâte de vous voir dans la prochaine. Je te verrai 72. Après le lancement : comment savoir quand votre site Web est parfait: Alors, comment savoir si votre site Web est prêt et parfait ? À ce stade, vous avez beaucoup travaillé pour comprendre comment créer votre site Web, et vous en êtes probablement arrivé à un point où vous en êtes assez satisfait. Mais comment sais-tu que c'est juste ? Eh bien, il y a certaines choses que vous devez savoir lorsqu'il s'agit de créer un site Web et de savoir quand il est parfait. Et la vérité, c'est que ce n'est jamais vraiment parfait. Et si je vois cela c'est parce qu'il y a toujours place à l'amélioration. Maintenant, je propose à tous les étudiants qui investissent dans ce cours de leur donner un petit feedback sur la conception de leur site Web. Maintenant, vous avez investi dans ce cours et m'avez finalement fait confiance pour vous guider tout au long de ce processus. Le moins que je puisse faire est donc de vous donner quelques commentaires sur l'apparence et la convivialité de votre site Web, afin que vous puissiez le rendre le meilleur possible. Et pour ce faire, j'ai vraiment besoin de voir votre site Web. Donc, une fois que vous aurez terminé votre site Web, partagez-le avec moi en tant que projet dans le cadre de ce cours, car cela permettra essentiellement de m' assurer que je puisse vous donner des critiques constructives ou simplement vous dire à quel point vous êtes doué afin que vous puissiez pleinement sûr que votre site Web est prêt à être publié. Et je tiens à vous promettre à 100 % que si vous le partagez sous forme de projet pendant ce cours, je voudrais vous répondre à 100 % et vous faire mes critiques constructives et tout commentaire que j'ai pour vous aider à améliorer le site Web. Maintenant, vous n'êtes pas obligée d' écouter tous mes conseils, mais je veux juste vous faire part de mon opinion honnête selon laquelle vous pouvez prendre la meilleure décision pour votre entreprise et votre marque. Et une fois que vous l'avez fait et que votre site Web est parfaitement en place, l'étape suivante consiste à commencer à générer du trafic vers votre site Web. Je voulais aborder très brièvement les étapes d'un entonnoir marketing afin de comprendre le rôle joué par votre site Web dans la conversion d'une personne qui ignorait totalement votre marque au départ en client payant et comment tout cela fonctionnait Mais pour que vous puissiez créer une stratégie marketing exploitable pour votre marque et votre entreprise et réellement commencer à développer votre marque et votre activité, devez avoir une stratégie et un plan en place pour générer du trafic vers votre site Web afin qu'ils puissent acheter chez vous Mais pour que vous puissiez réellement générer du trafic, afin que votre site Web puisse commencer les convertir en clients payants, vous devez avoir mis en place un plan pour réussir votre marketing. Et si vous avez suivi l'un de nos cours, et si vous avez déjà suivi l'un de nos cours dans le cadre du programme Brand Builder Pro, vous savez que la prochaine étape du programme Brand Builder Pro est votre cours de marketing stratégique. Cela couvrira tout ce dont vous avez besoin pour créer une stratégie marketing réalisable qui fonctionne dans le monde numérique dans lequel nous vivons aujourd'hui pour générer du trafic pertinent vers votre site Web afin que vous puissiez créer plus de clients, générer plus de revenus et, en fin de compte, plus de profits Quoi qu'il en soit, je suis très reconnaissante que vous ayez investi votre temps et votre énergie pour votre temps et votre énergie me faire confiance pour vous guider tout au long de ce processus J'ai hâte de voir le site web que vous allez créer. Assurez-vous de partager avec moi de toutes les manières possibles, et j'ai hâte de vous voir espérons-le, dans un prochain cours. Merci beaucoup, et je vous reverrai bientôt. 73. Temps du projet pour le site Web: Je veux juste vous donner un petit plat à emporter, juste pour tester vos connaissances Maintenant, je veux m' assurer que vous posez toutes les questions que vous avez concernant la conception stratégique de sites Web, mais je veux aussi que vous preniez simplement une capture d'écran d'un site Web que vous pensez parfaitement conçu et téléchargé en tant que projet dans le cadre de ce cours. Et ce site Web pourrait être sur Pinterest. C'est peut-être quelque chose que vous trouverez sur Google. Il peut s'agir d'un site Web que vous connaissez réellement. Il peut même s'agir d'un site Web que vous avez créé dont vous savez maintenant qu'il suit les règles clés d'une conception de site Web stratégique et d'un beau design de site Web d'ailleurs. Assurez-vous donc de partager au moins un site Web tant que projet dans le cadre de ce cours, afin de montrer que vous comprenez les principes fondamentaux en matière de conception stratégique de sites Web. Et n'hésitez pas à laisser quelques notes également. Je veux que vous compreniez les leçons que nous avons enseignées Sachez toujours que je suis plus qu'heureuse de vous soutenir, ainsi que tous les autres étudiants qui investissent dans nos cours autant que possible. Alors n' hésitez pas à nous contacter. Si vous avez besoin de nous envoyer un e-mail, n' hésitez pas à consulter notre site Web. Nous disposons de nombreux autres outils et ressources vous aider dans votre parcours de création de marque. Merci beaucoup, je vous verrai dans le prochain. Voir.