12 TOP TIPS FOR MASTERING CONTENT COMPONENTS


In this, the last Episode of Series 3, we look at the 12 Content Components that can be added to Frames. Having built 1000's and 1000's of website pages, it's safe to say I've picked up a few tricks along the way. To close out the series and make it a little more fun, we'll tackle all 12 with a Top Tip that you can easily apply to supercharge your content editing.


Adding Content Components

In the Layout drawer, you will have no doubt noticed that you can drag in content components and drop them anywhere on your page.

Over the years we got a little tired of opening a closing a drawer, the beauty of building your own software is that you can create what you like. So we decided to add a '+' right on the Frame tools. When you select a Content Component it will automatically drop to the bottom of the Frame. Though a Top Tip would be to hold the 'alt' key and select the component, it will then drop to the very top of the list. Once on the page, you can drag the component anywhere and even drop it in other frames on other parts of the page.


Text Component
Text Component

The Text Component has a range of features that we've modified to suit MOBLE. The Top Tip would be to get to know how we've modified the normal text editor that you might see to suit MOBLE websites.

  1. Inverse Background Colour
    On MOBLE websites you can change the background colours easily, so it's only a matter of time before you try to edit white text in the white Text Component popup. MOBLE automatically detect if you have a light background and light text, or a dark background and dark text and we automatically inverse the background colour for you. However, this is just an algorithm we've written, sometimes the colour shades might be too close. You can use the inverse background button to toggle the share of the Text Component background.  

  2. a Toggle Case
    If you migrating large volumes of content you'll often want to change the case of Headings to be in line with your new brand guideline. Toggle Case you can highlight your text then flip between upper and lower case to save you retyping your headings. a

  3. Heading Style
    In the formats drop down you will notice a sub-menu for Heading Style. This replicates the style your Heading Fonts though, for the SEO nuts amongst us, it doesn't apply the Heading class in the code <h1>Word!</h1>. So if you want to use your large heading 1 font, let's say for a Maxim lower down the page, you can use the Heading Style 1 rather than the Heading 1. This won't confuse the search engines as you'll only have one Heading 1, located where it should be at the top of your page. You can rest easy not having to worry about getting penalised by Google for poor page structure. Yet for the rest of us, you can take advantage of your beautiful typeface and please us with extravagant use of fonts that bring attention exactly where you need it.

Image Component

Responsive design brought new challenges for content editors. How would images work on all devices and how would you be sure that large images on the desktop would be contained and format nicely on mobile?

On MOBLE we have a few tools to manage image size responsively and these are:

Width

You may decide if you what to display your image to actual pixel width or a percentage width of the frame.

  • Width (%) is a critically important tool for responsive design as it allows you to determine the width of the image in relation to the frame. In considering how the image will render on all devices MOBLE CMS automatically sets your image to 100%. This will ensure that your image will stretch to be 100% of the frame irrespective of the size of the device. I.e. it will automatically shrink and expand to fit the device through which it is being viewed. If you wish to reduce the size of the image, consider reducing the percentage of the image width, rather than reducing the pixel width.
  • Width (px) will set the image to a fixed pixel width. If the device screen is smaller than the width of the image, then the image will overflow to the right of the screen.

Height

You may decide if you what to display your image to actual pixel height or a percentage height of the frame.

  • Height (%) will render your image to be a % of the frame. If you use a % width and a % height then the width will override height. Given the nature of vertical scrolling 'Height (%)' is infrequently used. Leave this field blank unless for a very specific purpose (e.g. thin portfolio images).
  • Height (px) will set the image to a fixed pixel height.

Max Width

'Max Width' provides additional functionality that can enhance the look of your images. You can set 'Max Width' if you wish to control the maximum width of an image, even if on a particular device (e.g. desktop) the frame is wider than the image.

EXAMPLE:

Imagine that you have an image that is 900px wide and you do not wish it to stretch beyond 900px (otherwise it will become pixellated or blurry).
You set the (normal) Width (%) to 100% as default on MOBLE CMS.
On a Laptop the screen width is 1440px wide, therefore by setting the Max Width to 900px the image will not expand further than 900px.
However, on a mobile, that is say, 320px wide, the image will render to 100% of the screen width and shrink with the size of the device.
(This is why MOBLE CMS has 'Max Width' not 'Min Width').

'Max Width' can be set to an exact pixel width, like in the example above, or as a percentage of the frame (e.g. only ever display the image to a max of 90% of the frame).

Max Height

