ThemeKit Active

ThemeKit Active Hero
ThemeKit Active Hero Front Image
ThemeKit Active Hero
JumboRowsSlider

Active Hero

The ThemeKit Active Hero widget loads the back image with alt text in three sizes for the various devices.
The overlay has controls to adjust its color and opacity - in this case black with 50% opacity.
The front image is looaded in two sizes for computer and smaller mobile devices. All images have a lazy loading function.
The heading can run to two or more lines and has a text shadow function for thicken up single font weight Google hosted fonts.
The optional links have a min width control and can be spaced horizontally and vertically.

Animation

The animations are created using the custom ThemeKit Animation stylesheet which has over 20 custom animations to choose from.
Each item has controls to turn on the animation, to select the type and for the animation time and delay which are set in milliseconds.

Active Heading

EverWeb ThemeKit

Active Heading

The ThemeKit Active Heading widget creates an h1 through h3 heading. The heading can use a Google hosted font with websafe fallback and has controls to add a text shadow to thicken up custom fonts with only on e font weight.
The heading background can be a solid color or a two color gradient.
Icon
The optional icon is configured as an internal link. The icon can be a letter or number or any of the 100s of SVG icons available from the download in the widget "Read Me First" file.
The icon has controls for size, padding, color, background color, border width, border color and border radius.
Sliding the border radius control to maximum will make the icon round.
Heading Type
The heading above is an h3 since it is a heading for a change of subnject. The example at the top of the page is an h1, has a link to the home page and no animation. h2 is used for the page name.

Animation

The heading has controls for turning on the animation and for animation time and delay in milliseconds.
The text animation is transform scale on the X-axis. There are controls for initial scale X, initial width and initial opacity.
Like all good animations it can be set to fire only once or every time the item enters the viewport.
By default the animation is prevented on mobile phones as it should be.
Checking a box will turn it on for phones if this is really becessary.

© EverWeb Widgets -

Menu