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.
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.
Padding set to 64px on all sides of the Frame
Padding set to 32px on all sides of the Frame.
PRO TIPS
- 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 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
- 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.
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.
CMS PLANS
Whatever the size of your website, all MOBLE Plans now come complete all the CMS 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!
CLIENTS & INTEGRATIONS
With a little help from our friends, we grow together every day
RECENT PROJECTS
RECENT INTEGRATIONS
