by Adam Preiser updated May 18, 2017

How To Add Shortcodes Or Buttons In Header & Widget Areas


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

How To Add Shortcodes Or Buttons In Header & Widget Areas

Welcome back to another video I’m Adam from where a make videos for non-techies

like me and just maybe like he was well so
in this video ominous you to do something

really cool if you’re using something called
Beaver Builder and that’s a page builder that’s

very powerful now I think the most important
aspect of any website is that you have clear

calls to action and that is telling your website
visitor what the next step is that you want

them to take while they’re on your website
and usually you want to put that call to action

in the header area of your website that would
be the top area of the website where you have

your logo and your menu navigation so this
with you on the show you how to add really

slick buttons like you see right now in the
header area and it even works with your team

has a sticky nap sending so I scrolled a little
bit in the the call to action stays right

there is even a work with that as well now
the way I’m accomplishing this is with a feature

that’s built into Beaver Builder where you
can create something you can save it as a

template and then you can use it anywhere
on your website using a short code now the

only problem with a short code is there’s
lots of areas of your website like a menu

navigation or a widget where it doesn’t accept
short codes so you can put it in but is not

to show it so let me show you how to over
overcome those hurdles first so I’m logged

into the backend of WordPress here in a go
to the plug-ins area now I really have the

plug-ins installed but I wanted to show you
the names of them so there’s two plug-ins

that you can use if you want to put a button
or a Beaver Builder element into the menu

navigation so on this case I’m putting this
button in the menu navigation you can accomplish

that by adding a plug-in called short codes
in menus and I’m in a show you how that works

in a second now if you want to add this short
code to a widget area of your website you

want to use this other plug-in called short
codes anywhere or everywhere so there really

isn’t a lot of settings between these two
plug-ins first let me show you what setting

you would need to add two short codes anywhere
or everywhere out and let me just preface

these are free plug-ins there are available
if you just go to plug-ins add new into the

search for them you’re going to find them
there’s no cost to adding these plug-ins your

site so first let’s look at short codes anywhere
so I got to go to settings short codes anywhere

or everywhere you click on that in regular
you have to enable or disable where you want

these short codes to actually work so for
me in widgets you would have to click on in

widgets and then click on this checkbox right
here but this makes it so that you can use

the short codes and all sorts of different
places I just enabled the in widgets right

there so and by default of course your short
codes and working plug-ins and post absurd

pages and posts so let me show you how I did
it in the menu now the first thing you want

to do is actually create and save whatever
element that Beaver Builder produces that

you want you need to create and save it as
a module is save the module so I’ve shown

you how to do that in prior videos and I surmise
well just going to right now but you need

to have this enabled the templates in Beaver
Builder so if you don’t have this templates

link you need to go to settings page builder
and then you need to click on right here it’s

his templates and you need to check on this
box that will get you this templates section

right here know when you’re in Beaver Builder
when we go into Beaver Builder page you can

save anything in it will save it to templates
I’m just do this real quick it’ll be really

fast for those of you that or do you know
how to do this I’m jumping into a page in

Beaver Builder right here so see this is a
button are you would have to do is click on

it and then right here click on save as and
then put a name that’s all you have to do

in order to save something that you’ve created
in Beaver Builder so you would basically create

a button save it as a module and then tweak
the settings however you wanted it so I’ve

actually already done that’s let me get out
of the page editor here and show you the button

that I created so I’m still go back into the
admin go to templates in its right here it’s

called CTA button CTA the acronym for call
to action so when you click on it and then

click on the launch page builder this will
allow you to tweak the button to make it look

however you want to now I have it right aligned
you can tweak the alignment of the button

and actually we need to do that a little bit
here because the button is a little too close

to the normal navigation here so we can put
a little padding here on the left so what

I do that now so here’s the button to click
on it to be able to change its settings and

I’m a click on advanced and I’m good at a
little bit of margin here on the left let’s

say maybe 20 pixels or something like that
now this is a saved module and what I’ve noticed

is when you have a safe module in you inserted
someplace with a short code that Beaver Builder

add some padding that you’re probably going
to want to remove let me save this button

before I do I’m using the button module that
is found in ultimate add-ons for Beaver Builder

I have a link on that down below it adds this
really slick dual button feature that I like

but you can change a lot of things like the
padding here around the button and other you

just control all of it I’m just can leave
it standard here so let me go ahead and click

