Home App Docs Blog Github

How to add multiple sections within one window?

Do I understand that right:
When I wanna place a second section on my page, I do have to change to the view at Builder.io/content to the second one? I cannot edit both sections at once?
Can I drop multiple blocks for multiple sections on the same edit page?

Eg: I have an “announcment-bar” section and a “hero-banner” section on one page (frontpage) I wanna drag-and-drop onto both sections without leaving the editor.

At the moment I have to press “Save” and then “<–” then I go to “Content” select the “Model” and have to open the “Hero Banner” entry in the list.
Thank you in advance

Screenshots or video link

Builder content link


Builder public api key

What are you trying to accomplish

  • Adding multiple CustomDropzones*

Code stack you are integrating Builder with
e.g. NextJS

Hi @jezekjancom, thanks for the detailed question!

Yes, the workflow you describe is the correct way to edit different sections (dropzones). When you are in the Builder editor you can only edit one model entry at a time. This workflow allows you to target different pieces of your website independently of each other. For example, the announcement bar section could have a few different versions, and depending on the targeting you set and the visitor to your site you can show a different version independently of what the hero banner might have. It also allows you to schedule entries independently, e.g. have a sale announcement in your announcement bar for only 24 hours starting on a certain date.

If you would like to edit multiple parts of the page within the Builder editor at the same time, I would suggest creating all that content in one section so that you can control it via the one content entry. In the example you gave that would mean building the announcement bar content inside of the hero banner section, or vice versa. Or creating the whole page within Builder and using custom components within Builder for the pieces you want to be controlled by code.