Responsive hero Image

EverWeb Widgets

Animated Hero Switch Image

Image switches from fixed height to responsive height on mobile.

Next Page

Hero Animated Switch

Full width, fixed height images - commonly known as "hero" images - are fine for web pages that are only displayed on computers and laptops. They aren't so good for responsive pages which will be viewed on tablets and phones.
This widget overcomes the problem by displaying the image at a fixed height above the break point and then switching to responsive height on tablets and phones in landscape mode. The image becomes 100vh in height when viewed on mobile phones in portrait mode to fill the height of the screen.
The image can also be set to fill the viewport height when viewed on computers by checking a box as can be seen in this example
Images
An image that is big enough to display at reasonable quality on a computer is obviously far too large to download on mobile devices. This widget inserts the images in three sizes - one for each device type. The images used in this example are 1600px, 1200px and 800px respectively.
Rather than insert the images in the background, the widget uses the HTML5 <picture> element so the image can have an alt text attribute to enter keywords for the search engines.

Animated Overlay

The overlay covers the image and has controls for adjusting the color and its opacity. It has a grid layout so that the text block can be easily centered horizontally and vertically with the minimum of code.
The text block has a heading, optional extra text, text and an optional link with a controls to aliign them horizontally and to adjust the vertical spacing.
The optional link can be configured to open internal or external pages and in a new window if required.
Animation
The optional animation of the overlay is turned on using a checkbox and there are controls for adjusting the animation time and delay.
Rather than have to download a large stylesheet like the EverWeb default animations do, the widget has the animation built in to the widget with just a few lines of code. This makes it suitable for use on mobile phones where animation would normally be removed.
Animation Types
The animation type can be selected from fade in, in down. in right, in left, in up, scale in, rotate in clockwise, rotate in counter clockwise, spin in clockwise and spin in counter clockwise.

Smooth Scroll Down/Up

This widget combines smooth scroll down and back to the top of the page. It doesn't require any anchors and scrolls the page down by 100vh (viewport units) on each click.
Viewport Units
Those who are used to creating fixed width websites may be unfamiliar with viewport units.
1vh is equal to 1% of the height of the browser or device window height so, if the scroll on click is set to 100vh, the page will scroll down by an amount equal to the browser or device window height. This creates a very useful scrolling function for any page.
Scroll Tabs
The scroll tabs are located next to each other with adjustable space beween them. Each has controls for adjusting the background color and its opacity, the chevron icon color and the icon hover color.
The tabs can be positioned left, center or right and stick to the bottom of the browser or device window. The positions in relation to the left/right and bottom are adjustable.
By default the tabs are round, there is a checkbox to make them square and a control to apply a border radius.
Position
The widget can be inserted anywhere in the stack of widget on the EverWeb design canvas but it's best to drag them out of the way down below the footer widget.

Auto Footer

The RGL Auto Footer widget is used to finish off this page. It has a control to add bottom padding to accommodate the sticky scroll tabs which is fixed to the bottom.
This extra padding allows the visitor to scroll the tabs down far enough to see the footer content.
The widget is in the RGL Elements 3 widget pack.

Elements [3]

© EverWeb Widgets -