WIDGET TYPES

Widgets provide a powerful mechanism to categorise content, bring it to life with visual effects and manage large volumes of content quickly. As such, it's well worth getting to know your widgets, and MOBLE CMS comes with a series of widget right out of the box. 

MOBLE CMS 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 the same widget on your website, and you can even modify a widget so that it renders differently in every instance.

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


Widget Type

GRID WIDGET

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


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

Therefore, Grid widget is an incredibly useful widget to organise your content into groups that can be displayed to your user.

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 widget behaves when it links 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 does not pop up the image, like it would in a Gallery Widget. Rather, it opens a new page as defined by the Destination URL of the image.

    The Destination URL of the image can be updated in the Files area. The Destination URL of the image opens up a new web page. This makes a Grid of Images an extremely useful widget, for example, if you would like to link away to other websites, such 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:
            


Example Grid Image, showing a 5 column Grid of Pages. On clicking an image a new page would open up


Widget Summary Text

Grid Widgets will also display the widget 'Summary' text when you hover over a Card (we refer to the tiles of a widget as Cards).

The size of the card will change depending on the screen width of the device. The Summary text will automatically crop off, depending on the size of the card. 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 Portfolio widget. Your Portfolio Widget will always display 140 Characters, irrespective of the number of columns or the size of the device. 

CARDVIEW

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


Much like a Grid Widget, Portfolio Widgets also group associated pages and files together, enabling the user to click to open the new page or file.

The only difference between a Grid Widget and a Portfolio widget is how the widget looks.

  • Grids: As you can see in the image above, in Grid Widgets the Page Icon becomes a background image, with the Widget Text sitting over the image.
  • Portfolios: As you can see in the image below, in Portfolio Widgets the Page Icon is positioned vertically above the Widget Text.


Your decision to chose either a Grid or a Portfolio will really depend on what content is being displayed. You may decide on a per widget basis which is the best option for you content.

Widget Summary Text

Portfolio Widgets will also display the widget 'Summary' text. Therefore, Portfolio's are often used if you would like to display more text about your page or file before the users clicks for more information.

Your Portfolio Widget will always display 140 Characters, irrespective of the number of columns or the size of the device. 140 characters is the length of a Tweet, therefore, you may well already be used to summarising your information within this industry standard character length.
 

Lightroom is premium digital photography software that can be used for editing photos in bulk before uploading a batch of images to MOBLE CMS.
TOOLS WE USE. How to use 'Adobe Lightroom' to batch resize images.
Files Add File Help PAID PC MAC External Tools

Lightroom is premium digital photography software that can be used for editing photos in bulk before uploading a batch of images to …

VIEW
Pixelmator is premium digital photography alternative to Adobe's Photoshop Lightroom. The huge advantage of Pixelmator is that it is available for a low one-time fee of US$29.99 (at the time of writing).
TOOLS WE USE. How to use 'Pixelmator' to batch resize images.
Files Add File Help PAID MAC External Tools

Pixelmator is premium digital photography alternative to Adobe's Photoshop Lightroom. The huge advantage of Pixelmator is that it i…

VIEW
iResize is a free resizing tool that is available on Mac and PC. It is a go to free tool as you can resize large batches of images in one go.
TOOLS WE USE. How to use 'iResize' to batch resize images.
Files Add File Help FREE PC MAC External Tools

iResize is a free resizing tool that is available on Mac and PC. It is a go to free tool as you can resize large batches of image…

VIEW

MASONRY WIDGET

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


A Masonry Widget behaves in the same way as Grid and Portfolio Widgets, with one key distinction; the Cards (tiles) in a Masonry Widget do not have a fixed height. 

Widget Summary Text

As such, the height of the masonry widget is determined by the the content that sits within the card. The height for the card will automatically increase with the content of the widget 'Summary' text. Therefore, there are no summary text restrictions like with: Grids (restricted by the height of the card), Portfolios (restricted to 140 characters).

  • Grid: restricted by the height of the card
  • Portfolio: restricted to 140 characters
  • Masonry: no restriction in height


Default Masonry Configuration

As a standard configuration, the Masonry is a hybrid of the Grid and Portfolio.

Like the Grid, the Masonry displays the Icon image as a background, behind the text.

Like the Portfolio, the Masonry widget has guttering (margin between the cards).

If you would like to modify the display of your icon image or guttering within your widgets, please speak with your website designer; or you con modify this yourself in the HTML and CSS.

  • Grid: Guttering off, Icon behind text
  • Portfolio: Guttering on, Icon below text
  • Masonry: Guttering off,  Icon behind text

 
The Masonry widget also has a button to link to your page of file at the bottom of the Grid.

Masonry Widget as used by Optus Procurement Intranet

MIX WIDGET

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


Mix Widget is a special variation of Portfolio Widget.

As see in the image below, a series of Tags can be placed vertically on top of the Widget Cards (Tiles) as shown in the image below. When the user clicks one of the Tags, the widget will automatically filter to only display items that have that Tag. When the cards are in the process of filtering, you can see the Mix effect in action. This is a shuffling motion of the cards, which offers a pleasing visual enhancement to your web page.

Column Variations and Guttering

As standard the Mix Widget is configured as follows:

  • Page Icon: Portfolio style, Icon above the Text
  • Guttering: On
  • Columns: 4
  • Tags: Display in the card


If you would like your widget to to be configured differently, you may contact your web designer; or you may control the settings via the HTML and CSS.

Mix Widget used as an Events Calendar

