Home App Docs Blog Github

Create Multiple Section placeholder in the Visual Editor



I’m trying to integrate Builder.io in an already existing website. We want the content manager to be able to customize the landing page by dragging and dropping elements in predefined areas of our page.

We are using React. At the moment we have a page that can be simplified to:

function LandingPage() '{

return (<>
 <OurNavBar />
<OurSectionA />

<BuilderComponent />

<OurSectionB />

<BuilderComponent />

<OurSectionC />
<OurFouter />

Then in the Builder.io/content/ we are able to see the sections blocks and we can add elements into them.

Current Result

At the moment we have 2 sections blocks but when we drag any component in any of them, the content is automatically duplicated to the second section.

Expected Result

What we expect are that the two sections are independent so we can choose what to render in each of them.


More info

App is running in localhost, the preview URL is set to http://localhost:
Tested in Firefox 89

I tried passing the following props to the :

  • model=“page”
  • model={mySectionName}
  • options={{query: {“data.feature”: “top-feature”}}
  • options={{key: “some-key”}
  • name={“some-name”}

Depending on the model prop value, I could either see the block or not at all. The key option made the section disappear from the editor. The rest didn’t have any effect (if I recall properly)

Thank you for your help.