skip to Main Content

Comment créer un slider avec effet parallaxe sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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).

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
18 Partages
Partagez14
Tweetez3
Enregistrer1