Seo IA Pro

00:00:00 Bonjour à tous. Dans cette vidéo, on va voir comment créer une marketplace en partant de zéro mais plutôt en partant de mon template. Alors, cette vidéo, elle va être un peu longue parce que je vais pas faire de cut. Le but, c'est que vous ayez une longue vidéo d'exemple de moi qui me m'y prend pour créer une marketplace de zéro. Alors là, je suis sur l'espace de Christelle. C'était l'une des premières élèves à rejoindre cet accompagnement, cette formation, ce coaching, vous l'appelez comme vous

00:00:28 voulez. Et donc elle, elle a pour projet de créer une marketplace en affiliation pour comparer les compléments alimentaires. Donc c'est une thématique que je connais assz bien parce que moi-même je suis client de plusieurs marques de compléments alimentaires et ça va être super parce que elle m'a déjà envoyé plusieurs informations par email et on va pouvoir du coup tout de suite attaquer. Comme on peut le voir, elle a déjà pris un plan CMS donc elle a déjà payé. Par contre, elle a pas vérifié son

00:00:50 adresse mail. Elle s'est bien inscrite en passant par le lien que j'ai donné dans l'accompagnement pour avoir le prix web du marché. Donc c'est super. Donc je vais renvoyer un petit email pour qu'elle puisse le valider à son adresse email. Donc ce qu'on va faire, on va aller sur la crémix pour accéder à mon template. Ici on fait cloning webflow. Pourquoi partir du template ? Parce qu'il y a déjà tous les paramètres. CP place create site. Donc là ça a dupliqué mon template dans son espace. Donc le

00:01:16 but de cette vidéo, c'est vraiment qu'on construise toute la structure avec les layouts, avec les librairies pour qu'on aille le plus vite possible et qu'on puisse bah publier le site le plus vite possible et avancer. Donc tout ça, on va marquer high tutorial, on en a pas besoin. C'est très bien. Donc là, on est bien sur la plateforme, le site. On va revenir dans le dashboard et on va transférer le plan du site ici. Donc on va faire settings. Donc là, on va déjà devoir transférer le plan. Elle a pris

00:01:44 le CMS. Donc on va aller le mettre ici. On va faire airve. On prend ça. On peut y coller là. On va faire transfert site plan. Donc là, on va dans Billing, transfert plan et on va le transférer à la marketplace. Donc là, on va marquer transfert parce qu'elle avait pris un abonnement euh sur un site vide. Le plan a bien été transféré vers la marketplace. Donc là, on peut archiver celui-là et du coup, on aura bien l'abonnement CMS sur la marketplace. Donc ça, c'est super. Là, on l'a archivé comme ça, on en aura un seul. Donc là,

00:02:11 on peut déjà aller faire open in webflow. On va le publier sur le nom de domaine là, juste pour qu'on ait un rendu visuel. Ouais, ça c'est parfait. OK, parfait. Super. Donc là, tout est bon. On a toutes les catégories déjà faites. On a les pages. On peut aller ici voir un petit peu comment ça se représente. On a bien la page de la newsletter lister sur la plateforme nos valeurs, le blog nous contacter. C'est super. On a bien voilà la structure c'est super. Donc là le design il est vraiment moche, on est d'accord. Ce

00:02:42 qu'il va falloir qu'on fasse ajouter plusieurs layouts. Donc on va faire Brow More Libra et la première chose qu'il faut qu'on fasse c'est installer des layouts. Donc on fait free librairie et là on va pouvoir choisir la librairie qu'on veut. Il y en a plein, vous pouvez les tester. Moi, ce que je vous recommande tout le temps, c'est d'ener deux. Untiled UI. Celle-ci, on va l'installer. Installe. C'est gratuit. Parfait. Donc là, on peut fermer ça. On va retourner dans layout. On va en installer une autre. On va installer la

00:03:06 bricks. Alors, free librairie, c'est de bricks. Voilà, celle-ci. Element, installe librairie. Il y en a d'autres qui sont aussi très pratiques. Moi, je vous recommande ces deux là. C'est celle que j'utilise le plus. Et si on veut vraiment aller sur quelque chose de de très moderne, on peut en installer une troisième qui est aussi gratuite. Celle-ci, je l'aime bien celle-ci. Celle-ci, elle a plein de petits éléments qu'on peut installer dans des euh composants. Super. Voilà. Donc là, si on retourne ici, on fait rafraîchir,

00:03:31 on va voir toutes nos librairies, toutes nos layouts. Ça va nous permettre de faire un petit peu comme sur WordPress du drag and drop. Super. Donc là, on va être sur la page d'accueil et avant de personnaliser les pages et cetera, je vais vous montrer qu'on va ici pouvoir ajouter. Du coup, si on veut par exemple une FAQ, tap FAQ. Et là, on va pouvoir prendre cet élément là et le glisser déposer ici par exemple. Et là, on va avoir une FAQ déjà stylisé. Donc, c'est vraiment pratique. Maintenant, il faut

00:03:55 qu'on respecte des étapes pour aller le plus vite possible et pour qu'on soit les plus productifs possible. Il y a plusieurs choses qu'il faut qu'on fasse. Alors premièrement, ça va être on va aller dans les paramètres et on va configurer le site internet. C'est le plus important. Donc là, on va définir si on a déjà une charte graphique ou pas. Moi, dans cette vidéo, je vais euh vraiment partir de zéro parce qu'elle m'a pas envoyé énormément de choses. Je vais vous montrer un petit peu ce qu'elle m'a envoyé. Alors, élément pour

