Back to updates
Enhancement
Designer

Create components in CMS contexts

Elements connected to a CMS Collection can now be converted to components.

Create components in CMS contexts

<p id="">We are focused on continuously improving how our customers build with scalable design systems on Webflow, and we’re happy to share <a href="<https://webflow.com/updates/component-style-variants-now-available>" id="">yet another expansion</a> to how teams can leverage components.</p><p id="">You can now create components from elements in a CMS context, like a Collection List or Collection Page. Any element settings connected to a CMS field — like text, images, and links — are automatically converted to props, making your design instantly reusable without any additional setup.</p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1280px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1280px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/675726ac6c168debfefaee4c6757266349869719ba27dc98SlashUpdates_1280x720%2520(2).jpeg>" loading="lazy" alt="__wf_reserved_inherit" width="auto" height="auto" id=""></div></figure><p id="">To get started, select an element and click the “create component” icon at the top of the right panel or the Components panel. <a href="<https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview>" id="">Learn more about managing components in the Help Center</a>.</p>


Launched on
December 9, 2024
Category
Designer

Related updates

Custom tooltips for component props

Custom tooltips for component props

Learn more
Shared Libraries available on all paid Workspace plans

Shared Libraries available on all paid Workspace plans

Learn more
Introducing Webflow Interactions, powered by GSAP

Introducing Webflow Interactions, powered by GSAP

Learn more
Rename elements and component instances

Rename elements and component instances

Learn more
Advanced variables with functions

Advanced variables with functions

Learn more
See recently modified classes in the style selector

See recently modified classes in the style selector

Learn more