How to Create a Great-looking Masonry Portfolio for Your Home Page [Tutorial]

A picture is worth a thousand words, especially when it comes to a portfolio website. Learn how to create a masonry portfolio grid for your home page that impresses your visitors even more.

There are a number of ways you can build a portfolio website for your creative business. One option is to create a standard website and then direct prospective clients or buyers to the Portfolio page.

Another option is to start sharing your work with visitors as soon as they enter your site on the home page. If you go this route, you have a couple more options to choose from. And you can use the Creative Portfolio Website Slider template regardless of which you choose.

In the following tutorial, we’re going to show you how to build a masonry portfolio grid into your home page or one-page website, starting with this template. It already has cool vertical scrolling and hover effects built right into it, so all you’ll need to do is customize the content.

Table of Contents:

How to design a masonry portfolio grid with special effects

You spend so much time creating your work, be it web designs, photos, artwork, crafts, etc. Now you have to spend time building out a portfolio website to promote your creations.

But this part doesn’t have to take too long if you use the Creative Portfolio Website Slider template as your base:

In the following tutorial, we’ll demonstrate how fast and easy it is to leverage the general framework of this template to create an engaging home page masonry portfolio of your own:

Let’s get started.

Step 1: Install the portfolio website template

There are a few ways to use this Slider Revolution template. That’s because this is a template package and not a single module.

Do a search for it from the New Module from Template tool in Slider Revolution. Click on the folder icon to explore the modules contained within it:

Option #1: If you’d like to build out a one-page portfolio website, you’ll need to install the entire package. This will give you the tools to create pop-up modals for each of your portfolio works.

If this is the route you’re going to go, back out to the main template image, click on the plus-sign button, and then click the Install Template Package button.

Option #2: If you’d like to build a multi-page portfolio website, then you won’t need the pop-up modals that come with the template package. You’ll either have a single Portfolio page you can direct visitors to or individual pages where you break down each of your works in more detail.

Either way, all you’ll need is the module called Creative Portfolio Main Slider:

Click the plus-sign and then install only the template, not the package.

This template will give you all the sections you need to build out the home page. You can also use it to create just the portfolio masonry grid part of it.

Note: For the remainder of this tutorial, we’re going to focus on editing the three Slides inside the Creative Portfolio Main Slider Template labeled “projects”:

This is where the vertical-sliding portfolio sections are. Feel free to customize the rest of the slides in this template if you’re going to use it to build out your home page. Otherwise, you can delete them by hovering over the slides and clicking the trash can icon.

Learn more:

Step 2: Update your portfolio imagery

There are three “projects” slides in this template. You don’t need to use all of them if you don’t have enough work to showcase yet.

If you do want to use all of them, we’d suggest leaving the Border layers where they are as they provide the canvas for your portfolio imagery. Instead, try to find or create portfolio images that fit the various spaces available.

Note: If you look at the source images used in the template, most of them are sized as 1740px by 1080px. While the consistency is good for the individual portfolio pop-ups, this can create some issues with content visibility in the masonry grid.

If you’d prefer to create custom images for the home page portfolio, here are some guidelines to follow:

Slide #4 projects 1

There are 2 portfolio images in this slide. Use portrait orientation for both.

Slide #5 projects 2

There are 3 portfolio images in this slide. The first one uses landscape orientation. Make this one much wider than it is tall. The second and third images use landscape orientation and should be about half the width of the first one.

Slide #6 projects 3

There are 2 portfolio images in this slide. The first one uses landscape orientation — it should be about the same size as the images in the first projects slide. The second image uses landscape orientation and can be closer to the size of the second and third images in the second projects slide.

To replace the images in these slides, look for layers called Img-Source. Click on the one you want to edit. Then go to “Layer Options” and “Style” to upload a new BG Image to the Media Library:

If the image doesn’t quite fit in the space the way you want it to, use the Position controls beneath the file upload area:

You can alter how the image fits in the space, whether it repeats or not, as well as how it aligns. The alignment tool is useful if you want a specific part of the image to be in view.

After you’ve uploaded all the portfolio images into one slide, save your changes and then move onto the next ones.

Learn more:

Step 3: Customize the text for each sample

There are three text fields for each portfolio image:

  • Project Title is the big, bold title of the work
  • Category is the smaller label that describes the type of project it is
  • Description is the plain text line that appears when someone hovers over the image

Feel free to use as many or as few of these text labels as you need.

To edit them, locate the label for the corresponding image in the timeline editor. Or you can select them from the canvas. The number next to the text layer will match the number next to the image layer.

To edit what the text says, go to “Layer Options” and “Content”. Replace the text in the editor box:

Note: While you’ll be able to see the project title and category update in the canvas, you won’t see the description as it’s a hover-triggered text field. To see what your new Description looks like, open up the Preview and navigate to the portfolio section to check it out.

If you want to make customizations to the style of the text layers, you’ll find those settings under “Style”, “Size & Pos”, as well as “Adv Style”. However, if you want to allow your portfolio to make the greatest impact, we’d suggest keeping the font stylization to a minimum.

