Learn how to make a portfolio website in WordPress with Elementor’s drag-and-drop website builder.
Display your portfolio projects, or any other custom post types, in a unique and visual way that will impress your site visitors. This is a really fun and useful widget, that is great for high-end designed websites.
– [Instructor] Hey everyone,
this is Noah from Elementor.
Today I’ll be teaching you
about our portfolio widgets.
This widget combines
practical with incredible
as it enables you to
add any custom post type
to your page in a very
visual and unique display.
So first we’ll search for the widget
and drag it in and once
it’s dragged into place
you’ll see the content
tab and the style tab.
In the content area you have full control
over the layout, query, and
filter bar of the widgets.
So in the layout area we
first have the columns
where you can set the amount of columns
displayed in the widget.
So you can choose between one and six.
Say I choose two or four
et cetera.
And then you have post count.
You can set the exact amount
of posts to be displayed
in the widget.
So I could choose say one
or 20 and so on.
And next we have the image size
where you can set the size of the images
from thumbnail to full size.
And we have item ratio
where you can set the ratio
of the images in the widget.
Next we have show title.
You could choose whether
to hide or show the title
of each post by clicking here.
Showing the title will display it
while hovering on the images.
See it.
Now if activated note how
another option is added.
Title html tag.
Here you could select the
html tag for the title
as a heading, div, span, or regular text.
So those were the layout
options for the widget.
Next for the query options.
We first have source
where you could select the source
from which the widget
will display the content
as posts, pages, products,
galleries, or manual selection.
We’ll be going over the
manual selection options soon.
So after the source setting
we have the filter settings.
The first one is categories.
I can filter the posts
displayed by categories.
For instance I have a fashion
category in my website,
so if I insert fashion
and click on it,
see how the widget only displays the posts
with the fashion category.
Now same goes for tags.
I have a devices tag on my website,
so if I click on it
see how only the posts
with the tag of devices
are displayed in the widget.
Now I’ll quickly just go back
to the manual selection option
that I told you about
and here as it sounds
I can manual insert
the exact post or posts
that I want to display.
So for example I have a post
with the title of “Tips for Vacation”
so if I insert it and click on it
see how the widget
displays only this post.
After this we have the advanced options.
So the first one is order by.
Here I can set the order
of the posts displayed
by date, title, menu order, or randomized.
And then I have the order
where I can set as
ascending or descending.
And I have last but not
least here the offset
where I can insert the amount
of posts to be skipped over.
For instance if I insert
two the widget will begin
it’s display starting from the third post.
So those were the query options
for the portfolio widget.
Next is the filter bar options.
So here I actually have a show option
where I can set whether
to show it or hide it.
Now once activated
another option is added.
The taxonomy option.
Here I could select the
taxonomy from which the widget
will display the posts.
So here we have categories,
tags, product catergories,
product tags, or gallery categories.
So I’ll choose tags and see
how it’s displayed up here.
So those were the content options
for the portfolio widgets.
We’ll move on to the style tab.
So here we have control over the items,
item overlay, and filter
bar style options.
In the items we first
have the item gap option
where you can set the exact
gap between the items.
Say I give it 80 or 5 et cetera.
And then we have border radius
where you could set the
border radius for the images.
Say I give it a 100, see
it’s completely rounded,
or only 50, or zero, so on.
Next we have the item
overlay style options
where here you can set the
background color of the overlay
when hovering over the items.
Say pink, see how it changed to pink
and we have the title color
where you can set the color
for the title of the overlay.
See how it changed to pink also.
And typography which we
can set to customized
which opens the standard
typography options
such as size, see,
font family, weight,
transform, style, line height,
or letter spacing.
And next we have the
filter bar style options
where here we can set
the color of the text
or only the active color,
meaning the color for only
active text in the filter bar,
and typography which we can
customize or deactivate it,
and we have filter spacing
where you can set the exact
spacing between the filter bar
and the images below it.
And we have space between items
where you can set the exact space between
the items themselves in the filter bar.
So those were the style options
for the portfolio widgets.
So as you can see this
is an extremely helpful
and fun widget.
I hope you enjoyed this video.
For more videos and tutorials subscribe
to our YouTube channel or
visit us at docs.elementor.com.
