The Portfolio Grid is the heart and soul of Semplice. This is how you display your work and connect people to your projects.

A Portfolio Grid can be placed anywhere on your site, and you can customize each individually to your liking. You can also choose what projects to display by using category filters.

 

Adding a Portfolio Grid

To place a Portfolio Grid on a page, go to the Modules at the top of the content editor. Drag and drop the Portfolio Grid module onto your page. By default, the Portfolio Grid will display all your published projects.

 

 

Setting the Categories

If you created categories for your projects, you can set which categories are displayed in your portfolio grid.

Click into the editor pop-up and hit 'Select Categories.' Choose which project categories the portfolio grid should display. Now click 'Apply Grid Changes' to see your updates reflected in the grid.

 

 

Using the Category Live Filter

Under the Project Display options, you have the option to add a Category Live Filter. This will allow people to shuffle projects live on your page by clicking a category.

 

 

Lazy loading images

Also under the Project Display options, you also have the option to Lazy Load your projects in your Portfolio Grid. If you enable lazy loading, your grid will wait to load images until the content is in view. This feature is handy for speeding up page load times.

 

 

Enabling the Thumb Hover feature

Instead of displaying the project title and category underneath or on top of your project thumbnail, you have the option to use the Thumb Hover feature. To enable this, simply set the visibility option under the title options area to 'Hide Both'. 

You can customize the Thumb Hover feature by going to Customize > Thumb Hover.

 

 

Setting project thumbnail widths

You can set thumbnail widths for your project's thumbnails in the project settings area. The Portfolio Grid is based on a 12-column system, and you can set thumbnail widths in multiples of 12.

To edit this setting, simply hover over a project thumbnail and click the Settings button. Then choose your desired columns from the dropdown.

 

 

 

Troubleshooting

Portfolio Grid is not showing all my projects

First, make sure your projects are published and not set to draft. If you still do not see your projects, this is the result of a small bug that can happen sometimes in Wordpress. Simple re-order one of your projects on the Projects page in Semplice, and the issue should resolve itself. 

Projects get re-arranged unexpectedly

The Portfolio Grid uses a masonry grid. This means the grid will automatically align and arrange projects based on available vertical spacing. It's intended for items with variable heights, as the spacing between items and alignment is calculated based on browser width. This is why some of your projects are being arranged in an unexpected way, because the grid is adjusting projects based on browser width and available vertical spacing. Overriding these alignment adjustments would require custom code.

If you need a precisely aligned grid, we recommend using regular Semplice images instead and then created your own custom grid. You can set image links on the images themselves to link to your project, and add rollover effects with CSS or our Motion feature if needed.

Good news: We are working on the ability to have fixed, precisely-aligned grids that function exactly like a Portfolio Grid in a future update. 

Thumb hover feature does not display proper font

Make sure Semplice is up to date - This issue can happen with older versions of Semplice 4. Please ensure Semplice is up-to-date under Appearance > Themes. Once updated, you can then reset the font in the Thumb Hover options. Please also make sure you have the paragraph font set under Customize > Typography > Paragraph.

 

Artwork credit: Pawel Nolbert