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.

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:

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.

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:

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.

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

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?