Prerequisites: This block may need to be enabled on your site. If it is not visible in the Add a Block list simply contact the Support Team and ask for it to be enabled.
Summary: The course introduction block allows learners to access a course page and view the content on that page without having to enrol. This allows the learners to browse the course, and ensure that it’s the right course for them before enrolling.
The block has been designed to work best with the timeline course format, but it works with any format.
The block, by default, shows the first 250 characters from the Course Summary (this can be edited in Course Administration > Edit Settings). You can use the Info block to deliver the full description of your course, as we explain later in this guide.
Enabling guest access on the course page
As the Course Introduction block allows learners to access the course page before enrolling, you will need to allow guest access on the page. Learners will then have the option to enrol themselves onto the course when using the course introduction block. Below are the steps to enable guest access.
1. Navigate to the Course administration block and click Users > Enrolment Methods.
2. You will see the enrolment options available on the page. Click on the eye icon beside Guest access in the Edit column.
Once enabled, the eye shouldn't have a line through it. Learners can now access the course page without enrolling. The ability to enrol on the course is shown to them as an option on the course introduction block.
Block Configuration
On the course page, scroll down to the course administration block and click Turn editing on.
At the top of the course introduction block, click the and choose Configure Course Introduction Block (the block should adopt the course title).
Background Image
At the top of the configuration page, you will see the Background Image You can add an image by either clicking in the top left hand corner, or by dragging the image into the dotted lined area.
A good size for a course introduction block image is 1200 x 265 px.
Once the image has been added to the section, click Save changes.
Trailer
You can embed videos into the course introduction block. This is a great way to give the learner an insight into the content that is contained on the course.
Paste the embedded video code in the Trailer section (you will get this from your video streaming service).
Click Save changes. You will be taken to the course page.
The course block will now have a Trailer button. Clicking it will launch your video.
Info
The info section on the Course Introduction block is great for adding some text information about the course.
Once you've added your text, click Save changes.
A new Info button will appear on the block. Clicking on this will reveal the info text.
Note: The info button may also show when there is too much text in the course summary. The block will only show about 200 characters, so if you cut down the word count the info button will disappear.
Styles
The course introduction block is customisable, allowing you to change the layout and colours of the block and its associated buttons. You can enable custom styles on the block configuration. You can disable it if you want to revert to the default styling. Simply tick Enable Custom Styles to activate the options.
Block layout
The Block Layout affects the alignment of the block content and the size (height) of the block.
Content Alignment: You can align the Enrol, Info, Trailer and Share options left, centre or right depending on your preference. It is defaulted to left but you may want to change this depending on the image that you use.
Block Height: The block height can be adjusted in height. This is helpful if the image that you have added has a lot of depth. If left blank, it will automatically match the height of the content.
Content Alignment: Left, Block Height: 260px (Default settings)
Content Alignment: Centre, Block Height: 360px
Block background
Block Background affects the background colour of the block, or if you are using a background image, it can change the position and size of the image.
Block Background Colour: If you do not want to add a background image, the block background colour allows you to assign a background colour. On any setting that allows a colour to be changed, colours can be chosen by clicking on the water-drop icon, or alternatively a hex colour code can be entered into the text field.
Background Image Position: This setting allows you to set the position of the background image, and works best with ‘Original’ and ‘Contain’ settings from ‘Background Image Size’. Configure this setting depending on the size of your image.
Background Image Size: There are three settings to choose from. Here’s how each of them changes the example image:
Choosing ‘Fill’ fills up the whole block with the image and may result in the image being cropped.
‘Contain’ will place the entire image within the block - if the image is smaller than the block, this may leave gaps.
‘Original’ will keep the original size of the image - again, the size of the image will affect on how it is displayed.
The most commonly used is ‘Fill’. We recommend playing around with this setting to see which suits best.
Block text
Block Text controls how text appears within the course introduction block.
Hide default course title: By default, when a course is created, the ‘Course full name’ will appear above the course content. Also by default, when a course introduction block is added, it adopts the ‘Course full name’. This results in the course title appearing twice. Placing a tick in the box removes the course title from above the content, leaving it only in the course introduction block.
Enable text shadow: This setting will enable a drop shadow on the title and summary text. Note: The summary text is drawn from the course summary. This will only show a snippet of the text.
Title Colour: Allows you to change the colour of the course title displayed on the block. This is useful for different images.
Summary Colour: Allows you to change the colour of the summary text on the block. This is useful for different images.
Block buttons
Block Buttons affect how buttons appear on the course introduction block.
Enrol Button Text/Icon Colour: Change the colour of the enrolment button text and the icon.
Enrol Button Background Colour: Change the colour of the enrolment button.
Button Text/Icon Colour: Change the colour on all other options.
Button Background Colour: Change the colour on all other buttons.
Button Shape: Change the shape of the buttons.
Enable Course Sharing: Enable or disable the share button on the block. When you click on the share button this will automatically open your mail client so that you can email your colleague details to access the course.
Activity blocker
The Activity Blocker appears to learners to show them that they are unable to access the activities on the course until they enrol.
Activity Blocker Icon Colour: Change the colour of the lock icon.
Activity Blocker Background Colour: Change the background colour.
Enrol prompt
The enrolment prompt sits at the top of the page advising the learner that ‘You need to enrol to access this course’.
Enrol Prompt Icon Colour: Changes the text colour on the enrolment notification.
Enrol Prompt Background Colour: Changes the background of the enrolment notification.
Shared Settings
By default, the alerts ticker block will span the full width of the page or column that it has been enabled on. With these settings, you can modify that as well as increase the spacing around the block.
All of the margin values entered into these settings must be in pixels e.g. 50px.
Background colour: Use this tool to determine the background colour using a HTML colour code.
Overlay: Standard will fit the standard margins of the page. Overlay will allow the block to spread across the screen.
Vertical & Horizontal alignment: Depending on where the block is being displayed on the page, this will allow you to determine the alignment within the block.
Right Margin: Entering a value into this field will increase the space between the right hand side of the page and the end of the alert.
Bottom Margin: Entering a value into this field will increase the space between the bottom of the alerts ticker block and anything else below it. Left Margin: Entering a value into this field will increase the space between the left hand side of the page and the start of the alert.
Top Margin: Entering a value into this field will increase the space between the top of the alerts ticker block and anything else above it.
Width: This is set to 100% by default but you can modify this by entering another percentage value in the box, this will determine the overall width of the alerts ticker block.
Z-index: The Z-index determines how the block is stacked or layered on the page. For instance, if you have added text into the alert body, which will be displayed when a user hovers over the alerts, then you will want to make sure that the text can be seen and will not be hidden behind the block that is currently below the alerts, to do this you will need to ensure that the Z-index for dropdown and selecting a numerical value, with 0 being the lowest layer and 10 being the highest layer. The alerts is higher than the other blocks. You can change this value by clicking on the dropdown and selecting a numerical value, with 0 being the lowest layer and 10 being the highest layer.
An example of the Z-index can be seen below. The first image has the Z-index set to 0 which places the alert body text behind the slider and blocks on the left and right, making it difficult to see the full text.
The image below has the Z-index set to 3 which places the alert body over the Slider and blocks on the
left and right, making it easier to see the full text.
Where this block appears
These are default options contained in every block and allow you to set where a block appears. You can edit these if you wish but you can also manually drag the block to the correct position on the page.
These are default options contained in every block and allow you to set where a block appears.
Page contexts: Is a dropdown menu that allows you to set which pages the block will appear on.
Default region: Is a dropdown menu allowing you to select the default region where the block will appear on any pages it has been set to appear on.
Default weight: The default weight allows you to choose roughly where you want the block to appear in the chosen region, either at the top or the bottom, with 14 being the bottom and -10 being the top.
On this page
These are default options contained in every block and allow you to set where a block appears on this specific page. You can edit these if you wish but you can also manually drag the block to the correct position on the page.
Visible: This is a dropdown menu allowing you to select Yes or No for whether the block can be seen.
Region: This is a dropdown menu allowing you to select where the block will appear on this page.
Weight: The weight allows you to choose roughly where you want the block to appear in the chosen region, either at the top or the bottom, with 14 being the bottom and -10 being the top.