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.
2. Click on the It is Lonely Here! area to start defining your structure by adding your first container.
3. Click on the Full Width Container button to add it.
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.
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.
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.
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.
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.
9. Click on the Button element button, directly on the container.
B. Moving forward
1. Place your mouse over the small dark-gray menu, which appears whenever you hover your mouse over a container.
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.
3. Click on the + ADD STRUCTURE buttons to keep expanding your structure.
4. Toggle the Helper Grid switch, located on the right side of your Editor page.
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!