Mobile First Hero

Any animatimated items on a web page would normally be removed when the page is viewed on phones since it just creates confusion. The exception would be some type of subtle animation which occures in view on page load.
The ThemeKit Mobile First Hero has the option to animate the overlay overlay and the heading, text and optional link to create a memorable effect without it being overwhelming.
Images
The images are inserted in three sizes using an HTML5 <picture> element so that alt text can be inserted for the search engines and screen readers.
Befire importing into EverWeb the demo images were sized to 1200 x 600px, 740 x 360px and a 9:16 aspect ratio image at 375px wide for phones in portrait mode where the hero height fills the height of the viewport.
Position
By default the hero image scrolls with the rest of the page content. Checking a box fixes it in positione so that the content scrolls over it. When viewed on a mobile phone it gives the illusion of a background image since it fills the device's viewport.

Logo
The optional logo item is inserted at the top left with controls for width and position from the top and left. The logo is configured as an internal link which would normally be to the home page.
Content
The content area is an HTML5 <article with its own control for background color and opacity.
There is an h1 heading, text and an optional internal link which can have a border if required.
Underline
The heading a text nave an optional underline which can be animated from the center out. Note that this can only be applied to a single link of text.
Animation
The animation is turned on by checking a box and the times are set in seconds. All the items share the same amimation time but have their oen controls for setting the delay.

Contact Bar

The importance of having contact info upfront and visible when the visitor opens the landing page cannot be overemphasised. The ThemeKit M1 Contact Bar widget has a phone number/phone call icon, a link to the contact form and a spam protected email function.
The icons are SVGs and they can have a border if required.
The background color has an opacity slider so that the bar can overlay the item above it at the bottom. This item would normally be the landing page hero.