Getting Started

Installation

If the plugin you want is not in the WordPress Plugin directory for some reason either because it was a paid plugin, or a non-GPL plugin, then this option is the best choice for you.

First you would need to download the plugin from wpsofts.com (which will be a zip file), then go to your WordPress admin panel. Click on Plugins » Add New. Then click on the Upload Plugin button.

You will see a screen like the one above. Browse the file and upload it (zip files only). You will be taken to the activate a plugin page just like this one:

Make sure that you click on Activate the plugin, now you have installed the WordPress plugin. You would have to configure the settings to fit your needs.


Plugin Usage

Create Portfolio

Now let's go through the following steps to create a new portfolio from the scratch.

  • Press "Grid Kit" menu item from the sidebar:
  • You'll see plugin's dashboard screen where will be listed all your portfolios:
  • Press "+Add New Portfolio" button to add a new/empty portfolio:
  • You'll see an empty composer where you're gonna add all the portfolio related projects:
  • Entitle just added portfolio:
  • To add a new project press "+Add New Project" button:
  • You'll see an empty project view where you should fill the project's details:
  • Entitle just added project:
  • Asign a cover/thumbnail picture to the project which will be shown in the layout (note: each project is required to has a cover/thumbnail picture and optinally lots of other pictures which will be shown in popup or full screen viewers.):
  • Select desired cover picture:
  • Press "Insert into post" button to get it done:
  • Just press "+Add New Picture" button to add some other pics related to the same project:
  • Select desired pictures and press "Insert into post" button (note: you can select multiple pics simultaniously by keeping "Shift" key pressed):
  • It's time to save all your changes. Just press on "Save" button to keep all the modifications you've done since now:
  • Now you can see, that you've successfuly created a portfolio entitled "Demo" which has only one project entitled "Roland Keyboards":
  • Add more projects exactly the same way as you've already done. We've added 9 more project on ourside:

You're done. You've successfuly create a portfolio which has 10 project items and each project item has multiple other images.

Showcase Portfolio

To showcse any portfolio, simply you should add the portfolio related shortcode into the page or post where you want to showcase it. You have 2 different options to acheve the goal. Either you can copy the generated shorcode from the dashboard screen where are listed all your portfolios or just simply use our TinyMCE custom button.

Use copy/past approach

  • Select "Grid Kit" menu item from sidebar to open the dashboard:
  • Edit the page/post where you want to showcase the portfolio. Put the shorcode into the TinyMCE editor and update your page/post:

Use TinyMCE button's approach

  • Edit the page/post where you want to showcase the portfolio. Find the "Portfolio" TinyMCE button on the editor's toolbar. From the dropdown menu select the desired portfolio and update your page/post:

This is the landing page's look where we've put shorcode on ourside.

Categorize Projects

  • Open the portfolio which you want to modify:
  • Select the prject to assign a category. Enter comma separated categories the project relates to:
  • Note: If you enter a category once, you'll see it as a hint next time:
  • This is the final look of category filed we got on ourside:

Asign categories for each project exactly the same way as we did already.

  • Note: Go options/settings screen, expand "Advanced" subcategory and make sure "Show category filters" options is checked

This is the landing page's look we got on ourside.

Portfolio Options

Layout Types

You can choose the way your portfolio projects are viewed. There are 3 types available - "Gallery", "Masonry" and "Puzzle" accordingly.

The portfolio grid we get with "Masonry" layout type

The portfolio grid we get with "Puzzle" layout type

Display elements

In this section you can choose which elements to hide from project's view and which to show.

This block of settings refers to the elements in the following image:

Show title - Check this option if you want to show the title of project on it, and uncheck if you don't.

Show description - Check this option if you want to show the description of project on it, and uncheck if you don't.

Show overlay - Check this option if you want to show the transparent overlay on project hover, and uncheck if you don't.

Show link button - Check this option if you want to show the button with the link of project on it, and uncheck if you don't.

Show explore button - Check this option if you want to show the explore button on project, and uncheck if you don't.

Show Facebook button - Check this option if you want to show the Facebook's share button on project, and uncheck if you don't.

Show Twitter button - Check this option if you want to show the Twitter's share button on project, and uncheck if you don't.

Show Google+ button - Check this option if you want to show the Google+'s share button on project, and uncheck if you don't.

Show Pinterest button - Check this option if you want to show the Pinterest's share button on project, and uncheck if you don't.

Styles & effects

