In this article we will see the Artisan Bread Section of the divi café demo. For sake of this article we are using the original images and text which is used in the original demo so that we can make it much closer to the demo.
To achieve this design we will follow some easy steps-
- Add a new Standard Section (1 column in a row)
- Open section module settings and upload a background image (in the demo http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/bakery-bg.jpg is used)
- Enable “Use Parallax Effect” and select True Parallax as Method
- Add a text module
- Put the text what you want to show
- Now open Advanced Design Settings and put 47.25% as “Max Width” then scroll down and put 5.5% in “RIGHT” custom margin setting.
- Go to the Row Setting > General Settings > Adjust Top and Bottom Padding to 27px (i.e. Top=Bottom=27px)
- Now add a new row (1 column)
- Add Image Module in this row
- Go to Image module settings and add an image path or upload a new image in “Image URL”. In divi café demo the image used is http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/loaf.png .
- Enable “Remove Space Below The Image” then Go to Advanced Design Setting and enable “Force Fullwidth”
- Now go to Row Module Settings of that Image Module
- Enable “Make This Row Fullwidth” and “Use Custom Gutter” and Drag Custom Gutter Width Value to the minimum (i.e. 0), Set all “Custom Padding” to 0px
- That’s all done here, the Artisan Bread Part is ready now, and it will look like.
Feel free to post any question, suggestion and information about Divi Café Demo.
In next article we will see how to achieve that dark background with two blurb modules till then stay tuned.