Le constructeur de page Divi a quelques modules intégrés fantastiques qui utilisent des affichages de grille, y compris la grille de portfolio, la grille de blog et la grille de la galerie. Mais parfois, vous pouvez souhaiter afficher des liens vers des pages sélectionnées de votre site plutôt que du contenu généré automatiquement. Vous pouvez facilement utiliser le module d’image Divi, mais c’est mieux de pouvoir inclure un lien de bouton, afin que les visiteurs comprennent que l’image qu’ils peuvent voir est aussi un appel à l’action cliquable. Vous pouvez utiliser un plugin, comme Essential Grid , pour réaliser une grille d’image avec des boutons, mais il est préfèrable ne pas avoir à ajouter un plugin à 26 € quand on n’en a pas besoin. Au lieu de cela, nous allons créer la grille ci-dessous en utilisant le module Divi Call To Action.
D’abord, ajoutez une section spéciale à votre page. Pour recréer la grille, choisissez la disposition tiers / deux tiers.
Commencez par sélectionner l’onglet Avancé de la section spécialisée et cochez la case Égaliser les colonnes et définissez la largeur de gouttière personnalisée sur 0. Assurez-vous également de le faire pour chacune des sous-sections jaunes ainsi que tous les paramètres de colonne de la section et sous-sections.
Maintenant, ajoutez une deuxième rangée avec deux colonnes à la zone de droite. Ajoutez votre premier module Appel à l’action. Nous allons d’abord personnaliser ce module, puis le dupliquer pour l’utiliser dans les autres zones du module.
Dans l’onglet Paramètres généraux de votre nouveau module Appel à l’action, ajoutez un lien et le texte de votre bouton puis centrez votre texte si vous le souhaitez, ce qui centrera également le bouton.
Dans l’onglet Conception avancée, ajoutez l’image choisie à la zone de l’image d’arrière-plan. Si vous souhaitez avoir un espace entre vos images de grille, vous pouvez utiliser l’outil de bordure. Enfin, définissez toutes les marges à 0px et le remplissage personnalisé à la hauteur désirée dans les cases supérieure et inférieure. Vous devrez peut-être jouer avec les paramètres de hauteur jusqu’à ce que vous soyez heureux.
Pour éviter le remplissage en arrière-plan et pour centrer verticalement les boutons, ajoutez le CSS suivant à l’onglet CSS personnalisé dans les zones affichées. background-size: inherit; padding-bottom: 0px;
A ce stade, vous devriez avoir une seule image, stylisée et prête à être dupliquée. Copiez-la dans les zones de la colonne de droite, de sorte que vous ayez un module d’appel à l’action dans chacune d’elles. Pour obtenir une grille uniforme, je place le padding haut et bas pour la section à 150px et pour les deux carrés inférieurs, à 132px. Cela ressemble à un nombre aléatoire, non? Vous pourrez avoir besoin de jouer avec les paramètres de padding pour obtenir une grille parfaitement uniforme selon vos images et vos désirs. Une belle touche finale est de changer les paramètres de padding pour tablette et mobile pour donner une hauteur uniforme aux modules une fois que le point d’arrêt de la tablette est entré. J’ai trouvé que 220px pour tablette et 150px pour mobile produisaient même des carrés pour les versions mobiles. Vous avez maintenant une grille finie!
Vous voulez un raccourci? Téléchargez ma mise en page de grille résponsive pour vous donner une longueur d’avance. Pour importer ce fichier .json, accédez à l’adminsitration de WordPress, à Divi> Divi Library et cliquez sur le bouton Importer / Exporter en haut de l’écran.