Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Using Builder Blocks in Custom Components

When you want your custom component to accept other blocks, configure your component with children. The following video demonstrates a custom tabs component that accepts Builder blocks as content. Each tab receives a unique block that the users drags and drops in.

This document covers adding children to your custom components and using them in the Visual Editor:

Adding children to custom components. This is the most common use case. You create a place in your custom component where teammates can drag and drop other blocks.

Using your component with children in the Visual Editor. Learn how to use your registered your component in the Visual Editor with a companion video.

Adding advanced child sub-components. Use this technique for granular control over more specific use cases, that require manually configuring your component.

Prerequisites

To get the most our of this tutorial, you should have the following:

Adding children to custom components

Using your component with children in Builder's Visual Editor

Now your component should show up in the Visual Editor with no further configuration in the code.

The following video shows the Hero block in the Custom Components section of the Insert tab. When the Hero block is on the page in the Visual Editor, you can drag and drop more blocks and drop them into the Hero block, along with the other children defined in code.

To use a registered component with children, do the following:

  1. If you're still developing your component, change the Preview URL to localhost with the port you're using for your local app and the page name. In this example, the URL is http://localhost:3000/cc-children.
  2. Drag and drop your custom component into the work area.
  3. Drag other blocks onto your custom component.

In the following video, after the user drops a Columns block into the custom component, they open the Layers tab to show the Columns block nested within the Hero block.

Adding advanced child sub-components

Using your custom component in the Visual Editor

To use a custom component with multiple sets of children in the Visual Editor, take the following steps:

  1. In the Insert tab, expand the Custom Components section.
  2. Drag and drop your component onto the work area.
  3. With your component selected, click the Edit button and add sets of children if needed.
  4. Drag other blocks, for example Text or Image blocks, into the Add Block region of your component.

Next steps

To customize your components even further, you can leverage Builder's Input Types.

For more examples of custom components with multiple sets of children, check out:


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?