Vous êtes nombreux à avoir déjà lu l’expression « parallaxe » et « slider » dans mes recommandations de thèmes et parfois de plugins. Si vous n’avez pas encore consulté notre glossaire de termes techniques pour WordPress, alors ce sera pour vous un exemple concret sur la signification de ces derniers.

mg-parallax-slider-cover

C’est pourquoi aujourd’hui, je vais vous apprendre à créer un slider parallaxe sur votre blog WordPress, avec le plugin MG Parallax Slider.

A titre de rappel, un slider est une fonctionnalité qui fait défiler de gauche à droite ou inversement des informations diverses (images, texte, vidéo, audio) dans un cadre délimité. L’effet parallax est une animation de relief, qui s’inspire du paysage en mouvement. C’est cet effet disponible sur vos différents smartphones android à la page d’accueil lorsque vous faites défiler les pages de ce dernier.

Comment installer MG Parallax Slider

La première chose à faire est bien évidemment d’installer le plugin depuis votre tableau de bord. Vous pouvez également le télécharger directement sur WordPress.org. Le principal avantage avec ce plugin est qu’il existe 2 façons de créer des slides. Mais avant, nous allons procéder aux réglages.

mg-parallax-slider

Comment configurer MG Parallax Slider

Pour accéder à la page des réglages du plugin, vous devez cliquer sur le menu « MGPS Options ».

acceder-aux-options

Sur cette nouvelle page, sur l’onglet « background », il est possible de modifier l’image (ou texture) en arrière-plan du slider. Vous avez le choix entre 18 échantillons.

MGPS-Options-gestion-des-arrière-plans

Vous pouvez (plus bas) modifier la taille des bordures, en haut, en bas, à gauche et à droite, ainsi que définir une couleur qui s’y applique.

Avec l’onglet « Title », vous avez la possibilité de modifier la typographie que s’applique au titre des slides.

options-sur-la-typographie

L’onglet « Contents » vous permet de faire la même chose que l’onglet title, mais cette fois, les options s’appliqueront au contenu.

Pour modifier les flèches de navigation, vous devez accéder à l’onglet « navigation arrows ». Sur cet onglet, vous pouvez définir le chemin d’accès vers les images (que je vous invite à laisser tel quel, sauf si vous savez ce que vous faites), et la couleur d’arrière-plan de ces derniers.

gestion-des-flèches-de-navigation

Plus bas, nous avons les options d’importation et d’exportation des configurations.

import-export-mgps

Remarque : je ne vous ai pas parlé de l’onglet « Slides » car ce dernier permet de créer des slides d’une autre façon que j’expliquerai ultérieurement.

Comment créer un slide : Première méthode

Après avoir installé et activé le plugin, un autre élément fera son apparition sur le menu latéral gauche du tableau de bord intitulé « MG Slider ». Cliquez dessus, car nous allons créer un nouveau slider. Il s’agit ici de la première méthode (avec le format de publication personnalisé ou custom post type).

mg-slider-menu

Cliquez sur le sous-menu « Add New » pour commencer la création du slider.

Cette nouvelle page est l’interface de création des slides qui est assez similaire à celle des pages et des articles.

Tous les éléments qui seront créés de cette façon seront disponibles dans un slide unique qui s’affichera sur vos articles ou pages en ajoutant le shortcode correspondant [mgps-slider-post].

Chaque élément d’un slide peut donc avoir un titre, une description et une image (image à la une). Vous pouvez créer autant d’éléments que vous le souhaitez.

Voici comment se présente le parallax slider chez moi (avec quelques modifications sur la texture en arrière-plan).

demo-parallax-slider

Je suis convaincu que vous pouvez faire mieux que moi. Essayez !!!

Remarque : l’autre inconvénient avec cette méthode est qu’il est impossible de ré ordonner des slides, à moins que vous n’installiez le plugin « Post Type Order » qui est par ailleurs très simple à utiliser.

Comment créer un slide : deuxième méthode

Cette deuxième méthode a l’avantage qu’il est possible de modifier l’ordre des éléments, pourtant, vous ne pouvez pas profiter de l’agréable interface de la méthode précédente.

Nous allons donc accéder à l’onglet « Slides » et cliquer sur le bouton « Add Slide ». En cliquant dessus, un nouvel élément (slide) s’ajoutera au slider. Cliquez sur chacun des slides (ou éléments) pour :

  • Ajouter une image en cliquant sur « Télécharger »
  • Ajouter un titre dans le champ « Mendatory Field »
  • Ajouter une description dans le champ « Description Here »
  • Ajouter un lien vers une page de votre choix dans le champ « Give us a link ! »

Pour supprimer un slide, il vous suffit de cliquer sur le bouton « Delete Slide » situé en bas à droite de chaque slide. Pour ré ordonner les slides, il vous suffit de cliquer et faire glisser l’en-tête de chaque slide.

interface-segondaire-de-creation-de-slider

Cette fois-ci, vous devez utiliser le shortcode « [mgps-slider] » pour afficher le slider sur vos pages ou articles, de la façon expliquée plutôt. Le résultat sera identique.

slider-deuxieme-methode-mg-parallax-slider

C’est tout pour ce tutoriel sur la création d’un slider parallax sur WordPress. N’hésitez pas à partager l’article avec vos amis sur les réseaux sociaux.