Prerequisites: If you need to know how to add a block, please read the Adding blocks article.
If you want to make slides visible to specific audiences, you need to contact the Support Team and ask them to enable the audiences filter.
Summary: Add and configure a button block to add buttons to pages. You can link buttons to courses, programmes, dashboards and more.
Configuring the buttons block
Once you have added your new buttons block select the and choose Configure Buttons block.
This will take us to the Block Configuration screen. There are various settings available on this screen but the only section we are concerned with is the top half.
General block settings, Where this block appears and On this page all refer specifically to the positioning of the block but it is not necessary to edit these fields as the block can be moved around the page using the .
To create your first button click Add Button.
This will add a grey square for the button, as it is not yet configured. Click on this to begin adding button styles.
Button settings
You now have access to the Button Settings, which is broken up into various tabs. The colours and button shapes on your LMS may differ slightly as it will be reflecting the theming of your site.
The tabs available in button settings are:
Global – Overall settings for all of the buttons added in this block. These settings determine how they appear, how they behave and the style of the buttons.
Link – Specify where the button will link to and whether you want this link to open in a new window.
Border – Specify whether there is a border around your button and what colour it should be.
Roundness – Modify the button with rounded corners, either manually or using predefined pre-sets.
Caption – Add text to your button. Captions will only appear if you have chosen Button styles 2-9 on the Global settings. This is because Button style 1 does not contain any captions.
Graphics – Style and choose the icon to be used for your button or upload a new image for your button.
Audiences – An additional option that allows you to determine if individual buttons are visible to specific audiences.
Each of these sections are explored in detail later in this guide.
The Button settings also contain the following buttons:
Delete button- This will allow you to delete any of the buttons you have added, simply click on the button you would like to delete, it will then display Active in the top left hand corner, and then click on this Delete button to remove.
Clone button - The clone button allows you to duplicate any of the buttons you create. To clone a button simply click on the desired button, it will then display Active in the top left hand corner, and then click on the Clone button to create a duplicate.
This can streamline the process for creating the buttons - you can configure the first button and then clone it for each of the other buttons. All you need to do then is to edit the individual settings for each button.
Update button - When making any changes to any of the button settings it is important to click this to apply your changes. A red circle will appear in the top right corner when you make a change that needs to be saved.
Global
Global settings apply to all of the buttons added within this button block, allowing you to keep a consistency amongst the buttons. Below is a breakdown of each of the settings within the Global tab.
Grid Type
Grid Type allows you to set how the buttons will appear on the page, the icon will provide a responsive design allowing your buttons to react to the screen size by moving buttons underneath each other on smaller screens. The icon with the four squares will provide a fixed grid which means your buttons will always appear in a line together.
To select a grid type you simply need to click on your chosen icon. The selected icon will show as white and the unselected one(s) will be grey.
Button shape
Button shape allows you to choose the shape your buttons will take. These can be customised further using the Roundness tab. You can click on your preferred button shape to select it.
- The top row will allow you to select no button shape
- The second row allows you to select either a small, medium or large square
- The third row allows you to select either a small, medium or large landscape rectangle
- The fourth row allows you to select either a small, medium or large portrait rectangle
Button alignment
Button Alignment defines how the button will be aligned. These can be left, centred or right. Simply click on the setting to choose it.
Button spacing
Button spacing defines the space between each of your buttons. This can be None, Small, Medium, Large, X Large or XX Large. Simply click on the setting to choose it.
Button styles
The button styles determine what will be displayed on the buttons and how they react when a user hovers over them. There are 9 styles available but options 1-6 will only be available if you have chosen a Button Shape, whilst options 8 and 9 will only be available if you have chosen no button shape.
-
1 No Caption – Displays the button with an icon or graphic and does not include an option for a caption.
-
2 Sliding Caption – Displays an icon or graphic and the caption text will slide to the top of the button when a user hovers over it.
-
3 Sliding Caption Alt. – Displays an icon or graphic along with the Caption Title. The Caption Body will only appear when a user hovers over the button.
-
4 Static Caption – Displays an icon or graphic along with the Caption Title only. Caption Body will not appear.
-
5 Fading Caption – Displays an icon or graphic and the Caption Title and Body will fade in when a user hovers over the button.
-
6 Fading Caption Alt. – Displays an icon or graphic with the Caption Title and Body which fades out when a user hovers over the button.
-
7 Text Only – Displays only text on your button and will not include any icons or images.
-
8 Text & Icon – Only available if no button shape has been selected and will display a smaller button with the icon on the left and caption title in the centre.
-
9 Text & Icon Alt. – Only available if no button shape has been selected and will display a smaller button with the icon on the right and caption title in the centre.
Fade on hover
Fade on hover will slightly fade out your button when a user hovers over it. The icon and captions will still be seen but slightly faded.
The icon on the left will switch this off and the icon on the right will switch this on.
Shadow
Shadow allows you to add a shadow around your buttons.
The icon on the left will switch this off and the icon on the right will switch this on.
Individual button settings
The remaining tabs on the Button Settings screen modify each of the individual buttons and do not apply to all buttons. When editing these settings, it is important to ensure that you are editing the correct button. To do this click on your selected button and it will display Active in the top left corner.
Link
Clicking on the Link tab in the Button settings will allow you to add a link to the button, this will determine where the users are redirected to when they click on the button. Please ensure you have selected the correct button and it displays Active in the top left when making these changes.
There are two options available in this tab:
-
Link: You can enter the URL that users will be taken to when they click on the button
-
Open in a new window: Place a tick in this box if you want the link to open in a new window
Border
The Border tab allows you to add a border around each of the buttons. Please ensure you have selected the correct button and it displays Active in the top left when making these changes.
To set up a border on a button you will need to edit the following three fields:
-
Border Width: This allows you to set the width of the border in pixels, to do this enter the value you would like to use followed by px. E.g. 5px will provide a border of 5 pixels on your button.
-
Border Style: This is a dropdown option that allows you to choose the type of border you want. The options available are None, Solid, Dotted and Dashed.
-
Border Colour: This sets the colour of the border on your button. You can enter the HTML code, RGB code or use the colour picker to select the colour you would like to use for the border
Roundness
You can modify the shape of your button by applying rounded corners to the individual buttons. This can be done by selecting a shape pre-set or entering the numerical pixel or percentage value for the corners. Please ensure you have selected the correct button and it displays Active in the top left when making these changes.
There are three ways to modify the button shape:
-
You can enter a px or % value in the All Corners field. E.g. 5px or 5% - This will apply to all four corners of your button.
-
You can modify any of the individual corner fields, with a px or % value, to create the shape you would like.
-
You can click on any of the Shape pre-sets on the right to modify your button to look like the examples.
Caption
If you are using button styles 2-9 then you will have a tab for Caption available. This tab allows you to enter a title and body text for the button as well as style the text. Certain button styles will exclude the caption body fields, please see the button styles above for more information. Please ensure you have selected the correct button and it displays Active in the top left when making these changes.
-
Caption Title: This is a text entry field that allows you to enter a title for the button.
-
Caption Body: This is a text entry field that allows you to enter some body text for the button.
-
Background Colour: This sets the colour of the background around the text on your button. You can enter the HTML code, RGB code or use the colour picker to select the colour you would like to use.
-
Text Colour: This sets the colour of the text on your button. You can enter the HTML code, RGB code or use the colour picker to select the colour you would like to use.
-
Text Align: This allows you to click on left, centred or right to determine the alignment of the text on your button.
-
Font Family: This is a dropdown option that allows you to select the font for the text.
-
Font Style: This is a dropdown option allows you to choose whether text appears as normal or in italics.
-
Caption Title Font Size: This allows you to enter the font size of the caption title in px. E.g. 14px
-
Caption Body Font Size: This allows you to enter the font size of the caption body in px. E.g. 14px
Graphics
Select icons to be used on the button, specify the size and colour of the icon or upload an image to be used on the button.
Please ensure you have selected the correct button and it displays Active in the top left when making these changes.
-
Upload images: This allows you to upload an image for use on your button. You can either drag the image into the box or click on the Add button to open a file picker and select an image from your computer:
Once you have added an image, or images, to this box you will see them displayed like below:
You can upload as many images to this box as you wish, any images added will be available for other buttons you are creating in this button block.
To use an image you need to click on it to display the screen below:
You can then click on Append to button to add the image to the button.
Icon picker: Allows you to select an icon for your button from a large repository of images. Click on the to display the pop up below:
You can scroll through all of these icons to use on your button, to make a selection click on the icon so it is highlighted and then click Done. (The icons are arranged alphabetically by their names and hovering your mouse over an icon will display it's name.)
- Clear button icon: Clicking on this button will remove the icon you have selected.
- Icon background colour: This sets the colour of the background for the button. You can enter the HTML code, RGB code or use the colour picker to select the colour you would like to use.
- Icon background hover colour: This sets the colour of the background for the button when a user hovers over it. You can enter the HTML code, RGB code or use the colour picker to select the colour you would like to use.
- Icon colour: This sets the colour of the icon for the button. You can enter the HTML code, RGB code or use the colour picker to select the colour you would like to use.
- Icon size: This allows you to set the size of the icon in pixels, to do this enter the value you would like to use followed by px. E.g. 50px will provide an icon with a height and width of 50 pixels on your button.
Audiences
By default, buttons are visible to all users on the site but this tab allows you to customise the visibility of buttons and set individual buttons up to be visible only by certain audiences.
Note: Before this can be done you will need to contact the Learning Pool support team and ask them to enable the audiences filter. If you don't do this, then this function will not work and all buttons will be visible to everyone.
All new buttons will have the Always show button checkbox enabled, this ensures that the buttons can be seen by everyone.
To assign a button to an audience remove this checkbox and then click on the Assign new audiences
button as highlighted below:
This will open an audience selection screen, that allows you to select each of the audiences you would like to see this button.
To select an audience, or audiences, you simply click their name and they will be highlighted in green.
If you are happy with your selection Apply.
This will return you to the button edit screen, any audiences assigned will now display on this screen.
Unwanted selections can be removed using the trash can icon.
If you are happy with your selections, then you can then click Save changes at the bottom of the screen.
Positioning your buttons
When you save your changes you will be returned to the area of your LMS where your button block was created.
To move the button block you can click on the and drag it to your preferred position on the page. The available positions are shown as dotted rectangles.