About Layout Elements
Summary: Layout Element is designed to help you structure your page better in order to increase your conversion rate.
Layout elements include 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.
Please note that you can only reorder elements in the same container. For example, if you want to reorder this column, you can only move it inside its container which is the row outside it here.
For more details, please check this video tutorial:
How To Access Layout Element
- Step 1: Click on the Plus icon which is the Add element function
- Step 2: Click on the Layout element in the dropdown menu
- Step 3: Drag and drop the element you want into the page editor and then start using it.
There are 8 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.
How To Configure PageFly Layout Element
Section, Row, and Column have different parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.
Step 1: Configure Section
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 the General tab.
Select a Section to see its parameters.
The parameters in the General and Styling tabs are specific for this element.
Section General Settings
| Add Row: the number of rows in a section is unlimited |   |
| Rows: Move, delete a row |  |
Set Fixed Width:
|  |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here
Section Styling Configuration
You can check more information about the Styling tab here
Step 2: Configure Row
A Row contains one or more columns. It’s possible to control the number of columns in a row via the General tab.
Select a Row to see its parameters.
The parameters in the General and Styling tabs are specific for this element.
Row General Settings
| Add Column: the maximum number of columns in a row is 12 |  |
| Columns: Move, delete a column |  |
| Content Position: Specify the position for the content inside this row |  |
Columns Per Line:
|  |
| Enable Equal Height: Make all columns inside this row have equal height |  |
| Column spacing: Adjust the spacing among the columns in the row. This setting is defaulted by 30 px and you can edit this parameter |  |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here
Styling Configuration
You can check more information about the Styling tab here
Step 3: Configure Column
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.
In version 3.22.0 or later, you can move, duplicate, or delete columns within a row simply by clicking on a column within that row.
Resize Column Mechanism
- When you increase or decrease a column width to the left or right side, the width of the next column will decrease or increase accordingly without affecting the line width.
- When you change the parameter of columns per line, all of the columns that you have will be automatically resized equally on a row and you still can optionally edit the size of each column.
- In case, if you have the odd column in per line, this odd column will be automatically resized to full-width in line
For example:
If you have 4 columns and you set column per line is 3:
- Line 1: Have 3 columns ( Each column takes 1/3 of the area of the line)
- Line 2: Have 1 column (This column will full-width inline)
Please check the image below for more clarification:
Column General Configuration
You can get information about the General tab here
Styling Configuration
The parameters in the General and Styling tabs are specific for this element.
To make your page responsive on mobile, kindly refer to this video tutorial:
Frequently Asked Questions
What Is PageFly Layout Element?
Layout Elements include Section, Row and Column; these are the core of the PageFly element structure.
Why Should I Use PageFly Layout Elements Instead Of Shopify?
It’s easy to use, integrated 100% to Shopify, the PageFly app is 100% optimized for better conversion rate, and of course, it provides all a lot of templates. Check out the 5 reasons to use PageFly
