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.  Editor_Container_A_1-u.png

2. Add more Containers above or below the previous one.
Editor_Container_A_2-u.png


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.
Editor_Containe_A_3-u.png

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.
Editor_Container_B_1-u.png


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.
Editor_Container_B_2-u.png
 

3. Click on the OK button on the pop-up that appears to move forward with the deletion.
Editor_Container_B_3--u.png

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.
Editor_Container_C_1-u.png

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 color of the row using both a color palette and a Hex code as options. You can use the available transparency slider-bar to set the color back to transparent.

    • Row Background Color (Wide)
      Changes the color of the row from one side of the newsletter to the other using both a color palette and a Hex code as options. You can use the available transparency slider-bar to set the color back to transparent.

    • Border Radius 
      Ranges from o to 2000. Use the up/down arrows to increase or decrease border radius, thus altering the roundness of your container. Alternatively, type the desired value directly into the area next to the arrows.

    • Image Picker
      Allows you to upload an image from your computer, or directly from various other sources, such as Facebook, Instagram, Dropbox, Giphy, and many more!

    • 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.

    • Container Type
      Select your desired Container type from the drop-down list.

      Your options are:

      - Normal
      - Cart Abandonment
      - Product Recommendation
      - RSS Campaign

    • 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.

 

D. Additional Container Settings
The additional container settings consist of the Conditional Visibility Settings and the Slot Settings.

1. Click on the + symbol next to Conditional visibility to expand the menu.
Editor_Container_D_1-u.png

2. Then, select a specific custom field from the drop-down menu, in order to customize who will view/receive your newsletter.
Editor_Container_D_2-u.png

3. There are as many "Slot" menus as there are slots in your design. Click on the + symbol next to each Slot menu to expand it.
Editor_Container_D_3-u-.png


You have the following setup options:

  • Slot Background Color
    Changes the color of the slot using both a color map and a Hex code as options. You can use the available transparency slider-bar to set the color 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!