I would like to create a paragraph block with a picture next to it, as shown in this wireframe:
I’m not sure how I would do this in the Webflow designer. It seems like I’d have to stack a column (for the text | image) with a div block, (for any text below the image), but this is annoying and unintuitive. Surely there is a better way?
Maaaaany ways for doing this 
Any 2 columns layout will work.
The video shows you the RT solution, then the ROW element solution, then with divs.
There’s only one way for doing this. Rich Text.
Prepare to be annoyed.
There are at least 2 ways of doing this with respecting the flow of elements. And 4 other ways at the minimum.
Why?
None of the other methods you mentioned will allow text to wrap around the image.
Annoyed because rich text is ridiculously clunky and (at least the last time I used it) not subject to responsiveness.
Which isn’t an issue on static pages.
I don’t know about clunky. Certainly don’t know about ridiculously clunky.
Can you tell me more about the ridiculous clunkiness?
And what about the responsivity?
A bit off topic but here’s another method for text + images layouts, using columns.
… Allowing text to wrap around an image is an issue on any page, if that’s how you want it to function. Many people set font sizes using vw which means you can’t just hardcode into a different div when you reach the bottom of the image.
Really not a lot of people. Very few know of vw, even less for font size.
I cant understand the rest : “which means you can’t just hardcode into a different div when you reach the bottom of the image.”
And it’s not about what people do but about what you do.
I wish I could understand why you think RT isn’t a good element to work with. You’re maybe missing something.
http://vincent.polenordstudio.fr/snap/rcrtf.gif
If you’re point is saying that text layout is a hard thing to do, then yes, that’s true. But it has nothing to do with HTML, CSS and Webflow. Take inDesign or XPress and dealing with flowing text is a struggle, or an art, depends on how you see the glass, half empty or half full.
Same applies for controlling text in itself. You can spend days and nights on chosing the appropriate values, units and dependencies on text size, line height and paddings, if you want to achieve a good vertical rythm with CSS.
But it is only knowledge and work. I’ve acheieved perfect vertical rythme using ALL the elements you can use in webflow, being layout with Flex, with DIV, with ROW, stuffed with any seperate element or RTs.
Solid as a rock and fully responsive. Even better, it’s responsive + elastic
http://vincent.polenordstudio.fr/snap/iwt7o.jpg
http://vincent.polenordstudio.fr/snap/r2597.jpg
http://vincent.polenordstudio.fr/snap/5a9k1.jpg
http://vincent.polenordstudio.fr/snap/p6t9a.jpg
The gif you posted shows you why rich text is terrible in a responsive environment.
Look at how the images start crushing the text, and you can never set it to just take up 100% of the column width at a certain break point. That very example you posted looks awful. You’ve got images with one or two words ending up just scattered around next to it. It’s clunky, and ugly.
InDesign is for print. Webflow is for the web. If you set a div with a % width, even if you use pixel height for your text, you will STILL have linebreak problems when trying to wrap around an image if you use anything other than rich text. Rich text then removes true responsiveness.
It’s clunky. It’s ridiculously clunky.
The gif I made is utterly raw, no styles on elements.
You can totally style the figure element and apply whatever responsive rule you need it to have, control the size of the image.
If your point is saying that a wrapped image look bad on a mobile device, well that’s a given, of course it looks bad, it shouldn’t wrap. You can control that by styling the Figure element.
It’s not, you haven’t tried to make it work, that’s only jugemental.
I am willing to be wrong about this. I am WANTING to be wrong about this. But I am 110% certain that the last time I spent valuable time trying to make rich text work, images were not responsive within a rich text element.
Give it a whirl.
I just tried it again, as I was hoping webflow had pushed a silent update.
Nope.
“Cannot add classes inside Rich Text.”
Clunky. Annoying. All but useless within a responsive environment.
First, there are limitations. That’s why I brought in the comparison with InDesign. Indesign lets you control everything, yet it’s already very hard to control the flow of elements. So it’s only natural to expect less from such a system that is HTML+CSS.
You have to set expectations. A complete perfectly working automatic grid system is a Graal. Read: it has never been made. But for every goal is an answer. And by working it the right way, very nice results are always achievable.
What I have a ver very hard time to accept is “RT element in Webflow is clunky”. At best what I’d be OK with it “Rich Text is a difficult sport”, and “Typography, especially web typography, is a very complex thing.” I’d ditch “Prepare to be annoyed” for “Prepare to be challenged”
I’m doing web stuff professionally since 1997. I’ve seen RT element come in the scope. I’ve struggled with them. I yelled at the ones we used on Drupal, the one we used on Joomla, I’ve seen the light with some of the ones used with Wordpress, only to be disappointed later on. Webflow’s RT is best in class so far. Limited, yes, not full featured yet, yes, but quite complex behind its apparent simplicity. Having put hours on just styling the figure group of elements, I have yet not reached the end of it. And all of this without using any pseudo element because they’re not there yet.
I just read your last answer: seems you never had a chance to style a <figure> element. You can do it by selecting an image, go up in hierarchy to the figure, force the styling of the figure element, limit the effect of the styling to the rt’s class.
Here you can see a figure element losing it’s wrapping when switching to portrait mode
Rather than adding classes inside a RT, the workflow here is to add class to the rt, then force the style of base elements within, and limit to the rt class. So all of this is usable in a CMS environment. That’s true for titles, paragraphs, lists, figures etc
[p][img src=“src.jpg” align=“left” class=“responsive”]Here is some text that will wrap around an image, or just begin below it if the image’s width is 100% at a certain breakpoint.[/p]
^^^ THAT is not clunky
The mess you just described, is clunky.
I show and hide images in a Rich Text Area based on the screen size since a right aligned image on desktop and tablet looks like crap on mobile. So, hide the right aligned image on mobile screens and reverse the thinking with a full width image for mobile.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
