Creating portfolio page


Portfolio page of {Theme} is built using Visual Composer. Theme is supporting 3 version of this page:

  • 3 Columns
  • 4 Columns
  • 6 Columns

The Visual Composer Backend editor of the page look like this:

Portfolio page in Backend editor

Portfolio page in Backend editor

Adding row

Row Settings: After adding new Row to the page in the General option please change Row stretch option to Stretch row and content as on example below:

Row Settings - General

Row Settings – General

after switching to Design Options Tab set padding and border value for this element and add Background image (optional)

Row Settings - Design Options

Row Settings – Design Options

Content

  1. Text Block – Go to general tab and Add content to the Text tab:
    Text Block settings

    Text Block settings

     

  2. Post Masonry Grid – Set options as below if you wish to recreate the look of ‘our Projects’ from {Theme}:
    • General 
      General tab

      General tab

      1. Data source – Ct-portfolio (setting this option images will be taken from Portfolio item),
      2. Total items – choose number of elements that will be visible on the site,
      3. Display Style – Show all,
      4. Show filter – Yes
      5. Grid elements per row – choose 3, 4 or 6 Elements per row,
      6. Gap – 30px
      7. Initial loading animation – Default
      8. Extra class name – add ct-vcMasonryGrid–portfolio class to have the same style of the portfolio like on {Theme} demo
    • Data Settings – no changes added
    • Filter 
      Filter

      Filter

      1. Filter by – Portfolio Categories(ct-portfolio-taxonomy),
      2. Style – Filled
      3. Default title – All,
      4. Alignment – Center,
      5. Color – Sky,
      6. Filter size – Large
    • Item Design 
      Item Design

      Item Design

      1. Grid element template – Masonry grid: Overlay with rotation
    • Design options 
      Design options

      Design options

      1. Css box – margin-bottom: 20px;

Page Attributes

To be able to use Customize options dedicated for Portfolio page, please choose Our projects from Template.

Portfolio template

Portfolio template