Comment ajouter, configurer et personnaliser le module Slider pleine page.

 

fullwidth-slider-overview-768x370

Divi vous permet de placer des curseurs dans des sections de pleine largeur, ce qui fait que vos curseurs s’étendent sur toute la largeur du navigateur. Les curseurs Divi prennent en charge les arrière-plans de parallaxe, ainsi que les arrière-plans vidéo!

Voir une démo live de ce module

Comment ajouter un module de curseur pleine largeur à votre page

Avant de pouvoir ajouter un module de curseur pleine largeur à votre page, vous devez d’abord sauter dans Divi Builder. Une fois le thème Divi installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builderau-dessus de l’éditeur de publication chaque fois que vous créez une nouvelle page. Cliquez sur ce bouton pour activer Divi Builder et accéder à tous les modules de Divi Builder. Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le générateur en mode visuel. Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous parcourez votre site Web au premier plan si vous êtes connecté à votre tableau de bord WordPress.

 

visual-builder-3-1-768x454

Une fois que vous avez entré Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés qu’à l’intérieur des lignes. Si vous commencez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page.

insert-fullwidth-slider

Localisez le module de Slider pleine page dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules est consultable, ce qui signifie que vous pouvez également taper le mot « curseur pleine largeur », puis cliquez sur Entrée pour rechercher et ajouter automatiquement le module curseur pleine largeur! Une fois le module ajouté, vous serez accueilli par la liste d’options du module. Ces options sont séparées en trois groupes principaux: Contenu , Conception et Avancé .

Exemple de cas d’utilisation: Ajouter une section de Slider pleine page à votre page d’accueil

Un curseur pleine largeur est un excellent moyen de présenter plusieurs CTA au-dessus du seuil de votre page d’accueil. La combinaison d’images et de contenu peut vraiment donner à votre section de héros une sensation professionnelle qui se démarque.

Pour cet exemple, je vais ajouter un Slider pleine page pour servir de section principale de héros d’une page d’accueil.

fullwidth-slider-use-case-768x867

À l’aide de Visual Builder, ajoutez une section pleine page en haut de votre page Web. Insérez ensuite le module Slider pleine page dans votre nouvelle section. Dans l’onglet Contenu des paramètres du curseur pleine largeur, cliquez sur + Ajouter un nouvel élément pour créer votre première diapositive.

fullwidth-slide-settings-before-768x464

Dans les paramètres de diapositive de votre première diapositive, mettez à jour les options suivantes:

Options de contenu

En – tête : [entrez le titre de la diapositive]
Texte du bouton : [entrez le texte du bouton]
Contenu : [entrez le contenu du texte de la diapositive principale]
URL du bouton : [entrez l’URL de destination du bouton Diapositive]
Image d’arrière-plan : [entrez l’image qui servira d’arrière-plan pour la diapositive]

Options de conception

Utiliser la superposition d’arrière-plan : OUI
Couleur de superposition d’arrière-plan : rgba (0,0,0,0.2) * cette superposition assombrit légèrement l’image de fond pour rendre le texte plus lisible.

slide-settings-1-768x464

Enregistrer les paramètres de diapos

Maintenant dupliquez la diapositive que vous venez de créer et mettez à jour la nouvelle diapositive avec du nouveau contenu si nécessaire. Répétez cette opération pour toutes les diapositives que vous souhaitez ajouter.

fullwidth-slider-settings-768x465

C’est tout. Pour cet exemple, je n’inclue que deux diapositives, mais le résultat est Slider pleine page efficace avec plusieurs appels à l’action qui engage l’utilisateur à cliquer sur le bouton pour plus d’informations. Puisqu’il s’agit de votre principal appel à l’action pour votre site Web, je suggère d’effectuer des tests fractionnés sur votre curseur à pleine largeur en utilisant Divi Leads et de voir lequel convertit le mieux.

fullwidth-slider-gif

Options de contenu de curseur pleine largeur

La suite de ce tutoriel est réservé aux membres inscrits.

Inscrivez vous gratuitement ici                  Connectez vous ici