Register

What is the Editor Helper Grid and how can I use it?

Feeling the pressure to deliver? Let's make things quicker, shall we?

Designing a newsletter campaign using the Moosend Editor is a straight-forward procedure - you define your design's structure by cutting up the empty space using small boxes called Containers and then fill those up with the Elements (images, articles, text, buttons, etc) you want in there. Easy, right? But there's another way for you who doesn't like to drag-n'-drop things to design your structure.

Switch on our Helper Grid! Now, to fill the Editor's empty space all you have to do is click on it and things will appear. You can define your structure with clicks, and even add the Elements you want with clicks. How cool is that?
 

Open your Editor and let's go through a simple example, starting from scratch:

A. Learning the basics

1. Toggle the Helper Grid switch to make sure it's in the On position.
Editor Helper grid Step 1 : Toggle the Helper Grid switch


2. Click on the It is Lonely Here! area to start defining your structure by adding your first container.
Editor Helper grid Step 2 : Click on the it's lonely here area to start working on your campaign


3. Click on the Full Width Container button to add it.
Editor Helper grid Step 3 : Click on the full width container button

You can obviously choose whichever container you prefer, but for the purposes of this example we're keeping things simple by making our first container take up the complete row.
 

4. Click on the Image element button, located right inside the container.
Editor Helper grid Step 4 : Click on the Image element button

You don't need to drag-n'-drop anything, just click on the element button and BOOM! it gets added. It might also be a good idea to upload an image just to make things easier to discern and to help you remember where you started defining your structure. After all, you can always add content whenever you feel like it!

5. Click on the + ADD ELEMENT button.
Editor Helper Grid Step 5 : Click on the +ADD Element button

You can go ahead and add any type of element you want, just keep in mind that by clicking on the buttons above or below the element you just added you'll be placing more elements respectively above or below it, but always inside the same container. This is an important distinction and it bears repeating: the + ADD ELEMENT buttons always adds elements on the same container as the elements to which they are attached to! 


6. Click on the + ADD STRUCTURE button.
Editor Helper grid Step 6 : Click on the +ADD Structure button

You can choose to add a structure above the one you already added by clicking on the + ADD STRUCTURE above, or you can add one at the bottom. Either way, expanding your structure with more containers means you will be able to add more elements on those and start designing a cooler newsletter.


7. Click on the Half Width Container to add it to your design.
Editor Helper grid Step 7 : Click on the Half Width container to add it to your design

You now need to choose what elements each part of the half-width container should contain. Let's make it so that the left side contains a Text element and the right side of the container a Button element - feel free to add different types of elements if you so wish.


8. Click on the Text element button, located on the left side of the container.
Editor Helper grid Step 8 : Click on the Text element button


9. Click on the Button element button, directly on the container.
Editor Helper grid Step 9 : Click on the Button element button


B. Moving forward

1. Place your mouse over the small dark-gray menu, which appears whenever you hover your mouse over a container.
Editor Helper grid Step 1 : Place your mouse over the dark grey menu

A dark-gray border quickly outlines the container so you can easily discern which + ADD ELEMENT buttons will add elements to this specific container. It's a simple but cool trick!


2. Click on the + ADD ELEMENT buttons to add more elements to a container.
Editor Helper grid Step 2 : Click on the +ADD ELEMENT button

3. Click on the + ADD STRUCTURE buttons to keep expanding your structure.
Editor Helper grid Step 3 : Click on the +ADD STRUCTURE button


4. Toggle the Helper Grid switch, located on the right side of your Editor page.
Editor Helper grid Step 4 : Toggle the Helper Grid switch

Now check how your structure looks. 

You can always turn the Helper Grid off to check how your clean design looks and then turn it back on to quickly add more containers and more elements as needed. The Helper Grid is there to help you out, and minimize the time you spend on mundane stuff like defining your structure and adding elements, so you can spend time making things look ace!