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.
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
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.
And it'll work on both the left and right side on the page, just like below.
Here's how it'll function responsively. Perfect, eh?
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.
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.
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.
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.
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
- 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.
- 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.
- 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.
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.
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.
Don't forget to comment below if you have any questions.