Wrap text around a picture: your options in EverWeb

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

Your pageUse
Responsive page, a picture at the side of a few paragraphsThe Text Section widget
Responsive page, a picture beside text that should sit above it on a phoneA Container Row
Centered Layout (fixed-width) pageThe picture beside a TextBox, with a second TextBox below
A blog postThe picture alignment buttons in the blog post editor

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

  • 0 Los Usuarios han Encontrado Esto Útil
¿Fue útil la respuesta?

Artículos Relacionados

¿Puede EverWeb crear menús desplegables?

Sí. El widget Barra de navegación crea menús desplegables a partir de tus directorios. Un...

He cambiado los colores de mis enlaces, pero no se ven cambiados después de publicar

Hay varios motivos por los que puedes ver colores incorrectos en los enlaces después de publicar...

¿Cómo puedo enmascarar o recortar una imagen en EverWeb?

Para enmascarar o recortar fácilmente una imagen en EverWeb, solo tienes que seleccionar la...

Mis caracteres con tilde se convierten. ¿Cómo incluyo letras con tilde en la barra de navegación?

Lo más probable es que estés escribiendo el texto en el campo Nombre de archivo del Inspector....

¿Cómo muevo o arrastro objetos al encabezado? Aparece una línea azul que me lo impide

Las líneas azules marcan las secciones de encabezado, contenido y pie de página de una página con...