Create Portfolio Page

  • Posted:
  • / By: joy
  • / In:

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:

To create a new portfolio page follow the steps below:

  • Step 1 – Create new page, then add row using the Visual Composer. 
  • Step 2 – Click on Edit this row icon in the row created, then the Row Settings will pop-up. Under General tab, change the Row stretch to Stretch row and content.
  • Step 3 – After, click on Design Options tab, where set padding and border values for this element can be changed and add Background image (optional).
  • Step 4 – Click on the Add Element icon at the center of the row created. Add a Text Block inside the row, the Text Block Setting will pop-up. 
  • Step 5 –  In the Text Block Setting’s General tab, Click on the Text tab under Text. Delete the default content in the Text Block and replace it with :

    Then save changes.

  • Step 6 – Set options as below if you wish to recreate the look of ‘our Projects’ from Estato:

Add a Post Masonry Grid inside the same row from Add Elements, the Post Masonry Grid Setting will pop-up.

  • Step 7 – Change the following information in Post Masonry Grid Setting.

    General Tab

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

    Item Design Tab

    • Grid element template – Masonry grid: Overlay with rotation

    Design Options Tab

    • Css box – margin-bottom: 20px