Banner/Sliders

On this page:

  1. How to add a Banner/Slider
  2. How to edit a banner/slider
  3. Adding a video
  4. Banner Properties
  5. Banner Sizes Explained
  6. How to delete a Banner from a page
  7. Making your banner full screen
  8. Setting Mobile Height
  9. Settings
  10. Slider Functions
  11. Styling your banners

Banners and Sliders (Carousel images) refer to images/videos that often appear at the top (not only) of the page of a website. When used effectively, banners and sliders can help engage users, deliver important message and help as strong conversion points.

Using this element:

  1. When you add a single image to a banner
  2. When you add a single video to a banner
  3. When you add a multiple images or videos it automatically becomes a slider

How to add and edit a Banner/Slider:

This help video shows you how access and to use the Banner/Slider Plugin on Limecube.

  1. Select the page on which you’d like to add the banner.
  2. Click on the ‘+Add Element’ Icon on the Page's Header Bar.
  3. Drag and Drop the Banner/Slider icon onto the area of the page that you want it to appear.
  4. It should automatically open settings for the banner
  5. Select 'Add Image' or 'Add Video'
    1. If choosing video, you have the choice of either a YouTube or Vimeo video.
      Add Image or Add Video
  6. Fill in any fields you require to display as part of your banner or video.
  7. Settings: Refer to the settings tab to set any necessary settings. See below for more details.
  8. Apply - this will immediately apply your changes to the banner/slider on your page

You have now added a banner/slider to your page.

Below is a help video showing you the steps above.

How to edit a banner/slider on your page:

  1. Open your banner/slider up
  2. Hover over the image or video thumbnail you wish to edit, and click on the pen icon
  3. You'll now see all the properties you filled out when creating a banner/slider.
  4. Make the required changes and 'Apply'.
  5. This banner/slider will immediately update anywhere it is used in the site.

banner editing

If you don't want any values such as text or the button to show in the banner, simply remove their text while editing, and that will stop them displaying in the banner.

Adding a video

This help video shows you how to insert a YouTube video. For inserting a Vimeo video the process is the same, taking the Vimeo embed code and inserting to this same field.

It is important to note that while you can upload and insert a video via the text area toolbar (upload function) in the banner/slider element, the video will not display correctly as it is intended. Only the embed method will display correctly.

Inserting a video in the embed field will strip out all video controls and YouTube/Vimeo branding to display a nice clean video.

Banner properties

Banner properties are the items contained within your banner such as images and text. These properties are individual to the banner you are editing.

If you wish to change the order of the images/videos, simply hover over the image (not the icons inside the image) and drag the image to the position you'd like it.
Image/Video These are the thumbnails of images or videos added to the banner/slider.
Change Image Allows you to change the image you are currently editing.
This option only shows when you are editing an image banner.
Video embed Only shows when there is a video selected - This field is where you place the embed code taken from YouTube or Vimeo.
  1. How to find YouTube embed code
  2. How to find Vimeo embed code

This option only shows when you are editing a video banner.
Title

The main heading in the banner.

H1, H2, H3 and 'Plain text' that display next to the title are Heading styles. They do not change the visual display of your heading, they are purely for SEO purposes.

A title can be split into multiple lines by hitting the enter key to start a new line.
Description This is the text displayed in the banner. It will display under the title if you are using one.
It should be noted, if you use a Heading formats in the description field, these will inherit the styles from main content styles.
Alignment This aligns Title, Description, and your button within the banner area.
Button text If you are using a button within your banner, this defines the text within that button.
Button link This is for the url that you want the button to send users to. There are 3 options:
  1. In-site links: Select a page from the site from the drop down
  2. In the field below the page drop down you can enter:
    1. An external link. This should contain the https:// before the url.
    2. An anchor link. Find out more about anchor links here.
Alt text Alt text is what appears in the html of the site, and in some browsers on hover of that image. It is useful for:
  1. SEO and telling a search engine what the image is about
  2. Helping screen-reading tools describe images to visually impaired readers

This option only shows when you are editing an image banner.
Parallax This gives an effect of the background of the image moving at a slower rate to the foreground, creating a 3D effect as you scroll.
Auto loops

For video only - Turning 'Auto loops' on makes your video automatically return to the start when finished and continue playing again.

This option only shows when you are editing a video banner.
Deactivate This makes the banner inactive anywhere it is used throughout the site.

Making your banner/slider full screen (100% height)

If you wish your banner/slider to take up the full screen on desktop and tablet devices:

  1. Open your banner
  2. Click the settings tab in the top right corner
  3. Turn 'Height 100%' to the on position.

Making your banner/slider full screen (100% height)

This will disable any desktop/tablet height previously set.

Setting Mobile Height

You should also set your mobile height separately to have all devices covered.

Setting Mobile Height

How to delete a banner/slider from a page:

  1. Select the page from which you would like to delete the Banner from.
  2. Hover your cursor over the Banner.
  3. Select the X icon to delete the banner from your page. 

You have now deleted the banner from your page.

Settings

General Settings

General Settings control both the banner and slider settings.

Title The title is for admin purposes only.
Desktop/Tablet Height This is the height each banner will show on a desktop or tablet device.
Height 100% Height pushes the banner to 100% of the height of the desktop or tablet device it is shown on, regardless of the screen size it is viewed on.
Mobile img height This controls the height as it displays on mobile devices.
Adjust individual corners This feature allows you to adjust all 4 corners of your banner individually, allowing for some really interesting and classy-looking banner styles.

Banner General Settings

Slider Functions

Slider functions appear under the settings tab of the Banner/Slider. These provide different options for your slider, and will not appear on a single image banner.

Transition This is the way the slide changes from slide to slide. Options are:
  1. Horizontal
  2. Vertical
  3. Fade to next slide
Slide Time The amount of time before the slide changes. It is good to test this, based on how much text there is for a user to read in each banner. That should be the defining time point for the slide time.

Base this on the reading time it takes for someone who is not familiar with the text.
Nav arrows These appear on the left and right of the slider
Nav buttons These appear on the bottom center of each slide, and will have a button per slide

Slider Functions

Tags: upload image, add image

Styling your banners

Banners can be styled individually for Desktop, Tablet, Mobile by accessing the colour wheel icon at the top of your banner options.

Banner styling options

Can't find the answer you are looking for?

Try using searching below: