Layout

About Layout Elements

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

With Layout element, you can quickly customize your page and build a variety of layouts, from straightforward to intricate, to suit your needs.

How To Access Layout Element

Step 1: Click on the Elements icon > In the PageFly tab choose the Layout
Step 2: Drag and drop the desired Layout variant you want into the editor and then start using it

The Layout element comes with multiple variations covering most of your needs. But we will continue to add more variations to help you save time

How To Configure PageFly Layout Element

There are some differences in Layout elements when you create a PageFy page using Legacy editor and Gen 2 editor. We will explore the differences below.

Gen 2 Editor

If you select Flex editor when creating a PageFly page, the layout elements that form the foundation of your PageFly page are the Blank section and the Blank block instead of Section, Row, Column like in Basic editor.

Those elements come with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Blank Section

Flex sections are the primary elements of every page. You can directly add the other PageFly elements into your Blank section.

Select the Flex section in the page canvas and you may view its settings. There are several specific settings for this element in the General and Style tabs.

General Settings

You will find the Enable sticky top option under the General tab. When enabling this setting, the section will always show at the top of the page when you scroll. You can also see the option to adjust the Top offset or Apply elevation

Top offset: Change the space between the sticky section and the top of your page
Apply elevation: Elevate a section on the z axis to create a 3D effect, allowing you to stack other elements below it

Styling Settings

There are 2 differences in the Styling tab of Blank Section compared to other elements of PageFly: it offers options for adjusting the section's height and width.

You can change the section's width using the Content width parameter. There are two options:

Max width: This setting is enabled by default, it wraps content in the section into a fixed width. You can customize the width of the section
Fill container: The content in this section will expand to the full section’s width

For the section's height, you will adjust at the Height parameter in Size. There are three options available for this parameter.

Fill container: The element will automatically expand to fill the screen's height
Hug content: The element’s width will adjust to the size of its content.
Fixed width: This lets you set a specific width for the element.

Besides adjusting the height and the width of the section, you may modify a range of parameters in the Styling tab, such as spacing, borders, colors, and more, to guarantee that the Flex section matches the overall layout of your page.

Blank Block

The purpose of the Flex block element is to serve as a unit that contains a series of elements for special layout arrangement and styling. A blank block that you drag onto the page canvas will appear as an element in a Flex section.

Flex block element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate. Select this element in the page canvas to view its settings.

For better visualization, please check out this video:

General Settings

Select the Flex Block element and navigate to the General tab, plenty of parameters that let you adjust that element will be shown.

Styling Settings

You may modify a range of parameters in the Styling tab, such as element size, spacing, borders, typography, colors, and more, to guarantee that the Layout element matches the overall layout of your page.

6 Layout Variants

Besides Flex section and Flex block elements, there are 6 pre-built layouts for you to start with, but you are welcome to alter them in order to fit your ideas. We will continue to add more variations to help you save time.

You may use our premade layout elements to customize the complex layout. Simple drag and drop the Flex section onto page canvas then add the Flex block inside. You can create a section that has multiple columns by arranging Flex block elements horizontally. And when those block elements are arranged vertically, a layout with several rows is produced.

You can also reorder the block elements in Flex section by clicking-and-holding the ellipsis icon in the left of flex block then and drag this into the new placement in Page Content.

Group Elements Into A Flex Block Element

In Flex editor, you can group elements inside a Flex Block element by pressing and holding down the Ctrl (for Windows devices) or Command (for MacOS devices) key while selecting the elements. This action will group the elements into a Flex Block element.

Legacy Editor

Layout elements in Legacy editor include Section, Row and Column, which are at the very core of the PageFly element hierarchy. Each element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Section

Sections are the primary elements of every page. A section includes one or more rows. You can control the number of rows in a section via the General tab.

General Settings

Add a new row by clicking on the Add new item button.

Note: The number of rows in a section is unlimited

Move the row by clicking-and-holding the ellipsis icon in the left of item, and drag this into the new placement Duplicate or remove row by using the two buttons next to each tab item.

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

Enable sticky top: When enabling this setting, the section will always show at the top of the page when you scroll You can also see the option to adjust the Top offset or Apply elevation

For more details, please check this video tutorial:

Styling Settings

Row

A Row contains one or more columns. Click on Row element then in General tab, you can control the number of columns in a row

General Settings

Add a new column by clicking on the Add new item button. Move the column by clicking-and-holding the ellipsis icon in the left of item, and drag this into the new placement Duplicate or remove column by using the two buttons next to each tab item.

Columns Per Line: - The maximum of columns per line on All Device and Desktop is 12 - The maximum number of columns per line on Tablet is 6. - The maximum number of columns per line on Mobile is 4.

Content Position: Specify the position for the content inside this row

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

Styling Settings

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.

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:

General Settings

Click on Column in page canvas, in General tab, you can set column’s height in Height parameter

Styling Settings

Frequently Asked Questions

1. Why should I use PageFly Layout elements instead of Shopify?

You should use PageFly Layout elements because they offer more design flexibility, customization options, and ease of use compared to Shopify's default layout elements, allowing you to create unique, conversion-optimized pages without needing coding skills.

2. Why should I use the Legacy editor instead of the Gen 2 editor when creating a PageFly page? Using Gen 2 editor, you may quickly and be flexible in customizing page layout; easily edit the width and height of each element on the page without having to write custom code. Additionally, it will help you improve the page’s performance and faster loading speed.