Comment utiliser des grilles horizontales et Débordement caché avec Divi

Depuis que Divi a introduit de nouvelles options de taille, nous avons créé des tutoriels qui montrent comment créer un apocalypse pendant que vous passez le curseur. Dans ces tutoriels, le contenu caché est placé verticalement. Cependant, dans certains cas, vous voudrez peut – être créer une détection horizontale. Dans cet article, nous vous montrerons comment utiliser la souris pour survoler le maillage et l’option Divi overflow pour afficher des images. Le travail exige une approche légèrement différente. Nous utiliserons une ligne pour convertir en colonne et placerons tous les modules un sous l’autre. Lorsque vous passez le curseur, nous convertirons la colonne en grille horizontale. 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 Pour obtenir la disposition de la grille lorsque vous déplacez la souris, vous devez d’abord la télécharger en utilisant les boutons en bas. 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 accéder au paquet de mise en page Divi
Durée de la transition dans les paramètres de transition. Durée de la transition: 0 MS Pour créer un maillage pendant que vous passez le curseur, vous ouvrez les paramètres de colonne, allez à l’onglet avancé et placez les lignes de code CSS suivantes dans l’élément principal pendant que vous passez le curseur:
Affichage: grille;
Colonnes du modèle de grille: 20% 25% 25%
Espacement des mailles: 10px; Une fois la première ligne terminée, vous pouvez cloner autant de fois que nécessaire. Pour cet exemple de conception particulier, nous clonerons la ligne deux fois. Changer l’arrière – plan de la rampe pour la ligne de répétition 1 change la première couleur de la rampe pour l’arrière – plan de la deuxième ligne. Couleur 1: # ffdc96 Changez l’arrière – plan de la rampe de la ligne de répétition 2 pour faire de même pour la troisième ligne. Couleur 1: # b7c7ff Changez la couleur de la copie du formulaire de texte et du soulignement continuez à changer la couleur du soulignement de la copie du formulaire de texte et de la copie, et vous avez terminé!
Couleur du soulignement # 1: # ffaa00 couleur du soulignement # 2: # 0037ff Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment afficher une image dans une grille horizontale en utilisant l’option overflow de Divi. Les images sont affichées après avoir été placées sur le Bureau et après avoir cliqué sur la tablette \/ téléphone. Bien que nous ayons montré l’image, vous pouvez afficher n’importe quel type de contenu en changeant les paramètres dans le générateur. Nous espérons que ce tutoriel vous inspirera également à créer votre propre conception alternative de maillage de curseur de souris! Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous! Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous inscrire