Framer Update, CMS

CMS Update: Blockquotes, Heading Links, Image Styles, Field Dividers and more

CMS Update: Blockquotes, Heading Links, Image Styles, Field Dividers and more

CMS Update: Blockquotes, Heading Links, Image Styles, Field Dividers and more

·

7:16

·

9.3K views

·

Jul 11, 2024

About this lesson

This update brings several enhancements and bug fixes to the CMS. Firstly, it introduces support for blockquotes in rich text fields, allowing full flexibility in styling them within the canvas. Additionally, automatic anchor tags for rich text headings have been added, making it effortless to share URLs for specific sections of your content. A new image style property enables you to style images when you drag & drop them into rich text fields. In the CMS view, you can now add field dividers to better organize CMS detail pages, with optional titles and descriptions for each divider. The max length option has been updated to display a character count as you type, helping you stay within the required length. Lastly, the sorting of items has been improved making it a persistent preference. See the full changelog: https://framer.com/updates/cms-blockquotes-and-headings

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=0s - Blockquotes

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=117s - Image Styles

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=167s - Heading Links

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=236s - Repeated Items

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=298s - Field Dividers

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=356s - Characters Limit

https://www.youtube.com/watch?v=GM5YIOAVlAw&t=378s - Items Sorting

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00hi everyone it's AO today I'm going to 0:02show you a few CMS updates starting with 0:05block quotes here I have a CMS page for 0:09one of the fram.com case studies 0:12previously styled block quotes like this 0:14one could only be displayed outside of 0:17the rich text content starting from 0:20today when you are in the rich text 0:22field of the CMS you can select a piece 0:25of text and then click the new block 0:28quote button in the toolbx 0:31this will create a block 0:33quote and as soon as you go to the 0:36canvas you'll see that some default 0:38style will be applied to 0:40it obviously I can change anything about 0:43this style by going to the block code 0:46property and clicking on edit and then I 0:50see a bunch of properties in the pop out 0:53I'm starting with changing the font 0:55style and selecting a font that matches 0:58the frameware 1:01brand and then go back to change the 1:05color set to full 1:08white and then going to increase the 1:11size to something like 1:1324 and adjust also a bit the line height 1:17to 1:191.7 I can even go as far as editing the 1:22line 1:24style and I can change the color 1:27obviously but also the width I'm 1:29exaggerating in here a bit to show you 1:32the 1:32radius and I'm going back to the default 1:35because I liked it but this is 1:37essentially how you can fully customize 1:39a block quote to your liking in 1:43framer of course now that the global 1:46style for the block quote is set when I 1:48create a new one from the CMS that style 1:51will be applied as well so that all the 1:53block quotes are consistently 1:56styled now let me show you another 1:59Improvement we've made that has to do 2:00with images in the CMS and specifically 2:03images that are tracked and dropped into 2:06the re text field so up until today when 2:09you track and drop an image you would 2:11have no control on how it looked like in 2:14the 2:14canvas and now if you go back to your 2:17design you see that a new image property 2:20is added if you click on it and addit 2:24you can change properties like the 2:26radius that I'm going to increment to 2:27something like 20 2:31and also twick the border to a white 2:34color and set that to 2:3810% and just like for Block quotes these 2:41properties will be applied to any image 2:43that I'm going to drop in the rich text 2:44content from now on also good to know is 2:48that when you select a Content layer 2:50you'll now see all the properties that 2:52are currently in use but you can add new 2:54ones anytime under text and then click 2:57in the plus button where you can find 3:00things like headings or code or anchors 3:04which is something new we just 3:06added and this property will 3:08automatically assign anchor tags to each 3:11heading of the content and we'll see how 3:14useful that is in a minute first let me 3:17change the styling to not be blue but 3:21white and then I'll also tweak the 3:25offset y property to 120 3:29now when you publish the page and uh you 3:32head to the CMS content you can click on 3:36any of the headings and in the URL bar 3:40you'll see that an anchor tag is 3:42assigned which means if you copy paste 3:44the URL anywhere else and hit enter it 3:47will go directly to that specific 3:49section this is especially useful for 3:52documentation Pages where you want to 3:53link to something 3:55specific now I want to show you another 3:58feature that brings more control to 4:00repeated content like this grid of case 4:04studies at the end of my 4:06article now with in the repeater I have 4:08a card for all case studies that is last 4:13and I would like to move it as first but 4:16if I do that today you'll see that that 4:20specific card gets repeated for all the 4:23case studies I have in the CMS and 4:26that's because the first item in the 4:28collection layer is the one being 4:31repeated but today I can select another 4:34layer that I want to be repeated instead 4:37and choose set as collection item so 4:41this unlocks new possibilities in which 4:44I have a different layer as first and 4:48then other ones that are repeated 4:52afterwards now let's head to the CMS to 4:55show you a couple more 4:58additions when you View and item Fields 5:01might feel a little bit too close to 5:03each other and hard to scan in certain 5:05cases so we made it easier to organize 5:08those and let me show you how in the 5:11edit Fields model I'm going to hit the 5:13plus and then select 5:15divider this will drop a divider that 5:18you can drag and drop wherever you want 5:20in the 5:21list we can add an optional title and an 5:25optional 5:27description let me add a couple more to 5:29show how better the item view will feel 5:33afterwards let me rearrange this one 5:35over here and also add a SEO section 5:41over 5:44here now when I click back on an item 5:47you really see how these dividers help 5:50in grouping all the fields and making 5:52the page feel way more 5:55organized now an improvement some of you 5:58asked for which is when you set a max 6:02length on a certain field We Now display 6:05an indicator in the item view which 6:07updates in real time as you type in the 6:10field this makes it easier to know when 6:13you're approaching the limit and adjust 6:15as a 6:17consequence lastly I want to show you 6:19how we improved sorting if you click on 6:22a field is now a little bit clearer how 6:24you can sort it and if I select 6:26Something Like A to Z the sort is 6:30applied but most importantly is 6:33persisted let me show you what this 6:35means if I add a new item give it a 6:40title like vtina and fill in the other 6:44fields when I hit save the item will be 6:47now inserted in the correct position 6:49respecting the order previously set and 6:53I can change this at any moment by drag 6:55and dropping an item and framer will 6:58simply ask me if if I'm sure I want to 7:01discard the automatic sorting and sort 7:05manually we hope you enjoyed this round 7:08of updates and there are many more to 7:10come so stay tuned and happy building

TeachesCMS Fields Text Styles

Also coversCMS Pages / Dynamic Content Collections Grids Links Section & Anchor Links Typography

Watch on YouTube ↗

‹ Framer Update: Text Effects

Creating Custom Form Submit Buttons in Framer ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

Framer Update: CMS 3.0

Framer Update: CMS 3.0

Framer Update14K views · 1 month ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Framer Update: Auto Translate

Framer Update: Auto Translate

Framer Update4K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Framer Update13K views · 3 months ago

Ship websites with enterprise needs, at startup speeds

Ship websites with enterprise needs, at startup speeds

Announcement8.3M views · 3 months ago

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