Comment créer des procédures pas à pas mobiles avec le module Slider de Divi (téléchargement gratuit !)

Les curseurs ont toujours été très populaires dans la conception de sites Web. L'un de leurs plus grands avantages est le fait que les visiteurs peuvent les parcourir sur des appareils mobiles. De nos jours, le glissement est le nouveau clic, il va donc sans dire que l'inclusion de curseurs peut aider à améliorer l'expérience utilisateur mobile des visiteurs sur votre site Web. Lors de la création d'un site Web avec Divi, vous pouvez facilement ajouter le module Slider à n'importe quelle ligne ou section sur laquelle vous travaillez. Et avec un peu de créativité et d'expérimentation, vous pouvez réaliser des conceptions Web époustouflantes.

L'une des choses que vous pouvez faire est de créer une procédure pas à pas mobile avec le module Slider. Vous pouvez ajouter autant de diapositives que vous le souhaitez et la procédure pas à pas sera aussi belle sur le bureau que sur la tablette, bien qu'elle soit initialement conçue pour les appareils mobiles. Dans cet article, nous allons recréer un exemple étonnant à partir de zéro et proposer la section à télécharger à la fin de celui-ci.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil au résultat que nous allons recréer sur différentes tailles d'écran.

Statique

GIF

Commençons à recréer !

Comment créer des procédures pas à pas mobiles avec le module Slider de Divi

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Espacement

Commençons à créer ! Ajoutez une nouvelle page ou ouvrez une page existante et ajoutez-y une nouvelle section régulière. Ouvrez les paramètres de la section et ajoutez des valeurs de remplissage personnalisées qui correspondent aux différentes tailles d'écran.

• Rembourrage supérieur : 4vw (ordinateur de bureau), 5vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 4vw (ordinateur de bureau), 5vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 30vw (ordinateur de bureau), 18vw (tablette), 3vw (téléphone)
• Rembourrage droit : 30vw (ordinateur de bureau), 18vw (tablette), 3vw (téléphone)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé radial.

• Couleur 1 : #f9f9f9
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 40 %
• Position finale : 40 %

Dimensionnement

Continuez en allant dans les paramètres de dimensionnement de la ligne et supprimez tout l'espace entre les colonnes.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Nous ajoutons également du rembourrage inférieur à la ligne.

• Rembourrage inférieur : 30px

Frontière

Ensuite, ajoutez « 20px » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Enfin, ajoutez une ombre de boîte subtile à la ligne pour créer de la profondeur sur la page.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.07)

Ajouter un module de curseur

Changer la couleur d'arrière-plan

Une fois que vous avez terminé de modifier les paramètres de ligne, vous pouvez continuer et ajouter un module de curseur. Ouvrez les paramètres du module et modifiez la couleur de fond. Toutes les modifications que vous apportez dans l'onglet Conception s'appliqueront automatiquement à toutes les diapositives que vous ajouterez par la suite.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Paramètres de texte

Ensuite, allez dans l'onglet conception et modifiez les paramètres du texte.

• Orientation du texte : Centre
• Couleur de l'ombre : rgba(0,0,0,0)

Paramètres du corps du texte

Modifiez ensuite les paramètres du corps du texte.

• Police du corps : par défaut (Open Sans)
• Taille du corps du texte : 0.6vw (ordinateur de bureau), 1.5vw (tablette), 2.4vw (téléphone)
• Hauteur de la ligne du corps : 2,2 em (ordinateur de bureau), 2,3 em (tablette), 2,4 em (téléphone)

Espacement

Ajoutez également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2vw

Bouton CSS personnalisé

Nous devrons également ajouter des valeurs de remplissage et de marge personnalisées au bouton du module Slider en particulier. Étant donné que cet élément est combiné à différents éléments dans chaque diapositive, vous devrez ajouter le remplissage et la marge manuellement à l'aide du code CSS dans l'onglet avancé.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Supprimer les curseurs actifs

