ThemeKit Images
Hero 50Optional animation in left or right.
Jumbotron
Hero Image
The hero image has a 50% overlay above the breakpoint. The overlay can positioned left or irght.
The panel has and optional logo/link, a heading, styled span, text and one or two CTA (call to action) style links.
The image is inserted in three sizes and has alt text for the search engines and a lazy load option.
The images in the demo were optimised prior to importing into EverWeb and sized to …
- Large image - 1200 x 800px file size 100KB
- Mobile image - 600 x 400px file size 60KB
- Phone image - 375 x 480px file size 35KB
Overlay
The image has an optional overlay to reduce its effect. The overlay can animate in with controls for animation time and delay in milliseconds.
Animation
The panel can animate in using the controls for amimation time and delay set in milliseconds.
Background Image
If a background image is required it must be inserted using a suitable widget to prevent it adversely effecting the download performance - especially on mobile devies.
The ThemeKit Image Background widget inserts the image in a fixed position to cover the viewport rather than the browser background, This allows a smaller size of image while maintaining reasonable quality.
The images used in the demo were resized and optimised before importing into EverWeb to …
- Large image - 960 x 640px file size 26KB
- Mobile image - 720 x 720px file size 20KB
- Phone image - 375 x 540px file size 11KB
Overlay
The image has an optional overlay to reduce its effect. The overlay can animate in with controls for animation time and delay in milliseconds.
Menu