Bonjour, c’est Pascal. Bienvenue dans cette vidéo pour animer la communauté Fastlane. Aujourd’hui j’ouvre le bal et je vais vous parler de HTML et CSS.
Pourquoi je vous en parle ?
Parce que très souvent, je vois que les personnes se limitent, elles entendent les lettres HTML, CSS, tout de suite ça se coupe, plus personne n’essaie de comprendre.
C’est dommage parce que ces deux langages sont la base du Webdesign et les maîtriser ne serait-ce qu’un tout petit peu vous apporterait énormément.
Pour reprendre mon exemple, il y a un an, je n’y connaissais absolument rien en HTML, je découvrais tout juste des premières notions de CSS pour par exemple changer la couleur d’un bouton, des choses comme ça, je n’y connaissais encore rien.
Aujourd’hui, sans me considérer comme un expert, au fur et à mesure, j’ai un petit peu bidouillé, j’ai appris des choses et de plus en plus je me suis rendu compte que c’est tout simple.
C’est une petite vidéo ouverture d’esprit.
Au final, pour moi, le HTML, le CSS, ce n’est que de l’anglais avec une syntaxe particulière.
Si vous maîtrisez un tant soit peu l’anglais, avec le Dropshipping comme il y a quand même pas mal de termes en anglais aussi en l’e-Commerce, je pense qu’il n’y a rien d’insurmontable, le thème Fastlane est aussi créé en anglais pour vous faciliter la tâche.
Je vais vous montrer des petits exemples.
Ajouter du CSS personnalisé dans Fastlane
Vous le savez, Ulrich a créé directement dans Fastlane une section pour ajouter votre CSS personnalisé.
Pourquoi il a fait ça ? C’est parce que vous pourriez intégrer votre code directement, en faisant Edit Code, vous pourriez le placer à la suite de theme.liquid.
Le problème, c’est qu’à chaque mise à jour Fastlane, vous perdez toutes vos modifications.
Vous allez dans General > Custom CSS.
Ici, c’est le CSS personnalisé et tout ce que vous écrivez sera conservé par la suite. Moi, j’en ai un petit peu.
Aussi comment vous organisez, puisque là vous avez déjà pas mal de codes à la louche, on ne voit pas forcément à quoi ça ressemble.
Qu’est-ce que je fais ? En gros, j’ai un document Word avec les différentes sections : Page d’accueil, le Header, le Footer, la Collection List, c’est la liste des collections, Collection Page ou la page de collection pour les pages.
Des logiciels spécialisés dans la rédaction de code
Petit à petit, j’écris mon code.
Je mets un petit texte de dénomination à chaque fois et j’écris le code.
Après, je n’ai plus qu’à l’insérer ici.
Vous pouvez faire une autre méthode un peu plus professionnelle, parce que Word n’est pas vraiment fait pour écrire du code, vous pouvez utiliser le logiciel Notepad ++.
L’intérêt de ce logiciel, c’est que vous pouvez sélectionner les langages que vous voulez.
Ici, j’ai mis CSS, mais aussi HTML si vous souhaitez l’activer.
Après, le code est là.
Ce qui est très intéressant, c’est qu’il affiche un code couleur qui rend la lisibilité beaucoup plus simple.
La syntaxe du CSS
Comment on lit le CSS ?
C’est très simple. Ici, qu’est-ce que j’ai écrit ? Vous avez le Selector, c’est la fonction sur laquelle vous allez effectuer une action.
Ici, c’est un titre H3, un titre de niveau 3 pour le Header Cart. Ça doit être celui-ci. Votre panier est vide.
Attributs et valeurs
Sur celui-ci, la Color, c’est la couleur, là on reconnaît bien.
Là, j’ai mis un format hexadécimal, cela correspond à un léger gris.
Ensuite, pour les novices, vous pouvez par exemple, si des fois vous voulez un petit peu forcer le truc, parce que des fois il peut y avoir des conflits avec le code de Fastlane, vous pouvez rajouter un « !important ».
Cela permet de forcer le passage si jamais il peut y avoir une résistance.
Ensuite, à la fin de chaque ligne de code, vous avez écrit un attribut et la valeur correspondante, vous devez finir par un point-virgule.
Pour finir, vous avez une ouverture et une fermeture de chevaux, je crois que ça s’appelle, pour délimiter le code.
Au final, vous avez ça pour chaque élément.
Le Font-Weight, c’est le poids de la police, s’il est en gras ou normal.
Là, j’ai mis normal. Font-Family, c’est votre police. Le thème Fastlane, par défaut, en Montserrat, c’est exactement ce que j’ai repris ici.
Border-radius, c’est le rayon des boutons pour votre élément auquel j’ai mis 3 pixels.
Au final, à chaque fois, je mets un attribut, une valeur, point-virgule, un attribut, une valeur, point-virgule.
Je mets aussi un petit alinéa pour bien délimiter que ça appartient à cet élément-là.
Tout est clairement lisible.
Après, vous pouvez enchaîner à la suite les éléments que vous voulez.
Bien sûr, ça m’est un petit peu difficile de vous donner des éléments, puisque je ne sais pas quel est votre besoin.
L’avantage du CSS, c’est qu’il permet de faire des choses absolument illimitées adaptées au besoin de chacun.
Là, je ne peux pas vous dire ce que vous, vous avez besoin.
Peut-être un jour, vous irez sur votre site où vous verrez ce que l’utilisateur, comment il visite et vous lui direz : « Je n’aime pas trop comment tel élément est positionné et j’aimerais changer ça ».
Par exemple, j’ai eu une demande sur le service client, il trouvait qu’entre les avis et le titre c’était un petit peu trop serré.
Comment vous faites pour résoudre ça ? Vous avez ce cas-là, vous ne savez pas comment écrire le code.
Comment inspecter le code source d’un site web
Vous faites un clic droit, Inspecter.
Ça va ouvrir la fenêtre avec le code qui s’affiche comme ça, mais vous ne voyez pas quand vous êtes en navigation normale.
Là, vous êtes déjà dessus puisque vous avez cliqué droit pile poil sur le titre.
Vous voyez qu’il s’affiche ici.
Admettons que vous aviez cliqué par exemple ici.
Vous avez sélectionné le mauvais élément, vous êtes trop large.
Vous pouvez appuyer sur le petit curseur ici et bien sélectionner votre élément.
Ici par exemple, je pourrais même prendre ça, Price.
Ici, plus vous vous décalez vers la gauche, plus vous accédez à un élément plus général, à un élément plus gros.
Pour moi, toute la difficulté du CSS est de trouver le bon élément.
Si vous prenez un élément trop large, vous risquez d’avoir des interférences par la suite.
Si vous prenez l’élément souvent le plus à droite, en général vous êtes tranquille, vous avez un élément qui est très précis.
Là, dans mon exemple, cet élément span#Product Price, c’est le prix.
Price, ça concerne à la fois le prix et le prix de comparaison.
On est un petit plus général.
Et si par exemple, vous vous voulez ajouter votre fameuse marge, vous avez votre marge qui est déjà ici, puisque je l’ai modifiée, mais si je décoche la case, il ne le prend plus en compte et immédiatement, il y a un changement qui s’opère.
Ce n’est plus pareil.
Par exemple, admettons que je veux juste mettre une marge en haut, ça s’écrit margin-top et là je vais mettre par exemple 10 pixels.
Là, il y a une marge qui s’est ajoutée.
Si je mets par exemple 15 pixels, petit à petit ça se décale.
Je peux jouer avec les chiffres selon la valeur que je veux et dès que j’ai une valeur qui me convient, je la laisse.
Au final, comment vous prenez le code ? Vous sélectionnez, vous l’écrivez soit dans votre Word, soit dans votre HTML, soit ici.
Comme je viens de modifier la marge du haut, j’ai juste à relever le reste du code parce que c’est du code par défaut.
Là, cet élément, vous pouvez directement le coller ici. Il s’appliquera évidemment sur votre admin de Tout Chapinou ici.
Conclusion
J’espère que cette vidéo a été claire.
Vous voyez qu’au final vous pouvez absolument tout faire dès que vous savez comment chercher le bon élément.
Il suffit d’inspecter et après de sélectionner le bon élément.
Finalement, c’est votre imagination qui permettra de choisir les bons éléments.
Vous pouvez ajouter des marges, changer la couleur du texte, ajouter du gras, le délimiter dans des zones particulières avec du HTML.
Vous pouvez par exemple faire des tableurs comme celui-ci. Les possibilités sont énormes.
Après, il ne faut pas non plus chercher à optimiser tout et n’importe quoi à vouloir décaler de 2 pixels cet élément, de 3 pixels cet élément, puisqu’il y en a des centaines et vous allez y passer un temps fou.
En tout cas, s’il y a vraiment un petit élément qui vous gêne et que vous aimeriez ajouter une touche personnelle, vous pouvez évidemment le faire.
Je vous renvoie aussi notamment au tutoriel qu’avait réalisé Ulrich pour par exemple ajouter des délimitations dans le Footer.
Je ne mets malheureusement d’exemple, mais c’est dans ces trois dernières vidéos.
Vous pouvez faire un tour et mieux comprendre comment on gère le CSS.
J’espère que cette vidéo vous aura été utile.
Sur ce, je vous dis à bientôt, bon courage sur vos shops.
S’il y a une demande pour en savoir plus sur le HTML et le CSS, je serai ravi de vous faire une prochaine vidéo.
Sur ce, je vous dis à bientôt.
Recherches utilisées pour trouver cet article :
- Notions De Css
