Image Background

The widget is named ThemeKit Image Background since it is an image set in the background rather than a background image. In general a background image should not be used in responsive page design since the image file required is way to big and will seriously compromise the page download time on mobile devices.
HTML5 Picture
The image is inserted in three sizes for the various devices using the <picture> element which has the added advantage of allowing an alt text attribute for keywords for the search engines and screen readers.
Rather than be stretched to fill the whole browser, the image has its width and height set in viewport units.
Images
Before importing into EverWeb the images were sized to 1200 x 800px 800 x 800px and a 9:16 aspect ratio image at 375px wide for mobile phones in portrait mode.
Overlay
The optional overlay has controls for the background color and its opacity and has a fade in animation with controls for the animation time and delay.

Slide Out Sidebar

The widget creates a slide out sidebar with optional heading.. The sidebar can be positioned left or right.
Action Tab & Label
The action tab has an icon which is created using CSS so that it will switch from an arrow to a close X when the sidebar is open.
The optional label will appear on hover when the item is viewed on a computer.
The vertical position of the tab is set at 50% to make it more convenient for mobile touch device users.
Images
The thumbnail images in the demo were sized to 300px square before importing into EverWeb. Their size can be adjusted using the control for the width of the sidebar.
The position of the sidebar is fixed and any overflow will scroll vertically.
Items
Each item has an image with alt text, a heading, an optional span for price/date etc, text and a full width CTA style link. The link can open internal and/or external pages and have a new window option.
Animation
All the active parts have a CSS animation to give the sidebar a feel of professional quality.

Resizing Image Files

All the images used in a website should be resized before importing into EverWeb. There is no point in using an image with a 2000px width and a huge file file size if it going to be displayed at 800px wide on the page.
Oversized images are the main reason why web pages don't download fast enough.
To reduce the size of an image file …

  • Double click it to launch in Preview
  • Click on the "Tools"dropdown and choose "Adjust Size …"
  • Make sure that the unit selector is set to "pixelsMake sure that the unit selector is set to "
  • Enter the new width or height and close the Preview window

Preparing Slideshow Images

Images to be displayed in a lightbox slideshow only need to be about 1200px wide and certainly no more than 1600px. For responsive pages that will be displayed on mobile phones, smaller is better.
Make sure the image file names have no spaces or special characters in them.

  • Select all the images (command + a)
  • Double click them to open them all together in Preview
  • Select all the images in the Preview window (command + a)
  • Select "Adjust Size …" from the Tools drop down menu
  • Make sure the unit dropdown selector is set to "pixels"
  • Enter the required grid row height into the "Height" box
  • Click "OK"
  • Save the resized image (command + s)
  • Now select all the images in the thumbnails folder and drag then onto the Assets List in the gallery widget settings panel to load then all at once.
  • Rearranged the images by holding down the mouse on an image file name and drag it up or down the list to its new position
ThemeKit Image Background