Blogging on Webflow

Editing Blog Content w/ Google Docs

Overview
Planning Your Blog
001
Webflow Limitations for Blog Sites
002
Getting Started
Know Your Tools
100
Setting Up Your Blog
101
TIP - Create Your Own Date Fields
102
Editing Articles
Editing Blog Content w/ Google Docs
200
Paste Images & Screen Captures into Rich Text
3:41
204
No items found.
Published
July 16, 2023
Updated
July 16, 2023
in lightbox

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!

At the top of every Collection Item page, you'll find a link that navigates you to that page for WYSIWYG editing.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.