Whether you're drafting your first blog post or updating existing content, getting started with ButterCMS is simple. Most users begin by typing paragraphs directly into the editor, then add structure with headings, enhance with images, and polish with formatting. This guide walks you through each feature in the order you'll naturally use them—from basic text to advanced capabilities like AI assistance and SEO optimization.

What You'll Learn

In this guide, we'll walk through the core features that make ButterCMS the preferred choice for marketing teams:

● Write and format paragraphs with clean structure
● Create heading hierarchy for better readability
● Add images and rich media to engage readers
● Use bullet points and lists for scannable content
● Draft and refine content with AI writing assistance
● Create tables and syntax-highlighted code blocks
● Optimize for SEO and accessibility
● Export content to PDF or Word formats

Why Marketers Choose ButterCMS

ButterCMS empowers your marketing team to create, edit, and publish content independently. No developer assistance required. Here's what sets us apart:

● No Coding Required – Write and format content visually with our intuitive WYSIWYG editor
● AI Writing Assistant – Generate ideas, improve text, and refine tone instantly
● SEO-Optimized – Built-in meta fields, semantic HTML, and global CDN delivery
● Developer-Approved – Clean REST API that integrates with any tech stack

"After shopping the market, it was clear that ButterCMS was the perfect choice. It allows our developers to build powerful components and makes it easy for our marketing team to drive a better customer experience."

— Hampton Catlin, Creator of Sass and Haml

Step 1: Write Paragraphs and Basic Text

Start by simply typing your content. The ButterCMS editor works like any word processor—just click and start writing. Your text automatically formats as clean paragraphs with proper spacing.

Text Formatting Options

Use the toolbar to enhance your text:

● Bold and italic for emphasis
● Underline and ~~strikethrough~~ for annotations
● Hyperlinks to connect related content
● Text and background colors for visual hierarchy

Background highlights work great for key terms, callouts, and important notes.

Text Alignment

Left aligned (default): Standard paragraph alignment for body text.

Center aligned: Perfect for quotes, CTAs, and hero sections.

Right aligned: Useful for dates, attributions, and RTL language support.

Step 2: Structure Content with Headings

Proper heading structure improves both SEO rankings and accessibility. Use headings to create a clear content hierarchy that helps readers and search engines understand your content.

Heading Hierarchy (H1-H6)

Select from six heading levels to organize your content:

● H1 – Main page title (use only once per page)
● H2 – Major sections
● H3 – Subsections within H2
● H4-H6 – Deeper nesting as needed

Example: H4 Subheading

Subheadings help readers scan your content quickly and find the information they need. They also help search engines understand your content structure.

SEO Tip: Never skip heading levels (e.g., don't jump from H2 to H4). This helps both screen readers and search engines understand your content structure.

Step 3: Add Images

Images break up text, improve engagement, and boost SEO. Upload directly or choose from your Media Library. All images are automatically optimized and served via CDN for fast loading.

Center-Aligned Image

ButterCMS Dashboard showing the WYSIWYG editor interface with formatting toolbar, content area, and sidebar navigation — ButterCMS Dashboard – Full-width featured image with auto margins

Image Alignment Options

ButterCMS supports three alignment modes for flexible image layouts:

Image Alignment Options
Alignment	CSS Class	Use Case
Left	`align-left`	Text wraps on right
Center	`align-center`	Full-width featured images
Right	`align-right`	Text wraps on left

Step 4: Create Lists and Bullet Points

Lists make your content scannable and help readers quickly find key information. Use bullet points for unordered items and numbered lists for sequential steps or rankings.

When to Use Each List Type

● Bullet points – Features, benefits, or items with no specific order
● Numbered lists – Step-by-step instructions, rankings, or prioritized items
● Nested lists – Sub-items that belong under a parent category

Pro tip: Keep list items concise. If an item needs more than two sentences, consider making it a separate paragraph with a subheading instead.

Step 5: Add Quotes and Callouts

Blockquotes highlight testimonials, important statements, or cited content. They draw attention and break up long sections of text.

Use blockquotes to highlight customer testimonials, expert opinions, or key takeaways that you want readers to remember.

Best Practices for Quotes

● Always attribute quotes to their source
● Keep quotes concise and impactful
● Use sparingly to maintain their impact

Step 6: Draft Content with AI Assistance

ButterCMS includes built-in AI writing assistance powered by advanced language models. Access AI features directly from the editor toolbar to accelerate your content creation process.

AI Writing Capabilities

The AI assistant helps you:

● Generate content – Create drafts, outlines, or complete paragraphs from prompts
● Improve writing – Enhance clarity, fix grammar, and refine tone
● Summarize text – Condense long passages into key points
● Change tone – Make content more formal, casual, or persuasive

Pro tip: Use AI shortcuts in the toolbar for quick access to common AI operations without breaking your writing flow.

Step 7: Embed Rich Media

Rich media makes your content more engaging and improves time-on-page metrics. ButterCMS supports embedding from popular platforms.

Supported Media Types

Supported Media Types
Media Type	Platforms
Video	YouTube, Vimeo, Dailymotion
Audio	Spotify, Apple Music
Interactive	CodePen, Giphy
Images	Media Library + CDN

Video Embedding Example

See ButterCMS in action with this embedded video:

Audio Embedding Example

Embed playlists and podcasts directly in your content:

Step 8: Create Structured Data with Tables

Tables present comparisons, pricing, specifications, and structured data in a clean, scannable format. They improve both readability and SEO.

Feature Comparison Example

Feature Comparison: ButterCMS vs Traditional CMS
Feature	ButterCMS	Traditional CMS
Setup Time	Minutes	Days to Weeks
Maintenance	Zero – fully managed	Ongoing updates required
Security	Enterprise-grade, SOC2	Your responsibility
Scalability	Global CDN included	Additional infrastructure
AI Writing	Built-in	Third-party plugins

Step 9: Add Code with Syntax Highlighting

ButterCMS supports syntax-highlighted code blocks in 11 programming languages. Perfect for technical documentation, tutorials, and developer blogs.

Supported Languages

JavaScript, Python, PHP, Ruby, Java, C, C++, C#, HTML/XML, CSS, and Default (plain text).

JavaScript Example

// Fetching blog posts with ButterCMS JavaScript SDK
const Butter = require('buttercms');
const butter = Butter('your_api_token');
async function getBlogPosts() {
    const response = await butter.post.list({
        page: 1,
        page_size: 10,
        exclude_body: true
    });
    return response.data.data;
}

Python Example

# Fetching blog posts with ButterCMS Python SDK
from butter_cms import ButterCMS
client = ButterCMS('your_api_token')
def get_blog_posts():
    response = client.posts.all({
        'page': 1,
        'page_size': 10
    })
    return response['data']

Step 10: Optimize for SEO

ButterCMS includes built-in SEO tools to help your content rank higher in search results. Control link attributes, use semantic HTML, and optimize meta information.

Link Attributes

Control how search engines treat your links:

● ButterCMS Documentation – rel="follow" passes link equity to trusted sources
● Example External Link – rel="nofollow" for user-generated or sponsored content

SEO Tip: Use rel="follow" for trusted internal and partner links. Use rel="nofollow" for user-generated content, ads, or untrusted external links.

Step 11: Support Multiple Languages

ButterCMS supports content in any language, including right-to-left (RTL) languages. Use the text direction buttons in the toolbar to switch between LTR and RTL.

Left-to-Right (LTR) Languages

English, Spanish, French, German, and most European languages use left-to-right text direction. This is the default setting in the editor.

Right-to-Left (RTL) Languages

مرحباً بكم في ButterCMS – نحن ندعم المحتوى بجميع اللغات بما في ذلك العربية والعبرية والفارسية

ברוכים הבאים ל-ButterCMS – אנחנו תומכים בתוכן בכל השפות

Step 12: Ensure Accessibility

ButterCMS includes a built-in accessibility checker that scans your content for WCAG compliance issues. Click the a11ycheck button in the toolbar to run an audit.

What the Accessibility Checker Reviews

● Heading structure – Ensures proper H1-H6 hierarchy without skipped levels
● Image alt text – Checks that all images have descriptive alt attributes
● Link text – Identifies vague links like "click here" or "read more"
● Color contrast – Verifies text meets WCAG contrast requirements
● Table structure – Ensures tables have proper headers and scope attributes

Frequently Asked Questions

What is ButterCMS WYSIWYG editor?

ButterCMS WYSIWYG editor is a powerful visual content editor that allows marketers to create rich blog posts and web content without coding. It includes AI writing assistance, rich text formatting, media embeds, code snippets with syntax highlighting in 11 languages, tables, accessibility checking, and SEO optimization tools.

Does ButterCMS have AI writing features?

Yes! ButterCMS includes AI-powered writing assistance. You can use AI to generate new content, improve existing text, summarize passages, change tone, and fix grammar—all directly within the editor toolbar.

Is ButterCMS good for SEO?

ButterCMS is built with SEO in mind. It includes built-in fields for meta titles, meta descriptions, and SEO-friendly URLs. Content is delivered via a global CDN for fast page load times (a key ranking factor). The editor produces semantic HTML with proper heading hierarchy.

Can I export content from ButterCMS?

Yes, you can export content to PDF and Word document formats directly from the editor. All content is also accessible via the REST API for integration with any tech stack.

Ready to Transform Your Content Workflow?

Start creating professional content today with ButterCMS's powerful WYSIWYG editor.

Schedule a Demo Read the Docs

Blog Posts by Tag

Example post: Getting started with ButterCMS Blog posts