Prerequisites: If you want to make slides visible to specific audiences, contact the Support Team and ask them to enable the audiences filter. If you need to know how to get started adding a block then read the Adding blocks article.
Summary: Slider blocks allow you to put banner images across the screen. You can have multiple revolving images or a static one and they can be used to link off to other pages.
Configuring the slider block
Once you have added your new slider block select the and choose and Configure Slider 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.
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 slide click Add Slide.
This will add a grey square for the slider, as it is not yet configured. You click this to begin adding button styles.
Note: If you only add one image then you get a static banner rather than a slider.
Slider settings
You now have access to the slider settings, which as you can see in the image below are broken up into various tabs. (The colours and button shapes may differ slightly on yours as it will be reflecting the theming of your site.)
The slider settings also contain the following buttons:
Delete button- This will allow you to delete any of your slides that you have added, simply click on the slide that 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 slides you create. This can streamline the process for creating the slides. You can configure the first slide and then clone it for each of the other slides. All you need to do then is to edit the individual settings for each slide. To clone a slide simply click on the desired slide, it will then display Active in the top left hand corner, and then click on the Clone button to create a duplicate.
Update button - When making any changes to any of the slide settings it is important to click on the Update button to apply your changes. A red circle will appear in the top right corner when you make a change to remind you.
Global
These are the overall settings for all of the slides added to the slider. These settings determine how they appear, how they behave and the style of the slides.
Interval – set how long each slide displays before moving to the next slide.
Autoplay – this needs to be switched on for the Interval setting to apply. This simply means the slides will automatically cycle through.
Pause on Hover – with this enabled the slide will not autoplay when the cursor of your mouse is hovering on the slider.
Fade Transition – when this is switched on the graphic will fade into the next slide. If this is switched off the graphic will slide to the left with the next slider graphic taking its place.
Next/Prev Controls – this simply adds forward and back arrows allowing navigation through the slider.
Pagination Indicator – this is displayed in the top right of the slider. The indicator tells us which slide in the sequence we are currently on.
Slide Styles:
- No Caption – This style is for an image or icon only, if any caption text has been added it will not appear with this setting.
- Sliding Caption – when chosen the caption body and title are not visible until hovered over. This then slides up to cover the entire graphic.
- Sliding Caption Alt – when chosen the caption body only slides up as far as required to show the text specified. The title displays at all times, but the caption is only visible when hovered over.
- Static Caption – when selected only the title is visible at all times. The caption body will not display at all.
- Static Caption Alt – this displays the title and caption body in a box to the left of the graphic.
- Fading Caption – if selected the caption fades in over the entire graphic when hovered over.
Link
If you want the slide to link somewhere then this is where you add the URL of the destination. If the slide doesn't need to link anywhere then leave a '#' in there. There is also a checkbox that determines whether the link opens in a new window, this will be checked by default.
Caption
These settings determine the text that appears on the caption and how it is styled.
Caption Title – the heading that will appear on your caption.
Caption Body – any text entered here will display below the caption title, or will become visible depending on the slide style you have selected.
Background Colour – the colour that sits behind the caption title and body. You can enter the hex code for your desired colour, which will then display the RGB code. Alternatively, you can also use the colour picker provided.
Text Colour – this is the colour of the text for the caption title and body. Much like the background colour you can either enter the hex code or use the colour picker provided.
Alignment – this determines whether the caption title and body are left aligned, centred or right aligned.
Font Family – choose a font.
Font Style – whether the caption is normal or italicized.
Caption Title Font Size – configure the size of the caption title text.
Caption Body Font Size – configure the size of the caption body text.
Graphic
The graphics tab allows you to 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 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 by name and hovering over an icon will show you what it's called.)
Clear button icon: 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, all slides are visible to all users on the site but this tab allows you to customise the visibility of slides and set individual slides 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 do not do this, then this function will not work and all slides will be visible to everyone.
All new slides will have the Always show slide checkbox enabled, this ensures that the slides can be
seen by everyone.
To assign a slide to an audience, remove this checkbox and then click on Assign new audiences.
This will open an audience selection screen, that allows you to select each of the audiences you
would like to see this slide.
To select an audience or audiences, you simply click on their name and they will be highlighted in green. Click Apply to confirm.
This will return you to the slider edit screen, any audiences assigned will now display on this screen. If you have accidentally chosen an audience incorrectly then you can remove them by using the trash can icon
If you are happy with your selections, then you can then click on Update & Save at the bottom of the screen.
Positioning your slider
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.