• HOME
  • WEB SCHOOL
    • WEB SCHOOL LIVE | BOOK NOW
    • WEB SCHOOL ON DEMAND
      • SERIES 1 - Tour
        • Start with a Free Web Design
        • My Team. I Design, We Make It Work
        • Adding Pages, Your Home Page, & Understanding Page Types
        • What are Layouts & Content Components?
        • What are Sections, Footers & Action Sections?
        • Powerfully Simple Navigation and Menus
      • SERIES 2 - Styles
        • Adding your Logo
        • Website Headers, as easy as Point, Click, Save
        • 6 ways to customise your website Header
        • Shut your font face, that's easy
        • Play with Primary Colours for an instant design
        • What are Function, Accent and Supporting Colours
      • SERIES 3 - Page Editing
        • Getting around the Visual Page Editor on MOBLE
        • Understanding the Layouts Drawer
        • How to create and share Responsive Wireframes
        • Frames Masterclass - Design Pro Tips and Tricks
        • Frame Tools Pro Guide: Backgrounds
        • Frame Tools Pro Guide: Background Images
        • Frame Tools Pro Guide: Effects
        • Frame Tools Pro Guide: Padding & Alignment
        • 10 Content Components - Pro Tips
      • SERIES 4 - Widgets Tags Files
        • Understanding Dynamic Widgets
        • Grids, the most popular Widgets on MOBLE
        • Photo Gallery, Masonry & Mix Widgets
        • Widgets Special. Video Widgets & Page Sliders
        • How to Add a Blog on MOBLE CMS
        • Assign granular Tags like a Website Pro
        • How to upload Images and Files
        • Optimising Image Sizes and the Compression Engine
        • The Best Free Stock Image Websites
      • SERIES 5 - Forms & Integrations
        • How to add Forms to Pages
        • What are the Different Types of Form Fields
        • Form Settings: Essentials
        • Marketing Automation Integrations
        • Autopilot Form Integration
        • MailChimp Form Integration
        • ActiveCampaign Form Integration
        • What is Google Tag Manager
      • SERIES 6 - QA, Test, Go Live
        • How to Go Live: Delegate your Domain Name
        • 9 Step Quality Assurance Check Sheet
        • Page Check: System Pages
        • Optimise your SEO Meta Information
        • File Size: Image Optimisation
        • Redirects & Broken Links
        • Cross Browser & Device Testing
        • Testing Forms, Thank You Pages & Email Notifications
        • SEO Technical Audit
    • WEB SCHOOL HELP GLOSSARY
  • TAKE A TOUR
    • TOUR: DESIGNERS
    • TOUR: BUSINESSES
    • TOUR: PARTNERS
  • FREE DESIGNS
    • CMS PLANS
  • CLIENT STORIES
    • MEETMAGIC: WEB DEVELOPMENT
    • STUDIO MESSA: AGENCY
    • DIRTYFEET: NOT FOR PROFIT
  • 1800 800 822
PRIVACY / TERMS / WEBSITES WITH MOBLE

PICK A FREE WEBSITE DESIGN TO GET STARTED

GET STARTED QUICKLY WITH A FREE DESIGN, THEN COMPLETELY CUSTOMISE IT TO MAKE IT YOUR OWN.

AITKEN

DesignTeam MOBLEHome-Design-SliderDesign Group 7
08/04/2019
ALPHA

DesignTeam MOBLEHome-Design-SliderDesign Group 18
01/07/2019
ALPHONSO

DesignTeam MOBLEHome-Design-SliderDesign Group 9
26/11/2018
ALTON

DesignTeam MOBLEHome-Design-SliderDesign Group 4
31/12/2018
ASWAD

DesignTeam MOBLEHome-Design-SliderDesign Group 11
14/01/2019
AURA

DesignTeam MOBLEDesign Group 12
11/02/2019
BARRINGTON

DesignTeam MOBLEDesign Group 9
03/12/2018
BERES

DesignTeam MOBLEHome-Design-SliderDesign Group 12
04/02/2019
BOLO

DesignTeam MOBLEHome-Design-SliderDesign Group 1
08/10/2018
BOOTH

DesignTeam MOBLEHome-Design-SliderDesign Group 17
13/05/2019
BOSWELL

DesignTeam MOBLEHome-Design-SliderDesign Group 10
18/02/2019
CARLOS

