ThemeKit Float Banner Right — Banner [3]

ThemeKit Float Banner [3]

The ThemeKit Float Banner [3] is different from the other float widgets in that it is static with animated items and the option to use a background image in three sizes for the various devices.
The overlay has a three column grid layout with three figure elements each containing an image with alt text, caption and an optional link to open internal/external pages. The animation for each is selected from the ThemeKit custom stylesheet.
Note how the last item is set to animate in first by giving the items the same amnimation time but a different delay time.

Banner [2]

MP4 & MP4 HD Video

ThemeKit Float Video MP4 | Vimeo | YouTube

The video player shows a poster image onload and can play MP4, Vimeo and YouTube videos. When self hosted video is selected there is the option to load a standard video file and an HD file. A button in the control bar allows the visitor to select the HD version.
Controls
The control bar has options for light or dark mode and repaces the default browser, Vimeo and YouTube controls.
Aspect Ratio
A video with a different aspect ratio can be inserted by entering the width and height of the video file.
Title
A video without a title and a few key words cannot be indexed by the search engines. The widget has the option to insert a caption below the video in the <figcaption> element.

ThemeKit Float In Article

A two column grid layout with an image in a <figure> and a heading text and optional link in an <article>.
Column widths are adjustable, the layout can be switch and the srticle can be above or below the image on screen widths below the break point.

Info

Show/Hide Nav

On browser/screen widths above the break point the ThemeKit Row Show/Hide Nav sits above the heading. Below the break point the mobile navigation tab appears at the top right.
Show/Hide
The navigation scrolls with the rest of the page content but will reappear at the top when the scroll direction is reversed or the bottom of the page is reached.
Current Page
The current page link can be indicated with a contrasting font color and an optional animated underline.