Loaded
Montoya Template

Portfolio

Help Center » Template Docs Montoya

Carousel Slider

This template provides a very elegant way to showcase your work using a WebGL carousel slider. Setting up is simple. Please use the following codes:

Code Example:

Carousel slider options

Options
Description
fx-one
fx-two
fx-three
fx-four
fx-five
fx-six
fx-seven

Set a class to define a fit thumb to screen effect
preview-mode-enabled

Set this class to enable the proview mode by clicking on one project

Slide Structure

The slide structure consists of an image accompanied by a caption. The setup process is straightforward. Please use the following codes:

Code Example:

Carousel slide options

Options
Description
data-centerLine="VIEW"

Define a word that will be displayed on thumbnail hover before entering the preview to the following div:
data-centerLine="OPEN"

Define a word that will be displayed on preview mode image hover before entering the project page to the following div:
Thumbnail

Set up the URL of your project's thumbnail image in the following img:
Fullscreen Image

Set up the URL of your project's hero image in the following img:

Portfolio Grid

This template provides a very elegant way to showcase your work using a WebGL porfolio grid layout. Setting up is simple. Please use the following codes:

Code Example:
Code Example:

Portfolio Grid options

Options
Description
fx-one
fx-two
fx-three
fx-four
fx-five
fx-six
fx-seven

Set a class to define a fit thumb to screen effect
layout-one
layout-two
layout-three

We have defined three portfolio layouts. Please assign one of these classes to the grid element below to display the desired layout:

Thumb Structure

The item thumb structure consists of an image accompanied by a caption. The setup process is straightforward. Please use the following codes:

Code Example:

Thumb Options

Options
Description
Filter Class

Define one or multiple classes for your filter sorting. These classes should match the filter classes. Apply them to the following div:
data-centerLine="OPEN"

Define a word that will be displayed on thumb hover before entering the project page to the following div:
Thumbnail

Set up the URL of your project's thumbnail image in the following img:
Fullscreen Image

Set up the URL of your project's hero image in the following img:

Infinity List Slider

This template provides a very elegant way to showcase your work using a WebGL vertical list slider. Setting up is simple. Please use the following codes:

Code Example:

Infinity List slider options

Options
Description
fx-one
fx-two
fx-three
fx-four
fx-five
fx-six
fx-seven

Set a class to define a fit thumb to screen effect

Slide Structure

The slide structure need to be empty. Please use the following codes:

Code Example:

The sync slide structure consists of an image accompanied by a caption. The setup process is straightforward. Please use the following codes:

Code Example:

Sync slide options

Options
Description
data-centerLine="OPEN"

Define a word that will be displayed on project title hover before entering the project page to the following div:
Thumbnail

Set up the URL of your project's thumbnail image in the following img:
Fullscreen Image

Set up the URL of your project's hero image in the following img:

Carousel Gallery Slider

This template provides a very elegant way to showcase your work using a WebGL vertical carousel slider. Setting up is simple. Please use the following codes:

Code Example:

Carousel slider options

Options
Description
fx-one
fx-two
fx-three
fx-four
fx-five
fx-six
fx-seven

Set a class to define a fit thumb to screen effect
preview-mode-enabled

Set this class to enable the proview mode by clicking on one project

Slide Structure

The slide structure consists of an image accompanied by a caption. The setup process is straightforward. Please use the following codes:

Code Example:

Gallery slide options

Options
Description
data-centerLine="VIEW"

Define a word that will be displayed on thumbnail hover before entering the preview to the following div:
data-centerLine="OPEN"

Define a word that will be displayed on preview mode image hover before entering the project page to the following div:
s0
s25
s50
s75

Set one of this clasess for left positioning into the slider:
speed-50

Set this class to increase the speed movement for the slide to the following div:
has-scale-medium
has-scale-small

Set one of these clasess for thumb size to the following div:
Thumbnail

Set up the URL of your project's thumbnail image in the following img:
Fullscreen Image

Set up the URL of your project's hero image in the following img:

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
parallax-scroll-caption

Set this class to have the caption title parallax on scroll
parallax-scroll-image

Set this class to have the 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
auto-trigger

Set this class for autotrigger link on reach bottom of each project page
data-color="#838b8a"

Set the color for Mouse Circle Cursor hovering the next page title url

Didn't find what
you were looking for?


If there’s anything unclear or you have some concerns
send us a message and we'll get back to you.

Send Us a Message