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
- 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)
- 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.
This section is now ready, and it will look like:
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
Hi! I’m trying to put sliders and not background images but when I change the size or shape of the page they moves. Could you please tell me if there is any way to use sliders correctly and not see empty areas between sliders when I move the page?
Thanks a lot! Great tutorial!