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.
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.
The 8 Padding Width Variants are:
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.
Padding set to 64px on all sides of the Frame
Padding set to 32px on all sides of the Frame.
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.
Follow the rules as set out in Episode 4. This best practice will ensure you stay on track.
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.
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
In the 'Class' box write 'block'
This Frame will now be Dark Dlue.
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.
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.
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.