What You’ll Learn

In this article we’ll go through how to set up a Banner app, to showcase a series of images, with a text tagline, and a link that can take you to a contact form or a custom link.

It’s similar to the Slideshow app, but the banner has a way to change current slide on demand, and text on top of images.

Steps to Set Up a Banner App

Installation

1. To install a Banner app, once logged in to your Breezi site (in authoring mode), go to the shelf > Apps Store. Locate the Banner app.

2. Drag the “Install New” button to one of your column, and release it once you’re happy with its position.

3. Once it loads, it will look like the following image.

Update the Image

4. Let’s change the image first. We will upload one from our hard drive. Double click on the sample image (grayed one).

5. The image options panel will open. Here, click on “Replace” and select an image from your computer. Click “Save”.

Edit Text

6. Your image will be loaded, and you can proceed to edit text. There are two captions below. The first one on the left, is the tagline for the image. The second one is a call to action for a contact form (can be made a custom link). Let’s double click on the first.

Call to Action

7. Now let’s edit the call to action. Just double click and start typing.

8. The call to action you just edited, may take your users to either a contact form to send you inquiries, or a custom link you provide. To set this up, click below the app, where it says “Form Settings”.

Form Settings

9.  The Form Settings panel will open. Here you have a number of options. The first option, Promotion Link, is where you may set an alternate URL that will open instead of the form. You may also check a checkbox right below to open it in a new window.

On the right column, there’s a list of possible fields for showing on the form. For each of them, you have the following options: “Ask as required”, “Ask as optional” and “Don’t ask for it”.

Then, below the “Open Link in New Window” option, there’s the rest of the form settings. Here you can edit the form title, add a description, and a thank you message, which is shown once the form is submitted.

The “Redirect URL After Submission” will take your user to a page of your choice, after they submit the form (this is optional).

After you’re done with the options, you can click on “Save” and “Close”, on the top right corner.

And that’s good for your first slide, but what if you want more?

Add More Entries

10. You can easily add more slides with the “New Entry” button on the top left of the app toolbar.

Remove Entries

Or, if you need to delete one, you’ll need to go to the bottom of the app. On the lower right side, there’s a small X. Click it to remove an item (slide) from your app. Don’t click on the big X on the right of the app toolbar (on top)! That will delete the whole app. Though you can always add it back.

And you can repeat steps 4-7 to customize the new slide with another image, caption and call to action.

Navigation Bar

11. You’ll notice that when you have more than one item, a navigation bar with arrows pointing left and right appears below.

This bar can also be customized with its Style Dot. You can change background, margins and more.

Reorder Items

12. Also, when there’s more than one item, a button for rearranging the items will allow you to reorder your slides.

Click it, and a modal window with your items will appear. Click and drag them in the order that you prefer. Once done, hit the close button on the top right.

App Settings

13. Lastly, you have the app settings. They will allow you to enter a label for your form (in case you use it, otherwise see step #9). So for the Email field, you can either enter a label like just “Email”, or “Enter your Email” or “Please enter your Email in this field”. You don’t have to edit fields you won’t be using (again, see step #9).

And below these, you have two more options: “Auto Rotate”, which can let you choose a speed for the slides to rotate, or disable auto rotation altogether; and “Propagate Style to All Pages”, which will copy the styling dot options from this app instance to the rest of them, if your Bnner app is installed on more pages.

And that’s it for the Banner app! If there’s something not covered here, let us know in the comments below!