Hey,
I would like to have to sections for content on my page like this (ignore the green div):
I was able to create this with a custom component:
import { BuilderBlocks } from '@builder.io/react'
import React from 'react'
export function BlogPage(props: any) {
return (
<>
<div tw="flex w-full bg-red-50 p-4 space-x-4">
<div tw="flex-1">
<BuilderBlocks
parentElementId={props.builderBlock.id}
dataPath={`component.options.left`}
blocks={props.left}
/>
</div>
<div tw="flex-1">
<BuilderBlocks
parentElementId={props.builderBlock.id}
dataPath={`component.options.right`}
blocks={props.right}
/>
<div tw="h-12 bg-green-500"></div>
</div>
</div>
</>
)
}
Builder.registerComponent(BlogPage, {
name: 'BlogPage',
inputs: [
{
name: 'left',
type: 'uiBlocks',
defaultValue: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: '<p>Enter some text...</p>',
},
},
},
],
},
{
name: 'right',
type: 'uiBlocks',
defaultValue: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: '<p>Enter some text...</p>',
},
},
},
],
},
],
})
That works pretty well 
Now I want the same behavior for a page. So I added a new field to my page model that is of type Blocks:
But I’m struggling with the react implementation. I thought about using a BuilderBlocks Component but what should I use for parentElementId, dataPath and blocks? Usually the BuilderBlocks component is also invoked by the BuilderComponent but this is not possible in this scenario.
I tried the following code:
// Just an example how I roughly get the page data. Just so you know what `page` is.
const page = await builder
.get('sandbox', {
url: location.pathname,
})
.promise()
[...]
<BuilderBlocks
parentElementId={page?.id}
dataPath={`this.blocks`}
blocks={page?.data.sidebarContent}
/>
<div>Space between BuilderBlocks and Content</div>
<BuilderComponent model="sandbox" content={page} />
This looks pretty promising in the visual builder:
But if I try to add a Component by clicking on the upper + Add Block Button, the Component will be added to the content of the page:
But what seems to work is adding a Slot Component via the right sidebar:
Which is shown in the visual builder:
So I would guess the problem is setting the content in the visual builder. I would guess that is the dataPath part for, but I don’t know how to set it correctly.
Thanks for your help in advance
Best,
Sean