How To Add A Beautiful Portfolio Grid To Showcase WordPress Websites Or Demo Websites
Articles Blog

How To Add A Beautiful Portfolio Grid To Showcase WordPress Websites Or Demo Websites

August 21, 2019


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 WPCrafter.com 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 WPCrafter.com/Astra 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 WPCrafter.com 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 WPCrafter.com/Astra
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

Only registered users can comment.

  1. It is better to use “Shortcode Widget” instead of HTML, when you want to display and have live preview of some work in Elementor. But your videos helped me also a lot 😉. Thx Adam

  2. Hi Adam, thanks for the video! I have two questions about this plugin:
    1-Does it only work with the Astra Theme or with any theme?
    2-Does it give you control over the appearance of the portfolio items (for example changing the animations on hover, the size and the ratio of the items etc.) or you have to do it manually through css?
    Thanks

  3. love this and am SOO excited!! Just gotta find time to re-do my website using Astra + Elementor Pro … tedious task (made it with Visual Composer and a theme from themeforest) (ugh)… gonna test this using local flywheel! Learning SO much from you!

  4. Adam did you figure out how to fix your website link (have it show in the iframe)? You said you were going to go back but I don't think you did.
    Great feature to have.

  5. Hello Adam, great video. For sure this website screenshot extension is maybe the easiest way to create a capture of your site, but FYI Chrome itself has already a website screenshot feature. Just use Cmd-Shisft+C to open the dev tools, then use Cmd+Shift+P and finally type "screen" and you will see an option to capture the entire website.

  6. That is super impressive. One thing I don't think I heard you mention- but I've heard several web dev's talk about is when you link your portfolio out to a clients site, the client could have made changes to it since you worked on it. A lot of times, clients make poor design choice or break things. With this, you could have a copy of the site (as you built it) saved to show off. I think this is why a lot of designers show screen shots instead of linking to the live site. This could help with that.

  7. When is the plugin going to be available for download. I have the agency licence but cannot see the plugin for download

  8. This is great, just bought astra agency and already in love with it. (The black friday promotion still works with the promo code?)

  9. Sir
    I have two affiliate websites one is for US people and another one is for Indian people. But I have a problem that is "many people from India are visiting my US site and many people from US are visiting my Indian site" I need to make a notification page with url to make Indian people who come to US site to go to Indian site and make US people who come to Indian site to go to US site. Please help

  10. Thank you for sharing. I love the insider info you share with us. The WP dev shops out there know you make great review videos and they slip it to you. They get a detailed review (better than many of them can do) and we get to benefit from a sneak peek before purchase.

  11. Great video Adam, thanks..just one small comment. I know you were doing it fast but I'd mention optimising your website portfolio 600×600 image, it's a bit large at 262kb, especially if you have many of them in a portfolio. I use tinypng to do that. Great tip on the screen capture tool btw. I used it to grab your wpcrafter website and then created a 600×600 like yours, saved as jpg and optimised with tinypng. Now sitting at 43kb.

  12. Adam THANK YOU BROTHER for creating this for me and many other. Glad you understood what I sent you in my message. I REALLY APPRECIATE you doing this. Now I Can Build My Portfolio Website and Launch it in a few days…to start getting new customers…because Fiverr.com isn't bringing me lots of website or logo /graphics business.

    Blessings-Don

  13. Is there a way to get new starter sites into the portfolio as their added without importing the entire library and having duplicates of what you already have?

  14. Hey Adam – I'm now using this and it really is a cool plugin. One question I have is I have noticed it seems to make a fresh call to each portfolio item when you load the page the shortcode is on. Meaning (if you have a lot of portfolio items) it takes a while to render the portfolio menu and it's items fully on the page. I've played with caching and that made no difference. I spoke to the brainstorm folks and they confirmed it does indeed do a fresh HTML call every time.

    I use Beaver Builder – I was just wondering if you might know of a way of getting the module the shortcode is in to be hidden (maybe with a "loading portfolio message / graphic") until its resources are fully loaded?

    Thanks

  15. Hey, Thank you for your great work! Is there a posibility to make this Post Grid with Category Menu on Divi Builder?

  16. excelent video do you know can I change a little bit of the css for the portfolio for Astra… thanks!

  17. Hi, it look interesting, but on an SEO perspective it look very mediocre. Let me explain, with your portfolio items being actual pages you can target specific keywords on this page and it help your ranking on thoses keywords. With this nice preview you dont get actual pages that help you ranking. An ideal situation would have been to have an actual portfolio page for each item, and have a preview button on thoses pages. Also i found the bottom bar not that much visible and clear for most potential client that could visit the portfolio, most of them will probably be confuse.
    Thanks for sharing anyway, would love to hear back from you on those reflections of mine.

  18. Hi Adam! You have wonderful pronunciation just I've started studying English recently, but I completely understood the information which I've searched.

  19. Hello Adam, I'm wondering if you might know why the portfolio states "No items' to me. I've added and published all my portfolio items. It works with the poftolio element from elementor though, just doens't look as good.

  20. It is possible to stop the scrolling effect when you click in one of the portfolio filters? as get in conflict with the menu header of my website haha.

  21. Thanks for the video! I am only getting around to trying this plugin. I am an artist and project/event organiser. I would like to create a portfolio that shows several of my projects? Would this plugin work well for that? The projects would include several images, videos and text. I saw I can choose either image or single page. Would greatly appreciate your advice. Thanks Adam.

  22. Great content yet again.
    Just a quick query. I'm just starting out building my portfolio site with Astra and creating my own page.
    Would you make the client aware that you are using a page builder/just editing an existing page or template on your portfolio site (Or in person)?. I'm going to be looking at small local business in the first instance, so am not sure how to approach it when selling it to them. thanks.

  23. Hey Adam. Great stuff as always.. Are there any free plugins that do similar stuff to showcase your websites you have done or can do?

  24. I'm not a huge fun of the astra theme. But for the sake of this tutorial i purchased the theme and I'm happy to say the pluggins are working perfectly on my previous theme. the iframe works if you make the link like this //yourlink.com
    Thank you so much

  25. Does anyone know if it's possible to bulk import the "premium" sites? I have the starter sites imported but I don't see a clean way to bulk import all the premiums?

  26. hi everyone, i just purchased the wp-portfolio add-on and i cant seem to get it working. i imported all the sites by bulk and then i added the shortcode on the page but portfolio (themes) do not load. Anyone with any knowledge with this?

Leave a Reply

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