Full Width Rectangle
Full Width Rectangle Widget

Widget Setup

The rectangle widget can be used to create square and rectangle shapes with inset border and box shadow but its main use is to provide a full width background layer to create a slide over effect on full width, fixed position items.

Widget Settings

Set the required height using a drag handle or the Metrics inspector.
Check the Full Width box in the Metrics inspector.
Set the background color and its opacity.
Set the corner radius if required and add an inset border by setting its width and color.
Set the inset box shadow radius and color if required.

Full Width Rectangle Widget

Sliding Layer

The rectangle widget is set up as a sliding layer on this page.
In the Page inspector, set the browser background color to the same color as the rectangle and the content background to "None".
Insert the full width, fixed height image or other full width object.
Using the Metrics inspector, check the boxes for "Fixed position" and "Relative to the browser left" and set the position Y to zero.

Insert the Resize Header widget and the navigation and arrange for these to be "Always On Top".
Insert the rectangle widget, check the "Full width" box in the Metrics inspector and set the background color and opacity.
Place the top of the rectangle at the bottom of the fixed image or object.
Adjust the height of the rectangle to that of the required content height.
Insert the page content
Set the footer area to the require height in the Page inspector and insert the Full Width Footer widget.

Page Settings Widget

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width