Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Add content before and after the Vertical Menu in the Beaver Builder Theme

The vertical menu in the Beaver Builder Theme can be placed on the left or right of the page and is an easy way to make your website unique.

When you build a website with the Beaver Builder Theme’s vertical menu feature, though, you’ll often find that there’s some incredibly valuable real estate underneath the menu that goes unused.

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

This tutorial will show you how to fill this useful space with a Beaver Builder Template so you can design content using Beaver Builder modules and have the content appear under the menu automatically.

Below is what we’re going to recreate.

In our example we’re going to add a newsletter subscribe form module and under that add some social media icons that are available with the UABB third-party addon for Beaver Builder.

You can add any Beaver Builder module you’d like, though.

vertical menu in the Beaver Builder Theme final outcome

And it’ll work on both the left and right side on the page, just like below.

An example of a right vertical menu in the Beaver Builder Theme

Here’s how it’ll function responsively. Perfect, eh?

How adding content to the vertical menu in the Beaver Builder Theme works responsively

Step 1: Activate the Beaver Builder Templates menu item in your WordPress Dashboard

To go your WordPress Dashboard > Settings > Page Builder > Templates and CHECK the checkbox to Enable Admin Templates.

Beaver Builder plugin settings where you can Enable Admin Templates

Check the box Enable Templates Admin so that you can access your Beaver Builder Templates from your WordPress Dashboard.

Then, click the blue button Save Template Settings and you’re done.

Now, you should see a new menu item on the left that is titled Templates, as per below.

FemiBlogger-newtemplates

Step 2: Create a new Beaver Builder Template and design the content you wish to add underneath the menu

In the WordPress Dashboard > Templates section, click Add New and give your Template a name.

Here’s what we’re going to use for our example.

add-content-vertical-menu-bottom-template

IMPORTANT: Make note of the slug of your new template as we will need this later. The slug of your new Template is in the Permalink below and is everything AFTER fl-builder-template/

So, in our example above, our slug is vertical-menu-content-bottom

Now, design the Template using Beaver Builder just like you would when you create a standard Page in your website.

Once done, click the blue Done button in the top left to save the Template, as per the below animation.

add-content-vertical-menu-save-template-bb

Step 3: Add the new Beaver Builder Template to the bottom of the Vertical Menu in the Beaver Builder Theme

Now that we’ve created the content we wish to add to the bottom of the vertical menu in the Beaver Builder Theme, all we have to do now is output it where we want.

To do this, use your FTP client or cPanel to navigate to your theme’s functions.php file and add the below PHP code into your theme’s functions.php file.

THINGS TO NOTE WITH THE ABOVE PHP CODE

  1. In the above code we have added comments to help you follow the code so we suggest going through the code line by line. In summary, the above PHP code gets the content of our header menu and adds our Beaver Builder Template to the end.
  2. wp_nav_menu_items is a standard filter in WordPress that you can read more about here. It basically allows us to get the content of the menu we are wanting to add our template to.
  3. Make sure you update slug=”” to match the slug of your template (the slug you noted down in Step 2 of this tutorial).

Once complete, you should now see your new content at the bottom of your vertical menu in the Beaver Builder Theme, just like below.

add-content-bottom-vertical-menu-final

EXTRA! How to add content BEFORE the vertical menu in the Beaver Builder Theme

If you wanted to, you could also update the above PHP code in your functions.php file (that you added in Step 3) and output your Beaver Builder Template BEFORE the menu (i.e. above the menu) like the below screenshot.

add-content-vertical-menu-above-before-final

Complete the form below to instantly get the code you need to add a Beaver Builder Template ABOVE the Vertical Menu in the Beaver Builder Theme

To do this, you just need to change $items .= $bb_content; to $items = $bb_content . $items; on line 9.

Here’s the final code below to output the Beaver Builder Template BEFORE the vertical menu (i.e. above).

Wrapping it up

In three easy steps you can now add content to the vertical menu in the Beaver Builder Theme.

As a recommendation, don’t put too much content above or below your menu, because if you have a longer menu, people on laptops and smaller PC screens may not be able to see all your menu items. That’s always a risk when using Vertical Menus.

When using this method, try and and limit the number of menu items in your menu and use the space as an opportunity to increase lead conversions. Maybe have a call to action button to Get A Quote on your service, or have a Subscribe form to get more people on your newsletter.

Comment below

Don’t forget to comment below if you have any questions.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x
//