PageFly - Layout element

7187 views Anh 6

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)
LaptopWidth of this currently selected column on Laptop (maximum is 12)
TabletWidth of this currently selected column on Tablet (maximum is 12)
MobileWidth of this currently selected column on Mobile (maximum is 12)
ACTION
Go To URLClicking 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 ColumnAdd a column to this row, the number of columns in a row is unlimited
Content PositionSpecify the position for the content inside this row
ReversedReverse the order of columns in this row
Equal widthMake all columns inside this row have equal width. Columns and Doubling parameters are hidden if this is enabled.
Equal heightMake all columns inside this row have equal height
ColumnsNumber 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.
GutterSpacing between columns in this row
RESPONSIVENESS
StackableAutomatically stack rows into a single column on mobile devices
DoublingDouble column width for each device jump
ACTION
Go To URLClicking 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
EnableThis 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 WidthBy default it’s 1170px, min value is 700px and max value is 1600px.

Was this helpful?