Menu

E-Learning Unit

menu

Working with a Landing Page in QMplus – Style Guide (Admin)

Print Friendly, PDF & Email

For: StaffApplication: Design and BuildTagged: Administrator , Administrators

A ‘landing page’ in QMplus is a page where students can be redirected to when they login to QMplus instead of being taken to the logged in home page.

A landing page  is essentially a styled Moodle Course page in QMplus where your School, Department, Institute or Programme can present content to logged in users and guests quickly, simply and clearly.

Tip:  Before you start editing your landing page assemble all the content you want to add to the page (including your cropped images) in one folder.

 

1. An overview of a Landing Page and the various landing page components

Here is a typical School Landing Page as it has been implemented in the School of Geography:

geography landing page

On the Geography Landing Page we can see:

  1. A horizontal banner graphic with a text overlay indicating the School
  2. A Module dashboard – configurable by the administrator – showing the student a view on all their modules (recent activity, news, forum posts and QMplus assignments
  3. A welcome block with a perosnal timetable link if it is present
  4. Content blocks which may be one or two column wide and light or dark background. Content can include links, images, videos and embed code
  5. Images can be included
  6. buttons can be used to link out to key sites
  7. Twitter and Facebook feeds can be embedded on the Landing page
  8. A video which has been uploaded to QMplus Media can also be embedded.

Landing Page code has been updated in the recent 2015 QMplus upgrade. This graphic highlights the changes that have occurred.

landing page style refresh

  1. The Module dashboard has been restyled
  2. The Module dashboard has been re-developed to load after the page has loaded thus speeding up page load time for the landing page
  3. The Height of the horizontal banner has been reduced = image now spans the banner
  4. Optional text div spanning the entire page
  5. New dark background colour variant for content divs
  6. Option to select bullets instead of arrows for your lists
  7. New headers for each module box
  8. Ability to embed video from QMplus media

Other components can be added to your landing page:

  1. A Course ad block – enables you to present a carousel of image links (see QMplus homepage for an example)
  2. A login block – so that students can easily login through your landing page.
  3. An upcoming events block – linking to a School & personal calendar in QMplus
  4. A News ticker (above the news banner)

 


 

2. An overview of the HTML and CSS contained within a Landing page.

    1. ‘Turn editing on’ and navigate to the ‘Edit Summary’ icon bottom left of the page.
    2. From the text editor select the ‘Edit’ html icon
    3. The landing page code sits in Topic Zero of a Moodle course with the following settings:
      • course format: Topics format
      • Number of topics: Zero
    4. The banner for your page should be an image that spans the entire section. Slice an image to size 1040 x 100 pixels using image software of your choice. Delete the placeholder image (if present) and upload using the standard Moodle upload process for images. Replace the text in the code with the appropriate name for your School, Institute or department.
      Unlike the previous landing page banner the new one does not include any text apart from the School name.

landing page banner Geography
HTML Code for new banner:

<div class="schoollanding landing">
<div class="header">
<img alt="Centre for Academic & Professional Development" src="your image goes here.jpg">
<div class="headertext">
School of Geography
</div>
</div>
    1. The next step is to add the rows of boxes that make an effective layout to meet your needs. You can add as many boxes as you like and mix and match as long as they conform with the three column grid i.e. 3 x one column moduleboxes or 1 x 1 column and 1 x 2 column moduleboxes.
    2. You may wish to add some intro text at the top of the Landing page as the new banner does not hold text. Each set of one, two or three moduleboxes is wrapped in a div with the classmoduleboxes. In this example fullwidth is a modulebox that spans the entire page A textbox spanning the whole page looks like this:

landing page intro header

The HTML code for this box is:

<div class="moduleboxes">
<div class="modulebox fullwidth">
<h2>Put a heading here</h2>
<p>Put your text here</p>
</div>
</div>

 

    1. Now we move to the separate rows of content. Each set of two or three moduleboxes is wrapped in a div with the classmoduleboxes.

 

landing page new boxes

 

    1. The first thing we do is open the container div for the row: <div class=”moduleboxes”>
    2. Usefullinks class gives you a modulebox with a bullet list style. Bullets can either be arrows or squares. An example (with squares) is shown above left. Replace the red text with the appropriate titles for your links then add the links in the WSIWYG window as you normally would in QMplus. You can add as many links as you like BUT be aware that the more content you add the more your box will grow in height. You may need to play around with content to ensure the page looks balanced.

 

Here is some example code for a usefullinks box:

<div class="modulebox  usefullinks">
<h3>Useful Links</h3>
<ul>
<li><a href="#">Integer posuere erat  ante venenatis dapibus posuere</a></<li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Fusce dapibus, tellus ac cursus commodo</a></li>
<li><a href="#">Fermentum Adipiscing Elit Sit</a></li>
</ul>
</div>

 

    1. textbox class is a plain textbox with no images. Replace the heading and text with any content you wish. A link with class linkbutton makes a button style link.

 

<div class="modulebox textbox">
<h3>News</h3>
<p><strong>Donec ullamcorper nulla non metus auctor fringilla.</strong></p>
<p>Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a href="#" class="linkbutton">View More News</a>
</div>

 

  1. rightimagebox class aligns a small image (maximum width 94pixels) on the right of the text. The last class is  added to the third box in the row. The final </div> closes the entiremoduleboxes row of 3

 

<div class="modulebox rightimagebox last">
<h3>Event</h3>
<img src="imagepath/image.jpg" width="94" height="94" alt="PaulPlaceholder" />
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. vehicula ut id elit.</p>
</div>
</div>

 

  • By adding coloured to the usefullinks class you get a dark background (the colour depends on your faculty in this image we see the Medicine & Dentistry Dark background and in the Geography screengrab we see the dark green for the Humanities.
  • To change the bullet links from arrows to squares you can adjust the class on the <ul> <ul class=”square”>
  • In the example code below the usefullinks box has a dark background and square bullets:

 

<div class="modulebox coloured usefullinks">
<h3>Useful Links</h3>
<ul class="square">
<li><a href="#">Integer posuere erat a ante venenatis dapibus posuere</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Fusce dapibus, tellus ac cursus commodo</a></li>
<li><a href="#">Fermentum Adipiscing Elit Sit</a></li>
</ul>
</div>

landing3

  • <div class=”moduleboxes”>
  • Each set of two or three moduleboxes are contained in a div with the class moduleboxes
<div class="modulebox leftimagebox">
<h3>Course Information</h3>
<img src="imagepath/image.jpg" width="94" height="94" alt="PaulPlaceholder" />
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div>
  • leftimagebox class aligns a small image (maximum width 94pixels) on the left of the text.
  • imageonly class is for a modulebox with just a linked image file.
<div class="modulebox imageonly"><h3>In Focus</h3><a href=”#”><img src="imagepath/image.jpg" alt="placeholder" /></a></div>

<div class="modulebox externalhtml last"><div>EXTERNAL HTML GOES HERE</div></div></div>
  • Use the externalhtml classto paste in HTML from another source e.g a TWITTER feedThe final </div> closes the moduleboxes row of 3

Now we will add a link usefullinks box and a textbox spanning two columns

landing4

<div class=”moduleboxes”>

(see above)
<div class=”modulebox usefullinks“><h3>Useful Links</h3><ul><li><a href=”#”&gtInteger posuere erat a ante venenatis dapibus posuere</a></li><li><a href=”#”>Lorem ipsum dolor sit amet</a></li><li><a href=”#”>Fermentum Adipiscing Elit Sit</a></li></ul></div>

(add the usefullinks class as described above)

<div class=”moduleboxtextbox wide last“><h3>News</h3><p><strong>Donec ullamcorper nulla non metus auctor fringilla.</strong></p><p>Curabitur blandit tempus porttitor. Maecenas sed diam eget risus variusblandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><a href=”#” class=”linkbutton”>View More News</a></div></div></div>

Add a class textbox as described above then wide to get your modulebox to span two columns. The last class is also added as it is the end of the row.The final </div> closes the moduleboxes row of 2

…and finally a wide box with text and links and a leftimage boxlanding5

<div class=”moduleboxes”>

(as above)

<div class=”modulebox leftimagebox wide“><h3>Course Information</h3><img src=”image/imagepath.jpg” alt=”Paul Placeholder” height=”94″ width=”94″ /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, quae eveniet voluptatum. Illo, ab, rerum aperiam officiis a distinctio aliquid voluptatem ipsum mollitia necessitatibus at sapiente repudiandae blanditiis eligendi repellendus.</p><ul><li>Integer posuere erat a ante venenatis dapibus posuere</li><li>Lorem ipsum dolor sit amet</li><li>Fusce dapibus, tellus ac cursus commodo</li><li>Fermentum Adipiscing Elit Sit</li></ul></div>

Add a class leftimagebox as described above then wide to get your modulebox to span two columns.

<div class=”moduleboxleftimagebox last“><h3>In focus</h3><img src=”image/imagepath.jpg” alt=”Paul Placeholder” height=”94″ width=”94″ /><p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p><p>Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p><a href=”#”>Find out More »</a></p></div></div>

Add a class leftimagebox as described above then wide to get your modulebox to span two columns. The last class is also added as it is the end of the row. The final </div> closes the moduleboxes row of 2

 

 News Ticker

A news feed on your landing page enables your visitors to get news that you post on the ‘news’ forum of your landing page in a horizontal ticker just below the main horizontal navigation. If you would like to display a news ticker on your landing page. The news ticker can be seen on the QMplus home page. It can contains information from up to 6 news items from 3 sources:

1. The site news x 2 stories
2. The IT Service status page x 2 stories
3. The School landing page x 2 stories

To enable the news ticker on your landing page you will need to enable RSS on your landing page forum.
Please follow the instructions in this video clip.

When you have the URL of the RSS feed, please email Brett Lucas in the ELU who will set this service up for you.


Did this answer your query? If not, you can raise a ticket on the online Helpdesk or email: its-helpdesk@qmul.ac.uk . 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.
QP026-image015

Return to top