Aujourd’hui, nous allons parler de CSS.
En effet, je vais reprendre les premières vidéos de ma chaîne que j’avais fait il y a maintenant presque 8-9 mois.
J’ai envie de la faire par rapport au changement de micro qui avait été fait depuis, mais aussi je vais faire les choses de manière bien plus claire que ce que je le faisais à mes débuts, parce que je vois qu’il y a encore des questions, je vais aller le plus au bout des choses par rapport à ça.
Étude de cas : Réduire l’espacement entre 2 Sections
Notamment, sur le groupe Facebook, j’ai vu Nadège, tu avais posé une question sur comment réduire l’espace entre 2 sections « Featured Product Grid ».
Je vais m’inspirer de ce problème pour faire une étude de cas toute simple.
Je vais en profiter pour vous réexpliquer le CSS.
Pour reproduire le cas dans lequel on est, on va créer 2 Featured Product Grid.
Ici, à la suite de ma page d’accueil Tout Chapinou, j’ai créé une collection fictive sur laquelle j’ai plusieurs produits tests.
Comme tu vois, j’ai mis deux boutons.
Il y avait une question comme quoi est-ce qu’on pouvait diminuer ces éléments ?
Petite remarque en passant, je pense que ça ne sert pas à grand-chose de s’occuper de petits détails comme ça.
Les espaces ont été gérés pour être plutôt bien fichus pour s’adapter au maximum de résolution.
C’est le petit message du jour.
Le CSS est très bien, mais ne cherchez spécialement à chercher la petite bête à chaque fois parce que c’est le petit travers qu’on peut avoir après.
Vous pouvez devenir un perfectionniste par rapport à ça.
Inspecter le code
Avec le CSS, vous allez faire une petite touche F12 pour inspecter.
Là, vous ne pouvez pas faire un clic droit sur Tout Chapinou.
C’est normal, j’ai l’application Lock Kit.
Si ça vous arrive, si vous êtes amené à vouloir revoir sur Tout Chapinou, mais que vous ne pouvez pas faire un clic droit, vous faites un F12, sinon clic droit, Inspecter.
On va repérer les bons éléments.
Vous voyez qu’en vert il y a les marges qui apparaissent, c’est-à-dire là le bleu est la taille qui est prise par l’élément.
On voit que ça comprend le titre de la collection, les cinq produits mis en avant et également les boutons, ça va jusqu’en bas.
Ensuite, il y a cette partie verte qui représente le padding, c’est juste ici.
Ça se met en vert lorsque je le survole et ça se remet encore en vert lorsque je suis sur le bon élément.
C’est sur ces paddings qu’on va pouvoir jouer.
Bien évidemment, comme là, ici, vous avez un featured product grid également, c’est construit exactement de la même manière.
Vous voyez qu’il y a 70 pixels en bas du premier et notamment 70 pixels en haut du second sur lequel on peut éventuellement jouer.
Il n’y a que 140 pixels entre les deux.
Si on diminue cela, il y a tout à fait moyen de diminuer l’espacement entre les deux.
Repérer et adapter votre code CSS
J’en profite pour faire un petit rappel très clair sur le CSS.
Je suis sur un élément là en particulier, je vois du CSS qui apparaît, ça c’est du CSS. Le CSS, c’est ça, c’est-à-dire il y a un sélecteur qui a un certain nom.
Par exemple, quand c’est un « a », ça désigne un lien.
Là, ensuite, vous avez un petit, en anglais, on appelle ça un bracket, sinon en français, on dit un crochet.
On ne le distingue pas des autres formes de crochet possibles.
C’est ça qui te permet de démarrer la déclaration de votre bloc, ça permet d’ouvrir un bloc.
Là, ensuite, vous fermez un bloc.
Ici, il y a un bloc qui est ouvert, qui est fermé.
Là, ensuite, vous ne le voyez peut-être pas très bien à cause des petits checks, mais si je le copie-colle sur un fichier texte vierge, je vais faire un petit bloc-notes, il y a indentation qui se met en place. L’indentation est complètement facultative, mais pour un souci de lisibilité, vous avez une indentation qui permet de mieux visualiser les éléments qui sont à l’intérieur du bloc.
Ensuite, ici, vous avez les propriétés. C’est tout ce qui va permettre de définir du CSS à votre élément, là notamment la couleur.
Ensuite, vous avez la valeur de cette propriété.
Ici, la couleur, en CSS, se gère de manière hexadécimale.
Hexadécimale veut dire, ce n’est pas un système avec des puissances de 10 comme on l’utilise de manière générale, c’est un système qui va de 0 à 15 et pas de 0 à 9.
A la place des valeurs 10, 11, 12, 13, 14, 15, il y a des lettres a, b, c, d, e, f.
Ici, on est sur la valeur maximale, parce qu’il n’y a que des f et c’est la couleur blanche, le blanc le plus pur possible en opposition par exemple avec le 0.
Il y a six chiffres hexadécimaux sur la couleur, parce que les deux premiers c’est la couleur rouge, les deux seconds c’est la couleur verte ; ensuite c’est la couleur bleue.
S’ils sont tous à leurs valeurs maximums, ça fait du blanc ; s’ils sont tous à leurs valeurs minimums, ça fait du noir.
Si vous aviez ff0000, c’est du rouge, 00ff00 c’est du vert, 0000ff c’est du bleu.
Vous pouvez le voir notamment sur cet URL : HTML Color Codes, que j’adore.
Là, tout simplement ffffff, je le fais six fois. Vous voyez que c’est du blanc.
Si je redescends tout en bas, c’est du noir. Là, rouge, vert, bleu.
Si je fais 255, j’obtiens bien le code.
Les valeurs ici vont de 0 à 255 et l’équivalent hexadécimal c’est comme ça.
Si je refais 0, là je mets 255, j’ai le vert.
Là, si je fais avec le bleu, j’ai le bleu.
C’est comme ça que ça marche.
Après, vous avez d’autres systèmes H, S, L, C, M, Y. CMY, c’est notamment pour l’impression papier, Cyan, Magenta, Yellow, c’est un autre système.
L’avantage avec le hexadécimal, c’est que c’est propre à n’importe quelle valeur et vous avez les équivalents suivant ce dont vous avez besoin.
Le RGB est très utilisé pour le web, le CMY c’est plus pour l’impression.
C’était un exemple avec le CSS, mais là notamment dans notre exemple, on voit en plus directement les valeurs du padding.
Le padding qui est haut s’appelle le padding top et le padding qui est en bas s’appelle le padding bottom. Là, c’est 70.
Il y avait un autre moyen de l’écrire.
Je vais vous montrer ça tout de suite. C’est-à-dire si vous désactivez les lignes ici, vous voyez que c’est barré.
Il y a un autre moyen de l’écrire, c’est d’écrire padding.
Si j’écris juste par exemple 30 pixels, comme je n’ai pas désigné top, bottom, l’ordinateur va comprendre que c’est 30 pixels partout.
Vous voyez, il y a 30 pixels en haut, en bas, à gauche, à droite.
Vous pouvez aussi le faire juste en deux fois, c’est-à-dire vous pouvez écrire 30 pixels, 0 pixels.
La première valeur sera haut et bas et la deuxième valeur sera gauche et droite.
Ici, j’ai mis 30 et 0, on retrouve la structure de tout à l’heure.
La structure de tout à l’heure était avec 70 – 0.
C’est une autre manière que vous avez d’écrire avec cette ligne les deux précédentes lignes qu’il y avait là.
Je la préfère, parce que si vous avez des valeurs en commun, cela permet d’écrire plus facilement, cela permet d’écrire en une ligne ce que vous avez en deux, mais bien sûr vous ne pouvez pas différencier les deux valeurs ici.
La question était de réduire les éléments.
Il y a différentes façons de faire.
Trouver le bon sélecteur
La plus grosse difficulté en CSS est de bien comprendre sur quel sélecteur vous mettez votre code, parce que si vous ne sélectionnez pas le bon élément et que vous vous sélectionnez un élément qui est trop généraliste, ce changement ne va pas seulement s’effectuer aux 2 Featured Product Grid, mais il va s’effectuer à d’autres éléments et ce n’est pas ce que vous voulez.
Pour moi, la problématique du CSS, l’unique difficulté, c’est de trouver le bon sélecteur.
Une fois que vous l’avez, vous avez fait 95 % du boulot, parce qu’après vous n’avez plus qu’à ajouter vos deux blocs, vous mettez la propriété, vous mettez les deux points, vous mettez votre valeur, vous mettez un point-virgule et basta.
C’est la syntaxe du CSS, c’est juste ces petits brackets là, les deux points, le point-virgule et le reste c’est de l’anglais ou de l’hexadécimal pour les couleurs.
Là, vous voyez, 70 pixels, 70 px espace 0 px.
Il n’y a rien de très compliqué avec le CSS si ce n’est la définition du sélecteur.
Par défaut, il en prend un qui s’appelle là, ici, Section Wrap Block Title Contain.
Mais ici, là, si je suis à gauche, quand je repasse au survol, l’élément qui s’affiche ici n’est pas exactement le même, c’est #featuredProductGrid.hasGrid.fxInElement.
C’est un cas qui peut arriver parfois et qui n’est pas spécialement clair, c’est qu’entre l’élément que vous avez noté ici et l’élément qui est au survol, ce n’est pas exactement le même.
C’est là où il faut faire attention.
Notamment, un moyen de faire attention, c’est juste de prendre l’élément qui vous est proposé par défaut et de voir à travers le site web si ça concerne juste les éléments que vous voulez ou s’il y en a d’autres.
On va scroller un peu, on va voir s’il apparaît ailleurs. Manifestement, non, ça n’a pas l’air d’être le cas.
On voit qu’il est seulement surligné sur les Featured Product Grid, ça a l’air nickel.
On peut éventuellement se permettre de faire ça.
Par contre, si j’avais pris Section Wrap, on voit que l’élément est trop général, parce que le Section Wrap s’active sur les product review.
Si j’avais appliqué cette ligne ici, cet élément aurait été impacté et vous ne le voulez pas là dans le cadre de notre exemple.
Vous voyez que le one product one page aurait été impacté aussi.
Ce sont des choses comme ça où il faut faire attention.
Le body impacte tout. Le body, c’est le corps, vous retrouvez tous les éléments dedans.
C’est normal qu’il se retrouve tout en bas.
Plus vous allez en bas, plus vous avez quelque chose de généraliste.
Vous pouvez aussi gérer les trois petits points.
Plus vous allez vers la gauche, plus vous avez des éléments généralistes et plus vous allez à droite, plus vous avez des éléments plus spécifiques par rapport à ce que vous avez désigné.
En tout cas, dans notre exemple, j’ai ça, je pourrais tout à fait prendre la ligne-là qui fait beaucoup d’espace, mais je vais me préoccuper de ça. Je vais copier-coller ici dans un bloc texte, le même que tout à l’heure.
Comme j’ai barré les deux premières lignes, il me les met en commentaires.
Quand il met en commentaire, il met le slash puis une petite étoile.
Ensuite, pour fermer le commentaire, il met dans le sens inverse, il met l’étoile puis le slash. Comme ça cet élément est en commentaire, cet élément est en commentaire.
Si je l’enlève, c’est pris en compte.
Quand c’est en commentaire, vous pouvez l’enlever, il n’y a pas de problème.
Encore une fois, l’écrire comme ça ou comme ça, c’est exactement pareil.
Je veux bien que ce soit clair. C’est pour vous donner des moyens de l’écrire.
Pour l’instant, on n’a pas écrit du CSS personnalisé, puisque là on a juste copier-coller du code qui existait déjà.
Pour l’instant, on n’a absolument rien fait.
Si on est amené à changer les valeurs, c’est là que ça devient du CSS personnalisé.
Insérer votre code sur le site
Par contre, si je change sur mon bloc-notes la valeur ici, 50 pixels, et que je sauvegarde mon texte dans les documents, je l’appelle bloc.txt, ça n’aura rien fait, c’est-à-dire c’est sur mon PC, mais ce n’est pas sur le site web.
Il faut absolument que je puisse intégrer ce réglage quelque part sur le site.
Vous pourriez aller dans le code et vous embêter, mais Fastlane gère ça très bien, c’est-à-dire vous allez dans la section General et là vous avez une partie qui s’appelle Custom CSS.
C’est le CSS personnalisé qui est votre CSS à vous que vous souhaitez apporter une petite modification au CSS qui est déjà présent dans le thème.
Pour rappel, Fastlane c’est du CSS et surtout un affichage par rapport au contenu de votre boutique Shopify.
Le contenu est souvent géré avec le HTML et le design est souvent géré avec le CSS. Fastlane, c’est majoritairement du CSS.
Dans le Custom CSS, j’ai beaucoup d’éléments, j’aime bien bidouiller, mais ce n’est pas le sujet du jour de voir tout ce que j’ai fait.
Si je veux modifier la valeur là, j’ai mis 50 pixels, je prends cet élément, je fais un copier-coller et je vais l’intégrer tout au-dessus pour ne pas embêter.
Vous n’avez rien, admettons que vous avez ça, vous copiez-collez juste ici, vous pouvez fermer juste ici et là on va voir, en live, que ça diminuer l’espacement.
On l’a vu, il y a eu un petit espacement qui s’est enlevé.
Si je refais un F12 pour être sûr, vous re-sélectionnez l’élément et vous n’avez plus que 50 pixels.
À partir de là, si vous sauvegardez, ça va être pris en compte et il n’y a plus besoin de passer par derrière.
Votre réglage est correctement sauvegardé.
Vous pouvez même mettre 0 pixel, vous allez voir que ça va beaucoup diminuer.
Le bouton va toucher le titre ici. Obtenir un espacement, ça va être directement à la suite.
C’est très pratique en plus. L’éditeur nous montre en live les changements.
Vous vous mettez comme ça en vue PC, vous pouvez vous mettre en vue mobile comme ça et vous voyez directement les réglages.
Petite aparté sur l’éditeur en live : C’est très pratique ces éditeurs qui vous permettent de voir tout ça.
Ça s’appelle WYSIWYG : What You See Is What You Get, c’est-à-dire vous faites une modification dans l’interface et vous voyez directement en live ce que ça donne.
Par contre, des fois, il y a des petits bugs sur les éditeurs.
Très souvent, dans le groupe, il y a des gens qui posent des questions mais qui n’ont pas vérifié sur le site en vrai si le réglage était opéré, parce que parfois ça arrive que cet éditeur ait des petits cafouillages et ne reproduise pas exactement bien tout ça.
Dans 95 % des cas, ça marche, mais des fois ça ne fait pas bien le boulot et il faut que vous vérifiiez.
Je vais vérifiez sur Tout Chapinou maintenant que j’ai sauvegardé ça dans l’éditeur.
Je fais un petit refresh, j’appuie sur la touche F5, je recharge le site web et je vais regarder si c’est bien enregistré et c’est bien comme je veux.
On peut même aller plus loin. Pour être sûr qu’il n’y ait pas de problème avec votre navigateur ou avec un plugin qui bloque quelque chose, vous allez en navigation privée, vous mettez votre site web et vous regardez si le réglage est correctement effectué.
En navigation privée, vous pouvez être sûr que c’est comme ça que votre prospect va voir votre site web.
Je suis parti sur un problème extrêmement basique, c’est-à-dire juste changer la valeur d’un espacement, j’ai juste fait ça.
J’ai changé les valeurs à la fois du padding d’en haut et à la fois du padding d’en bas.
Là, par exemple, si je reviens à la valeur 50, c’est-à-dire par rapport à la valeur 70, j’ai enlevé 20 pixels en haut et 20 pixels en bas sur chacun des éléments.
J’ai quand même enlevé 40 pixels entre les deux ici.
Il y a le padding bottom du premier élément et le padding top du second featured Product Grid qui va se soustraire.
Ensuite, vous pouvez tout à fait choisir de repartir sur l’autre écriture qui était plus comme ça et vous pouvez dire : « J’aimerais juste diminuer le padding top, mais je n’aimerais pas diminuer le padding bottom ».
Ça va faire quelque chose comme ça.
Le texte va surement se rapprocher très fortement de la fin de la section et là ensuite vous avez 70 ici.
L’espacement a été diminué, parce que si je refais un F12 encore une fois, il n’y a plus de bande verte en haut, puisqu’on a mis 0 et il y a une bande verte qui reste en bas.
Ça permet vraiment de voir les différents blocs.
C’est un bloc HTML et cela vous permet de voir avec le CSS comment on gère les espacements.
En tout cas, j’espère que ça répond à ta question.
Dès que je vois une question comme ça, c’est l’occasion de faire une vidéo.
En plus, ça faisait longtemps que je voulais refaire une vidéo sur le CSS.
Je suis parti sur quelque chose de complètement basique.
Je vous ai montré les couleurs hexadécimales.
Avec cet outil, ça se fait très bien.
Si vous ne savez même pas quelle valeur écrire, vous sélectionnez votre couleur, vous choisissez et vous avez votre couleur, vous la copiez-collez.
Je vous ai montré quelque chose de basique sur l’espacement et comment l’intégrer dans le CSS personnalisé. Custom veut dire personnaliser.
À partir de là, j’estime que vous êtes indépendant, vous pouvez faire tout ce que vous voulez.
La deuxième difficulté à part bien comprendre sur quel sélecteur le faire, c’est que vous ne savez pas tout, les noms en anglais.
Vous ne savez pas spécialement les propriétés même si elles sont vraiment très intuitives, mais je comprends qu’au début c’est plus complexe.
Pour aller plus loin : un module complet sur le CSS
Par rapport à ça, je vous fais une petite annonce.
Je suis en train de faire une étude de cas sur une boutique multiproduit que j’avais faite à l’époque, je vais vous la montrer.
Je l’avais faite en novembre-décembre, c’est en cours.
Le but est de faire une étude de cas webdesign, de montrer d’autres structures pour faire un site web.
En bonus, je veux que vous soyez indépendant.
Comme j’ai pas mal fait de CSS avec ce site web, je vous ferai une espèce de liste de tous les attributs, de toutes les propriétés possibles avec le CSS, plutôt de celles que j’utilise tout le temps et qui reviennent tout le temps et qui sont très simples à prendre en main.
Je suis en train de faire une petite ébauche.
Ça ressemblera à quelque chose comme ça, un petit peu comme je fais mes bonus d’habitude, un petit rappel sur le CSS, vous aurez la syntaxe.
Sur 10 lignes, vous avez les éléments principaux que j’utilise et qui reviennent 95 % du temps.
Si vous connaissez 10 propriétés, vous savez faire 75 % ou 80 % de ce que je sais faire.
Après, il y en a quelques-unes, c’est du CSS un peu plus complexe.
C’est effectivement intéressant de le savoir, mais cela reste pour des petits détails que vous utilisez une fois par-ci par-là.
Je joue le jeu, vous saurez faire tout ce que vous voulez.
C’est intéressant de voir que vous pouvez faire ça pour n’importe quelle section.
Ça, ici, je vais le recacher pour que ça n’empiète pas.
Sinon vous pouvez faire sur n’importe quelle section.
Vous pouvez le faire dans le Sales Sniper.
Vous pouvez personnaliser les applications.
Vous pouvez personnaliser vos boutons, par exemple le fait que le bouton change de couleur mais avec une espèce de fondu.
Un effet fondu, c’est aussi du CSS, c’est particulièrement intéressant.
Il y a plein de choses à faire.
Encore une fois, c’est moi qui refais des éloges à Fastlane, mais effectivement, dans Fastlane, vous avez quand même beaucoup de réglages qui permettent de vous éviter de passer par la case CSS.
Il y a une énorme évolution par rapport à ça.
En vrai, j’utilise le CSS de moins en moins, parce que j’ai les outils qu’il me faut avec ce qui est intégré.
J’ai diminué à peu près par deux ou par trois la quantité de codes que je mettais entre les débuts de Fastlane et ce que je fais aujourd’hui.
Conclusion
Pour finir cette vidéo, je vous remercie pour avoir suivi ça.
N’hésitez pas à poser des questions, d’interagir.
Là, par exemple, j’ai reçu une question aussi de Jérémie pas plus tard qu’aujourd’hui qui me demandait une nouvelle vidéo sur la header band, sur le petit texte défilant que je vous avais transmis en code à l’époque.
Je lui ai répondu que ce n’est effectivement pas à l’ordre du jour, l’animation qu’il me propose.
Par contre, je vais bientôt faire une vidéo sur les stratégies d’achat numéro 4 pour vous montrer ce qui a changé depuis la Progress Bar d’Ulrich Vallée.
Ce sera le sujet de la semaine prochaine.
N’hésitez pas à interagir.
En plus, Jérémie m’a remercié, ça fait toujours plaisir de recevoir ça de mon côté.
Je réponds, je prends le temps de répondre.
Là, j’ai fait une vidéo par rapport à l’une des problématiques de Nadège.
Plus vous interagissez soit en commentaires dans les vidéos, soit en écrivant à contact@pascaldegut.com, plus je joue le jeu et je vous donne le contenu.
Vous pouvez également interagir avec la newsletter.
Je joue le jeu, je vous donne un mail par jour, 6 jour sur 7 sauf le dimanche.
Après, vous avez tout ce que vous voulez.
Pour l’instant, je me suis surtout orienté sur un mail où je me recentre plus sur les compétences profondes, parce que, pour moi, plus vous avez les compétences profondes, je ne parle même pas d’e-commerce, je parle de compétence d’entrepreneur, de mindset, plus vous êtes ami avec ça, plus vous préoccuperez des choses importantes.
Vous comprenez que le CSS c’est effectivement très bien, c’est génial etc. mais ça ne vaut pas le coût des fois de passer un après-midi à chercher à comprendre telle ou telle chose.
C’est pour cela aussi que je fais des prestations web design, parce que je considère que le web design est quelque chose qui mérite d’être délégué.
Là, je m’adresse à des e-commerçants, vous avez mieux que ça à faire que de chercher à bidouiller un site web pendant des mois.
C’est pour cela que je vous donne tous les outils en main pour que vous soyez indépendant. Pour moi, recentrez-vous sur une belle offre à qui vous vous adressez, c’est comme ça que vous allez décoller et vivre de votre activité le plus rapidement possible.
C’est Pascal. Je vous laisse.
Je vous dis à la semaine prochaine.
Ciao !
