How to Create an Astonishing Portfolio? Elementor Page Builder Tutorial. JetElements Add-on

How to Create an Astonishing Portfolio? Elementor Page Builder Tutorial. JetElements Add-on

November 8, 2019 17 By Kody Olson


Hi everyone, welcome to this tutorial. In
this video we’re creating a portfolio with the help of Elementor page builder.
To do that I will need a JetElements plug-in that you can also download if
you follow the link in the description. For this tutorial I’m using Monstroid 2
WordPress theme that you can also learn more about if you follow the link in the
description. So let’s go ahead and start creating a portfolio. Now I go to the
elements panel and search for the portfolio widget. Here is how it should
look. And I drop it onto a section and it
gives me a basic layout which I can fill up with my images. So let me go ahead and
quickly fill it up with the pictures so so we have a number of images to work
with. So now when you’ve got the images ready you can start working on on the
look of this layout within the portfolio module. Let me show you what every single
item has. So here you can add a category that has every single image. You can
manually type in a category and it’s going to appear over here.
And you can also show or hide this category here in the overlay of the
image. You change the title, the description, if you want to insert a link
in there you just go ahead and do it and add the link text and the button is
going to appear over here and you can add this button on every single image.
Now I’ll go and setup multiple categories for the portfolio. And as you have noticed while we were
adding the categories they were appearing here in a filter and this is a
pretty interesting feature that allows your portfolio items to be filtered. Now
here in the settings tab you can choose the layout type like masonry, grid,
justify and list. I’ll go with masonry and in the preset drop-down you’ve got a
number of style presets that you can later customize so it can a little bit speed up your
workflow. So we have a basic preset and you can later change it just the way you
like. And you can also save up some space in your portfolio if you got way too
many items you can add a few more button and you can hide a number of items under
that button. Like so, and once you click the button it shows all the other
elements of your portfolio. Now we can head over to the sell tab and you can
reduce the gap between the images, set the border type, border-radius, padding
and box-shadow. Here you can style the look of the filters. I will remove that icon like so and it looks.. it looks fine I
believe. So let’s leave it as it is. Let’s proceed to the content. Here I have the
style settings for the container which is the container for a portfolio item. For
every single image, I will add a box shadow like that and you can also work
on the items in here on the overlay. You can hide or show the category list. Here
it is. You can also hide that so it’s not gonna appear on the overlay of the image.
Here are the settings for the description and for the button if you have one and
here you can change the order of the elements. Like that, so we can move the
title up or down, you can move the description up and down and etc. And if
you have enabled a view more button you have also these style settings for the button.
And now you know how to start off with creating a portfolio with Elementor
page builder and JetElements plug-in. Don’t forget to go to the description
under this video and check out the links to the JetElements plug-in and
Monstroid 2 WordPress theme. Thank you so much for watching. If you like this
video leave a thumbs up and subscribe to our Channel