Hero Clip

The hero image is inserted in three sizes for the various devices and has an overlay with two background colors and a control to vary the clip angle
Content
The content is centered with a maximum width and has a heading, text and an internal link. The heading, text and link have a control to horixontally align them - left, center or right - above the breakpoint.
Therre is an option to add a logo/link at the top left if required. In this examplae it is replaced by using the ThemeKit UI Logo Header widget set to overlap the top of the hero.

Images

Images for an item like this don't need much quality due to the overlay so they can have smaller files sizes than normal.
The images in the demo were resized and optimise before inporting into EverWeb to …

• Large Image: 960 × 640px - file size 190KB
• Medium Image: 720 × 480px - file size 120KB
• Phone Portrait Image: 375 x 540 ps - file size 75KB
• The images have a lazy load option

Clip Path

The overlay has two sections which have a polygon clip path to create the adjustable shape. Each section has its own control for background color and its opacity.
The angle at which the sections meet is adjusted using a slider control.

Big Link

The ThemeKit UI Big Link widget is a full width animated link designed to draw attention and encourage the visitor to click it.
The link can show on load or animate in from the left using a backgrounf reveal with controls to turn it on and for animation time and delay set in milliseconds.
The link text has the option to add a text shadow and letter spacing to compensate to thicken up Google hosted fonts which only have one font weight.
The link has a background hover animation and can open internal or external pages.

Sticky Scroll

Using a scrollbox reduces the on load content height and is a convenieny ro pack a lot of info in a small space.
The ThemeKit UI Scrollbox has an optional header with a scroll down icon. Each item is a row with an image, optional header, heading, optional span, text and an optiona link
Content
The content can be viewed on the EverWeb design canvas for editing by increasing the height of the box.
The box can then be reduced ito an appropriate height prior to publixhing.
Sticky
The rows slide up on scroll to stick at the top to allow the next row to slide up. This is achieved without using Javascript by using the CSS property "position" set to a value of "sticky"

Mobile

Selectors with a -webkit prefix are used to allow scrolling and sticky positioning on mobile devices.
The height on mobile phones in portrait mode can either be set in pixels or switched to viewport height by checking a box.

Page Scroll

In general the content height of a responsive page should never required scroll down to anchors functions, When the page has a lot of on load content a better option is to have a fuction to scroll down in viewport height steps.
Scroll Down/Scroll Top
The ThemeKit UI Page Scroll widget has two action tabs for step scroll down and scroll to the top.
The tabs are vertically centered in the viewport and can be positioned left or right with an adjustable inset and tab spacing.
The tabs have controls for icon color, background, hover background and border color.
EverWeb
The widget has a fixed position so it should be inserted last or below the footer widget on the EverWeb design canvas.
Hide On Mobile
The page scroll tfunction can be removed on mobile devices by setting an appropriate breakpoint and checking a box.
The demo shows the page scroll on mobile devices to demonstrate the tap to hide labels function.

Labels

The tooltip style labels appear on hover on computers and laptops. On touch devices they appear on tap and will hide when the screen is tapped anywhere else.
The labels are in view for editing on the EverWeb design canvas and hidden prior to publishing..
The labels have controls for font family, fallback font. font size, color, background, border width, border color and border radius.
The labels have scale-X on hover animation.