Introduction

The Template Editor in Vlox lets you make and edit page templates. Templates are like ready-made building blocks for your website—you can use them again and again so your site looks neat and consistent.

1. Accessing the Template Editor

• Open your project in Vlox.
• Look for the Templates Panel (usually on the top or side).
• Click “Create New Template” or pick one you want to edit.

2. Adding Components to a Template

• Open the Components Panel on the left.
• Drag anything you want (like text, images, buttons, or containers) onto the template canvas.
• Drop it where you want it to appear.
• Templates can have multiple components, and you can move them around freely.

3. Editing Template Content

• Click on a component to select it.
• Text elements: click to type your words directly.
• Images: change the picture or resize it using the Settings Panel.
• All changes save automatically.

4. Styling Template Components

Styling is how your website looks. Here’s what you can do in the Styles Panel:

Colors

• You can change background color (the space behind an element) or text color.
• Example: make a button blue so it stands out, or make text red for emphasis.
• Tip: Stick to a few colors so your site looks clean.

Typography

• Typography is how your text looks. You can change:
  • Font family (the style of letters, like Arial or Comic Sans)
  • Font size (how big or small the text is)
  • Font weight (how thick or thin the letters are)
• Think of it like picking your favorite pen style and size for writing.

Spacing

• Spacing is the “breathing room” around elements. You can adjust:
  • Padding → space inside a box (like space between text and the button edge)
  • Margin → space outside a box (like space between buttons)
• Proper spacing keeps your page from feeling crowded.

Layout

• Layout is how elements are arranged. You can adjust:
  • Width and height (how big things are)
  • Alignment (left, center, or right)
• Example: center your heading so it looks neat on the page.

Effects

• Effects make elements more fun or noticeable. You can add:
  • Shadow → makes something look like it’s floating
  • Opacity → makes something more transparent
  • Border radius → makes corners rounded
• Use effects carefully so your site doesn’t look messy.

5. Saving and Using Templates

• Click Save Template when done.
• To use it on a page:
  1. Open the Templates Panel.
  2. Drag your template onto the page.
• Templates can be reused across multiple pages so your website stays consistent.

6. Best Practices

1. Give templates clear names so you can find them easily.
2. Keep templates modular (like header, footer, hero section).
3. Test templates on different devices (phone, tablet, desktop).
4. Use the Components & Layers Panel to manage many elements.