Ok guys, I was messing about a few days ago & came up with a page (using the Divi theme) that had the background image covering the whole viewport. Then I added a 3D menu, which works using just CSS, no .js involved. I posted it to the Divi Theme Users group on Facebook & had quite a few requests for a tutorial, so here it is! Please be aware there a re no media queries sorted for this ..yet. I’ll update this tutorial when I have time to do them
Step #1 – The Prep
Create the page using the Page Builder and add a normal section, then add the background image to the section (best size 1920 x 1080) and set the Transparent Background to On
Then give this section it’s own CSS Class, I chose home-big
Now add a single column to the section, then add a Text Module to that. Using the Text mode, not Visual mode paste in the html
As the screenshot above doesn’t show all of the html I’ve included it in the image below
Now hit Save, then Publish.
Step #2 – The oily bits
Now comes the fun bit, making the html come to life. 1st we need to make the background image fill the viewport (screen), so we add this to the child theme css, which targets the .home-big class(the id given to the Section), and the postion of the menu on the actual page. As we only want this menu (well I did) to display on the Home page I targeted the actual Page ID to limit the css to just that page, and I targeted the row using the the .et_pb_row as it’s the only one on the page. The more correct way would’ve been to give the Text Module contained in the row it’s own ID, but this worked just fine. The padding for the menu position will need tweaking depending on your screen size.
Next we give the menu it’s basic style
Now we start on the menu animation
Then we style the 3d box
..and finally we finish off the 3d box and give the front face font a colour (#6495ed) and the backface font(when it rotates) a different colour (#fff), and that is basically it. Unless of course you’re not using a child theme (if not why?) and just using the epanel. If that’s the case don’t forget to hit Save after you’ve added the css.
I hope you found this useful & if you have any questions please feel free to ask via the Divi Theme Users Facebook group