by Adam Preiser updated July 17, 2019

How To Add A Beautiful Portfolio To Your Website


Share on facebook
Share on twitter
Share on linkedin

Showcasing your work in a beautiful portfolio can be a challenge, until now.

The developers of the Astra Theme have just released an amazing new plugin to add a beautiful portfolio to your website.

You can even use it to showcase their white-label Astra Sites or use that for your portfolio.

It currently is only available as part of the Astra Agency package, but will soon be sold separately.

Video Transcript

If you’re building websites for people you
need to show off your work and in this video

this is what I’m going to show you how to
add to your website it’s right here this is

a interactive portfolio where you can show
your best work or in the example I’m going

to show you in this video you can show work
that you can do maybe some starter sites that

uses a starter point so here is what this
will be able to do you can have multiple ways

of categorizing your work so in this example
we have Beaver Builder or Elementor based

websites but then you can also have them categorized
by type will also be able to have this search

option and here is how the portfolio works
now any of these items it’s

you they can see what this is gonna look like
on a tablet or a mobile device and then there’s

a little X here to collapse that in their
back inside the portfolio and they can look

at other sites of yours so this is a great
way to showcase the work that you have done

or in the example for this video the work
that you can do to show you how to do all

of the circuit of a few gotchas that I get
to in a moment hi my name is Adam from

wire make WordPress tutorial videos for non-techies
to help you get more out of WordPress faster

if you’re new here consider clicking on the
subscribe button and if you don’t want to

miss a thing click on the Bell notification
Bell and YouTube let you know I have new videos

okay let me explain how this is going to work
now I did put a video out maybe a month ago

and here it is it’s on something called PODS
and that’s creating custom post types and

all of that kind of stuff and in that video
I didn’t go through the example of creating

a portfolio now I’m a firm believer that just
because you can custom in hand do something

yourself it doesn’t mean that you should if
there’s a better off-the-shelf option so you

can watch this video I use PODS I love PODS
it’s a great option but to get all of that

polish like you get here with all the hovering
in and all of this kinda stuff the I-frame

and all that you’re not going to get that
out of PODS without some serious serious custom

work so what I’m talking about is a new plug-in
that the folks from Astra just built and I

was showing you the portfolio that’s actually
on their website and they turn this into a

plug-in now initially starting tomorrow this
is good to be available to anyone who has

purchased an Astra agency license that has
access to these website demos I know a lot

of people on the channel have this I’ve been
talking about it a lot for the past six months

now I don’t know the details of what they’re
going to do the plug-in for the general public

I do believe they’re either going to give
it away or they’re gonna sell it my guess

is they’re going to sell it because there
isn’t anything like this this is an amazing

plug-in and I’m gonna show you it in this
video but there some special goodies for people

that have been are using Astra and so I’m
to show you the aster agency to get to this

site I have a link in the video description
or you go to one word

just quickly show you the aster agency pricing
it’s it’s a little bit of an investment is

250 bucks per year but it comes with a ton
of stuff in Cape number one it comes with

the theme of the Pro version of Astra it comes
with a suite of plug-ins and these just aren’t

random Huggins these are finely crafted plug-ins
that are the best at what they do there’s

a ton of value in it and plus it also comes
with something called Astra Sites premium

so those website demos that I showed you your
you to be able to restore those with a single

click and I’m in a show you that in this video
as well so comes a whole bunch of really cool

plug-ins that you can use on these sites it
really is kind of a business in a box so nothing

like chitchatting let’s see how we can implement
this plug-in on your website so I have a fresh

installation of WordPress here are the only
things that I have done is I’ve installed

Astra I’ve installed the Pro version of Astra
I’ve installed Astra premium cites actual

images show you and I as I’ve installed this
portfolio plug-in that will be made available

tomorrow Astra portfolio it looks like it’s
going to be available-for-sale some point

because there is a license code to activated
now what I show you in this video just know

that there are many things that might change
get better they are constantly making improvements

of things I’ve already made one or two suggestions
that I’m pretty sure that they are going to

add to it so you can see right here I just
have portfolio premium sites and asked her

probe if you have asked for agency you have
access to these two and soon you’ll have access

to the portfolio here’s what the front end
of the website looks like it is nothing impressive

this is how Astra looks right when you install
it there is no content so first I want to

make a beautiful website so I’ll go to appearance
of a good Astra Sites and it’s good to show

me all these websites and a click your words
is Elementor and let me choose this one right

here now this is a website for a web developer
so I really know I’m going to click on details

and preview looks like I need to install these
to some just to click on install buttons it’s

going install two little plug-ins and it’s
can activate those plug-ins and this is the

website right here the website preview of
what the websites can look like you’re in

a moment okay now my plug-ins are downloaded
and installed on the click on import this

sites click on okay so now what is going to
do is it’s gonna take that website I just

showed you and it’s going to take this and
just set everything up for me to be very convenient

so right now just saying it’s importing everything
which is fine will give it a moment okay looks

like the site is done so this is how my site
looked like a minute ago if I do refresh and

if everything works right it’s gonna look
like the site we just saw doing a refresh

and you can see this is now my website it
is gorgeous it is beautiful okay while is

actually very nice and it’s all done with
Elementor and you can see right here it is

showing off some of those Astra Sites right
I probably will maybe swap this section out

for the exact actual portfolio or let’s see
what here’s a tab that says websites may be

output the portfolio in here so yeah get rid
of these and I’ll actually put the portfolio

it puts these in but it doesn’t as not the
actual portfolio or someone can click on it

and see the website so that’s fine okay so
we know this is the page I’m going to edit

so back into WordPress so go ahead and click
this X and I’ve already built my beautiful

website so now here is portfolio when you
activate the portfolio plug in your to see

the portfolio options and here are those of
various options is so all portfolios these

are to be the each individual portfolio item
I can add new ones there’s the categories

these are to be words is all blog business
fitness other categories is here on the left

were chose Beaver Builder and Elementor’s
you can choose to leverage those however you

want I want to go to settings though to show
you something really really neat if you are

going to sell these Astra Sites and sell them
a starter site so someone comes your website

that could be the starter and you’re really
just changing text and image there’s is really

awesome little button here now I’ve actually
already clicked on this button if you click

on it it’s a set essentially going to take
all of the Astra Sites it’s can import them

into this portfolio plug-in so you can beautifully
display them on your website and they’re all

white label does show you that in a moment
now the way you’re going to show these portfolio

items is with the shortcodes so let me just
save a moment here and put this into my clipboard

and now we also have these options so we can
name it enables sorting by categories and

I’m also to check sorting by other categories
that’s where was Beaver Builder or Elementor

you can leverage it however you want and I’m
also going to enable the the search box there

and you can choose how many columns and then
when some scrolls to the bottom of the list

you can put some form of a call to action
right here now this will accept HTML and also

short code if you wanted to do a really nice
styled call to action that you make in Beaver

Builder or Elementor you can put the short
code for that save it and then put the short

code here for that but I just put a little
bit of text right now just so when you see

it on the front and you’ll know what I’m talking
about our rights so all I wrote was that you

pry when you some HTML to have a link or a
button or something like that I just puts

or do with the short code I just put ready
to get started contact us today have a beautiful

website to morrow summer go ahead and save
these changes that I made right now let me

show you all portfolios this is where all
the individual portfolio items are now when

you do the import like I did it’s going to
automatically add them all and when it does

that they’ll be sitting here in draft mode
so if I was a put that short code anywhere

something to show anything because actually
need to publish all of these so here I’m just

going to click on this box to go to bulk actions
edits to click on apply and this is going

allow me to publish them in bulk so many go
ahead and do that now let me show you the

anatomy of one of these portfolio item options
so here’s actually the site that I imported

right here someone to go ahead and click on
it so you have the name and this is what’s

going to show just underneath the thumbnail
picture then you have the URL now in the way

it’s imported this is how it looks you see
it doesn’t have the HT to answer anything

like that I’ve tested this in order to do
it here in a moment were going to actually

