In this, the last Episode of Series 3, we look at the 12 Content Components that can be added to Frames. Having built thousands 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 and closing the Layouts Drawer then dragging and dropping components via 'Build' tab. 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 saving the action of having to have to drag and drop. 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.

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. a Toggle Case
   If you are 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 means you can highlight your text then flip between upper and lower case to save you retyping your headings. a
   
   
2. Heading Style
   In the formats dropdown 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.
   
   

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 want 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 pixelated 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 pixelated 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).

_{Here, the image is set to 100% of the Frame Width. Since some screens are wider than 1440px, Max Width ensures the image does not stretch more than 1440px, and therefore it will not become pixelated.}

_{Customised Buttons with your Primary and Accent Colours. Adjust the shape and Icons.
Click on the Question Mark Icon next to each Field for further information.}

7. 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.

8. SOCIAL SHARE COMPONENT

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

• www.addthis.com
• www.sharethis.com

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.

9. 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.

10. 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.