Webflow for blogging: 4 steps to getting started

adminMarch 16, 2023

0 60 6 minutes read

YOU ARE READING: Webflow for blogging: 4 steps to getting started AT Vccidata_En

How to start blogging with Webflow

Okay, so let’s get down to business.

Step 1: Choose a Webflow CMS template

Check out our responsive templates first and be sure to click on the “CMS” filter. (If you clicked this link, it’s already done for you.)

Reading: How to create a blog in webflow

Why? Because using a CMS-powered template gives you access to on-page editing and the CMS control panel, so you don’t have to dive into the more complex designer until you’re ready.

We’ve got it covered of CMS-based templates, but to keep things simple we’re using the free and minimal Tokyo blog template.

If you like, you can also check out our blog templates like these are too CMS (Content Management System) templates, but they are specifically filtered for blog sites only.

Step 2: Customize your website’s design

To keep things simple , we’re just going to make a few minor tweaks to the visual design of the Tokyo blog template using the Webflow designer.

Update the typography

First we update the default font of the website. Typography has a massive impact on how people perceive and feel about a website, so it’s an easy change that packs a lot of bang for the buck.

The template’s default font, Montserrat, is a friendly geometric sans serif that is nice. But we want to write reviews of apps that cater to the needs of modern techies, so we want something more dignified.

If we look at the font dropdown in the typography panel, we don’t see anything That’s spot on , so let’s go to our website’s settings by clicking on the W in the upper left corner and then on Website Settings.

Then click on the “Fonts” tab and open the “Google Fonts” drop-down menu where we can choose from the huge collection of Google fonts.

We’ll be working with another sans serif called Work Sans, so let’s upload that (make sure to choose the thin font that has a delicate Swiss design feel) and go back to Designer.

To keep changes efficient, we want to make Work Sans the default font for the entire site. To do this, we need to make it the font for the body of the website.

In webflow (and web design in general), body is the basic unit of your website. So if you want a style choice to affect everything on the site, start there. To select and style the body, I click Body in the navigator to the left of the designer.

Then, in the style panel to the right of the designer, I click in the selector field and choose Text (All Pages ). Click on that tag, then it’s back to the Typography panel to select the new font, and bam(!) – the rebranding has begun.

Note: In general, it’s best to close tags style rather than creating unique selectors for everything on your site. This ensures that your changes have the greatest impact and keeps your code clean.

Moving the body tag to Work Sans changed a lot of the text on the site, but not all. That’s because one of the fundamental laws of CSS is specificity: more specific classes override less specific ones. That’s why elements like the headings are still in Montserrat: the heading tag is more specific than the body tag.

So now let’s go through all the text that’s still in Montserrat and update it to Work Sans. After changing the site name, you come to the navigation links and another important element of Webflow.

If we click on the Blog link, we see that it has two selectors: Navigation Link and Recent. Current tells us that a transition has been applied to this selector. Because the web is an interactive medium, the website can reflect the actions that people take on the website. In this case, the selection changes color to indicate that Blog is the current page.

This doesn’t affect the font changes, but it’s worth mentioning as you dig deeper into theme customizations in Webflow.

When the home page (blog feed) is ready, switch to page template for single blog posts (using the page switcher at the top left). Here we see that while the body text is typeset in Work Sans, the headings remain in Montserrat.

The tricky thing is that we can’t style the blog post content directly as it is in turn retrieved from the collection. So let’s add a second rich text box to the canvas and give it the same class name as the dynamic content (in this template, “Blog Content”). Then we can format the H2s and H3s within the rich text and watch the subheadings update in the blog content above.

By adding a new rich text element and giving it the assign same class as dynamic content , we can indirectly format the headings within the dynamic content.

Just don’t forget to delete the added rich text element! Otherwise, it will appear in every blog post you publish. (Same goes for any non-dynamic elements you add to a collection page template.)

Adding a little material style with border shadows

Okay, so just changing the font for our blog has quite a bit changed by it.But we want to make one other simple change that will also have a big impact.

Since I’m a big fan of Google’s material design approach and map-based interfaces, we’d like to turn these blog teasers into maps. Don’t worry, it’s easy.

Just select the entire container for the teaser – the thing that encloses the image, post title, metadata, excerpt, and link – and then paste Add a box shadow to the Effects section of the Style panel.

And just like that, we designed our blog very differently from our source template and it still looks great. All without touching any code.

Step 3: Customize your collections

As mentioned earlier, we call content types “collections” – and you can easily create them yourself. Here we also dive into the designer side of Webflow CMS!

First you need to update the collection of categories to match the topics you will be writing about. So just open the Collections panel on the left, click Categories, then go through each category and update it to what’s relevant to your blog.

Be sure to update both the name field and the URL. After all, you don’t want your posts about web apps to have “music” in their URL (unless it’s a music app, of course)!

You’ll see a warning that changing the URL will break the old URL, but that’s okay. You haven’t published anything yet, so you haven’t broken any URLs yet, and all blog posts associated with categories you edited will be updated automatically.

If you need more categories, just click +New, and if you need fewer, just click Delete within the category.

Step 4: Update the sample blog posts

Each Webflow template comes with sample content to complete the design, but you’ll obviously want to update all of this content so that it too Fit your publication vision.

You can do this in two ways:

Update the content in the designer before publishing. If you are concerned, that someone might see If your blog is filled with sample content, you might want to go this route.
Publish your site and update the content in the editor. Since there’s little chance of anyone accidentally stumbling across our brand new blog – and because I want to introduce you to the editor – we’re going this way.

To publish your website, simply click the Publish button in the top right corner and then click the link icon to the right of the website name. This will open the website in the editor – the front-end page of Webflow’s content management system.

Unlike the WordPress dashboard, the webflow editor doesn’t (mostly) behave like a backend. Instead, you can move around the site using your actual on-page navigation links and edit content directly on the page.

As a copywriter, this is incredibly valuable as it really matters how words look on the page. It also removes an annoying layer of abstraction between you and your content when you don’t need to “preview” your changes.

Note: Changing a blog post title on the page doesn’t change its URL. You can do this in the editor panel.

To open the editor panel, just click on Pages or Collections. The panel then slides up so you can browse your static content (pages) and dynamic content (collections). Then simply click on a post to open it and update the title and URL.

The great thing here is that the home page (blog feed) pulls in the blog post titles and URLs dynamically, so you’re not really breaking URLs (again!).

Note: Editing static page URLs will break links to them as they are not dynamic.

Now you can create a beautiful blog in Webflow.

Empowering Content Developers and Designers

In today’s online climate, attracting attention is becoming increasingly difficult. You need a platform that allows you to stand out. A platform that allows you to brand yourself and create a website that is totally original – with clean code and SEO in mind.

As the web becomes more accessible and more and more people get great content online Creation, branding and content strategy becomes the differentiator.

As such, it is important to find ways to bring content creation and visual development together. Think about how your content feeds your designs and how your designs feed your brand. To a new wave of creation.