WL_Header_1280x720.mp4

00:00:00

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

00:00:03

Now a header, in case any of you are unfamiliar, when it comes to websites, a header is what's always at the top of a site

00:00:11

That's going to be any content or background, that's at the top of a site

00:00:15

And you can put any links, any buttons, any text, and images, and videos with any header

00:00:21

And that's always going to remain the first thing that the person sees when the website loads because it remains at the top

00:00:27

That's just how a header works

00:00:28

So you can see here, I've created some text and a button right down here at the bottom

00:00:35

And I've done that for demonstration purposes and you'll see why in just a bit

00:00:38

So when you go ahead and add a widget, header is located here near the top

00:00:42

Once you create a header, you can add any of the content you want

00:00:48

So for example, if I want to make a nice background, you can choose from solid colors, even images, or even videos

00:00:59

So let's go ahead and make a nice image

00:01:01

You can choose anything from our global media library

00:01:04

This is full of thousands of pages that you're able to use for free

00:01:07

Or you can upload from your own computer, you can drag and drop, or browse to the file

00:01:15

Make sure to click upload if you're uploading it from your own computer

00:01:18

And once you upload and save that, you'll notice it has now created a nice, bamboo border on the top here and then followed by our text and button

00:01:31

You can put different text within this

00:01:36

So for example, if you want to do a title and a subtitle, let's go ahead and make this white just so that it matches the background a little bit better

00:01:46

And you can even adjust the different size and fonts right over here

00:01:52

And whether it's left, center, or right, you can add images and videos as well

00:02:00

Now this is different from the images and videos up here because this is just for the background

00:02:04

So if we go ahead and save this, we can add an image if we want

00:02:07

So there's our title and subtitle

00:02:09

If you want to add an image, let's go ahead and add something from our global media library

00:02:18

And it'll automatically create that image for you

00:02:21

And that's relative to the text

00:02:23

You can adjust that right over here

00:02:25

So whether it's above the text below the text or to the left or right on a desktop

00:02:29

And if you add more than one image, it'll automatically create an image slider

00:02:34

So for example, if we want to add and create the second image, you can see that it automatically made the slider

00:02:42

It's going to slide between two images

00:02:45

You can adjust the settings for the slider right over here, whether it's slides or fades and then the time

00:02:51

You can even add a video by simply uploading a URL right here

00:02:54

And you can determine the frame that the video is in, such as if you want that YouTube video to look like it's in a MacBook Pro or desktop computer

00:03:02

Or the model is when it pops out separately

00:03:05

You can add buttons

00:03:07

You can add buttons of pretty much any type and that's gone over in the buttons tutorial

00:03:11

You can also adjust the space that it takes up right here and the animation styles

00:03:22

And for additional options, they're just like all the other widgets you can require whether it uses to be logged in or whether this is visible on mobile only or desktop only

00:03:30

So this is actually really useful for a header because as you know, desktops have much bigger screens

00:03:35

So it's often worth it to make a different header for a desktop that will actually display maybe with a better images or even different images completely

00:03:43

So what we can do is let's go ahead and just view this site just to see what this looks like on the different screens

00:03:49

So you can see on the larger screen that bamboo actually is a bigger picture

00:04:00

So you can see more of that picture right here

00:04:02

Whereas on the smaller screen, it's a smaller picture

00:04:06

You can see less of it

00:04:07

So it still works for a small picture

00:04:09

But let's go ahead and give that bigger screen like a video instead, which works better on computers usually

00:04:15

So if you go ahead and view the site, you can see it is a much larger picture

00:04:19

And you can see the title in the image right there or the link, sorry

00:04:24

So if we go ahead and switch this to mobile only and save this

00:04:31

Now let's go ahead and create a new header for the desktop only

00:04:39

And let's go ahead and have a video for this one

00:04:56

So we're going to make a video for this background

00:05:00

And then we have to make sure to switch this to desktop only

00:05:11

So now you see, once we've saved this, nothing's changed on our small screen here because this is only the cell phone

00:05:19

But if we go to our actual main site and refresh this, you can see it now has that nice bamboo video background

00:05:30

And that's actually a really nice background

00:05:32

You can do a lot with that if you know what you're doing because it actually flows pretty smoothly

00:05:37

And what I was talking about earlier when it comes to headers always being at the top, let's go ahead and go back to our main page here

00:05:44

And you can see normally when you arrange things in here, it actually rearranges the location

00:05:52

When it comes to the content block right here with the text and then the button is below that

00:05:55

If I went ahead and rearrange the button above the content block, you will now see the header is still always at the top

00:06:02

But now the button is above that

00:06:04

And no matter where you move that header to, it's always going to be at the top because that's what a header does

00:06:09

That's the nature of the header

00:06:10

So always keep that in mind

00:06:12

This is often going to be one of the first widgets you want to create because that's often the first thing that they see when the page loads

00:06:19

So that is how the header works