WL_List_Preview_1280x720.mp4

00:00:00

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

00:00:04

The List Preview is an easy way to show a preview of an already existing list

00:00:10

And it's an easy way to organize and format that preview

00:00:14

So in order to create a list preview, you will have to have already created a List widget in order to preview

00:00:21

You can watch the List tutorial in order to see how to create a list

00:00:26

You can see on the right here, this is the same list we used in that previous tutorial

00:00:30

So if we wanted to create a preview for this list and only show a few items and not the entire list, we can simply create a List Preview

00:00:38

You would go to Add a Widget and it's located right next to the List, simply create a List Preview

00:00:44

Let's go ahead and go back and move this on top of the list so that it loads before the list

00:00:50

And then once you open it, it's going to ask you to choose which widget you want to preview

00:00:59

So you can simply see the drop down

00:01:00

We only have one list so you would simply choose that widget

00:01:03

If you have multiple widgets, you'll be able to choose which one you want to preview

00:01:07

Once you select that, you can determine the number of items that are shown

00:01:10

We just want to show three items

00:01:12

And you can also determine the order that they're shown in, such as the default and manual list order is determined by the actual list itself that you're previewing

00:01:21

It's going to show it in that order

00:01:23

Or you can show the most recent to oldest or the oldest to most recent, you know, organize it by date if you want to do that as well and you can organize it differently than the

00:01:33

actual list

00:01:34

And the item style is what's previewed and what we see for the preview, such as if you want to see just the title plus the abstract

00:01:40

We can see that once we save it, it's going to show us three previews right there, just the title and just the abstract and it got the date there as well

00:01:49

But if you want to see something different, you can do just the title and the image

00:01:54

That's actually going to show the images for them and then the list is actually beneath that

00:02:01

So you can see you can determine what's previewed

00:02:03

You could do just the title only if you want to take up a lot less space and that's going to be just those three titles

00:02:09

And then if they were to open one, it would actually show that entire list item

00:02:15

They'd be able to scroll up and down and how it is opened is determined by the actual list itself

00:02:21

If you want to change this and open in a modal or a separate page, you would have to edit the actual list itself that it's previewing

00:02:27

But for the list preview widget, it's very easy to use

00:02:32

You'd simply choose the widget that you want to preview, the number of items shown on the preview, how it's ordered and what you want to see with the item style and you can even organize it,

00:02:44

the columns on mobile versus desktop, that should be something you're probably already familiar with already, as well as the additional options, pretty easy to use

00:02:51

If you want to hide this on mobile or desktop, you can flip any of these switches and you can flip this if you want to be logged in in order to actually see the preview and

00:03:02

the additional styles are just like all the other widgets

00:03:04

If you want to add a nice background or custom widget classes with some CSS, you can do that right here, very easy to add backgrounds to the preview and you can do that separately from the

00:03:16

actual list itself

00:03:17

You can see we just add a nice simple gray background to the preview

00:03:20

The preview is highlighted with the background, the actual list itself remains the same and you can determine how the preview looks right with these settings