Header Band Dynamique avec Texte Défilant – Code Fourni

Bonjour !

C’est Pascal.

Bienvenue dans cette nouvelle vidéo.

J’espère que tu vas bien.

Aujourd’hui, je vais te montrer une fonctionnalité qu’il est possible de réaliser grâce à la mise à jour de Fastlane, c’est un Header Dynamique. 

Mise à Jour de Fastlane

Si tu te souviens, depuis cette mise à jour, il y a la possibilité pour le Header et le Footer de réaliser un texte différent si le texte est sur desktop ou sur mobile.

Petite aparté, c’était déjà en fait possible de l’effectuer avant que l’interface de Fastlane ne s’enrichisse, parce que ce label de texte est un label HTML, il suffit tout simplement d’insérer le code qu’il faut.

Tu peux tout à fait écrire du texte qui s’affiche uniquement pour ordinateur et uniquement pour mobile.

Tu écris le code avec les deux cas différents suivant la résolution de ton écran et tout simplement ça marchait déjà.

La fonctionnalité a été faite pour ceux qui s’y connaissent un petit peu moins pour avoir moins bidouillé.

Donc maintenant, tu as la possibilité, d’avoir un texte pour mobile qui peut être plus court.

Code Javascript pour un Texte Défilant

En fait, ce que je vais te montrer, c’est que j’ai bidouillé un petit bout de code qui permet d’afficher un texte coulissant qui va défiler de gauche à droite.

Et ça permet non seulement de mettre un texte plus long mais en plus de ça il y a vraiment de quoi faire, tu peux mettre un texte encore plus long que ce qui contiendrait toute la Header Band.

Là, il défile.

Tu peux gérer la couleur du background.

Je l’avais fait sur un autre shop, c’est pour ça que ça s’affiche un petit peu mal au niveau de la couleur.

Je peux changer ça tout de suite.

Après, tu peux aussi gérer la largeur dans laquelle ça s’affiche.

Moi, j’aime bien comme ça.

Je trouve que c’est pas mal, parce que si ça s’étale sur toute la largeur, c’est peut-être un petit peu too much.

Après, il y a un texte qui distrait un peu trop, alors que là ça s’affiche plutôt bien.

Je trouve que c’est un affichage qui est sympathique.

Dans ce cas-là, là par exemple, je mets un code promo pour la première commande avec le code Bienvenue, une livraisonsuivieofferte.

Et par exemple, je mets les 5000 clients satisfaits.

En général, c’est un texte que, je pense, tu as vu souvent dans la Footer Band.

Donc là, si tu le mets avec cette méthode-là, tu enlèves la Footer Band.

Par exemple, la Footer Band, j’utilise une application pour afficher les cookies.

Sur la Footer Band, ce que j’ai remarqué, c’est que les personnes, souvent, ne cliquaient pas sur le bouton et en fait la barre de cookies restait toujours affichée, d’où le texte qui était sous la Footer Band ne s’affichait jamais.

Donc, c’est une manière d’afficher plus d’informations dans le Header Band.

C’est sûr que comme c’est coulissant, les personnes le visualiseront, ça va attirer leur attention.

Et pour autant, ils ne vont pas rester attachées là-dessus très longtemps, puisque dès la première fois ils vont arrêter de le lire.

Comme ça ne s’affiche pas sur toute la largeur, ce n’est pas non plus trop gênant.

Et bien sûr là, sur mobile, on a toujours le Mobile text, donc là c’est un texte complètement fixe.

Je vais te montrer le code.

Alors, c’est quelque chose que j’ai trouvé.

Honnêtement, je ne suis pas un grand bidouilleur, je suis parti sur un script de base. 

Il y a un an, je n’y connaissais absolument rien.

Depuis un an, j’ai dû faire quatre-cinq intégrations de code comme ça et j’ai un petit peu bidouillé, mais ce n’est vraiment pas mon expertise.

Je préfère préciser.

Détail du Code

Ici, j’ai utilisé un code qui s’appelle Marquee.

Marquee, c’est un code qui, potentiellement, deviendra obsolète dans le futur, c’est un code qui est assez vieux.

Si tu voulais faire un site web dans les règles de l’art, ça veut dire être libellé W3C, si je ne me trompe pas, ce n’est pas une bonne pratique.

Après, c’est quelque chose que j’ai trouvé au mieux, c’est le meilleur code sur lequel je suis tombé pour l’instant, donc c’est celui que je te fournis.

Là, j’ai essayé un deuxième essai ici avec des animations CSS.

Mais pour l’instant, je n’ai pas eu quelque chose de satisfaisant.

En gros, la barre défilait avant que le texte soit complètement défilé, il se réinitialisait, ce n’était pas très joli.

En plus de ça, le texte n’était pas coulissant, c’est-à-dire il affichait un mot par un mot. 

En fait, je fais cette vidéo aussi pour être dans l’échange.

Donc, je vais te donner ce code.

Il te suffira d’aller sur ma page Facebook, que j’ai créée pour l’occasion, et d’écrire le mot “Header”, et tout simplement tu vas recevoir ce fichier avec les deux codes.

Si jamais quelqu’un bidouille ensuite le deuxième code et dit : “J’ai trouvé quelque chose qui s’affiche bien”, qu’il le transmette dans les commentaires et ça bénéficiera à toute la communauté.

C’est aussi le but de cet échange.

En tout cas, pour l’instant, cette partie marche très bien.

Marquee, comment ça fonctionne ?

• Behavior=”scroll”, ça veut dire ça va coulisser de manière homogène.

• Direction=”left” : tu peux mettre dans l’autre direction si tu le souhaites, mais là il n’y a pas vraiment de raison.

• Scroll amount : c’est la vitesse de défilement, tu peux mettre trois ou quatre si tu préfères être un peu plus long, six ou sept si tu préfères aller un peu plus rapidement.

• Scroll delay : Là, je crois que c’est en milliseconde, donc c’est un temps très court.

• Onmouseover=”this.stop()” : c’est-à-dire si je pointe la souris dessus, stop, le code s’arrête.

Cela peut être très intéressant par exemple s’il te vient à l’idée d’ajouter un lien, par exemple « Livraison Suivie Offerte », tu mets un lien vers la page qui explique pourquoi la livraison est offerte.

Du coup les personnes, quand elles voudraient cliquer, elles ne vont pas devoir suivre le code coulissant, le code s’arrête.

Donc, ça peut être intéressant.

Si tu ne le veux pas, il suffit de supprimer ça.

• Onmouseover=”this.start()” : ça veut dire dès que tu quittes la partie, ça continue à défiler.

• bgcolor : et là j’ai un code hexadécimal.

Alors là, le code hexadécimal, c’est cette couleur bleue qui est un petit peu moche et qui te gêne.

Je peux remplacer par le gris anthracite qui est ma couleur.

Pour retrouver ça, donc c’est évidemment la Header Band, tu reprends la couleur qui est ici, donc là 4545, je l’ajoute ici, et là ça marche nickel.

Je ne vais pas m’embêter à le réinjecter, mais tu as compris l’exemple.

C’est tout.

Sinon, si tu veux modifier la largeur là ici, tu modifies là.

Tu peux mettre 1000 pixels, 1300 pixels, si tu préfères.

Et là, tout simplement, tu changes le texte si tu préfères mettre autre chose.

Là, les espèces d’interlignes que j’ai mis, c’est pour délimiter.

Mais ce caractère-là désigne un espace en HTML, c’est pour mettre plusieurs espaces à la suite, donc ça peut te servir dans beaucoup de cas.

En tout cas, j’ai mis deux espaces, ensuite j’ai mis ce petit point et j’ai remis deux espaces.

Ça se traduit ici par ça.

Comment obtenir ce code ?

J’ai créé une page pour l’occasion liée à ma prestation, à mon coaching personnalisé sur Fastlane et Kolt.

Si tu veux accéder au messenger, il te suffit de prendre l’identifiant qui est pascal.fastlane et tu écris m.me.pascal/fastlane et que ça arrive sur la page, et là tu vas écrire le mot-clé-là qui est “Header“.

Donc, j’ai fait le test en amont, ça fonctionne bien.

Tu écris “Header” et là tout simplement il y a une réponse qui va arriver et qui donne le code.

Tu vas sur un lien dropbox qui va te donner le code.

Là, tu as un preview puisque c’est en format HTML, le code s’affiche de lui-même, tu ne fais pas attention à ça.

Tu fais “Plus”, tu fais “Télécharger” et tu as le code. 

Voilà, comme promis.

J’utilise le logiciel Notepad++. 

Je trouve que c’est beaucoup plus simple, tu as des couleurs…

Si tu ne t’y connais pas trop, il y a directement un affichage qui t’aide.

Si jamais tu n’as pas ce logiciel, même si je te conseille encore une fois de l’installer, tu l’ouvriras avec bloc note, et là tu as exactement le code.

Encore une fois, il te suffit de copier-coller ça.

Je te conseille vraiment, encore une fois, d’installer Notepad++, ça ne peut que t’être favorable.

C’est une des multitudes possibilités qu’il y a avec tous ces champs HTML, tu peux faire tellement de choses, c’est vraiment illimité.

Donc, j’avais vu ça sur plusieurs boutiques et je me suis dit : “Pourquoi pas essayer”.

Bien sûr, pour mon site d’infopreneur, c’est une stratégie qui n’est pas bien adaptée.

Mais tu prends des sites où tu peux avoir potentiellement beaucoup d’informations à donner, ça peut être intéressant.

Tu peux, bien sûr, customiser le texte comme il te plaît, la largeur, la couleur etc.

En tout cas, j’espère que cette vidéo t’aura plu.

N’hésite pas à laisser un commentaire si tu souhaites avoir d’autres astuces comme celle-ci.

Et sur ce, je te souhaite une bonne journée et à bientôt.

À la semaine prochaine pour une nouvelle vidéo.  

Salut !