Comment combiner facilement les effets de glissement et les options adhésives dans la conception Divi

Plus vous vous Familiarisez avec Divi, plus vous réalisez à quel point les fonctionnalités intégrées peuvent être utiles. Parfois, il peut même être facile de commencer à les combiner. Mais comme tout dans le design, l’harmonie doit être une priorité. Si les effets de défilement et les options permanentes ne surchargent pas la conception, l’utilisation de ces fonctions fonctionne mieux. Maintenant, dans ce tutoriel, nous allons utiliser les effets de défilement Divi et les options adhésives pour créer une expérience de conception et de défilement utilisateur facile. Les effets que nous appliquerons ont été harmonisés et peuvent bien travailler ensemble et apporter une valeur ajoutée à la conception. Vous pouvez également télécharger gratuitement le fichier json!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit mise en page pour obtenir une mise en page gratuite, vous devez d’abord 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 un paquet gratuit Divi Layout le lundi! 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 pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! 1. Créer une structure de conception
Les paramètres des boutons modélisent les boutons en conséquence: chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 20 Px couleur du texte du bouton: # 155100 couleur de fond de l’ombrage du bouton 1: rgb (43135218,0) couleur 2: rgb (224198159,0,48) position de départ: 50% position de fin: 50% largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 0px Police du bouton: style de police du bouton Talk: majuscules Ajouter un effet collant ouvrir les paramètres de la colonne 2 maintenant que la première ligne est prête, nous pouvons commencer à appliquer l’effet collant et de défilement. Nous commencerons par les options permanentes et ouvrirons les paramètres de la colonne 2. Passez à l’onglet avancé de la colonne et appliquez les paramètres permanents suivants: position de collage: collage supérieur collant décalage supérieur: Bureau: tablette de 50 pixels et téléphone: 80px limite inférieure permanente: décalage de ligne avec les éléments collants environnants: est le style de transition par défaut et permanent: Oui Configuration permanente de la colonne sticky Edge maintenant que nous avons défini la colonne à sticky, nous pouvons commencer à appliquer un style persistant à la colonne elle – même et aux modules qu’elle contient. Nous allons commencer par la colonne 2, aller aux paramètres de bordure et appliquer les bordures collées suivantes: largeur de la bordure collée gauche: 2px couleur de la bordure gauche: # 799a8d Transform translate ensuite, nous changerons la valeur de transformation convertie en état par défaut et permanent. En bas: 10vw Fond visqueux: 0vw Module texte et module bouton opacité persistante nous changeons également l’opacité à l’état par défaut et permanent. Opacité: 0% Opacité visqueuse: 100% Le réglage permanent du module de séparation des dimensions ouvre ensuite le module de séparation dans la colonne 2. Passer à l’onglet conception et modifier la largeur par défaut et la largeur de collage dans les paramètres de taille
Notre newsletter et YouTube Channel vous permettent d’être l’un des premiers à connaître et à bénéficier de ce contenu gratuit.