Logo

EverWeb Widgets

Flex Navigation

The navigation tab is fixed at the top right on screen widths above the break point. There is an option to move it down the page on mobile devices to make it easier to use.
The tab has a nav icon when the links are hidden and an X when they are in view. The icon color, background color and its opacity and border radius can be adjusted.
Links
The container has a maximum width setting and controls for inset, background color and its opacity. The link tabs have their own controls for background color and opacity and controls to set the spacing of the link blocks.
The flex layout allows the extra links to return to a second row and center thenselves.
The current page can be indicated using a different color and the open/close animation can be slide or fade.
Open or Closed
The navigation is open when viewed on the EverWeb design canvas for editing and can be either left open at page load or closed by checking a box.
Since it has a fixed position the widget can be inserted out of the way below the footer widget.

Jumbo Links

Hi Viz CTA Links

Jumbo links help to break up web page content and remove content that normally has a negative effect on the page layout.
Items like YouTube video and Google maps look really tacky and are best hidden until the visitor needs to view them.
Links
The links have SVG icons which can be adjusted for size, color padding and background color. They have controls for adding a border/and or a box shadow and can have rounded ends. There is an optional scale on hover animation when viewed on computers.
SVGs
Where a default icon is not inserted, the SVG code for any of the icons in the download folder can be used.
Open the icon folder, double click the icon to launch it in TextEditapp or a code editor, copy the code and paste it into the box provided in the widget settings panel.

Jumbo Scroll

The smooth scroll down can be used in conjunction with an anchor widget like the ThemeKit Scroll To Line included in the Custom [2] pack to smooth scroll to any point on the page.
The optional extra link can be configured to open internal or external pages and has a new window option.

Jumbo Contact

The widget shows a spam protected email link by default and has the option to add a phone link which places the call when viewed on a mobile phone. Mac users can use the link to open FaceTime.

Location Map

The map link opens a Google map in a modal window. The map only requires the addressto be entered and the initial zoom level to be set

Info Modal

The jumbo tab launches a modal widow with a scale animation. The modal has a heading and text.
An optional CTA style link which can be configured to open internal or external pages and has a new window option.

Info Modal

The modal is inserted as inline content and is hidden on page load by setting its display property to "none"
The CTA style link is optional and can be configured to open internal or external pages and has a new window option.

Custom Widgets

MP4 Video

The MP4 video opens in a modal window which has a scale up animation. If the video file is anything other than the standard 16:9 aspect ratio, the video file width and height can be entered into the widget settings.

Popup Image

The jumbo link opens an image in a modal window. The modal is closed by clicking the "X" tab or anywhere outside of the modal.
The modal has a maximum width of 800px so the image should be reduced to that width before importing into EverWeb.

Slideshow

The link opens a lightbox slideshow which has a slide counter and images captions. Arrow navigation with grab and drag and computers and swipe on mobile devices.

Vimeo & YouTube Video

The link opens a Vimeo or YouTube video in a modal with a scale up animation. The video ID is entered in the widget settings and a checkbox switches the type from Vimeo to YouTube.

Smooth Scroll To Top

The widget uses a tiny jQuery plugin to smooth scroll to the top of the page. The scroll time is set in milliseconds.