TEXT COMPONENT

Text Component provides you with a range of tools to style the text on your page. Moving from left to right we define each tool of the Text Component below:

Text Component


    FORMATS

Formats is an essential tool for content management. It allows you to control the pre-formatted heading styles of your text.

You may change your Heading Fonts by navigating to THEMES > FONTS.

You may change the default Heading Colours by navigating to THEMES > COLOURS and scrolling down to FUNCTION COLOURS.

You may override the default colour within the TEXT COMPONENT.

'Heading Style' are headings that use the same heading style as the main Heading, however, they do not apply the heading <h> tag. The heading tag is used by search engines to index your page. Therefore, as a rule of thumb, only one Heading 1 should be used per page, only a small number of Heading 2's and so on. This allows the search engines to understand the key information on your page and prioritise it accordingly. I.e. try to put more important/relevant  words in the main headings, as these will be given more importance by the search engines. 'Heading Style > Style 1' would be used where you would still want to use the same look as your Heading 1, though, it might be lower down in the page and you do not wish it to have the same priority as your Heading 1. 

'Blockquote' text indents your text, heading styles may be applied to Blockquotes. It may also carry additional styles as set by your designer in the CSS.

'Strikethrough' text applies a line through the text.

'Superscript' text appears half a character above the normal line, and is rendered in a smaller font.

'Subscript' text appears half a character above the normal line, and is rendered in a smaller font.

   BOLD:

Bold quite simply makes your text bold. Highlight the text that you would like to be bold and click the bold icon.

    ITALIC:

Italic makes your text italic. Highlight the text that you would like to be italic and click the italic icon.

   UNDERLINE:

Underline, underlines your text. Highlight the text that you would like to underline and click the underline icon.

It is important to note that you can change the colour of your underline so that it is not the same colour as your text. This is a simple way to give a nice contrasting look to your text. You can do this by navigating to THEME > COLOURS and scrolling down to FUNCTION COLOURS.

   UNDO:

Clicking on the Undo icon will undo your last action.

If you have saved your text change already, you can use the UNDO button in the top bar of the Page Editor. Clicking this button will undo your last actions sequentially, to the point of your last saved the page.

   REDO:

Clicking on the Redo icon will redo your last action.

If you have saved your text change already, you can use the REDO button in the top bar of the Page Editor.

Tx  CLEAR FORMATTING:

Clear Formatting clears all pre-existing formatting of your text. Simply highlight the text that you would like to clear and click the icon.

This feature is extremely important if you are copying text from another location. E.g. from your old website. It is especially useful as it preserves the line breaks and paragraph breaks but strips the text styles, making your life that little bit easier.

* Please note MOBLE CMS makes your life easier by automatically striping unnecessary characters from programs like Microsoft Word. Therefore, a paste from Word feature is not required, this is automatically done for you. You can use the Clear Formatting icon if you notice certain styles are still persistent after pasting.

   ALIGN LEFT:

Align Left will align your text to the left. The default is naturally align left unless you make a change to another alignment.

   ALIGN CENTRE:

Align Centre will align your text to the centre.

   ALIGN RIGHT:

Align Right will align your text to the right.

   JUSTIFY:

Justify aligns you block of text so that the words align to the left margin and also align with the right margin. This technique is used commonly in books and magazines, it is not considered suitable for letters and other forms of personal communication.

   BULLET LIST:

Bullet List is used to list out items that you wish to define. It applies a bulleted list as follows:

  • Item 1
  • Item 2
  • Item 3
   NUMBERED LIST:

Numbered List is used to list out a series items that you wish to define. It applies a numbered list as follows:

  1. Item 1
  2. Item 2
  3. Item 3
   INCREASE INDENT:

Increase indent will indent your paragraph. Each time you click the icon it will increase the indent of your selected text.

   DECREASE INDENT:

Increase indent will indent your paragraph. Each time you click the icon it will increase the indent of your selected text.

  DIVIDER:

Divider adds a horizontal divider line above the point of your cursor. The divider line spans the width of your text area. This style of your divider line can only be changed by Web Design Partners or if you are on Pro Account and understand CSS.

  TEXT COLOUR:

Text colour enables you to change the colour of you text. The colour palette available to you is edited by navigating to THEME > COLOURS. Any colours used in this area will be added to you colour palette.

You may also add more colours (though not recommended to preserve a consistent website style), by clicking the 'Source Code' icon and replacing the six digit hex code for the colour.

a  TOGGLE CASE:

Toggle Case is a brilliant feature to save time when pasting content from other areas. This feature enable you to keep you preferred case consistent through your website.

Highlight your text, then click the icon to change the case. Your Text will toggle between UPPERCASE and lowercase.

E.g. Your preferred Heading 3 text style is UPPERCASE, however, when you paste it from it original source, it is in lowercase. You can use this feature to quickly save time when styling your text.

   INSERT/EDIT LINK:

To add a link, highlight the text that you would like to link and click the link icon.

  • Url - This is the page that you wish to link to (e.g. http://www.moble.com.au).
  • Text to display - This is the text that displays on your page. This will be automatically populated if your highlight text before clicking.
  • Title - The title appears when you hover of the link it let's users, screen readers and search engines know a little bit more about the link. Be descriptive and succinct with your Titles.
  • Link List - Link List displays all of the existing 'Live' and 'Hidden' pages on your website.
    • Note Link List will also display Draft pages (If you link to a draft page the page, this will create a broken link. If you are not logged in to the CMS this will take you to your 404 page). Therefore, only link to Draft pages if your website is not yet live).
    When linking to an existing page there is no need to display your domain name (e.g. http://www.moble.com.au), only the path is require, starting with the forward slash (e.g. /about-us).
  • Rel - The rel attribute can be used by advanced users to specify the relationship of the link. E.g. if linking to an alternate version rel="alternate", or if linking to an icon rel="icon".
  • Target - Target plays an important role and 'New Window' should always be considered when linking to another website. New window will open the link in a new window and leave your existing page open. This is especially important to reduce bounce rates, i.e. keep visitors on your website.
    • NEW WINDOW - Apply new window when linking to an external website. 
    • NONE - Leave as 'None' when linking to a page within your own website.
  • Class - Class is used by advanced users to apply elements of CSS.

   REMOVE LINK:

To remove a link, place your curser inside the link and click the remove link icon.

   INSERT IMAGE:

You can place an image inside your text. However, please consider that your image will not be responsive. I.e. if the image is wider than the width of the device screen, it will overflow and will not be contained within the device. Therefore, consider only using images below 320px wide if you need to add images here.

If you wish to add images, rather than adding an image here, it is much better to add an image using the '+' add component plus icon. This will add an image inside the frame.

PRO TIP, remember, you can also hold the 'Alt' key and click '+" to add the image to the top of the frame (rather than to the bottom). You can then drag and drop the image to your preferred location.

   TABLE:

Tables can be used by advanced users, though do consider the width of you table. In HTML tables are not responsive.

   SOURCE CODE:

Source code is a feature for advanced users to edit the HTML of your text area. 

BE A WEB DESIGN PRO

DESIGN
A CUSTOM WEBSITE WITH OUR
MOBLE CMS PRO COURSE.
START THE PRO COURSE

WEBSITES WITH MOBLE | Design Studio: 202, 56 Bowman Street Pyrmont NSW 2009 | © Copyright 2018 MOBLE Pty Ltd | Terms | Privacy