create one of these portfolio items but if
you do put HTTPS in the www.all that it works

just fine so we have that we have the categories
you can drop these in categories and then

we have the other categories that I was showing
you than just the master settings that doesn’t

even have any bearing on this and that we
have the few that featured image showing the

dimensions of these featured images here actually
let me go ahead and click on media because

you’re going to see what happened was all
of the thumbnail images for all of these websites

were imported and here they all are so if
I click on one of them you can see right here

the dimensions of the images need to be 600
x 600 but I got you covered to them to show

you how to make that in this video as well
okay so let’s go ahead and added a portfolio

item and then integrate this with our website
someone to go to portfolio I’m in a go to

add new and I’m in a go ahead and fill this
out really quick okay so I put this in the

put and I put the URL to my
website you notice I put the HTTP S and there

I chose blog for the category for other categories
I clicked on Beaver Builder however I want

you to know that I recently put Elementor
on my website and some pages are to start

being done in Elementor and I don’t have a
featured image so let’s go ahead and get one

now there’s a really great tool that’s free
if you use the chrome web browser it’s called

full page screen captures of you do a Google
search for full page screen capture. To see

this Google Chrome extension right here this
should be the one that I have it should say

installed added to chrome that means I have
this installed okay so now I’m in a show you

how to use this basically it’s an extension
and makes Chrome do more for you I don’t know

how way of doing this and the other web browsers
so you should have your web developer you

should have all the browsers on your computer
anyway okay so when you install and activate

this is good extension in your web browser
you’re gonna see the option right here it

looks like a camera right there so when you
hovered it says a full-page screen capture

so not let me show you how that works so here
we are on my website and all I have to do

is click on that little camera and you’ll
see what happens it’s going to do a quick

scan of my websites and then it’s going to
open up in a new tab here is a beautiful screenshot

of my website everything that’s on that page
so then there are these four options in the

top right the third one is to download it
right here in this is download image so my

go ahead and click on download image now you
need to have some kind of an image editor

to crop this to be 600 x 600 so let me show
you how I do it on a Mac but you should have

a similar application on a PC so when I open
that it’s here’s the name it auto generated

and then here it is and I have options on
a Mac is actually kind of hard to show you

so I go to tools and I go to adjust the size
you see this pop-up right here and I can adjust

the size so I know he needs me 600 x 600 so
for the width I’m been a change that to 600

now when I change it to 600 it automatically
adjusts the height someone go ahead and click

okay and it’s going to well make it disappear
let me see what happened to that I think I

might’ve just crashed my program okay that’s
odd it actually crash that’s a rare thing

that happened on my Mac but that’s okay anyways
I have it here and it’s now 600 in width so

let me just click on this little plus a little
bit to make it easy larger in my eyes okay

there it is so now what I want to do is I
can just drag like this and I want to make

it 600s you can kinda see a number there is
a 600 x 4 79 I want that to be 600 x 600 up

there is let’s go like that and that’s good
enough for me so now I’ve selected 600 so

I’m going to crop it by hitting command K
and here it is it’s 600 x 600 know if I go

to tools adjust size you’ll see it’s now 600
x 600 essentially just need to use any of

that image editor to make it that size so
I go ahead and close that and you can close

this tab right here let me go back into my
add new portfolio item a minute click on set

featured image and I’m going to go ahead and
drag that over now I’ll tell you this is the

file name I would probably suggest changing
the filename not leave it screen capture blah

blah blah you might want to change it to maybe
WP website template or something like that

so I’m dragging and dropping it across there
it is set featured image and there it is 600

x 600 I’m a to go ahead and click on publish
okay we now added a new portfolio item this

is awesome so I’m go back to settings and
get that short code in my clipboard and let’s

let’s go ahead and toss this in to the website
okay so I think we decided this was going

to be the site were going to get rid of all
of this and were going to go ahead and put

this and instead some to click on edit with
Elementor and I’m sure that’s just the section

and I can delete everything out of it yeah
just a section here someone to be able to

delete all of these some to go up here and
let’s get rid of that let’s get rid of that

