EverWeb Widgets

Slide Up Items

Slide Up Image & Text

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 image is contained in a <figure> element with a <figcaption> and alt text. The caption can be set to display on hover when the item is viewed on computers.
The image has options for a border and the caption has controls for font size, color, background color and opacity.
The text is contained in an <article> element. There is a heading, optional date/price field, text and an optional link. The article is set to align itself vertically in the center.
The text can use a Google hosted font if required and has a selector for setting a fallback font in case the primary font fails to load.
The heading and the text both have alignment controls and the item's can vertical spacing can be adjusted.
The price/date text has its own controls for font size and color.
Link
The optional link can be configured as hyperlink to an internal or external page and open in a new window if required. The link has controls for font size, color, hover color, background color and border radius. It can be aligned left, center or right.
Animation
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 image and the text so that the animation can be staggered.
Container
The container has controls for setting the background color and its opacity, the vertical spacing from the items above and below, the grid gap and the left.right padding.

Responsive Stack Slide Up Image — Palm Beach

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.
Each image is in an HTML5 <figure> element with a <figCaption>. The image has options for a border and the caption has controls for font, fallback font, color and background color and opacity. The caption can appear on hover when the page is viewed on computers.
Link
The images can be configured as hyperlinks to an internal or external page with a new window option. The link appears as an info icon at the top right.
The icon has controls for color, hover color and background color and opacity.
Animation
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 so that the animation can be staggered.
Container
The container has controls for setting the background color and its opacity, the vertical spacing from the items above and below, the grid gap and the left/right padding.

Responsive Stack Image & Text — Image Figcaption

Article Heading

Price/Date

The content has a <figure> with and image and a caption to the left and an <article> with a heading, optional price/date, text and optional link to the right.
The text sits below the image at screen widths less than the break point.

Link

Step Scroll Down - Smooth Scroll 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.
Each tab has a control for setting the icon color and hover color and the background color and its opacity.
By default the tabs are round but can be made square by checking a box and then using the slider to add a border radius if needed.
The tabs can show a title on hover if required.
The space between the tabs can be adjusted and there are controls for setting the position in relation to the left or right and the bottom.
There is a checkbox for hiding the tabs when the page is viewed on mobile phones.
The widget can be the last item on the page and positioned below the footer widget.

NOTE: The scroll tab widgets should be used in conjunction with a footer that has a control to add extra bottom padding so that the tabs don't obscure any footer content.
The footer used on this page is the RGL Auto Footer widget.
The widget is in the RGL Elements [3] pack. Follow the link below for info …

Auto Footer

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.
The tab has a control for setting the icon color and hover color and the background color and its opacity.
By default the tab is round but can be made square by checking a box and then using the slider to add a border radius if needed.
The tab can show a title on hover if required.
The tab position in relation to the left or right and the bottom can be adjusted.
There is a checkbox for hiding the tab when the page is viewed on mobile phones.
The widget can be the last item on the page and positioned below the footer widget.