DesignTeam MOBLEHome-Design-SliderDesign Group 7
25/03/2019
CEDRIC

DesignTeam MOBLEHome-Design-SliderDesign Group 16
20/05/2019
CHARLY

DesignTeam MOBLEHome-Design-SliderDesign Group 5
25/02/2019
CLIFF

DesignTeam MOBLEHome-Design-SliderDesign Group 13
05/11/2018
COOPER

DesignTeam MOBLEDesign Group 2
29/10/2018
DEKKER

DesignTeam MOBLEHome-Design-SliderDesign Group 1
01/10/2018
DELLIMORE

DesignTeam MOBLEHome-Design-Slider
17/12/2018
DILLON

DesignTeam MOBLEHome-Design-SliderDesign Group 16
13/05/2019
EARL

DesignTeam MOBLEHome-Design-SliderDesign Group 8
22/10/2018
EFFIE

DesignTeam MOBLEHome-Design-SliderDesign Group 2
11/03/2019
HIBBERT

DesignTeam MOBLEHome-Design-SliderDesign Group 14
01/04/2019
HORACE

DesignTeam MOBLEHome-Design-SliderDesign Group 13
19/11/2018
LAMONT

DesignTeam MOBLEHome-Design-SliderDesign Group 6
22/04/2019
MARCIA

DesignTeam MOBLE
04/03/2019
MADDEN

DesignTeam MOBLEHome-Design-SliderDesign Group 3
12/11/2018
MOTION

DesignTeam MOBLEHome-Design-SliderDesign Group 4
07/01/2019
MYSTIC

DesignTeam MOBLEHome-Design-SliderDesign Group 6
15/04/2019
OSBOURNE

DesignTeam MOBLEHome-Design-SliderDesign Group 3
10/12/2018
PHYLLIS

DesignTeam MOBLEHome-Design-SliderDesign Group 15
03/06/2019
ROSE

DesignTeam MOBLEHome-Design-SliderDesign Group 8
15/10/2018
RUPIE

DesignTeam MOBLEHome-Design-SliderDesign Group 17
29/04/2019
SCRATCH

DesignTeam MOBLE
02/09/2019
TENNOR

DesignTeam MOBLEHome-Design-SliderDesign Group 5
28/01/2019
TOOTS

DesignTeam MOBLEHome-Design-SliderDesign Group 10
24/12/2018
VIBRATION

DesignTeam MOBLEHome-Design-SliderDesign Group 11
21/01/2019
WILLOWS

DesignTeam MOBLEHome-Design-SliderDesign Group 15
27/05/2019
WINSTON

DesignTeam MOBLEHome-Design-SliderDesign Group 18
05/08/2019
ZIGGY

DesignTeam MOBLEHome-Design-SliderDesign Group 14
18/03/2019
  • AGENCY PARTNERS
  • RECENT WORK
  • WEB SCHOOL
TRY FOR FREE
JOIN
MOBLE PTY LTD
  • TOURS
  • DESIGNS
  • PLANS
  • STORIES
  • WEB SCHOOL
TRY FOR FREE
LOGIN
JOIN

A WEB BUILDER
FOR DESIGN


DESIGNERS

Be the designer every business loves. Make beautiful drag and drop layouts for your clients to enjoy with an all-in-one Web Design toolkit.

DESIGNER TOUR

A CMS
FOR BUSINESS


BUSINESSES

We help you make beautiful websites. Manage websites, little or large, in moments with a powerfully simple Visual Editor.

BUSINESS TOUR

A PARTNER IN OUR BUSINESS


PARTNERS

Accrue passive income with each design or referral. Manage your clients & share Designs Layouts with your Team.

PARTNER TOUR

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.
BROWSE THE FREE DESIGNS
Dekker Website Design by MOBLE

MEETMAGIC


meetmagic Website Design

CUSTOM WEBSITE DEVELOPMENT

STUDIO MESSA


Studio Messa Home

AGENCY PARTNER WEBSITE

DIRTYFEET


Studio Messa Home

NOT FOR PROFIT WEBSITE

 DESIGN 


DESIGN WORKSHOP

SHOP

WEBSITE DESIGN

SHOP

ECOMMERCE DESIGN 

SHOP

DIRECTORY DESIGN

