Logo

EverWeb Widgets

ThemeKit Info Map

1

Sailing Club

Always open to non members and visitors for information and instruction.

More Info

2

West Highland Railway

Trains to Oban, Fort William and Mallaig for ferries to Mull,Skye and the Outer Hebrides.

Booking

3

Helensburgh Golf Course

A long waiting list but worth the wait for anyone who appreciates a spectacular view while playing that stupid game.

Join Now

4

Helensburgh Pier

Ferry departures for daytime and evening cruises to Dunoon, Rothesay and the Kyles of Bute.

Booking

ThemeKit Info Map

The widget inserts a responsive image of a map in two sizes. Up to 12 makers can be inserted and these are positioned using percentage values.
Clicking/tapping a marker opens a modal which is centered horizontally and vertically in the viewport. Clicking anywhere outside of the content area or the X button at the top right will close it.
Images
The images used in the demo were cropped from a Google map and reduced to 1200px and 800px wide before importing into EverWeb. The map can have a border if required.
Markers
Up to twelve markers can be inserted and show an ID number if required. The markers have individual controls for setting the border color and have a scale on hover option when viewed on computers.
Modal
The modal has a box shadow and options for a border and/or an offset shadow. It has a heading and a text block.
There are options for an image with alt text and a link which can open internal or external pages.

Toggle Nav Bar

The bar can be inserted anywhere in the stack of widgets as long as it is far enough down the page to allow the opoup nav to extend to its full height.
It as an optiona for a phone number which switches to a phone icon on mobile phones, the nav button and a spam protected email function.
The links can be seen below the bar when viewed on the EverWeb design canvas for editing and then hidden prior to publishing by checking a box. The slide up/down animation time can be set in milliseconds.

Scroll Down

The ThemeKit Scroll Down creates a scroll down link to an anchor. The link can be text, CTA style tab or an SVG chevron down icon. The link is in a centered container with a maximum width setting and can be aligned left, center or right within it.
The chevron down tab below the Toggle Nav Bar scrolls to this text module.

Scroll To Line

The scroll down link can be used with any of the ThemeKit widgets which can act as an anchor such as the ThemeKit Spacer and the ThemeKit Heading.
The widget used as an anchor on this page is the ThemeKit Scroll To Line. It can appear as a 1px line with the optional styles of dashed, dotted or solid. The line is created using pure CSS so it is much more efficient than the default EverWeb line which uses a PNG image and is not really suitable for use on reponsive pages.
Arrows
Arrowheads can be added if required. These are inserted using CSS ::before and ::after pseudo-elements. These selectors allow us to insert items at the start and end of the element which, in this case, is the line.
The line height and the arrowhead thickness can be increased to 2px to make it more obvious by checking a box.
The blue line further up the page has a line height of 1px, a maximum with of 400px and an inset of 20px. The line shown belowhas a height of 2px, a maximum width of 800px and an inset of 10px.
Dimensions
The container height is adjusted by using the value for top/bottom padding. When the arrowheads are inserted the container height will increase to accomodate them.
When the browser/device screen width is reduced to less than the line's maximum width setting, the ends of the line can be inset using the value for left/right padding.
Anchor Height

TheneKit Shutter Image
Image Caption

Image Description

Shutter Image

The shutter is closed when viewed on tablets and phones.
The items can be switched and the text can be on the top or bottom on screen widths below the break point.
The CTA style link is optional.

Info Link
ThemeKit Shutter Image A
Shutter Image

Image Description

ThemeKit Shutter Image 2
ThemeKit Shutter Image D
i

Image with optional info link