00:04:19 le comparateur, elle a différents noms qu'elle a sélectionné. Mysupplement.fr, mon complément alimentaire, les compléments alimentaires, clear complément.fr. FR. Moi, j'aime vraiment bien les deux premiers mysupplement.fr et mon complémentalimentaire.fr. Couleur couleur, je suis pas trop fan mais je pense ça pourrait être bien d'avoir un un noir et blanc et ça ça sera pour les catégories. Par exemple, protéines, je verrais bien ça. Sommet, je verrai bien ça. OK, donc là, elle m'a déjà donné toute la structure, donc c'est super.

00:04:46 Donc on va venir copier la structure, on va la coller à un endroit. Donc là, on va venir y mettre tout en bas. On va c'est les informations qu'elle nous a déjà donné. Donc maintenant, il va falloir qu'on mette en place les icônes, le webclip et cetera. Donc là, je vais tout faire en live. Donc ça sera peut-être pas le meilleur design, mais en fait le but c'est qu'on aille vite. Donc là, on va aller sur flat icône. Ici, on va taper euh supplément. OK, on va regarder un petit peu ce qu'il y a. On va partir là-dessus. Modifier

00:05:09 l'icône. On va la laisser en noir. Super. Maintenant, il va falloir qu'on la mette en favicone. Donc là, on peut aller sur favicone convertisseur. Vous aurez tous les liens sous cette vidéo. Donc là, on va mettre le super. Donc là, on l'a converti en favicone. On va l'uploader. On a téléchargé le 32/ 32. Maintenant, il nous faut le même en 256/ 256. Ça s'appelle un webclip. Donc là, on va mettre l'icône qu'on a téléchargé. On le met en webclip. On peut l'uploader là. On va la renommer webclip super paris

00:05:42 fr. On enlève le branding dans l'HTML. Ensuite, site access. Là, c'est pour les accès, c'est tout bon. Publishing. Là, pour le sous-domaine, on peut marquer My Supplement. On va aller au plus simple, hein. Moi, j'aimais bien le My Supplement. Mon complément alimentaire, j'aime pas trop coller. Je préfère avec des tirets. My supplément pour moi, c'est le plus court, c'est le plus efficace. Donc, on va faire mysupplement.flow. Parfait. Ensuite, elle pourra acheter son nom de domaine. On attend bien que ça soit enregistré.

00:06:07 Parfait, c'est enregistré. On republie un petit coup. 300 à redirect. Ça, on y laisse comme ça pour le moment. Billing, c'est tout bon. Le plan, on est bien sur le CS. Si tu usage, ça c'est la taille des fichiers qu'on met dessus. C'est tout bon. Le SEO. Alors, indexing, non, on veut pas qu'il soit indexé. Le sous-domaine. Robot XT, c'est bon. OK. Site map Autogenerated, parfait. Google, parfait. Le formulaire, elle a bien mis son adresse email. Donc là, on va marquer formulaire webflow. le subject

00:06:34 line. Du coup, on va marquer nouvelle demande de contact sur voilà reply adresse. On va laisser son adresse email. Quand elle aura une adresse mail pro, l'idéal c'est qu'on mette du coup son adresse mail pro ici. Email template. Et là, on va marquer vous avez reçu. On va y laisser comme ça. Sinon, vous pouvez customiser ça. Et après, il faudra mettre ce format là. Du coup, on va envoyer ça. Chat GPT. Ce qui s'affiche là à votre écran formata. Ça sera le contenu du formulaire qui a été rempli dans vos

00:07:07 demandes de contact. Là, on est en train de paramétrer le form. Donc là, on copie bien ça. Là, on peut marquer "Voici le message forum data avec une majuscule. C'est parfait. OK, on met pas de capchat pour le moment. C'est très bien. Et donc là, on peut y enregistrer et on met un petit coup de publish." Les librairies, c'est les librairies qu'on vient d'installer. Les fontes, c'est la police du texte. Donc, si on veut mettre des polices personnalisées, on peut faire comme ça. Je vais vous montrer tout de

00:07:29 suite. Custom fonte. Voilà, il y a plein de sites où on peut trouver des polices, hein. Euh franchement, il y en a des des dizaines et des dizaines. Des messflow, vous pouvez télécharger une police ici. J'aimerais en prendre une un peu un peu celle-là, elle est pas mal. Get font don all. Donc là, on a téléchargé ça. On y ouvre. Super. Donc là, on va voir la police. On retourne sur notre site upload font téléchargement et là, du coup, on peut mettre le fichier TTF. Et comme on peut le voir, il y en a plein qui sont

00:07:58 dedans. On peut aussi mettre euh juste normalic. Et on peut mettre un fallback. Donc c'est celle qui sera affiché si jamais le navigateur n'arrive pas à afficher la police qu'on a importé. Moi, je vais pas l'importer parce qu'il y a aucun intérêt à mettre une police différente pour ce type de marketplace. Les polices classiques sont assez bien. Les backup ici, ça sera les anciennes versions du site quand on l'aura modifié et publié plusieurs fois. Donc, on pourra restaurer une version du site si

00:08:20 un jour on a cassé une fonctionnalité. Ici, on va avoir les applications et les intégrations. Connecter les pixels, c'est ici que ça va se passer. Et le custom code, c'est là également qu'il y aura du code. Donc là, on va devoir installer du code plus tard qui sera du code qui permettra de filtrer justement tous les éléments de la marketplace que je vais vous montrer tout de suite. Par exemple, là ça marche pas comme vous pouvez le voir parce qu'on a pas installé encore des bout code dans le dans la marketplace. Donc là, on a déjà

00:08:45 paramétré les plus gros paramètres. Si on va voir le site ici, on a bien l'icône en haut. Maintenant, on refait un petit tour dessus pour tout vérifier site access. C'est tout bon. On a tout fait. Donc maintenant, c'est parti pour rentrer dans le cœur du sujet qui est personnalisé la marketplace. On va aller dans Open in Webflow. On peut fermer les autres onglets. Et maintenant faut qu'on soit réfléchi. Il faut déjà qu'on définisse quels sont les grands paramètres et quels sont les grands éléments qui seront sur toutes les

00:09:14 pages. Il y a deux éléments qui sont sur toutes les pages. Il y a le header et le footer. Donc là, on va les customiser et ensuite on pourra customiser les couleurs générales du site. Pour ça, comme on peut le voir ici, il y a plusieurs éléments. Il y a l'appel à l'action, il y a le nave barre et il y a le menu pied de page. Ici, on va plutôt s'orienter vers quelque chose qui est moins gras. et moins épais que le design de cette marketplace. Donc pour ça, c'est très simple. On va venir faire un

00:09:39 double clic sur la nave barre et si la nave barre actuellement ne nous plaît pas, on va ajouter une autre nave barre. Donc on va faire plus layout. Là, on va marquer nave barre. Et là, on a plein de nave bar différentes. On en a vraiment plein plein plein. Et pour cette vidéo, moi, j'ai vraiment envie d'installer Untiled UI parce que c'est vraiment celle qui est la plus belle pour moi, qui est la plus adaptée à ce site là. Donc comme on est sur une grosse marketplace, moi j'ai bien envie d'en installer une où il y a pas mal

00:10:05 d'éléments dessus. Donc moi j'aimerais bien installer celle-ci et après on va pouvoir les fusionner. Donc c'est ça qui est top. On va regarder un petit peu tout ce qu'il y a. Et sinon il y en a d'autres comme on peut le voir en bas. Il y en a plein. Mais moi ce que je préfère ici c'est vraiment qu'on parte sur quelque chose comme celle-ci parce qu'on va avoir beaucoup de catégories. Donc là on clique dessus. On peut bien voir que là on a bien l'élément. Donc on va déjà pouvoir personnaliser ça. C'est

00:10:27 un petit peu particulier celle-ci parce qu'il y a plein de logos et cetera. Donc dans le style, on va pouvoir y paramétrer. On va pouvoir remplacer l'image. Là, comme on peut le voir, il y a plein d'éléments différents pour créer le logo. Donc on va supprimer tout ça. Là, on va remplacer l'image. Voilà. Donc là, on a bien remplacé l'image. Maintenant, le contour, on peut également le retirer. Il me semble que c'est ça le logo marque. Exactement. C'est bien là où il y avait un contour. Donc, on peut faire

00:10:51 un wrap. Et maintenant, il faut juste qu'on supprime ce logo là. OK, super. Donc ce qu'on va faire pour que ça soit encore plus simple, là c'est très bien. Et celui-là, on peut retirer ses attributs. Et le but c'est que ça soit pas l'un sur l'autre. Là comme on peut le voir, ça c'est une image. Donc on va rajouter un texte ici. Soit vous pouvez mettre un logo carré plus un texte le nom de votre site ou alors vous pouvez mettre une seule image. Moi ce que j'aime bien c'est justement qu'on rédige

00:11:15 le texte, le nom de la marque quoi. Donc ça le wiz, on va mettre pourcentage 100 %. Donc là je suis en train de designer en fait le le logo tout simplement. Donc le texte, on a dit que c'était mysupplement.fr. Donc là, il est en il est en blanc, donc on va le changer. Va marquer dxt black. Super. Donc là, il est bien en black. Et on peut même le renommer en logo. Comme ça, on aura que cet élément là. La taille, on peut mettre un peu plus grand. On va mettre 1.2 et on va marquer en médium. Et là

00:11:48 maintenant, il faut pas que le texte, il faut pas que les deux se chevauchent dessus. Donc on va changer ça et on va le mettre en flex. Très bien. Donc là, on est bien en flex. Le container. OK. Et là, faut juste qu'on résolve le problème. Pourquoi il se chevauche tous les deux ? Ah, parce que lui, c'est un absolu. On va le mettre en statique. Et voilà. Et lui, on peut le remettre en on va l'appeler logo et on pourra le mettre en flex. Super. Donc là, je suis en train d'un petit peu de personnaliser.

00:12:15 Je me suis un peu cassé la tête parce qu'il y avait justement le le petit problème là parce qu'il y avait un logo un petit peu particulier. Mais ça c'est vraiment rare, c'est que quand on fait des éléments un peu particuliers comme ça. Mais sinon c'est vraiment nickel pour y personnaliser. Donc là, je suis en train de mettre une marge entre les deux éléments. Comme on est sur un élément flex. Et là, on va remarquer accueil. Là, on met un lien vers la homepage. Là, on va marquer meilleur complément. Et là, on va marquer un lien

00:12:38 vers les catégories. Là, on va mettre un lien vers la newsletter. Et là, on va mettre un élément dropdown. Ici, comme on peut le voir, il y a un élément où il y a un peu les éléments à propos et il y en a un là. Mais ça c'est on va mettre les grosses catégories de notre notre site. Là le but c'est qu'à droite on mette un élément. Donc dans le webfow en fait le but c'est qu'on remette un dropdown ici pour que les gens puissent aller voir les autres pages mais qu'il soient toujours dans ce style là. Donc

00:13:04 pour qu'on soit dans ce style là, on va bientôt pouvoir le supprimer l'ancienne nave barre et on va rajouter une nave barre. On va retaper 9 barres et on va prendre celle-ci avec le grand dropdown et on va juste prendre cet élément-là. On fait sélectionner bien le dropdown, on y coupe ça, on supprime, on revient là-dedans et on va y coller juste après celui-là. Et comme ça là, on a les catégories et les ressources. Les boutons, on va les changer. Lui, on va peut-être marquer contact et là, on va

00:13:33 peut-être marquer s'abonner ou peut-être juste newsletter. Si on veut être encore plus simple, on peut marquer ici newsletter. Parfait. Maintenant, si on veut que ces éléments ils soient centrés à droite, on peut sélectionner, je pense, voilà, menu left. Lui, c'est menu right, lui c'est menu left. Et pourquoi il est aligné à gauche ? Je pense que c'est à cause de celui-là. Voilà. Du coup là, on va marquer à droite. Très bien. Donc maintenant, on peut juste ouvrir le dropdown pour récupérer les textes. Donc

00:14:08 nos valeurs, il y avait nos valeurs. Ensuite, il y avait nous contacter. On va prendre aussi les petits textes en dessous. Nos valeurs, nous contacter. Le blog. OK. Donc là, on coupe tout le texte, on prend tout ça, on supprime. On peut supprimer ceci. Et là, on peut du coup faire ressources chaud. Et là, on peut tout paramétrer. Donc, on va remettre nos valeurs. Nos valeurs sans y mettre en gras. Donc, nous contacter. On peut remettre la page contact ici hein si on veut. Et finalement blog, guide et

00:14:54 comparatif de compléments alimentaires. Là, ce qu'il faut faire attention, c'est que ça soit toujours euh à peu près de la même taille et si jamais il y a des choses en plus, on pourra les supprimer plus tard ou les personnaliser. Donc là, la page blog, il faut qu'elle aille vers le blog. La page nos valeurs, il faut qu'elle aille vers valeur. Nous contacter, contact documentation. Hm. Après, je pense que il y a pas mal de choses qu'on va supprimer. On pour ajouter une page euh partenariat et la dernière, on peut le

00:15:24 supprimer. Très bien. Là, il y a un petit problème, c'est que on peut voir que celle-ci, il est beaucoup plus grand que celui-là. Donc quand on va survoler là, on va bien pouvoir rester dessus. Mais sur celui-ci, apparemment là, ça marche. C'est un petit peu dommage, vous pouvez le voir là, ça s'affiche bien en bas et là ça chevauche un petit peu. Mais là, franchement, le but, c'est juste qu'on avance vite. Donc on va pas trop personnaliser tout ça. OK, donc là, on a déjà fait le header et comme on l'a

00:15:47 modifié dans l'élément vert, il sera répercuté partout. On va passer sur mobile vite fait pour voir ce que ça donne. Et là, on peut voir qu'il y avait un ancien élément. Donc l'ancien élément, on va regarder c'est lequel. Il doit être caché sur ordinateur. Donc on va tout ouvrir et on va regarder quand il y a un petit œil fermé à droite là. Donc c'est soit celui-là ou peut-être là-dedans. On va regarder pourquoi il était caché. Il y a un logo qui est caché. On va essayer de supprimer ça. OK. Donc c'est apparemment là-dedans.

00:16:19 Voilà, il y avait un il y avait une image en background. On va la supprimer directement. Très bien. Donc là, on a bien notre site sur mobile et on a bien le site sur ordinateur. Très bien. Donc là, on a déjà configuré la nave barre. On va faire pareil pour le footer. Double clic. Et là, on va aller dans Ted UI et on va taper footer. Là, on a plein de footers. Honnêtement, ils se valent un peu tous. J'aime bien celui-là parce que nous, on va avoir une marketplace. Même lui, il serait bien, je pense. Lui,

00:16:47 il va être super parce qu'on a une grosse marketplace là-dessus. Donc il faut qu'on ait un gros site, enfin faut qu'on ait un une grosse architecture quoi. Donc ce qu'on va faire c'est qu'on va supprimer tout ce qu'on a mis et on y complètera plus tard le footer. Là le but c'est vraiment qu'on ait la bonne structure de site. Très bien. Très bien. Très bien. Donc on peut en supprimer quelques-uns. Par contre il y a trop de div. Il y a souvent alors j'en ai supprimé un de trop. Il y a souvent trop

00:17:09 de div là-dedans. Donc ça c'est très bien. Ici ce qu'on va faire c'est qu'on va créer un nouvel élément pour notre logo. Comme ça on va pouvoir le réutiliser partout. Donc le lien logo, on fait clic droit dessus, create component et là on va l'appeler logo. Super. Donc là maintenant euh cet élément là on peut le copier et on peut le coller ici. Et quand on va le modifier à un endroit sur notre site, il sera modifié partout. OK, donc là on peut supprimer le logo là. Et voilà. Et si par exemple je mets un espace ici

00:17:37 dans le texte et ben dans le header, on aura aussi le texte, enfin l'espace le point FR, je pense qu'il va qui va partir. Super. OK, donc là on est bon. Maintenant qu'on a créé le header, le footer, on va pouvoir plus tard quand on aura ajouté les pages, les catégories, traduire tout ça, faire les liens vers les pages. Mais pour l'heure, il faut qu'on fasse quelque chose de plus important qui est toute la charte graphique. Donc là, Christelle, elle m'a pas beaucoup aidé parce qu'elle m'a pas beaucoup donné d'informations sur la

00:18:04 chatte graphique. Donc là, je vais vraiment faire au feeling. Je pense que je vais m'inspirer de la marque Nutrienco. Donc, d'habitude, c'est beaucoup plus carré. D'habitude, il faut suivre toutes les vidéos, il faut vraiment avancer de manière stratégique. Là, je pense qu'on va pouvoir vraiment s'inspirer de ça parce que les couleurs sont vraiment bonnes. Donc, on peut aller voir sur Nutrienko. Il y a plein de couleurs et je pense qu'on va vraiment devoir utiliser beaucoup de couleurs. Donc ici, ce qu'on va faire,

