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.
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!
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 for Breezi (you get a 14 day trial period where you can have all access to all the apps and features free of charge!).
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.
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):
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.
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:
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!
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.
And these are the options for them:
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:
You can change their position, color, etc. Lets go over the options you have for them:
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 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.
These are the settings for the playlist option:
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.
The pagination allows you to move through the pages in the app with the help of some buttons with a minimalist design.
In “Edit Settings”, you’ll be able to see the customization options for them.
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.
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.
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
By enabling these options, all the versions of that app will have the same styling and image sizes throughout your whole Breezi 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.
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.
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.
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.
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.
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.
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!
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:
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.
Note: As with the texts, to change its style and alignment, you can use the style dots for it!
For the image, 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.
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).
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.
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!
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!
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!