Video
Transcript
Hi everyone! Welcome back to the Intro to Building series. I’m Shawn, and in this lesson, we’re diving into one of Refoundry’s most powerful tools: Reusable Component Blocks. We’ll take the responsive layout we created in the last lesson and transform it into a fully managed, reusable structure using components.
Reusable Component Blocks allow you to save and manage layouts or sections globally across your site. Once you’ve created a component, you can reuse it anywhere. When you update the global element, every instance of that component will update automatically. However, like in design tools such as Figma, you can still customize individual instances without affecting the global element. This makes Reusable Component Blocks perfect for repeated sections where you want both consistency and flexibility.
To start, let’s turn one of the highlights we made in the previous lesson into a reusable component. I’ll take the existing highlight, create a new component block, give it a name, and paste the design into the component. Once it’s published, I’ll return to my page, delete the original highlights, and replace them with instances of the reusable component. From here, I’ll duplicate the component as needed.
Now, every instance of this highlight is managed globally. For example, if I decide to adjust the width of the icon or change the number of columns, I can do that at the global level, and all instances will update automatically.
If I want a particular instance to look different, I can make local adjustments without affecting the global component. For example, I can change the background color for one instance. The setting becomes active, while unchanged settings remain tied to the global defaults. If I later decide to revert the instance back to the global design, I can simply click “reset.”
This approach offers unparalleled control over site management. Instead of duplicating and pasting elements manually, reusable components streamline the process while preserving flexibility.
What’s even more powerful is that components can be nested. I’ll wrap the entire layout, including the highlights, into a larger reusable component and publish it. Now, I can add this master component to any page. This nested structure allows for both global management of the overall layout and localized customizations within each nested component.
For example, if I change the background of the larger component or make global updates to the nested highlight components, those changes will propagate across all instances. This becomes especially useful for managing complex layouts with repeating elements. By combining global consistency with local overrides, you gain a dynamic and efficient way to manage your site design.
Integrating reusable component blocks into your workflow is a game-changer for creating flexible, consistent, and easily managed layouts. Whether you’re managing smaller design elements or complex nested layouts, Reusable Component Blocks offer unmatched control and creativity.
If you have any questions or want to learn more, visit our website or book a demo. Happy building, and see you in the next lesson!