Every platform's structure is different. We know you know your way around an email campaign; here's an overview of Zym's email builder and how it can help you create top notch messaging.
The builder is structured into three different parts and each has its own purpose when building your range of templates.
Sections ( > Orange Layer)
Sections are full-width layers that can contain many rows. In the image below the section is highlighted in orange. A section has a range of benefits such as:
- Full background width images
- Ability to turn certain sections off, depending on which device it is being viewed on.
** Sections are useful for separating out landing page copy
Rows ( > Blue Layer)
Rows are used to structure the content of the template into different columns, which is also used to help structure how your template is viewed on other devices. The columns range from 1 to 12 depending on how you would like the layout of your template to be. In the image here the row is surrounded by a blue border.
Elements ( > Green Layer)
Elements are the individual features that make up your templates. They are outlined in green. You can choose from a range of elements to help sell or promote your product or service. These include text boxes, forms, videos, images, buttons and more.
Stop and think first:
The first thing to do when building a template is to have a think on how you want it to look:
Some questions to ask first:
- Will it have a top banner with a logo?
- Will I have my form above the fold?
- Will I add multiple images/videos?
- Will I add any additional call to actions to interest my users?
- Do I want a footer?
These questions are important to think about before getting started, as it will help determine the structure of your templates.
How to use the builder
As mentioned above the builder is split into three different layers. To activate each layer simply hover over it, and a range of menu options will appear for you to use.
- Sections: (orange layer)
- Image = gives you the ability to customise the background by either adding a solid background colour or adding an image instead.
- Edit = gives you the ability to customise the settings of the section. Such as the visibility of the section on other devices, customising the height of the section as well as some addition style options.
- Add = gives you the ability to add a new section below this one.
- Duplicate = this is a quick tool to easily duplicate the full section without having to start again.
- Delete = should you no longer want this section anymore, simply select the delete button, and it will be permanently removed from your template.
- Re-order = this allows you to move a section up or below another section.
- Rows: (blue layers)
Rows / columns offers the same capability as listed above in “Section”, with a few additions, provided that the row contains more than one column.
- Resize: this allows you to customise the width of your columns – i.e. one column could be wider than the one beside it.
- Swap = this allows you to switch the position of your columns, so what was appearing on the left, and easily be moved to the right without starting again.
- Elements: (green layers)
Elements offers most of the same capability as listed above in “Section”, with a few changes depending on what the type of element is
For example:
- Forms = you are restricted to one form per landing page, which removes the duplication option from the menu.
- Text boxes = provide an additional text editor icon that allows you to directly edit your chosen text.
Key Feature Examples:
Below highlights some important functionality within our builders that will be useful when you start to build your templates:
- How do I customize my content/paragraphs?
Hover over you’re your paragraph and select the “Edit” tool – this will allow you to customize the colour, font style, size, position etc of your text. You can also adjust the margin and padding within the position tab, and adjust the background and borders under the style tab.
We also have additional functionality at the bottom that allows you to copy and paste styles from other paragraph elements, to save any hassle of trying to recreate.
- Can I add forms to my collaterals? If so, how?
Yes, you can add forms to collaterals, but only to your Landing Page templates. To add the form element – select it from the element list, or if it’s already on the page, simply select the edit tool to start customising your form. You will be presented with the fields that are already added to your form.
- To edit one of these fields, simply select the pencil tool to custom the label, and to change if it is a required field or not.
- To remove the field from your form, simply select the delete icon.
- To choose whether the label appears below or beside the input box, you can use the down, or right arrow.
- Finally – to add additional fields to the form, simply select the “Add field” button.
You will have a range of different fields to choose form:
- Contact = these are standard contact fields.
- Company = these are standard company fields.
- Custom = these include options such as radio buttons, dropdowns file uploads etc.
*Please note that by using these in your forms, they will NOT be segmentable for future use. To be able to segment on the data your form is collecting – add these as new properties within the contact area (they can then be added using the Quick tab).
- Quick = these are previously created properties that you have added within the contact properties are.
- How will my landing page appear for mobile devices?
In the top right of the navigation bar – you will see a “Preview” icon – by selecting this you can easily see how your collateral will appear on mobile, desktop, and tablet devices.
A couple of tips:
- If you are adding an button to your landing page, and you want to ensure it displays correctly on all devices – instead of adding one column and reducing the button size and then realising it is tiny on a mobile, add a three column row with your image in the middle. Making it easier to control the size of your CTA.
- On a desktop view, I want my images to be positioned together, but it displays strange on a mobile device. How do I fix this?
Duplicate the whole section and edit the visibility settings to turn it off for mobile and tablet devices, and ensure the other section is turned on for desktop only.
Please note that we have slightly different builders depending on the collaterals you are creating. They all share the same principals in relation to how they are structured (sections, rows, elements etc)
The difference between the builders are the maximum width they can be:
- Landing & Post Entry Page = Full page width builder design.
- Email & Autoresponder = Restricted to a max-width of 600px.
- Web Form, Pop Up, Pop Up Post Entry = these range for 400px – 1000px wide depending on which style you want best for your website.