How to Make Portfolio Websites in WordPress with Elementor
Articles Blog

How to Make Portfolio Websites in WordPress with Elementor

August 8, 2019


– [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.

Only registered users can comment.

  1. This is probably a dumb question but I've seen it done on one other builder (but poorly) so I figured I would ask. I realize it will need to be in an update but is there anyway to make it possible to show the "excerpt" instead of the title on hover. Either way this looks great and I'm probably going to purchase it soon but that would definitely convince me.

  2. Can I make video portfolio grid with it with static text overlay over it?
    Grid showcase videos and to not make extra rows with text , (half transparent) text or picture overlay on top video show short title and brief description.. Same could go with audio files and grid of square soundcloud players. Not all people are photographers, so just photo grid is not enough to call it portfolio widget.. it's more gallery than portfolio. Would be nice to consider the fact that various people need to make portfolio not only photographers.

  3. when i create a portfolio, it open in a new page. but i want it open in a lightbox, how can i do that ?

  4. Hello, I'm using the theme Blask and I have already my site (more or less…). Now I want to change the number of columns and other things and I can't find the widget portfolio. Why? Thanks

  5. Thanks for the video, but….how do you make a post load only the photos? I could not do it. 🙁 Could you explain please? I´m Pro User

  6. How come you do not show how a portfolio image appears after you click on it? It would be nice to see how the final result works.

  7. I have a question, can I add on the Portfolio thumbnail a mouse over behavior ? for example the thumbnail portfolio image switch in to a different one? Thanks

  8. I'm confused. When you drag the portfolio widget, you get your images to auto populate. When I drag the widget, I get a thin grey bar, and there are no images. This is the same problem I'm having with the slides widgets, and image carousel? I read somewhere that you have to set images as "featured" for this to show up the way you do but I don't think that's correct because you can only set one image as featured, meanwhile you were clearly able to add three all at once as shown in this video. Can you please help?

  9. Hi. This widget definitely gives the best display and customization options, compared to others that I tried. One question. How do I make the links open in a new window? So that visitors read details of the portfolio item on a new page?

  10. How can I change the images already set in the portfolio for my images?
    I can edit several things, except the text of the images and the images.
    Can you please help me?

  11. it didnt work for me 🙁 not able to add the pictures , how come the pictures just appears as she drag and drop the widget ?

  12. Thank you. can you recommend a WordPress plugin for creating more content-types, or post types? In your tutorial there are galleris and products.

  13. Is it possible to set "Post Count" to unlimited? I want to load more and more elements from portfolio by scrolling the page down.

  14. I dont have any option for using porfolio tool dont appear image how can appear image how can it linking the other website

  15. Hi, I currently use elementor PRO. I need to use thumbnails on my portfolio section and when the user clicks any thumbnail I'd like they could see other images inside this "proyect". As an example, the images in my portfolio will be clients logos, and when you click on any of them, you'll be able to see images of the particular proyect. How can I achieve that? Thanks!

  16. Thank you for this video, very helpful. I would like to know if it is possible to have the title directly under the image all the time? This way you do not have to roll over the image to have the detail.

  17. I love the plugin….. but since I'm complete beginner, I wish there would be more examples of each options shown and not just read since I can read them myself – I'm visual person and I like the actual presentation. Thank you 🙂

  18. the images from my posts don't show up! I click and I get redirected to the post which is fine, but in portfolio they are just grey boxes that show the title when I hover over. whyyyyyy

  19. I wanted to use this Portfolio feature to display a galley of my original artwork, click on the thumbnail and a larger version of the image would appear along with some info about it. That's how I am used to seeing Portfolio's on websites….this "Portfolio" feature you have is actually only a display of actual posts to your website and not for lack of a better term "an advanced image gallery" at all?

  20. I think I understand the styling options of this widget, but I can't figure out how to populate the portfolio with images (it seems like a lot of other's are having this problem/confusion too). I'm building a new site with the portfolio as the main content. I don't have any "posts" with feature images to populate the portfolio with. Can I just populate the portfolio from my media library? There is a "manual selection" setting under query>source, but then what? What do I query for? Where? How?

  21. Nice video ,

    In this demo site there a "Styles and Products" section , when click on image it's open a another slide or page. But how do they do it.
    https://demo.themovation.com/entrepreneur/stylist/

  22. How is this a portfolio if it only shows images from posts? I don't want to create posts and add images there, I want a good portfolio to display my work.

  23. the portfolio is great for products filtering but is there a way to add the price with little in the portfolio overlay or even under the image

  24. great widget, but where is the "filter by category" option? Did you remove it from the widget? how do I use this widget to display POSTS FROM A PARTICULAR CATEGORY ONLY?

Leave a Reply

Your email address will not be published. Required fields are marked *