Creating templates for a section

You can easily create a template for section in Built Studio, or you can do so in the code of the exported theme/plugin. The steps for creating a new section template are:

Create the template configuration

You can do this by creating a new template in Built Studio, or by manually creating a new object in public/data/templates.json like this:

public/data/templates.json

{
  "name": "cover1",
  "title": "Cover 1",
  "category": "covers",
  "namespace": "richjava_corporate-basic",
  "description": "Full viewport cover with text content and a supporting image."
}

Add the template to a section

Add the template name to the templates array and, optionally, as the default template for the section.

public/data/sections.json

{
  "sections": [{
    "name": "mainLanding",
    "title": "Main Landing",
    "description": "The home page landing area, containing the main call-to-action.",
    "data": {
      "preheading": { "text": "Preheading", "type": "plain" },
      "heading": "Lorem ipsum dolor sit amet dev",
      "blurb": "Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "image": {
        "url": "https://res.cloudinary.com/dn7feeelf/image/upload/v1725878797/image_ldyekv.png",
        "path": "/images/image-square.png",
        "width": 768,
        "height": 768,
        "type": "image",
        "attributeName": "image"
      },
      "buttonLinks": [
        { "url": "/services", "label": "Button", "type": "primary" },
        { "url": "/contact", "label": "Button", "type": "secondary" }
      ]
    },
    "templates": ["cover1", "cover2", "cover3"],
    "type": "body",
    "defaultTemplate": { "name": "cover1" },
    "collections": {}
  }]
}

Add images of template UI

Take a screenshot of your template and store the image in a publicly accessible location. Then, add the image url to the template object in /public/data/templates.json:

public/data/templates.json

{
  "templates": [{
      "name": "cover1",
      "title": "Cover 1",
      "category": "covers",
      "namespace": "richjava_corporate-basic",
      "description": "Full viewport cover with text content and a supporting image.",
      "imageUrl": "https://res.cloudinary.com/dn7feeelf/image/upload/v1725878863/cover1_mzktvz.png"
    }
  ]
}

Define the Github repository URL

Adding this URL will allow the end user to learn more about the template when viewing it in Built Studio.

public/data/templates.json

{
  "templates": [{
      "name": "cover1",
      "title": "Cover 1",
      "category": "covers",
      "namespace": "richjava_corporate-basic",
      "description": "Full viewport cover with text content and a supporting image.",
      "imageUrl": "https://res.cloudinary.com/dn7feeelf/image/upload/v1725878863/cover1_mzktvz.png",
      "repoUrl": "https://github.com/richjava/corporate/blob/main/components/templates/covers/cover1.tsx"
    }
  ]
}

Creating templates for a section

Creating templates for a section

Create the template configuration

Add the template to a section

Add images of template UI

Define the Github repository URL

On this page