The Slideshow feature

A slideshow is a set of large images, combined with text, placed on a website front-page to generate interest for your most important messages on the site.

What can you achieve with the Slideshow feature?

Shortly told the front page slideshow is a quick way to tell the visitor what your company is doing. By combining large images with a short text the visitor can be persuaded to find more information about your company. Let's take a look at some examples:

Bavarian Nordic

Bavarian Nordic is a biopharmaceutical company focused on developing vaccines against infectious diseases and cancer. It is important for Bavarian Nordic to create trust and show the visitor that they are experts in their field. By combining large images of people in laboratory environments, people they are treating and products with short and effective text, they send a clear message to the visitor that you can trust Bavarian Nordic as experts in the biopharmaceutical field. By doing this they persuade the visitor to browse the website to get more information.

Manao Software

At Manao Software we offer various services within the development sector. We use the slideshow on the front page to make a small teaser for visitors landing  on our website. The slideshow consists of images, text and a call-to-action button. The goal is to inform the visitor and to persuade him/her to read more.

The Border Consortium

As an NGO it is important for The Border Consortium to show the visitor how the organisation helps refugees at the border of Thailand. By combining large images of the refugee camps with a short info-text, they make sure that visitors easily gets an overview of the work TBC is doing.

Most importantly: It is very easy and intuitive to add or change the slideshow order, images and text.

How to use the slideshow

The slideshow is surprisingly easy to use.

Finding the slideshow

The first thing to do, is to navigate to the correct place. On this project the slideshow can only be added directly under the header, and it is full width. Because of this it is not actually a part of the grid.

  1. Navigate to Content Header on a page.
  2. Click Add Slide to start adding the first slide.
  3. Click Click to select image to open the settings for the first slide

Adding a slide

This is not as intimidating as it may look. The only important thing is to add the image, the rest are optional.

  1. Click here to add an image. The image is stored in the media section, and automatically cropped and resized to the correct size for the slideshow.
  2. In a normal browser, this is the small yellow box that is shown on mouse over. This is optional.
  3. This text is shown in the browser if the image fails to load for some reason. It is also used for SEO purposes. If nothing is written here, the image name will be used.
  4. The title of the text on the slide. In this case it is automatically made uppercase. The field is optional. The title is a header 2 in the code.
  5. The text on the slide. Again optional.
  6. The slide can be a link to any page on the site, or to an external page. Click here to change the link setting.
  7. When you are done editing the slide, close the options pane here.

Reordering and deleting slides

Here I have added two slides to the slideshow, and some text has been added as well. There are a few other things that can be done.

  1. Delete the slide.
  2. Reorder the slides in the slideshow. Simply drag and drop this icon.
  3. Open the settings for this slide, which is the same as when creating the slide. The settings can also be opened by clicking anywhere on the slide.
  4. Open the settings for the slideshow.

Slideshow settings

There are few settings for the slideshow itself. As an example we have added breadcrumbs on the slideshow, and this can be configured here.

  1. Change the time between slide changes.
  2. Hide or show the breadcrumbs. If this is set to Show, but there are no slides, the breadcrumbs will still be shown on the page.

Static image

If you only add a single image to the slideshow, it will be displayed as a static image at the top of the page.