A Linked Component in CodeDesign.ai is essentially a reusable component. Once you create a Linked Component, for example, a header or a footer, you can use it across multiple pages. The main advantage of this feature is that changes made to the Linked Component will be automatically applied to every instance of that component throughout your website, eliminating the need to manually update each page. This helps save time and ensures consistency across your site.
Why Linked Components?
Web development often requires the same components to be used across multiple pages. Maintaining consistency while manually updating each instance of these shared components can be a time-consuming task. That's where CodeDesign.ai's Linked Component feature comes into play.
Typical Usage
Linked Components are usually used for elements that need to be replicated across multiple pages. Here's how you can typically use them:
Headers and Footers: These elements are common across all pages of a website. By converting them into a Linked Component, you only need to update the original component for the changes to be reflected on all pages.
Contact Forms: If your site design calls for the same contact form to be placed on multiple pages, making it a Linked Component will save you time. Any modifications to the form will be updated across all instances.
Remember, the primary aim of using Linked Components is to streamline your web development process and maintain design consistency across your site. It helps you focus on creating an engaging website, rather than getting bogged down by repetitive tasks.
How to Create a Linked Component
Creating a linked component in CodeDesign.ai is a straightforward process, allowing you to streamline your web design tasks effectively. Here's how to create one:
First, find the element on your page that you want to convert into a linked component. Right-click on this element. Alternatively, you can also click on the three-dot icon next to the element.
From the drop-down menu that appears, select "Create Linked Component".
That's it! Your selected element is now a Linked Component. You can now use instances of this Linked Component on different pages across your project, ensuring a consistent design language and saving valuable time.
Editing a Linked Component
Once your linked component is created, you might want to make changes to it at some point. There are two easy ways to do this in CodeDesign.ai:
Select an instance of the Linked Component on any of your pages. On the right sidebar, you'll find an option that says "Edit Main Component". Clicking on this will take you to the page where you can make edits to the actual Linked Component.
Alternatively, you can navigate to the "Pages" drop-down menu. Towards the bottom of this menu, you'll find an option to edit your Linked Components. Selecting this will also allow you to edit the main Linked Component.
Remember, any changes made to the main Linked Component will automatically reflect on all its instances across your project, making website updates a breeze.
Adding a Linked Component to Your Project
Next obvious question is how do you add a linked component instance to a page? It's also pretty straightforward.
Look at the right sidebar and click on the "Presets" tab. Within this tab, you'll notice two further tabs named "Preset" and "Linked".
Inside the "Linked" tab, you'll find the Linked Component you recently created.
To add this component to a page, simply drag and drop it to the intended location on your page.
Unliking a Linked Component Instance
Follow the Steps below to unlink a component
Select the linked component instance that you want to unlink
Go to right sidebar and press Unlink.
That's it.
Deleting a Linked Component
If you feel you no longer need a linked component, you can delete it. Before you can remove it, ensure that all instances of this Linked Component are either deleted or unlinked throughout your project. After taking care of that, follow these steps to delete the Linked Component:
Open the "Pages" drop-down menu.
Scroll through the list until you find the Linked Component you wish to remove.
Click on the three-dot icon next to this component.
From the options that appear, select "Delete".
A confirmation prompt will appear. Confirm your decision to delete the component.
With these steps, the Linked Component will be successfully removed from your project