Below there are several components that have options (styling classes). This template is a demo/showcase for all elements so for other components you can simply copy paste & edit the html markup.

Page sub-header#

The markup:

In kl-bg-source div we have the background for sub-header, you can use a gradient, simple color, image, sparkles, video.

To make your custom background gradient enter on this website and generate one: http://www.colorzilla.com/gradient-editor/

Sub-header masks#

All styles of sub-headers mark-up are in the components mark-up/sub-header masks/mask-style.html take the preferred style and add to your sub-header mark-up:

#

#

Kallyas Videos#

Sample markup:

As you can see the setup is being made by the data-setup attribute which has options such as:

• position – The position css value for the video object to be created, make it “absolute” or “fixed”, being that the latest makes it scroll with the page (used for fullpage backgrounds usually)
• z-index – The z-index css property for the background video, usually set it to “-1” or “0”, being that -1 will put it behind absolutely everything, even the background-color itself
• video_ratio – If you want your video to fill all the available area (will crop some parts of the video potentially but looks terrific) set here the value resulting from the calculation width_of_the_video/height_of_the_video
• loop – Set to true or false depending if you want the video to loop or not when it reaches the end
• autoplay – Set to true or false depending if you want the video to start to play immediately or not
• muted – Set to true or false depending if you want the video to start muted or not
• mp4 – The path to the mp4 video format
• webm – The path to the webm video format
• ogg – The path to the mp4 video format
• youtube – The id of the youtube video
• start – Available for youtube videos only, sets the time in seconds you want the video to start at
• fallback_image – The image to fallback to on mobile devices

Remember: videos can only be seen on desktop devices as mobiles are still buggy, so as a fallback for smartphones/tablets there will only be displayed the poster.

Video control positions:

You can reposition the video controls by simply adding data-position attribute on the .kl-video--controls block. The positions can be: top-left, top-center, bottom-right, bottom-left, bottom-center, middle-right, middle-left, middle-center .