How To Add A Blog To Webflow

Prefer video?

Watch the video version of this blog post on my Youtube channel.

Watch Video

There are many ways you can spice up your blog pages to make them easier for users to read, share, and take action. Alongside social sharing buttons, adding in call to actions inside your blog post is starting to become a common spice. In-fact, even Webflow themselves have caught up and implemented it into their blog.

So how exactly is this done? There isn't a 'call to action' option in the rich text block, so we know that it has to be done through a workaround.

Well, there are actually two workarounds that you can use, and they are both a piece of cake, so let's dig in.

Option 1: Split Your Blog Post in Half

The first option is actually pretty simple - just add in another rich text field.

By adding in a second rich text, you can simply copy half of your blog post into the second field, giving you space to add whatever custom elements you want in between.

This is where it might be a good spot to add your call to action block.

The best part about this is that if the 2nd blog rich text isn't filled in, it'll simply hide itself, meaning you can make this work for only the blog posts you want and not every single one.

Option 2: Add in Custom Embed Blocks

If instead you want more flexibility and the option to add many different CTAs down your blog post, you can instead add the call to actions through code embed blocks.

Firstly you want to design the call to action block, and put it in a hidden page such as your design system page.

Once you've done this, publish and open the page where you designed the block, and inspect the element inside your browser. It's usually easiest to do this by right clicking on the div and selecting "inspect element".

Once you've found the div in your code, right click again and select "HTML" under "copy".

Go back into any blog post, find the space where you want to add in the div, and add a custom code block.

Inject the code we just just copied into this space, hit save, and resave the blog post.

You won't be able to see the block inside of Webflow, so you might want to publish to your staging domain first to make sure it looks how you want it to.