How do I create CMS collections in my Framer project?
Add prebuilt CMS sections to your Framer website
You can add prebuilt CMS sections and detail pages to your Framer project.
Watch the video demo to see how easily you can use the prebuilt CMS collections.
Open the Frameblox Plugin and choose from the prebuilt CMS collections: Blog, Portfolio, Team, Testimonials, Career, or Shop.
In the prebuilt Blog CMS collection, you'll find ready-made sections, detail pages, and header hero sections. The first menu offers guidance on integrating this CMS collection into your Framer project.
First, you need to create the CMS collection in your project. You have two options for this.
In the Create CMS Collection menu, you'll find all the fields needed for your project. Go to your Framer project's CMS menu, then create a new CMS and set up these fields with the specified options.
To copy the full CMS collection from the Frameblox UI kit Framer files, first remix and copy the Framer files into your Framer workspace. Then, go to the CMS menu and right-click on the CMS you want to copy. Select the "Copy" option. Next, navigate to your project CMS menu, right-click, and select "Paste".
Once your CMS collection is set up in your Framer project, you can add the Blog sections to your page. Remember to connect these sections to your CMS collection.
In the left Layers tab, select the Blog Collection layer. Then, in the right panel's Content block, choose the Blog CMS collection in the Source field.
Then, set the text and image sources and connect them to the CMS fields. Click on the first block in the CMS collection layer to select the title. In the right panel, click on the Content option, then choose Set variable, and select Title.
Next, connect all elements to the CMS, including the Image, Author Name, Author Title, Introduction, Date, and others.
Awesome, you've finished.
Create prebuilt CMS detail page to your Framer site
To create a detail page in the CMS collection, click the plus icon in the Pages tab on the left sidebar. Then, select "New CMS Page," choose the CMS you created, and select the "Detail Page" option.
Then, create the Tablet and Phone breakpoints using the default sizes.
After you can choose a prebuilt Detail page template from the Frameblox Plugin in the CMS menu.
Than click the selected page, and the prebuilt page added to your page.
After you need to connect the elements, text, images to the CMS collection.
Click the title in the right panel, then in the Text block, select the Content option. Choose Set variable, and find the Title option. You'll need to connect all other elements—Image, Date, Author Name, Author Title, and more—to the CMS collection's fields.
To make blog posts clickable, click on the blog post card. Then, in the right panel, select "Link To" and choose the option with :slug. You need to do this on the Detail page and in other sections if you want the blog post cards to be clickable.
And that's it! Your blog CMS is complete with prebuilt sections and a detailed post page. You can now easily add and manage your CMS content.
