Full Width Footer

To Fix Or Not To Fix?

The widget creates a full width footer with optional searchbox and smooth scroll to the top arrow.
The footer can be stuck to the bottom of the browser window or floating.

Full Width Footer Widget
Full Width Footer Widget

Widget Setup

Set the footer height in the Page inspector.
Command drag the widget into the footer area, check the "Full Width" box in the Metrics inspector and select "Always On Top" from the Arrange menu if a sticky footer is required.
Adjust the footer widget height to fit the footer area on the EverWeb design canvas.
Choose the background color(s) and adjust the opacity and color gradient angle if required.
Check the box if a sticky footer is required.

Full Width Footer Widget

Search Box

Check the box to add the search box to the left side of the footer.
Set its width and its position relative to the footer top and the browser left.
enter the domain name and the domain name suffix only.
Check the box for a transparent background or set the background color,. corner radius and box shadow color and radius if required.
Set the text field border color.
Enter the button text and adjust the widget width to make the button wider/narrower.
Choose the button font, font size, background color and font color.
Set the border width, color and radius if required.

Footer Text

Enter the footer text. This text is added as HTML so it is required to use HTML line breaks <br> and HTML for items such as &amp; for &.
Span tags can be used to change colors like this …

<span style="color:#FF0000">Span Text</span>
Use <u>Underline<>/u> and <b>Bold</b>

Adjust the value for "Top",choose the font and set its size and color.
Set the text align and line height.

Smooth Scroll Arrow

Check the box to insert the smooth scroll to the top arrow and adjust its position relative to the top of the footer and the right of the browser window.
Set the arrow color and its background color and opacity.
Check the box if the arrow is to expand to allow text on hover.
Adjust the value for quot;Width;" to suit the amount of text.
Set the text font size and color and the scroll time. The lower the value - the faster the scroll speed.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width