Portfolio Designer Lite Documentation

Introduction

Thank you for the activation of Portfolio Designer Lite Plugin. We are glad that you have chosen our plugin for your website.

Portfolio Designer Lite is a powerful WordPress plugin to create especially for portfolio display. This plugin is Fully Responsive and Mobile-Friendly with Powerful backend options.

This document is written very carefully by keeping mind set that it should be easy to understand for Beginner to Advance user or developers. We have divided this document in 3 main section.

1) Getting Started: This section will very help full for Quick start and understand how plugin works
2) Detailed Document: This section explains every thing about Portfolio Designer Lite plugin with every settings.
3) Other: This section provides information about miscellaneous item like plugin features, FAQ etc.

If you have any query that is beyond the scope of document, please feel free to contact us at support@solwininfotech.com

Portfolio Designer
We offer plugin customization. Get in touch for a quote.
Quick Search Tip: Access your browser search with keyboard shortcut "Crtl+F" (Windows) or "CD+F" (OSX) for instant results.

Installation

1. Installation Via WordPress Admin area

  1. Step 1. Log into your WordPress admin area.
  2. Step 2. Click on the left side plugin menu.
  3. Step 3. Now at the top you can see the Add New button, click the button.
  4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
  5. Step 5. Now upload the plugin zip file (portfolio-designer-lite.zip) that you have downloaded from Portfolio Designer Lite sales page. After upload, install the zip and click on "Activate Plugin".

Plugin Installation

Fig. 1.0 Plugins List

Plugin Upload

Fig. 1.1 Plugin Upload

Plugin Install

Fig. 1.2 Install Uploaded Plugin

Plugin Activation

Fig. 1.3 Active Installed Plugin

2. Installation Via FTP

  1. Step 1. Download Portfolio Designer Lite plugin zip file (portfolio-designer-lite.zip) from your Portfolio Designer Lite sales page.
  2. Step 2. Extract Zip file. it will create "Portfolio Designer lite" folder with all plugin files & folder inside it. (Remember extracted folder path)
  3. Step 3. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
  4. Step 4. Go to Dashboard » Plugins » Installed Plugins and find Portfolio Designer Lite from plugin list.
  5. Step 5. Click on Activate to activate Portfolio Designer Lite.
Before going to the detail document, preview the Quick Guide of the Portfolio Designer Lite.

Quick Guide

Quick guide will help you to easily setup your portfolio layout in 3 easy steps within 1 to 2 minutes. we have make it more easier as you can setup only in 2 Steps.

Please follow this quick steps given below.

Step 1:

Create a new Page

  1. 1. Create a new page from "Pages" section and give title as "Our Portfolio".
    2. Click on "Publish/Update" button to publish new page.
    3. Right Click on Permalink URL and open it in new tab of browser. (it will be useful to check page view from front end.)
    Create new Page for Portfolio

    Fig. 2.0 Create new Page for Portfolio

Step 2:

Save portfolio layout settings.

  1. 1. Go to Dashboard » Portfolio Designer Lite Settings »
    You will get a page as shown below.
  2. Portfolio Name Setting

  3. Fig.2.1 Portfolio General Setting

  4. 2. Select post type for Portfolio layout (like: Page, Post, etc...)
  5. 3. Select page to display your portfolio layout.
  6. Portfolio save page Setting
  7. NOTE: In "Display Portfolio on page" option list if you select any page to display your posts, then you will lose all the content of that selected page (if there is any content already exist with page, please keep backup of it OR user other blank page).
  8. 4. Click on "Save Changes" button
  9. Now refresh the page that we already have opened in another tab during step 1, in our case its "Our Portfolio" page OR open URL of your Page that you have selected for your portfolio page at "Display Portfolio on page" option in above step.

  10. Congratulations..!! you have configure Portfolio designer lite plugin.

Detail Document

Portfolio Designer Lite Settings

  1. Step 1. Go to Dashboard » Portfolio Designer Lite
  2. Step 2. Fill all the settings as per your preferences.
  3. Create new layout
  4. Step 3. Click on "Save Changes" button at top of page. And Enjoy the Portfolio Layout.

