CMS+ Your Design Components

These methods apply exclusively to toggle-driven CMS Plus components, as they must be placed within a component with variants to trigger their functionality. Find out which components are toggle-driven.

Recommendation

Complete your design component with its styling, variants, and interactions before integrating CMS Plus. This approach ensures your component functions as intended and promotes a more efficient workflow.

Direct Insert Integration

This method provides an easy way to integrate CMS Plus into a custom design component. It's a quick and straightforward approach for one-time use cases, where the custom design component doesn’t need to be reused.

For example, we can directly insert any Filter+ component into your custom design component, then setup as normal.

Wrapped Integration

Adopt a more modular approach by creating a new component and wrapping your design component with a toggle-driven CMS Plus component. This method is necessary if you plan to reuse your design component in other areas of your project.

From here, you'd configure each nested component.

Important

Since this method involves creating a new component, make sure to include your interactions as part of the setup.

Positioning Invisible Components

Integrating CMS Plus may affect your layout because Framer detects even invisible components. If the parent container frame has a layout, Framer might allocate space for the hidden components. To prevent this, set the component's position to absolute. You can also anchor it to a corner for better organization.