Cannes In Depth Overview. Features & Functionality

This article is meant to help you get a better understanding on the new features and video capabilities of our website theme – Cannes. Read this article before starting to build your videography or vlog website, to get an in-depth overview of how things work and what is possible. Know, that we do highly encourage you to play with the options, test them out, see what each button & scroller does, how it acts. This will help you get a better grip on all the possibilities (design and function wise) that Cannes has to offer. Enjoy!

Video iframes vs Self Hosted Video

First things first. Cannes, as many other of our themes supports both, video embeds (iframes or direct link from Vimeo / Youtube) and self hosted videos. Before, you had very little control over iframes – you could not tweak the way they look on your site.

Cannes is a whole different world. You are in full control over how your videos look and play, no matter if they are pulled from Vimeo/Youtube or self hosted video files on your server (a self hosted video is a file that you upload directly to WordPress). Put them on autoplay, enable a beautiful preview on hover, hide the video controllers and the black frames pulled from Vimeo/Youtube, and so much more. You’ll be surprised how much control and functionality this theme gives you.

Page Blocks that Support Video

As many of you know, Flothemes comes with a page builder and a system of blocks (over 50 blocks) which allow you to easily build your own pages or customize the pre-designed templates. For the majority of page blocks available with Cannes, you have 2 options – add a video link which opens in a pop-up once you click on it, or add a photo still. If you’re curious to know which exact blocks support both, video iframes and images, check out the following 3 pages: All Blocks 1, All Block 2 and All Blocks 3 (the blocks that include only a photo still, don’t support video, the rest support both). In addition to the blocks you have 4 slideshows and multiple Item Title (Featured Image) sections that also support video.

Slideshows

Cannes offers 4 stunning slideshow options, each with its own unique elements and functionality. Let’s go over each of them briefly:

Slideshow 2 – you can keep it full screen or adjust its height to your own needs. It comes with 2 alternatives for the Slideshow Navigation Type:

• Next Item Title
• Lines – for a more clean, minimal look.

It supports 3 types of content – images, video embeds & self hosted videos. If you use images, it will work like a regular slideshow. If you use video embeds, the play button with show up, and once you click on it – your video will display in a pop-up. If you want to have a video in your slideshow that autoplays – you’ll need to use self hosted videos. We do recommend uploading short teasers for this (10-15 seconds max, up to 8MB in size, the smaller the better) to keep your website optimized and loading fast.

Additional functionality that you can play with are Slide Effect, Slide Transition Speed, Autoplay and Autoplay Delay.

NOTE: Once you activate the Autoplay mode, your slides will move automatically inside your slider, each staying on the screen for the amount of time you’ve set via your Autoplay Delay. If you don’t activate the Autoplay mode, your users will have to click through your slides manually. The Slide Transition Speed dictates how fast one slide changes the other.

Slideshow 1 – a 50/50 slideshow layout, perfect for those who want to emphasize from the very beginning the 2 types of services they offer (ex: Wedding & Commercial work, Photography & Videography, etc). Again, this slider works with 3 types of content – images, embeds & self hosted videos. If you use video embeds, the play button will open the video in a pop-up. If you use a simple static image, you can link it to a Portfolio, Gallery or Blog listing page, to show more of that type of work. For self hosted videos, this slider has a special effect. You add a self hosted video file and an image for each section, and hover your mouse on one of these sections – it will autoplay the video file, while the other part stays static. This slider creates a really dynamic presentation for those who offer more than one type of service.

NOTE: this slider will crop your videos and images, to keep the 50/50 layout design.

Slideshow 3 – a full screen slider with unique animated elements to show the slide movement. Each column overlay highlights the slide that is currently displayed. If you have the Autoplay mode on and a self hosted video in the slider, the overlay column will slowly fill out while the video plays on the background, indicating that the next slide will appear. If you switch off the Autoplay mode, the animation disappears and you have to switch manually through the slides. When you add video embeds, the play button will show up. If your Autoplay mode is on, the play button will be animated. Once you click on it – your video will open in a pop-up.
This slider also works nicely with static images, which will switch nicely when the Autoplay mode is on, again with the overlay column indicating which slide is being displayed currently.

Slideshow 4 – it has a similar functionality to Slideshow 3, you can adjust the height of the slider, play with the Autoplay, Slide Effect, Slide Transition & Autoplay Delay. It also has animated lines when the autoplay mode is on, showing the progress status of each slide, and how fast it will change to the next slide.

BONUS TIP: An alternative to using the slideshow would be using the Intro Block that you will find in your backend. You can see it at the top of the Investment page, it supports images and self hosted videos, has an adjustable heights and comes also with a sleek arrow that encourages the user to scroll down for more content. You can use this block as a nice welcoming message, add an overlay matching your brand colors, and more.

New Custom Post Type

Until today, Flothemes users had 2 Post types available within their theme to present their work – 1. Posts (Blog),  2. Galleries. With Cannes, we’re introducing a third custom post type – 3. Videos. Videos offer more control and advanced functionality to showcase your video work, as well as a more rich and interactive user experience to your site visitors.

We’ll explain in the sections below how each of these Post types work with videos, as there are certain similarities and differences.

Posts

If you choose to work with Posts when listing your work, you have the following options to showcase your videos:

