Hero & Navigation

The ThemeKit Hero Menu widget has a header with an optional logo link, the h1 heading for the website name and the action tab for the mobile navigation.
The item is full width with a fixed height. It has a two column grid for the navigation and the image.
The navigation has options for a heading with scroll down chevron if the menu height exceeds that of the items height and any overflow scrolls into view.
The navigation can be switched to the right if required.
Mobile Menu
On screen withs below the selected breakpoint the navigation is hidden and its action tab appears at the right in the header.
Image
The image is inserted in three sizes for the various devices. The images in the demo were optimised and sized to …

  • Large image - 960 x 720px (190KB)
  • Medium Image - 800 x 600 (150KB)
  • Phone Image - 375 x 540 (69KB)

Image Scroller

The image scroller provides a more efficient way to display images than using a slideshow or a grid. Scrolling for mobile device users is kept to a minimum by stacking the images on scroll.

The info section is optional
Captions can run to
two or more lines
Image border option.
Smaller image file for mobile devices
Lazy loading images
Link option with icon

Image Insert

Responsive Images

Images are one of the main causes or a responsive website performing poorly in the browser. This is mainly due to the images not being correctly sized an optimised before importing into EverWeb.
Using the EverWeb default features, default widgets and unsuitable third widgets will make this even worse.
Essential features …

  • Any widget must insert a smaller file for mobile devices
  • Images should be lazy loaded
  • Size images to the maximum width they will occupy in the browser
  • Avoid using PNG images - not even for icons!