Creating a Hero Section Components

Technical Questions
1

The question I have created a Hero Components by using their prop template with the path name when there are no props being shown in the builder:

  • Can they add into the same BuilderComponets?

Screenshot 2023-11-22 at 6.21.20 AM (2)
Screenshot 2023-11-22 at 6.21.20 AM (2)1360×768 82.3 KB

Builder.register("insertMenu", {
  name: "Our Hero Components",
  items: [
    {
      name: "Hero",
      component: {
        template: HeroComponent,
        props: [
          {
            name: "image",
            type: "file",
            label: "Hero Image",
          },
          {
            name: "title",
            type: "text",
            label: "Hero Title",
          },
          {
            name: "description",
            type: "text",
            label: "Hero Description",
          },
        ],
      },
    },
    {
      name: "Double Columns",
      component: {
        template: DoubleColumnsComponent,
        props: [
          {
            name: "image1",
            type: "file",
            label: "Image 1",
          },
          {
            name: "text1",
            type: "text",
            label: "Text 1",
          },
          {
            name: "image2",
            type: "file",
            label: "Image 2",
          },
          {
            name: "text2",
            type: "text",
            label: "Text 2",
          },
        ],
      },
    },
    {
      name: "Triple Columns",
      component: {
        template: TripleColumnsComponent,
        props: [
          {
            name: "image1",
            type: "file",
            label: "Image 1",
          },
          {
            name: "text1",
            type: "text",
            label: "Text 1",
          },
          {
            name: "image2",
            type: "file",
            label: "Image 2",
          },
          {
            name: "text2",
            type: "text",
            label: "Text 2",
          },
          {
            name: "image3",
            type: "file",
            label: "Image 3",
          },
          {
            name: "text3",
            type: "text",
            label: "Text 3",
          },
        ],
      },
    },
    {
      name: "Dynamic Columns",
      component: {
        template: DynamicColumnsComponent,
        props: [
          {
            name: "columns",
            type: "list",
            label: "Columns",
            itemProps: [
              {
                name: "image",
                type: "file",
                label: "Image",
              },
              {
                name: "text",
                type: "text",
                label: "Text",
              },
            ],
          },
        ],
      },
    },
  ],
});
2

Hello @xbrandonpowell,

To register custom components using the insert menu, you can refer to our GitHub repository. The relevant code can be found at the following link: GitHub Code

This code snippet provides an example of how to configure the insertion of custom components within your Builder.io setup.

1 Like
3 
Builder.register("insertMenu", {
  name: "HeroComponents",
  items: [
    { name: "Hero" },
    { name: "Double Columns" },
    { name: "Triple Columns" },
    { name: "Dynamic Columns" },
  ],
});

I observe that we need to begin in this manner. However, if we wish to incorporate our props, do we need to include them using our builder in this manner?

Builder.register("insertMenu", {
  name: "HeroComponents",
    items: [
      { 
        name: "Hero",
        type: "list",
        label: "Columns",
        defaultValue: true,
        itemProps: [
          {
            name: "Banner",
            type: "string",
            label: "Text",
          },
        ],
      },
      
      { name: "Double Columns",
        props: [
          {
            name: "string",
            type: "string",
            label: "Text",
          },
        ]
      },
      { name: "Triple Columns" },
      { name: "Dynamic Columns" },
    ],
});

Just check to see if did this correctly has to follow the process but test how see if see this might work if get what I need heros to be on the website.

4

Hello @xbrandonpowell,

That seems correct. This should work as expected.

1 Like