Vivez la vie que vous méritez et apportez de la valeur au monde grâce au e-commerce

Vidéo de présentation du module Fading background

Ce module va vous permettre d’afficher plusieurs fonds d’écrans enchainés sur votre boutique en ligne Prestashop.

 

Afficher/masquer la transcription texte

Bonjour, nous allons voir aujourd’hui comment utiliser le module « opart fading background ».

Dans un premier temps, on va l’installer. Il suffit de cliquer sur « ajouter un module », d’aller chercher l’archive zip et de faire « mettre ce module en ligne ». Une fois que c’est fait, vous cliquez sur le bouton « installer » et votre module est installé. On va donc le configurer. Vous avez une première partie ici, qui correspond aux réglages du background en lui même et ici les différentes photos que vous pouvez rajouter à votre background. Donc la durée de l’animation c’est le temps que va durer l’animation pour afficher une image. Durée d’affichage de l’image, comme son nom l’indique c’est le temps que l’image va rester affichée. La durée d’animation de la description, ça c’est si vous ajoutez une description elle va apparaitre sur la droite avec un effet de slide. Celui là va durer 2000 millisecondes donc 2 secondes. Vous pouvez inclure ou pas une grille, ça peut parfois donner un effet assez sympa sur certain background et la durée avant le départ, c’est un nombre de millisecondes qui va correspondre au temps avant que l’image apparaisse une fois que votre page sera chargée.

Donc une fois que vous avez fait tous ces réglages, vous pouvez sauvegarder et si vous ne voulez pas y revenir pour ne pas que cette partie vous dérange à chaque fois que vous allez gérer vos images, vous pouvez cliquer ici pour le masquer. Pour cette vidéo, je vais plutôt modifier la durée avant le départ, pour éviter qu’on ait à attendre entre chaque background sinon pour la vidéo ça va du coup être beaucoup plus long. Donc là, j’ai réglé mon background et je peux ajouter mes images. Donc l’idée ça va être de donner une ambiance à notre site et pour ça on va utiliser des images type donc par exemple là on va prendre une image qui va rappeler l’ambiance de la mer, un peu vacance etc. Je m’occupe simplement du nom et du fichier image pour les autres champs, j’en parlerai dans la suite de la vidéo. Donc j’ajoute mon image, on voit qu’elle apparait ici. Ensuite je vais sur la page d’accueil de mon site, je rafraichi la page et on voit que mon image apparait. Ca donne tout de suite une ambiance différente au site. Donc on peut modifier l’image pour par exemple donner une ambiance différente. Donc là, j’ai pris une image de forêt. Je rafraichi à nouveau la page d’accueil et voilà. On peut évidemment faire ça, autant qu’on veut. Ce qui est intéressant, c’est qu’on peut mettre plusieurs images. Par exemple, là en premier j’ai une image de forêt, et je vais ajouter une image avec des chaussures. Si vous êtes par exemple, une boutique de vente de chaussures, ça peut être intéressant d’avoir des fonds qui vont rappeler cette thématique. J’ai ajouté mon image, donc en premier lieu, j’ai l’image de la forêt qui apparait qui va donc rester 5 secondes comme je l’ai réglé dans mon diaporama et en seconde j’ai l’image avec les chaussures qui donnent là aussi encore un aspect intéressant au site. On peut modifier l’ordre des images. Donc par exemple, je vais la passer en deuxième et celle là en premier. Je rafraichi mon site, et donc c’est bien les chaussures qui passent en première et la forêt qui apparait en second. Alors l’ambiance du site, vous pouvez aussi la gérer à l’aide d’images de type « texture ». Ca va pas être des images qui vont représentées forcement quelque chose de précis mais ça peut justement donner une ambiance très sympa. Par exemple, là je vais prendre cette texture là. D’ailleurs en premier lieu, je vais supprimer mes anciennes images et je vais donc ajouter une texture. Je rafraichi la page de mon site, voilà. Donc ça, ça change tout de suite l’ambiance du site et selon l’aspect visuel de votre site, ça peut parfaitement s’adapter aux couleurs de votre site et à l’ambiance générale. On peut évidemment rajouter tout type de texture, tout de suite ça change vraiment l’aspect. Ah évidemment j’ai ajouté alors que je voulais modifier mon image. Donc là, j’ai mis un fond un petit peu plus métal qui va peut être s’adapter à quelque chose peut être pour des vêtements pour jeunes, un peu sportswear et si par exemple, je prends cette texture là qui est plus, qui représente un aspect parquet, on va tout de suite avoir l’impression qu’on va se retrouver dans quelque chose de vente de meubles ou matériaux mais tout de suite quelque chose d’assez classe.

