E-Learning Unit


Landing pages in QMplus

Print Friendly, PDF & Email

For: StaffApplication: Design and Build , Getting Around , QMplus

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:

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

screenshot of a landing page

The screenshot above shows an example of a landing page. The major components are:

  1. A banner image
  2. The name of the page
  3. The optional site news ticker displaying a combination of landing page specific and site news
  4. A welcome block identifying the logged in user
  5. A standard content section with a background fill
  6. A standard content section with no background fill
  7. A content block with an image header
  8. A collection of additional styles that can be utilised for buttons and to highlight information
  9. The site-wide news and information region – the content here is controlled by the E-learning Unit
  10. 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: Adding content

Adding new content

Add a heading and text

  1. Add a heading by either clicking on the pencil icon (1) – adding a heading and pressing enter or
  2. Select edit > edit section(2)

  1. Uncheck ‘Use default section name’ and then type your heading into the ‘Section name’ textbox
  2. Now you can add content to the ‘Summary’ section and format it as you wish.
  3. Select standard display for a white background or background fill if you want the theme colour as a background (text white).
  4. 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)

  1. Place your cursor in the text editor where you want the image to be (text will wrap around it)
  2. Select the ‘Add image’ icon in the text editor
  3. Select browse repositories > Upload a file
  4. Select  ‘Attachment’ then select the file from the popup dialogue then ‘select this file’
  5. Add a description for accessibility purposes (screenreaders will see this)
  6. Under ‘Alignment’ select left or right
  7. 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:

  1. Open your content in ‘HTML’ mode (<>)
  2. Locate the beginning of your unordered list <ul>
  3. Add the following css class to the tag: class=”arrows” i.e. <ul class=”arrows”>
  4. Switch back to ‘visual mode’ in the text editor
  5. 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:

Adding resources

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:

  1. The course ID of your landing page (the 3 or 4 numbers in the URL)
  2. 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.

While you do not need to be a Bootstrap 4 expert, the content in this section requires some basic knowledge of writing HTML and CSS. If you are not comfortable with this, you will find this challenging.

Simple buttons

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.

    1. Open your content section in edit mode
    2. 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”
    3. Add the hyperlink to your button, you can use the link tool or you can write in HTML if you prefer.
    4. 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:

Grey button:
<a href=”” target=”_blank” class=”linkbutton btn btn-secondary”>My new button</a>

Green button:
<a href=”” target=”_blank” class=”linkbutton btn btn-success”>My new button</a>

Light blue button:
<a href=”” target=”_blank” class=”linkbutton btn btn-info”>My new button</a>

Orange button:
<a href=”” target=”_blank” class=”linkbutton btn btn-warning”>My new button</a>

Red button:
<a href=”” target=”_blank” class=”linkbutton btn btn-danger”>My new button</a>

Clear button:
<a href=”” target=”_blank” class=”linkbutton btn btn-link”>My new button</a>

Outline buttons

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=”” target=”_blank” class=”linkbutton btn btn-outline-primary”>My new button</a></p>

Grey outline:
<a href=”” target=”_blank” class=”linkbutton btn btn-outline-secondary”>My new button</a>

Green outline:
<a href=”” target=”_blank” class=”linkbutton btn btn-outline-success”>My new button</a>

Light blue outline:
<a href=”” target=”_blank” class=”linkbutton btn btn-outline-info”>My new button</a>

Orange outline:
<a href=”” target=”_blank” class=”linkbutton btn btn-outline-warning”>My new button</a>

Red outline:
<a href=”” target=”_blank” class=”linkbutton btn btn-outline-danger”>My new button</a>

Blueish outline:
<a href=”” 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=”” target=”_blank” class=”btn btn-primary btn-lg”>My new button</a>

Large button inverse:
<a href=”” target=”_blank” class=”btn btn-secondary btn-lg”>My new button</a>

Small button (theme colour):
<a href=”” target=”_blank” class=”btn btn-primary btn-sm”>My new button</a>

Small button inverse:
<a href=”” 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:

Grey :
<a href=”” target=”_blank” class=”btn btn-secondary btn-block”>My new button</a>

<a href=”” target=”_blank” class=”btn btn-success btn-block”>My new button</a>

Light blue:
<a href=”” target=”_blank” class=”btn btn-info btn-block”>My new button</a>

<a href=”” target=”_blank” class=”btn btn-warning btn-block”>My new button</a>

<a href=”” 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: . Alternatively you can also request a particular guide or highlight an error in this guide using our guides request tracker.

Produced by the the E-Learning Unit at Queen Mary University of London.

Related items

    Return to top