Monthly Template Kits #3: The Portfolio Site Kit

Create a stunning website that showcases your best work with the newly released Elementor Portfolio Template kit.

 

A great portfolio is probably the most important asset creative professionals need to get sorted if they want to leverage their services and get more clients.

Focusing on creating a great portfolio often gets neglected. Many designers put more priority on their work, and neglect this crucial element. Creating a successful portfolio isn’t an easy task. There are many ways to display creative works. A UX designer’s portfolio is not the same as a print designer’s, and deserves a different style. 

This is why, for our third template kit release, we decided to deliver a glamorous portfolio template kit, one that will fit a variety of tastes and will enable you to showcase your work in the best way possible.

Meet the Portfolio Template Kit

Any creative professional can enjoy this kit, from photographers, marketers, consultants. Freelancers and businesses can take this kit and make it their own with a few small customizations.

All the illustrations, as always, have been taken from free resources. Apart from the illustrations, all the graphics, mockups, backgrounds and other visual elements have been created by our team.

Homepage

Portfolio Kit - Home page

Glancing at the homepage, you immediately can tell it’s a designer-oriented site. Bold and vibrant colors, large typographical elements in the background and a prominent message set using a sans-serif font.

Scrolling down, you will notice clever uses of our recently released background slideshow feature, as well as motion effect, seen in the appearance of the credit card.

Projects Page

Portfolio Kit - Projects

The projects page is why we built the site in the first place, right?

In the Portfolio widget, we have three categories to filter through: illustrations, product design, and web design.

We designed 9 initial mockups for projects and elaborated on the first 3. Each of the three projects is built differently, with the description of the work appearing in various locations across the screen.

BTW, each of the single templates can be used with Elementor’s Theme Builder and dynamic content, so the same design can be instantly applied to multiple projects with one click.

Single Template #1: Illustration (Types)

Befitting an illustration project, this template grants the maximum available space to the visual material. The description text sits neatly at the bottom of the screen as a sticky element.

Single Template #2: Product Design (Montana)

Here, we see that the project assets appear on the left, and a sticky sidebar describing the project scrolls with the user to the right.

We recently received a comment from a user asking for a social share floating sidebar. As seen in this template, it’s easily done using Elementor’s sticky column and social share buttons / social icons.

Single Template #3: Web Design (Print Shop)

Yes, we really created a website template to appear inside a website template. We didn’t go full ‘inception’, though, since the website template inside our website template doesn’t feature a website template.

This is a classic portfolio project page, with no sticky elements. The description of the project appears in detail on top, and the website design assets appear below. The pages are surrounded by a yellow border to set them apart from the background.

Note that while we designated the templates to specific design categories, you are by no means restricted by those categories. No matter your field, the question you should be asking yourself when deciding on the template is whether your content will be best featured on full screen, boxed and bordered or set beside a text explanation.

About & Contact Pages

Portfolio Kit - About + Comtact

The about page in portfolio sites is usually more solid and textual, leaving the striking visuals to the projects page.

It’s always a challenge to structure text-heavy pages, especially for sites that are oriented towards design. This is why we built several content layouts throughout the page.

It starts with the classic section, with an illustration on one side and one column text on the other. Then, another cleaner section featuring a 3-column content layout. Then again 3 columns, but pushed to the right. Finally, a less common structure featuring the left column vertically centered, and 4 text boxes spread to the right.

We talked about getting your contact information right as part of the crucial steps to get leads. This is something often disregarded, even by professional designers. With this contact page, your visitors won’t be puzzled regarding how to get to the next step and make the connection.

Main Blog Page and Single Blog Post

Portfolio Kit - Blog + Post

We mentioned already that the site is filled with visual content, and this is why we chose to simplify the look and feel of the blog. It’s a clean, minimalistic blog layout that only displays the title, description, and date of publication.

Going into a single blog post, we see the same color boxes appearing at the top.

404 Page

We tend to include our most outrageous tricks in our template kits’ 404 pages. I challenge you to guess how we reached the sliding people with interchanging pant colors. (Hint: they are actually separate images).

If you can’t come up with how we did it, just insert this template yourself and reverse engineer it by exploring the panel. There’s a 10-minute fun activity for you right there!

Popup Menu

In case you are wondering which menu plugin we used to create the popup menu, the answer is – none!

It’s actually an Elementor popup that we connected to an image of the hamburger.

Check out the tutorial about building a popup menu we released a while back.

Get Cracking on Perfecting Your Portfolio!

There’s no excuse. I don’t want to hear: “I’m too busy working on my client’s projects”.
Take this portfolio template for a spin and create a tantalising site that draws clients.

This template has quite a different style than the previous two released kits: the digital agency kit, which featured the prominent shapes, and the gym kit, which featured bold colors and movement. With this kit, we went for a much more subtle, clean and minimalistic style, since the visual aspects should be achieved through the work being showcased.

How to install the kit? If you have Elementor Pro, all you have to do to enjoy this cutting-edge kit is to go into Elementor, open the template library, and search for ‘Portfolio’.

What templates would you like to see next? Let us know in the comments below.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Ben has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 840,076 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

