Editing Content

You can choose to set up different types of input fields depending on your content. For instance, a blog might have a title, a slug, and a long-form field for formatted content. These may be different for a product directory or a photo blog, where you may need to add an image field. To edit the fields each CMS item will have, click on any of the column titles. This will trigger a modal to add new fields, where you can also re-arrange the fields or modify or delete the existing ones.

Adding Content to the Canvas

After setting up the content, go back to the canvas. Your collections are accessible from the Insert menu. Open the Insert menu, navigate to the CMS Content section, and drag and drop your collection onto the canvas. This will add a special stack with layers connected to your data. From here, you can edit the visual properties on the right, just as you would do with a regular Stack.

Add a Page with Content

If you wish to add a page instead that will automatically be populated with data from the CMS, navigate to the left panel. One you are in the Pages tab, click on the + button next to the CMS section. If you add the Index page, a page will be added with a list of all of the items in your collection. If you add the Detail page, you will be presented with a page with content from your individual items.

Note: If you chose to add the sample data, a new detail page called /blog will be added to your website, and you will find the stack of content added into the page for you.

The detail page will display content pulled from the first entry of the collection by default. In order to preview other items in the collection, change the content by selecting a different item from the dropdown menu.

Reference Fields

To add Pagination, select your Collection List, click on Pagination, select one of the two options, then pick how many items to load. Pagination also works with existing Limits and Start Offsets. Both the Spinner and Button are completely customizable, and you can pick any Variant for their Loading states. The Spinner itself is just a layer with a conic gradient and a Loop Effect, so you get full control. Adding Pagination helps make your blogs and changelogs much faster to load, especially when they contain dozens of items.

• Infinite Scrolling with custom Spinner component

• Load More Button with custom Button component

• Enjoy freeform positioning of both components

• Design your own Loading and Hidden states

• Make your CMS Pages much faster to load

Filtering

We've added the ability to filter your collection lists in the CMS. This allows you to keep your content in a single collection, yet customize how that collection is presented on each of your web pages. For example, if you're creating docs for your app, you might want to filter articles per topic on your homepage. Or when creating a blog, you might want to filter your blog posts per category.

Choose Compelling Topics

Use analytics tools to understand demographic data and user behavior. Tailor your content to address audience needs and interests, solving their specific problems. Conduct keyword research with tools like Google Keyword Planner or SEMrush. Analyze industry trends and competitors to select relevant and trending topics that improve SEO. Utilize headline analyzers like CoSchedule's Headline Analyzer. Craft titles that are clear, specific, and contain high-ranking keywords. Use power words to increase click-through rates.

Organize Your Content

Implement a clear structure using HTML tags for headings (H1, H2, H3) and lists (<ul>, <ol>). This enhances readability and SEO. Leverage CSS for formatting to improve UX. Embed high-quality images, infographics, charts, and graphs. Use Framer for creating visuals and optimize them with alt text for SEO. Ensure they are mobile-responsive. Place keywords naturally within the content, especially in headings and subheadings. Optimize meta descriptions, image alt texts, and use internal and external links.

Pagination and SEO

Consider adding pagination for extensive content lists, enhancing performance by reducing load times and improving user experience by making large amounts of content more readable and navigable. Additionally, pagination benefits SEO by facilitating easier search engine crawling and reducing bounce rates. By selecting a list of content coming from the blog, you can click the blue plus icon at the bottom to add infinite scrolling or a load more button. If you add pagination with infinite scrolling, try to avoid positioning layouts like pivots and footers below the loading content. This will help minimize layout shifts, thus not harming SEO.

Monitor Performance

Utilize the built-in Framer analytics to track performance metrics and adjust content strategy based on data insights. By combining these best practices with technical best techniques, you can create a blog that not only engages and informs but also performs well in search rankings and user engagement. Happy blogging!