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.
👍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.
🚩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.