BUTTONS GUIDE


The Button Component enables you to control your button with a high degree of functionality.  MOBLE CMS considers conversion rate optimisation and it can be important to enable you to chose different colours and styles for your buttons.

LABEL:

Add the words that you would like to appear in the Button in the label field.

The button field is case sensitive so considered making your words UPPERCASE, is preferred in your design.

ANCHOR LIST:

Anchor List allows you to link a button to any frame or image on your page. This can be set up as follows:

  1. Give the destination frame or image that you would like to anchor an to ID.
    To do this:
    • Click the pencil icon on the frame tools, or click on the image.
    • In the 'ID (Anchor)' field, give the frame an ID.
    • TIP: ensure your ID is in lowercase and also with no spaces (use hyphens rather than spaces). E.g. #your-object
  2. Now return to the 'Anchor List' in the 'Button Component'.
  3. Notice that the Anchor List drop down will now display the ID that you placed in the frame or image.
  4. Select the ID from the dropdown.
  5. Ensure that 'Scroll To' is on.
  6. Now when a visitor clicks on your image the page will scroll to (either up or down) that frame position.


BEHAVIOUR:

  • Scroll To: Ensure scroll to is on for an anchor link to be effective.
  • Open New Window: Use open in a new window, if your Destination URL is linking to an external page.


COLOUR:

On MOBLE CMS you can choose from a range of colours for your Buttons. The colour of your Buttons use the accent colours that you set within your website Styles area. 

To edit the colour options available to you navigate to STYLES > COLOURS then scroll down to ACCENT COLOURS.

 

STYLE:

The following styles can be applied to buttons:

  • Ghost: 'Ghost' button applies a border around the button with a transparent fill, rather than a full colour fill.
  • Inline: Selecting 'Inline' will contain the button to the size of the words. Unselecting 'Inline' will make the button stretch to the full width of the frame in which it sits.
  • Mini: 'Mini' is the smaller variation of the button. The Mini button is smaller in height and also in horizontal padding on either side of the image.

ALIGNMENT:

You may set an alignment for your buttons. By default your button will be left aligned. Please note that you may also align your content (e.g. text, images and buttons) within the frame of which it sits.

  • Left Align - Aligns your buttons to the left.
  • Centre Align - Aligns your buttons in the centre.
  • Right Align - Aligns your buttons to the right.

ICON:

Icon allows you to select an icon font to sit alongside your button Label.

ICON POSITION:

Icon Position allows you to select the position that your icon sits alongside your button label. It may be positioned to either the left or right.

CLASS LIST:

Class List is a tool for advanced users to browse through available CSS classes and then apply them to a button.

CLASS:

Class displays the classes that have been applied to the button.

Did you know? A class is used in code to hook a particular style to an object. There is only ever one instance of a particular Class, therefore if the Class is updated, all objects that have been assigned with this Class will automatically be updated.

ID (ANCHOR):

There are situations when you may wish to give your button an ID. The most frequent use case is when you wish to anchor a link, an image, or even another button to your button. 

This can be set up as follows:

  1. Give your button an ID.
    • TIP: ensure your ID is in lowercase and also with no spaces (use hyphens rather than spaces). E.g. #your-object.
  2. You may now create an anchor link in the following locations:
    • Another Button. Use the 'Anchor List' drop down in any other button. 
    • An Image. Use the 'Anchor List' drop down in the image.
    • A Text Link. NB for a Text Link there is no 'Anchor List', however in the URL field, use a # before your adding your ID. E.g. #your-object.
  3. In Buttons and Images, notice that the 'Anchor List' drop down will automatically display your image ID.
    • Select the ID from the dropdown.
  4. Ensure that 'Scroll To' is on for Images, Buttons and Text Links (For Text Links, select 'Scroll' from the 'Class' dropdown).
  5. Now when a visitor clicks on the Button, Image or Text Link containing the image ID, the page will scroll to (either up or down) your button.

BUTTON REL ATTRIBUTE:

The rel attribute can be used by advanced users to specify the relationship of the button link and the destination link/document.

EXAMPLE

rel="nofollow" Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link)

el="alternate" Provides a link to an alternate representation of the document (i.e. print page, translated or mirror)

WEBSITES WITH MOBLE

 202, 56 Bowman Street Pyrmont NSW 2009
© Copyright 2018 MOBLE Pty Ltd
Home | Terms | Privacy