Full Width Text Wrap Image

Full Width Responsive

This is an HTML5 container which can be a section, article or aside. The optional heading is an h1 since it is the first heading in an HTML5 layout container.
This container sits inside the fullwidth div created when the widget is inserted into EverWeb.
It is given an auto margin to center it so that the container can be given a maximum width to stop it spreading out too far on wide screens and still remain centered.
The container can be styled for background color and its opacity, border, border radius and box shadow.
The item is responsive down to the page content width. Check this out by reducing the browser width until the horizontal scrollbar appears.
Since it is a full width item, the optional border and box shadow are inset rather than outset.
The container background opacity can be reduce when the text is sitting on top of an image as shown in this example.
Its position can be fixed by checking the "Fixed position" box in the Metrics inspector or it can be left to float and scroll with the rest of the page content.
The image is floated left and its width is a percentage of the container to allow the text to wrap around it. The image can also fill the width of the container if required by setting its width to 100%.

Full Width Text Wrap widget
Full Width Text Widget

Widget Settings

Choose the appropriate container type, check the full width box in the Metrics inspector and set the maximum width.
Check the box to add a heading and enter the heading text.
Choose the image, enter alt text for SEO and set its percentage width. Set the width to 100% for a full width image.
Enter the text and use <br> for returns and <br><br> for paragraph breaks.
Enter the font family name, check the box if it is Google hosted and select a suitable web safe fallback font and the font color.
Style the container for background color and its opacity, border width, color and radius and box shadow color and radius.
The box shadow can be inset or outset depending on whether the item is full width or not.
Set the container padding.
Set the heading font size, text align, style, weight and letter spacing.
Set the text font size, text align and line height.
Text hyperlinks can be added using HTML and their color, text decoration and hover color set in the widget settings.
Check the box in the Metrics inspector to fix the item if it is being used with a scroll over layer as in the example on this page.
If the text is to fade on scroll, check the box and enter the scroll amount. NOTE: In this case, the position MUST be fixed.

Full Width Text Widget

Text Links

Text hyperlinks can be included in the body of the text using a little HTML. Here's how to create one…

<a href="page.html">Link Text</a>

To open the link in a new window &hellip'

<a href="page.html" target="_blank">Link Text</a>

NOTE:
As with all widgets, text entered into the widget settings is HTML so it is necessary to use <br> for line breaks and HTML characters such as &amp; for &.
Single quotes can be used "as is" but double quotes require &quot;

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width