Articles in this section

Using the Advanced Portfolio Grid

  • Updated

The Advanced Portfolio Grid (APG) module allows you to display your projects in more interactive ways beyond the standard Portfolio Grid. Choose between full-screen grids or text grids, then customize every element to your liking.

Check out these demos to see all the ways you can use the Advanced Portfolio Grid.

Please note: This complete feature is only available with the Semplice 6. You can learn more about Studio edition here.

 

Advanced Portfolio Grid Types:

With the latest version of Semplice you have access to 4 Grid Presets:

  • Horizontal Fullscreen Grid (Default)
  • Text Grid
  • Split Grid
  • Table Grid

→ See a demo page to preview these presets

APG-8.svg

 

Adding the Advanced Portfolio Grid to your page

Please note: You may want to have an already built project pages before starting with APG.

Step 1: Add APG module

At the top of the content editor within your page, click Modules. Now drag and drop the Advanced Portfolio Grid module onto your page.

mJhl1cukiF.gif

Step 2: Add your projects

Choose the projects which you want to appear in your grid. You can also reorder the projects as needed.

4wUHg5dNnT.gif

Step 3: Select grid preset

You'll notice that by default, the Horizontal Grid shows up. Under the "Options" tab in the editor pop-up, click "Select Grid Preset" to change the grid type.

→ See a demo page to preview available presets

APG-6.gif

Step 4: Refine your grid preset 

In options you can change the grid setting to your preference. Adjust a wide range of parameters, such as typography, alignment, mouseover animations and so on.

Optional Step: Change preview image

Your project cover image will appear in the grid by default. However, you can also easily set a custom image to appear in the grid. Simply click "Add pages / projects", select a project or page you wish to replace a thumbnail for and then upload your new image. Another way to do this is to hover on the thumbnail and click on the image icon, but this method won't work for the table grid.

Note: We recommend using the landscape format for your thumbnail images.

The image size used in the demo is 1960px by 1160px.

APG-7.gif

Related articles