In this tutorial we will see how to design the “CRAFT COFFEE” and “GOURMET PASTRIES” part just like in Divi Café Demo.
For this we will have to go through some simple steps,
- Add a ½ + ½ row in current standard section.
- Insert call to action and divider module in this row
for CRAFT COFFEE section you will need to add Call To Action + Divider.
And for GOURMEET PASTRIES add Divider + Call To Action.
- 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).
- Go to advanced design settings and enable “Equalize Column Heights”.
- For CRAFT COFFEE section add image url in Column 2 Background Image,
In café demo the image url used is: http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/homepage-latte.jpg .
- For GOURMET PASTRIES section add image url in Column 1 Background Image,
in divi café demo the image url used is: http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/homepage-muffin.jpg .
- Go to Call to Action Module Settings > Advanced Design Settings and put 12% in custom padding field for left, right, top and bottom,
and set all others things according to your need.
- Go to Divider Module Settings > General Settings and select “Don’t Show Divider” for visibility,
put 200px value in Height field.
- CTA module formatting (text and button) can be achieved very easily by editing in text editor and by advanced design settings, so set all the formatting according to the need and if we make all the things like in demo then it will look like:
If you have any query or suggestion regarding to this post, please feel free to comment below.
Stay tuned for more stuff in next article on Divi Cafe Demo.