• 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

pixel21

Infographic · April 26, 2017 by pixel21

5 WordPress Plugins Worth Paying For

5 WordPress Plugins Worth Paying For (1)

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.

Uncategorized · March 26, 2017 by pixel21

Hello World or Ahoy World

Hello World Image

As is customary for really first anything programming related, I was going to just post "Hello World" and leave it at that. Then I started thinking about how the word "Hello" came about and stumbled across this article A (Shockingly) short history of "Hello" .

Here's what the article says about origin of "Hello"

The dictionary says it was Thomas Edison who put hello into common usage. He urged the people who used his phone to say "hello" when answering. His rival, Alexander Graham Bell, thought the better word was "ahoy."

After saying "ahoy" a few times in my mind, I may start saying that instead of "hello", how about you? Let me know in comments.

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.