Layout element

This element is available on all PageFly plans

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


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

Was this helpful?

Top 9 PageFly's features to Boost your Holiday Sales

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

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

I got it!
Languages