FRAME TOOLS PRO GUIDE: PADDING & ALIGNMENT


S03 | E08 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  5 min video

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


Padding and Alignment is an important consideration for both designers and copywriters, who should understand that alignment is critical to the overall look of the page. Mastering Padding and Alignment is a significant step to becoming a true content management expert. Therefore, we recommend this Episode to all CMS users.


PADDING TOOL

Episode 4 was in many ways a prerequisite to this Episode, where we look at each feature of Frames Drawer. Here we take an in-depth look at the Padding tool.

MOBLE CMS Padding Tool

The 8 Padding Width Variants are:

  • 0px
  • 2px
  • 4px
  • 8px
  • 16px
  • 32px
  • 48px
  • 64px

The images below show that padding and alignment can also be applied in Business Mode. This is because it is a critical part of content management for all users.

When you hover over a Frame in Business Mode the frame will light up allowing you to apply padding. You can do this as follows:

  • Click the Pencil Icon in the Frame that you would like to apply padding.
  • As normal, the Frames Drawer will open and the Pencil will flip to a red dot to indicate the Frame you are editing.
  • Click the 'Frame' tab and notice the Padding tool.
  • Apply your preferred Padding width.
  • Note that Padding is always applied to the inside of the Frame.
MOBLE CMS Padding 64px

Padding set to 64px on all sides of the Frame

MOBLE CMS Padding 32px

Padding set to 32px on all sides of the Frame.


PRO TIPS
  1. Use the 'Alt' key to save time when applying an even amount of Padding to a Frame.
    • Hold the 'Alt' key and click a cell, e.g. 32px. This will instantly apply 32 px to the Top, Bottom, Left, and Right, in one click.
  2. Follow the rules as set out in Episode 4. This best practice will ensure you stay on track.
  3. When in Content Mode keep an eye on the vertical alignment of the page. If you notice that certain content is not aligned then use the Padding Tool to realign. The MOBLE frame will set padding widths in the tool to help copywriters stay on track and better preserve the design for all users.
  4. In Design mode, you can view all Frames. To the untrained eye this can look confusing. You can choose to make certain Frames more prominent with a Dark Blue colour.
    • In Design mode, click the Pencil Icon of the Frame that you'd like to see in Block mode
    • Click Pro
    • In the 'Class' box write 'block'
    • This Frame will now be Dark Dlue.

MOBLE CMS Blocks

You can make Frames more prominent by adding a 'block' class to the Class Box. The recommended structure is that the inner Frame houses component like text and images. Then, the next Frame can have Padding, plus the 'block' class to make it prominent.

  1. Turn on 'Developer Mode' by holding Ctrl+Alt+Cmmd+d. Developer Mode lets you view additional items that are often in beta testing or that only advanced users will require. Extra Frames can often be seen in Developer such as Parent Frames for Columns/Grids.


LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES