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.
- Insert a module called FullWidth Header.
- Go to section settings > general settings > select a background image.
(In the original demo, image on this url http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/cafe-bg.jpg is taken as background image.)
- Turn “Use Parallax effect” to YES, select True Parallax as “Parallax method” and adjust custom padding 0px for top, right, bottom and left.
- Now go to module settings > General Settings > choose “make fullscreen” Yes
- Select an image for “Background Image URL”
(In the original demo image on this url http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/04/divi-cafe-hero.svg is taken)
Full width header of divi café demo is ready, and it will look like:
Stay tuned for next part of this tutorial.