CMS & Content
Connecting CMS to Design
One of the most powerful features of the CMS in Framer is the ability to connect content directly to your designs.
Intermediate
6 min read
Instead of manually updating text, images, and layouts every time content changes, Framer can automatically pull information from CMS collections and display it throughout your website.
This is what powers:
Blogs
Resource centers
Portfolios
Team directories
Case studies
Testimonials
Dynamic landing pages
Once a layout is connected to CMS fields, content updates can be made from the CMS without touching the design itself.
What Does “Connecting CMS to Design” Mean?
Connecting CMS to design means linking content stored in a collection to visual elements on a page.
For example:
A field becomes the source of content, while the design element becomes the display layer.
Instead of manually entering content into the design, the content is pulled automatically from the CMS.
Simple Example
Imagine you have a blog collection containing:
You can connect those fields to page elements such as:
When a new blog post is added, Framer automatically displays the correct content.
Why CMS Connections Matter
Without CMS connections, every page would need to be updated manually.
For a website with:
50 blog posts
100 portfolio projects
200 resources
manual updates become extremely time-consuming.
CMS connections allow you to:
Publish content faster
Reduce repetitive work
Maintain consistency
Scale websites efficiently
Separate content from design
This is one of the main reasons dynamic websites are easier to manage than fully static websites.
Understanding Dynamic Content
Dynamic content is content that changes based on the CMS entry being displayed.
For example:
Blog Template:
Article 1:
Article 2:
The design remains identical, but the content changes automatically.
Static Content vs Dynamic Content
Understanding the difference between static and dynamic content is important.
Static Content
Static content is manually entered into a page.
Examples:
Homepage hero section
Contact page
Pricing page
Content remains fixed until edited manually.
Dynamic Content
Dynamic content is pulled from the CMS.
Examples:
Blog posts
Portfolio projects
Team profiles
Resource libraries
Content updates automatically when CMS entries change.
The CMS Workflow
Most CMS-powered websites follow a similar process.
Once the connection is established, Framer handles the content population automatically.
Connecting Text Fields
Text fields are one of the most common CMS connections.
Examples:
These fields can be connected directly to text elements.
Example: Blog Title
CMS Field:
Connected To:
Result:
Every article automatically displays its own title.
No manual editing required.
Connecting Subheadings
Additional text fields can populate:
Subtitles
Categories
Author names
Excerpts
This creates fully dynamic layouts.
Connecting Images
Images are another common CMS connection.
Instead of manually replacing images on every page, image fields automatically populate image layers.
Example: Featured Images
CMS Field:
Connected To:
Each entry displays its own image automatically.
Common Image Use Cases
Image fields are often used for:
Blog thumbnails
Team photos
Portfolio covers
Product images
Testimonial avatars
This allows editors to update visuals directly from the CMS.
Connecting Rich Text Fields
Rich text fields contain long-form content.
Examples:
Blog articles
Tutorials
Documentation
Case studies
These fields are typically connected to dedicated rich text elements.
Example: Article Content
CMS Field:
Connected To:
The entire article body displays automatically.
Why Rich Text Is Important
Without rich text fields, large content libraries become difficult to manage.
Rich text allows editors to:
Add headings
Create lists
Insert links
Format content
without modifying layouts.
Connecting Date Fields
Date fields are commonly displayed on:
Blog posts
News articles
Events
Resources
Example:
CMS Field:
Connected To:
This keeps publication dates consistent across the site.
Connecting Link Fields
Link fields can power:
Buttons
Social links
Resource downloads
External references
Example:
CMS Field:
Connected To:
Each project can have a unique destination while using the same design.
CMS Lists Explained
CMS content isn’t limited to individual pages.
You can also display multiple entries simultaneously using CMS lists.
What Is a CMS List?
A CMS list automatically generates repeating layouts from collection entries.
Example:
Rather than manually creating each card, Framer generates them automatically.
Common CMS List Examples
CMS lists are frequently used for:
Blog grids
Portfolio galleries
Team directories
Resource libraries
Testimonial sliders
These layouts automatically update as new content is added.
Dynamic Cards
One of the most common CMS designs is the dynamic card.
Example:
Every card pulls information from a CMS entry.
When new content is added, new cards appear automatically.
Dynamic Pages
Dynamic pages take CMS connections a step further.
Instead of only displaying content in lists, Framer generates complete pages from CMS entries.
Example:
Each entry becomes its own URL.
Benefits of Dynamic Connections
Once fields are connected properly:
Content updates instantly
Layouts remain consistent
Publishing becomes faster
Scaling becomes easier
This is the primary advantage of CMS-driven websites.
Responsive CMS Design
A common mistake is assuming all content will have similar lengths.
In reality:
Both need to fit the same layout.
Testing Dynamic Content
Always test:
Long titles
Short titles
Large images
Small images
Long descriptions
Empty optional fields
A layout that works for one entry may break for another.
Responsive CMS Checklist
Verify that:
Text wraps correctly
Images scale properly
Cards maintain spacing
Buttons remain accessible
Mobile layouts stay readable
Responsive testing is especially important for dynamic websites.
Image Optimization
CMS websites often contain large numbers of images.
Poorly optimized images can:
Slow page loading
Hurt SEO
Reduce performance
Always:
Compress images
Use appropriate dimensions
Avoid oversized uploads
before adding content.
Common Beginner Mistakes
Hardcoding Content
A common mistake is manually typing content into dynamic templates.
Instead, always connect elements to CMS fields.
The CMS should be the content source.
Ignoring Responsive Testing
Dynamic content lengths vary significantly.
Always test multiple entries.
Using the Wrong Field Type
For example:
Using text fields instead of rich text fields for long articles can create unnecessary limitations.
Not Planning Field Structure
Changing field structures later can become difficult once content has been added.
Plan collections before building layouts.
Uploading Unoptimized Images
Large media files can quickly impact website performance.
Optimize content before publishing.
Best Practices
Build reusable layouts
Connect every dynamic element properly
Test with real content
Test long and short content variations
Optimize images before upload
Keep field structures organized
Separate content from design
Design for future scalability
Frequently Asked Questions
Why should I use dynamic layouts instead of static pages?
Dynamic layouts are faster to manage, easier to scale, and significantly reduce maintenance work.
Can images be connected dynamically?
Yes. Image fields can populate image layers automatically.
Do I need to reconnect fields for every CMS item?
No. Once a template is connected, all entries use the same connections automatically.
framerbaseio