Divi Café Demo – Part 2 (4 images)

In last tutorial I explained about the header part of the divi café demo and in this tutorial I will explain about how to create those 4 grid-styled images just below the header.

For this you will need to follow given steps

• Add a Standard Section and (1/4 + 1/4 +1/4+1/4) row.
• Insert image module for all 4 fields.
• Go to section settings > general settings > and in custom padding field put 0px for top, bottom, left and right

custom padding general settings standard section

• Go to the row module settings and make the row fullwidth, enable the option of “Use Custom Gutter Width” and put the gutter width value 0, set all custom padding to 0px (i.e. top=right=left=bottom=0px)

fullwidth

gutterless row module settings

• Now add images in all four image modules.
  images used in divi café demo are-
  http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/rolls.jpg
  http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/muffin2.jpg
  http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/breadsticks.jpg
  http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/espress.jpg
• Enable “Open in Lightbox” feature for all image modules in that row.

open in lighbox

This section is now ready, and it will look like:

4image section

If you have any query or suggestion regarding to this post, please feel free to comment or create a new question.

Stay tuned for more in-depth on DIVI CAFÉ DEMO