Support Categories

Getting Started
Elements (plugins)
Pages and Content
Buying a Domain
Going Live
Features
SEO and Analytics

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

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. Click on the Settings Icon. 
  5. Select Add Image or Add Video
    Add Image or Add Video
    1. If choosing video, you have the choice of either a YouTube or Vimeo 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/Save - this will immediately save your changes to the banner/slider and onto to your page, as well as update the banner/slider if it has been applied anywhere else in the site.

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

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.

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 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 title of the banner. 

H1, H2, H3 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.
Show title Show title allows you to turn the title on or off depending on your needs for the banner. Some banners don't require any text at all, or description text only.
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.
Text 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.
Auto loops 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.

Banner sizes explained

There are 3 banner sizes for you to choose form. It is important to know these are not fixed sizes. Each time you select a banner you still have the ability to change heights associated with the banner.

These sizes as you seem them relate directly to your Style settings for each banner. Your style settings control the styles in each section. For example, a 'Large' banner may be your main hero banner on the home page, and require much larger fonts and different colours to other areas of the site. Being able to control your styles in this way allows for better consistency throughout the site.

Banner sizes explained

Banners will always be 100% width of the section they are placed into. If you wish a wider or narrower banner, change the section the banner sits within to control the different width.

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.

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

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.
Background overlay colour This controls the % of transparency of the overlay on the banner. The base colour for the overlay is taken from the banner/slider styles.

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

Can't find the answer you are looking for?

Try using searching below: