WL_Buttons_1280x720.mp4

00:00:00

In this tutorial, I'm going to be discussing the buttons widget

00:00:03

The buttons widget is an easy way to add a single or multiple buttons to a certain section of your website

00:00:09

Those buttons can serve a variety of functions such as sending an email

00:00:13

You can link to an external website such as Facebook

00:00:16

You can even start a phone call with the button

00:00:18

So in order to create a button, you would simply add the widget

00:00:22

Now you may have noticed that there's buttons sections within other widgets such as the header and the content block have button sections in there as well

00:00:31

These functions are pretty much identical to the way buttons are made here except the buttons widget is for creating just buttons and that's what we're going to be discussing in this video

00:00:39

So once you've created your buttons widget, you would simply see this is a list of buttons is empty

00:00:45

So in order to add an actual button, you would simply click add a button and this is going to take you to that buttons page

00:00:53

You can see down here the buttons created at the top but there's nothing in it in order to determine what the button does

00:00:58

You would choose the link type here and there's many different link types

00:01:02

For example, if you want to go to a different page within your website, a different internal page, you can open up a separate page within that same site

00:01:11

So if I wanted to go to the second page, you can choose an internal page or if you wanted to link to an external website such as a completely different Google or like Facebook, you can

00:01:20

link externally through there and you can even scroll to a certain page section or widget with this link

00:01:28

This one's pretty interesting

00:01:29

You would simply choose the widget you want to scroll to

00:01:32

Like for example, if I wanted this to scroll all the way down to the bottom, you would simply choose the bottom widget and then you can give this some text like scroll to bottom so that

00:01:40

people know that it scrolls to the bottom

00:01:42

Let's just see how this looks real quickly

00:01:44

You can even add an image from like our global media library over here

00:01:48

We have hundreds of free images to use or you can drag and drop from your computer right here or even use the browse function

00:01:56

You can also choose one of our many free icons for your buttons as well

00:02:00

So we have many icons available for you to use

00:02:03

Let's just say I wanted to use like a down arrow just to show that this is heading down

00:02:07

So I would simply click the down arrow here and you can save this and you're going to see it has now created that button

00:02:14

It says scroll to bottom and it has a little down arrow icon

00:02:18

You can click that and you see it will scroll all the way down to the bottom and then let's say for example you wanted people to scroll all the way back up because they'd already reached

00:02:26

the bottom

00:02:27

You can put a button that does the same thing

00:02:28

You would simply scroll all the way up to the top one and then it'll function the exact same

00:02:35

As far as the other link types, they're pretty self explanatory once you kind of get into them

00:02:39

But you can send an email to like let's say you wanted to send an email, when it's people to send an email to you, you would simply type your email address here and it would create

00:02:47

that button and then people would be able to click that and it would open up their email application and they'd be able to send an email to you easily

00:02:55

You can even start a phone call here

00:02:56

You can type your phone number if you want people to reach you

00:02:59

They can do it with a single press of a button or even send an SMS message such as like a text message or that's very easy

00:03:07

A lot of people prefer that

00:03:09

So if you wanted people to text you instead, you can use that with a button

00:03:12

You can even do a Skype call as well

00:03:14

So if you have a Skype account, you would simply type your Skype account name right in there and then people can call you on Skype

00:03:19

They can even use WhatsApp or Facebook Messenger chat, which is pretty neat

00:03:24

WhatsApp is a free messenger program

00:03:26

You can download that and simply type in your WhatsApp mobile number and then they can reach you through that way or Facebook Messenger, which is linked to your Facebook profile

00:03:35

So once you've determined what it is you want your button to do, you would simply give it the text and icons and image if necessary and then you make sure it's saved and then you would

00:03:43

go back to the buttons menu

00:03:45

You can do that by clicking the menu here by going back or clicking the back button right down here on the bottom

00:03:52

Once you go back to the buttons menu, you'll see that button we just created is right down there

00:03:56

You'll see it's right there and it still functions

00:03:58

Scrolls right down to the bottom and you can add multiple buttons on the same widget

00:04:03

So if you want to do like, you know, email me, call me, everything

00:04:07

You can do all that in one big bundle

00:04:08

So let's just create a second one just so you can see how this works

00:04:17

And then if you wanted people to email me, you would simply set that email and you can see it has created the second button directly below that

00:04:24

As far as mobile is concerned, it's going to usually be a lot smaller on screens

00:04:31

You know, so it's going to automatically organize that for you

00:04:34

But you can also determine the number of columns, especially on desktop, how it's arranged

00:04:38

So if you go ahead and we can see this on full screen, we go to the full site

00:04:42

You can see it has the two buttons right there on, right on top of each other

00:04:46

If you wanted to arrange it in columns of two, you would simply click two and you can save that

00:04:52

And if we go back to the main site here and refresh this, you can now see it has rearranged this into columns of two, putting them right next to each other

00:05:00

So that's an easy way to arrange your buttons on desktop

00:05:04

And as far as additional options, they're pretty much all the same as all the other widgets

00:05:08

We have the ability to require login or mobile only or desktop only

00:05:13

This is actually really useful for buttons as well because let's say that you have a business and you want people to call you, you can put your call me button and then switch that to mobile

00:05:22

only

00:05:23

Because most people don't ever call from a desktop

00:05:25

So there's no reason to even show it on that desktop screen

00:05:28

You can, however, put your Skype or your email on a desktop and as well as mobile

00:05:33

But have the mobile only, you know, just for calling

00:05:36

And that's an easy way to do that

00:05:39

So once you've set everything and all of your buttons are set, you can rearrange it within the main widget page

00:05:46

So if you were to drag and drop this below the content block, you could see the buttons are now below there

00:05:52

So that's an easy way to keep buttons together and rearrange them with this buttons widget