EverWeb Widgets HTML5

Slim Scroll widget

Slim Scroll

Slim Scroll Widget

The Slim Scroll widget creates a scrolling HTML5 section element which can have a heading, paragraph, image plus alt text - with/without caption - and a second paragraph.
Each is displayed with its own checkbox control.
The second paragraph's text can be wrapped around the image and the image percentage width can be varied. It can be floated left or right and can also be made full width if required.

Alt Text

Unlike the iFrame and Scroller widgets, which use the browser default scrollbar, this widget creates its own and is uniform across all browsers.
The scrollbar appears on page load so that the visitor knows that the section is scrollable but will disappear on mouse out. The scrollbar color can be customised.
Scrollling can also be achieved using the mouse wheel, a magic mouse or by swiping on mobile devices.
The element can have a border with round corners if required.
It can have its own background color or this can be turned off via a checkbox so that it inherits the page background color.
NOTE: When adding the content, it helps to increase the widget height to expose it all since the scrolling action does not work in EverWeb. The widget can then be reduced to the required height prior to publishing the page.
Hyperlinks can be added using HTML like this...

<a href="#">Hyperlink Text</a>

The hash sign (#) is replaced with a relative or absolute file path. See File Path page for more info.

To open the link in a new window, add target="_blank" like this...

<a href="#" target="_blank">Hyperlink Text</a>

The hyperlink text color and hover color are styled in the widget settings.
Be sure to the read this info about using special characters & creating line breaks.

Please note that only one of these widgets should be used per page.

Slim Scroll Widget
Slim Scroll Widget
Slim Scroll Widget

Widget Settings

Enter the heading text if required and check the box to display it.
Enter the first paragraph text and check the box to display it. Use <br> to create line breaks.
If an image is required, check the box, choose the image and enter alt text for SEO. If the second paragraph text is to wrap the image, adjust its percentage width and choose the float - left or right.
If a caption is required, check the box and enter the text.
Check the box to display the second paragraph and enter the text.
Set the background color if required or check the box if the scroll container is to inherit the background color of the page or any object placed behind it.
Set the scrollbar color.
If a border is required, set its width, color and corner radius.
Choose the font family, heading font size, text font size and the overall font color.
If text is wrapped around an image and caption, adjust the line height to obtain the best results.
Set the hyperlink color and hover color.
Font style and weight can be set on individual words by using <u></u> for underline, <b></b> for bold and <i></i> for italic.
Change the font color on individual words or phrases by enclosing them in <span> tags like this...

<span style="color:#000FFF"></span>

Find out more about hex color numbers.

Get The Widget