▼
Streaming live at 10am (PST)

Finer control on paragraph spacing and wrapping around images?

Design help General
#1

Hi, I am putting together a page layout and trying to layout text blocks that wrap around an image but are separated by smaller than a full line between paragraphs, in other words a “space after”.

From reading other posts in the forum it seems that the only way to have control over the space after is to put each paragraph in its own div and use margins, which is a bit of a pain if you have significant amounts of text to add.

In addition, in order to make the paragraph flow around an image I could not simply make it “inline” as it would run into the previous paragraph.

To solve this I have put each para in its own element and created a div for the para (inline) and image so that the text can run around the image.

Is there a better way to do this?

Ideally what I want is to add an image to text where the height of text paragraph spaces can be controlled.

Pasted image1920×1160 440 KB

https://preview.webflow.com/preview/text-test?preview=35bfc9f0ca42ec311cc028eca125ec1a

Thanks,

John

#2

I don’t know about better, but if you use a ROW widget and put the image in one column and the text in the other, you’ll gain control for responsive scenarios. You can then decide whetehr the whole thing shrinks with the screen size and when the image has to be displayed on top of the text block.

#3

I have a few ideas, but to know if they would be better I would need to know how you plan to use the design. Are you planning on exporting this to a CMS and using it as a template, populating the content with a text editor?

#4

Hi David, thats a good suggestion, thanks.

There doesn’t seem there is a way to set this up without adding the text and the image to a div or row, which means you can end up with a gap or overflow of the text on different viewing portal as there is no relationship with the bottom of the para and the start of the one below.

The problem seems to be there is no setting for paragraph spacing. If you want multiple paragraphs to flow around a single image you have to accept a full return as a paragraph space.

Any other suggestions are welcome and thanks for reading!

John

#5

Since it seems that this page will hold most of the sites content I would just use paragraphs not div blocks with text in them.

The image is floating left and there are no clears being applied to the paragraph so the text will wrap with what ever space you give it. You can then use the image’s or the image’s container margins to adjust how much space you want the image to have.

#6

HI David, I think thats the most practical and I will have to live with the over sized paragraph spaces. It would be great if webflow could automatically add paragraph tags to each paragraph so that this could be controlled through the UI.

#7

Each new paragraph element is a new paragraph tag. I’ll make a mock up to show you what I mean.

#8

Take a look at this mock-up and see if it will meet your needs.

https://preview.webflow.com/preview/alexnichol-sandbox?preview=93f8cc659e452c4d329c096d424fd188

#9

Hi David, thanks for that suggestion, yes this allows more than one para to run around an image, great suggestion.

It would be great if webflow could handle this without having to separate the paragraphs but this will work!

Thanks,

John

#10