What is the Designer Helper Grid and how can you use it

Designing a landing page using our platform's 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 filling them up with the Elements (images, articles, text, buttons, etc) you want in there. However, there is an even quicker way to design your structure that doesn't require you dragging and dropping things.

Switch on our Helper Grid, which will enable you to make the whole designing procedure much quicker.

Open your Designer 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.helper_grid_landing_page_1.png


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.helper_grid_landing_page_2.png

You can choose whichever container you prefer, but for the purposes of this example, we are 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.helper_grid_landing_page_3.png

You don't need to drag and drop anything, just click on the element button and 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.helper_grid_landing_page_4.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 will 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 on the same container as the elements to which they are attached.

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 to those and start designing a more impressive landing page.

7. Click on the Half Width Container to add it to your design.helper_grid_landing_page_5.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.helper_grid_landing_page_6.png


9. Click on the Button element button, directly on the container.helper_grid_landing_page_7.png


B. Moving forward
1. Place your mouse over the small dark-gray menu, which appears whenever you hover over a container.helper_grid_landing_page_8.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. 

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 Designer page, to turn the Helper Grid off.

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 procedures like defining your structure and adding elements so that you can spend time creating your perfect design.