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


MOBLE is a website builder for design, and a CMS for business. Padding and alignment is therefore a critical tool for the website builder and thus is by and large a feature for 'Design Mode'. However, Padding and Alignment is an important consideration for copywriters also, who should understand that alignment is critical to the overall look of the page and to master it, 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 5 Padding Width Variants are:

  • Off: 0px
  • On: 16px
  • Wide: 32px
  • Wider: 48px
  • Widest: 64px

The images below show that padding and alignment is best applied with Design Mode on. 

'Block' gives a visual view of Padding whereas 'Row' shows the total number of Frames.

Here you can see that in 'Block' when you adjust the padding in the Padding Tool, then the padding on the inside of the Frame is automatically adjusted.

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. Follow the rules as set out in Episode 4. This best practice will ensure you stay on track.
  2. 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.
  3. In Block mode, it is possible to view more than the two most inner Frames, allowing you to decide exactly which Frames you would like to see when in Block mode. This can be useful to some Pro users if there are ceratin Frames that you'd like to frequently change, or if you are designing pages with Effects such a Parallax.
    • In Advanced 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'
    • You can now see this Frame in Block mode
  4.  Please note that in order for to Frame to show in Block mode then it must have something in the Frame, as seen in the screenshot below.

MOBLE CMS Blocks

A Designer can determine the experience of the Team by designing which Frames can be seen in Block mode. In Advanced mode, notice the Class box. Here you can apply a class called 'block'. This will now ensure this Frame is seen by your team in 'Block' view. In this example the Team could change the colour Yellow to one of the other brand colours.