Donc là, on a vu comment gérer l’ambiance de votre site avec les backgrounds mais vous pouvez également avoir une démarche beaucoup plus commerciale et utiliser ces backgrounds pour mettre en avant les marques que vous vendez sur votre site. Là je vais supprimer l’ancien background et je vais rajouter un background de marque. Dans là par exemple c’est un background « Adidas ». Et quand je rafraichi ma page, évidemment on voit le background « Adidas ». Là tout de suite on comprend que sur la boutique, on va retrouver des produits Adidas. Evidemment, si vous vendez plusieurs marques, ça peut être intéressant de les faire défiler. Là par exemple je viens de rajouter un background « Lacoste » et un background « Redbull ». Si je rafraichi ma page, donc j’ai évidemment « Adidas » qui apparait en premier étant donné que c’est la première photo que j’ai ajouté et ensuite je vais avoir « Lacoste » et « Redbull ». Alors toujours dans une démarche plus commerciale, plutôt que d’ajouter vos marques, vous pouvez carrément ajouter des visuels de vos produits si vous avez des visuels de qualité. Donc là encore je vais supprimer les anciens backgrounds et là je vais aller chercher plutôt des visuels de produits. Alors la petite astuce c’est que là, étant donné qu’on va vraiment vouloir montrer le produit en lui même sur les côtés du site, j’ai retravaillé mes backgrounds de manière à laisser un espace au milieu, qui correspond à la largeur de mon site. Ca permet d’être sur que nos visuels vont être bien visibles sur les côtés et ne pas passer derrière. Ce qui n’est pas forcément grave lorsqu’on va mettre plutôt un visuel d’ambiance ou quelque chose dans le genre parce que justement on est vraiment dans de l’ambiance mais là si vous voulez mettre en avant vos produits, il faut que votre produit soit totalement visible et donc là l’intérêt c’est justement de travailler un petit peu vos background à l’avance, de manière à ce qu’il y ait un espace prédéfini pour votre site qui correspond à la largeur exacte de votre site. Là par exemple, je vais prendre un background que j’ai préparé avec des Iphones. Une fois encore, je rafraichi la page et on voit bien les Iphones qui apparaissent. Là tout de suite, on se rend bien compte qu’on va être dans une boutique qui va vendre ce type de produits, c’est tout de suite une évidence en fait. On peut donner une information différente tout de suite au client si par exemple, on met là un background que j’ai préparé pour des jeans, des levis en l’occurrence. Si je rafraichi ma page, une fois encore on se rend compte tout de suite qu’on va plus être dans le même type de boutique, qu’on va plutôt être dans de la boutique de vêtements.

Donc maintenant, c’est l’occasion de vous parler des trois champs ici que j’ai laissé de côté depuis le début. Donc en fait l’idée, c’est de vous permettre non seulement d’afficher un background comme on l’a vu depuis le début mais aussi de lier ça à certaines de vos pages de votre site. Par exemple, je vais modifier mon background ici, levis, et je vais plutôt utiliser celui-ci que j’ai préparé pour des MacBook. Donc on voit bien mes produits qui apparaissent en fond d’écran et ce que je vais faire c’est que je vais créer un lien en fait. Donc ça, c’est le texte du lien, ici c’est la description qui va apparaitre sous le lien et je vais aller récupérer l’adresse dont j’ai besoin, donc je la récupère en haut. Je la colle ici, et j’enregistre. Et maintenant lorsque je vais afficher ma page, j’ai mon background qui apparait et là, j’ai un petit message qui apparait avec ce que j’ai mis et si je clique sur mon lien, je suis redirigé vers la page. Donc là, on ne le voit évidemment pas parce que j’y étais déjà mais je vais retourner sur la page d’accueil. Donc le message apparait et si je clique dessus, je suis bien redirigé vers la page des MacBook.

Vidéo de présentation du module Fading background
Votez pour cet article

Poster un Commentaire

avatar
  Subscribe  
Recevoir un email pour