EverWeb Widgets

Responsive Grid Stack [2] Widgets

Inline items when viewed on wider screens switch to being stacked on mobile devices.
Click any widget icon to see the demo …

View CartAdd To Cart

Hero Image Diagonal Overly

The full width, fixed height background image has an overlay which is created using an SVG with variable color and opacity.
The overlay is a right angled triangle and can be placed top-left, top-right, bottom-right or bottom-left. The text block has a heading, text and an optional link.

Elliptical Shaped Hero Image

This widget allows designers to move away from the "standard" hero image which is getting rather overused and to create more imaginative shapes.
The image is inserted over the full width, fixed height background. The shape is created using the border radius property and is infinitely variable.

Animated Hero Image

This widget overcomes the main problems associated with hero images which are image size and viewer experience on mobile devices. It overcomes these by inserting three different size images and switching from fixed to responsive height on mobile devices.
The optional overlay can animate in and has a heading, optional text, text and a CTA style link.

Slide Up Images

The images sit side by side at wider browser/device widths and then stack one above the other on devices with a screen width less than the break point setting.
The slide up animation occurs when the item enters the viewport. There are controls for setting the animation time in milliseconds and separate controls for setting the delay of the left and right image to stagger the animation.

Slide Up Image & Info

The items sit side by side at wider browser/device widths and then the text positions itself below the image at screen widths less than the break point setting.
The slide up animation occurs when the item enters the viewport. There are controls for setting the animation time in milliseconds and separate controls for setting the delay of the left and right image to stagger the animation.

Image & Typing Text

The item has an image and a text module which sit side by side on wider browser/device widths. On narrower screens, the text positions itself below the image.
The typed text starts to appear on page load. The typing speed can be adjusted using a slider . The typed text can be endlessly repeated by turning on the loop function.

Split Background Image

The hero image is inserted in two sizes and has an overlay which is split with an adjustable angle.
One side has adjustable background color and opacity and the other is transparent.
The text section has a heading, text and an optional link which can have an Apple style double chevron icon if required.

Split Background

The background linear gradient is set with two colors - each occupying 50% of the area - and an angle which is adjustable from horizontal to vertical.
The overlay text has a heading, text and an optional link and the overlay image can have a caption and a border/box shadow.

Diagonal Split Overlay

The hero image has an overlay created using a triangular SVG. It can be positioned at the top left, top right, bottom left and bottom right.
The text block has a heading, paragraph and an optional link which can be configured to open internal or external page and in a new window if required. The link can have an optional double chevron icon.

Spotlight Hero Image

The spotlight beam spreads out across a full width, fixed height background image. The text section is vertically center and is positioned relative to the left.
The spotlight triangle has controls for the background color and its opacity. The height at the left side is set using a control named "spread". The value entered is doubled and them subtracted from the item's height using CSS calc.

Scroll Down & Up

The pair of scroll arrows stick at the bottom of the browser/device window and can be aligned left, center or right. Clicking the chevron down icon scrolls the page down in steps of 100vh which is the height fo the browser or device window. The chevron up tab smooth scrolls to the top from any point on the page.
The tabs can show a title on hover if required.

Step Scroll Down

This widget can be used when only the step scroll down is required. This would be the case if the page has a footer with a smooth scroll top function. The scroll arrow sticks at the bottom of the browser/device window and can be aligned left, center or right.
Clicking the chevron down icon scrolls the page down in steps of 100vh which is the height fo the browser or device window.

© EverWeb Widgets -