Creating a visually appealing and functional blog can be a daunting task.
Balancing design and functionality while ensuring a seamless reading experience for your users is challenging but achievable with Framer CMS.
This guide will walk you through the process of building a beautiful blog with Framer, from setting up your CMS collection to adding advanced features like a table of contents and related articles section.
The Goal Of A Blog
Before we dive into how to create a blog, it’s important to understand why companies spend millions of dollars into copywriting.
There are 3 main reasons:
Keep users informed
Become a credible source
Get them to explore your services
Keep Users Informed
The primary goal of any blog is to provide valuable information to your readers. Your content should be informative, engaging, and relevant to your audience.
Become A Credible Source
The more informative content you write and if it starts ranking on Google search, the more credible source you’ll appear. This will help in getting more customers for your business.
Get Them to Explore Your Services
Your blog should encourage readers to explore other parts of your website, such as your services or products. This can be achieved through strategic placement of calls to action and related content.
Doing all this while keeping a good reading experience is crucial. This means having a clean layout, readable fonts, and smooth navigation.
The Elements That Make A Good Blog
Now that you know what the goal of a blog is it’s important to understand what makes a good blog.
A good blog is comprised of the following:
Cover Image
A captivating cover image draws readers in and sets the tone for your blog post.
Table of Contents
A table of contents helps readers navigate your blog easily, especially for longer posts.
Sections, Headings, and Subheadings
Break your content into clear sections with headings and subheadings. This makes it easier to read and digest.
Images
Include relevant images to complement your text and make the blog visually appealing.
Sidebar Content to Enhance UX
Use sidebar content to enhance the user experience. This could include a newsletter subscription, related articles, or social media links.
Related Articles
Adding a related articles section keeps readers on your site longer by suggesting other posts they might be interested in.
Social Share
Make it easy for readers to share your content on social media with social share buttons.
How To Make A Blog In Framer
Step 1: Add a CMS Collection
Click on the CMS button in the top bar to add a CMS collection.
Step 2: Add the Following Fields
Cover Image: Add an image field for the cover image.
Table of Content: Add text fields for each section of your article. You can start with 10 text fields and use visibility conditions to manage them. You can expand if needed.
Section Titles and Content: Add fields for section titles and content, starting with 10 of each. Again, can be adjusted based on your needs.
Step 3: Design the Layout
Blogs of this nature typically use a 3-column layout:
1. Column 1: Table of contents
2. Column 2: Content of the blog
3. Column 3: Sidebar promotion
Create a stack with 3 horizontally laid-out frames. Ensure the middle frame (Column 2 - Content) is set to a width of 2fr or more.
Column 1 - Table of Contents
Create a stack with a “Table of Contents” label and ten text fields. Map each text field to the CMS section titles to make them dynamic.
For example:
Text field 1 will correspond to section title 1 of your CMS blog
Text field 2 to section title 2, and so on…
Add visibility conditions to each text field so they only appear if their respective section titles are filled.
This ensures that only the sections with titles added are displayed. For example, if a blog post has 7 sections with titles, the Table of Contents will only show those 7 sections, hiding the remaining 3.
Column 2 - Content
Create a stack with section titles and content fields. Each section title will serve as an H2 heading.
Duplicate this structure nine more times for the remaining sections. Add visibility toggles to ensure they only appear if their content is filled.
Assign a section name to each section, such as “section-1”, for linking from the Table of content.
This means, clicking on any headings on the table of content will take you to said section, for example clicking on section 1 in the TOC takes you to section 1 of the blog.
Looking neat so far!
Column 3 - Sidebar
Design this column based on what you are promoting. For instance, it could be a newsletter signup form or a promotional display.
Now, the design for this will vary depending on what you’re promoting, but for the most part it would be a container housing some information or interactive element.
Keep Users Engaged
With your design ready, you now need to strategically keep users engaged with your website.
Add a related blogs section to keep users on your site longer.
Create a CMS collection, set a limit on the number of blogs displayed, and use filters to show specific blogs. You can read more about that here.
Make It Responsive for Different Breakpoints
With your base design ready, you need to adapt if for different screen sizes.
Remember, Google found that 75% of users prefer websites that are mobile-friendly!
To make your blog responsive to different screen sizes you'll need to do the following:
Switch from a Column Layout to a Stacked Layout
Adapt the layout for different screen sizes, switching to a stacked layout for smaller screens.
Set Breakpoints for Fonts
Adjust font sizes at different breakpoints to ensure readability across devices.
Test & Refine
With your structure in place you're ready to start writing!
The best thing to do here is to add a blog and see if everything is executing the way it was built. Based on this you might need to make a few adjustments.
Preview your blog to see how it looks.
Conclusion
By following these steps, you can create a beautiful and functional blog using Framer CMS.
The combination of a well-structured layout, engaging content, and advanced features will keep your readers informed and engaged, encouraging them to explore more of your website.
If you're stuck somewhere or think it's a HUGE mountain to climb, then feel free to reach out!
