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 :
1<h3 style="text-align: center;"><span style="color: #ffffff;">OUR PROJECTS</span></h3>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