General Settings

General Settings

Fig.3.0 Portfolio General Setting

1. Select Post Type for Portfolio

Select type of posts which you wants to use as a Portfolio Layout.

2. Select Page for Portfolio

Select Page for Portfolio (Your Portfolio design will display with that page)

Query Settings

Query Settings

Fig.3.1 Portfolio Query Setting

1. Select Taxonomy Type to Filter Posts

Here Portfolio Designer Lite provide taxonomy selection that you should use in post query and post filtering like Category, Tags.

2. Select Terms to Filter Posts

By selecting terms it will display only selected items in layout.

NOTE: If you will not select any terms for filtration then it will show all posts.

3. Select Post

Using this option you can Select particular posts for your portfolio item.

4. Order

Using this option you can set your portfolio item by name and values as according to Ascending and Descending order.

5. Order By

By Selecting below listed parameter you can sort portfolio items as.

  • Order By: Author
  • Order By: Comment Count
  • Order By: Date
  • Order By: ID
  • Order By: Modified date
  • Order By: Name
  • Order By: Title
  • Order By: Random

Layout Settings

Layout Settings

Fig.3.2 Portfolio Layout Setting

1. Layout Type

Portfolio Designer Lite provide you two type of layout like below.

  • Grid Layout
  • Masonary Layout

2. Column Layout

Set column layout with 6 different styles .

Note: "Column Layout" is available in PRO version.

3. Column Spaces

To add space between two portfolio item Horizontally.

4. Row Space

To add space between two portfolio item Vertically.

Thumbnail Settings

Thumbnail Settings

Fig.3.3 Portfolio Thumbnail Setting

1. Select Thumbnail Size

Select preferable resolution of thumbnail image for portfolio items.

NOTE: The original resolution is loaded if a thumbnail size doesn't exist in an image.

2. Select Default Image

Upload default image for your portfolio items.

NOTE : If there is no any default image, it will show uploaded default image.

3. Image Overlay Effect

Select the checkbox to apply hover effect on portfolio images.

4. Select Content Position

Select portfolio content position in four different position.

  • Overlay on Image
  • Bottom of Image
  • Left Side of Image
  • Right Side of Image

5. Select Mouse Hover Effect

This plugin provides 8 Image Hover Effects like below instead of.

  • Slide Bottom
  • Overlay Slide
  • Corner Slide
  • Rotating Zoom Out
  • Right Corner
  • Left Corner
  • Depth Zoom In
  • Depth Zoom Out
NOTE: Image Effect option only available when Image Overlay Effect is selected.

6. Display Summary in Words

It will display number of word in portfolio item Summary as description.

NOTE: Set ZERO for disable summary.
NOTE: Display Summary option only available on when Image Overlay Effect is selected.

7. Show Image Popup Link

It is providing options to show portfolio item image in full size in popup box.

8. Project URL Open In

It is providing options like Disable link or open in same tab or new tab.

NOTE: This will work only for custom post type generated by this plugin, on image hover.

Filter Setting

Filter Setting

Fig.3.4 Portfolio Filter Setting

1. Enable Filter

By selecting checkbox you enable filtration on front end.

NOTE: If filter is enabled then pagination will not be applied.

2. Text of "Show All" filter tag

Enter text that you want to display for "Show All" filter tag.

NOTE: If you will set blank then default text will be "Show All".

Pagination Setting

Pagination Setting

Fig.3.5 Portfolio Pagination Setting

1. Enable Pagination

Pagination will show, if post count is larger then number of selected post.

NOTE: Enable pagination if your post count is larger than the "Number of posts" option.

2. Pagination Type

Portfolio designer Lite provide you one type of paginations like below.

  • Pagination (simple Pagination)
Note: "Other Pagination Type" is available in PRO version.

Social Share Setting

Social Share Setting

Fig.3.6 Portfolio Social Share Setting

1. Social Share Links

