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.
Craft Coffee Section
And for GOURMEET PASTRIES add Divider + Call To Action.
Gourmet Pastries Section
- Go to section settings > general settings > and in custom padding field put 0px for top, bottom, left and right.
custom padding in general settings
- 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).
gutterless row module settings
- Go to advanced design settings and enable “Equalize Column Heights”.
equalize column height
- 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 .
column two bg image
- 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 .
column one bg image
- 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.
custom padding cta
- 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:
Craft Coffee and Gaormet Pastries
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.
Hi!
Wonderfull post, it’s awesome to finally haveing some help for this demo 🙂
I don’t understand how you build CTA module. Is it a building module called CTA, or is it just a text modul that you custom ?.
If it is a text module, can you show us how you build it ?
Thank you very much !
Hello Lilian,
CTA (Call To Action) is a separate module and you can find it in Divi Builder.
Let Me Know if any question..
Great post! But what do you mean “put 200px (in image it is 100px) “? When you use an image should it be 100 or 200 px? Thank you.
@Andrew
Sorry for the confusion, It is 200px .
And I have already updated the post.
Please let me know if any confusion.
Great tutorial.. i love you! 😀
@Travis
sorry for the delay in reply, i was busy with some personal matters, let me know if you still need some help with this, i can check it for you.
Thanks, great tutorial.
I am finding that it doesn’t display on a mobile device correctly though? How can I fix this?
could you please suggest what is the issue you face on mobile ?