CMS
NEW OUTHOUSE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin purus erat, vitae luctus libero dignissim in. Integer gravida elit et ligula pretium fermentum. Curabitur placerat, mauris luctus pretium venenatis, leo sem maximus orci, in eleifend lorem massa non orci.
Duis feugiat ligula eget elit molestie vulputate. Suspendisse efficitur mi vitae nunc vulputate efficitur. Pellentesque mollis nisl nisl, sed rutrum metus semper non. Mauris eget iaculis sem.
GETTING STARTED
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.
IMPORTING CONTENT
Prepare your CSV file
Make sure your file is exported as a "CSV" file, also known as a "Comma Separated Values" file. If you encounter any issues you'll want to verify your file is UTF-8 encoded and less than 5mb. If your file is larger than that, try removing columns you may not need. See below for additional information on specific fields.
Tip: You do not have to import every column from your CSV. Only fields set up in your CMS collection in the next step will be imported.
Rich Text Fields
Formatted text content needs to be formatted as HTML. Many tags are supported, such as paragraphs and headers <p>,<h1>, <h2>), formatting (<em>, <i>, <strong>), links (<a>), lists (<ol>, <ul>, <li>) and images (<img>). Images from URLs will be automatically downloaded from their original source and imported into Framer.
Image Fields
Images in your CSV content must be URLs to an image. They will be downloaded and imported into Framer. Relative paths are not supported.
Date Fields
Recommended format is ISO8601 compliant, for example: 2023-12-17T14:42:00. The shorthand value of year-month-day is also supported, for example: 1982-12-01. Long format strings may work, but will depend on your browser, for example: Tue May 12 2020 18:50:21 GMT-0500 (Central Daylight Time). All time data, including time zone information, will be stripped from the date.
Color Fields
A color formatted as CSS hexadecimal RGB code, rgb, hls or hlv expression, or a named color. All variants with an alpha value are also supported. Examples: #00ffee, rgb(0, 153, 255), hsla(204, 100%, 50%, 0.5), blue, darkgreen, rebeccapurple.
Toggle Fields
A boolean value. Y, yes, TRUE, 1 will be interpreted as the toggle being "Yes", all other values will be "No".
Prepare your CMS Collection
Here is a checklist to prepare your CMS collection for importing.
Verify each field/column in your CSV has a matching field in your CMS collection with the same name.
Include a unique field for each item, often named "Slug"
Verify that your data types match (eg. a CMS Date field for a date field in your data)
Tip: Framer uses your Slug field to identify each item, and will use it to update that item with repeat imports.
Import your CSV file
You can find the Import feature by going to the CMS in your project, and clicking "Import" in the toolbar. From there, you can select your CSV file for importing. You may also drag & drop your CSV file directly into the CMS collection interface.
Tip: Importing supports Undo / Redo actions. If you're not happy with the import, you can simply undo the change with CMD+Z on MacOS or CTRL + Z on Windows. Redo will not re-run the import, but instantly apply the changes to the collection.
Updating or Re-Importing
To update your content, you can import into the same collection again. If any item in the new import has a slug field that matches one of the items in your collection, you will be able to update it or skip importing it again.