EverWeb Widgets HTML5

Section Text Wrap Around Image

Section Text Wrap Image Widget

HTML5 Section Element Text Wrap

html5 section text wrap image
Section Text Wrap

This is an HTML5 section element with text wrapping around an image.
The section can have a styled heading if required.
The image width is variable and this is expressed as a percentage of the total width of the parent element.
The image can have a centered caption, alt text for SEO and is positioned left or right using floats so that the text wraps around it.
The image is enclosed in a figure element along with the alt text. Since the caption is contained in a figcaption within the parent figure, the search engine spiders associate the caption with the image.
The figure and the descriptive text are in the section element - along with the heading - so all of the various elements are "seen" to be related to each other.
In terms of SEO, this setup is far superior to to having all the elements separate as they would be when inserting the objects in EverWeb using an image tag and text boxes!
Fine tuning the way in which the text wraps the image is achieved using the image width and text line height controls.

Hyperlinks can be inserted into the text using HTML like this…

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

If the linked page is to open in a new window, use this...

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

The hyperlink styles are set in the widget settings panel and are link color, text decoration and hover color.

Get The Widget

Widget Settings

Section text wrap image widget
Section Wrap Widget