Register

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

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

Designing a landing page using the Moosend Landing Page Designer is a straightforward procedure - you define your landing page'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 an even quicker way to do it: switch on our Helper Grid

This way, you can design your landing page with maximum guidance and, therefore, efficiency! 

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.
Landing_pages-What_is_the_Designer_helper_grid_1.png


2. Click on the It is Lonely Here! area to start defining your structure by adding your first container.
Landing_pages-What_is_the_Designer_helper_grid_2.png


3. Click on the Full Width Container button to add it.
Landing_pages-What_is_the_Designer_helper_grid_3.png

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. Next, click on the Image element button, located right inside the container.
Landing_pages-What_is_the_Designer_helper_grid_4.png

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.
Landing_pages-What_is_the_Designer_helper_grid_5.png

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 add elements in the same container as the elements to which they are attached to! 

Now, let's start adding some more complexity to the design:

6. Click on the + ADD STRUCTURE button.
Landing_pages-What_is_the_Designer_helper_grid_6.png

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.
Landing_pages-What_is_the_Designer_helper_grid_7.png

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.
Landing_pages-What_is_the_Designer_helper_grid_8.png

9. Click on the Button element button, directly on the container.
Landing_pages-What_is_the_Designer_helper_grid_9.png

B. Moving forward

1. Place your mouse over the small dark-gray menu, which appears whenever you hover over a container.
Landing_pages-What_is_the_Designer_helper_grid_10.png

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.
Landing_pages-What_is_the_Designer_helper_grid_11.png

3. Click on the + ADD STRUCTURE buttons to keep expanding your structure.
Landing_pages-What_is_the_Designer_helper_grid_12.png

4. Toggle the Helper Grid switch, located on the right side of your Designer page, to turn the Helper Grid off.
Landing_pages-What_is_the_Designer_helper_grid_13.png

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!