Comment ajouter des éléments de curseur vertical au module de curseur de Divi pour une conception d'en-tête unique
Publié: 2019-06-28Le module de curseur de Divi regorge d'options de conception qui permettent de sortir des sentiers battus et de créer de superbes designs de curseur. Alors aujourd'hui, nous allons changer certaines choses (littéralement). Dans le post qui suit, nous allons ajouter des éléments de curseur vertical au module de curseur de Divi. Avoir un curseur avec des éléments verticaux (comme le texte du titre et les contrôles de diapositive) permet aux visiteurs de voir plus de contenu de diapositive et d'images d'arrière-plan dans des colonnes plus étroites (en particulier sur mobile). Et les éléments verticaux ajoutent une touche rafraîchissante à la conception globale.
Pour ce faire, nous utiliserons l'option de rotation de transformation de Divi pour faire pivoter l'ensemble du curseur, puis contre-roter d'autres éléments dans chaque diapositive selon les besoins pour créer un design de curseur vertical moderne. Nous allons commencer par passer en revue la technique de base. Ensuite, nous allons créer un design d'en-tête complètement unique avec ce curseur vertical.
Plongeons-nous !
Aperçu
Téléchargez GRATUITEMENT la disposition des éléments du curseur vertical Divi
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le 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 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.
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 !
Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
https://youtu.be/Nmuy9VAYo4M
Abonnez-vous à notre chaîne Youtube
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Deux images qui ont été tournées de 90 degrés dans le sens inverse des aiguilles d'une montre. Cela peut facilement être fait en utilisant les options intégrées de votre système d'exploitation ou via n'importe quelle application de retouche photo simple. Vous pouvez également faire pivoter une image directement dans WordPress en modifiant l'élément multimédia.
Après cela, vous êtes prêt à créer votre chef-d'œuvre dans Divi.
L'idée de base
L'idée de base derrière l'ajout d'éléments de curseur vertical est d'utiliser les options de transformation de Divi pour faire pivoter le module de curseur de 90 degrés (dans le sens des aiguilles d'une montre ou dans le sens inverse) afin qu'il s'affiche verticalement sur la page. Pour les images d'arrière-plan du curseur (ou de la diapositive), vous voudrez faire pivoter l'image au préalable (ou à l'aide de l'éditeur d'images WordPress) afin que l'image s'affiche à la verticale chaque fois que vous faites pivoter le curseur. Cela affichera les commandes du curseur, les flèches et le texte verticalement, comme vous vous en doutez. La partie délicate consiste à personnaliser la hauteur et la largeur du curseur, car les choses sont littéralement inversées. Cette conception de curseur fonctionne mieux dans une mise en page avec deux colonnes ou plus.
Voici un exemple rapide de la façon de procéder.
Dans une section régulière avec une rangée de deux colonnes, ajoutez un module de curseur à la colonne de gauche.
Ajoutez ensuite quelques diapositives avec chacune un titre, une phrase de contenu du corps et une image d'arrière-plan qui a déjà été pivotée de 90 degrés dans le sens inverse des aiguilles d'une montre.
Faites ensuite pivoter le module de curseur de 90 degrés le long de l'axe z à l'aide des options de transformation de Divi.
Ajoutez ensuite un espacement (espacement inférieur) au curseur pour créer une largeur supplémentaire et alignez le texte à droite de chaque diapositive.
Voici le résultat.
Comme vous pouvez le voir, le concept est simple, mais ces éléments de curseur vertical peuvent vraiment être utiles pour créer des designs uniques.
Ci-dessous, nous allons essayer de créer ensemble l'un de ces modèles de curseurs uniques.
Ajout d'éléments de curseur vertical au module de curseur de Divi pour une conception d'en-tête unique
Création de la section et de la ligne
Contexte de la section
Commencez par créer une section régulière avec une rangée de deux colonnes.
Avant d'ajouter un module à la ligne, mettez d'abord à jour la section avec la couleur d'arrière-plan suivante :
Couleur d'arrière-plan : #24272a
Paramètres de ligne
Ensuite, nous devons donner à notre rangée une largeur de gouttière personnalisée de 1, puis définir la largeur à l'aide de l'unité de longueur vw. L'utilisation de l'unité de longueur vw est importante pour rendre notre curseur vertical réactif plus tard.
Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Largeur de gouttière : 1
Largeur : 80vw (ordinateur de bureau et tablette), 95vw (téléphone)
Largeur max : 80vw (ordinateur de bureau et tablette), 95vw (téléphone)
Ensuite, nous ajouterons une ombre de boîte à des fins de conception.
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -10px
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre : rgba(255,255,255,0,03)
Ajouter du contenu d'en-tête à l'aide d'un module de texte
Nous finirons par ajouter le curseur dans la colonne 2, mais pour l'instant ajoutons le titre de l'en-tête avec du texte supplémentaire dans la colonne 1. Pour ce faire, nous ajouterons deux modules de texte dans la colonne 1.
Ajouter le module de texte pour le titre
Pour ajouter notre titre d'en-tête, ajoutez un module de texte à la colonne 1.
Mettez à jour le contenu du corps avec l'en-tête h2 suivant :
<h2>My Work</h2>
Ensuite, mettez à jour les éléments suivants :
Police de titre 2 : Karla
Titre 2 Couleur du texte : #ffffff
Titre 2 Taille du texte : 5vw (ordinateur de bureau), 60px (tablette), 50px (téléphone)
Rembourrage : 15 % en haut, 20 % en bas, 5 % à gauche, 5 % à droite
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 60 px
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre : #9a2508
Ajouter un module de texte pour le contenu du corps
Ensuite, ajoutez un nouveau module de texte sous le premier module de texte de la colonne 1. Nous pouvons laisser le contenu par défaut pour le moment.
Ensuite, mettez à jour les éléments suivants :
Texte Couleur du texte : #cccccc
Largeur: 70%
Alignement du module : à droite
Marge : -5% en haut
Rembourrage : 5 % en bas, 10 % à gauche, 5 % à droite
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 10px
Couleur de l'ombre : rgba(255,255,255,0,03)
Création du curseur vertical
Nous sommes maintenant prêts à créer le curseur avec les éléments de curseur vertical.
Pour ce faire, ajoutez un module Slider dans la colonne 2.
Ouvrez les paramètres de diapositive de la première des deux diapositives par défaut.
Réduisez le corps du texte par défaut pour inclure une seule ligne de texte. Ajoutez ensuite une image d'arrière-plan qui a déjà été pivotée de 90 degrés dans le sens inverse des aiguilles d'une montre.
Faites ensuite la même chose pour la deuxième diapositive par défaut en lui donnant une image d'arrière-plan différente.
Faites pivoter le curseur
Ensuite, faites pivoter le curseur à l'aide de l'option de rotation de transformation :
Transformer Rotation axe z: 90deg
Hauteur du curseur
Nous n'avons pas à nous soucier de la largeur du curseur puisqu'il s'étendra automatiquement sur 100 % de la colonne. La colonne est à 50% de 80vw (la largeur de la ligne) donc fondamentalement la largeur sera de 40vw par défaut. Maintenant, nous devons donner au curseur une hauteur correspondante de 40vw sur le bureau, puis ajuster la hauteur à 80vw sur tablette et 95vw sur téléphone.
Mettez à jour les éléments suivants :
Hauteur : 40vw (ordinateur de bureau), 80vw (tablette), 95vw (téléphone)
Ajustez ensuite le remplissage pour aligner le texte à droite du curseur vertical.
Rembourrage (bureau) : 0px en haut, 21vw en bas, 0px à gauche, 0px à droite
Rembourrage (tablette): 42vw bas
Rembourrage (téléphone): 50vw bas
Mettre à jour les paramètres de texte
Ajustez le titre et le corps du texte comme suit :
Alignement du texte : à gauche
Police du titre : Karla
Taille du texte du titre : 32 px
Hauteur de la ligne de titre : 1,3 em
Espacement des lettres du corps : 3px
Hauteur de la ligne du corps : 1,8 em
Styliser le bouton
Pour styliser et positionner le bouton, mettez à jour les éléments suivants :
Taille du texte du bouton : 16px
Couleur d'arrière-plan du bouton : #9a2508
Largeur de la bordure du bouton : 0px
Espacement des lettres des boutons : 2px
Poids de la police du bouton : semi-gras
Icône du bouton : signe plus (voir capture d'écran)
Alignement des boutons : à droite
Marge du bouton : 10 % en haut, 10 % en bas
Dégradé de fond
Pour créer un arrière-plan pour le texte du titre de notre curseur vertical, nous pouvons ajouter un dégradé d'arrière-plan au curseur comme suit :
Dégradé de fond à gauche : #9a2508
Couleur du dégradé de fond à droite : rgba(0,0,0,0)
Position de départ : 12 %
Position finale : 0%
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI
Remarque : Si vous le souhaitez, vous pouvez ajuster l'opacité de la couleur du dégradé d'arrière-plan à droite pour créer une superposition pour vos images de diapositives.
Rotation du bouton et des flèches du curseur avec CSS personnalisé
Puisque notre bouton est toujours vertical, nous devrons le faire pivoter vers sa position précédente avec un extrait de CSS. Ajoutez le CSS suivant au bouton Slide :
transform: rotate(-90deg);
Pour les flèches du curseur, vous pouvez ajouter le même extrait de css afin qu'ils pointent vers la droite et la gauche au lieu de haut et de bas. Et pendant que nous y sommes, nous pouvons également augmenter la taille des flèches. Ajoutez le CSS suivant au
transform: rotate(-90deg); font-size: 80px;
C'est ça!
Voyons le résultat final.
Résultat final
Et le voici sur tablette et téléphone.
N'hésitez pas à explorer de nouveaux designs en ajustant les éléments verticaux. Voici un exemple du même design avec le bouton positionné à gauche et une superposition de texte.
Dernières pensées
La rotation du module de curseur de Divi est un moyen rapide et efficace d'ajouter des éléments de conception verticaux à votre curseur. Vraiment, la seule partie difficile est d'obtenir une taille et un espacement agréables et réactifs. Mais heureusement, Divi dispose de suffisamment d'options intégrées qui facilitent la modification du design pour qu'il ait fière allure sur tous les appareils.
Cette conception de curseur vertical fonctionnera également très bien dans d'autres zones de votre site en plus d'un en-tête. Je peux voir que cela est utilisé pour présenter des produits en vedette ou des témoignages dans des dispositions de colonnes plus étroites.
J'espère que cela vous donnera de l'inspiration pour votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!