get rid of that and that and now I have nothing
there so for shortcodes in any of these page

builders usually want to use the HTML widget
so let me do a search for that so here it

is HTML someone to go ahead and I want to
drop that right there and right here minute

pace my short code and then a minute click
on save okay so that’s going to save and it

should render out if I got this correctly
let’s see what happens when I go to view page

writes up there it is it works okay so sometimes
when you do this short code it might not show

here if I was to maybe get out of this and
then get back into it maybe it would show

it then slid CM out let me get back into Elementor
to see if it actually shows it’s no pictures

showing me the shortcut but that’s okay so
here I am on the site and you can see now

I have this in here I would probably add a
little bit of padding and it looks like there

might be a little bit of a CSS issue here
know it’s actually pulling the color from

here or for their so there is this branding
image this branding option that’s what it

looks like is happening but here it is I beautiful
portfolio on my website now and it was so

easy right so you can showcase your websites
that you designed or you can you can show

these these Astra Sites that you’re trying
to sell so I’m a scroll down to this and see

if we get our call to action up there it is
ready to get started contact us today and

have a beautiful website tomorrow so now let’s
see what happens when I load this up on my

website I’m a click on quick view and you
know what’s weird I think it might be that

URL it looks like it broke out of the I-frame
somehow you notice the URL change to let me

go ahead and see about that I want to go back
and this is what happens when I make these

videos without doing everything in advance
let’s look at this one okay aster agency.local

and okay so this is staying on the website
so I must’ve done something wrong with the

URL that I’ll go fix right now you notice
the website is completely white labeled let

me get out of that so for example I did make
a whole tutorial on this one and it used to

say Astra appear but now it’s white labeled
you don’t see it saying Astor are making references

to Astra anywhere and I like that not even
in the in this is nice not even in the footer

credits as a make reference to Astra all these
demos are completely white labeled now so

anyways this is the plug-in I love it I I
like the way you can sort I like how you can

have the multiple categories it’s all optional
I showed you how easy it was in this video

to make thumbnail images of your websites
and I just love this poor folate you know

I’ve looked in the past for something that
actually does this and I only found one little

option on code Canyon it was poorly supported
and it had no polish like this as this is

a beautiful way of displaying your prior work
so anyways if you don’t have master agency

and are interested in it go to
the video though be a link in the video description

down below I will add information as well
to the pin comment when I know when and if

this is available separately so if you don’t
have aster agency in you but you really want

this type of portfolio I’m sure that is not
far behind the actual release to aster agency

customers I think this is huge I think it
really adds so much value to the aster agency

package you saw how just in the short span
of this video I built a beautiful website

filled with demos that I could start selling
to potential customers immediately everything

white labeled and hosted for you you really
can’t beat that you really can’t beat that

at all so anyways let me know what you think
about this and do that in the video comment

section it down below and as always thank
you for watching this video and I can’t wait

to make the next one for you beautifully modern
portfolio you can hover over it and then there’s

a quick view button you click on that and
it’s going to load a preview of the website

just like this not what’s really nice about
it is it’s the person is still on your website

if you notice the URL did not change and that’s
because the websites can unload and then I

frame and what’s nice on the bottom right
here you have responsive options so your visitor

that’s checking you out checking your workout
or checking out what you can do

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

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

  1. I am using WP Portfolio on my agency website and it works great. As new Astra themes are added will Astra have an update to the plugin like normal plugins that adds the new themes? Can’t seem to find how updates will be handled on the Astra website.

  2. Hey Adam,
    I can’t seem to get this plugin to work with Wistia videos, do you know how to do this?
    Thank you

    1. I would reach out to them and ask if it is supported. I don’t use Wistia myself.

      1. Hi Adam,
        I do not see the Astra Portfolio plugin in the plugin search page. Is it still available?

          1. Hello, Thanks for the tutorial, I tried using the portfolio in my site through the portfolio widget in elementor, but not showing on the frontend

Stay Up To Date

Enter your name and email for the lates news, updates, and tutorials.