SellerSmith Blog

All things related to sales-boosting for Shopify merchants.

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 at least one time you think about its page structure and have 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.


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

Basically, these are all 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 section there are rows, each row contains column 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 happened 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 properly column and grid, 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 better about your page 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! 

Older Post Newer Post