Webflow's Editor leaves a lot to be desired. For a content producer, it has some major gaps.
- Fragile interface that is difficult to navigate
- Zero version tracking
- Inability to revert versions or undo changes
- No realtime collaboration abilities
- Device-access limitations. You can only use Webflow's editor on a desktop browser.
But at the same time, it's so nice to see your article content in exact WYSIWYG form.
Here's how I approach it.
Google Docs
For the initial writing, I use Google Docs to capture all of my content. In addition to all of the above needs;
- It has built-in voice-to-speech
- It has a great headings outline
- Styles are simple and on-par with Webflow's rich-text element
Overall, this works pretty well.
I write 80% of the article in Google Docs, then copy it over into the Webflow Editor to complete writing and formatting tasks.
Pro Tips
Copy-paste works great for most of the content.
- Paragraphs
- All heading levels
- Lists, but ordered and unordered
- Links, bold, and italics
If you have a particular blog, etc that you write a lot of content on, you can mimic some of the fonts and styles in a Google Docs template so that the editing experience is somewhat WYSIWYG.
Some elements must be created by hand after pasting;
- Any HTML embeds
- Blockquotes
Accessing the Editor
If you are the Website Designer, it's a pain to access the Editor. You must log into the designer dashboard, and then click into the site's editor view, and you're on the homepage.
This is very inconvenient if you just want to make a quick edit- and you cannot use your Webflow login in the editor. So bogus.
If your site is hosted and you have available editor accounts, create one for yourself. You can use a different email and password combination, and if you're using e.g. Chrome, you can just set it to remember them.
Then, editing is as quick as visiting the page you want, adding ?edit to the URL, clicking Log in. A few seconds later, you're editing away
Viewing v. editing
When you're in Editor mode, Webflow is very particular about having multiple tabs open on the same computer, with the same site.
Save often.
Saving is done by clicking outside of the rich text area.
If you're writing content or making a lot of changes, this is essential to do frequently because if;
- You free wifi access expires at your cafe
- Webflow logs you out for any reason
You've just lost all of your work.
Draft mode bug
If you're viewing a drafted page, and get logged out, the draft page will appear as a 404. The only way to get Webflow to show it again for editing is to switch to a different page in the editor, and then switch back.
Workflow
Writing;
- Do initial writing in Google Docs, to 80%+
- Collect images, PDFs, etc, that the article needs separately. Store them in the same Google drive folder ( I create one per article )
- I also collect Google Sheets of things like reference lists
- Other Google Docs can be used e.g. HTML tables that you want in your document
Preparing;
- In the Editor, create a new blog entry or collection item
- Populate all of the fields you will use, even with placeholder content if needed. This makes certain that the elements are accessible in the Editor view.
- Switch to the editor view, and do your WYSIWYG work.
Publish!
