LAYOUTS DRAWER

We will now look at the Visual Page Editor. 

In the Pages area, click Edit, and you will be taken to the Page Editor. 

Notice that when I click Layouts, the Layouts Drawer opens, and you can see your Custom Layouts in the Theme Tab, tagged with your Sitename (in this case, my site name is 'dirty'). 

Now, here's the cool bit. 

I can also filter the Layouts for every MOBLE theme, such as Babu, Clio, Eriz, Yuzi. 

We're always adding new themes, so you always have the latest designs at your fingertips. 

When you drop them on a Page, look how the AI transforms them into your brand, with your Colours, Fonts, Images and even trues up the padding and alignment from different themes. 

To drop them on a Page, notice the Blue Drop Zone; just click on a Layout to drop it in the Zone.

Now, there aren't just Layouts from Themes; there are also 5,000 base Layouts here in the Type Tab. 

Where you can Filter Layouts by Type. 

There are Layouts for everything from Products, Categories, Events, Footers, Menus and countless generic Layouts categorised by columns.

Now, on MOBLE 3, we've introduced Blocks to the Layouts Drawer. Block are for things that sit inside a Layout for example Cards, Lists, FAQs, Read More etc.

To Drop a Block inside a Layout. I recommend clicking on the Innermost Frame. 

Where I’ll click the Plus Icon in the Frame Tools. 

And here, you can Embed components into the Frame like Images, Videos, Maps, and Widgets for Content Feeds like Galleries, Sliders, Products, and Events, and also Code for custom HTML or embded widgets from third-party apps. 

AND, notice…. 'Blocks'. 

If I click Block notice the drop zone is on the inside of the Frame.

The Frame Drawer Opens, and in the Type Drawer I can filter by ‘Blocks’.

And now since we’re moving on to this later in this video I’ll drop in an AI Chatbot, with an AI Voicebot. Notice how Chatbots and Voicebots are combined in the same Block….More on this shortly.

But while we’re here, if you’re new to MOBLE. Notice that when I click the pencil icon the Frames Drawer Opens where you can customise every frame, with Background Colours, Gradients, Background Videos.

You can configure BAckground  Images,

You can create Effects

Control Padding and Positioning.

And dive deeper into advanced tools like deciding the Responsive Design Behaviour and different devices and using CSS Classes.

We’ll now take a close look at Frames in more detail in a few minutes.

Again Remember, every feature as useful; Help Videos, so you can learn on demand.

You can also watch Day 3 of the 5 Day Challenge which is a follow along, step by step learning covering all the features of the Frames Drawer.

LAYOUTS REVIEW
Now, as a point of inspiration, let's look at the final Layout designs for the DirtyFeet website. 

IN the Layouts Drawer, you can see the beautiful custom branded layouts ready for the content drop with confidence, and mix and match them as they wish to build the pages that they need. 

Often, our clients are confident and excited to use the MOBLE platform for content, but just want the MOBLE to design beautiful drag-and-drop layouts for there brand.

For this reason, we have brought back the "The Built For" you solution, where you can click in the Top Bar of the Pages area to request a quote from the MOBLE design team, or our growing community of certified AI Agency design partners. 

But with that said, there's no reason why you cannot design and build from scratch too. 

To the standard where you can look at any design in the world and recreate it for your brand in moments. 

So now, let's look at exactly how you can do just that, and build your own $5-$50k website for free.