Pour modifier l’arrière – plan de la rampe en utilisant Divi Hover

Créer un site Web signifie s’assurer que tous les détails sont corrects. Se concentrer sur les petits détails de votre conception améliorera rapidement la qualité du site. Avec la nouvelle option de curseur Divi, vous pouvez facilement ajouter de petites interactions à votre site. L’option du curseur de la souris s’applique à presque tous les paramètres de conception. Par exemple, vous pouvez modifier l’arrière – plan de la rampe pendant que vous passez le curseur pour créer une bonne transition. C’est exactement ce que nous allons vous montrer dans ce blog. En plus d’obtenir la transition de gradient, nous allons créer un exemple étonnant de conception à partir de zéro que vous pouvez librement utiliser pour n’importe quel type de site que vous créez.
Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats finaux sur différents écrans de taille. Stationnaire Déplacer la souris Pour obtenir des illustrations gratuites du jeu vidéo Layout pack, vous devez d’abord les 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 Divi Layout le lundi et le vendredi de la semaine! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail
Confirmez votre abonnement et Obtenez gratuitement le pain hebdomadaire Divi! Commençons à créer!
La première chose que vous devez faire est de créer une nouvelle page ou d’ouvrir une page existante et d’y ajouter une nouvelle section générale. Ouvrez les paramètres et ajoutez des marges supérieures et inférieures personnalisées. Remplissage supérieur: 100 Px remplissage inférieur: 100 px Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante: Couleur de fond par défaut pour la colonne 1 (aucun module n’a été ajouté), ouvrez les paramètres de ligne et ajoutez la couleur de fond par défaut suivante à la colonne 1:
Couleur de fond: # e7ffa0 Couleur de fond lorsque vous déplacez la souris colonne 1 changez cette couleur de fond lorsque vous déplacez la souris. Couleur de fond: # 00020c La colonne de fond de gradient 1 ajoute également une couleur de fond de gradient à la colonne 1. Vous remarquerez que nous utilisons des couleurs entièrement transparentes. Cette couleur vous permet d’afficher la couleur de fond qui change avec le mouvement de la souris. Couleur 1: rgb (255255255,0) couleur 2: rgb (160201,0.8) type de gradient colonne 1: linéaire colonne 1 Direction de gradient: 50 degrés colonne 1 position initiale: 20% La couleur de fond de colonne 2 ajoute également la couleur de fond de colonne 2.
Colonne 2 couleur de fond: # FFFFFF Ensuite, allez dans l’onglet conception et modifiez les paramètres de taille. Utiliser la largeur personnalisée: Oui unités: px largeur personnalisée: 2000 Px utiliser la largeur personnalisée de la gouttière: Oui largeur de la gouttière: 1 L’espacement se poursuit en ajoutant des valeurs de remplissage personnalisées aux paramètres d’espacement. Remplissage en haut: 0px remplissage en bas: 0px remplissage en haut des colonnes: 6vw (bureau), 120px (tablette et téléphone) remplissage en bas des colonnes
S’il n’y a toujours pas de module, ouvrez les paramètres de ligne et ajoutez la couleur de fond suivante à la colonne 1: colonne 1 couleur de fond: # FFFFFF La couleur de fond par défaut pour la colonne 2 ajoute la couleur de fond suivante à la colonne 2. Colonne 2 couleur de fond: # FFFFFF Couleur de fond lorsque vous passez le curseur sur la colonne 2 et changez cette couleur de fond lorsque vous passez le curseur. Colonne 2 couleur de fond: # 3d02ff Fond de rampe la colonne 2 ajoute également un fond de rampe à la colonne. Couleur 1: rgb (255255255,0) couleur 2: # ff7700 colonne 2 position initiale: 20% Ensuite, allez aux paramètres de taille et faites quelques changements. Utiliser la largeur personnalisée: Oui unités: px largeur personnalisée: 2000 Px utiliser la largeur personnalisée de la gouttière: Oui largeur de la gouttière: 1 L’espacement se poursuit en ajoutant une valeur de remplissage personnalisée dans les paramètres d’espacement. Remplissage supérieur: 0px remplissage inférieur: 0px remplissage supérieur colonne 1: 6vw (bureau), 120px (tablette et téléphone mobile) Remplissage inférieur colonne 1: 6vw (bureau), 120px (tablette et téléphone mobile) Remplissage gauche colonne 1: 5vw (bureau), 80px (tablette), 50px (téléphone mobile) Remplissage droit colonne 1: 5vw (surface du Bureau), 80px (tablette), 50px (téléphone mobile) Boîte d’ombre et ajoutez des ombres fines à cette ligne. Force de flou de l’ombre de la boîte: 100 Px force de diffusion de l’ombre de la boîte: – 10px Transition enfin et surtout, créez une transition en douceur en augmentant la durée de la transition dans l’onglet avancé. Durée de la transition: 1100 MS Répétez le module texte et le module bouton à la ligne 1 parce que nous avons déjà tous les modules requis dans la section précédente, donc nous allons gagner du temps en les clonant. Placez la copie dans la colonne 1 de la ligne 2 e en plaçant la copie dans la première colonne de la nouvelle ligne. Modifier le contenu assurez – vous d’éditer le contenu
Votre formulaire. Changer le bouton fond de la rampe change également l’arrière – plan de la rampe du bouton. Couleur 1: # ff653f couleur 2: # 0066ff direction du gradient: 39 degrés Le module de clonage d’image de la ligne 2 clone également le module d’image de la première colonne de la ligne précédente. Placez duplicate dans la colonne 2 de la ligne 2 et duplicate dans la colonne 2 de la nouvelle ligne. Changez l’image pour changer l’image dans le fichier \