How to get started with a Webflow blog
Okay, let’s get to the heart of the matter.
Step 1: Choose a Webflow CMS template
First, check out our responsive templates and be sure to click the “CMS” filter. (If you clicked on that link, you’re good to go.)
Why? Because using a CMS-based template gives you access to on-page editing and the CMS panel, so you don’t have to dive into the more complex Designer until you’re done.
We’ve got plenty of CMS-based templates, but to make things easier, we’ll be using Tokyo’s minimal free blog template.
If you’d like, you can also check out our blog templates, as these are also CMS templates (content management system), but they are filtered specifically for blogging websites only.
Step 2: Customize Your Site Design
To keep things simple, simply perform a Couple of minor tweaks to the visual layout of the Tokyo blog template using Webflow Designer.
Font Update
First, we’ll update the site’s default font. Typography has a massive effect on how people perceive and feel about a website, so it’s a simple change with a lot of value for money.
The template’s default font, Montserrat, is a friendly geometric sans serif, which is nice. But we’re looking to write app reviews focused on the needs of modern tech workers, so we want something a bit more dignified.
Looking through the font dropdown in the Typography panel, we don’t see anything like that. It is, so we’ll head over to our site settings by clicking the W in the top left corner, then Site Settings.
Next, click the Fonts tab and open the Google Fonts dropdown menu, where we can choose from any of the massive collections of Google Fonts.
We’ll be going with a different sans serif called Work Sans, so we load that one (making sure to select the thin weight, which has a delicate Swiss design feel) and return to the Designer.
For the changes to be efficient, we want Work Sans to be the default font for the entire site. To do this, we must make it the source of the body of the site.
In Webflow (and web design in general), the body is the fundamental entity of your website, so if you want a style choice to affect your entire site, start there. To select the Body and style it, I click “Body” in the browser to the left of the Designer.
Then, in the style panel to the right of the Designer, I click the Selector field, and select Body (All Pages). Click on that label, then you’ll be taken back to the Typography panel to choose the new font, and bam (!) — the rebranding has begun.
Note: It’s generally better to design labels rather than create unique selectors for everything on your site. This ensures that your changes have the widest effect and helps keep your code clean.
Changing the Body tag to Work Sans changed much of the text on the site, but not all of it. This is because one of the essential laws of CSS is specificity: more specific classes override less specific ones. That’s why things like headers are still in Montserrat: the header tag is more specific than the body tag.
So now we’ll go through all the text that’s still in Montserrat and update to Work Sans. After changing the site name, access the navigation links and other important element of Webflow.
When we click on the “Blog” link, we see that it has two selectors: Nav Link and Current. “Current” tells us that this selector has a transition applied to it. Because the web is an interactive medium, the site can reflect the actions that people take on the site. In this case, the selector changes color to show that Blog is the current page.
That doesn’t affect font changes, but it’s worth noting as you dig deeper into layout customizations in Webflow.
With the home page (blog font) done , switch to the individual blog post pages template (using the page switcher at the top left). Here we see that while the body of the text is set to Work Sans, the headlines remain in Montserrat.
The tricky part is that we can’t directly style the content of the blog post since, again, it’s pulled from the Collection. So we’ll add a second rich text field to the canvas and give it the same class name as the dynamic content (in this template, “Blog Content”). We can then style the H2 and H3 within the rich text and watch the captions update in the previous blog content.
Just don’t forget to remove the rich text element you added! Otherwise, it will appear on every blog post you publish. (The same goes for any non-dynamic elements you add to a collection page template.)
Adding Some Box Shadow Material Styling
Okay, just change the font our blog has transformed quite a bit.But we want to make a simpler change that will also have a lot of impact.
Because I’m a big fan of Google’s Material Design approach and card-based interfaces, we wanted to turn these blog teasers into cards. Don’t worry, it’s super simple.
Just select the whole container for the teaser, that thing that wraps the image, post title, metadata, excerpt, and link, and then add a box shadow from the Effects section of the style panel.
And so, we’ve made our blog quite different from our source template, and it still looks great. All without touching any code.
Step 3: Customize Your Collections
As mentioned above, we call the content types “Collections”, and they’re easy to create. This is also where we can dive into the Designer side of Webflow CMS!
First, you’ll need to update the category collection to match the topics you’ll be writing about. So, just open the Collections panel on the left, click Categories, then go through each category, updating to whatever is relevant to your blog.
When you do this, be sure to update both the Name field and the URL. After all, you don’t want your web app posts to have “music” in their URL (unless, of course, it’s a music app).
You will see a warning that changing the URL will break the old URL, but that’s okay. You haven’t posted yet, so you haven’t actually broken any URLs yet, and any blog posts associated with the categories you edit will automatically update.
If you need more categories, just click New, and if you need fewer, just click Remove 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 that content to match your publication. vision.
There are two ways you can do this:
- Update the content within the designer before posting. If you’re worried about someone seeing your blog full of sample content, you may want to go this route.
- Publish your site and update the content in the Editor. Since the chances of someone accidentally coming across our new blog are low, and I want to introduce you to the Editor — this path.
To publish your site, simply click the Publish button in the upper right corner, then click the link icon to the right of the site name. This will open the site in the Editor, the front end of Webflow’s content management system.
Unlike the WordPress control panel, Webflow Editor does not behave like a backend (primarily). Instead, it allows you to move around the site using your actual navigation links on the page and edit the content directly on the page.
As a copywriter, this is incredibly valuable, because it really matters how the words look on the page. Plus, it removes an annoying layer of abstraction between you and your content when you don’t have to “preview” your changes.
Note: Changing the title of a blog post on the page will not alter its title. url . You can do it in the Editor Panel.
To open the Editor Panel, simply click Pages or Collections. The panel then slides up, allowing you to 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 nice thing here is that the home page (blog feed) is embedding blog post titles and URLs dynamically, so it won’t actually break any URLs (again! !).
Note: editing URLs of static pages will break links to them, as they are not dynamic.
You can now create a beautiful blog in Webflow.
Empowering Content Creators and Designers
Getting attention in today’s online climate is getting cutthroat. You need a platform that allows you to excel. A platform that allows you to create your own brand and create a completely original website, with clean code and SEO in mind.
As the web becomes more accessible and more people create great content online , the brand and content strategy will become the differentiating factor.
With that, it is important to find ways to merge content creation and visual development together. Think about how your content feeds your designs and how your designs feed your brand. Here is a new wave of creation.
.