1. Featured Area – by using one of the 4 Item Title blocks available inside your theme:
Item Title 1 – framed block, with title & text above the
Item Title 2 – full screen block, opens your video in a pop-up.
Item Title 4 – framed block, with title & text under + adjustable background color.
Item Title 5 – Youtube type of layout, with main video on the left and smaller video suggestions on the right in a vertical column.

These blocks support both embeds and self hosted videos, and offer plenty flexibility to adjust the way your video is presented. You can:

• Tweak the height of the block, especially useful when trying to hide the black frame that comes from Vimeo/Youtube.
• Enable autoplay mode or Disable it.
• Mute the video or keep the sound on.
• Show or hide the controllers for a video i-frame (progress bar, play, etc) to keep a clean look. As we’ve hidden it on most blocks in our theme demo.

2. Video blocks – you can extend your single blog posts by adding a video block into the layout (at the top or bottom of your WP content block, you decide). This is an external block, hence it will support only video embeds.

3. Simple embeds – default functionality available with WordPress, with no options to control how your video looks.

Galleries

If you choose to work with Galleries when listing your work, you have 2 layout options – a Slider view or a grid view. Galleries are perfect when you need to show videos as a collection – it can be commercial work, a series of videos for a specific brand, a list of films from your vlog on a specific topic, etc.

When using the slider view, you have the option of displaying only images or images + videos (embeds). Each video will open in a pop-up once you click on it.

With the grid view again you can showcase a collection of videos, unified by the same topic, brand, location etc. The images or images + videos (embeds) will display in a nice grid and open in a pop-up. In this particular example we’ve used the grid view, plus added Item Title 2 to highlight one of the videos.

Apart from the pre-designed Gallery templates, you also have the freedom to build your own Gallery page out of the 50+ blocks available with Cannes. Custom Gallery A and Custom Gallery B are great examples of this. We used various Item Title blocks (depending on the block, you can customize the background color, the height, autoplay, controller display, sound, etc), text blocks to feature the partners involved and offer a short story, a slider or grid to show some Behind the Scenes images and of course a Recommended Posts block to offer suggestions for further pages to view.

NOTE: If you want to offer a more rich overview for certain projects that you’ve worked with, highlighting the partners, story and including some additional images, BTSs, testimonials, etc – the Gallery type of post is the best option to work with.

Videos

The Video post type is very similar to the simple Post type. You can build you single Video posts out of a WP content block with or w/o a feature area (best use Item Title blocks), and other page blocks relevant for your purpose. The main advantage of using the Video post type, as compared to the simple Post type – are the extra video functionality available when listing your video posts.
(Note: Listings are the layouts you create to display all your single posts, be that videos, galleries or blog posts).

On your Video Listing page, you can choose to have all videos on global autoplay, autoplay only on hover, or have all of them appear as static images with a play button. You can find these options in your backend, in the Flotheme tab > Videos > Preview Options.

Static mode

If you don’t want any interactive previews for your video listing page, choose the Static option in Flotheme tab > Videos > Preview Options.
You will also notice a section called Buttons (play & link). When enabling it, you get to choose how your video will be displayed once a user clicks on the play button – it can either open the video in a pop-up slider or start playing the video as it is, in the listing layout (Boxed option). Or keep the the Buttons (play & link) disabled to have the play button open the post with the video.

For the pop-up, you again get 2 layout alternatives. Both pop-up layouts allow your user to keep watching video after video without having to exist the pop-up slider or navigate to a different page. Here are the 2 types:

1. Type A – a pop-up with a minimal navigation on the sides of the video.
2. Type B – a pop-up with a more detailed navigation bar located under the video.

Autoplay on Hover mode

If you choose to have all your videos show a quick preview once the user hovers over any of them, there are 2 alternatives here again:
You can upload or add a link to a shorter version of this video, which will load fast and offer a sweet and intriguing preview to your users. We recommend creating short 10-15 seconds teasers, that you either upload to your website (self hosted) or your Vimeo/Youtube account (video embed). To upload these short previews, you’ll need to access your single Video posts, and find on the right bottom side a new side bar called – Listing Preview Options. This side bar is directly connected to the functionality you enable in Flotheme tab > Videos > Preview Options.
If you don’t add a preview to your single video post, in the Listing Preview Options side bar, the preview is pulled from the original video, be that a self hosted post or an embed. While this is the easy way, it may take longer to load a preview, as it depends on the size of the video file, your hosting provider/server, the user’s internet speed, etc

Just like with the Static mode, you can choose to have your videos open in a pop-up slider, by enabling the Buttons (play and link) section in the Flotheme > Videos > Preview Options section.

Global Autoplay mode

By enabling this option, ALL your videos on the Video Listing page will be playing a preview immediately after a user accesses this page. We recommend using it ONLY to highlight certain videos on the listing page. This means that you’d have the Global Autoplay mode enabled, and will need to manually turn the autoplay off for some of the video posts, inside your Listing Preview Options side bar. Otherwise you risk overwhelming your users with too much movement and agitation on your page.

Just like with the Static mode, you can choose to have your videos open in a pop-up slider, by enabling the Buttons (play and link) section in the Flotheme > Videos > Preview Options section.

***

We hope this helped you get a better understanding on what you can do and build with Cannes, our new website theme for videographers. You can check further documentation and tutorials here (starting June 22nd).

Flothemes Team.