on save now I was just in a moment ago that
Beaver Builder add a little bit of padding

when you when you’re using a saved module
is a short code so you have to put a little

bit of CSS in to remove that so if I go to
tools and then click on layout CSS here’s

what I added and I can add this below but
if you’re comfortable CSS and be real easy

for you to do but it’s basically.FL builder-module-template
to make the padding zero so doesn’t put any

padding around it you’re going to need to
do that so I’m to go ahead and click on save

in memory made a little adjustment here to
the margin so let me click on Don and publish

those changes okay so let me show you how
to take this in inserted anywhere that will

accept short codes and first will go to the
manual some go ahead and click on dashboard

click on templates no need to find something
called the slug of this saved module, click

here it’s a CTA button and right here is the
slug CTA button summon a highlight in him

and a copy this into my clipboard know if
you don’t see this slug area you would have

to click on screen options and then check
on the box so this is how it might look for

you but once you check the box now you have
that slug information Sonoma go to appearance

and then I’m good to go to menus and here
is my main menu you can see I’ve already added

it here but let me just remove it okay so
here is the menu now if you’ve activated the

short codes and menus you have this new option
here that’s a short code so you can do drop

down and given a name this name is used anywhere
it’s just a you would build identified if

you had a big menu so managers call it up
button like that and then I’m to put my short

code here now in my prior videos I went through
how to do this short code thing with Beaver

Builder and I’ll make sure I put a link down
below this video it’s also I have a Beaver

Builder resources page on my website are leveling
to the below that covers everything related

to Beaver Builder including this short code
let me show to you so this is the format of

the short code right here and I can basis
anywhere for you in this part here it’s a

slug insert posts like that’s where we need
to take that slug we just got out of the saved

modules let me paste that in and now I can
click add to menu in your to see just added

it right there and then I’m a click on save
menu now I am going to do a refresh in our

member added a little bit of margin your physical
like the nab was a little too close to the

button so for your refresh ECL pushed it out
a little bit and that’s kind of what I was

going after now a few caveats with using short
codes in menus the plug-in I don’t it has

to do with the plug is just the way that themes
are coded now in some themes the way you have

your button set up it will still inherit the
styles of that area and what I mean is even

though I’ll set a font for the plug in for
this button here and I might set a font size

and some different settings it’s still been
inherent whatever we have the fonts in the

font size be for the menu unfortunately there
is some inheriting that goes on I’m sure is

a way to overcome that using CSS but that’s
just the way that it is right now but you

can see how easy that was to add a button
to the navigation now here are some neat things

that you can do with this cake so with the
Beaver Builder theme or a lot of seems there’s

different ways that you can style your navigation
meaning you have your logo on the left and

you have your menu on the right or maybe you
can have the logo on the left and then the

menu underneath it now typically fits a local
business a good menu format is that your logo

on the left your menu underneath it and that
leaves this space this clear empty space on

the right of your header where you can put
these call to actions right there phone numbers

hours whatever information that clearly is
displayed and you’re telling that person that’s

on your website what you want them to do next
so that is where these short codes in the

menu short codes in widgets are really powerful
when you parried up with Beaver Builder because

now you can easily design a beautiful area
there to take up that white space and you

see this on some websites go to work will
have the hours and the phone number and different

things like that in the looks really nice
so that’s where these short codes for Beaver

Builder superpowerful when you parent up with
one of these free plug-ins that allows you

to use the short codes anywhere on your site
that is nontypical area to use a short code

so that is it for this video I hope you find
some real creative uses for this as I have

what can you do something for me if you’re
watching this on you too can you give me a

thumbs up and I want to invite you to subscribe
to this YouTube channel there’s a button right

beneath me and I really appreciate if you
did that and I got something for you I don’t

want you to leave empty-handed if you just
click off here to the side it’s a free video

course that I put together just for you Colby
three steps to WordPress success you will

love this course registration is free right
now all you have to do is click on the link

right next to me thanks for spending this
time with me and I can’t wait to make another

video for you

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

Your email address will not be published. Required fields are marked *

  1. Please edit your transcription to be in proper English. It makes no sense – example:

    Welcome back to another video I’m Adam from where a make videos for non-techies

    like me and just maybe like he was well so
    in this video ominous you to do something

    1. If you would like to help with that I would appreciate it, but at this point, it doesn’t make sense for me to do it manually.

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.