Back

Top CMS Power Ups for Framer (Pagination, Search and 6 more)

Guy Acey

Framer Designer, Youtube Creator

Here are some powerful CMS upgrades in Framer. These features, includes pagination, load more, real-time search, a dynamic table of contents, and previous/next buttons. Don't feel trapped by the limitations of Framer CMS ever again!

1. Pagination

Pagination divides your content into multiple pages, making it easier for users to navigate through extensive lists of articles or products. Here’s how to add pagination to your Framer project:

  1. Insert a Collection List: Go to the top menu and select "Insert Collection List." This will display all your CMS collections. For example, we can use a blog collection.

  2. Set Up the Collection List: Drag the collection list outside the canvas and connect it to the Mega CMS component.

  3. Configure Pagination: Customize the pagination buttons. You can change colors, fonts, and add shadows for a personalized touch. Set the limit to display a specific number of blogs per page and watch as your content is neatly organized into pages.


2. Load More

The Load More feature allows users to reveal more content incrementally:

  1. Enable Load More: In the Mega CMS component, select the Load More option.

  2. Set the Display Limit: Choose how many items to display initially and how many more to load each time the button is pressed. This feature is particularly useful for long lists, providing a cleaner and more engaging user experience.

3. Real-Time Search

Real-time search filters your content as you type, making it easier for users to find what they’re looking for. Note that this component only allows you to search through slugs/titles:

  1. Add the Search Component: Use the dedicated search component in Framer.

  2. Customize the Search Bar: Set the background color, border, and placeholder text. Adjust the font, padding, and other styles to match your website’s style.

4. Dynamic Table of Contents

A dynamic table of contents allows users to smoothly scroll through different sections of your blog:

  1. Add the Table of Contents Component: Copy the component from Segment UI and paste it into your Framer project.

  2. Configure the Table of Contents: Set the width, height, and styles for headings. Ensure it accurately reflects the structure of your blog, highlighting sections as you scroll and allowing users to jump to specific parts with a click.

5. Previous and Next Buttons

Previous and next buttons enable users to navigate between articles without returning to the main page:

  1. Insert the Component: Copy the previous and next buttons component and paste it into your blog page.

  2. Link the Component: Connect it to your CMS collection list and configure the display settings. Also connect the current slug. Choose whether to repeat navigation from the last article back to the first, creating an infinite cycle for a smooth user experience.


6. CMS Child Counter

The CMS Child Counter displays the number of items in your collection.

  1. Copy the Component: Get the CMS child counter component from Segment UI.

  2. Link and Customize: Link it to your collection and customize the text style to fit your design.

7. Rounded Corners for Images

Add a border radius to images by using a code override.

  1. Apply the Override: Use the CMS image corner radius override in Framer.

  2. Adjust the Code: Customize the radius settings in the code to achieve the desired look.

8. Alt Text Zoom

Enable zoom functionality for images with alt text, enhancing accessibility and user interaction with your visual content.

  1. Add the Override: Use the CMS alt description override in Framer.

  2. Customize and Implement: Implement the override to allow users to click and zoom on images that have alt text.


Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

How does the licenses work?

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

How does the licenses work?

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!