In this tutorial I will explain about how to design the header part just like in divi café demo.

For this you will need to follow some very simple steps,

  • Add a fullwidth section.

new full width section

  • Insert a module called FullWidth Header.

fullwidth header

background image in fullwidth header

  • Turn “Use Parallax effect” to YES, select True Parallax as “Parallax method” and adjust custom padding 0px for top, right, bottom and left.

general settings fullwidth header

  • Now go to module settings > General Settings > choose “make fullscreen” Yes

fullwidth

background image url

Full width header of divi café demo is ready, and it will look like:

divi cafe demo header

Stay tuned for next part of this tutorial.

You May Also Like

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!

Share This