# Create Multiple Section placeholder in the Visual Editor

**URL:** <https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678>\
**Category:** Technical Questions\
**Tags:** react\
**Created:** [June 4, 2021, 8:50am UTC](https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678 "2021-06-04T08:50:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Armand](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@Armand](https://forum.builder.io/u/Armand)\
**Post date:** [June 4, 2021, 8:50am UTC](https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678/1 "2021-06-04T08:50:09Z")

</div>

## Description

Hello,

I’m trying to integrate [Builder.io](http://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:

```javascript
function LandingPage() '{

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

<BuilderComponent />

<OurSectionB />

<BuilderComponent />

<OurSectionC />
<OurFouter />
</>);
}

```

Then in the [Builder.io: Visual Development Platform](http://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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/849dba0c5bc26003a8a9f11823c2c0b73f1b132c.jpeg)

## More info

App is running in localhost, the preview URL is set to [http://localhost](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.

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [August 17, 2021, 2:32am UTC](https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678/2 "2021-08-17T02:32:16Z")

</div>

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

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

```auto
<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](https://www.builder.io/c/docs/custom-react-components) your OurSectionA and OurSectionB to be used in the [Builder.io](http://Builder.io) editor. that way all sections can be rearranged in one entry

---

<div class="post-metadata">

**Author:** ![Armand](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@Armand](https://forum.builder.io/u/Armand)\
**Post date:** [August 17, 2021, 10:47am UTC](https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678/3 "2021-08-17T10:47:34Z")

</div>

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](http://Buider.IO) Components as children right? I’ll have to give it a try.

---

<div class="post-metadata">

**Author:** ![jarvis](https://avatars.discourse-cdn.com/v4/letter/j/e36b37/32.png) [@jarvis](https://forum.builder.io/u/jarvis)\
**Post date:** [July 20, 2023, 6:15am UTC](https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678/4 "2023-07-20T06:15:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [July 21, 2023, 11:34am UTC](https://forum.builder.io/t/create-multiple-section-placeholder-in-the-visual-editor/678/5 "2023-07-21T11:34:12Z")

</div>

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?](https://forum.builder.io/t/how-come-having-multiple-calls-to-the-api-to-the-same-content-model-or-having-multiple-buildercomponent-elements-of-the-same-model-type-doesnt-render-as-i-expect/2931)