EverWeb Widgets

Ez In Heading

Animate Heading

The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for adjusting the font size, mobile size, color, font weight, font style, letter spacing, mobile spacing and for adding a text shadow. The heading type can be h1 through h4.
The background color has an opacity slider and the heading has a maximum width setting in case it is required to be aligned left and line up with the item above and/or below. it
Animation
The animation fires every time the item is scrolled into the viewport. There is a checkbox to cause it to only fire once on page load and another to implement the aniimation on mobile phones.
There is a checkbox for turning on the animation and controls for setting the animation time and delay in seconds and for choosing the animation direction.

Animate Text

The container is an HTML5 <article> element which is centered in the browser with a maximum width. The article has an h1 heading, a paragraph and an optional CTA style link. There is a control for adjusting the vertical spacing between the items.
The link can be configured to open internal or external pages and in a new window if required.
Animation
The animation fires every time the item is scrolled into the viewport. There is a checkbox to cause it to only fire once on page load and another to implement the aniimation on mobile phones.
There is a checkbox for turning on the animation and controls for setting the animation time and delay in seconds and for choosing the animation direction.
NOTE: When several of these widgets are inserted on the same page, the settings for "Animate only once" and "Animate on mobile phones" must be the same for each one.

Hero Float

Animated Text and Image — Animated Image

Animated Image & Text

The container has a CSS grid layout which encloses an HTML5 <figure> and an <article>.
The figure has an image with an animated <figcaption> and slides in from the left. The article has an h1 heading, text and a CTA style link tab and slides in from the right.
Both items are vertically aligned in the center and animate every time they are scrolled into the viewport.

Hero Image

Animated Image & Text

Hero Image