You are here:
< Back

Divi’s fullwidth header module comes with a full screen option that will set the height of the header to equal the height of your browser window. This is a great way to boost UX and design by keeping everything visible to the user (above the fold) no matter what size their screen may be. But you don’t have to stop at one header.

In this post, I’m going to show you how you can actually use the fullwidth header module to create multiple “full screen” sections that will cleanly adjust to the height of your browser. And, by adding some top and bottom “scroll to” buttons, this makes for a delightful viewing experience for users. Instead of scrolling, all they have to do is click and the next section will appear perfectly in their viewport.

Here is what I’m going to cover:

  • How to create 4 unique full screen sections using the fullwidth header module
  • How to create custom scroll up buttons for the top of each section.
  • How to use vw units to size to make sure content stays proportional to screen sizes.

See here for full tutorial and CSS snippets.

Previous Framing navigation with section dividers
Next How to remove the sidebar