SHOP
MORE

 CODE 


HEADER

SHOP

API INTEGRATION

SHOP
MORE

 GROWTH 


MARKETING WORKSHOP

SHOP

MARKETING AUTOMATION

SHOP

CONTENT MARKETING

SHOP
MORE

WEB SCHOOL


HOW TO MAKE A WEBSITE LIKE A PRO

Web School is an end-to-end, easy to follow series, aimed at both beginners and web design pros.

ON DEMAND COURSE

LIVE EVENTS


NEXT EVENT: 10 OCTOBER

Spend the day at MOBLE offices in Surry Hills and build you own website with the help from our team.

BOOKED OUT

HELP


FEATURE BY FEATURE GLOSSARY

Learn MOBLE as you go with this comprehensive glossary of features and FAQs.

HELP GLOSSARY

LAUNCH


14 DAY FREE TRIAL

ALL FEATURES

FREE

MINI


12 PAGES

ALL FEATURES

$9 /month

PLUS


50 PAGES

ALL FEATURES

$49 /month

PRO


500 PAGES

ALL FEATURES

$79 /month

CUSTOM


UNLIMITED PAGES

ALL FEATURES

LET'S TALK

GRIDS. THE MOST POPULAR WIDGETS ON MOBLE


S04 | E02 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  7 min read |  5 min video

Web School Series 4 Episode 2

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

MOBLE CMS has a range of configurable widgets out of the box that you can use to create feeds of content.

There are certain widgets that are used prominently right across the web, so it's important that you know how these work to realise the power of your new website.


WIDGET TYPES

As you have seen in the video above, widgets provide a powerful mechanism to categorise content, bring it to life with visual effects, and manage large volumes of content quickly. It really is worth spending a bit more time getting to know your widgets, and MOBLE comes loaded with a series of widgets right out of the box. 

MOBLE also gives you the ability to modify each widget to specifically suit your content. There is no limit to the number of times you can use a widget, and you can even modify each widget so that it renders differently per instance, even with multiple widgets on one page.

Below, we take a closer look at the different Types of Widget that are included on MOBLE CMS, out of the box.


GRID WIDGET

USED FOR: NEWS | BLOGS | SERVICES | PRODUCTS | CATEGORIES | EVENTS | TOPICS


Grid Widgets are used to display a grid of either Pages or Files (files are images, Documents, Audio & Video).

Therefore, Grid Widgets are an incredibly useful way to organise your content into groups that can be presented to your users.

The intention of a Grid Widget is to link your users from the widget to a group of associated pages. Here we look at how the Grid Widgets behave when linked to different types of content:

  • Grid of Pages:
    Displays the 'Page Icon', also known as a thumbnail. 
    When you click on the thumbnail you are linked to a new page.

  • Grid of Images:
    Displays the image 'File Icon', also known as a thumbnail. 
    When you click on the File Icon it pops up the image in a Lightbox gallery.

    The Destination URL of the image can be updated in the Files area. If you add a Destination URL to your image instead of the image opening up as a Lightbox Gallery, it will instead link to that page. 
    This makes a Grid of Images an extremely useful Widget, for example, if you would like to link away to other websites, such as a logo bank of your clients or partners that links to their website.

    • PRO TIP: When adding your destination URL for the image (in the Files area), if you add the full URL with 'http://www' at the start, it will automatically open as a new window.

  • Grid of Documents, Audio or Video:
    Displays the document 'File Icon', also known as a thumbnail.
    When you click the File Icon it opens the file in a new window.

    The File Icon can be edited in the Files area. When you upload the file, if you do not add a File Icon, an Icon indicating the file type will automatically display for you.

    Example File Icons:
            


Grid View

Displays the Widget Summary on top of the Image.

WEBSITE IN A DAY

Web Design
Web Shop Web Design
CUSTOM WEBSITE DESIGN

Web Design
Web Shop Web Design
ECOMMERCE WEBSITE DESIGN

Web Design
Web Shop Web Design
DIRECTORY WEBSITES

Web Design
SOCIAL NETWORK WEB DEVELOPMENT

Web Design
CUSTOM WEB DEVELOPMENT

Web Design
Card View

Displays the Widget Summary Above or Below the Image Icon.

WEBSITE IN A DAY

Web Design
Web Shop Web Design
CUSTOM WEBSITE DESIGN

