In this article, you will learn about the fundamental structure of a page when you use PageFly to build up your store.
Default structure of page elements
Whenever you drag a new element into your page, PageFly will automatically create its containers which are Section > Row > Column.
By doing this, PageFly ensures that the page is responsive on all screen sizes.
What is this structure? 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.
You can find this structure by looking at the Breadcrumbs.
About grid system
With proper column and grid, all their pages can be responsive on any device from the largest desktop to the smallest mobile screen. According to W3School, there are some grid system rules that can be very helpful and easily applicable to 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
- Always start out with Layout element when you build a new section. Choose Add Element > Element > Layout