Designing a Banner

To capture the attention of viewers and set the tone for your entire board, use the designer tab to create an outstanding banner design. The banner is composed of a background image on which you can add an overlaying title, subtitle and action button.  

To learn how to design a banner in BuyEx 3.0, read this article. 

You can design the following banner elements:

• Title and subtitle: choose an effective title to communicate your board’s core message and give readers a clue to the board's content.
• Banner type: set the height dimensions of your banner to determine how much of the background image appears on the board.
• Background image: choose a visual image that will appear across the banner section.  
• Background image tint: apply a tint to the image to control its coloring contrast. For example, if the original image is very bright, adding a dark tint can make the banner text more readable.    
• Banner text color: choose a contrasting text color against the background for optimal readability. For example, choose white text against dark colored backgrounds.
• Background image position: align the position of the image to determine which part of the image appears on the banner.

Before you begin:

• Choose an image to use as the background image of your banner. You can choose an image from the Image Library, from the web or upload an image from your computer.
• The maximum file size for images is 25 MB.
• Prepare the size of your image file as follows:

Tip: If you've added a header to your board, keep in mind that the header takes 80 pixels off the top of the banner image.

To design a banner:

1. Select the board you wish to edit.
2. Click the Designer tab > Banner.
3. To add a banner to your board, enable Show Banner Area. If disabled, your board appears without a banner section.

While you are working on your Banner, you can view its design in the highlighted display on the right-hand side. To learn more, see Previewing a Board Design. 

4.  To set the height of your banner, select the Banner Type:

• • Basic: the shortest type of banner. The banner appears blank, without a background image.    
  • Short
  • Medium
  • Tall 

Review the image sizes described above for the different banner types.  

5. To update the banner image, click Change Background and select an image using the following options:

• • Select an image from the Image Library.
  • Upload your own image.
  • Find an image from the web through Folloze.

6. After selecting an image, click Done.
7. To determine which part of the image is displayed on the banner, select the Position from the grid. For example, if you choose the align center position, the image center is displayed on the banner.  

8. Apply a Background Tint to the image.

• • None: the image appears in its original color, with no added tint.
  • 50% or 75% Theme: apply a tint using the board’s theme color.
  • 50% or 75% Light: apply a light tint to the image.
  • 25% or 50% or 75% Dark: apply a dark tint to the image.

The uploaded image appears across the entire Banner area of the board. 

9. To change image settings for mobile devices, enable Background image optimized for mobile.

a. To update the mobile banner image, under Mobile Background Image / Video, click Change Background and select an image using the following options:

• • Select an image from the Image Library.
  • Upload your own image.
  • Find an image from the web through Folloze.

b. Select the Position of the banner image on mobile devices.

c. Apply a Background Tint to the banner image on mobile devices.

10. Select a Banner Text Color for the banner title and subtitle:

• • Light
  • Semi Dark
  • Dark

Changing your banner’s text color only changes the title and subtitle color. It does not change the text of a call to action button. Action buttons always have white text.

11. To align the title and subtitle on the banner, select the Title and Subtitle Text Alignment:

• • Center
  • Left
  • Right  

12. Add a Title to the banner. Titles are limited to 85 characters.
13. To provide additional information, add a Subtitle. Subtitles are limited to 500 characters.
14. To add a form to the banner, enable Show form on board and select the form from the drop-down menu.
15. If you enabled Show form on board, configure the form settings.
16. To add a call-to-action to the header, enable Action Button and write the Button Text in the textbox.
17. If you enabled the Action Button toggle, select the Click Action type from the drop-down menu. For more information on CTAs, see  Adding Call-to-Action Buttons to Boards.  
18. To apply personalization rules to the title, subtitle and action button, click on the personalization icon. To learn more, see Personalizing Content Items.
19. To display an empty CTA button, enable Make Action Button Transparent.  
20. Click Save.
21. To preview your banner design, click View Board.