Layout element

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 your conversion rate. Using this element will give you an overall understanding of your page even when it gets more complicated.

Layout element includes Section, Row and Column, which are at the very core of the PageFly element hierarchy. You can use them to create your initial structure via section/row/column containers and fill it with other elements.

layout element

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.

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

pagefly layout element

Layout element configuration

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

Section configuration

Sections are the primary elements of every page. A section includes one or more rows. It is possible to control the number of rows in a section via General tab.

Select a Section to see its parameters.

The parameters in General and Styling tab are specific for this element.

General tab’s parameters
1. CONTENT	Rows: Move, copy, delete a row. Add Row: Add a row to this section, the number of rows in a section is unlimited. Set Fixed Width: 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: Enable / By default it’s 1170px, min value is 700px and max value is 2000px.
2. ATTRIBUTES	This is a parameter that all elements have. You can read more here.
3. VISIBILITY	This is a parameter that all elements have. You can read more here.
4. ANIMATION	This is a parameter that all elements have. You can read more here.

Styling tab’s parameters
1. OVERALL	You can read about the OVERALL parameter here.
2. SPACING	You can read about the SPACING parameter here.
3. TYPOGRAPHY	You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND	You can read about the BACKGROUND parameter here.
5. BORDER	You can read about the BORDER parameter here.
6. DISPLAY	You can read about the DISPLAY parameter here.
7. CUSTOM CSS	You can read about the CUSTOM CSS parameter here.

Row configuration

A row contains one or more columns. It’s possible to control the number of columns in a row via General tab.
Select a Row to see its parameters.

The parameters in the General and Styling tabs are specific for this element.

General tab’s parameters
1. CONTENT	Columns: Move, copy, delete a column. 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. Enable Equal Width: Make all columns inside this row have equal width. Enable Equal Height: Make all columns inside this row have equal height.
2. ACTION	You can read more about the ACTION parameter here.
3. ATTRIBUTES	This is a parameter that all elements have. You can read more here.
4. VISIBILITY	This is a parameter that all elements have. You can read more here.
5. ANIMATION	This is a parameter that all elements have. You can read more here.

Styling tab’s parameters
1. OVERALL	You can read about the OVERALL parameter here.
2. SPACING	You can read about the SPACING parameter here.
3. TYPOGRAPHY	You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND	You can read about the BACKGROUND parameter here.
5. BORDER	You can read about the BORDER parameter here.
6. DISPLAY	You can read about the DISPLAY parameter here.
7. CUSTOM CSS	You can read about the CUSTOM CSS parameter here.

Column configuration

Upon adding columns to your layout, it will be automatically contained in a row. All elements (apart from Layout elements) will be nested in a column.

Select a Column to see its parameters.

The parameters in the General and Styling tabs are specific for this element.

General tab’s parameters
1. ACTION	You can read more about the ACTION parameter here.
2. ATTRIBUTES	This is a parameter that all elements have. You can read more here.
3. VISIBILITY	This is a parameter that all elements have. You can read more here.
4. ANIMATION	This is a parameter that all elements have. You can read more here.

Styling tab’s parameters
1. OVERALL	You can read about the OVERALL parameter here.
2. SPACING	You can read about the SPACING parameter here.
3. TYPOGRAPHY	You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND	You can read about the BACKGROUND parameter here.
5. BORDER	You can read about the BORDER parameter here.
6. DISPLAY	You can read about the DISPLAY parameter here.
7. CUSTOM CSS	You can read about the CUSTOM CSS parameter here.

Regarding the layout of your page, you can read more here about how to adjust Layout guide. It can help you much in the building store progress.

A common case: Re-structure the layout on the mobile device

In the All Devices option, this is the layout you edit:

And when you switch on the Mobile device, the layout is displayed like the image below:

The reason for the display is that when switching on the mobile device, the layout will show in order from the left to the right

In some cases, you want the image above the heading and the paragraph, here is the way to do:

In the Styling tab, scroll down to the DISPLAY parameter and choose the Flex option.

Direction: Column Reserve
Wrap: No Wrap
Align Items: Stretch

Then the image will be above the heading and the paragraph like the image below

Click on the Publish button and go to the Live view to see the result on the mobile device

This video will give you detailed ways of how to adjust the mobile layout using the Flex direction

Welcome to PageFly Help Center

What can we help you with?