EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Text Wrap Around Image Widget

Touch Text Wrap

Text Wrap Image

The widget allows for two paragraphs and a text wrapped image.
The first paragraph is set to preceed the image and the second one will wrap it. This first paragraph is optional and can be dispensed with if not required.

Text Wrap Image

The container type can be set to the appropriate value.
The <article> element specifies independent, self-contained content. An article makes sense on its own and it should be possible to distribute it independently from the rest of the web site.
An <aside> is like a sidebar and contains content related, but not essential, to the main page content.
The <section> element is just what it says. It defines a section of a document containing related content. A section can have a header, h1, h2, h3 headings, text content, figure with figcaption and a footer if required.
The image has alt text for SEO. Its percentage width is variable and it can be floated left or right.
The image can also be set to full width by sliding the width control to the far right. This setting would be used on the smart phone version of the site.

Touch Wrap Widget
Touch Wrap Image Widget
Touch Text Wrap Image Widget

Widget Settings

Choose the container type, enter a heading if required and check the box to display it.
Enter the text for the first paragraph if required.
Choose the image, enter alt text for SEO, set its percentage width and position - left or right.
Enter the font family name, check the box if it is Google hosted and select a suitable websafe fallback font from the list.
Set the heading font size, color and background color.
Set its text align, style and weight and adjust the line height as necessary.
Set the paragraph font size, color, background color, line height and text align.
Line height is used to adjust the way in which the text wraps the image.

Set the container border width, color and corner radius if required.
Set the box shadow color and radius if required.
Adjust the container left/right padding to distance the content from the border/box shadow.

The widget has options for styling text hyperlinks. These include a control for adding vertical padding when used on a page designed for touch devices to increase the target area for fingertip stabbing. The minimum value for this should be 7 to 8px.
Links for touch devices should use the Touch Link Tab Widget if possible.

This widget is included in the Touch widget pack.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …