Register

Create a landing page Structure through the Landing Page Designer

The concept of how our Landing Page Designer works is really simple. You start defining your overall structure by adding empty Containers that divide the blank space into different rows. You can choose between various Containers that consist of vertical slots of different sizes, and then fill these slots with the Elements of your choosing (images, text, etc.).
So, you add rows, each row pre-divided in vertical slots, and you place your elements one below the other inside these slots and then you are free to design your newsletter according to preference.

Note that you can create whichever elaborate design comes to your mind, adding more rows as you go along, dropping stuff inside each row's slots whenever you want, always able to rearrange the rows, and freely play around with your design at any time. Just keep in mind that your landing page Structure needs to have at least one row, so the simplest Structure you can possibly create is by using just one Containerwherein you'll be adding all your Elements in a single vertical slot.

To start defining the structure of your landing page, just follow the steps below:

A. Setting up a Structure

1. Drag and drop a Container to the white area, at the right side of the menu.landing_page_designer_structure_1.png

 

2. Add more Containers if you wish to.

You can choose between any of the following types:

  • 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 into two equally sized vertical slots.
  • 1/3 - 2/3 Container
    This row is divided into two vertical slots, with the first having half the width of the second.
  • 2/3 - 1/3 Container
    This row is divided into two vertical slots, with the first having twice the width of the second.
  • 1/3-1/3-1/3 Container
    This row is divided into three equally sized vertical slots.
  • 1/4-1/4-1/4- 1/4 Container
    This row is divided into four equally sized vertical slots.


3. Click on the cross symbol, appearing on the right side of each Container when you hover over it, and drag it up or down.landing_page_designer_structure_2.png

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


4. Click on the page symbol, appearing on the right side of each Container when you hover over it, to duplicate the Container.landing_page_designer_structure_3.png

This way you can quickly clone a Container that you have already set up to perfectly match your design, and get more that look precisely like it. Now let's see how you can edit a Container so that it appears exactly as you want it to.

B. Setting up the details 

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_page_designer_structure_4.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 to choose from:

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

  • Border width
    Adjust border width using the up/down arrows.

  • Border radius
    Adjust border radius using the up/down arrows.

  • 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, the width of which adjusts to that of your structure.      You can either upload an image from your computer or take it from the internet using the Enter URL option.
  • Wide Background Image
    Adds a background image to a container- however, contrary to the Content Background Image, the Wide Background Image may be applied beyond your structure. 

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

  • Background image position
    Only appears after you've uploaded an image, giving you the option to place it wherever you like inside the container. 
  •  

C. Changing the Slot Settings

If you have selected a structure for your landing page consisting of 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 transparent.

  • Content background color
    Changes 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 choose 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 any elements contained within a specific slot.

  • Padding
    Ranges from 0 to 2000, increasing or decreasing the padding of the slot. Clicking on the lock icon reveals further padding options: Padding TopPadding BottomPadding Left and Padding Right. Use the up/down arrows to increase or decrease the padding on the TopBottomLeft, or Right of each slot. Alternatively, type the desired padding number into the areas next to the arrows.

  • Border Width
    Adjust each slot's border width using the up/down arrows.

  • Border Radius
    Adjust each slot's border radius using the up/down arrows.

  • Border Color
    Select a color for each slot's border using the provided color palette and Hex code as options.    

 

 D. Deleting a Container

1. 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_page_designer_structure_5.png

 

2. Click on the OK button on the pop-up that appears to move forward with the deletion.

Alternatively, you can click on the Cancel button if you change your mind.