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:
This help video shows you how access and to use the Banner/Slider Plugin on Limecube.
You have now added a banner/slider to your page.
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.
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 are the items contained within your banner such as images and text. These properties are individual to the banner you are editing.
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.
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:
|
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:
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. |
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.
If you wish your banner/slider to take up the full screen on desktop and tablet devices:
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. |
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:
|
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 |
Tags: upload image, add image
Try using searching below: