How to hide empty CMS sections on your Framer website

When CMS entries don't have all fields filled, your Framer site displays unwanted whitespace, empty section headers, and visible gaps in your design. These blank areas disrupt the user experience and look unprofessional.

This tutorial shows two methods to hide empty CMS sections: using conditional visibility for automatic hiding based on field content, and using boolean fields for manual control. Both methods require zero code, making them accessible to all skill levels.

Why hiding empty Framer CMS sections matters for Framer sites

The capability to selectively conceal vacant sections revolutionizes how you construct adaptable Framer CMS websites. Here are concrete situations where this functionality becomes essential:

Project testimonial displays: Your portfolio pages feature client testimonial areas, yet some projects lack client feedback. Without conditional visibility rules, users encounter empty regions with text reading "Client feedback" above absolutely nothing—undermining your professional image before they examine your work.

Limited-time offer banners: You've built a promotional banner segment that sources data from a CMS collection. During periods without active campaigns, the vacant banner continues occupying valuable screen space at your page top, displacing your primary content downward and squandering critical above-the-fold territory.

Optional team member social links: Your employee profiles contain optional platform links (LinkedIn, Twitter, Instagram). When an individual lacks an Instagram profile, the empty Instagram icon container persists as a noticeable gap, generating visual inconsistencies in what should be a seamless row of social badges.

Career listings with fluctuating availability: Your hiring page showcases available roles from a CMS collection. When recruitment pauses or positions get filled, visitors arrive at a page showing only your empty state message—hardly the impression of organizational readiness you're aiming to project.

Variable product image galleries: Your online store permits adding multiple product photos per listing through CMS fields. For items featuring merely 2-3 images, the unfilled image slots still consume vertical space, requiring users to navigate through blank zones before accessing your product details.

Related article recommendations: Your blog template features a "Related Content" area at each post's conclusion. For your earliest publications or specialized subjects, insufficient related items exist to populate the collection list, making your content appear unfinished.

Understanding what "empty" means in Framer CMS

Before concealing sections, you must recognize the distinct types of "empty" that occur in Framer CMS and why each requires a different approach.

A CMS field left unpopulated happens when you generate a collection entry but omit certain fields. For instance, you publish a product without including gallery photos, or you build a team member entry without inserting their LinkedIn URL. Framer recognizes this field as unpopulated in conditional visibility logic, making it straightforward to hide elements connected to that field using the "Is Set" condition.

An empty collection list occurs when you've added a collection list component to your canvas, but either zero entries exist in that collection or every entry gets excluded by filters. In this scenario, your empty state component (the "No items found" message) becomes visible. This represents the most challenging situation because the parent container surrounding the list cannot automatically determine the list is vacant.

A seemingly vacant section presents the most nuanced challenge. The section technically contains elements (spacing, margins, background styling, titles, or structural frames), but every actual CMS-connected element inside remains hidden or unpopulated. To visitors, the section manifests as blank colored zones or an isolated header, but to Framer's rendering system, the section retains elements and continues to display.

Choosing the right approach

Use this simple decision tree:

Method 1 – Hide individual elements (automatic)
Use this for any optional element, whether individual items or entire sections. Apply conditional visibility directly to the element/section and use "Is Set" to check if a field has content. Works automatically based on field content.

Method 2 – Hide sections with manual control (boolean fields)
Use this when you want explicit control over section visibility, especially for:

• Sections that might not have content (testimonials, galleries)
• Collection Lists that might be empty (related articles, similar products)
• Strategic hiding beyond just empty fields (client confidentiality, seasonal content)

How Framer conditional visibility works for CMS content

Framer's conditional visibility lets you show or hide elements based on whether CMS fields have content. On CMS Collection Pages, you can access the current item's fields directly. Simply select an element, click the "+" next to "Visible" in the properties panel, and set your condition (like "Is Set" to show only when a field has content). The specific steps are shown in each method below.

Method 1: Hide elements or sections based on CMS fields

Best for: Any element or section that should automatically hide when a CMS field is empty. Works for individual items (social icons, buttons) or entire sections (testimonials, galleries) - as long as you can identify a "key field" that determines if content exists.

Setting up conditional visibility on Framer CMS elements

Follow these steps to hide individual elements when their CMS field is empty:

1. Identify your controlling field: Determine which CMS field dictates whether the content should appear. For a "Download PDF" button, that's your file field. For a social icon, it's the URL field for that platform.

2. Select the element: Choose the element you want to conditionally hide on your Framer canvas—this could be an image, button, text element, or container frame holding multiple elements.

3. Open the Visible property: In the properties panel on the right sidebar, locate the Visible property and click the + icon next to it.

4. Choose your CMS field: In the configuration that appears, select the CMS field that determines whether this content exists. Examples:

• For a LinkedIn icon → choose "LinkedIn URL" field
• For a video player → choose "Video URL" field
• For a gallery section → choose "Gallery Image 1" field

5. Set the condition: Choose "Is Set" to make the element visible only when that field has a value. (You can use "Is Not Set" for the opposite behavior, though that's less common.)

6. Publish and test: Publish your site and navigate to a CMS Collection Page where that field is empty—the element should be completely hidden.

Note: For elements that should hide when multiple fields are all empty (like a social media row when all URLs are blank), you'll need a helper boolean field approach covered in Method 2.

Method 2: Hide entire Framer sections using boolean fields

Best for: Complete page sections that should be manually controlled by content editors. Perfect for sections that might not have content (testimonials, galleries, related articles) or when you want explicit control over visibility.

Creating helper boolean fields for section control

When you need to hide entire sections, create dedicated boolean fields for explicit control:

1 - Add a boolean field to your collection:

• Open your CMS collection settings
• Click Add Field
• Choose Boolean field type
• Name it descriptively: "Display Testimonials Section", "Show Video Gallery", "Show Related Articles"
• Set the default value (true if sections should show by default, false if hidden by default)

2 - Configure section visibility:

• Select your section container on the canvas (the outermost frame)
• Open the Visible property and click +
• Choose your new boolean field
• Set the condition to show when the field equals "true"

3 - Use in content editing:

• When creating CMS entries, toggle this field ON for entries where the section should appear
• Toggle OFF for entries where it should hide

Why this approach works better for teams:

• Content editors immediately understand the control ("Display Testimonials: ON/OFF")
• No need to understand which content field determines visibility
• You can hide sections for strategic reasons beyond empty content (like client confidentiality)
• Reduces confusion and content editing errors

Note for Collection Lists: If your section contains a Collection List (like "Related articles" or "More products"), you'll need to manually check if related items exist and toggle the boolean accordingly. Framer can't automatically detect if a Collection List is empty, so manual control ensures sections only appear when there's actual content to display.

Troubleshooting common Framer empty section issues

Section remains visible despite empty field: Verify you're checking the correct field in your conditional visibility settings and confirm the field is truly empty—spaces or line breaks can make a field appear populated to Framer's "Is Set" condition.

Conditional visibility option doesn't appear: This happens when you're on a static page instead of a CMS Collection Page template. Static pages lack the "current item" context needed for native conditional visibility. Use Method 2's boolean field approach instead.

Section hides but leaves awkward spacing: Adjacent frames' margin or padding might create gaps. Inspect spacing on the Framer canvas and adjust your section structure to use padding-based layouts that collapse naturally.

Boolean field doesn't update immediately: Changes to boolean helper fields require publishing your site to take effect. Save the CMS entry, publish your site, then verify on the live site—preview mode won't show these changes.

‍Empty state shows instead of hiding section: The empty state appearing is correct behavior for an empty collection list. To hide the entire section including the empty state, you must use Method 2's boolean field approach.

Multiple conditions conflict: Framer uses AND logic—all conditions must be true for the element to display. If you need OR logic, restructure your design or use separate boolean fields.

Frequently asked questions about hiding empty Framer CMS sections

How do I hide empty Framer sections without writing any code?

Use Framer's native conditional visibility. Select your element or section, click the "+" icon next to Visible in the properties panel, then create a condition based on a CMS field using "Is Set". The element/section will only appear when that field contains content. Both methods in this guide require zero code.

What's the difference between hiding on CMS Collection Pages versus static pages?

CMS Collection Pages have a "current item" context that allows conditional visibility to check fields directly. Static pages don't have this context, so you'll need to use boolean fields (Method 2) to manually control visibility for sections with Collection Lists.

Can I hide a section when ALL of several fields are empty?

Yes, use a boolean helper field. Create a field like "Has Gallery Content" and train editors to set it to true only when they've filled the relevant fields. This gives you clean, explicit control over complex conditions.

Does hiding Framer CMS sections affect SEO or page performance?

Minimal to no impact. Search engines understand conditional content, and hidden elements don't negatively affect rankings. Performance-wise, both methods have negligible impact on typical websites.

How can I test if my Framer empty section hiding is working correctly?

Create test CMS entries with varied content states: all fields filled, some empty, and key fields missing. Publish your site (not just preview) and verify sections appear/disappear correctly across different pages.

When should I use conditional visibility versus boolean fields in Framer?

Use Method 1 (conditional visibility) for automatic hiding based on field content. Use Method 2 (boolean fields) when you want explicit control, are dealing with Collection Lists, or need to hide sections for strategic reasons beyond just empty content.

Can I use conditional visibility inside Framer components?

Yes, but it depends on context. Components on CMS Collection Pages can access that page's fields. Components on static pages can't access CMS fields directly - use component properties instead for flexibility.

Why does my section hide in the editor but show when published?

Always test on your published site, not preview mode. Ensure you've published after making changes and verify the CMS entry actually has empty fields (not just whitespace).

How do I hide sections when a collection list is filtered to zero items?

Use Method 2 with boolean fields. Since Framer can't automatically detect empty Collection Lists, manually check if items exist and toggle the boolean accordingly. This ensures sections only show when there's actual content.

Can I animate sections when they hide or show based on conditions?

Framer's conditional visibility creates instant show/hide behavior. For animations, you'd need custom code overrides - but instant hiding often feels more responsive for content-driven sections.

Conclusion

Hiding empty Framer CMS sections transforms your site from a template with noticeable gaps into a polished, professional experience that adapts to your actual content. Whether you leverage Framer's native conditional visibility for automatic hiding based on field content, or utilize boolean helper fields for explicit editor control, you now possess the methods to eliminate awkward vacant zones and floating headers.

The critical factor is selecting the appropriate approach: use Method 1 when you want automatic hiding based on whether fields contain content, and Method 2 when you need manual control or are dealing with Collection Lists that Framer can't detect as empty. Both methods require zero code, making them accessible to teams of all technical levels.

If you're building complex Framer sites with advanced CMS architectures or need assistance implementing these solutions across existing projects, the experienced team at our Framer agency can streamline the process and ensure your site handles empty content beautifully across all scenarios.