PageFly - 5 essential tips

165 views Clus 3

In this article, you will learn about 5 essential tips to get started with PageFly pagebuilder the quickest and easiest way.

Tip 1 – Sections are the largest design units in a page. They structure a page vertically.

Below, we have a:

  • Section – red color
  • Row – purple color
  • Column – green color

Tip 2 – Columns structure content horizontally.

Rows structure a section vertically, while Columns structure content horizontally.

๐ŸšฉContent should be placed in columns only.

๐Ÿ‘‰Always start off by dragging out a Layout element to create structure, then add more content inside.

Tip 3 – Use margins & paddings to create space between elements.

While margins push other elements further away, paddings push the content inside the element further in.

Structure of web element

๐Ÿ‘Use percentage unit (%) instead of pixel (px) to keep it responsive.

๐ŸšฉBe very careful when using margins and paddings cause you may lose track of them. Use sparingly only when needed.

๐Ÿ‘‰ Read how-to.

Tip 4 – Edit a chosen element with the Inspector.

All elements can be edited in terms of generic settings, styles and advanced effects.

You can edit an element with 3 tabs in the Inspector:

  • General: Set generic style for the element to apply on all devices.
  • Styling: Edit text, background and other styles on all or custom devices.
  • Advanced: Add animation and custom invisibility effect for the element.

Tip 5 – Preview page across screen sizes.

All PageFly designs are responsive by default. But it’s a best practice to toggle between screen sizes to make sure things are looking good ๐Ÿ˜‰

๐Ÿ”บYou can build custom design for each screen size using Device Switcher and Styling tab.

๐Ÿ‘‰Read how-to

๐ŸšฉOnce you set a fixed dimension for an element on All device, the dimension will apply on all other devices. So always check other screen sizes before publishing.