EverWeb Widgets

Scroll Down Nav

The scroll down nav can have any amount of link tabs to scroll to anchors but also has three normal links which can be configured to open internal or external pages and have a new windwo option.
The navigation bar can be relatively positioned to scroll with the rest of the page content or be set using the CSS position selector set to "sticky" to allow it to scroll to the top and stick at the top or at a preset distance from the top if used along with a sticky header or navigation.
Icons
The scroll down links have a chevron down icon created using a CSS ::after pseudo element which inherits the link font color and hover color. The icon is created using the CSS equivalent of the HTML heavy right-pointing angle rotated through 90°.
A can be seen from the above example the links can have their own background color which can have its opacity slider set to zero so that the links blend in with the main background.
Anchors
Anchors can be created using the ThemeKit Heading widget, the ThemeKit SVG Heading widget, the ThemeKit Line Break or the ThemeKit Spacer widget. Thes widgets have a checkbox to turn on the anchor feature and a numbers box to enter the anchor link's ID.
Scroll Top
There is an optional link which can be tacked on at the end for a smooth scroll to the top function. The chevron icon is reversed and it has its own control for scoll time set in milliseconds.d.

ThemeKit SVG Heading

The heading is used on this page as anchors for the scroll down nav and it's usefull to use as section divider using the icon to indicate the subject.
SVG
An SVG is a vector-based graphic in XML format. They are favored by more advanced web designers since they can be increased in size without loss of quality, are much more efficient than PNGs by not creating extra an server request and have several styling options.
In this case the icon has controls for size, padding, color, background color, border radius and a checkbox to make it round.
SVG Code
SVG's are really simple to insert in this application. A folder of SVG icons is include in the ThemeKit download folder.
[1] Find the required icon in the folder and double click it to open it in TextEdit.app set to plain text mode or in a code editor like Text Wrangler.
[2] Copy the code to the clipboard.
[3] Paste the code into the box provided in the widget settings panel and style to taste.

Image Modules

Images

The full width images are inserted in an HTML5 <figure> element with alt text and a caption which can display on hover when viewed on computers.

The <figure> can have top. left and right padding added to inset them from the container edges.

Video

Items

The widget can show 2, 3 or 4 items per row. When selecting 3 items a checkbox switches the layout on tablets to show 2 images in the first row and one centered in the second row.

Gallery

Links

Image links should be avoided on responsive pages since mobile users don't see a hover cursor.

The CTA style links used here can open internal/external pages and have a new window option.

Hero Image

Icon Modules

Icons

The icons are from the Ionicon range. There is a control in the widget settings to open the Ionicon cheatsheet.
The icon size can be adjusted and its container can be square or round with a border and/or a box shadow.

Icon Cheatsheet

Links

Unless they are in a link bar, try to avoid using icons for links. Although computer users can be provide with a title on hover, mobile users will have no clue that the icon is a link unless there is text to describe it.
Modern websites use CTA tabs rather than text or image links.

Info

Module Items

The widget can create a row of 2, 3 or 4 items.

When there are three items per row, the last one moves to the center of row two at screen widths less than the break point.

Widgets

ThemeKit Spacer

The spacer is shown above and is configured as an anchor for thedqSapcer" link in the scroll dow nav at the top of the page.
It can be used without the anchor for spacing out items to give the page layout room to "breathe".
The spacer has controls for setting its height, background color and opacity and the anchor ID number.

Viewport Scroll

The widget creates a scroll down chevron tab which scrolls the page down by the viewport height on each click or tap. After a preset scroll distance set in pixels, the scroll top tab appears.
The tabs can be positioned left or right and their distance from the top of the page is set in viewport units.
Each tab can have a different colored icon. The background color has an opacity slider and the hover background is a solid color.
There are controls for setting the distance from the browser/device window edge and for the vertical spacing between the tabs.
Switch Position
There is a checkbox and a numbers box to switch the position of the tabs when viewed on mobile devices to place them neaerer the bottom to be easily reached with a thumb.
The tabs can also be hidden on mobile phones where they are not really needed.

Image & List

ThemeKit

Transform the way you create web pages in EverWeb
Future proof responsive layout using the CSS Grid Layout Module
Create web page layouts like the professionals
Excellent user experience on all devices
Better layouts with less code
Complete package includes project file, widgets and media

Gallery

ThemeKit Media

Hero/Full Height Slideshow
MP4 Video | Vimeo | YouTube
Lightbox: Video | Vimeo | YouTube | Map | Slidehsow
Auto Image Gallery
Overlay Image Gallery
Hero Switch Slideshow
Audio & Playlist Players

More Widgets

Line Break

The line break shown above has controls for percentage width, maximum width. height, background color and opacuty and for the line height, color and style.
The style options are dashed, dotted, double and solid.
An anchor can be created by checking a box and entering the ancjor ID number.

Image & Text

The image is inserted in an HTML5 figure element with alt text and an optional figcaption,
The heading, text and optional link are inserted in an HTML5 article element. The link style can be either CTA or double chevron.

Hero

Image & Text

In this example, the image is switched to the rightand the alternative link style is used.
Inserting images - side by side with text - means that the image file size can be a lot smaller than if a full width image with text below was used instead.

Video