EverWeb Widgets HTML5

HTML5 Article Wrap Text Image Widget

HTML5 Article Text Wrap

Article Wrap Widget

article wrap widget
Article Wrap

This is an HTML5 article element with text wrapping around an image.
The article can have a styled heading and a footer for copyright, date or any other such info. The footer can be hidden if not 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 article 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!
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>

To add a custom color to the link text, use an inline style like this…

<a href="page-name.html" style="color:#000FFF">Link Text</a>

See THIS page for info about using hex color numbers.

Due to lack of room in the widget settings panel, there are no options for styling the rollover color. Information about adding internal styles for hyperlinks can be found HERE.

© Roddy McKay - 2014 - Copy if you want to!

Get The Widget

Widget Settings

Article text wrap image widget
Article Wrap Image