00:18:28 c'est qu'on va prendre chaque élément et on va dire à chat GPT, donne-moi une couleur pour chaque grande catégorie de silo que je vais mettre en place sur mon site SO. Le but c'est que chaque couleur corresponde à une catégorie du site afin que les personnes puissent reconnaître en un clin d'œil une catégorie. Par exemple, la catégorie protéine doit être rouge. La catégorie sommeil doit être dans les tons bleus, violet, noir. Super. Donc là maintenant, c'est pour ça que je voulais d'abord qu'on crée le

00:18:57 header et le footer. On va pouvoir maintenant qu'on a notre petite structure de c d'ailleurs je sais pas pourquoi c'est de cette couleur là. C'est horrible la couleur de fond. on va pouvoir personnaliser les couleurs du site. Donc pour vous faire un petit peu un tour d'horizon, donc là, on a les éléments qu'on peut ajouter, les layout, donc c'est un ensemble d'éléments qui a déjà été configurés par quelqu'un d'autre. Ici, on a toutes les pages du site que j'ai déjà créé précédemment dans le template. Ici, on va voir les

00:19:23 éléments qu'on a mis dans notre page. Donc ça, c'est toutes les pages, enfin tous les éléments de notre page, pardon. Donc, il y en a vraiment beaucoup. On verra plus tard ce que c'est que les éléments violets. Ici, on a les composants. Donc composants, éléments, c'est un petit peu un abus de langage. Il faut vraiment les appeler les composants. Donc là, on va voir notre menu pied de page, le logo, la barre, l'entête et la section appel à l'action. En dessous, c'est là qu'on va avoir les variables et dans les variables, il y a

00:19:50 des couleurs, des tailles et des pourcentages et des nombres et des polices. Donc ici, on va devoir créer plusieurs variables comme on peut le voir. Pourquoi j'ai décidé d'importer untited UI, le header et le footer d'abord ? parce que il nous importe automatiquement des couleurs et des variables. Si on fait plus ici et qu'on va venir importer une autre librairie comme par exemple Flostica, on va importer cette section héros par exemple. Cette couleur là, on peut le voir qu'elle est en violette. Ça veut

00:20:21 dire qu'elle est liée à une variable. Si on va dans nos variables, on peut voir que ça a été directement importé. Flostica, Webflow, librairie. Donc ce que vous pouvez faire si vous avez installé des librairies différentes, c'est importer plein d'éléments. Importer vraiment le maximum d'éléments de la librairie. En général, quand vous importez deux éléments d'une même librairie, ça va pas dupliquer à l'infini les variables, ça va réutiliser les mêmes variables. Donc on va installer trois éléments qui viennent de

00:20:47 chaque librairie différente. Donc également celle-ci. Moi, j'aime bien mettre des gros éléments où il y a plein de couleurs, plein de variables. On a vraiment apporté toutes les couleurs et variables possibles. Donc ça par exemple, c'est pas mal. J'en cherche un gros. Voilà, avec des boutons, avec des ombres et cetera. Celui-là. OK, super. Donc maintenant, on peut supprimer tout ce qu'on a ajouté, hein. On supprime, on supprime, on supprime. Super. Donc là, ce qu'on a fait, c'était juste pour ajouter les variables. Super. Donc là,

00:21:16 on a toutes les variables entiled UI. Flostica Element. Maintenant, on va venir renommer tout ça. Le blanc, ensuite, on a le gris. Ensuite, on va voir le noir. Et après, c'est là qu'on va voir nos différentes couleurs. Donc là, moi ce que je vous invite vraiment à faire, c'est regarder où sont les couleurs principales. Donc là, on a le violet et puis on avait le vert tout à l'heure qui était importé. On va revenir là et on va les déplacer. Donc on retourne sur notre GPT et on va importer les couleurs. Donc le bleu

00:21:53 c'était pour le cerveau. Donc là on va changer la couleur du bleu. On y colle là. OK. Donc ça ça sera pour le cerveau. Si vous voulez tous les renommer, vous pouvez tous les renommer mais au risque de devoir les relier à la main plus tard. Ici, comme on va partir sur une marketplace et je sais que Crystal elle va elle va se donner sur le long terme là-dessus, on va pouvoir toutes les renommer pour que ça soit plus simple à maintenir sur le long terme, même s'il y a un petit peu de travail à faire sur le

00:22:15 court terme. Donc on va tout importer le sommeil, l'énergie. Alors lui, il est utilisé pour les liens. Donc on va remonter d'autres éléments. Ça c'est les couleurs principales. Donc on met celle-ci, les couleurs secondaires. On va les laisser comme ça. On va se créer des nouvelles variables et après on va fusionner celle qu'on devra fusionner. C'est le plus simple. Donc couleur, énergie et vitalité, on était sur celle-ci. Ensuite, immunité, stress et humeur, minceur et digestion, beauté et peau, santé des yeux, santé masculine,

00:22:54 couple et sexualité. J'ai l'impression qu'elle m'a fait beaucoup trop de catégories. Ça me semble beaucoup toutes ces catégories et honnêtement, j'en aurais pas fait autant mais si c'est ce qu'elle a trouvé de par sa recherche de mots clés, je lui fais confiance. che ongles sport et performance, ça me semble bien. Après, il y aura peut-être, je pense, des catégories principales et des catégories secondaires. Ça, j'aurais bien aimé euh y voir préciser. Complément pour animaux. Ah, ça, j'y mettrai pas,

