Register

How do I create a landing page Structure through the Landing Page Designer? 

The concept of how our Landing Page Designer works is very intuitive, if not too 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. That's it!

Don't be fooled by how easy it is - you can create any elaborate design that comes to 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-n'-drop a Container to the white area, at the right side of the menu.
Landing_pages-How_can_I_create_a_Structure_1-1.png


2. Add more Containers if you like!

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


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_pages-How_can_I_create_a_Structure_2-2.png

This way you can fluidly 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_pages-How_can_I_create_a_Structure_3-3.png

This way you can quickly clone a Container that you've already set-up to perfectly match your design, and get more that look precisely like it does. Speaking of which, let's see how you can tweak a Container so that it appears exactly like 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_pages-How_can_I_create_a_Structure_4-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 colour 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 grab 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. 

 

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 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 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 Top, Padding Bottom, Padding Left and Padding Right. Use the up/down arrows to increase or decrease the padding on the TopBottom, Left 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_pages-How_can_I_create_a_Structure_5-5.png
 

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