PageFly - Layout element

2279 views Anh 2

In this article, you will learn how to use Layout element in PageFly to have a beautiful page.

About Layout element

Layout element is designed to help you structure your page better in order to increase conversion rate. Using this element will give you an overall understanding of your page even when it get too complicated.

Where Layout element located

There are 10 pre-built column layouts for you to start with, but feel free to customize them the way you want. We will continue to add more variations to help you save time.

Variations of Layout element

The structure of the layout is simple. In the scale of this article, just take a look at the screenshot below which is a easy way to understand how page should be structure.

Typical structure of a page

Layout element configuration

Layout element includes Section, Row and Column which have different parameters allowing you to fine-tune content appearance reaching the best possible conversion rate.

Column configuration

Select a Column to see its parameters.

General tab configuration of a Column

The parameters in General tab are specific for this element.

The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.

COLUMN WIDTH
Any Device (All) Width of this currently selected column on all devices (maximum is 12)
Laptop Width of this currently selected column on Laptop (maximum is 12)
Tablet Width of this currently selected column on Tablet (maximum is 12)
Mobile Width of this currently selected column on Mobile (maximum is 12)
ACTION
Go To URL Clicking on the column will redirect your visitor to the link given in “Enter URL here” field.

  • Self: Link will be open in the same tab
  • New: Link will be open in the new tab

Row configuration

Select a Row to see its parameters.

General tab configuration of a Row

The parameters in General tab are specific for this element.

The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.

SETTINGS
Add Column Add a column to this row, the number of columns in a row is unlimited
Content Position Specify the position for the content inside this row
Reversed Reverse the order of columns in this row
Equal width Make all columns inside this row have equal width. Columns and Doubling parameters are hidden if this is enabled.
Equal height Make all columns inside this row have equal height
Columns Number of vertically divided segments display in this row. Based on the bootstrap grid, maximum segments in a row is 12. If this parameter is set to auto (smaller than 1) then you will need to set the width of each column inside the row manually like mentioned above.
Gutter Spacing between columns in this row
RESPONSIVENESS
Stackable Automatically stack rows into a single column on mobile devices
Doubling Double column width for each device jump
ACTION
Go To URL Clicking on the Row will redirect your visitor to the link given in “Enter URL here” field.

  • Self: Link will be open in the same tab
  • New: Link will be open in the new tab

Section configuration

Select a Section to see its parameters.

General tab configuration of a Section

The parameters in General tab are specific for this element.

The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.

ROWS
Add Row Add a row to this section, the row will have one column inside
CONTAINER
Enable This setting is enabled by default, it wraps content in the section into a fixed width. You can set the fixed width in Max Width setting. When disabled, the content in this section will expand to full section’s width
Max Width By default it’s 1170px, min value is 700px and max value is 1600px.