Register

What is an Editor Container and how can I use it?

Staring at an empty canvas the first time you open the Moosend Editor can seem like a daunting prospect, but don't you fear! Designing a newsletter is very easy: you first start designing your newsletter's overall structure by adding an empty Container that divides the blank space into different rows. Each of these rows can have different sized vertical slots wherein you can add any Elements you like (images, text, etc)!

So, you add horizontal rows which are pre-divided in vertical slots and you add your Elements in these vertical slots. Sounds simple? It's because it is!

The rows come in different options based on the number and size of the slots inside them:

  • Full Width Container
    This row consists of one vertical slot which extends to the complete width of your design.

  • Half Width Container
    This row is divided in two equally sized vertical slots.

  • 1/3 - 2/3 Container
    This row is divided in two vertical slots, with the first having half the width of the second.

  • 2/3 - 1/3 Container
    This row is divided in two vertical slots, with the first having twice the width of the second.

  • 1/3 - 1/3 - 1/3 Container
    This row is divided in three equally sized vertical slots.

  • 1/4 - 1/4 - 1/4 - 1/4 Container
    This row is divided in four equally sized vertical slots.


Your newsletter design needs to have at least one such row, otherwise you won't be able to add any elements to it. This means that the simplest structure you can possibly create is one which only has one Containerwith just one vertical slot.


To start defining the structure of your newsletter by adding Containers just follow the steps below:

A. Adding Containers

1. Drag-n'-drop a Container to the white area, at the right side of the menu.  Adding a container Step 1 : Drag n drop a container

2. Add more Containers above or below the previous one.
Adding a container Step 2 : Add more containers


3. Click on the page symbol, appearing on the right side of each Container when you place your mouse over it, to duplicate the Container.
Adding a container Step 3 : Click on the page symbol to duplicate the container

This way you can quickly clone a Container that you've set-up just way you like and have more of its kind inside your design.


B. Moving and removing a Container

1. Click-n'-drag the cross symbol, appearing on the right side of each Container when you place your mouse over it, to move the Container.
Moving a container Step 1 : Click n drag the cross symbol

This way you can fluidly change the Structure of your newsletter, by rearranging the sequence of rows.


2. Click on the trashcan symbol, appearing on the right side of each Container when you place your mouse over it, to delete the Container.
Moving a container Step 2 : Click on the trashcan symbol to delete the container
 

3. Click on the OK button on the pop-up that appears to move forward with the deletion.
Moving a container Step 3 : Click on the OK button

You can click on the Cancel button if you change your mind.

C. Changing the Container settings

1. Click on the settings symbol, appearing on the right side of each Container when you place your mouse over it, to access its settings.
Container Settings Step 1 : Click on the Settings symbol

The Container settings will immediately be made available on the left side of your Editor page.


2. Set each detail of the Container settings to fit the style of your design. You have a vast array of settings to customize:

  • Row padding
    Ranges from 0 to 2000, increasing both the left and right padding of the row and subsequently decreasing the space available for the row's slots. 

  • Slot spacing
    Ranges from 0 to 2000, increasing the distance between the row's slots.

  • Row Color
    Changes the colour of the row using both a colour palette and a Hex code as options. You can use the available transparency slider-bar to set the colour back to transparent.

  • Upload Image
    Adds a background image to the row, which you can either browse for in your computer or use the Enter URL field to grab it from the internet. Not all email clients support background images (e.g. Outlook) so adding a background colour as a precaution is a good idea!

  • Background Image Repeat
    Only appears after you've uploaded an image, giving you the option of having the image tile in the horizontal (x), vertical (y), or both horizontal and vertical axes inside the row.

  • Cascade blocks for responsiveness
    Enabling this option will allow the display of the slots of a row in a vertical alignment, ignoring any slot padding and spacing, on small-width devices using email clients which support the use of media queries.

  • Slot Background Color
    Changes the colour of the slot using both a colour map and a Hex code as options. You can use the available transparency slider-bar to set the colour back to transparent.

  • Slot Vertical Align
    Chooses between a Top, Middle or Bottom vertical alignment for any elements contained in the specific slot.

If you can't be bothered to create your own Structure, or if you just need a starting point, you can always begin your work using our newsletter Templates. It's a great way to get ideas and inspiration for your own designs!