1. Home
  2. Klin WordPress
  3. Organizing Content
  4. Portfolio / Gallery

Portfolio / Gallery

Step 1. Create “Single Portfolio”

Start with creating categories Portfolio -> Categories. Add single portfolio post (Portfolio -> Add Portfolio) and fill in the details: content, featured image and choose customize the look you want.

  • Portfolio style – you have a choice of content view one of 3 template styles (fullwidth gallery, large gallery, small gallery) or create a page with Visual Composer builder (blank).
    Note: Other settings not applicable for Portfolio style -> Blank
  • Add Gallery – upload images to your portfolio post
  • Gallery view – assign one of 4 gallery view (Images, Slider, Grid, Masonry)
  • Gallery position – if you chose portfolio style “large gallery” or “fullwidth gallery”, you can add gallery under or below content
  • Portfolio text – add content to portfolio
  • Add attributes – additional information below text eg. date of photos
  • Back to page – page will be loaded after click in link

Portfolio Settings (for Visual Composer) – change settings to achieve the look of portfolio elements you want.

  • Grid size – option is available only for type masonry and masonry layout “from elements” in Klin Portfolio Masonry. Assign one of 4 sizes (small square, tall rectangle, wide rectangle, large rectangle).
  • Custom link – add link to page which will be opened after click in portfolio item. Option is available only for “Open portfolio -> in portfolio page”.
  • Background color on hover – select color for background on hover (4th hover style) in portfolio elements (Portfolio Carousel, Portfolio Masonry, Portfolio Element).
  • Color on hover – select color for text on hover (4th hover style) in portfolio elements (Portfolio Carousel, Portfolio Masonry, Portfolio Element).

 

Step 2. Create “Portfolio” page

From your site WP dashboard, add a new page, assign one of portfolio VC element to it. We have 3 elements (2 portfolio elements and 1 single portfolio element), each presenting different looks.

  • Klin Portfolio Masonry
  • Klin Portfolio Carousel
  • Klin Portfolio Element

You can create multiple portfolio pages.

Step 3. “Portfolio” settings overview

 

Klin Portfolio Masonry

Pinterest 4 columns

Options in Portfolio Masonry element:

  1. Select query criteria (categories or posts) – choose which of portfolios will be shown in element.
  2. Posts per page – lets you define number of items per page
  3. Select type – we created 17 types of portfolio. You have 4 main styles (Grid, Masonry,
    Masonry scattered, Pinterest) with number of columns to choice.
  4. Show title & categories – select where you want to show title & categories (on hover or below images).
  5. Select hover type – assign one of 5 hover types to portfolio.
  6. Select header size
  7. Open portfolio – decide how portfolio images will be shown.
  8. Show spacing between elements – lets you decide if any space should be present between elements
  9. Colors & Button – change settings to achieve the look you want.

 

Klin Portfolio Carousel

Options in Portfolio Carousel:

  1. Select query criteria (categories or posts) – choose which of portfolios will be shown in element.
  2. Posts per page – lets you define number of items per page
  3. Show title & categories – select where you want to show title & categories (on hover or below images).
  4. Carousel height – select fullheight or add custom height.
  5. Select header size
  6. Open portfolio – decide how portfolio images will be shown.
  7. Show arrows – decide if portfolio carousel should contain arrows
  8. Show pagination – decide if portfolio carousel should contain pagination
  9. Autoplay – decide if autoplay should be active.
  10. Select hover type – assign one of 5 hover types to portfolio.
  11. Color – change colors to achieve the look you want.

 

Klin Portfolio Element

Options in Portfolio Element:

  1. Insert portfolio ID – Portfolio ID you can find in 5th column in Portfolio (image below).

  2. Show title & categories – select where you want to show title & categories (on hover or below images).
  3. Carousel height – select fullheight or add custom height.
  4. Select header size
  5. Open portfolio – decide how portfolio images will be shown.
  6. Select hover type – assign one of 5 hover types to portfolio.
  7. Color – change colors to achieve the look you want.

 

Was this article helpful to you? Yes No