How Create Mansory Divi Layout With Text Inside The Image Using CSS Grid

Written by Angelic Sanoy
To have this kind of design, we will need to use custom classes and grid.

Please declare the grid-image custom class in the menu and add a class in the row called grid-container then duplicate the container two times to have 3 column image. Here’s the quick screen recording.

Please go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:  Feel fre to change the font-size according to your liking.

.grid-container {
display: grid;
grid-template-columns: repeat(3,33%);

.grid-image p {
margin-top: -7em;
padding: 2%;
color: white;
font-size: .9em;
line-height: 1em;


Share This