00:23:20 honnêtement. Complément pour animaux. Euh seior, ça c'est super pertinent. Bébé et enfant. OK, super. Donc là, on a toutes nos couleurs. Parfait. Donc là forcément il y a plein de couleurs qui ont été mappées des anciennes et là on va pouvoir attaquer la structuration du site. Donc toutes les catégories qu'on a déjà là on va pouvoir les indiquer si dessous. Donc on va pouvoir venir récupérer ici toutes les catégories et on va pouvoir les mettre ici. On va coller les textes en fait. Et le but c'est queon puisse déjà mettre à

00:23:55 jour le menu pied de page. On va mettre à jour le header. À partir de ce moment-là, on aura déjà les couleurs, la structure et le plan que Cristal nous a donné. Derrière, on aura juste à créer les pages et aller de l'avant pour mapper les couleurs. Donc ici, on va je vais ouvrir l'onglet à droite. Sommeil, relaxation, énergie et vitalité. Donc faites attention à ce que vous ayez pas de texte en gras. On va pas mettre non plus des couleur dans le menu pied de page. Pas d'intérêt, stress et humeur. Donc là le but c'est d'aller le

00:24:32 plus vite possible. On pourra pivoter après. C'est vraiment le plus important. Ne pas passer 3 jours sur la création d'un logo. Tout est modifiable. Forcément, ce qui engage de l'argent mieux vaut. y réfléchir avant de dépenser de l'argent. Si l'argent est une ressource, on va dire très limitée dans votre business. Par exemple, toutes les catégories que je suis en train de mettre en place, il va falloir les classer. On va pouvoir faire une catégorie sport, on pourra faire une catégorie relation, homme,

00:25:05 femme, on pour faire une catégorie autre, complément alimentaire, seior, cheveux et oncle, sport et performance, complément pour animaux, seigneor, bébé et enfants. Donc là, je vois directement une catégorie qu'on peut faire. La catégorie autre, on peut l'ajouter mais on a'ura pas mis de couleur dessus. Ça sera une catégorie blanche. Ça, on peut y supprimer. Et là déjà, on peut y réorganiser. En fait, moi je vois déjà qu'il y a une catégorie, ça doit être pour les pour les cibles. Donc femme, homme, seior, je sais pas ce que vous en

00:25:35 pensez. Moi, ça me semble plutôt logique de tout centraliser. Euh donc à gauche, je vais mettre ici, ça sera pour profil. Là, ça sera besoin. Je pense qu'on pourra faire les marques. Comment choisir ? composition et là on pourra marquer entreprise. Donc ici on va glisser. Donc ça c'est les liens qui sont tout à gauche sous le menu que je suis en train de vous montrer et on va faire glisser à gauche tous les liens. Donc déjà tout ceci on pourra les supprimer après. Tous ceux qui sont là pourra faire des liens plus tard. On

00:26:16 va alléger ça justement. Très bien. Donc par exemple bébé et enfant seior ça ça ira dans la toute première catégorie. Séor pareil complément pour animaux pareil couple et sexualité pareil femme santé masculine pareil. Très bien. Donc là maintenant il y en a plein qu'il va falloir qu'on mette du coup à droite. Sommeil et relaxation. Donc à partir de celui-là, on peut tous les mettre à droite. Très bien. Donc là, on a bien le profil seor bébé enfant. Donc cerveau et cognition, on peut y déplacer.

00:26:57 Complément pour animaux, santé masculine. Là, pour que ça soit un petit peu logique, on peut marquer santé [Musique] féminine. Couple et sexualité, je le mettrai pour réorganiser un petit peu la chose. Seior, j'y mettrai tout en bas avec les animaux. Là, je marquerai pas complément pour animaux, je marquerai animaux. Seigneor en bas et bébé aussi. Santé masculine, je mettrai au-dessus de féminine parce qu'il y a plus d'hommes qui prennent des compléments alimentaires que de femmes dans cette thématique là. Là, pour moi, c'est

00:27:31 nickel celui-là. Et là, on pourrait marquer votre profil. Et si on veut, on peut séparer ça encore en deux. Si on veut vraiment se dire euh vos besoins et à droite, on pourrait peut-être même marquer les bénéfices ou les catégories, pourquoi pas ? Pour le moment, ça c'est bien. Je pense qu'ici, on va pouvoir séparer tout ce qui concerne l'énergie, le bien-être mental et à droite le bien-être physique. Cheveux, ongle, santé des yeux, stress, gauche, gauche, gauche. Àvoir. Pour le moment, on va y

00:28:03 laisser comme ça. Et là, on va marquer les types de compléments. Et ici, par contre, on va marquer la grande liste qu'elle nous a donné, quoi. Donc, tout ce qui est zing et cetera, on va lui en demander 10. Les 10 plus grands. Donne-moi les 10 compléments alimentaires les plus connus sous cette liste. Il y a même pas les protéines en poudre. OK. Bah, il y a vraiment un problème du coup dans la liste parce qu'il y a pas les protéines en poudre. Donc protéines en poudre. Là, on va juste marquer les créatines parce qu'il

00:28:32 y a plusieurs types de créatines. Les vitamines, peut-être juste les omégas, magnésium, probiotique, collagène, mélatonine. OK, très bien. Là, on peut décider de les laisser comme ça si c'est par volume de recherche. Sinon, si on veut quelque chose de plus esthétique, on peut les organiser par nombre de caractères. Donc, celui-là peut être le premier, celui-là peut être le dernier. Comme c'est le plus court. Puis sinon, on peut y laisser comme ça. Comment choisir ? Donc là, on va mettre nos guides. Donc d'habitude, on a déjà dû

