All About PageFly Page Structure

The structure and layout of your pages can have a really big impact on how they're read. By using them well, you will be able to position text, images, and all other page elements to have the best visual impact.

If you are using PageFly Advanced Page Builder, there must have been at least one time you thought about its page structure and had questions such as "what are section, row, and column for? How do I use them?" etc. In this blog post, you will find all the answers.

Check out our video about responsive structure here: 

Outline

• Section, Row, Column, Element - What Are They?
• So What Happens If You Don't Follow This Order?
• What Else Can You Do With PageFly?

Section, Row, Column, Element - What are they?

Basically, these are all the parts of a web page and they help you keep the page layout responsive to all devices. An ideal page is a page that contains many sections, in the section there are rows, each row contains columns and the elements are placed inside the column.

So the right order should be: Section > Row > Column > Element.

With PageFly, whenever you drag a new element into the page, it will automatically create higher hierarchy parts over the element (column, row, section).

According to W3School, there are some grid system rules below that can be very helpful for our fellow amateur developers:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed only within columns
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
• Column widths are in percentage, so they are always fluid and sized relative to their parent element

So What Happens If You Don't Follow This Order?

Usually, when a developer develops a new website and web pages with CSS and HTML, they will follow this structure. With proper column and grids, all their pages can be responsive on any device from the largest desktop to the smallest mobile screen. That's the reason behind PageFly page structure.

If you don't follow this structure, your page may not look nice on mobile devices. By automatically creating this hierarchy for every element, PageFly ensures that the created page is responsive.

What Else Can You Do With PageFly?

With PageFly, you have not only normal page elements but also layout and block elements. By using these guys, you are able to manage your page structure and layout much easier.

That's everything about PageFly page structure. I hope that this helps you understand your page better as well as the reason behind all the sections and elements of PageFly. 

Let's create many more beautiful pages with PageFly Advanced Page Builder. Cheers!