CHOOSE FROM 40 FREE DESIGNS
SUBMIT YOUR OWN DESIGN & RECEIVE A 40% PER MONTH ROYALTY
Select your free website design, then completely make it your own with our easy to use website builder and CMS.
WEB SHOP
Typical things we get asked to build:
CUSTOM WEBSITE DESIGN
ECOMMERCE BUILDS
CUSTOM HEADERS
VIRTUAL VENUES
SMS/WHATSAPP NOTICATIONS
CHAT BOTS
STORE LOCATORS
CUSTOM PAYMENT SYSTEMS
CUSTOM DIRECTORIES
CUSTOM PLATFORMS
CUSTOM DEVELOPMENT
INTERNET OF THINGS
WEB QUOTE
Get a Quote on any custom bits you need.
REPUTATION EDGE
S03 | E02 | HOW TO MAKE A WEBSITE LIKE A PRO
Paul Davenport | 6 min read | 5 min video
NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
There are many Layouts on MOBLE, so it's important to know what they are and how they are categorised:
BASE LAYOUTS:
These are MOBLE's out-of-the-box 'Base' Layouts that come with all MOBLE website. They can be dragged on to any page to get you started from scratch extremely quickly. We frequently update and evolve the Base Layouts to stay on trend with contemporary styles and technological advancements.
MY SITE LAYOUTS:
These are your personalised websites Layouts that have been made specifically for your brand. You can reuse across your website pages by dragging them into any location. You can save Layouts as a Row, or an entire Page. These Layouts conveniently live in the 'MY SITE' tab.
MY TEAMS LAYOUTS:
Website Designers and Website Design Agencies can apply to be a Partner.
Partners can create their own branded website designs and promote them on moble.com to receive a 40% share of monthly plan, for the lifetime of the client. This offers an incredible passive income stream for design partners. Partners don't have to promote all their designs on moble.com, they may protect design IP and create agency specific website templates, to be used for rapid design for their own agency clients. Teams work together to tweak and improve their Layouts before adding them to their Team Sites. When clients log in to the their websites, you can give them access to your designs, so that your agency is branded within the MOBLE Visual Editor. When a client drags your Team Layouts on to their page, the design Layouts will instantly swap from your branding to inherit your clients branding.
MY LAYOUTS:
Website Designers can create Team Sites, but often Website Designers would like to keep their own collection of Layouts. Therefore, Web Designers can save their favourite Layouts to their "My Layouts" tab. When a Designer logs in to any MOBLE website they will see their personal collection of Layouts, in their My Layouts tab. Our Web Designers may have many client websites, and this feature allows them to reuse their work across their projects for absolute convenience and time-saving. It's also nice for Web Designers to showcase a portfolio of their work that they can access and demonstrate to prospective buyers and colleagues at any time. If you're a Website Designer first apply to be a Web Design Partner.
BASE LAYOUTS:
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.
COLUMNS:
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.
GRIDS:
Grids can be used for where you wish to go beyond a standard column design layout and spice up your page with a stylish look and feel. Drag any Grid on to your page and ensure you're in 'Block' mode via the top bar.
For each grid your may wish to:
- Use the Outer Block to change the Background Image or Background Colour
- Use the Inner Block to change the content component. To do this use the '+' icon on the inner block and select any component such as Text, Images, Videos etc.
PAGES:
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.
They are a great place to start. You can always drag in additional Layouts to quickly page the page your own, or remove any extra rows that you do not require.
SAVING LAYOUTS:
SAVING PAGES
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.
SAVING ROWS
As well as saving an entire Page as a Layout, that you can also save an individual Row as a Layout too. In 'ROW' mode, simply click the Check Icon.
When you save either a Page or a Row as a Layout, they will be saved to the 'Site Layouts' Tab.
SECTIONS:
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 '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.
WIREFRAME MODE:
It is possible to Toggle 'On' the Wireframe mode.
Wireframe mode is only ever seen on your MOBLE site name, and never on your actual Live domain name.
Therefore, you can still view wireframe mode even if your website is Live. As follows:
- https://your-site-name.moble.site - Can see and share Wireframes.
- https://www.your-website.com - Can not see or share Wireframes.
In Wireframe mode the text, images, and other components are replaced to show placeholders that denote where the content will appear.
Jump ahead to the Next Episode to Learn More about Wireframes
BUILD - COMPONENTS:
Content Components can also be dragged onto the page canvas from the Layouts Drawer. It is also important to note that in the Frames Tools you can also add Content Components using the '+' icon.
The Content Components allow you to add a wide variety of content to your page and there is a specific tutorial section for each content component.
The following Content Components are available as standard:
- Text
- Image
- Video
- Map
- List
- Button
- Form
- Menus
- Social
- Code
- Block
- Frame
BUILD - BLOCKS & FRAMES:
Please note:
You only really need Blocks and Frames if you are an advanced Web Designer, looking to design and build your own layouts completely from scratch. Bear in mind that this is not impossible for any user, though it does take the mind and skillset of a graphic designer.
With that said, Layouts are made up of a series of Frames. Each Frame offers you a range of design features, such as adding properties like a background image, colour or overlay. You can also control the padding and alignment or add Content Components such as text and images.
Consider Frames like layers with each Frame being responsible for a different set of purposes. On a webpage, it is rare that you would ever have one Frame by itself as there always needs to be an element of padding or action.
Therefore, to save you time, if you are a creating a layout from scratch you would use a Block. A Block is at least two Frames working together where the outer most Frame has the padding and the inner frame has the component.
In later tutorials, we talk about Padding and Alignment and show you how any user, even without a designer's mind, can quickly master padding and alignment for your website pages.
FREE
PLAY BEFORE
YOU PAY
MINI
12
PAGES
PLUS
50
PAGES
PRO
500
PAGES
CUSTOM
UNLIMITED
PAGES
PARTNERS & INTEGRATIONS
Connect your website to our ever growing community of friends...
Play before
you Pay?
Design a website in under 3 minutes!
GETTING AROUND
GET A QUOTE
A Web Builder for Design. A CMS for Business. 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.