• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Pixel21

Web Design, Development, Strategy, SEO

  • Home
  • Our Work
  • Services
  • Contact
  • About Us

BeaverBuilder

BeaverBuilder, WordPress · March 27, 2017 by pixel21

How to use BeaverBuilder to create footer widgets

This tutorial assumes these three things:

  1. Your theme can have at least one footer sidebar region enabled
  2. You know how to use BeaverBuilder
  3. You have enabled HTML in your widget

First enable templates in BeaverBuilder by going to settings->Page Builder. Follow the three steps in the image below and you will see "Templates" as a menu item (highlighted) in your WP Admin panel.

bbfooter-1

When you click on the newly added menu item "Templates", you will see a list of all the templates that you have created using BeaverBuilder. If this is your template, it will be empty and you need to click on "Add New" as shown in image below.

bbfooter-2

Clicking on "Add New" will bring up an interface similar to what you see when you are editing or adding a new post. Name your template something which is easy to remember. Also pay attention to the slug (highlighted) that is generated. Copy that slug or remember it. In this case, our slug is "footer-sidebar-1". Click on "Launch Page Builder" which will launch the BeaverBuilder to construct your template. Add elements like you normally would to construct a page. Don't worry about how it looks in the preview. When we embed it in a sidebar, it will take the width of the sidebar.

bb-footer-3
bb-footer-4

Once you are done with adding all the elements, click on "Done" from the top right corner, which will popup a prompt to publish your template. Congratulations ! you just created a new template in BeaverBuilder.

The next step is to create a Text widget and assign it to your footer sidebar.

bb-footer-5

Once you assign it to a sidebar, it will popup a form to input your title and content. Since we can create fancy title using BeaverBuilder, we are going to skip inputting the title and in the content area insert this string

[fl_builder_insert_layout slug="footer-sidebar-1"]

Follow the rest of the steps as shown in figure below and your footer should now display what you just designed in BeaverBuilder.

bb-footer-6

If your footer is only displaying the shortcode as a string, you probably didn't enable HTML for your widget. Follow this advice on BeaverBuilder help pageĀ http://kb.wpbeaverbuilder.com/article/192-use-shortcodes-in-your-layouts

Like what you saw, have questions or requests for more tutorials, let me know in the comments. Thanks.

Primary Sidebar

Recent Posts

  • Shocky – Profile website Mockup design using Webflow by Pixel21
  • Addos – A product – service mock-up Webflow design by Pixel21
  • Maddox – A Webflow design by Pixel21
  • Top 5 misconceptions about DRUPAL
  • Kanshu-Chemicals (company site) Webflow design by Pixel21

Footer

Connect with us

Get the latest tips and tricks

Please enter a valid email address.
Let's Go!
Something went wrong. Please check your entries and try again.