EverWeb ThemeKit

CTR

Click Through Rate

Improve CTR with large, highly visible links.

Home

CTA

In View

Large CTA (call to action) links to help visitors to find items.

Mobile First Info

CTA Links

Visibility

Icons add to the visual appeal and help visitors to decide which page or section to browse.

Image Info

Options

Icons

The optional icons are SVGs and can be styled for size, color, background, border width and color.

Hero Image

Insert

SVG

The SVG icons are inserted by easy copy and paste it into the widget settings.

Popup Media

Contact

Spam Protected

Use Email tabs - not contact forms.

Contact Tab

Increase Click Through

Getting visitors to find the website is one thing but getting them to click through to other pages is the main challenge.
Finding the link to the section or page with the info that the visitor wants must be made highly visible and easy to use so NEVER use a horizontal meu with directoory dropdowns for a mobile first page design.
CTA
The CTA (call to action) link is - apart from the hero item - the mainstay of modern web design.
The CTA link in the hero item usually leads the visitor to some irresistable destination but there needs to be some easily visible means of getting to other types of content.

ThemeKit M1 Heading

Many have asked if it is possible to have responsive text size - particularly for headings. To do this requires going beyond the present capabilities of EverWeb using responsive unts for text size.
The heading can be h1 through h3 and has an option to add a logo configured as an internal link.
Logo
The logo is positioned at the top right. It has controls for maximum width and padding and for aligning it left, center or right on mobile phones in row one when the heading moves to row two.
Heading Text
As can be seen from the example the heading can use a Google hosted font with a web safe fallback and the font size uses viewport units to make it responsive to browser/device width.
It has controls for adding both a text stroke and a text shadow. These can be removed/reduced on phones where the fill color can be changed and the font size is set in pixels.

Share Links

The share links have an action tab which is vertically centered at the left of the browser/device window.
The links slide out/in on click.
Action Tab
The tab has controls for changing the icon, icon color, hover color, background color and its opacity and for applying a radius to the outer corners.
Links
The links have controls for the SVG code, icon color and padding. All the links can have the same background color or, by checking a box, each have their own background color.

SVG Links

These round links can be positioned relatively to scroll with the rest of the content or in a fixed position at the bottom of the browser/device window so that they can always be seen.
The links can have a scale on hover animation when viewed on computers.
Links
There are four preset links which can be turned on if required - home, contact, spam protected email and smooth scroll to the top.
The phone link can either show all the time or only on phones.
Styles
The link tabs have controls for adjusting the tab size, icon color, background, border width and color and the padding. Adjusting the padding changes the relative size of the icon.
The tabs can be spaced horizontally and vertically and space up from the bottom.
The wrapper has controls for top/bottom padding and for background color and its opacity.
Example Styles
The SVG links on this page are fixed at the bottom and the wrapper background opacity is set to zero.
When using a fixed position it may be necessary to bring the widget to the front using the z-index control.
NOTE: that the ThemeKit Info Footer widget has extra bottom padding added to allow for the space required by the SVG links when the bottom of the page is reache.

Using SVGs
SVGs are now used in place of PNG or font icons. They have better quality than font icons like Font Awesome and a much smaller file size than a PNG.
The ThemeKit Design download has a folder with 100s of SVG icons. Open an icon in TextEdit.app in plain text mode, copy the code and paste it into the widget settings.