Une fois que vous avez terminé de modifier tous les paramètres généraux des diapositives, vous pouvez continuer et supprimer les diapositives actives qui s'y trouvent déjà. Au lieu d'utiliser ceux-ci, nous allons en créer un à partir de zéro dans la prochaine partie de l'article. Cela nous aidera à tout modifier et personnaliser plus rapidement.

Personnaliser la première diapositive

Personnaliser le contenu dans la zone de contenu

Ajoutez une nouvelle diapositive au module Slider et commencez à personnaliser le contenu dans la zone de contenu. Dans les écrans d'impression ci-dessous, vous remarquerez que nous ajoutons l'image à la zone de contenu plutôt qu'aux paramètres de l'image. Cela nous permettra de placer l'image au-dessus du contenu écrit. Vous pouvez trouver les illustrations que nous avons utilisées en accédant à la publication Graphic Illustrator Layout Pack et en téléchargeant les images à la fin. Nous ajoutons et stylisons également un titre H3 dans la zone de contenu au lieu du champ de titre pour qu'il apparaisse exactement là où nous le souhaitons.

Lien de bouton

Continuez en allant dans les paramètres du lien et ajoutez un lien au bouton qui redirigera les visiteurs vers une page plus détaillée sur la diapositive en question.

Fond dégradé

Ensuite, ajoutez un arrière-plan dégradé à l'aide des paramètres suivants :

• Couleur 1 : #aaacff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 30 %
• Position finale : 30 %

La navigation

Modifiez ensuite les paramètres de texte.

• Couleur personnalisée des flèches : #f4f4f4
• Couleur personnalisée de la navigation par points : #000000

Paramètres de texte

Et changez la couleur du texte dans les paramètres de texte de la diapositive.

• Couleur du texte : foncé

Bouton

Enfin, modifiez le bouton pour qu'il ressemble exactement à ce que vous voulez.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.8vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #aaacff
• Largeur de la bordure du bouton : 0px
• Rayon de bordure de bouton : 10px

Cloner la diapositive autant de fois que nécessaire

Une fois que vous avez terminé de créer et de personnaliser la première diapositive, vous pouvez continuer et cloner la diapositive autant de fois que vous le souhaitez. Vous devrez apporter quelques modifications manuelles à chacun des doublons.

Modifier le contenu dans la zone de contenu

La première chose que vous devrez modifier est le contenu de la zone de contenu. Cela inclut l'image/l'illustration qui est utilisée. Vous pouvez trouver les deux illustrations qui ont été utilisées dans ce didacticiel en accédant à la publication Graphic Illustrator Layout Pack et en téléchargeant les images à la fin.

Modifier le lien

Modifiez également le lien du bouton.

Modifier l'arrière-plan du dégradé

Vous pouvez également personnaliser la palette de couleurs de chaque diapositive en double en modifiant la première couleur du dégradé.

• Couleur 1 : #ffccaa

Changer la couleur d'arrière-plan du bouton

Utilisez cette même couleur pour changer la couleur d'arrière-plan du bouton. Répétez ces étapes pour chacun des doublons que vous créez et le tour est joué !

• Couleur d'arrière-plan du bouton : #ffccaa

Téléchargez GRATUITEMENT la section Mobile Walkthrough

Pour mettre la main sur la section soluce mobile gratuite, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil au résultat que nous allons recréer sur différentes tailles d'écran.

Statique

GIF

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser le module Slider de Divi pour créer une magnifique procédure pas à pas pour mobile. Bien qu'il ait été initialement conçu pour les tailles d'écran mobiles, il est tout aussi efficace sur tablette et ordinateur de bureau. Vous pouvez utiliser cette approche pour créer toutes sortes de sections de diapositives sur votre site Web et interagir de manière transparente avec vos visiteurs. Nous espérons que ce tutoriel vous inspirera pour faire preuve de créativité avec le module Slider de Divi. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!