🧩 Section Templates

To help users start building a page, ContentBox includes a section template library. Users can open it by clicking the (+) button in the sidebar.

Three default template sets are available:

• Simple Start – basic, clean designs
• Quick Start – ready-to-use examples
• Animated Sections – sections with animations

Each set is located in its own folder:

assets/templates-simple/
assets/templates-quick/
assets/templates-animated/

Each folder contains:

• templates.js – JSON file with predefined section templates
• images/ – assets used in the templates
• preview/ – thumbnail images for preview

🔧 Configuration

By default, ContentBox loads these templates automatically using the built-in configuration:

const builder = new ContentBox({
    /* other options */
    templates: [
        {   
            url: 'assets/templates-simple/templates.js',
            path: 'assets/templates-simple/', 
            pathReplace: [],
            numbering: true,
            showNumberOnHover: true,
        },
        {   
            url: 'assets/templates-quick/templates.js',
            path: 'assets/templates-quick/', 
            pathReplace: [],
            numbering: true,
            showNumberOnHover: true,
        },
        {   
            url: 'assets/templates-animated/templates.js',
            path: 'assets/templates-animated/', 
            pathReplace: [],
            numbering: true,
            showNumberOnHover: true,
        },
    ],
});

You can customize this to load templates from different locations or apply path replacements:

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    templates: [
        {   
            url: 'https://path-to/assets/templates-simple/templates.js',   
            path: 'https://path-to/assets/templates-simple/',    
            pathReplace: [],
        },
        // ... other template sets
    ],
});

Use the pathReplace array if you need to rewrite parts of the paths defined in the template files.

📄 Template File

Let’s look at an example template file from the Simple Start set: assets/templates-simple/templates.js

var data_templates = {
    name: 'Simple Start',
    categories: [
        { id: 1, name: 'Basic' }, 
        { id: 2, name: 'Slider' }, 
        { id: 3, name: 'Video' }, 
        { id: 4, name: 'Custom' }
    ],
    designs: [
        {
            'thumbnail': 'preview/simple-01.png',
            'category': '1',
            'contentCss': 'type-poppins.css',
            'contentClass': 'type-poppins',
            'html': `
                <div class="is-section is-box is-section-100 type-poppins">
                    ...
                </div>`
        }
    ]
};

Each section template must include the following properties:

• thumbnail – Relative path to the preview image (e.g. preview/simple-01.png)
• category – The category ID this design belongs to
• contentCss – CSS file for typography (choose from assets/styles/, must start with type-)
• contentClass – CSS class name (use the filename without extension)
• html – HTML markup of the section

💡 Inside the html string, you can use the placeholder [%IMAGE_PATH%] which will be replaced with the correct asset path when loaded:

<img src="[%IMAGE_PATH%]images/photo.jpg">
<!-- becomes -->
<img src="assets/templates-simple/images/photo.jpg">

🔧 Featuring Specific Categories

The featuredCategories option is used to feature selected categories when the panel is opened.

const builder = new ContentBox({
		/* other options */
    featuredCategories: [
        { id: 1, designId: 1, name: 'Basic' },
        { id: 1, designId: 2, name: 'Header' },
        { id: 2, designId: 1, name: 'Slider' },
        { id: 2, designId: 2, name: 'Article' },
        { id: 3, designId: 2, name: 'Photos' }
    ],
    defaultCategory: {
        id: 1,
        designId: 1
    }
});

• designId: Refers to the order in which the template sets are loaded (1 = Simple Start, 2 = Quick Start)
• id: The category ID inside that set
• defaultCategory: Selects the initial category shown when the panel opens