New Feature: Text Columns

What he said. Didn’t know I wanted this until I got it. Good job!

Happy we are having major features for the designer. This is a brilliant feature release. Please keep it coming…

2 Likes

You could also try the technique described in the article here:

1 Like

That’s what I was working on. Wasn’t quite working.

But… I had only put a few minutes into it before
giving up and moving on to “more pressing matters”.

Thanks for the link… will see if I can make it work :smile:

1 Like

How about column break points after each heading for example?

and what are the multi column child settings? and How can we use them?

1 Like

I think the only drawback for users stuck in ancient browsers is that the formatting will default to a single unified column. That is a pretty soft degradation / fallback in this case.

Those folks are missing so much more than that elsewhere. Some of them may have JS disabled or be on a dim flickering 11" CRT with 64 colors and boot from 8" floppy disks. They are use to a little hardship :wink:

3 Likes

My jaw is dropped — I have been researching this very thing and how I do it in Webflow, and now it is a standard feature? Serendipitous! I can’t believe my luck.

1 Like

So is this supposed to work with the paragraph element? I can divide the paragraph into columns but can’t any headers or images as it shows. Tried rich text as well but that was a no go also.

@PixelGeek I’ve tried adding headlines and images in both Safari and Chrome with no luck. Is there a trick to adding those into the new text column feature?

How do you manage the responsive states?
Fe: in the smallest state i can’t set it to 1 col

1 Like

A one column option on phone is a simple issue. Can easily be handled by a media query and CSS props and definitely needs to exist in Webflows UI. It makes the columns unusable to not be able to switch to one column.

I created my own CSS column setup with media queries 6 months ago to progress from 3 on desktop to 2 on vertical tablet and 1 on phones. Was super easy to set up. Having difficulty following how we are supposed to use the columns feature without 1 column options for phones? Why is that option missing from the UI? In CSS it is simply a numerical value of 1 or more.

@PixelGeek @callmevlad

You can manually type in Auto into the input box and it will revert to a single column. I apologize for not making it obvious enough and we’ll take a look at improving the UX, but for now, that’ll solve your problem.

2 Likes

Thank you Andrew! I knew there had to be a way. Messed with it for a while and never thought to try plugging auto in that one case - though I do manually enter auto everywhere else. Would be nice to make it more obvious or able to default down to 1 or auto using the setter on the bottom limit. I am more oblivious than obvious.

Love that the columns feature is built into Webflow! Thank you.

One way could simbly be having “Auto” be the zero for the up and down arrows. What I mean is, whenever I’ve set the column to “2”, and I go to, say, the phone layout, I instinctive try to click the down arrow to make it “1”—but it locks to “2”. It took me a bit to finally try manually typing “Auto” into that field. So, just have “1” or “Auto” be the value down from 2.

Cheers, all.

We realized that this was a bug and we’re pushing a fix for this soon!

1 Like

Brilliant feature - no one else has got that one. :smile:

Any way to force column breaks to get rid of widows and orphans? It’s really annoying, specially with bulleted content.

2 Likes

I just ran into this problem, and while it’s not totally ideal, you may try changing the height/width of the containing div to shape the text in a better way. Downside is you’ll have to manage that in the responsive flow.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Please create a new linked topic if you have further questions.