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

Angelic Sanoy

Angelic Sanoy

Founder | Bookworm Head

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;