Starting and Growing a Career in Web Design
0%
Starting and Growing a Career in Web Design
0%
Starting and Growing a Career in Web Design
0%

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.

Customizing the Layout and Design

Once you've added your CMS content to the canvas, you can fully customize how it appears on your website. Select the CMS stack to access styling options in the right panel, where you can adjust spacing, colors, typography, and layout properties. You can also rearrange the individual elements within the stack by dragging them to different positions. For more advanced customization, consider creating custom templates by duplicating and modifying the default CMS components to match your brand's visual identity.

Managing and Updating Content

To update your CMS content after publication, return to the CMS section and click on any existing item to edit its details. Changes made here will automatically reflect across all pages where that content appears. You can also bulk edit multiple items by selecting them and using the bulk actions menu. For team collaboration, consider setting up user permissions to control who can edit, publish, or delete content within your CMS collections.

Publishing Your CMS-Powered Site

When you're ready to go live, ensure all your CMS content is properly configured and previewed. The system will automatically generate the necessary pages and URL structures based on your collection setup. After publishing, your Index pages will display paginated lists of your content, while Detail pages will be accessible via individual URLs. Remember to test all internal links and navigation to ensure a smooth user experience across your CMS-driven pages.

Create a free website with Framer, the website builder loved by startups, designers and agencies.