There are hundreds of pre-styled Base Layouts that are included with every MOBLE website.
The Base Layouts are individual rows that can be dragged and dropped on to any page, and you can easily swap and change the position of your Layouts.
Start by using Base Layouts to create entire pages from scratch, or by adding Layouts to existing pages. There is no limit to the combinations that you can create and therefore you have the flexibility to make every page purpose-built to suit your intended content.
Base Layouts are the backbone of the Page Editor and it is highly recommended that you become familiar with them so that you can rapidly produce amazing designs.
With so many Base Layouts on offer, it's important that they are catalogued in a way that you can find what you're looking for. When you open the Base Layouts you will notice a 6 column structure (as in the image above).
The Base Layouts are catalogued by the number of columns that they are divisible by. For example, if you are looking for a full-width banner this would fall into the one column Layouts. Similarly, if you were looking to have 4 columns in your Design Layout, then this would fall into the 4 column area.
The structure is very simple, the only thing to keep in mind is when you have, say, 2 columns, where the column widths are divisible by 4. Exploring this example, let's say that you wanted to have a Base Layout that was 1/4 to the left, and 3/4 to the right. Well, this would fall in the 4 column area since it is divisible by 4. That is, even though there are 2 columns, it is the column width that is important to consider when shaping for your optimum design.
This method of structure not only lets you find a huge amount of layouts quickly, it also forces you to consider the alignment of your content between rows. It's often a desirable design practice to have consistent alignment on your pages and this methodology lets you page stay precise without you really having to think about it.
In later tutorials, we'll talk more about padding and alignment, as this is a key design feature to master to set you on your way to becoming a content management pro. For now, all you need to do is find the Design Layouts that will work best for your content and drag them onto the page canvas.
Pages are collections of fully made pages. They are premade combination of Base Layouts that are intended to inspire you for the more typical types of pages e.g. Home, Contact or Landing Pages.
You certainly do not have to use Page Layouts, though you might find them useful to get you started, then drag in additional Layouts, or remove the rows that you do not require.
Once you're happy with a Page Layout it is important to consider that you may save the layout for future use. Use the [ SAVE] button in the Layouts Drawer to save the Entire Page as a Layout. Once you have saved your page it will appear on your 'Site Layouts' tab.
When you save either a Page or a Row as a Layout, they will be saved to the 'Site Layouts' Tab.
Sections are incredibly useful to have at your disposal within the Page Editor. Examples of sections are things like your Footer, or if you are using a slide in full page 'Menu Section', or a slide in 'Action Section' in your Header. Here you have options for this essential content that again can simply be dragged on to your page.
Please note that you can access your Section Pages from various locations around MOBLE, these are:
- In the 'Styles' area there is a tab for accessing key Sections
- In the 'Navigation' area there are links for accessing key Sections
- In the 'Pages' area you can search for any section simply by highlighting 'Section' (and you might also highlight 'Hidden'), then clicking search.