Web Design
Web Shop Web Design
ECOMMERCE WEBSITE DESIGN

Web Design
Web Shop Web Design
DIRECTORY WEBSITES

Web Design
SOCIAL NETWORK WEB DEVELOPMENT

Web Design
CUSTOM WEB DEVELOPMENT

Web Design
List View

Displays the Widget Summary to the Left or Right of the Image Icon.

WEBSITE IN A DAY

Web Design
Web Shop Web Design
CUSTOM WEBSITE DESIGN

Web Design
Web Shop Web Design
ECOMMERCE WEBSITE DESIGN

Web Design
Web Shop Web Design
DIRECTORY WEBSITES

Web Design
SOCIAL NETWORK WEB DEVELOPMENT

Web Design
CUSTOM WEB DEVELOPMENT

Web Design

A NOTE ON WIDGET SUMMARY TEXT

As you can see in the example Widgets above, the Grid View will display the widget 'Summary' text on top of the Image Icon.

The size of the Image Icon will change depending on the screen width of the device. The Summary text will automatically crop off depending on the dimensions of the Image Icon on that device. It will automatically place an ellipsis (...) at the close of the text.

If you find that your Summary is too long to fit inside your image, you may consider either shortening the summary or perhaps using a Card View. Card View will always display 140 Characters, irrespective of the number of columns or the size of the device.


WIDGET CONFIGURATIONS

You can configure each Widget with exactly what you wish to display in your feed, simply by using the "Configure Your Widget" settings as shown in the image below.

As you are no doubt already aware, the Page Settings and File Settings area is where you manage the content for each item. E.g. the Summary, Price, Date, etc. is managed in the Page Settings area for each page.

Widget Configurations

SERIES 4

All Series Next EpisodeSeries 5
  • S4 E1 Understanding Dynamic Widgets
  • S4 E2 Grids, the most popular Widgets on MOBLE
  • S4 E3 Photo Gallery, Masonry & Mix Widgets
  • S4 E4 Widgets Special. Video Widgets & Page Sliders
  • S4 E5 How to Add a Blog on MOBLE CMS
  • S4 E6 Assign granular Tags like a Website Pro
  • S4 E7 How to Upload Images and Files
  • S4 E8 Optimising Image Sizes and the Compression Engine
  • S4 E9 The best free stock image websites

CMS PLANS


Whatever the size of your website, all MOBLE Plans come complete with all the 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 the Visual Editor and Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!

LAUNCH


14 DAY FREE TRIAL
FREE

MINI


12 PAGES
$9 /month

PLUS


50 PAGES
$49 /month

PRO


500 PAGES
$79 /month

CUSTOM


UNLIMITED PAGES
LET'S TALK

CLIENTS & INTEGRATIONS

With a little help from our friends, we grow together every day

RECENT PROJECTS

RECENT INTEGRATIONS

WEB
BUILDER

  • TOUR
  • HELP
  • ROADMAP

WEB
PLANS

  • $0 LAUNCH
  • $9 MINI
  • $49 PLUS
  • $79 PRO
  • $199 CUSTOM
  • FAQ'S

WEB
SCHOOL

  • HOW TO MAKE A WEBSITE
  • BOOK FOR LIVE EVENTS
  • CMS HELP GLOSSARY

WEB
STORIES

  • STUDIO MESSA Agency Website Design
  • DIRTYFEET Award Winning Design
  • OPTUS Custom Web Development
  • PELAGIC Social Network
  • SLABTEC Custom Website
  • BANKSTOWN SPORTS Not-for-Profit Website
  • HORIZON Agency Website Design

HIRE
MOBLE

  • WEBSITE IN A DAY
  • CUSTOM WEBSITE DESIGN
  • ECOMMERCE WEBSITE DESIGN
  • SOCIAL NETWORK WEB DEVELOPMENT
  • DIRECTORY WEBSITE DEVELOPMENT
  • CUSTOM WEB DEVELOPMENT
A WEB BUILDER FOR DESIGN. A CMS FOR BUSINESS.

Do it yourself or Hire a Pro! 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.

© Copyright 2019 MOBLE Pty Ltd |  489 Crown Street NSW 2010 | 1800 800 822 | Privacy

MOBLE WEB SCHOOL

Design and manage your own website

LEARN IT ALL & MORE