Layout element

You can check this video tutorial about the Layout element here

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

About Layout elementClick to copy

Layout element is designed to help you structure your page better in order to increase your conversion rate.

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 pagefly

Please note that you can only reorder elements in the same container. For example, if you want to reorder this column, you only can move it inside it container which is the row outside it here.

row and column

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

layout element pagefly

 

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.

Layout element configurationClick to copy

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

Section configurationClick to copy

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.

layout element pagefly

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

CONTENT
Add Row: the number of rows in a section is unlimitedlayout element pagefly
Rows: Move, delete a rowlayout element pagefly
Set Fixed Width:
  • This setting is enabled by default, it wraps content in the section into a fixed width.
  • When disabled, the content in this section will expand to the full section’s width
layout element pagefly

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling configuration

You can check more information about the Styling tab here

Row configurationClick to copy

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.

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

General configuration

CONTENT
Add Column: the maximum number of columns in a row is 12layout element pagefly
Columns: Move, delete a columnlayout element pagefly
Content Position: Specify the position for the content inside this rowlayout element pagefly
Columns Per Line: 
  • The maximum of columns per line on All Device and Desktop is 12
  • The maximum of columns per line on Tablet is 6.
  • The maximum of columns per line on Mobile is 4.
layout element pagefly
Enable Equal Height: Make all columns inside this row have equal heightlayout element pagefly
 

Column spacing: Adjust the spacing among the columns in the row.

This setting is defaulted by 30 px and you can edit this parameter

layout element pagefly

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling configuration

You can check more information about the Styling tab here

Column configurationClick to copy

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.

Column configuration

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.

Edit items within columns

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.

layout element pagefly

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

layout element pagefly

  • 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:

layout element pagefly

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

General configuration

You can get information about the General tab here

Styling configuration

You can check more information about the Styling tab here

If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!

JOIN PAGEFLY COMMUNITY

This video will give you detailed ways of how to adjust the mobile layout:

Congrats! You unlocked one more PageFly building block – the road ahead is no hassle-free, but we got you covered!

Check out our exclusive content: Step-by-Step Guide on How You Can Build A High Converting Shopify Store with PageFly

Navigate this category

PreviousPrevious article

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese & French. Please check the flags on the page header.

I got it!
Explore how you can use PageFly to win this Christmas and Year-end sales Check now