10 CONTENT COMPONENTS

PRO TIPS 


S03 | E09 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  8 min read |  10 min video

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


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.


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


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

Image Component

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.


3. 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,
  • reduce the size to mini mode where less prominence is 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 please, but no big deal if there are. Then, when you go back to 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.

To apply text link anchors (rather than buttons) open the Text Component, then in the Link tool you can type in your 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 dropdown just select Scroll and you're done. 

BUTTON HELP GLOSSARY
Button Component

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.


4. 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 4: WIDGETS, TAGS, FILES
Widget Component

Understand the Widget Component in Series 4.


5. 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 your page here.

A Top Tip would be to drop your form into a Frame, as 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.

Form Components

The Form Component lets you select from the List of your Forms. You can create new Forms in the Forms area.


6. MENU COMPONENT

Menus don't have to be limited to Header and Site Map menus. In the navigation area, you can create menus for any group of pages and then drop them anywhere on your page with the Menu Component.

Consider using menus for related links, even Top Tips! Whatever you can think of, it can be a nice user experience to give your users a choice to browse more of your content. Look at the right-side Menus on this page, they are created in exactly this way.

Just like with a Forms consider dropping your Menu into a Frame, so that you can give it a fresh background colour and the right amount of padding.

Menu Component

The Menu Component lets you select from the List of your Forms. You can create new Menus in the Navigation area.


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:

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.

FREE


PLAY BEFORE
YOU PAY

MINI


12
PAGES

PLUS


50
PAGES

PRO


500
PAGES

CUSTOM


UNLIMITED
PAGES

Play before
you Pay?

Design a website in under 3 minutes!

GETTING AROUND

GET A QUOTE

A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.