How to make a great work page for your portfolio: A Semplice tutorial

Your Work page (often your homepage), is your first impression. It tells the story of your work when you're not there to do it. And with Semplice, there are many ways to tell that story.

From our Advanced Portfolio Grids to the traditional Portfolio Grid to manually building your page, Semplice allows you to create essentially anything you design, without templates.

Here are just a few recent examples we've enjoyed lately from the Semplice Showcase:

Yu Rong

Instead of using your standard thumbnail format, Yu opts to use mockups and devices overlaid on top of large, marquee typography. It makes for a fun scrolling experience as you scroll and immediately shows how Yu Rong thinks outside-the-box.

Ayaka Ito

Ayaka uses the Advanced Portfolio Grid feature (comes with Semplice Studio) to showcase her work. She makes every element her own, using beautiful type, custom hover effects and colors that complement each thumbnail.

Studio MPLS

Studio MPLS uses a more traditional approach to the portfolio grid, but makes heavy use of the thumbnail hover effect. This effect gives you a visual preview of each project on hover, adding to the visual excitement and encouraging a click.

Leandro Assis

Like Yu Rong's site, Leandro makes use of a fixed background image with overlaid portfolio grid items. The design highlights Leandro's personality and creates a joyful scrolling experience.

Tracy Doyle

For her portfolio, Tracy used a minimalist approach. Instead of relying on visuals, she uses a simple text grid that puts emphasis on the high-profile clients she's worked with.

What we'll be creating

For this tutorial, I'll show you how you can quickly and easily create a compelling work page using Semplice. We'll explore a variety of four different approaches to the work page design, giving you just a sample of different options and layouts you can use to show off your work.

I've created fake studio called PLY® Studio featuring some of my own personal work. This is what we will use to build out our Work page.

We will use a fake studio to create our portfolio site. Work samples by Jon Vio.

Getting started

First, we need to create some projects that will appear on our Work page. If you're just starting out with Semplice, here is a help guide for creating your first project.

With our projects created, let's open up a fresh page in Semplice. Name the page "Work" or something similar.

1. The standard grid

The standard grid of thumbnails, what we call the Portfolio Grid in Semplice, is a tried and true way to show off your work in a clean and simple way:

VIEW THE LIVE DEMO →

The Portfolio Grid consists of a masonry-style, 12-column grid comprised of your project thumbnails. Each project thumbnail can be given a custom column width. There are a variety of options to customize your Portfolio Grid width, including adding a thumbnail hover effect, live project filtering, and more.

Let's go ahead and place the Portfolio Grid on our page:

You'll notice right away the Portfolio Grid is populated with our projects. If you don't see your projects right away, make sure they are PUBLISHED and not set to DRAFT.

Let's now adjust our project thumbnail widths to evenly space out our thumbnails and create a nicely aligned grid. I've set my first project to 12 columns, which will give us a full-width effect. To get the two-column format, we'll set the next two projects to have column widths of 6. For the smaller images, we can set these to display three rows across by setting each column width to 4.

PRO TIP: You can quickly adjust individual project settings by hovering over the thumbnail from the Portfolio Grid and clicking the edit settings icon.

2. Text Grid

Another interesting way to display your work is in a Text Grid. The Text Grid is a layout preset included with the Advanced Portfolio Grid as part of Semplice Studio edition. To learn more about the Advanced Portfolio Grid, read this guide.

VIEW THE LIVE DEMO →

To create our Text Grid, we'll drag & drop an Advanced Portfolio Grid (APG) module onto our page. You then have the option to choose which pages or projects you want included in your APG grid, so let's go ahead and add them.

After adding our projects, go to "Change Grid Preset" and set the preset to Text Grid. Once done, you'll notice the APG has automatically populated our projects in a vertical text list.

3. Overlay Grid

This is a popular style right now for Work pages: Overlaying your project thumbnails on a fixed background image or text:

VIEW THE LIVE DEMO →

For this portfolio effect, we will place a standard Portfolio Grid on our page. Next, we will need to create images of all of our thumbnails as PNG files with transparency. The transparency will allow the background to show through while the scrolling through the Portfolio Grid.

With our transparent PNG thumbnails set, let's now add a fixed background to sit behind our Portfolio Grid. Go to the Look & Feel tab from the editor and set a background image. Adjust the size and placement to your liking. Finally, under the Background Attachment option set the background image to be fixed.

Alternatively, you can also use our hack guide to create a fixed section that will sit behind your portfolio grid. Just be sure that the section where you placed your Portfolio Grid has a higher Z-index value (located under Section Styling) than your fixed section. Otherwise, the Portfolio Grid will not sit on top of your fixed section.

4. Split Grid

Another interesting way to showcase your work is to use the Advanced Portfolio Grid module and create a two-column fullscreen grid. This grid is really great for putting the focus on your work and simplifying your presentation.

VIEW THE LIVE DEMO →

Once again we will use the Advanced Portfolio Grid for this effect, and choose the Horizontal Fullscreen layout preset. Place a new APG grid on your page. The default layout preset will already be on the Horizontal Fullscreen option, so no need to select it.

Also, I recommend setting all of your images to the same dimensions for best results.

Next, let's set the" Images Per Row" to 2, and the image size to "Cover." I've also opted to hide the Project title and category.

Lastly, we can add a nice Mouseover effect for our thumbnails. I've opted for a nice zoom effect.

That's it!

It's really that easy to get a variety of different ways to display your projects with Semplice. Of course, these are just a sampling of different layouts and effects. It's really up to your imagination. We hope you enjoyed this tutorial!