The ThemeKit Float Banner 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 front image, caption and link can each have different animations selected from the ThemeKit custom stylesheet
The ThemeKit Float Image widget inserts the image in three sizes for the various devices using the HTML5 <picture> element so that the alt text attribute can be used.
The optional captions is inserted below the image and when the image is configured as a hyperlink a link icon appears at the top right. This icon can appear on hover when viewed on computers.
The image is inserted in a <figure>element which can have a border and/or a bottom box shadow.
![ThemeKit Float Module [1]](ewExternalFiles/ped-a.png)
A two column grid layout. Each column has an image with alt text and a text section with a heading, optional span, description and an optional link which can open internal/external pages and has a new window option.
The grid items have options for background opacity, border with and color and for adding a bottom box shadow
![ThemeKit Float Module [2]](ewExternalFiles/ped-b.png)
The images are PNGs optimised to reduce their file size.
The ThemeKit Float Module widget has a two column grid layout. The grid items have an image with alt text, a heading, optional span, text and an optional link. The options can be applied to one or the other or both items.
As can be seen from the example each item can have a different scroll animation.
Text links should be avoided on responsive pages since they aren't friendly towards mobile device users. This link bar can be placed below any container that needs to have links to other pages or sites.
The links can be spaced horizontally and vertically and have a min width setting if they all need to be the same width.
Animation
The links have a shutter hover animation from the top, right, bottom or left when viewed on computers. The link has three background colors - onload color, transition color and hover color - to create this simple effect.
The ThemeKit Float Background widget is used on this page. It can create a two color gradient with adjustable color stop and angle and a checkbox to switch the gradient from linear to radial if required.
The footer has a three column grid layout when viewed on browser/screen widths greater than the break point. It collapses to two columns and then a single column as screen with is decreased.
Left Column
This has a heading, text block and an optional phone number which changes to a phone icon to place the call when viewed on mobile phones.
Center Column
This has a heading and text which is aligned center in the example. The email function is spam protected.
Right Column
The heading is followed by a navigation which can have several links to internal/external pages with a new window option.
The smooth scroll to the top function has a control for setting the scroll time in milliseconds.
© Notice
The copyright notice spans all three columns and has a function for automatically adding and updating the copyright year.
Animation
The footer can be static and is restricted to a rotate in on the X-axis animation since it is the last visible item on the page.
