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.
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.
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.
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 the General and Styling tab are specific for this element.
| General tab’s parameters | |
| 1. CONTENT |
|
| 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 |
|
| 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
Do you face any other issues with the page layout? Let’s join our PageFly Community to share and discuss it with other merchants and our PageFly team.
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
