EverWeb Widgets

Instructions

Instructions

The Wise EverWeb Monkey Says …

Use the ThemeKit project file as a reference and copy the required items over to a new project.
When setting up the basic page for the website be sure to use the blank responsive template. Delete the inserted items, set the header and footer to zero and make sure the Page Background color in the Page inspector is set to "none".
Set the Minimum Content Height to about 4000px while adding content and then reduce it to zero before publishing.

Scroll Gallery Widget

The optional text section probably needs some explanation since most EverWeb users will be unfamiliar with setting up text using the stroke and fill properties and using viewport units for the font size.
Font Size
When the font size is decreased the first image will start to creap in to view. Use the Margin Adjust control to correct this.
Images
Like any slideshow you can't see all the images to set them up. The first slide with its caption and link can be seen by unchecking the box for Show Text.
Browser Width
The slider srolls horizontally when viewed on computers by scrolling vertically with the mouse, scrollwheel or up/down arrow keys.
On touch devices the action changes to swipe. When viewing on a desktop browser the browser width needs to be widder than 1109px for the scroll action to function.

SVG Icons

SVG icons should be used in preference to font icons like Font Awesome for better quality and efficiency. PNG icons should be avoided if at all possible.
EverWeb ThemeKit Design pack owners will have an SVG icon folder in the download folder. There is a choice of hundreds of icons.
SVG Insert
If there is no code editor available, open the SVG files in TextEdit.app set to plain text mode. Copy the code and paste it into the SVG Code box in the widget settngs.

Fixed Position Items

Any widgets that have a fixed position like a navigation or slide out can be inserted out of the way below the footer widget.
Avoid using the EverWeb default footer for this reason because you can't insert anything below it on the design canvas.

Exit Notice

The exit notice is an example of a fixed position widget and is inserted below the footer in this demo page.
An exit notice can provide a good reason for a visitor to NOT leave the site by offering a free item, a discount or - for maximum effect - a time sensitive discount.
How It Works
When the visitor moves the cursor up to the browser's address bar, the notice is triggered and animates into view. The notice can be triggered evry time or per session.
Content

Cursor

STOP - Before You Leave

Check out the new EverWeb ThemeKit design system for easily creating a responsive website.

  • Custom widgets
  • Ready made roject file
  • Demo media
  • Copy & paste …
  • … to your new project
  • Build a professional class website …
  • … with the latest features
  • 100s of icons included
  • Free Phone Simulator
EverWeb ThemeKit