(Free) Portfolio Grid

• Support: [email protected]
• Free install (1 site/license)
• Plugin works with Portfolio Grid, Grid Overlay only
• View Demo – Password: abc

#1. Install Code

#1.1. Business Plan/higher

Use code to Page Header Injection (page where you want to add Portfolio Grid)

<script src="https://code.beaverhero.com/portfolio/portfoliogrid.js"></script>

#1.2. Personal/Basic Plan

First, edit Site Footer

Add a Block

Choose Markdown

Paste this code into Markdown

<script src="https://code.beaverhero.com/test/portfolio/portfoliogrid.js"></script>

#2. Usage

First, find Portfolio Page URL Slug, by clicking Gear icon on Portfolio Page

You will see URL Slug here

Next, edit page where you added the code (page in #1) > Add a Code Block with this syntax

<div data-showcase-portfolio="/portfolio2" data-category data-limit="20"></div>

Remember to update Portfolio URL Slug

#3. Customize

#3.1. To set max of items, you can set this number

data-limit="20"

#3.2. To show portfolio items belong specific category, you can set data-category like this, here I will use category: Design

<div data-showcase-portfolio="/portfolio2" data-category="Design" data-limit="20"></div>

Next, you need to edit Portfolio items where you want to set it as category: Design

Click SEO > Enter Design in SEO Description

#3.3. To change Portfolio Grid to List format, like this.

You can use this extra code to Custom CSS

div.code-block {
    #gridThumbs .grid-item {
    flex-direction: row !important;
    align-items: center !important;
}
div#gridThumbs {
    grid-template-columns: repeat(1,1fr) !important;
    grid-gap: 10px !important;
}
.grid-image {
    max-width: 100px;
    padding-bottom: 10% !important;
    margin-right: 10px !important;
}}