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.
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:
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.
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.
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.
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).
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.
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
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:
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
USED FOR: PHOTO GALLERIES
Photo galleries have long been essential aspects of websites, used to display a collection of images within a gallery module.
MOBLE CMS Gallery displays thumbnail images in the Gallery Widget. When the user clicks the thumbnail image it opens up as a full image in a Lightbox carousel.
As standard the Lightbox pop-up will display the following:
The following image attributes, can also be displayed in the Lightbox, but require a website designer to edit the CSS:
Gallery Thumbnail Grid Display
Please note that the number of thumbnail Columns in a gallery can be controlled in the Widget Component. You may chose to display between 1 to Columns.
The number of thumbnail Rows can be changed globally via your website designer in the CSS. The thumbnail Rows is being added in forthcoming MOBLE CMS releases, please feel free to let us know if you would like to edit this feature immediately.
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:
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:
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:
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:
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 LINK, GUTTER ON
Blog:
ICON, TITLE, SUMMARY, TAGS, DISPLAY DATE, AUTHOR, MORE LINK, GUTTER ON
Product:
ICON, TITLE, SUMMARY, TAGS, PRICE, MORE LINK, GUTTER ON
Gallery:
ICON, TITLE (ON HOVER), GUTTER ON
Multi-Slider:
ICON, TITLE, SUMMARY (ON HOVER), GUTTER OFF
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.