Ask a Question ?
Design & Publish Websites Faster

Full Image Slider features with the Super Banner App

New app alert! We are very excited to present the Super Banner App (image slider). Basically, as its name implies, it’s a new and improved banner app with a bajillion different options. It really is super! You can have the standard texts, images and button, plus, thumbnails, different transition effects and a lot other customization possibilities.

This image slider feature is customizable and best of all it supports all browsers, devices and no coding is required. So, if you want to learn how to take full advantage of this new feature, read on!

Note: the Banner app will be depreciated in the future and we won’t provide support for it anymore. We recommend you migrate all of the content from current banner app to this new super banner app or to another app.

Premium App

This is a premium app, which means that you can purchase it for $5 usd. With it you’ll be able to add value to your site because you’ll get an awesome new way to display your content!

Super Banner App

Try It Out!

If you want to try it out first, so you can see how it works and all the new options you have with it, you can do so with the trial option (you get a 14 day trial period where you can have all access to all the apps and features free of charge!).

"Try it, it's free!" button on Breezi's home page

To check out the Super Banner app, start a 14 day trial period!

How to Install It

To install this new app, just look for “Super Banner” in the App menu from the bottom shelf. Then, click and hold the “Install New” button to its right. Drag it and drop it anywhere in your layout.

"Install New" button of the Super Banner app

Drag the “Install New” button of the Super Banner app to your layout

When it loads up, it will look like this following image (the Super Banner app will be as big as the container it is in):

Default look of the Super Banner app

Settings

Now for the substantial part! This app has a ton of new features and customization options and here we’ll show you what they are and how to use them. Remember to hit “Save” when you’re finished editing the app’s settings.

To open up the “Edit Settings” panel, click on the wrench icon in the app’s toolbar.

"Edit Settings" in the app's toolbar

Click the wrench icon to see all the options you have for the Super Banner app’s settings

In the new panel that will open up, you’ll be able to edit the general and content settings, arrows, playlists, the pagination, behavior, propagation, among other things.

Entry General Settings

Here you can edit the basics of the Super Banner App:

These are the general settings options for the Super Banner app!

These are the general settings options for the Super Banner app!

Autoplay: Do you want the slides to rotate automatically? If so, just mark this checkbox and you’ll get exactly that.

Transition Delay: Enter the number of seconds you want to stay on each slide before it’s automatically changed.

Transition Fx: If you want your slides to transition automatically, you can select an effect for the transition: Dissolve, Slide, Fly, Zoom.

Fx Speed: Do you want your slides to transition at a Slow, Medium or Fast speed? You can have your pick here!

Content Settings

These refer, basically, to the titles, subtitles, description and buttons of your slides. In the next image, you’ll see that these are the elements inside the darker section of the slide.

Content in the slide

The Content Settings manipulate the section where the title, subtitle, description and button are

And these are the options for them:

Settings for the content in the Super Banner app

Settings for the content in the Super Banner app

Content Location: Have your content Inside or Outside of the Image. Or you can choose not to show it at all!

Content Position: Do you think your content will look better at the Top? Or maybe, at the Right? You can choose whether you want it at the Left, Top, Right or Bottom in this field.

Display Title: With this checkbox you can decide to display this title.

Display Sub-Title: If you want to show the sub-title, you can check this box!

Display Description: If you added a description to your slide and you want to showcase it, you can click on this checkbox to do it.

Display Button: You have the option to have a button in your Super Banner app or not. It’s up to you!

Animate After Image: This means that you can choose whether the text or content of the slide appears at the same time as the image in the transitions or if it’ll be added in after the image has already been displayed.

Arrow Nav Settings

You can navigate through the slides in this app with arrows, which are the ones on the sides of the slides in the following image:

Arrows in the Super Banner app

You can use these grey arrows to navigate the slides

You can change their position, color, etc. Lets go over the options you have for them:

Editing options for the arrows in the Super Banner app

Editing options for the arrows in the Super Banner app

