Add blocks & Template library in Inspector

Appifio Creator · Lesson C05 · Intermediate

Beyond editing what’s already on the page, Inspector lets you drag standard blocks (buttons, tables, columns…), insert whole sections from the Template library, or have AI generate a new block from a description - without chatting to the main AI Agent.

Learning goals: Drag standard blocks / insert Template library / AI Generator; and master Make Component - custom components that sync across instances.

Reading time: about 16-20 minutes

Prerequisites: Completed C03-C04 - Element Info + Detailed settings.

Previous / next: ← C04 · → D01 (Files tab)

Main UI labels: Add element · Standard elements · Custom components · Library · AI Generator · Make Component · Component ID · Detach · Component Manager

Turn on Inspector and open the Add element sidebar (subtitle: "Drag and drop onto the page"). Blocks are grouped as: Basic elements, Layout & Structure, Content components, Data & Tables, Forms & Input, Callouts.

Drag the block to a spot where the drop indicator appears on the preview, then release to insert. If you have no custom components yet, that tab shows: "No components yet. Use Element Info to 'Make Component'."

1. Select the element that will be the insertion point (the template is added next to or inside it). If nothing is selected, the system prompts: "Please select an element on the page before adding a template."
2. Click "Library" to open the Template library modal - subtitle: "Choose a ready-made template to add to your page".
3. Use the "Search templates..." field or filter by "All" categories. If nothing matches: "No templates found".
4. Choose a template and click "Add Template" to insert it. Click "Close" to exit if you change your mind.

1. In the Template library modal, switch to "AI Generator" (you can "Back to library" anytime).
2. Type a description in the placeholder "Describe your idea (e.g. Modern Hero Section)...". Dozens of quick suggestions are available (Hero Section, Pricing Table, FAQ Accordion, Product Card, Timeline…) - click one to use it or as inspiration.
3. Click "Generate template". If the field is empty: "Please enter your idea description". While waiting: "AI is designing your template..." / "Generating...".
4. The new template is tagged "AI Generated" and saved to "AI Library" for reuse on other pages.

If you see "WebSocket connection error" or "Unable to connect", check your network and try again - template generation needs a realtime connection to the AI server.

Idea: Turn an HTML block into a reusable custom component - unlike standard blocks (each drop is independent). Each drop from the custom tab creates an instance sharing one Component ID. Edit one instance → Creator applies the change to every place with that ID.

1. On Changes, select a block (header, card, CTA…) in Inspector → open Element Info.
2. COMPONENT SETTINGS → enter Component ID (starts with a letter; letters/numbers/_ only, e.g. main_header) → Make Component. Creator marks the block and registers it in the project.
3. Open Add element → Custom components tab → drag into the iframe (drop indicator).
4. Empty tab shows: No components yet. Use Element Info to "Make Component".
5. Selecting an instance shows the ID (readonly) + hint that changes sync to all other instances - sync runs when you edit content/style via Inspector / Apply changes.
6. Detach - unlink one instance from the shared definition (no more sync). When no instances remain, the definition may leave the tab.
7. Manage Components - rename ID, see instance count, delete definition (page HTML may remain but stops syncing).
8. Publishing still needs Creator Save changes. Tag Type is usually locked once it’s a component.

• Use standard blocks for small edits (one button, one column) - faster than chatting to the AI Agent.
• Use Template library when you need a complete section (Hero, Pricing, FAQ) with polished design already built in.
• Use AI Generator when no template fits - describe style clearly (colors, tone, layout) for better results.
• Save frequently used pieces with Make Component so you don’t drag them from scratch every time.

1. Have you dragged at least one standard block (e.g. a Button) onto the page?
2. Have you opened Template library and inserted a template?
3. Have you used AI Generator to create a block from your own description?
4. Have you Make Component’d something, dropped a second instance, and understood sync / Detach?
5. Do you know how to return to the static library from AI Generator?

Next lesson

D01 - Files tab: upload, soft/hard delete, Media Library

You’ll manage the file tree, upload images to the right place, organize the Media Library, and understand the difference between soft delete (recoverable) and permanent delete.