Chapter 2 Chapter 2: Build Page Structure

Choose the container element wisely

PageFly provides 3 main containers which are Section, Row, and Elements to design your page. These containers are made for specific purposes that you need to know before jumping into the editing page.

PageFly Containers

  • Section is the biggest container which contains all content units dedicated to some topic
    • Each section can have multiple rows.
  • Row contains content dedicated to some sub-topic
    • Each row can have one or multiple columns depending on the layout.
    • Avoid creating multiple rows when unnecessary to reduce HTML code. Only create a new row if a complex layout with multiple columns is involved.
  • Column contains content of the sub-topic but arranged inside columns as per layout.

Use the “Block” element only when necessary

PageFly Containers

“Block” element is designed to be the single unit that contains a series of elements for special layout arrangement and styling.

In general, no need to use Block element. Try to operate either with the container (section/row/ column) or directly with the element.

Avoid using too many nested levels

PageFly containers

When possible create content in dedicated rows instead of nesting.

Avoid columns of 1 “physical” row to be presented in multiple “visual” rows

PageFly guide chapter 1

It’s unintuitive to have columns of 1 “physical” row that is placed on multiple “visual” rows.

Use default value

PageFly guide chapter 1

If there is no necessity, use the default value.

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×