Comment créer des détails mobiles en utilisant le module Divi Slider (téléchargement gratuit!)

Les curseurs ont toujours été très populaires dans la conception web. L’un de leurs plus grands avantages est que les visiteurs peuvent naviguer sur les appareils mobiles. Aujourd’hui, le défilement est une nouvelle façon de cliquer, de sorte qu’il est clair que l’ajout d’un appareil de défilement peut aider à améliorer l’expérience utilisateur mobile des visiteurs sur le site. Lorsque vous créez un site Web en utilisant Divi, vous pouvez facilement ajouter des modules de curseur à n’importe quelle ligne ou section que vous travaillez. Avec un peu de créativité et d’expérimentation, vous pouvez faire de grands projets Web.
Une chose que vous pouvez faire est de créer un processus de déplacement détaillé en utilisant le module curseur. Vous pouvez ajouter autant de diapositives que vous le souhaitez. Bien qu’initialement conçu pour les appareils mobiles, le processus détaillé sur le Bureau et la tablette semble identique. Dans cet article, nous allons recréer un exemple étonnant à partir de zéro et fournir la section téléchargement à la fin. Allons – y! Avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats qui seront recréés sur différents écrans de taille. Stationnaire Format GIF Commençons à recréer! Comment créer un processus de déplacement étape par étape en utilisant le module Divi Slider
Abonnez – vous à notre chaîne YouTube et ajoutez de nouveaux espaces de partition. Ajouter une nouvelle page ou ouvrir une page existante et ajouter une nouvelle section générale. Ouvrez certains paramètres et ajoutez des valeurs de remplissage personnalisées qui correspondent à différentes tailles d’écran. Remplissage supérieur: 4vw (bureau), 5vw (tablette), 3vw (téléphone) Remplissage inférieur: 4vw (bureau), 5vw (tablette), 3vw (téléphone) Remplissage gauche: 30vw (bureau), 18vw (tablette), 3vw (téléphone) Remplissage droit: 30vw (bureau), 18vw (tablette), 3vw (téléphone) Ajouter une nouvelle ligne de structure de colonne continue en ajoutant une nouvelle ligne à la section en utilisant la structure de colonne suivante: Fond gradué sans AGG
En particulier, le remplissage personnalisé et les marges des boutons du module curseur. Comme cet élément est combiné avec différents éléments sur chaque diapositive, vous devez ajouter manuellement des remblais et des marges en utilisant le code CSS sur l’onglet avancé. Remplissage à gauche: 80px;
Remplissage à droite: 80px;
Haut de l’emballage: 8px;
Remplir le fond: 8px;
Bord inférieur: 80px; Supprimer la diapositive active une fois que vous avez terminé d’éditer tous les paramètres généraux de la diapositive, vous pouvez continuer à supprimer les diapositives actives existantes. Au lieu de les utiliser, nous en créerons un à partir de zéro dans la prochaine partie de l’article. Cela nous aidera à éditer et personnaliser tout le contenu plus rapidement. Personnaliser la première diapositive personnaliser le contenu de la zone de contenu ajouter une nouvelle diapositive au module curseur et commencer à personnaliser le contenu de la zone de contenu. Dans l’écran d’impression ci – dessous, vous remarquerez que nous ajoutons des images à la boîte de contenu au lieu des paramètres d’image. Cela nous permettra de placer l’image au – dessus du contenu écrit. Vous pouvez trouver les illustrations que nous utilisons en allant à l’affichage du paquet de mise en page de l’illustrateur graphique et en téléchargeant l’image à la fin. Nous ajoutons et modélisons également le titre H3 dans la zone de contenu, plutôt que le champ titre, afin qu’il apparaisse exactement où nous voulons qu’il apparaisse. Allez aux paramètres du lien pour continuer le lien du bouton et ajoutez un lien au bouton pour rediriger les visiteurs vers une page plus détaillée sur la diapositive pertinente. Fond de rampe ensuite, ajoutez un fond de rampe en utilisant les paramètres suivants: couleur 1: # aaacff Color 2: rgb (255255255,0) type de rampe: radial: TOP start position: 30% end position: 30% Naviguez plus tard et modifiez les paramètres du texte. Flèche de couleur personnalisée: # f4f4f4point navigation Color PE
Personnalisation: # 000000 Paramètres de texte e changez la couleur du texte dans les paramètres de texte de la diapositive.
Couleur du texte: noir Le dernier mais non le moindre bouton, modifiez – le pour qu’il ressemble exactement à ce que vous voulez. Utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 0.8vw (bureau), 2vw (tablette), 3vw (téléphone) couleur du texte du bouton: # FFFFFF couleur de fond du bouton: # aaacff largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 10 px Après avoir créé et personnalisé la première diapositive autant de fois que nécessaire, vous pouvez continuer et cloner la diapositive autant de fois que nécessaire. Vous devez apporter des modifications manuelles à chaque copie. Pour modifier le contenu d’une zone de contenu, vous devez d’abord modifier le contenu de la zone de contenu. Cela comprend les images \/ illustrations utilisées. Vous pouvez trouver les deux illustrations utilisées dans ce tutoriel en allant à l’affichage du paquet de mise en page de l’illustrateur graphique et en téléchargeant l’image à la fin. Changer le lien change également le lien du bouton. Vous pouvez également modifier la première couleur de la rampe à partir de la palette qui définit chaque diapo répétée. Couleur 1: # ffccaa Changez la couleur de fond du bouton utiliser la même couleur pour changer la couleur de fond du bouton. Répétez ces étapes pour chaque copie que vous créez et c’est fait! Couleur de fond du bouton: # ffccaa Téléchargement gratuit de la section itinérance mobile pour obtenir la section itinérance mobile gratuite, vous devez d’abord la télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et des paquets gratuits de mise en page Divi dans chaque Lu