With Elementor’s Posts widget, you can create a blog page that displays a list of any custom post types in various layouts and ways. This is a very practical widget that can be used to display recent posts, featured and popular custom post types and more.
Hey YouTubers,
this is Noah from Elementor.
Today I’ll be teaching you about
our fantastic Posts Widget.
With this widget, you could
display on your page any,
and I repeat, any custom post
type in numerous layouts,
a very important and practical widget,
so let’s get started.
First, we’ll search for the widget
and drag it in and once
it’s dragged into place,
you will see the Content
tab and the Style tab.
In the Content area, you have full control
over the Layout and the
Query of the widgets.
First, in the Layout
area, we have the Columns,
where you could set the amount of columns
displayed in the widget,
you could choose between one and six,
so say I choose two,
two columns or four,
etc.
Next we have Post Count, where
you could set the amount,
the exact amount of posts to
be displayed in the widget.
If I insert for instance, one,
you will see only one post,
or 20,
you’ll see 20 posts,
etc.
Then, we have Image
Position, where you could set
the position of the image
in relative to the contents.
We have Top, as in above the contents,
Left,
Right
or none at all.
Then, we have the Image
Size, where you could set
the size of the image from Thumbnail
to Full.
We have Image Ratio,
where you could set here
the exact ratio of the images
displayed in the widget
and then we have the Image Width,
where you could set the
exact width of the images
displayed in the widget.
Now, note that you could set
it in pixels or percentage.
Next, we have the Title
and Excerpt setting
for the widgets, so for
Title, you could set
whether to show it or
hide it by clicking here.
If you choose to show it,
you have the following
setting, Title HTML tag,
where you could set the
HTML tag for the title
as a heading, div, span or regular text.
Same goes for the
Excerpt, you could choose
whether to show it or
hide it by clicking here.
If you choose to show it,
you have the following
setting, Excerpt Length,
where you could set the
exact amount of words
that will be displayed
in the widget’s excerpt.
The default is set as 25,
I could set it as five
or 10,
see how it changes,
etc.
Now, next we have the Metadata,
where here you could select the metadata
to be displayed in the widgets.
A click on this field here
opens the list of options,
so you have Author,
Date, Time or Comments.
You could add it here
and you could remove it by clicking here.
Next, you have the Separator Between,
where you could insert
here the exact separator
that you want displayed between
the metadata, right here.
Say, I only give it one
slash,
you’ll see here how it changes.
Next, we have the Read More setting,
where you could also
choose whether to show it
or hide it by clicking here
and if you choose to show it,
you have the following
setting, Read More Text,
where you could insert the exact text
that will be displayed right here
in the Read More area of the widgets.
Say for example,
I delete this,
see how it changes here.
Those were the Layout
settings for the widgets.
We’ll move on to the Query
settings of the widgets.
First here, we have the Source,
where you could select the source
from which the widget
will display the contents.
We have Posts, Pages, Products, Galleries
and Manual Selection,
which we’ll go over soon.
After the Source settings,
we have the Filter settings.
First, we have Categories,
I could filter the posts
displayed by categories.
For instance, if I have a fashion category
in my website
and I insert
fashion,
see how only the fashion
posts are displayed
and same goes for tags.
For instance, if I have a
devices tag on my website
and I insert
devices,
see how only the devices posts
are displayed in the widgets.
Aside for these two filters,
we also have the Authors Filter,
which is extremely helpful
for those of you building
a website with many authors
and want to display only
a specific author’s posts.
A click here opens the list
of authors on my website.
Now, I’ll just go back and show you
the Source, Manual Selection option.
Here, as it sounds, I
could manually insert
the exact post or posts
that I want to display.
For example, I have a post
called Tips for Vacation.
If I insert this,
it should automatically
be displayed in the list
and I click on it,
see how only the Tips for
Vacation post is displayed.
That was the Manual
Selection Source option.
Next, we have the Advanced options.
Here we have Order By, where
you could set the order
in which they’re displayed
as in Date, Title,
Menu Order or Randomized.
Then, we have the Order,
where you could set
as Ascending or Descending.
You have Offset, where you can insert
the amount of posts to be skipped over.
For instance, if you insert
two, the widget will begin
its display starting from the third post.
Now that we went over
all the Content options
for the Posts Widget, we’ll
head over to the Style area.
Here, we have control
over the Layout, Image
and Content Style options in the widgets.
In the Layout, we have
first the Column Gap,
where you could set the exact gap
between the columns in the widgets.
We have Row Gap, where you could set
the exact gap between
the rows in the widgets.
We have Alignment, where you could set
the alignment of the content
in the widget as Left,
Center or Right.
Next, we have the Image Style options,
where you could set the Border Radius
as pixels or percentage.
Say we give it 100,
or 50,
etc.
We have Spacing, where you could set
the exact spacing between the image
and the content in the widgets.
Those were the Layout
and Image Style options.
Next for the Content Style options,
we have the Title Color,
where you could set
the Color of the titles
and Topography, which you
could set to Activated.
If you do, you have the
standard Topography options,
such as Size,
Font Family, Weight, Transform,
Style,
Line Height
and Letter Spacing.
After Topography, we
have the Title Spacing,
where you could set the space between
the title and the rest of the contents.
Then, we have the Meta
Color, where you could set
the color of the metadata right here,
say pink.
We have the Meta Separator Color,
where you could set the separator’s color
and Topography as well, which opens
for you the Topography settings.
Meta Spacing, to set the spacing
between the metadata and
the rest of the contents.
Then, we have the Excerpt Color.
We could set the color of the excerpt
and its Topography and Excerpt Spacing
between the excerpt
and the Read More text.
Last, but not least, we
have the Read More Color,
you could set the color of the Read More
and its Topography as well.
Those were the Style options
for the Posts Widget.
Now that we went over the widget’s basics,
I’ll just show you a few quick examples
for any displays you could set with it.
We’ll scroll down and in
this first section here,
we have a Posts Widget.
Now here, first for the Image Width,
I set
a width of say,
or 49
and
for Style
Image,
I set the Border Radius as a 100 pixels,
which made it completely rounded.
Say I were to set it as 50,
it would be a bit rounded,
but I set it as a 100.
For the Layout in the Style options,
for Alignment I set it as Center,
unlike Left or Right, I centerized it.
For the next section,
we have a really nice-looking section
with a grid like display
of the Posts Widget.
How did we do this?
In the Content area,
Layout, we set the Columns
as three Post Count, also as three
and the Image Ratio, we played around
with it a bit, which you could see.
Image Width, we gave it Full Width.
We played a bit around with the colors
and topography of the content itself.
The section, we gave it
a nice background color.
In this last section,
we have a more list
display for the widget.
Here, we set the Columns as two,
while the Post Count is four.
For the Image Position, we set it as Left,
so you could see, instead
of Top, we set it as Left
and Image Size, Thumbnail.
Now, Image Ratio, we also
played around a bit with it.
We gave it an Image Width as well.
As you can see, this widget enables you
to creatively add custom
post types to your page
with the special touch and display.
I hope you enjoyed this video.
For more videos and tutorials,
subscribe our YouTube channel
or visit us at docs.elementor.com.
