WL_Thumbnails_1280x720.mp4

0 views

en Português Español

How was the video ?

Description

Transcript
Tags

Auto Scroll

00:00:00

In this tutorial, I'm going to be going over the Thumbnails widget
00:00:03

The Thumbnails widget is an easy way to add multiple pictures into an elegant grid of thumbnails
00:00:10

You can see it's down here at the very bottom
00:00:12

When you create a thumbnail widget, it's going to want you to add the pictures individually
00:00:19

You can add a title and a subtitle here
00:00:26

In order to add an image, you would simply click add a new element
00:00:30

When you do that, it'll take you to that new thumbnail
00:00:35

You can see that there's a space here reserved for it
00:00:37

You would simply add your image
00:00:39

You can drag and drop or use the browse
00:00:42

You can use our global media library full of a bunch of free pictures
00:00:46

Let's go ahead and just use our media library just to see how this works
00:00:49

If you add a title, what this will do is this will create a title and a subtitle within the thumbnail when a user clicks on it
00:00:59

It'll show the full picture, plus the title on top and the subtitle below that
00:01:04

Down here is the SEO, the open graph, and the URL, which has gone over in a separate tutorial
00:01:13

Once you're done with this particular picture and element, you would just simply make sure everything's saved and then go back to the main thumbnails
00:01:21

That can be accessed either on the top menu here or simply click the back button down here
00:01:27

When you go back, you'll see that new element has been created and it's given the title that you choose
00:01:33

Let's go ahead and add another one and let's keep it circular to keep everything uniform
00:01:41

If you decide not to add a title and a subtitle, it'll just show just a picture
00:01:47

When you click on it and it'll automatically create a name for you when you go back to the thumbnails
00:01:55

When you go back, you can see it has auto -generated a name for you and you can see them now both aligns right here
00:02:01

Let's go ahead and add a few more so you can see what it looks like with the full board full of thumbnails
00:02:23

Now let's keep all the pictures circular just to keep everything looking nice
00:02:28

Now you see here, it just creates each picture that I created automatically adds it
00:02:32

If you want to organize your thumbnails into different grids, you can determine the number of columns in mobile
00:02:40

If you want just one column, you can go ahead and keep everything all in one line
00:02:45

You can see now it all, it made everything a bit bigger and aligned in one column
00:02:48

You can separate the different desktop versus mobile columns
00:02:56

Now when we create four columns, you can see it just added all four of them in a row now
00:03:02

For additional options, you can require users to be logged in in order to actually view the thumbnails and whether or not these pictures are visible on mobile only or on desktop only and the additional styles
00:03:16

are just like all the other widgets
00:03:18

You can determine the space that it takes up on the desktop as well as custom widget class if you know any CSS and you can determine the background style
00:03:26

So if you want to go ahead and give this just like a solid color for a background, it's a very simple matter of updating that and saving it and you can see it has now created
00:03:35

a background and that is the thumbnails widget