Popup style - This setting is for specifying the style of the popup in which the project displays. The following popup styles are available:

- Lightgallery

- Colorbox1

- Colorbox2

- Colorbox3

- Colorbox4

- Colorbox5

Category filter style - This setting is for specifying the style of category filters. The following styles are available:

- Style 1

- Style 2

- Style 3

- Style 4

- Style 5

- Style 6

- Style 7

Pagination style - This setting is for specifying the style of pagination. The following styles are available:

- Style 1

< 1 2 3 >

- Style 2

< 1 2 3 >

- Style 3

< 1 2 3 >

- Style 4

< 1 2 3 >

- Style 5

< 1 2 3 >

- Style 6

< 1 2 3 >

- Style 7

< 1 2 3 >

Picture hover effect - This setting is for specifying project image's hover effect. The following effects are available:

Overlay display style - This setting is for specifying project image's overlay style. The following styles are available:

Title & description display style - This setting is for specifying how project's title and description are appear. The following styles are available:

Overlay buttons display style - This setting is for specifying how buttons are appear on project image. The following styles are available:

Overlay buttons hover effect - This setting is for specifying overlay buttons hover style. The following effects are available:

Share buttons display style - This setting is for specifying share buttons style. The following styles are available:

Mouse type - This is to specify the type of mouse on project hover(hand, crosshair, default).

Colorizations

Progress bar color - This is to specify the color of progress bar while loading project images.

Filter color - This is to specify the color of category filter's borders, texts, etc.

Active filters color - This is to specify the color of selected category's borders, texts, etc.

Pagination color - This is to specify the color of page number box's borders, texts, etc.

Active page color - This is to specify the color of selected page's borders, texts, etc.

Title color - This is to specify the color of project's title.

Description color - This is to specify the color of project's description.

Overlay color - This is to specify the color of project's overlay on hover.

Overlay opacity - This is to specify the opacity of project's overlay on hover.

Overlay button color - This is to specify the color of buttons on projects overlay (link, explore).

Overlay button icon color - This is to specify the color of icon on projects overlay buttons (link, explore).

Dimensions

Grid width - This is to specify the width of portfolio grid. It can be specified either in pixels(px), a certain number, or in percents(%) - what percent of outer block should be the grid's width.

Tile approximate width - This is to specify the approximate width of portfolio grid's each item. (numbers less than "Tile min width" will be ignored)

Tile approximate height - This is to specify the approximate height of portfolio grid's each item. (numbers less than "Tile min width" will be ignored)

Tile min width - This is to specify the minimum width of portfolio grid's each item.

Tile margins - This is to specify the space between portfolio grid's items.

Fonts & icons

Tile title font size - This is to specify the font size of project's title appearing over project's image.

Tile description font size - This is to specify the font size of project's description appearing over project's image.

Tile title alignment - This is to specify the alignment of project's title appearing over project's image (right, left, center or justify).

Tile description alignment - This is to specify the alignment of project's description appearing over project's image (right, left, center or justify).

Link icon - This is to specify the link icon on project.

Zoom icon - This is to specify the explore icon on project.

For link and explore buttons the following icons are available:

Advanced

Enable lazy loading - This setting enables the lazy load of project images.

Don't show popup - This is to specify to show popup on project click or not.

Load url in a new tab - This is to specify to open project's url in a new tab or not. This matters if "Don't show popup" is checked.

Disable album style presentation - This is to enable/disable the album style slider on project's popup view.

Enable picture caption for popup - This is to show/hide picture caption in popup view.

Exclude cover picture for popup - This is to exclude project's cover picture from popup view.

Tile description max length - This is to specify the maximum number of words to show in project's description.

Show category filters - This is to specify either to show category filters or not.

Hide `All` category filter - This is to show/hide `All` from category filter.

Category filter `All` alias - This is to change the `All` in category filter to another word.

Grid thumbnail quality - This is to specify the quality of project's image (large, medium, original).

Grid alignment - This is to specify the alignment of grid in page (left, center, right).

Enable pagination - This is to enable/disable pagination.

Items count per page - This is to specify the maximum number of projects on one page. (This matters only if pagination is enabled)

Max visible page numbers - This is to specify the maximum number of visible page numbers. (This matters only if pagination is enabled)

Pagination alignment - This is to specify the alignment of page numbers(left, center, right). (This matters only if pagination is enabled)

Custom CSS & JS

Custom CSS - Here you can put your own custom styles - css code.

Custom JS - Here you can put your own custom script - js code.