'Max Height' Can be used to make your image either a maximum % height of the frame or a maximum pixel height.

EXAMPLE:

Imagine that you have an image that is 700px high and you do not wish it to stretch beyond 700px (otherwise it will become pixellated or blurry).
You set the (normal) Width (%) to 100% as default on MOBLE CMS.
On a Laptop the screen width is say, 900px high, therefore by setting the Max Width to 700px the image will not expand further than 700px.
However, on a mobile, that is say, 568px high, the image will render to 100% of the screen width and shrink with the size of the device.
(This is why MOBLE CMS has 'Max Width' not 'Min Width').

Given the nature of vertical scrolling 'Max Height' is infrequently used. Leave this field blank unless for a very specific purpose (e.g. thin portfolio images).


Button Component

The Button Component does some nice things like enabling you to:

  • choose from a range of icons to add to your button
  • flip into ghost mode, so the button is see through with only a border
  • reducing the size to mini mode where less prominence it required
  • choose between inline to wrap around the text, or full width to touch the borders of the Frame

All this is quite intuitive and we encourage you to play. At the time of writing MOBLE is also in the development of a new Button Component and a CSS Button Builder in the Dynamic Styles area, so stay tuned for that.

Though the Top Tip has to be Anchors. This is not so intuitive but it is of great value, so definitely worth learning. You'll notice that when you open the Frame Tools, and go to the 'ADV' advanced tab. There is a Frame 'ID' type any word in here to name the frame. Ideally no spaces pease, but no big deal if there are. Then, when you go back the button Component you'll no see this word in the Anchor list. Simply select the Frame and click the 'Scroll to' button on. Then, your button will automatically scroll people to that Frame, so its a neat form of navigation.

Notice on this page you'll see the 'Jumpers', this is also using the Frame ID. To apply text anchors open the Text Component, then in the Link tool you can type in you Frame ID in the Url field. You just need to make sure you include a hash in front of it like this: #idname. Finally, in the class drop down just select Scroll and you're done. 


Widget Component

We cover Widgets in the Next Series. The Top Tip here would be to jump ahead and learn all about it. Widgets are one of the core features on MOBLE enabling you to control large volumes of content in feeds that you can pull on to your page and style the look and feel in a wide variety of ways.

SERIES 5: DYNAMIC WIDGETS

Form Component

You can create forms in the Forms area via the Main Menu. Once you create a form you can drop it on to you page here.

A Top Top would be to drop your form into a Frame, this will allow you to control the background colour or background image of your form.

You can do this as follows:

  • On the Frame click the '+' icon to add another Frame
  • Give the Frame a background colour
  • You can change the button colour in the main Forms Area when you create the form
  • Give the Frame some nice Padding

Now you have a beautiful form that is ready to start attracting new enquiries.


List Component

Lists are very similar to Menus, with the main difference that you can create your list directly on your page.

The Top Tip is to consider using a Link Component when you are creating a group of links to go to other websites.


Video Component

You can learn how to add Videos to your page from YouTube and Vimeo below.

The Top Tip, however, is not to confuse the Video Component with the Background Video. The Video Component can be used to drop videos on to the page. While you can add background videos in the Frame tools so that they run behind the content.

How to get the Embed code from YouTube:

  • Go to YouTube and open the page of the Video that you would like to embed.
  • Below the video, click the button that says 'Share'.
  • Now click 'Embed'.
  • Copy the highlighted embed code.
  • Go back to MOBLE and paste the code into the Video Component.
     

How to get the Embed code from Vimeo:

  • Go to Vimeo and open the page of the Video that you would like to embed.
  • If the video allows you to Embed the code you will see a 'paper aeroplane' share icon.
  • Click the icon and a popup will appear.
  • Click in the Embed area and copy the Highlighted embed code.
  • Go back to MOBLE and paste the code into the Video Component.

Social Component

To add Social Icons consider using one of the following websites:

You can use the Social Component to drop in the 'embed code' that you are given on these websites. You can, therefore, link to your social media pages from anywhere on your web page.


Google Maps Component

Simply type in your address and a Google Map will appear on your page.

Again, I would suggest adding a new frame and then adding the Google Map inside it. This will allow you to control padding around the map.


Code Component

Finally, the code component allows Frontend developers to create code for anything directly into specific parts of the web page. If you can code that will all make sense, if not the Top Tip would be to speak to a Frontend developer if ever you need extra help with design tweaks or coding new things.

If you are ever unsure speak to MOBLE for a guiding hand www.moble.com/let-talk