00:29:02 faire notre analyse de recherche sur les mots-clés. Donc là, on pourra marquer les top 10. Je pense ça serait super de faire des pages sur ce site qui seront les top 10, donc les meilleures protéines en poudre. Par exemple, on pourrait faire un guide, un article de bloc. Du coup, comment choisir ? Après, on peut essayer de peut-être d'aller varier sur d'autres mots clés. Là, ça concernera du coup bah la personne qui a fait l'audit et l'analyse des mots- clés, l'analyse des concurrents. Moi, j'ai pas eu plus d'information pour

00:29:29 cette vidéo, donc on va essayer de faire au mieux. Les compositions, je pense que ici, on va pouvoir euh également faire des articles de blog sur les composants euh des compléments alimentaires. Donc, par exemple, d'où vient l'huile des oméga-3, d'où vient le lait des protéines en poudre, comment sont fabriqués les vitamines, quels sont les taux de concentration du magnésium, toutes ces questions-là. Je pense que ce qui va être important ici, c'est qu'on aille tapé les questions de the public. Donc je vais mettre en place déjà les

00:29:57 éléments dans le menu pied de page afin que bah Crystal puisse mettre à jour ses liens. Et maintenant l'entreprise ici, on va marquer les pages de notre entreprise donc qui sont utiles pour que les gens puissent s'abonner à la newsletter et cetera. Donc ici, on va marquer newsletter et on va venir pouvoir du coup dupliquer tout ça. Donc la newsletter, on peut faire un lien vers la page contact, page partenariat qu'on mettra un lien plus tard dessus et ensuite tout ce qui est euh CGV, donc les pages légales du site, même si on

00:30:29 fait que de l'affiliation, il faut quand même qu'on en ait. conditions politique de confidentialité, mention légale. Souvent ces pages-là, on peut les mettre tout en bas, mais ici on va on va les laisser comme ça. Les textes aussi, il va falloir qu'on définisse avec la vidéo charte graphique, comment on s'adresse aux personnes et cetera. Tous les textes là, le but c'est que vous puissiez les générer automatiquement avec chat GPT et que vous ayez pas besoin de rédiger euh des phrases encore et encore pour gagner

00:30:54 un maximum de temps. Donc là, on est bon pour euh le menu pied de page. Comme vous avez pu le voir, c'est un c'est quelque chose qui a pris déjà plus d'une heure à faire. Là, ça c'est vraiment le cœur du site, j'ai envie de dire parce qu'une fois qu'on a le menu pied de page et le header, le flux SEO, donc le jus SEO sera bien mieux réparti et surtout on aura déjà une première structure du site internet. Donc maintenant qu'on a fait ça, on va faire pareil dans le header. Là, on va venir l'éditer

00:31:23 catégorie, on va venir faire show. Et là, on va remettre en place les mêmes choses qu'on a mis en bas. Donc ça va encore nous prendre du temps. Je vais peut-être vous montrer le premier. Après, je vais couper l'enregistrement et on pourra se revoir justement pour la suite. Donc, on va remettre ici les titres exactement les mêmes qu'on a mis ici. Donc moi, ce que je vous recommande de faire c'est vous prenez tous ces textes là, vous les mettez dans un doc comme ça après vous pouvez faire juste des copiescollés sur Mac, vous pouvez

00:31:48 faire une capture d'écran et après de prendre directement le texte. Donc, je vais vous montrer ça tout de suite. Et là, si je veux, je sélectionne ça. Mon profil, votre profil. Voilà. Santé masculine, santé masculine, santé féminine. Donc ici, on en mettra peut-être un petit peu moins. Si jamais on veut ajouter des nouvelles catégories, on peut ajouter des nouvelles catégories. En fait, dupliquer et voilà, contrôle D pour dupliquer. Donc, une fois qu'on l' fait une fois, ça va plus vite pour les

00:32:18 autres. Ici, je viens de voir une petite coquille qu'ils ont fait dans le VAR. Ici, c'est un H4, sauf qu'il faut pas qu'il y ait de titre. H1, H2, H3 dans la nave barre. Euh, il faut juste qu'on ait des textes blocs. Du coup, vous pouvez cliquer dessus pour prendre le même la même catégorie, la même classe CSS. Vous pouvez supprimer ça. Ensuite, vous mettez juste un texte bloc, vous recollez du coup le CSS et il sera mis dans le même format. Ensuite, vous pouvez faire copier et vous le collez en

00:32:48 dessous de chacun et vous supprimez l'ancien titre. Comme ça, il y aura pas de problème au niveau du votre profil, vos besoins, les types de compléments, comment choisir, voilà et finalement les autres onglets, les compositions, on fera peut-être un onglet composition, pourquoi pas à voir encore une fois en fonction de ce qu'on a vu chez les concurrents et ce qu'on a pu trouver. Ça, on va aussi supprimer. Donc, les petits onglets de en bas. Chaud. Ouais, les petits onglets en bas, je les ai supprimé. parce qu'on en a pas

00:33:20 besoin. Et voilà. Et là, du coup, on va pouvoir maintenant changer les couleurs. Et les couleurs, vous avez compris, on va pouvoir les connecter. Et je vous montrer tout de suite parce que je pense vous en avez envie. Santé masculine. Là, on tape santé masculine. Et voilà, maintenant on a bien la santé masculine. Maintenant, ce qu'il va falloir faire, c'est qu'on change couleur pour que ça puisse être pertinent. Ici, on va devoir le renommer. Donc, on fait duplicate. Et là, on va l'appeler icône santé masculine, par exemple SM.

00:33:48 Celui-là, on peut santé féminine. Donc, on peut l'appeler, on fait duplicate icône SF. Et là, on va marquer femme. Voilà. Et là, on peut le voir, il y a un problème, c'est que le fond, bah le fond il est pas bien. Le fond il est euh il est de la même couleur. Du coup, ce qu'on peut faire, soit on peut décider de mettre une couleur la même pour tous, par exemple un un gris. Et à ce moment-là, on peut directement revenir en arrière. On revient en arrière et on peut changer la même couleur pour tous.

