How do I create a component in Webflow?

Turn a repeating block into a component

A component is a block you can reuse. A nav, a footer, or a card with the same layout on many pages is a good fit. The main component holds the structure and styles. Each place you use it is an instance. Change the main component and every instance can follow. Webflow also has code components, which are a separate kind. This is the layout component you build from elements on the canvas.

Select the footer, or whatever block should be shared. Open the Components panel, or press Command + Shift + A on Mac or Control + Shift + A on Windows. The same new-component control is on the Style panel and the Element settings panel. Click the new component icon, choose Convert selection, and name it Footer. A group and a short description are optional. If Webflow suggests properties, open that list, rename any you want to keep, and deselect the rest. Click Create.

You can start from nothing instead. In the Components panel, click the new component icon, choose Create blank, name it, and click Create. The component canvas opens with one empty div, which is the wrapper. Build inside that div, then leave with the back arrow beside the component name. You can change that empty div to another element from Element settings, or by right-clicking and choosing Convert to.

Before a footer that already sits on every page becomes a component, save a backup if the site is large. Converting the block does not by itself publish the site. It does change how later edits travel.

Place the same component on other pages

Open the Components panel, hover the component to see a preview, and drag it onto the canvas or into the Navigator. A selected instance is outlined in green. The panel also shows how many times the component is used.

Copy and paste works for an instance. Give a repeated instance its own name when one page has several, such as Footer and Footer legal. Double-click the name in the Navigator, type the new name, and press Enter. That name is only a label. It does not change the main component or the other instances. Right-click and choose Reset name to restore the original label.

Example: the contact page and the homepage should share one footer. Create Footer from the homepage. Drag Footer onto the contact page. Both pages now point at the same main component.

Change every page from the main component

Editing the main component is what updates every instance. From any instance, double-click it on the canvas or in the Navigator. You can also right-click and choose Edit component, or use the edit icon on the element label or at the top of the right panel. To open it on the component canvas, hover the name in the Components panel and click the open component icon, or right-click an instance and choose Open component.

Change the structure there when every page should match. A new phone number in the footer is the usual case. Enter the main component, replace the number, then leave. Use the back arrow beside the name. On the page, you can also click outside the component or press Escape. Publish, then check the homepage and one inner page. Both should show the new number.

Component properties are how one instance keeps its own text or image while the layout stays linked. You define those on the main component. They are optional. A footer that should be identical everywhere does not need them.

Unlink a page that must keep its own footer

Unlink when one page should stop following the main component. Right-click any element in that instance and choose Unlink instance. Properties become ordinary settings, variants become styles, and slots become elements. Later edits to the main component leave that page alone. If you still want the original instance to stay linked, duplicate the instance and unlink the duplicate.

You cannot unlink a component instance that lives inside rich text.

To delete the component itself, first remove or unlink every instance. Open the Components panel, hover the name, open the more options control, choose Edit settings, then Delete and confirm.

A shared nav or footer is easier to keep current when one person already knows which component is the source. Webflower's membership is one plan for an existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour, and a written estimate is approved before that extra work starts. Unused hours expire at the end of each monthly billing period and do not carry over. Communication is written only. There are no calls or meetings.