Cinematic Web Template Tutorial

Cinematic Web Template Introduces Cinemagraphs to Template Design

Cinematic is our first website template to introduce the option of a video or animated gif to be used in the header of the page. One of the latest design trends in marketing are Cinemagraphs. Cinemagraphs are basically video’s that include both stationary sections and moving sections. It’s like an image where a small part of the image is animated or moving, while the rest is stationary and not moving.

The Step by Step Guide to Updating Cinematic

The Cinematic template includes 4 different versions of the ‘index’ or home page. The default home page you see in the online demo, and in your template package uses the YouTube video loader as the default option for loading your home page video into the header of the page.

When you first download and open your template package you’ll see there is the basic folder structure for a web template including the default pages in the root, and you’ll also notice there are several index… pages.

Each of these index pages has a different option for displaying the cinemagraph in the header.

Let’s run through the list, then the reason for the different options and where or when you might ‘best’ put them to use.

index.htm

The index.htm uses the Youtube video loader as it’s default option. The YouTube video loader is probably the best option for most people. It is the fastest loading of all the options, and you only need to upload 1 video file / format to youtube to make it work. Setting up a YouTube account is free, quick and easy, as is uploading a video. You can take you own video ( try for HD 1280×720 or 1920×1080 ), upload to YouTube, copy the video id into your template and you’re done!

index-embedded-cinemagraph.htm

This is a bit of a unique page in the package as it’s the only one where we didn’t include a working example of an actual cinemagraph.

This page is designed to load a cinemagraph from an online service such as Flixel or Giphy. Because it’s a template, and we don’t know the final purpose of the website we’re not able to license an actual embedded cinemagraph for demonstration purposes or even a themed cinemagraph. For this you will need to contact the web site providing the cinemagraph and arrange your own licencing.

This template page is provided just as an option, for anyone interested in licensing their own cinemagraph.

Two websites where you can find some really cool cinemagraphs are:

Flixel: https://flixel.com/

Giphy: https://giphy.com/

Check the licensing of the images with any website where you are not the owner of the cinemagraph.

Example: Contact Flixel

index-gif-cinemagraph.htm

This page loads the animated gif version of the cinemagraph. This is where the pro’s and con’s differ the most. The pro’s are you don’t need to load from an external source and it’s the easiest to changes and update. The con’s are the file size for animated gif’s are much larger than the mp4 video format used by youtube or other embedded sources, and animated gif’s can’t be compressed, so it can slow the load time of your web page and you may also take a hit on google page speed because gif’s can not be optimized to load faster.

**NOTE** In your template package, we’ve only included a place holder ‘gif’ file for this page, not a themed and animated gif. If you want to use this page you’ll need to replace the included ‘gif’ with your own animated gif.

index-html5-cinemagraph.htm

The last option allows you to load your own video, hosted locally on your own server. The upside is you don’t need to load from an external source, so you don’t need a youtube account, or check licensing for flixel or giphy. The downside is you need to make sure your web server’s MIME type is setup to run video, and you also need to provide the video in 3 formats

  • mp4
  • ogv
  • webm

Not all web browsers support the native mp4 video format, so you’ll need to provide all 3 video formats to support all web browsers.

**NOTE** In your template package, we’ve only included a place holder ( mp4, webm, ogv ) files for this page, these are placeholders files and not themed for your template. If you want to use this page you’ll need to replace the included ( mp4, webm, ogv ) files with your own.

Sourcing Cinemagraphs

You may want to source your own cinemagraph, and most of the websites that license images, also license cinemagraphs. Such websites as istockphoto.com or shutterstock.com now have large libraries of cinemgraph video’s if you need something new for your template.

Updating your Cinematic Template

Here’s an introduction video that will demonstrate how to update the cinemagraph video in the header of your index pages:

Setup and Installation Instructions

Installation (all packages)

Planning & Preparation (all packages)

Working with Pages (all packages)

Publishing (all packages)