Blocks in VROOM

Blocks are editable regions within a page. They are defined in a Template (or Include) and allow for easy and quick editing of content on a page. One advantage to using multiple blocks is the designer can control the editable regions on a template and ensure that the integrity of the design is not broken as a page is edited.

Blocks can contain either something as simple as a few lines of text or a full page's worth of content, including formatting such as headings, bold tags, links, and even HTML snippets (e.g., for embedded videos).

Creating Blocks

To create a block you need to have access to the Templates section of the administration portal. From within a Template the administrator simply needs to add {blockX} (where X is the unique number of the block) to the template markup.

In the example below, we have two Bootstrap span columns with a block in each column.

<div class="row-fluid">
    <div class="span6">
    <div class="span6">

Editing Blocks

When you click Edit on a block an editor should appear with buttons at the top to help with formatting. You can then start writing your text within the block and when you are finished click the green tick at the top right of the block and your changes will be saved. You can also edit a block by double clicking on it.

NOTE: When you click the green tick then your changes will be saved for the draft only. For the world to see your changes you will need to click on Publish Page.

Formatting the blocks can be done by either using the helper buttons at the top of the active block, or you can follow the Syntax Guide below to get formatting such as Bold, Headings and Links.

Syntax Guide

When editing blocks it is good to know the 'syntax' for formatting the text. The helper buttons at the top of the block should help you in most cases, but this guide explains the syntax needed while editing and formatting block content.


To make headings you simply place a hash at the beginning of the text.

# Primary Heading
## Secondary Heading
### Tertiary Heading

Bold and Italics

You can get bold and italic text by wrapping the text with either a single or double asterisk.

For bold wrap the text with two asterisks **like this**

For italic wrap the text with one asterisk *like this*


Links can be done in two ways, either by using square brackets, then round brackets, or by just using angle brackets (the simplest way).

If you use angle brackets, emails will be automatically converted to "mailto:" links and will be 'spammer-safe'.

[Click here](/the/path/to-my-page)




You can create un-ordered lists and ordered lists as follows:

- List item one
- List item two
- List item three

1. Ordered list item one
2. Ordered list item two
3. Ordered list item three

Special characters

You might need to display characters like hashes and asterisks which normally would be used for formatting. If so, simply place a backslash before the character to prevent the Markdown from processing it.

\# This is a real hash

\* This is a real asterisk

New lines instead of paragraphs

Pressing return at the end of the line normally doesn't create a line break, but two line breaks creates a paragraph. So, to get a single line break, simply add two spaces to the end of a line of text.

The quick brown fox  
jumped over the lazy hen


Tables can be made by drawing them with hyphens and underscores. Ideally, you should ask your designer or developer to make a table for you in the templates view, but should you need to make a table inside a block you can do the following.

Table Header One   |    Header Two
My cell            | My second cell
My third cell      | My fourth cell