Knowledgebase

A TextBox in EverWeb, in 4.5 and 4.6, can't flow its text around a picture the way iWeb or a word processor does. On a Responsive page, the Text Section widget does wrap text around a picture. On any page, you can place the picture beside a TextBox and carry on the text in a second TextBox underneath. Blog posts can wrap text around pictures too.

Which option to use

Not sure which kind of page you have? Select the page and look at Inspector > Page Settings > Page Layout.

Wrap text with the Text Section widget (Responsive pages)

1. Click the Widgets tab and drag Text Section onto the page, or into a Container.
2. Go to Inspector > Widget Settings. Set the first Alignment setting to Left, so your paragraphs aren't centred.
3. Under Image Settings, tick Use Custom Image, click Image File and choose your picture.
4. Set the Alignment under Image Settings to Left or Right. The text then flows down the other side of the picture and continues underneath it. Top puts the picture above the text instead.
5. In Width, type a percentage such as 40% so the picture keeps its share of a phone screen. Leave Height on auto. Set Padding to about 15 to keep the words off the picture.
6. Type a short description of the picture in Image ALT Text.
7. Under Text Settings, type or paste your text into the Text box. Press Return once between paragraphs.
8. Click Preview, then make the window narrower to see how it looks on a smaller screen.

The Text Inspector doesn't change text in this widget: see Change line spacing (line height) and the space between paragraphs. Leave Use Custom Buttons unticked unless you want buttons under the text. The Text Section widget is made for Responsive pages: don't use it on a Centered Layout page.

Put a picture beside text with a Container Row (Responsive pages)

On a phone, text wrapped beside a picture can end up two or three words a line. Side by side on a computer and stacked on a phone often reads better:

1. Click Containers in the toolbar and choose Container Row.
2. Drag your picture into it, then a TextBox beside it.
3. Select each one, untick Full width in Inspector > Metrics and give it a width.
4. Select the Container and, in Inspector > Widget Settings > Display, set Wrap to Wrap, so the TextBox drops below the picture on a phone. If the picture is on the right and you want it on top on a phone, choose Reverse Wrap.
5. Put any further text in a Full width TextBox under the Container. See Build a responsive page with Containers so it stacks neatly on a phone.

Centered Layout pages (fixed width)

1. Place the picture where you want it.
2. Put a TextBox beside it and drag its bottom edge so it ends level with the picture.
3. Put a second TextBox under both, as wide as the picture and the first TextBox together, for the rest of your text.

Text doesn't flow from one box to the next, so after editing you may need to move a sentence between them. On a phone, a Centered Layout page shrinks as a whole and keeps this layout. On a Mobile Page, put the picture above the text instead: see Make a phone version of a Centered Layout page (Mobile Page), step by step.

Blog posts

In the blog post editor, drag a picture into your post and click it. Align it left or right in the picture toolbar and the text wraps around it. The same toolbar adds alt text. See How do I add a blog to my EverWeb website?.

Third-party widgets

Other developers make text-wrap widgets for EverWeb: see the EverWeb add-ons page and Install and use third-party widgets in EverWeb. The widget's maker supports it.

Related articles

• Build a responsive page with Containers so it stacks neatly on a phone
• Make your website accessible: alt text, headings, link text and contrast
• Bulleted and numbered lists: indent items, change the bullet and its colour
• How do I add a blog to my EverWeb website?
• Install and use third-party widgets in EverWeb