Select checkbox to display social share icons in front.

2. Social Icon Display Position

This option will display all social icon in selected position like below.

Note: "Social Icon Display Position" is available in PRO version.

3. Select Social Icon Alignment

you can set social icon in three different position like below.

  • Left
  • Center
  • Right

4. Select Social Share Style

select icon style from social share style.

Note: "Social Share Style" is available in PRO version.

5. Available Icon Themes

select icon style from social share style.

Note: "Available Icon Themes" is available in PRO version.

6. Select Shape of Social Icon

select icon shape from social share shape option.

7. Select Size of Social Icon

Select icon size from social share size of icon option.

8. Facebook Share Link

This option allows you to hide/show facebook share.

9. Google+ Share Link

This option allows you to hide/show google+ share.

10. Linkedin Share Link

This option allows you to hide/show linkedin share.

11. Pinterest Share link

This option allows you to hide/show pinterest share.

12. Twitter Share Link

This option allows you to hide/show twitter share.

13. Pinterest Share Button with Featured Image

To display an pinterest share button with featured image.

14. Pocket Share Link

To display a pocket share option.

15. Telegram Share Link

To display a telegram share option.

16. WhatsApp Share Link

To display whatsApp share option.

17. Reddit Share Link

To display reddit share option.

18. Tumblr Share Link

To display Tumblr share option.

19. Skype Share Share Link

To display Skype share option.

20. WordPress Share Link

To display WordPress share option.

Typography Settings

Style Setting

Fig.3.7 Portfolio StyleSetting

Title Typography

  • Font color: Set post title font family. 
  • Font Family: Set post title font family. 
  • Font Size: Set post title font size.
    NOTE : If font size set to ZERO, theme's font-size will be applied. .
  • Font Weight: Set post title font weight. 
  • Text Transform: Set post title text transform. 
  • Line Hight: Set post title font line hight. 
  • Italic Font Style: Set post title normal to italic style. 
  • Text Decoration: Set post title text decoration. 
  • Letter Spacing: Set post title text letter spacing. 

Content Typography

  • Font color: Set post title font family. 
  • Font Family: Set post title font family. 
  • Font Size: Set post title font size.
    NOTE : If font size set to ZERO, theme's font-size will be applied.
  • Font Weight: Set post title font weight. 
  • Text Transform: Set post title text transform. 
  • Line Hight: Set post title font line hight. 
  • Italic Font Style: Set post title normal to italic style. 
  • Text Decoration: Set post title text decoration. 
  • Letter Spacing: Set post title text letter spacing. 

Meta Typography

  • Font color: Set post title font family. 
  • Font Family: Set post title font family. 
  • Font Size: Set post title font size.
    NOTE : If font size set to ZERO, theme's font-size will be applied.
  • Font Weight: Set post title font weight. 
  • Text Transform: Set post title text transform. 
  • Line Hight: Set post title font line hight. 
  • Italic Font Style: Set post title normal to italic style. 
  • Text Decoration: Set post title text decoration. 
  • Letter Spacing: Set post title text letter spacing. 

Filter Typography

  • Filter Text Padding: To set filter text padding.
  • Filter Text Border: To set filter text border and border color.
  • Filter Text & Border Hover Color: To set filter text and border on mouse hover.
  • Filter Text Background Color: To set filter text background color.
  • Filter Text Background Hover Color: To set filter text mouse hover background color.

Button Typography

  • Button Font color: Select button color using color picker.
  • Button Background color: Select button background color using color picker.
  • Button Font Family: Select button font family. 
  • Button Font Size: Select button font size.
  • Button Radius: Select button border radius. 
  • Line Height: Select button text line height. 
  • Button Type: Select button type rectangle or Oval. 

Content Typography

  • Select Content Background Color: To set portfolio content background color.
  • Select Image Hover Background Color: To set portfolio image mouse hover background color.
  • Custom CSS: To add extra CSS to particular tag or any html section.

    Ex. .class_name{ color:#000000; }

Portfolio Designer Lite plugin features

Cross Browser Support

Portfolio Designer Lite is fully compatible with popular web browsers like Internet Explorer, Firefox, Chrome, Safari, Opera, etc.

two types of layout

Portfolio designer Lite plugin has two main layout like Masonary Layout, and Grid Layout

Image Hover Effect

Portfolio Designer Lite has added 8 effective Image Hover effect using CSS3 and HTML5

Query Filters

Portfolio designer Lite provides to filter portfolio item with different type like taxonomy, terms, order and, order by etc...

Column Support

Portfolio Designer Lite has contain has default 3 column layout support

Thumbnail Resolution Support

Portfolio designer Lite provide types of featured portfolio image size option for portfolio item.

Pagination Support

Portfolio Designer Lite also support portfolio item pagination

Social Share Support

Portfolio designer Lite provide sharing portfolio item on popular social platform like Facebook, Twitter, Google+ etc...

Custom CSS

User can modify portfolio layout by adding custom CSS in particular portfolio layout settings.

Hooks For Developers

Portfolio Designer Lite provide some hooks for the developers to modify existing or add new features in plugin.

Multilingual Translation Ready

Plugin will use in any languages due to its multilingual feature.

FAQ

1. How portfolio designer lite plugin can setup?

To setup portfolio designer lite setup please visit this link Quick Guide , it will help you to make setup your first portfolio layout

2. How to use custom post type in portfolio setup?

To setup custom post type in portfolio designer lite please visit this link General Settings , it will help you to use your Custom Post Type

Translation

Portfolio Designer Lite plugin is language compatible, thus can be translated into multiple languages. You can use POEdit plugin for translation.

  1. Step 1. Install Poedit tool and open it

  2. Step 2. Open .POT file from /wp-content/plugins/portfolio-designer-lite/languages/ that you want to translate

    Open .pot file
  3. Step 3. Now, click on "Save"

  4. Step 4. Then one popup will be appear and then enter your Language code ( Ex: - "ca_CA" for English (Canada)) in language option

    Translation property
  5. Step 5. Then select source path tab and you have to modify this path to full path of your plugin that you want to translate.

    Select path
  6. Step 6. Then press ok button.

  7. Step 7. Then give file name like this wp_portfolio_designer_lite-ca_CA.po for English (Canada) language.

  8. Step 8. Then save file inside language folder in plugin that you want to translate and all strings are appear in your poedit editor

    POT file
  9. Step 9. Select your string that you want to translate and in bottom side there are two options one is Source Text and another one is Translation

    Translate string
  10. Step 10. Source Text keep as it is and in Translation section enter your translated string of selected string that you want to translate and then save it.

  11. Step 11. Repeat step 10 untill your all strings to be translate.

  12. Step 12. Now you will get two separate files – a .po file and a .mo file.

    Note: When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. For example, the language code for English (Canada) is ca_CA, so you would save the translated files as ca_CA.po and ca_CA.mo.

    PO MO file
  13. Step 13. Then go to wp-config.php file then enter the below code.
    define('WPLANG', 'Your language code'); for Ex.(ca_CA for English (Canada)) then save it.

  14. Step 14. Select language from admin side, Go to Dashboard » Settings » General in that check Site Language options.

    Select language
  15. Step 15. Check language prefix in front end, view HTML.

    Language prefix
For more about translating WordPress themes please visit the following link: https://developer.wordpress.org/themes/functionality/localization/

Thanks for using Portfolio Designer Lite Plugin!

We would like to thank you for using our Portfolio Designer Lite Plugin! If you have any difficulties with Portfolio Designer Lite Plugin or need any additional service, do not hesitate to contact us.

Just contact us on support.solwininfotech.com

We are very happy to assist you!

Credits

I've used the following jQuery Plugins as listed.

  • Chosen - Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
  • SocialShare.js - jQuery plugin for creating custom like buttons and like counters.
  • Aristo - The "Aristo" theme for Cappuccino ported to a jQuery UI Theme.
  • Font Awesome - The iconic font and CSS toolkit.