SLIDER WIDGET

USED FOR: BANNERS | FEATURES | ADS


Sliders are used to transition Pages and Files from left to right.

Image Slider

The most obvious use case of a Slider is to slide a set of tagged images from left to right. The Slider will automatically display the image to be full width of the Frame in which it sits.

By default the Image Slider will open the image as a pop-up Lightbox. In exactly the same way as the Gallery widget works, see above.


Page Slider

The more dynamic and flexible use case of an image Slider, is to transition a set of tagged 'Section' pages.

To recap on section pages; when you change the 'Page Type' to 'Section', the Header and the Footer of the page are automatically disabled. Therefore, the Section page may sit neatly within another page. A section page has it's URL (web address) hidden, so it is not recognised as a page, even though you have full control to edit it in any way that you like.

The most common use case of a Section page is your Footer. To edit your footer you simply look for 'Hidden' and 'Section' pages, you still have the power to edit your footer just like any other page, even though it is not actually a real page.

With this in mind, to make your Page Slider, you may now create a series of Section pages, as follows:

  • In the Page Editor, click on your widget to open it.
  • Select 'Slider'
  • Select 'Section'
  • Select your tags 'Tags'
  • Select any other preferences that you would like to apply
  • Save. Now your Section pages will transition in a Slider

Page Sliders are extremely useful because you can completely change the content in each Section, so that each page Layout is completely different.

Pro Tip: When creating new Page Sections to be used in a Slider, you should ensure the height of each Section page is exactly the same height. This will allow for a nice even look when the pages slide. You can set this up as follows:

  • In the Page Editor, flip to 'Row' view at the top of the page.
  • Click the Pencil Icon in the Frame Tools.
  • Set the Height of the Row e.g. to 500px.
  • Try not to write too much content, so that the content does not overflow the space available in the Layout. Because the image is a fixed height, surplus content will overflow the bottom of the Layout. If your content does overflow, consider changing the 'Overflow' settings to 'Scroll'. 
  • Save your Page.
  • When you create new pages to appear in your slider. You can simply clone this page using the 'Clone Tool' in the main Page List area.


MULTI-SLIDER WIDGET

USED FOR: FEATURES | BANNERS | GALLERIES | ADS | NEWS | BLOGS | SERVICES | PRODUCTS | CATEGORIES | EVENTS | TOPICS


The Multi-Slider is a special type of Slider. It slides a group of tagged Pages or Files in a carousel motion from right to left.

Much like the Slider the user may swipe the Slider in either left or right direction using their mouse (using a 'click-hold-scroll' mouse action); or on mobile devices use their finger to swipe in either left or right direction.

A Multi-Slider is set up in exactly the same way as a slider. However, the width of each Icon in the card is a fixed width and this can not be changed.

Slider Actions

Clicking on a card will have the following action, depending on whether the Slider is set to Image or Page:

  • Page Multi-Slider: Opens a Page
  • Image Multi-Slider: Opens a Lightbox popup. If the image in the Lightbox popup has been assigned a destination URL, when you click on the full image it will link to that page.

DEFAULT WIDGET CONFIGURATIONS

The Widgets on MOBLE CMS are fixed designs. However, to give you greater flexibility we still enable you to modify the number of columns and hover over effects on certain widgets.

If you would like to change the look further you may edit the widgets in the HTML and CSS, or speak to you website designer.

As a rule of thumb we can summarise the user interface features as follows:

  • You can change the number of columns in your widget (except for Multi-Slider which has a fixed column width).
  • You can change the hover over effect of your widget.
  • You may not modify, add or remove the gutter for your widget.
  • You may not turn on or off the Widget Summary. If your page has a summary it will display on all widgets throughout your website, though if you no not add a Widget Summary it will displays nicely.


The default Widget configurations are set as follows:

Grid:
          ICON, TITLE, SUMMARY (ON HOVER)GUTTER OFF

Portfolio: 
          ICON, TITLE, SUMMARY, TAGS, MORE LINK, GUTTER ON

Masonry: 
          ICON, TITLE, SUMMARY (ON HOVER), MORE BUTTON, GUTTER ON

Mix: 
          ICON, TITLE, SUMMARY, TAGS, MORE LINK, GUTTER ON

Event: 
          ICON, TITLE, SUMMARY, TAGS, DISPLAY DATE, MORE LINKGUTTER ON

Blog:
         ICON, TITLE, SUMMARY, TAGS, DISPLAY DATE, AUTHOR, MORE LINKGUTTER ON

Product:
          ICON, TITLE, SUMMARY, TAGS, PRICE, MORE LINKGUTTER ON

Gallery:
          ICON, TITLE (ON HOVER), GUTTER ON

Multi-Slider:
         ICON, TITLE, SUMMARY (ON HOVER)GUTTER OFF

MOBLE CMS: BUILT FOR YOU

Short on time or feeling lazy? That's ok, many businesses are in the same position as you. If you would like MOBLE to build your website for you, get in touch with us today to have and let's have an initial chat to determine how we can best help you.

Talk to one of our expert consultants and we'll tailor make a solution that right for you.

LET'S TALK
BE A WEB DESIGN PRO

DESIGN
A CUSTOM WEBSITE WITH OUR
MOBLE CMS PRO COURSE.
START THE PRO COURSE

WEBSITES WITH MOBLE | Design Studio: 202, 56 Bowman Street Pyrmont NSW 2009 | © Copyright 2018 MOBLE Pty Ltd | Terms | Privacy