What are you trying to accomplish
I’m trying to create a hybrid page layout where I need to combine Builder.io content with my own hardcoded components in a specific order.
Ideally, I want a single Builder content entry/model to edit the entire page, but I need to render some Builder content at the top (header section), then my own React components in the middle, and finally more Builder content at the bottom (footer section).
The challenge is finding a way to split the Builder.io content into these distinct regions while maintaining a single content entry for editors to work with, rather than forcing them to edit separate section models for what is conceptually a single page.
Code stack you are integrating Builder with
NextJS
Hey @federicodpc, welcome to the forum!
Great question — yes, you can definitely achieve that hybrid layout using a single Builder content entry by leveraging custom components.
Here’s how you can approach it:
- Register your React components as custom components in Builder. This allows your team to drag and drop them directly within the visual editor.
- In your Builder page, your editors can then structure the layout like this:
- Add a Builder section at the top (e.g., hero or header).
- Drop in your custom React components for the middle section.
- Add another Builder section at the bottom (e.g., footer or call-to-action).
This keeps everything editable under a single content entry, giving editors full control over the entire layout without needing to split it into multiple models.
Hi @sheema ! Thank you for your response.
Ideally my hardcoded components are always fixed somewhere in the page.
Let’s say im building a category pages to display a list of product. I would want content editors to be able to put things like banners at the top and at the bottom of it, but always keeping the product list in the same slot.
This also would give me the option to use server components in the page (the hardcoded ones).