Arrow Type: What shape of arrows would you like for your Super Banner app? Choose one of these: V-shape Rounded, V-shape thin, V-shape Bold, V-shape Modern, Triangle Rounded, Arrow Bold, Circled Triangle Rounded, Circled V-shape Bold, Circled Arrow Rounded, Boxed Triangle Rounded, Boxed V-shape Bold, Boxed Arrow Rounded.

Arrow Location: You can have the arrows: Inside Image and Outside Image. If you don’t want arrows in your app, you can always pick “Don’t Show”.

Default Color: Select between a Light or Dark shade for your arrows.

Opacity: Manipulate how intense the default color of the arrows will be.

Rollover Color: You can have different colored arrows for when the mouse rolls over them. Have them in a Light or Dark shade.

Rollover Opacity: As with the default color, slide the bar to have different saturations in the rollover color.

Playlist Settings

Playlist refers to another way to navigate the slides in your Super Banner app.  It works like a preview: you can have thumbnails and show the texts so your users can go through them and pick the one they want to enlarge.

Example of the playlist for the Super Banner app

Example of the playlist for the Super Banner app

These are the settings for the playlist option:

Settings for the playlist in the Super Banner app

Settings for the playlist in the Super Banner app

Display Playlist: Where do you want to display your playlist? You can have it inside or outside of the slide’s image. On the other hand, if you don’t want a playlist, you can select the “Don’t Show” option.

Playlist Bottom: If you choose to have a playlist in your app, you can have it at the Left, Top, Right or Bottom of the slide.

Display Playlist Thumbnails: Here you can choose to display the thumbnails of your slide’s images.

Display Playlist Titles: Your playlist can have your slide’s titles with this option.

Display Playlist Subtitles: Show the subtitles of your slides in your playlist.

Pagination Settings

The pagination allows you to move through the pages in the app with the help of some buttons with a minimalist design.

Pagination buttons to move through the slides

Use the pagination buttons to move through the slides

In “Edit Settings”, you’ll be able to see the customization options for them.

Pagination Settings Options

Configure the pagination of the app with these options

Pagination Location: Like with the other settings, you can have the pagination: Inside Image, Outside Image or Don’t Show.

Horizontal Alignment: You can also align them horizontally to the Left, Center and Right.

Vertical Alignment: Plus! You’ll be able to put the pagination at the Top or Bottom of the slide.

Pagination Type: You can have Dots or Squares as the shapes to navigate your slides.

Default Color: Select a hue for your dots or squares!

Default Opacity: Have said color as light or dark as you want.

Active State Color: It’s basically where you can pick a color for when the button is “clicked”.

Active State Opacity: As with the default color opacity, you can have the active state color as light or dark as you want!

Mouse Over Fx: When you hover over the pagination buttons, you can have a Fade In / Out effect or None if you don’t want it.

Mouse Over Fx Speed: You can choose the speed of the mouse over effect! Make it Slow, Medium or Fast.

Behavior Settings

In this section of the app’s settings, you can opt to display (by marking the checkbox) these options when the pointer rollsover the slides.

Settings for the app's behavior

Settings for the app’s behavior

You can edit the options to:

  • Display Content On Mouse Over
  • Display Playlist On Mouse Over
  • Display Arrow Nav On Mouse Over
  • Display Pagination On Mouse Over

Propagation

Options for geometric and style propagation in the Super Banner app's settings

Options for geometric and style propagation in the Super Banner app’s settings

By enabling these options, all the versions of that app will have the same styling and image sizes throughout your whole  site. Furthermore, if you update one app in one page, changes will be reflected in all of the pages where that app is installed.

If you uncheck the propagation (Propagate Styles to All Pages and Propagate Geometry to All Pages) options, styling and image sizes will be managed independently on that app. Note that this option is enabled (checked) by default.

Content

With the Super Banner app you can display titles, subtitles, images, descriptions and buttons! When you first install the app, it comes with two slides in its default state. In this section of the tutorial we’ll show you how to edit them, add new ones, among other things.

