Full Width Responsive Text Modules

Layout

These three modules are set in a full width container.
Each module is in another container which occupies one third of the width.
The module itself is given a fixed width and is center.
The outer container has a setting for maximum width so that it doesn't spread out too wide with wide browser settings.
Increase/decrease the browser width to see the responsive action.

The Module

Each module contains an HTML heading, a paragraph and an optional CTA style button link.
The module width setting should be equal to or less than one third of the page content area. Any wider and they will overlap when the browser width is reduce to the content width or the page is viewed on an iPad or other tablet device.
The modules have a minimum height setting so that they can all be set at the same height regardless of the amount of content.

Options

The text can use a non web safe or Google hosted font since their is a control for adding a web safe fallback font.
The containers can be styled with a border and/or a box shadow with rounded corners and the background color can have its opacity adjusted to give the floating effect.
As demonstrated by this example, the modules can be arranged to fade on scroll.

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 and 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 Text Modules Widget
Full Width Text 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