One of the many things that I love about WordPress is widget areas.
These clever little areas allow you to drag and drop your widgets into them, add text, graphics, links or whatever takes your fancy and hit save… that’s my kind of coding. Quick, clean and easily customised.
But did you know that the Divi Booster plugin allows you to create two widget areas with just a couple of mouse clicks?
The areas are: sticky widget area to left of screen and widget area below the navigation links and in this post I’ll be looking at how to activate and populate these two widget areas and… I’ll give you a few ideas on how you might use them.
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
Divi Booster’s two widget areas in action
Let’s start by looking at the two widget areas in action. The areas are called: sticky widget area to left of screen and widget area below the navigation links and that’s exactly what they are.
The screenshot below show both widget areas in action on a page from my local Divi theme install:
I’ve used both widget areas just to demonstrate where they are and what they look like and this is what I used to add content to them:
- Sticky widget area to left of screen – for this area I’ve used the Awesome Weather Widget plugin and I’ve set the weather for where I live: sunny Solihull in the UK. I’ve also given the widget a nice blue colour, which I think looks pretty cool and helps to grab attention.
- Widget area below the navigation links – in this area I’ve gone for a good old fashioned WordPress text widget and I’ve added a couple of links in the text. I’ve also used a teeny weeny bit of CSS to style the links to match the navigation links and make the widget area wider.
Setting up the “sticky widget area to left of screen”
In order to setup this widget area you have to activate it and then add a widget to the area in order for it to show on your pages and posts.
Activating the widget area
To activate the widget area, from your WordPress dashboard go to Appearance > Divi Booster and under the Layout tab click the checkbox next to Add “sticky” widget area to left of screen.
Hit save and the widget area is activated.
The widget area in the WordPress dashboard
Now go to your widget area via Appearance > Widgets and a new widget area called “Sticky” Sidebar (Left) will have been added to your widget area.
Drag a widget into the new widget area, add your content to the widget, hit save and you’re all done.
In my demo I added the Awesome Weather Widget, set the weather for where I live and styled it with a little CSS.
Setting up the “widget area below the navigation links”
Again we use the two step process in order to setup this widget area: activate it and then add a widget to the area in order for it to show on your pages and posts.
Activating the widget area
To activate the widget area, from your WordPress dashboard go to Appearance > Divi Booster and under the Header / Main Header tabs click the checkbox next to Add new widget area below the navigation links.
Hit save and the widget area is activated.
The widget area in the WordPress dashboard
Now go to your widget area via Appearance > Widgets and a new widget area called Header will have been added to your widget area.
Drag a widget into the new widget area, add your content to the widget, hit save and you’re all done.
In my demo I used a WordPress text widget, added my text plus a little html to create links and syled the links and width of the widget area with a little CSS.
A few ideas on how to use the Divi Booser widget areas
Now that you know how easy it is to activate and add content to these two widget areas, it’s time to think about what you might put in them.
I’m sure that your imagination is way better than mine, but just in case it’s been a long hard day and you’re feeling a bit jaded, here are a few ideas to get the creative juices flowing:
Sticky widget area to left of screen
This is prime real estate on any site so give it some thought before you decide what to use here. This should help to get you started…
- Floating social media icons
- A discrete contact form
- A “Skype us now” type button
- A newsletter / subscribe signup form
- A “rate this page” widget
- A short mini bio…”Hi I’m Keith…”
- A donate / buy me a coffee button
Widget area below the navigation links
Another area of your site that gets lots of views and needs to be used wisely I’m sure that you have your own ideas, but here are a few of mine…
- Social media icons
- Link to your latest blog post
- A newsletter / subscribe signup link
- A link to your current special offer
- A link to a splash page
- A donate / buy me a coffee button
- Your latest “hot” affiliate link
Those are just a few of the things that you can use these widget areas for and as you can see, some of the ideas can be used in either area.
You can use any of the above or you can use something that is more site specific for your particular content.
What is a “Sticky” Widget Area?
If you take a look at this one by ytravel you’ll see a group of social media buttons on the left of the page. The buttons are initially located just below the header, but if you scroll down the page their position becomes fixed so that they stay on the screen at all times.This is basically what a sticky widget area does. It gives you a place to put widgets that you want to stay in place on the screen as you scroll down. This is great for keeping social media icons on display or you could include a bio, a newsletter signup or details of a limited time offer.
Dan Mossop – Divi Booster developer
Add WordPress widget power to your site with the Divi Booster plugin
If you’re a Divi theme user and you’d like to add a little WordPress widget power to your website, then head over to Dan’s site and download your copy of the Divi Booster plugin.
The plugin is $15 and if you subscribe to his mailing list you’ll get a 35% discount until the end of Feb 2015 (20% thereafter).
You can install it on all of your own sites and on all of your client’s sites and with free updates for life you’ll get all the new options as soon as they’re added!
Q – Can I use it on more than one site? What about my clients’ sites?
A – Yes! Divi Booster is licensed for personal and developer use on unlimited sites. This means you can install it on any or all of your own sites, and on any or all of your client’s sites. But please don’t share your copy of Divi Booster with others, or make it available online.
I hope that you enjoyed the post and if you have any thoughts about what you could use these widget areas for, please leave a comment and if you’d like to spread the word about this fabulously clever plugin, please use my social sharing icons below.
Credits:
My thanks and gratitude to Dan Mossop for producing such a great plugin, for his help and assistance in completing this post and his ongoing development of the Divi Booster plugin.
Great article Keith. The ideas you propose have given me a good visual on how to use it. Well valuable.
The divi booster plugin seems well made. I’m using it with my divi theme websites. I have already suggested a method to Dan to change and add more Social Icons … as this requires editing a php file if you want to add more icons and open them in a new window.
One question … so when you are using Divi .. with the Divi Booster Plugin … do you put any CSS in the epanel … or do you put it all in Divi booster plugin?
If you were using CSS hero and the Divi Children Plugin … you could hypothetically have 4 different places where CSS is going.
Feels wrong to me. what says you?
Thanks Mark
Hi Mark – sorry for the late reply
“If you were using CSS hero and the Divi Children Plugin … you could hypothetically have 4 different places where CSS is going.
Feels wrong to me. what says you?”
Couldn’t agree more and that’s why I use the Simple Custom CSS plugin to store all my custom CSS.
That way I know where it all is.
Many thanks for stopping by.