The Advanced Portfolio Grid 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.
Note: This feature is only available with the Semplice 4 Studio edition. You can learn more about Studio edition here.
Horizontal Fullscreen Grid
First, let's walk through how to create a full-screen grid. (See full demo for this preset here.)
Step 1: Add the Advanced Portfolio Grid
At the top of the content editor within your page, click Modules. Now drag and drop the Advanced Portfolio Grid module onto your page.
Step 2: Add your projects
Choose the projects which you want to appear in your grid. You can also reorder the projects as needed.
Step 3: Refine your grid preset
Now go back to Options, where you can change the grid setting to your preference. In this example, we have chosen to show 3 projects per screen.
We enabled a custom page transition here, so you'll see a smooth transition between the grid page and the project detail page.
You can also adjust how you want the project title and project type to look.
Optional Step: Change preview image
By default, the horizontal fullscreen grid pulls the project cover image as the preview image. However, you can also easily set a custom image to appear in the grid. Simply hover on the thumbnail and click on the image icon, then upload a new image.
Note: We recommend using the landscape format for your thumbnail images.
The image size used in the demo is 1960px by 1160px.
Text Grid
If you would rather use a text grid with optional hover images, follow the below guide. (See full demo here.)
Step 1: Add the Advanced Portfolio Grid
At the top of the content editor within your page, click Modules. Now drag and drop the Advanced Portfolio Grid module onto your page.
Step 2: Add your projects
Choose the projects and pages which you want to add. You can also reorder the project as you like.
Step 3: Choose your 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.
Step 4: Refine your grid preset
You can adjust a wide range of parameters to further customize the look and feel of the grid, 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, but you can also easily set a custom image for each project. Simply hover on the thumbnail and click on image icon, then upload a new image.
