Ajouter un élément de défilement vertical au module curseur de Divi pour une conception de titre unique

Cliquez ensuite sur télécharger pour accéder au paquet de mise en page. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser le fichier json dans Divi Builder.
On va voir le tutoriel, non? https:\/\/youtu.be\/Nmuy9VAYo4M Pour commencer, vous devez installer le thème Divi et activer la nouvelle page créée pour construire deux images dans le sens contraire des aiguilles d’une montre de 90 degrés à partir de zéro sur le constructeur visuel. Cela peut être fait facilement avec les options intégrées du système d’exploitation ou avec n’importe quelle application d’édition de photos simple. Vous pouvez également faire tourner des images directement dans WordPress en éditant des éléments médias. Après cela, vous pourrez créer votre chef – d’œuvre dans Divi.
L’idée de base de l’ajout d’un curseur vertical est d’utiliser l’option de transformation Divi pour faire tourner le module de curseur de 90 degrés (dans le sens des aiguilles d’une montre ou dans le sens contraire des aiguilles d’une montre) de sorte qu’il apparaisse verticalement sur la page. Pour l’image de fond du curseur (ou de la diapositive), il est recommandé de faire tourner l’image à l’avance (ou en utilisant l’éditeur d’images WordPress) de sorte que l’image s’affiche verticalement chaque fois que vous faites tourner le curseur. Ceci affichera les commandes du curseur, les flèches et le texte verticalement comme vous vous y attendiez. La partie la plus difficile est de personnaliser la hauteur et la largeur du curseur, car les choses sont en fait inversées. Cette conception de curseur fonctionne mieux dans une disposition avec deux colonnes ou plus.
Voici un exemple rapide de la façon de le faire. Dans la section normale C
Temps de transformation: transformation du volant de l’axe Z: 90 degrés Hauteur du curseur nous n’avons pas à nous soucier de la largeur du curseur, car il s’étend automatiquement à 100% de la colonne. La colonne est 50% de 80vw (largeur de ligne), donc par défaut, la largeur est essentiellement 40vw. Maintenant, nous devons assigner une hauteur de 40 VW au curseur sur le Bureau, puis ajuster la hauteur à 80 VW sur la tablette et 95 VW sur le téléphone. Mises à jour: hauteur: 40vw (bureau), 80vw (tablette), 95vw (téléphone) Ensuite, réglez l’espacement interne pour aligner le texte sur le côté droit du curseur vertical. Fill (Desktop): 0px top, 21vw Bottom, 0px left, 0px right fill (tablette): Bottom 42vw fill (mobile): 50vw bottom Mettre à jour les paramètres du texte ajuster le titre du texte et le texte comme suit: alignement du texte: caractères du titre gauche: Karla taille du texte du titre: 32px hauteur de la ligne du titre: 1,3 Embody letter Spacing: 3px hauteur de la ligne du corps: 1,8 em Dessinez le bouton pour appliquer le style et placer le bouton. Mettre à jour ce qui suit: taille du texte du bouton: 16 Px couleur de fond du bouton: # 9a2508 largeur de la bordure du bouton: 0px espacement des lettres du bouton: 2px poids de la police du bouton: demi – gras icône du bouton: plus (voir capture d’écran) Alignement du bouton: marge du bouton droit: 10% supérieure, 10% inférieure Gradient d’arrière – plan pour créer un arrière – plan pour le texte de titre du curseur vertical, nous pouvons ajouter un gradient d’arrière – plan au curseur comme suit: couleur d’arrière – plan du gradient gauche: # 9a2508couleur d’arrière – plan du gradient droit: rgba (0,0,0,0) position de départ: 12% position Finale: 0% placez le gradient au – dessus de l’image d’arrière – plan: s Note: Si vous voulez, Vous pouvez ajuster l’opacité de la couleur droite de la rampe de fond pour créer une superposition de l’image d
Diapositives. Utilisez le bouton de rotation CSS personnalisé et les flèches du curseur parce que notre bouton est toujours vertical, nous devons utiliser le clip css pour le tourner à la position précédente. Ajouter les CSS suivants aux boutons de diapositives: transformation: rotation (- 90 degrés); Pour les flèches de défilement, vous pouvez ajouter le même clip CSS de sorte qu’il pointe à droite et à gauche, plutôt que vers le haut et vers le bas. On peut aussi augmenter la taille des flèches quand on est là. Ajouter les CSS suivants pour la transformation: rotation (- 90 degrés);
Taille de la police: 80px; C’est tout! Voyons le résultat final. Résultats finaux C’est sur la tablette et le téléphone. En éditant des éléments verticaux, vous êtes libre d’explorer de nouveaux dessins. Voici un exemple du même design qui utilise le bouton gauche et la superposition de texte. Le module de curseur rotatif de Divi est un moyen rapide et efficace d’ajouter des éléments de conception verticale au curseur. En fait, la seule difficulté est d’obtenir une bonne taille et un espacement réactifs. Heureusement, Divi dispose de suffisamment d’options intégrées pour modifier facilement la conception afin qu’elle puisse paraître bien sur tous les appareils. Cette conception de curseur vertical fonctionne parfaitement dans d’autres zones du site, en plus du titre. J’ai trouvé qu’il était utilisé pour afficher des produits spéciaux ou des recommandations dans un tableau plus compact. J’espère que cela vous inspirera pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!