Create Multiple Section placeholder in the Visual Editor

Technical Questions
1

Description

Hello,

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.

Screenshots

simplescreenrecorder-2021-06-04_11.27.45
simplescreenrecorder-2021-06-04_11.27.452550×1250 199 KB

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.

2

Hi @Armand - apologies for the delay here, this post seemed to slip through our radar!

In order to have two different Builder.io sections on the same page, they each need a different model name. So try making two section models, e.g.

<BuilderComponent model="my-top-section" />
...
<BuilderComponent model="my-bottom-section" />

Note: you will need to make two separate content entries, one for each section

Alternatively, you can also allow the full page to be editable and register your OurSectionA and OurSectionB to be used in the Builder.io editor. that way all sections can be rearranged in one entry

3

Hey Steve, thanks for the reply!

I eventually figured this out that I would need to different section. I somewhat didn’t name them the best way possible but that could be changed later.

Thanks for the tip about making the full page editable, I remember from the doc that we can set placeholders in our components that can take Buider.IO Components as children right? I’ll have to give it a try.

4

Hi @steve, can we set multiple different BuilderComponents with one model on the same page now?

5

Hi @jarvis , please checkout How come having multiple calls to the API to the same content model, or having multiple <BuilderComponent> elements of the same model type, doesn't render as I expect?