Ask a Question ?
Design & Publish Websites Faster

How the Banner App Works

How the Banner App Works

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


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

App Store menu, showing the Banner app

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

Drag and drop the new Banner app button

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

Banner app when it loads

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).

Click the image to replace it

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

The replace button is located on the bottom left area of the options panel

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.

Click to edit the caption text

Call to Action

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

Click to edit call to action, on the right of the caption

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”.

Click on the "Form Settings" button to access the form options

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.

Several options for the form

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.

Once you finish editing the options, save and close

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.

Click the "plus sign" to add another slide

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.

Click the X below the app to delete an item

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.

Arrows to cycle through your items left or right

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.

Reorder button

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.

Reorder window to rearrange your items

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.

Settings for the Banner app

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