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.
Thank you! Can you give me any pointers or tutorials for how i might create my own svg image with my own logo and text Fullwidth Image Module. i.e. how to make the text and logo transparent and popping through the opaque layer so you can see the image below it.
Strangely, my preview shows a part of the setup screen (I’d show image, but guess that’s not supported here) – in particular, the words “Section Module Settings” and then the submenu for General Settings and Custom CSS. This is very strange, and it shows while viewing the site, too. If you like you can follow my website link above and try Gallery II. I have the correct image set as background, but can’t understand who I’m seeing part of the backend on the site?? Any ideas?
@Robin Alexander
Hello
Sorry for the delay in reply as I was little busy with some other work. 🙂
I checked your site and can not understand the issue fully, could you please upload some snapshots to http://imgur.com/ and share the image urls so that i can provide you some solution.
Seems Divi no longer accepts SVGs – tried to upload your SVG and also mine, but got this:
“divi-cafe-hero.svg
Sorry, this file type is not permitted for security reasons.”
Strange… is PNG next best thing?
Hello Brandon , yes you can use PNG but the error message you are seeing is not due to Divi , it is because you hosting provider has blocked svg images for you , please ask them to enable svg for you and it should work fine
Hello,
Would you help me, please 🙂
I would like to make the same gallery page as this one: http://elegantthemes.com/preview/Divi/cafe/gallery/
How can I do it?
Maybe is there any premade module (of course without photos)? Or some instruction. I didn’t fint it in this tutorial.
Thank you so much! Emese
To do this, must i first make an empty Theme? Because every theme brings it’s own header etc…
Hello @alex,
There is no need to create empty Theme, just create the Header on the page.
And select that page as the Static Home page form General>>Reading>>Select A static page (select below)>>Then that select page form the “Front page” drop down menu option.