One last thing to edit in this step is the “View All Work” text in the third slide of your masonry portfolio grid. It’s a layer called Copy Text-56:

You can change what the label says using the same method as above. And if you modified the style of the text elsewhere, do the same here.

Just be careful with the right-facing arrow. This isn’t a separate layer — the icon has been added to the text layer using this string:

<i class=”material-icons”>arrow_forward</i>

If you want to keep the arrow there and as is, then there’s nothing to do but leave that string in place. However, if you want to modify the style of the arrow or change it to a different icon, delete the string. Then click the Icon button above the text editor to choose a new one.

Learn more:

Because of the way the template package is set up, the portfolio images, when clicked, will open the corresponding modals. If you’re creating a one-page portfolio website, this is the way to do it.

However, if you’re creating a multi-page website as we are, then we need those images to either:

  • Point out to individual work or case study pages
  • Not link to anything

Either option works. In some cases, it just doesn’t make sense to create separate pages for everything you create. Like if you’re a photographer, then you might not have a lengthy story to tell about the photos you’ve taken.

Regardless of which route you go, you’ll need to edit each image’s actions. You’ll find them under “Layer Options” and “Actions”:

The final action “Open Slider Modal” is the one to focus on. To delete it, click the trash can icon to the far-right of it.

If your portfolio sample has a corresponding case study or work page, create a link to it here. Click the “Add action to img-source” button at the bottom and create a “Simple Link”. Then enter the custom URL that will open when visitors click on the image.

If your portfolio sample doesn’t have a corresponding page, exit out of the “Actions” modal.

When you’re done updating the portfolio image links, go to the last projects slide, select the Copy Text-56 layer, and open up “Actions”:

This final link should point to your main Portfolio page. There’s already a Simple Link there, so all you need to do is edit the Link URL.

Learn more:

Step 5: Customize the cursor shape and text

When you look in the canvas, you’ll see a blue circle in the middle with the words “View Project” over it. This is created with two layers called Circle (the blue shape) and View (the label on top of it).

They are programmed to work as a cursor on your projects slides. When someone hovers over one of the images, the cursor appears, the image turns grayscale, and the Description text appears.

Depending on how your portfolio page or pages are set up, what you do with this cursor will change.

For instance, if you don’t have individual works pages, then it doesn’t make sense for the text to say “View Project”. Instead you should update the label so it accurately describes what the visitor should do or focus on. Like “Read More”. Or you can use this space to add a fun catchphrase or hashtag.

To update what the text says, use the say “Layer Options” settings as you did in Step 3:

To edit the background color of the Circle shape, go to “Layer Options” and “Style”. Open the BG Color modal and select a color that matches your branding:

Pro tip: If your text layers are white and you’re keeping the greyscale hover-triggered overlay, stay away from white or black. A brighter color will stand out better.

Step 6: Edit the Global Layers

The last thing to do is edit the Global Layers in this template. Again, depending on what type of portfolio website you’re creating, you’ll take different actions in this step.

First, go up to “Slides” in the top toolbar to open up the Global Layers:

These layers appear at all times regardless of which section of the home page or your masonry grid that visitors are looking at.

If you’re building a one-page website, then you can keep the Global Layers, which include:

  • Copy Column-21 is the header line containing the logo and the hamburger menu icon
  • Menu is the pop-over that appears with all the navigation links
  • Portfolio is the vertical text that appears on the right side of the slider with the creator’s name
  • Line is the vertical line that appears beneath the creator’s name
  • Scroll is the vertical text that appears on the left side of the screen letting visitors know to scroll to see the next part of the website slider

You’ll edit the text styles the same way you did the text styles in your slides.

For those of you building a portfolio grid to go on the home page of a multi-page website, you won’t need Copy Column-21 or Menu unless you’re using Slider Revolution to create your entire website. To remove them, click on Copy Row-20 in the canvas or timeline and then hit your Backspace or delete key.

Keeping the Portfolio and Line layers is optional, though it’s a nice touch for a portfolio section such as this one. While it doesn’t provide an official watermark atop your images, it creates a similar effect:

Whichever layers you decide to keep, all you need to do is update the text (as needed) and then customize the styles so the fonts match your customizations in the portfolio slider.

Learn more:

Wow clients, followers, and more with a unique home page portfolio preview

As you can see, Creative Portfolio Website Slider is a pretty versatile template. You can use it to build out an entire single-page portfolio website, a home page, or a vertical-scrolling masonry portfolio slider.

However you decide to use it, there’s one thing for certain. It’s going to allow you to get your portfolio online in no time at all. And the quicker your work goes online, the sooner you can start attracting new clients, followers, and more.

How to Create a Great-looking Masonry Portfolio for Your Home Page [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

For further information or clarification on any topic discussed in this blog's posts, feel free to leave a comment on the post or contact me at [email protected].

Liked this Post?
Please Share it!

Leave a Reply

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