5 FRAMES METHOD
Now for a key design principle. And that is how to maintain consistent padding and alignment with all these Layouts, all these themes, different devices, and different team members. 

You can imagine that your website could quickly become messy and ruin the beautiful work of the original designer.

To solve this problem, MOBLE invented the 5 Frames Method. 

For now, you only need to be conscious of the 5 Frame Method, so that you’re aware of the structure of Layouts, and you'll find that all 5,000 drag-and-drop Layouts and the AI Layouts Assistant will all magically work in harmony.

So th.is is the 5 Frames Method, for making a Layout.

1. Outer Padding
2. Max Width
3. Columns
4. Inner Padding
5. Component

The most widely used settings are 

1. Outer Padding 64px
2. Max Width 1440px. But you can use 1280px for a tighter reading pain
3. Columns - you can add and flip between premade columns
4. Inner Padding 32px. But you can use 16px
5. The component has no Padding for width, but sometimes you'll add padding to the height

Now that's it. 

You shouldn't need to change this padding at this stage; you just need to understand why it is there.

Now for detailed tuition, Day 3 of the 5-Day Challenge goes through this in full detail and teaches you how to become a web designer to the standard that you can look at any layout and build it from scratch in moments. 

ONE 
A common question is, "What's a Block?" Well, a block is applied to the Inner Padding and appears Dark Blue. When on, this indicates to the AI that it should apply the Inner Padding (e.g. 32px) when new Layouts are dropped. However, the AI won't apply inner padding if you toggle Block' Off'. Again, just be conscious of this, or do Day 3 of the 5-day Challenge to become a Web Design Pro.

TWO 
You should also know that in the Elements Area, you can set your theme's default padding and alignment. When you drop new Layouts in the future, these settings will be applied. Meaning all the Themes and the 5,000 Layouts will work together. 

MY TOP TIP 
MOBLE is a web builder for designers and a CMS for businesses, with an all-in-one No Code Visual Page editor.
If you're a designer and building pages, flip to 'Design Mode' and you can build anything.
If you're a Business editing content, then flip 'Business mode' and you'll be able to edit everything.

FRAMES DRAWER
Now let's look at common features on the Frames. By clicking the 'Edit' icon on any Frame, the Frames Drawer opens, and the Active Frame is indicated with a Red Dot. 
In the Background Tab, you can see our Background colours are updated with the Colour Swatches we created earlier. This ensures your entire team stays on-brand and does not introduce new colours. 
You can apply a Background Colour. 
You can spice it up with a gradient. 
You can change the Gradient angle.
You can even animate the gradient with a pulse along the gradient angle and adjust the speed of the pulse. Very cool. However, do use it sparingly, as animations can add to page load speed if abused. 
Notice we can also add Background Videos and I'll come back to this in a couple of minutes.