Hero Info
The ThemeKit Graphic Design Hero widget can have a solid color, two color gradient background or an image.
The overlay is a CSS Grid using columns and rows with an optional logo/link, a center image with a heading either side and an optional horizontal navigation.
Images
The back image is inserted in three sizes and have a lazy loading option
The front image has controls for max width, border, with, color and radius, shadow radius and shadow spread. It can be made round by checking a box.
The images used in the demo were sized and optimised before importing into EverWeb. The images are …
- Large Image: 1200 x 800px - file size 433KB
- Medium Image: 800 x 800px - file size 339KB
- Phone Image: 375 x 540px - file size 119KB
- Front Image: 400 x 400px - file size 150KB
Animation
The animated items are the center image, h1, h2 and the links. Each has their own control to turn on the animation and for animation type, time and delay.
In general animations should be turned off for mobile phones although there is a checkbx to turn them on for those devices if necessary.
The animations use a custom, minified stylesheet for better performance and atyle.
