PageFly - Page structure

2622 views 5

In this article, you will learn about the key structure of a PageFly page when you use PageFly to build up your store.

The structure of a page

Whenever you drag a new element into your page, PageFly will automatically create its containers which are Section > Row > Column > the element.

By doing this, PageFly ensures that the page is responsive on all screen sizes.

But what is this structure anyway?

In PageFly, an ideal page contains sections.

In section, there are rows.

Each row contains columns, inside column, we place elements.

You can find this structure by looking at the Breadcrumbs at the bottom bar.

About grid system

With proper column and grid, all pages can be responsive on any device, from the largest desktop to the smallest mobile screen.

According to W3School, some grid system rules can be helpful and easily applicable to anyone involved in web design:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • A row includes horizontal columns
  • You should place in columns only
  • Predefined classes like .row and .col-sm-4 are available to create grid layouts quickly
  • Columns create gutters (gutters are gaps between columns) with padding. 
  • 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 use percentage unit, so they are always fluid and sized relative to their parent element
  • Always start out with the Layout element when you build a new section. Choose Add Element > Element > Layout

Was this helpful?