Creating a template

The Mizmoz editor allows you to quickly and easily create great looking, responsive templates. To create a new template, go to the Template section and click the Create Template button. Enter the name of the template you want to create and hit Create.

The Basics

Mizmoz provides an easy to use drag and drop editor. There are just two simple concepts to understand: layouts and components.


Layouts allow you to split your content in to 1, 2 or 3 columns of varying ratios.

To use a layout, click on one of the layout icons and drag on to the main layout.

Layout Settings

When you move your mouse over a layout in the editor pane 3 icons will appear to the side of it. The first icon allows you to move the layout. The second allows you to duplicate the layout and its contents. This can be really useful to create a mini blueprint and then create multiple copies quickly. The final icon is for the layout settings.

When you select the layout settings the layout will become highlighted and a menu will appear on the left hand side. This has some useful settings to allow you to set the background colour, select spacing and centre on mobile.


Components are the content of your templates. These allow you to add editable text areas, images, buttons, dividers and custom code blocks. To add a component to your template, click the icon and drag over to a layout. The editor will highlight where you can drop them. You can add lots of components to a single layout, although we like to think of layouts as a single part of your template. For example, if you're creating a header, use a single layout for this as it makes rearranging your template much easier.

Text Components

Think of these as a mini Microsoft Word in your template that allows you to edit content inline. You'll want to use these for the bulk of your content. When you click on the text to edit it the left hand menu changes to display some extra settings for the text. You can change the style of your text, add lists, comments and links. If you know HTML you can also edit the source of your content. It's worth noting that if you want to add lots of custom code you should probably use the code component instead.

Image Components

Images can really help to bring your templates to life. To add or replace an existing image double click on the image or it's placeholder in the editor. This will display your Media. This is where all the content you upload will be stored. If you've already uploaded some images just double click on the image to insert again otherwise click Upload a file and upload your a new image. Once uploaded double click on it to insert.

Button Components

Buttons are a great way to add a really clear call to action. These can be customised changing the text, button colour, text colour and size.

Divider Components

Dividers double up as either a simple horizontal rule to separate content or as a spacer between content. Make the divider transparent by typing "transparent" in the colour box. Once you get going with the editor you'll realise just how useful these are for creating pixel perfect content.

Code Components

The editor allows you to do create great templates easily, creating cross browser HTML & CSS code but sometimes you'll just want to get your hands dirty. Select the component in the editor and the left hand menu will display a simple text area to add your custom code, your preview will update in real time. Once you're done make sure you set Lock code to "Yes" to stop any further edits.

Template Settings

The Settings tab is where you can setup your template. It has options for the template background, colours, fonts and sizes.