Tile Section
The Tile Section in the Website Builder is where you manage tiles - the reusable content containers that hold your elements. Understanding the relationship between Tile Templates and Tile Instances is key to efficient application development.
Overview
The Tile Section enables you to:
- Create tile templates as reusable design masters
- Place tile instances on pages
- Manage tile content including elements and layouts
- Reuse designs across multiple pages efficiently
Understanding Tiles
What is a Tile?
A tile is a container that holds elements (text, inputs, buttons, images, etc.). Tiles organize your page content into manageable, reusable sections.
Templates vs. Instances
┌─────────────────────────────────────────────────────────────┐
│ TILE RELATIONSHIP │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ │
│ │ TILE TEMPLATE │ ← Master/Source design │
│ │ (Master) │ │
│ │ │ │
│ │ • Define once │ │
│ │ • Reuse many │ │
│ └────────┬─────────┘ │
│ │ │
│ │ Creates │
│ ▼ │
│ ┌────────┬────────┬────────┐ │
│ │Instance│Instance│Instance│ ← Copies on pages │
│ │ A │ B │ C │ │
│ │ │ │ │ │
│ │ Page 1 │ Page 1 │ Page 2 │ │
│ └────────┴────────┴────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘Tile Section Layout
The Tile Section in the left panel shows:
┌─────────────────────────────────────────────────────────────┐
│ TILE SECTION │
├─────────────────────────────────────────────────────────────┤
│ │
│ [+ New Tile Template] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📋 Header Card │ │
│ │ Type: Template │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📋 Survey Form │ │
│ │ Type: Template │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📋 Contact Card │ │
│ │ Type: Template │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘Key Concepts
Tile Template
The master version of a tile:
| Aspect | Description |
|---|---|
| Purpose | Define reusable tile designs |
| Location | Stored in Tile Section library |
| Editing | Changes can propagate to instances |
| Elements | Contains elements in their default state |
Tile Instance
A copy of a template placed on a page:
| Aspect | Description |
|---|---|
| Purpose | Display tile content on a page |
| Location | Placed on specific pages |
| Editing | Can override template settings |
| Data | Can have instance-specific data |
Working with Tiles
Creating a Tile Template
- Click "+ New Tile Template" in the Tile Section
- Give the template a descriptive name
- Add elements to design the tile
- Save the template
Placing a Tile Instance
- Select a page where you want the tile
- Drag a template from the Tile Section
- Drop it onto the page canvas
- An instance is created
Editing Tiles
| Want to... | Do this... |
|---|---|
| Change all instances | Edit the template |
| Change one instance | Edit that specific instance |
| Add an element everywhere | Add to template |
| Add element to one tile | Add to specific instance |
Tile Properties
Template Properties
| Property | Description |
|---|---|
| Name | Template display name |
| Description | Optional description |
| Default Size | Initial dimensions |
| Background | Default background style |
| Padding | Internal spacing |
Instance Properties
| Property | Description |
|---|---|
| Position | Location on the page |
| Size | Instance-specific dimensions |
| Overrides | Changes from template defaults |
| Data Bindings | Instance-specific data connections |
Sub-sections
Tile Templates
Learn how to create and manage tile templates - the master designs that can be reused.
Tile Instances
Understand how to work with tile instances - the copies placed on your pages.
Common Workflows
Creating a Reusable Form
- Create a new tile template
- Add form elements (inputs, buttons)
- Style the template
- Drag instances to any page that needs the form
Building a Header/Footer
- Create header tile template
- Add navigation elements
- Place instance on each page
- Update template to change all pages
Creating a Card Layout
- Design a card tile template
- Add image, title, description elements
- Place multiple instances on a page
- Bind each instance to different data
Best Practices
Plan your tiles - Identify reusable patterns before building
Name clearly - Use descriptive template names
Use templates for repeated content - Header, footer, cards
Keep templates focused - One purpose per template
Consider data binding - Design for dynamic content
Document your tiles - Keep notes on tile purposes
Troubleshooting
Instance Not Reflecting Template Changes
- Verify you edited the template, not the instance
- Check if instance has overrides
- Refresh the builder
Cannot Add Element to Tile
- Ensure the tile is selected (not an element inside it)
- Check tile isn't locked
- Verify you're in edit mode
Tile Not Appearing on Page
- Confirm the instance was placed successfully
- Check page-level conditions
- Verify tile visibility settings
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Website Builder - https://help.acenji.com/#/./create-web-application/website-builder/index Page Section - https://help.acenji.com/#/./create-web-application/website-builder/page-section/index Elements - https://help.acenji.com/#/./create-web-application/elements/index