75 Responses

  1. Hi Ben . Great work. I trust Elementor to build my website. I would like to ask you a question please. I have created a health magazine website http://www.lifevalley.gr/ and in the home page I have installed a slider. How could I make the posts in the slider clickable please? Thanks once again and congrats for your work.

  2. Looks like a great template. Could you post a link to a live demo next time? I’d love to explore it live without having to go install all the pages myself first!

  3. Hey Ben, this is awesome! Congrats to you and the elementor team!

    We really would like to see an eCommerce theme. I think it would be beneficial to Elementor and the community!

    Please 🙂

    Thanks in advance!

    1. Let me direct you to the right place. to add the 404, blog or pop, you need to go to
      Elementor Templates > then Theme Builder.
      after that choose the desired template, for example popups. enter the popup name.
      after clicking the ‘Create Template’ a new window will appear with the popup library.
      Search for ‘portfolio’, and portfolio 404 will appear.
      Do the same for the Blog and 404, just remember to choose the right kind of template type.

    2. You need to be in the appropriate template type. For instance single post add then search blocks for portfolio or popups add search portfolio.

  4. This looks great, but once again we need a live demo to see what’s going on.

    Is this template only for black women? The characters in this example are all black woman (with one black man). Are there other avatars I can put in? White skin, yellow skin, etc.

    1. Hello David,
      Thank you for your suggestion. We are working on a live demo and we will notify when it’s ready. This kit includes the avatar you see, but you can replace then with any other images you want.

  5. David, we black women don’t get many things – surely you’ll survive this one template. I’m sure there are literally millions of other characters out there that can be substituted if you don’t like these.

  6. Suggestion: It would help if you gave some direction on what theme setting you used for the templates. I am still tweeting the theme that I am using in order to get something close to what you are displaying. Or maybe always use Elementor Hello so at least we have a starting point.

    1. Hello Larry,
      We are always building our Kits with the Elementor Hello theme. it’s a good starting pint to any website.

    1. It looks amazing, but why don’t you publish it online as a demo?

      Now to see the theme I need to turn on the computer, access to one of my websites, create an empty page, hide it from search engines, update my elementor library and then upload every single page you created for this theme, one by one, just to see it online.

      Just publish it somewhere like any of your competitors please.

  7. hello, magnificent theme, as always brilliant development, for when we do not have the good fortune or opportunity to be PRO, some free theme, thanks for the attention and sorry for the bad.

  8. Hello Ben,

    I like the Portfolio template….especially the design. However, do you have something more suitable for a Inspirational/Spiritual Life coach?

    My preferable colors to use are blue, yellow, and green with a small amount of orange.

    Also, I believe my chosen colors will compliment my logo.

    Thanks for your help,

  9. This looks fantastic and might just have changed my mind on Divi vs Elementor. Until today I was feeling that the full website template suites just weren’t slick or complete enough but this one looks spot on. The social share and popup menu are nice touches too.

    Another request for live demo please! I’m hoping there’s a page template for each portfolio piece but can’t quite tell from the snapshots included. Definitely want to get a feel for the full website flow through a demo.

        1. My solution to this problem.

          For those who are worried about video loads (like embedded Youtube videos), I get around this by using a little plugin that delays the loading of the embedded videos until the actual embedded video comes into view. This allows the site to not load any unnecessary JS from YT (1MByte+). The plugin that I am using on sites with embeded to videos from Youtube to do this is: a3 Lazy Load

          ps: I only use one component from this plugin and that is: Lazy Load Videos and iframes

          I avoid the others sections because sometimes it interferes with some features I use from Elementor.

          Hope that helps!

    1. You need to be in the appropriate template type. For instance single post add then search blocks for portfolio or popups add search portfolio.

    1. Let me direct you to the right place.
      you need to go to Elementor Templates > then Theme Builder.
      after that choose the desired template, for example, popups. enter the popup name.
      after clicking the ‘Create Template’ a new window will appear with the popup library.
      Search for ‘portfolio’, and portfolio 404 will appear.
      Do the same for the Blog and 404, just remember to choose the right kind of template type.

  10. I would like to see a complete educational website template kit designed around the most serious threat to the future of our very existence on this planet –

    Climate Change.

  11. Thank you very much for your job! Elementor is great!! :))
    It is very important and I would like to have a template for the gallery of paintings by the artist, because existing galleries are made for photos.

  12. Although I don’t like the creative side of the site colours used in this article (then again everyone has their own unique taste), however, the technology you’ve added (Elementor developers team) to Elementor Pro is fantastic allowing website designers to create very functional and powerful sites.

    Great work!

  13. Really great templates for desktop!

    However – when do you plan to go mobile-first with your templates? They are unfortunately not nearly as polished in the mobile format (where most of the internet traffic 2019).

  14. So you can only use if you are a pro user? Why does it show in Elementor Overview as “freebie” then? I don’t get it.

  15. Love that you’re offering templates. When I use templates I edit them beyond recognition, but they can save time vs creating from scratch. I’d like to request a more minimalist style template similar to this here if possible: http://chamonix.themerella.com. I like the clean style and the way the page scrolls. Thanks.

Leave a Reply

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

Want to learn how to build better websites?

Join 840,076 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.