How to make a full screen image or video background landing page in Beaver Builder

Beaver Builder is a great way to get a landing page built really quickly and we’re seeing beautiful child themes and templates released by the community and the Beaver Builder team, every day.

Landing page templates are cool, and beaver Builder releases some really great templates with their theme. You’ll notice that all of the templates feature great full-screen images, video or background colours, but they omit the header site logo and menu. What if you want to keep the header but retain the full-screen images or background videos? In this technique, we’re going to show you how to achieve this without additional plugins or code.

header screenshot

An example of the page we’re about to build

You can see how this would look in the screenshot above and by example on this page, built using this technique.

Set up a header menu

If you don’t already have a header menu set up, head over to Appearance > Menus and create your menu. Set this menu as your Header Menu. We’ll be using this menu as we progress through this tutorial.

Create a new landing page

Create a new page and open up the page builder to start editing. Add a new row to the top of the page, and set it to be full width, full height and set Content Alignment to ‘TOP’. We’ve set our row to display a slideshow of images from our media folder, but you can set this as a single image, a video or a coloured background as you prefer. Here’s a screenshot of our row settings:

header row settings

Set your Beaver Builder row settings to start building your full-height, full-width image or video background landing page.

On the advanced tab of the row settings, make sure your row margins are set to 0px. You can leave the padding settings as default so that when you scale down your viewport, the content area retains the padding on each side.

Add logo and menu

Next, we’re going to add a 2 column row and add our logo and menu to each adjacent section. Drag the 2 column row from the modules list and set the column widths so that the logo and menu have enough space in each of their columns. We’ve set ours at 30 / 70.

For the logo, add either a text or a photo module and set the module preferences as you need. We’ve added a text module as our logo which matches the choice we made in the Customiser > Header > Header Logo settings.

header logo settings

For the menu on the right, add a Menu module and set the preferences to suit your layout. To match the layout we created, set the menu module preferences as follows:

header menu settings

Change your Beaver Builder module settings to match these

For both the logo and menu, we have set the display options in the advanced tab so that each of these elements only displays on large devices. For mobiles and smaller screens, these elements will clash with the Beaver Builder mobile header settings so it’s best only to show our new logo and menu on larger screens. After all, that’s where we want the full-screen screen design to really shine.

header advanced menu settings

Set your menu to display only on large devices

For the last step, we’re going to head over to the customer and set the preferences for our header. Head to Customiser > Header > Header Layout and set the ‘Fixed Header’ to Disabled and set ‘Hide Header Until Scroll’ to Enabled. For scroll distance, play around with the setting until you find a good balance between our new elements and the header menu alternating between each other on scroll.

Beaver Builder Header layout settings

Beaver Builder Header layout settings

That’s it. You can add other elements as you like to the page and save it as a template if you plan to use the layout on multiple pages.

J7Digital have a neat plugin to handle complete replacements for both your header and footer. Check it out here. Also, as Peter Luit mentions in the comments below, he’s experimenting with these concepts in more detail here – > Go check it out.

If you’d like Beaver Builder to have this feature built in, why not vote for it here?

Posted in

Michael Davis

Chief brainstormer at I'm Not Marvin, a development agency specializing in WordPress Applications. I've been in web development in one form or another since the late 90's. If I can't be reached I'm probably hitting the trail on my mountain bike.
  1. Andrea on July 13, 2016 at 3:48 pm

    This is great, thank you! I love the screenshots of the settings. Very brainy, indeed. 🙂

    • ian on July 13, 2016 at 3:57 pm

      Thanks, Andrea – beats having to type it all out! 🙂

      • Andrea on July 13, 2016 at 4:23 pm

        Then it was even brainier than I thought! 🙂 You’re welcome, Ian. I love your tuts; please keep them coming!

  2. Peter Luit on July 13, 2016 at 4:23 pm

    Nice idea, without a line of code, well thought of…. However I do see two (little) disadvantages:

    • menu is not sticky, today a standard…….
    • the method has to be repeated for every page

    Also have a look at this possible solution:


    • ian on July 13, 2016 at 4:32 pm

      Hey Peter – check out the example page here – the menu does appear as you scroll. But yes, you would need to template the header and add it to every page, so this is more a solution for landing pages. I’ll add that link to the tutorial as an alternative.

      • Peter Luit on July 13, 2016 at 4:44 pm

        Thanks Ian, I already ‘went over’ to the other methode. Also some disadvantages there:

        • because of background images in the row, images do not react responsively (might be prevented, by not using images in the background, but within a slider module
        • not sticky (yet), that might be solved wit a bit CSS also

        Kind Regards,


  3. Peter Luit on July 15, 2016 at 9:47 am

    Hi Ian,

    It might be nice to add to your article, which combines your solution with teh one in

    Kind Regards,


    • ian on July 15, 2016 at 10:12 am

      Thanks Peter – It’s a great experiment you’re doing and I’ve added a note in the article…

Leave a Comment