Register

What is a Landing Page Designer Container and how can I use it ?

Staring at an empty canvas the first time you open the Moosend Landing Page Designer can seem like a daunting prospect, but don't you fear!

Designing a landing page is very easy: you first start designing your landing page'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. Sound 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 landing page 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. 


Τo start defining the structure of your landing page 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. 
Landing_pages-What_is_a_Designer_Container_1.png

2. Add more
 Containers above or below the previous one.Landing_pages-What_is_a_Designer_Container_2.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.
Landing_pages-What_is_a_Designer_Container_3.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.
Landing_pages-What_is_a_Designer_Container_4.png

This way you can fluidly change the Structure of your landing page, by rearranging the sequence of rows.

2. Click on the trash-can symbol, appearing on the right side of each Container when you place your mouse over it, to delete the Container.
Landing_pages-What_is_a_Designer_Container_5.png
 
3. Click on the OK button on the pop-up that appears to move forward with the deletion.
Landing_pages-What_is_a_Designer_Container_6.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.
Landing_pages-What_is_a_Designer_Container_7.png

The Container settings will immediately be made available on the left side of your Designer 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:

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

  • 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 background 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 width
    Adjust row width using the up/down arrows. The maximum possible value for row width is 2000.
  • Border width
    Adjust border width using the up/down arrows. The maximum possible value for border width is 2000.

  • Border radius
    Adjust border radius using the up/down arrows. The maximum possible value for border radius is 2000.

  • Row border color
    Adjust row border color using both a color palette and a Hex code as options.   
  • Content background image
    Adds a background image to a container, which you can either upload from your computer or grab from the internet using the Enter URL field. The content background image adjusts to fit your structure's width.
  • Wide background image
    Adds a background image which-contrary to the Content Background Image- will be applied even beyond your structure's width.
  • 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.

 

D. Changing the Slot Settings

If you have selected a structure for your landing page with more than one container, a menu of settings per slot will also appear on the left side of your Designer page, below the options described above. The number of slots corresponds to the number of containers included in your selected structure (so, a half-width structure will give you options for Slot 1 and Slot 2, a structure with three containers will give you options for Slot 1, Slot 2 and Slot 3, etc.)

  • Background color
    Changes slot background color using both a color palette and a Hex code as options. You can use the available transparency slider-bar to set the color to transparent.
  • Content background color
    Changes the content background color using both a color palette and a Hex code as options.    As before, you can use the available transparency slider-bar to set the color to transparent.         
  • Vertical align
    Using the up/down arrows, you can chooses between a Top, Middle or Bottom vertical alignment for any elements contained within a specific slot.

  • Minimum height
    Using the up/down arrows, you can specify a minimum height for the slot.

 
The slot settings of Padding, Border Width, Border Radius and Border Color operate in the same way as described for the Container.

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 landing page Templates. It's a great way to get ideas and inspiration for your own designs!