June 12, 2024

Reformat Text for Webflow w/ ChatGPT

Working with large chunks of text is an unavoidable task for Webflow designers.

Whether you’re transferring content from PDFs or word processing documents, unwanted line breaks and inconsistent styling can be a frustrating hurdle. Fortunately, advanced language models like ChatGPT are here to simplify the process.

Watch the Loom video below for a step-by-step demonstration of how to leverage ChatGPT to transform your text formatting workflow.


0:00 Another really useful AI tip is that ChatGPT has the ability to reformat text in more appropriate ways. No doubt you've run into situations where you're copying content from a source like a website or a PDF, but the original content actually has line breaks in the content.

0:21 If I were to take this content here and paste it directly into Webflow here, I'm going to pieces directly. Into the designer and I'm going to use if I do a control V, it mashes it together.

0:35 We don't want that. I'm going to delete that. I'm going to do control shift V to paste it and that's going to paste it without.

0:44 Formatting what that generally does and this is a Windows system and I'm using the Chrome web browser. I believe Macs have a very similar capability is what that generally does is paste the version of the content from the clipboard that is unformatted.

1:00 It is the plain text clipboard copy which is preserving line breaks, but that also doesn't work for us. You can see that there's clearly Desirable bit of editing here.

1:13 This is a relatively short piece of text. It would take me a minute to crack it out, but there is a better way and we're going to look at that better way chat GPT.

1:24 So I use a voice interface. Face to chat GPT that I really like. So let's go for it. Please take the content here and reformat it so that the line breaks that have been mistakenly captured by the clipboard are removed, but the paragraph content is replaced.

1:47 Please make no changes to the content whatsoever, just to the formatting. Now I'm going to make Take a note here.

1:54 Because a lot of people aren't used to using voice with chat GPT. I've tested this out with clients and with co-workers on my team.

2:03 And people aren't used to talking to the computer. But I find this so efficient. You can see that it did not do a 100% accurate translation.

2:13 It will often get words wrong. And in my experience, that doesn't matter one tiny bit. I'll spell out variable names.

2:21 With underscores and hyphens and so on. It is amazing at its ability to understand what exactly your intention is. Even when the voice part, the voice of the speech to text.

2:34 AI, which is a completely separate thing, not part of chat GPT. Is it just a browser plugin? You can see it here.

2:41 It is called voice control for chat GPT from Mia AI. It is free. It is phenomenally. It has changed. My workflow now in this same prompt.

2:51 I'm going to simply paste that same text. You can see our unwanted line breaks in it and straight away it turns around and reformats it for me.

3:02 And I will compare this to the original content to be 100% certain that it has kept it unmodified. I actually see that it looks a little bit modified here so it is important to check.

3:14 And compare it to the original content. Where did the original content go? Here it is. You can see the paragraphs are a little bit different.

3:23 But the content is going to be the same in my experience. I will audit it. This actually looks great to me but I want to see if I can get it a little bit further.

3:34 Still, this as a starting point can save you hours of work and you can refine it as desired from there.


Want to support our team?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.
Buy us a beer