Créer une disposition de maillage d’image réactive en Divi en utilisant CTA et la superposition du curseur de la souris

NDI met à jour les lignes dupliquées avec une disposition à deux colonnes. Partie 2: ajouter une image comme image de fond de colonne maintenant que toutes les lignes et colonnes sont en place, nous sommes prêts à ajouter l’image à la disposition de la grille. Pour s’assurer que les images répondent dans la disposition de la grille, nous ajouterons chaque image comme image de fond aux quatre colonnes de la section. Comme chaque image de fond a une taille de fond de couverture, l’image remplit toujours la colonne entière lorsque vous redimensionnez le navigateur.
Pour démarrer l’image de fond de la ligne supérieure, ouvrez les paramètres de colonne de la ligne supérieure. Ensuite, ajoutez une image de fond à la colonne. Ensuite, ouvrez les paramètres de la colonne 1 de la deuxième ligne (en bas) et ajoutez une image de fond à la colonne. L’image de fond est ensuite ajoutée à la colonne 2 de la même ligne. Section spéciale image de fond de la colonne 1, et enfin, ouvrez les paramètres de la section spéciale et ajoutez l’image de fond à la colonne 1. Partie 3: ajouter une invitation à l’opération de superposition d’image à chaque colonne puisque notre image de fond a été ajoutée à chaque colonne de la disposition de la grille, nous ajouterons un formulaire d’invitation à l’opération à chaque colonne comme superposition d’image avec le bouton CTA. Utilisez le formulaire d’invitation à l’action comme superposition sur une image de fond de colonne pour ajouter facilement des styles et des effets personnalisés de superposition de fond lorsque vous passez le curseur sur l’image. Il ajoute également un CTA personnalisé à l’image. Dans cet exemple, nous utiliserons simplement l’élément bouton dans le formulaire d’appel pour l’action
Mais vous pouvez aussi facilement ajouter un titre ou un contenu de corps au – dessus d’un bouton en utilisant l’option contenu.
Créer un module d’action d’appel pour ajouter la première invitation à une action de superposition d’image, ajoutez le formulaire d’invitation à l’action à la colonne de la ligne supérieure. Mettre à jour le contenu de l’appel d’action comme suit: supprimer le texte du titre supprimer le corps du texte de l’URL du lien du bouton: # couleur de fond: transparent (bureau), rgba (255235,77,0,5) (vol stationnaire) Remarque: ajouter \ Styles de boutons continuer à mettre à jour les paramètres de conception des exigences d’action pour les boutons comme suit: styles personnalisés pour les boutons: taille du texte du bouton s: 22 Px couleur du texte du bouton: # ffeb4d couleur de fond du bouton: # 000 (bureau), Ec5f00 (curseur de souris) Largeur du bord du bouton: 0px rayon du bord du bouton: 100 Px caractères du bouton: déplacer les Sands poids de la police du bouton: demi – gras remplissage du bouton: 0,5em haut, 0,5em bas, 2em gauche, 2em droite Ensuite, nous devons nous assurer que notre module a une certaine hauteur pour exposer les images de fond des colonnes suivantes. Pour ce faire, nous ajouterons un peu de remplissage en haut et en bas du module. Nous ajouterons également une bordure mince au module afin qu’il so it légèrement séparé des autres images dans la disposition de la grille.
Mise à jour comme suit: largeur: 100% remplissage: plus de 15vh, moins de 15vh largeur du bord inférieur: 5px largeur du bord gauche: 5px colonne
Heures de bordure: rgba (255255255,0,5) Note: l’utilisation des unités de remplissage VH fait que la valeur de remplissage est relative à la hauteur de la fenêtre du navigateur. La hauteur de l’élément de grille d’image augmente et diminue ensuite à mesure que la hauteur de la fenêtre du navigateur augmente et diminue. Pour vous assurer que le contenu du formulaire d’appel d’action reste centré verticalement, vous pouvez ajouter un petit CSS personnalisé en utilisant l’attribut Flex. Dans l’onglet avancé, ajoutez les CSS suivants à l’élément principal: display: Flex;
Direction de flexion: colonne;
Aligner le contenu: centré; Ajouter une action d’appel outrepasser à d’autres colonnes la première action invite maintenant le formulaire à avoir un style, copier et coller le formulaire dans les 3 autres colonnes de la disposition complète, y compris les 2 colonnes dans la ligne inférieure et la colonne 1 dans la section dédiée. Pour s’assurer que le formulaire de demande d’action occupe toute la hauteur de la colonne 1 de la section spécialisée, mettre à jour la hauteur minimale à 100%. Hauteur minimale: dans des conditions normales de 100%, cela ne fonctionne pas pour les modules de la colonne normale. Cependant, en raison de l’attribut Flex sur la colonne, le module est essentiellement un sous – élément Flex, de sorte que la hauteur minimale de 100% fonctionnera. C’est tout. Voyons le résultat final. Le résultat final ici est le résultat final de la disposition de la grille sur la page en temps réel qui répond à l’image. Voici les effets lorsque vous déplacez la souris. Voici une réponse conçue pour redimensionner le navigateur. La mise en page de la grille d’images en réponse à l’idée finale demeure un aspect populaire de nombreux sites Web. La combinaison de l’aspect visuel fourni par l’image de fond et de la couverture des besoins opérationnels peut vraiment faire ressortir ces liens de navigation importants. En outre
La disposition de la grille d’image est parfaite sur tous les appareils, ce qui est toujours nécessaire. J’espère que vous en aurez besoin pour le prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!