It's a good idea to get familiar with the way Tags and Widgets work.
What is a Tag?
Tags are used to group similar content together, very much like the way that you might put content into folders on your computer. Tags are not folders since they are non-hierarchical, therefore absolutely any content may be grouped together. A piece of content may be tagged with many different tags, with a huge advantage over folders because no duplication is required.
What is a Widget?
A Widget is used to display your grouped/Tagged content on your website. For example, a photo gallery might be used to display images that have been tagged with 'Burning Man Festival 2016'. A Blog might display your blog pages; similarly, a News widget might display Pages that are Tagged 'News'. You may even have Widgets for specific types of news such a 'Politics, or Sport. You could even tag content by a particular Authors and use a Widget to display all content by that Author.
Put simply, you can tag any piece of content (e.g. a Page or an Image). You can then assign that Tag to a Widget in order to display the tagged content on your website.
In the Video below, we take a very quick fly through of Tags and Widgets. The video is a quick introduction, in later Tutorials, we run through easy to follow Step by Step guides for using Tags and Widgets.
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.
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.
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
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: BANNERS | FEATURES | ADS
Sliders are used to transition Pages and Files from left to right.
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.
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.
Clicking on a card will have the following action, depending on whether the Slider is set to Image or Page:
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.
WEBSITES WITH MOBLE | Design Studio: 202, 56 Bowman Street Pyrmont NSW 2009 | © Copyright 2018 MOBLE Pty Ltd | Terms | Privacy