First and foremost, you need to open up the CMS panel for the Super Banner app. To do it, just click the “Edit Content” button with the pencil icon on the app’s toolbar.

Edit Content in the app's toolbar

To open the editing options for the content, click on the pencil icon

Another way to get through is by double clicking any editable component in the app. When you see that your pointer turns into a pencil, just double click and the CMS panel for that slide will open up.

This is what the CMS panel looks like for the Super Banner app when you open it up.

"View All Slides" in the CMS panel

“View All Slides” in the CMS panel

Now, we can move on to the editing of the content.

To Edit a Slide

To edit an existing slide, whether you want to change  its title, subtitle, description, button or image, just click on the link that says edit to the right of it in the “View All Slides” section of the CMS panel.

"Edit" link in the CMS panel

If you want to edit a slide, click on its respective “Edit” link

This will open up the editing options for that slide. There you can edit anything you want regarding content for that particular slide. Remember to hit “Save” after editing so the changes are recorded successfully.

Texts

Edit the title of the slide by selecting the existing title and writing the new one over it in the Slide title field.

If you want to add a subtitle, you just need to enter it under the Slide subtitle section of the CMS panel for that slide.

You can also provide a description for your slide in the Slide description field.

Title, subtitle and description fields in the CMS panel for the Super Banner app

Use these fields to change their respective texts

Note: To edit the styles for the texts (font, size, color, etc.), you’ll need to close the CMS panel and use their style dots!

Button

You can use the button in the Super Banner app to link the slide to another page in your site or to a different URL. Here’s how it looks in the app:

Button example in the Super Banner app

As far as the options for the button, you can edit the text and the actual link.

In the “Button text” field, you can name your button for that slide.

To edit the link, just click the “Edit Link” option and use the panel that will open up to link out the button to somewhere in your site or to an outside URL. Hit “Save” when you’re done.

"Edit Link" in the CMS panel

Hit the “Edit Link” option to open up the panel. There, you can link out your button.

Note: As with the texts, to change its style and alignment, you can use the style dots for it!

Image

For the image, click the green edit image button.

Green "Edit Image" button

To replace, edit, crop, enter alt attributes or set an image for your thumbnail, click the green “Edit Image” button

In the Image Editor, you’ll be able to replace the images, add alt attributes, and even prep them for the thumbnail (in thumb) or for the main image.

Image Editor

Update! Now you can also add links to each image on your Super Banner app! Now you don’t have to rely only on the button for sending your visitors to a desired URL (or inner page of your site).

Click on the chain icon to add a link to your image

Click on the chain icon to add a link to your image

To Add a New Slide

If you need more slides (entries/items) in your Super Banner app, all you have to do is go to the tab that reads “New Slide” on the left of the CMS panel.

"New Slide" in the CMS panel

Click on the “New Slide” tab to get a brand new slide!

Once there, you’ll notice that the options for the new slide are the same as the ones when you edit a slide.

If you need some more help in this department, you can head on back to that section of this tutorial to know what you can do with the editing options (titles, subtitles, descriptions, images, buttons)!

To Delete a Slide

If you decide that you don’t need one of the slides in your Super Banner app anymore, you just need to go to the “View All Slides” tab and hit the “Delete” link from that respective slide. And just like that, it will be gone!

Delete link in the CMS panel for the Super Banner app

If you want to remove a slide, you just need to click on the “Delete” option to the right of it

To Reorder the Slides

Sometimes, you start adding new slides but then you notice that they’re not in the order you want them to go. If you have 2 or more slides and you want to reorder them, you just need to click, hold and drag that item into its new location. It’s that simple!

To reorder the slides in the CMS panel

To rearrange the slides, just click and drag them to their new position

And That’s It!

That’s all you need to know about the Super Banner app! Now you can go ahead and try it, see its full potential and buy it to give your site a little extra something!

Did you find this post useful? Let us know in the comments sections!

Menu