Landing pages are an important feature of QMplus. Your landing page is the page you are directed to after you log in and is the page you are taken to if you click on the QMplus logo. For the majority of staff and students, your landing page will be a School or Departmental page however landing pages can also be defined for a programme of study.
The advantages of landing pages are:
- They provide a connection between the modules/courses that our students are taking and the programme/school or institute they are studying in.
- They enable communication of key information to all staff and students in your school.
This guide covers:
- Part 1: Features of the new landing page
- Part 2: How do landing pages work?
- Part 3: How to ensure your existing landing page works after the upgrade
- Part 4: How to add content to your page
- Part 4: How to add a news ticker
- Part 5: How to use the new features and styling options
It assumes you:
- Have an existing landing page or a QMplus area you would like to make into a landing page
- Have admin/editing access to your landing page
- Have a basic understanding of HTML and CSS (not obligatory but very helpful)
Part 1: Features of a landing page
The screenshot above shows an example of a landing page. The major components are:
- A banner image
- The name of the page
- The optional site news ticker displaying a combination of landing page specific and site news
- A welcome block identifying the logged in user
- A standard content section with a background fill
- A standard content section with no background fill
- A content block with an image header
- A collection of additional styles that can be utilised for buttons and to highlight information
- The site-wide news and information region – the content here is controlled by the E-learning Unit
- The landing page selection block – this allows users to change their landing page where appropriate
Part 2: How do landing pages work?
The first time someone logs in after the QMplus upgrade, QMplus will attempt to determine which page should be used as their landing page. This is done by looking at what the user is enrolled on in QMplus and whether there is a landing page for that part of QMplus. e.g. if a student is enrolled in a number of modules which are all within the School of Economics and Finance category and there is a landing page for that category, they will be automatically assigned that page as a landing page.
If QMplus finds more than one landing page for the user, i.e. if they are enrolled on modules from different parts of QMUL, they will be asked to choose which page they would prefer to use as their landing page. They will be able to change this choice by using the landing page selection block as shown in the screenshot in the previous section. A good example of this is Associate students who may take modules in different schools. They will be able to set one school as their landing page but will easily be able to go to the landing page for the other school by using the landing page block.
If QMplus cannot find an appropriate landing page for the user, they will be assigned the default QMplus landing page.
Once set, the user will be taken to their landing place on all subsequent logins. Clicking on the “home” icon or the QMplus logo will take them to their landing page.
Users are also able to change their landing page setting at any time by going to their profile.
For those who like more technical flow diagrams…this is the logic:
Part 3: How to ensure your existing landing page works after the upgrade
If you already manage a landing page in QMplus, this section outlines what you must do after the upgrade to ensure that your page continues to work.
Getting ready to edit your page
- Make sure you have the Atto text editor as your default. You can check this by going to your QMplus dashboard and then selecting Preferences > Editor preferences
- Navigate to your landing page. Don’t worry if it looks a little strange…if you follow the instructions in this section you’ll soon have things looking right again.
- Unhide the settings block on your landing page (Settings > On this page > visible ‘Yes‘)
- You may find it easier to work by opening another copy of your page in another browser window.
Step 1: Delete the welcome block and module dashboard
- If you have a welcome block and/or module dashboard on your page, delete them.
The welcome block is no longer necessary as there is a similar block hardwired into the page. All users now have a QMplus dashboard which makes the module dashboard widget on landing pages redundant.
- You might also want to take the opportunity to delete any other blocks that you feel you may no longer require.
Step 2: Ensure enrolment methods are set correctly
The new landing pages do not use enrolments to work so you should remove all enrolment methods other than ‘Guest’ and manual enrolments from your page.
- Go to Users > enrolment methods and remove all enrolment methods except ‘Guest’
You will only have to use the manual enrolment method to give access to anyone who will be maintaining the landing page.
Step 3: Switch your course format to the new landing page format
Switch the course format to ‘landing page format’ and add sections to your page.
- Edit settings -> Course format > Format > Landing page format
Decide how many sections you might need to get started – say 5. You can change this number later.
- Edit settings -> Course format > Number of sections > 5
Step 4: Set your banner image
If you had a banner image on your page before, you will notice that it has disappeared. You can re-connect the original image or you can upload a completely new image. The dimensions of your image should be 1500-1700 pixels width x 350-400 height. The file size of your image should ideally be around 100kb and certainly no larger than 200kb. Larger image sizes will slow your page down. If you don’t have access to dedicated graphics software then you can use an online tool such asPIXLR to reduce the size of your image.
- First go to the course summary files section of your page settings. This can be found in the settings block under Edit settings > Course summary files
- Select the “Add a file” icon – the file picker will slide out from the right-hand side
- If you want to re-connect the banner image you had on your page before, navigate to your server files and find the file. I can see my banner here, called “banner-9.jpg”
- select the checkbox Create an alias/shortcut of the file rather than make a copy.
- Then: Select this file
- Save and return to your landing page
- If you wish to upload a new file then select ‘Upload file’ and select the file you wish to upload then ‘Select this file’
- Save and return to your landing page
Part 4: Adding content
Reusing content from your old landing page
If you just want to migrate all the content from your old landing page then you will find all your content is in the middle section of the top row. This is the ‘topic zero’ content box. You will need to cut and paste it into separate sections.
- Open the page in two browser windows to make things easier!
- Open topic zero and switch to HTML view (see 1 in the screengrab below)
- In the second browser tab open the new section
- Copy the HTML from the section you wish to transfer
- Strip out the old CSS styling that was used in the old landing page (this should be easier as the new Atto text editor has colour coding)
- Double check that you have removed any <div> tags etc
- Switch back to the visual view in your text editor (this is VERY important as it ensures any poorly formed HTML is fixed and the page does not get broken!)
- Uncheck ‘use default section name and Put the old heading (this may have been within h3 tags) into the ‘section name’ field
- Decide if you want the section to display on a mobile device
- Click save changes
Adding new content
Add a heading and text
- Add a heading by either clicking on the pencil icon (1) – adding a heading and pressing enter or
- Select edit > edit section(2)
- Uncheck ‘Use default section name’ and then type your heading into the ‘Section name’ textbox
- Now you can add content to the ‘Summary’ section and format it as you wish.
- Select standard display for a white background or background fill if you want the theme colour as a background (text white).
- Decide if you want to display the block on mobile devices
Save your changes – Your new section might look like this (Arts & Social Sciences theme):
Basic text box with a small image
You can follow the same instructions from the previous section and add an image to your section.
Find an image – this will need to be quite small (in my example I have used an image sized 94px square)
- Place your cursor in the text editor where you want the image to be (text will wrap around it)
- Select the ‘Add image’ icon in the text editor
- Select browse repositories > Upload a file
- Select ‘Attachment’ then select the file from the popup dialogue then ‘select this file’
- Add a description for accessibility purposes (screenreaders will see this)
- Under ‘Alignment’ select left or right
- Click ‘Save image’
List of links
You can add an unordered or ordered list to your content by using the tools in the text editor. If you would like to change the ‘dots’ to arrows then:
- Open your content in ‘HTML’ mode (<>)
- Locate the beginning of your unordered list <ul>
- Add the following css class to the tag: class=”arrows” i.e. <ul class=”arrows”>
- Switch back to ‘visual mode’ in the text editor
- Save and Return
Adding an image header
You can add an image to your content that will extend to the borders of the section. You might use this for banners or to profile something happening in your school. You can also add a heading and content if you wish. These will appear underneath the image.
Step 1: Follow the same steps as ‘Adding header and text’ above
Step 2: Under ‘Section image’ – click the folder icon and upload an image following the same steps as previously mentioned (Basic text with small image)
Step 3: Under ‘Style’ Select ‘Image header’
Step 4: Save changes
Adding external content
You can also add a Twitter feed or Facebook feed to your section.
Step 1: Get the embed code from your external site: Twitter/Facebook/RSS feeds
Step 2: Paste the embed code in HTML Mode
Step 3: Switch back to visual mode
Step 4: In these situations you would be advised to select NOT to display the content on a mobile device
Step 5: save changes
Your section might look something like this:
You can also add resources to your page using the standard file picker.
Part 4: adding a news ticker
You can display a news ticker at the top of your page. This ticker rotates through the first two site news announcements then the first two announcements/posts you make through the news forum on your landing page. This feature has proved popular with those schools who have used it previously.
To enable the news feed you need to send an email to the E-Learning Unit asking us to enable it for you. We require two pieces of information:
- The course ID of your landing page (the 3 or 4 numbers in the URL)
- The URL of the RSS feed from your news and announcements forum. To find this you will need to follow the steps below:
Step 1: Navigate to the settings for your news and announcements forum
Step 2: Edit settings > RSS
Step 3: set the RSS feed for this activity to : Posts
Step 4: Set Number of RSS recent articles: 5 or more is fine
Step 5: Click save and display
Step 6: In your settings menu you should now have a new link: RSS feed of posts
- Click on that link and copy and paste the URL into your email to the E-Learning Unit
Part 5: How to use the new features and styling options
The QMplus look and feel is built on a framework known as Bootstrap 4. This means that it is possible to use some of the components of this underlying framework to style parts of QMplus pages. This section provides some examples of how you can style buttons and links.
You can add styling to hyperlinks in your content to make them look like buttons.
In this example, My new button is a hyperlink which has been styled to look like a button. To do this, you need to apply a particular CSS class to your hyperlink.
- Open your content section in edit mode
- Navigate to the place where you would like to place your button: Type a label for your button in my case it is ‘My New Button”
- Add the hyperlink to your button, you can use the link tool or you can write in HTML if you prefer.
- Open your content in ‘HTML’ mode (<>) and add the following code to the link tag: class=”linkbutton btn btn-primary” So now my URL looks like this: <a href=”add full URL here” target=”_blank” class=”linkbutton btn btn-primary”>My new button</a>
Other button colours are possible:
Just substitute the CSS classes in bold below:
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-secondary”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-success”>My new button</a>
Light blue button:
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-info”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-warning”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-danger”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-link”>My new button</a>
Alternatively if you don’t want buttons with a ‘fill’ you might prefer outline buttons. These can be particularly useful where you have used a background fill:
To achieve these effects, use the CSS classes below:
Blue outline right aligned:
<p style=”text-align: right;”><a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-primary”>My new button</a></p>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-secondary”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-success”>My new button</a>
Light blue outline:
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-info”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-warning”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-danger”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”linkbutton btn btn-outline-link”>My new button</a>
Large buttons and small buttons
You might want to add a large button or a small one:
Large button (theme colour):
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-primary btn-lg”>My new button</a>
Large button inverse:
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-secondary btn-lg”>My new button</a>
Small button (theme colour):
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-primary btn-sm”>My new button</a>
Small button inverse:
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-secondary btn-sm”>My new button</a>
Block level buttons
Block level buttons are buttons which will automatically expand widthways to fill their container.
Use the following CSS classes to achieve these effects:
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-secondary btn-block”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-success btn-block”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-info btn-block”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-warning btn-block”>My new button</a>
<a href=”http://www.bbc.co.uk” target=”_blank” class=”btn btn-danger btn-block”>My new button</a>
Did this answer your query? If not, you can raise a ticket on the online Helpdesk or email: firstname.lastname@example.org . Alternatively you can also request a particular guide or highlight an error in this guide using our guides request tracker.