EverWeb ThemeKit Hero
Gradient or Image BackgroundLeft, center or right aligned content above the breakpoint.
Auto height on mobile devices below the breakpoint.
Hero
The hero item seems to be almost obligatory on a website's landing page. A hero is normally full width with a fixed height and uses a background image. Neither of these are desirable.
A background image cannot have alt text for the search engines and a fixed height doesn't perform well on mobile devices.
Images
The hero MUST have the image inserted in two sizes with a much smaller one for mobile devices. The images in the ThemeKit Responsive Hero widget shown above were reduced to 1200 x 800px and 720 x 480px and optimised before importing into EverWeb.
The images are inserted using the HTML5 <picture> element which allows an alt text attribute.
On browser/device screen widths above the breakpoint the image has a fixed height, Below the breakpoint the height becomes responsive using an intrinsic aspect ratio. The ratio can be set for both tablets and mobile phones.
Icon Row
The row has a grid layout with two, three or four columns.
When there are 3 items the last one is centered in row 2 on screen widths below the breakpoint.
Icons
The icons are SVGs and are available in the download folder via a link in the "Read Me First" document.
Open the required icon file in TextEdit.app set in plain text mode, copy the code to paste into the widget settings.
Content
Each item has a header with an optional icon and heading, text and an optional full width link.
The link can open internal or external pages and has a new window option.
Animation
The heading can be set to animate in from left to right with controls for animation time and delay.
The animation occurs when the item enters the viewport.
The delay can be staggered by checking a box.
Contact Info
If a web page doesn't show contact info immediately and up front on page load visitors will mistrust the site and leave.
Contact Bar
The ThemeKit Responsive Contact Bar can be place anywhere in the stack of widgets. In this example it is inserted below the hero image and on the home page it overlays the bottom of the hero.
The bar has a configurable internal link, an option for a phone number/phone call icon and a spam protected email function.
Contact Info
ThemeKit RWD Contact Info widget has a centered two column grid with an image and an article. The layout can be switched and the text can be above or below the image below the breakpoint.
Image
The image has a caption and can be lazy loaded. By checking a box it can be configured to open an interactive map in a lightbox window. The map has a field for the address and a control for setting the initial zoom level.
Article
The article has a heading, text area, optional phone number/phone call function and a spam protected email fumction.