Full Width Responsive Image Modules

Resize Header

EverWeb resize header

The full width resize on scroll header has an icon and an h1 HTML heading.
It also incorporates the EverWeb default navigation menu so that ot can be positioned to the right and move with the header.
The navigation styles are included in the widget and offer a lot more options than the default version.

Image Modules

EverWeb full width image widget

Each module contains an HTML heading and image with adjustable width and alt text and a text description.
Optional CTA style button links can be added by checking a box and the modules can be fixed and/or fade on scroll.

Full Width Footer

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 Text Modules Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the module container maximum width.
Set the module's minimum height and their width. Note that this width should not be more than one third of the page content width.
For each module, enter the heading, choose the image, enter alt text and set the image width.
Enter the text using <br> for line breaks.
Check the box if the CTA button links are required and enter the link text and select the "Link to:" page for each.

Full Width Img Modules Widget
Full Width Image Modules Widget

Styles

Enter the font family name, check the box if it is Google hosted, choose a suitable web safe fallback font and set the font color.
Set the container background color and its opacity.
Set the border width, color and corner radius if required.
To add a box shadow, set its color and radius.
Set the container top/bottom and left/right padding.

Set the heading font size.
Set the text font size, text align and line height.

Set the CTA button text and background color and the background opacity.
Set the text hover color and the button corner radius.

Scroll Options

The widget can be fixed in position by selecting it and checking the "Fixed position" box in the Metrics inspector if it is being used with a slide over layer.
The modules can also be made to fade on scroll by checking the box and setting the scroll distance.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width