00:34:20 Par exemple pour tous, j'ai envie qu'il soit en gris avec un contour qui soit en gris un peu plus foncé ou qui soit justement en bleu clair. On peut faire ça. Et ensuite pour l'icône, on peut juste rajouter un petit texte sur l'icône. Par exemple, on peut l'appeler ici, c'était santé masculine SM et là santé masculine. Et voilà, celui-là, on peut le changer en santé féminine. Donc là, on clique sur l'icône SF, on crée une nouvelle catégorie CSS et on va pouvoir lui attribuer une nouvelle couleur. Donc là, ça sera femme. Donc

00:34:52 là, c'est vraiment le plus simple. Maintenant, si on regarde un petit peu ce que ça rend catégorie. Donc là, on peut voir que c'est pas très très différent les couleurs, mais ça c'est le plus simple, c'est pour aller le plus vite. Après, si derrière on voudra mettre un fond d'une certaine couleur, on pourra le faire mais ça va nous demander un petit peu plus de temps parce qu'il va falloir qu'on modifie un autre paramètre qui sera le fond de l'icône. Donc pour changer le fond de l'icône, ici, on va devoir l'appeler SM.

00:35:17 Et le fond de l'icône, il est ici. Et donc pour changer le fond de l'icône, il faudra qu'on crée une nouvelle variable qui sera pourquoi pas la santé masculine, la couleur de la santé masculine de fois plus claire. Donc santé masculine, on peut dupliquer, on l'a copié du moins et on peut marquer color, on peut marquer TR pour transparent et après on peut marquer santé masculine. OK. Et pour la couleur, on va reprendre santé masculine là. Et si on veut, on peut mettre en 50 % de transparence. Pourquoi pas ? Ou

00:35:52 peut-être même encore moins. On peut peut-être mettre 30 % c'est cette couleur là. Donc si on veut pouvoir déplacer ça vers quelque chose de plus clair sans pour autant le rendre transparent, c'est cette valeur-là qui va falloir qu'on change. Donc au lieu de marquer 93 %, on pourrait peut-être marquer quelque chose comme 50 % ou peut-être même encore moins on pourrait peut-être marquer pourquoi pas 20 %. À ce moment-là, on serait sur quelque chose de beaucoup plus clair. Et là, on pourrait aller ici et on change le

00:36:20 background et on met SM. Voilà. Mais là, ça rendra pas c'est pas très joli. C'est pour ça que je vous conseille vraiment de de pas vous attarder sur les couleurs parce que le métier de designer, c'est un métier à temps plein. C'est pas mon fort honnêtement et ça prend beaucoup de temps à apprendre. Donc franchement, ce que je vous conseille c'est ne vous cassez pas la tête, mettez juste les icônes dans une couleur spécifique si vous avez plein de couleurs spécifiques. Sinon, vous pouvez tout laisser de la

00:36:44 même couleur. Ici, moi ce que ce que je vais faire, c'est que je vais ajouter à chaque fois voilà couple et sexualité, ça sera CS. Et sur CS couple bébé et enfant B E. Et voilà. Maintenant, pour changer les icônes, ici on est sur des icônes qui sont tout simplement du code. Donc si on veut changer ces icônes avec un autre code, on peut aller trouver des icônes. Donc c'est des icônes assez simples, c'est des icônes SVG comme ceci. Et on peut tout de suite prendre ça. Et on tape icône librairie. Donc là, on a plein d'icônes.

00:37:39 Si par exemple, on veut prendre une icône, par exemple pour les hommes, on peut faire copie HTML. On revient ici. Santé masculine. On double- clique, on colle, on save et close. Et là, voilà, on a notre icône. Maintenant là, on peut le voir, elle est pas affichée parfaitement bien. Pour ça que moi ce que je fais en règle générale, c'est que je prends des icônes sur flat icône. Donc là, je vous montre vraiment toutes les manières possibles de le faire. Là, je taperai home, je prendrai cette icône

00:38:07 là. Et c'est ici que je viendrai changer la couleur. Ce qui peut être aussi plus simple si vous voulez vraiment personnaliser vos icônes. Donc on fait icône, on se connecte et là on peut coller notre couleur. Ensuite une fois qu'on a téléchargé notre icône, on peut venir ajouter une image. On remplace l'image et on importe la nouvelle. Très bien. On va venir reprendre l'ancien nom de l'icône pour qu'elle soit la même taille et on colle l'ancien nom CSS. Et voilà. Et là du coup, on a notre icône

00:38:33 qui ne changera pas parce que ça c'est une image, c'est pas du coup une icône dynamique comme on a pu avoir ici. Donc si vous trouvez des icônes dynamiques qui sont bien pour vous, vous pouvez utiliser la première méthode que je vous ai montré. La deuxième méthode du coup, ça va être d'utiliser flat icône. Et dans ce projet-là, je vais aller sur flat icô parce que ça sera beaucoup plus simple pour maintenir des icônes qui sont belles entre elles et qui n'ont pas de problème d'affichage comme on a pu le

00:38:55 voir avec certaines librairies qui pouvaient avoir des problèmes. Donc maintenant ce que je vais faire c'est que je vais euh finaliser ce que je viens de vous montrer. Donc changer les couleurs. Par exemple, la couleur ici du titre. J'ai envie que tous les titres aient la même couleur. Donc je vais pouvoir le sélectionner ici. Et une fois que j'aurais sélectionné tous les éléments avec les couleurs que je voudrais, on pourra passer à la prochaine étape qui sera de personnaliser la page d'accueil et de

00:39:21 créer les prochaines pages. Yeah.

‍