Portfolio Page
This template provides a very elegant way to showcase your work using sticky titles combined with overlapping scroll images. Setting up Portfolio is simple. Please use the following codes:
Code Example:
You need to assign the counter number for each project you have inserted into portfolio structure.
The counter structure is located inside footer.
Code Example:
Slide
Portfolio slide options
Options |
Description |
|---|---|
change-header |
Set this class if you want to invert the header color when this slide is in viewport |
data-slide="1" |
Set slide number which is assigend with the footer counter |
data-color="#171717" |
Set slide background color active in viewport |
Slide Title
Portfolio slide title options
Options |
Description |
|---|---|
data-color="#558e2f" |
Set color for mouse cursor on title hover |
data-firstline="View" |
Set first text line for mouse cursor on title hover |
data-secondline="Project" |
Set second text line for mouse cursor on title hover |
Project Page
This page is composed of three section:
Hero
This page section contains the project title, subtitle and image/video.
Code Example:
Hero Caption Options
Options |
Description |
|---|---|
content-max-width |
Set this class to have the caption maximum width up to 1280px |
content-full-width |
Set this class to have the caption width like the viewport |
parallax-scroll-caption |
This class will make your hero caption parallax on scroll |
Hero Images Options
Options |
Description |
|---|---|
change-header-color |
Set this class if you want to invert the header color when hero image is in viewport |
parallax-scroll-image |
This class will make your hero image parallax on scroll |
Main Page Content
On this page section contains you can build all the page content.
Code Example:
This section has the following option:
Options |
Description |
|---|---|
content-max-width |
Set this class to have the content maximum width up to 1280px |
content-full-width |
Set this class to have the content width like the viewport |
Next Project Navigation
The section should have the same atributes as the next project hero.
Code Example:
This section has the following options:
Options |
Description |
|---|---|
change-header |
Set this class to change the header color for the next project page: |
data-bgcolor="#171717" |
Set the next project page background color: |
content-max-width |
Set this class at to have the content maximum width up to 1280px |
content-full-width |
Set this class to have the content width like the viewport |
data-color="#838b8a" |
Set the color for Mouse Circle Cursor hovering the next page title url |
data-firstline="Next" |
First word displayed on the Mouse Circle Cursor hovering the next project title url |
data-secondline="Project" |
Second word displayed on the Mouse Circle Cursor hovering the next project title url |
Didn't find what
you were looking for?
If there’s anything unclear or you have some concerns
open a ticket on our forum and we'll get back to you.