The main banner is displayed on the header of your home screen. It’s important to spend some time designing the main banner with the help of banner image, color fills, banner text attributes.

In this section, we will talk about the elements that will help design a perfect banner for your home screen.

Banner Design

You have the option of designing your banner using an image or simply filling it with a solid color. Both of these options are discussed below.

Select or Upload Banner Image

Choose an image from AppMyite’s library or upload one from your device.

Follow the steps below to select an image from the image library.

  • Click on the field under Select Image Banner.
  • Enter a search term relevant to your design.
  • Click on the image you like when you find it and select DONE.

Follow these steps to upload an image from your own device

  • Click on the Upload Image button at the top right corner of the image library.
  • Click anywhere on this screen to upload an image from your device.
  • You can also drag and drop the image.
  • Click DONE to save your image and proceed.

Make sure the image file meets the required specifications.

  • File format: PNG, JPG
  • File size: 1125 * 480 px

Select Solid Color

Follow these steps to fill the banner with a solid color.

  • Open the color panel under Select Solid Color.
  • Scroll across the color panel and preview the changes on the live emulator. Keep experimenting until you find the right aesthetic.
  • You can also enter a hex code or RGB values to arrive at the color best suited to your design.

Banner Message

The banner message refers to the text on your banner image. Try to craft an engaging message for your audience. Here are the design elements you need to take care of.

Banner Text

You can add a message to your banner. Set the banner text as explained below.

  • Click on the Banner Text field and enter your message.
  • The character limit is 15. Keep your banner text within the same limit.

Font

Here’s how you select the font for your banner text.

  • Click on the Font field to open a drop-down menu.
  • Select the font that best suits your needs.

Select a font that complements the overall design of your app.

Font Size

Set the font size for your banner text with the following steps.

  • Click on the Font Size field to open the drop-down menu.
  • Select your preferred font size for the banner text.

Color

Select the font color for the banner text with the following steps.

  • Open the color panel under Color.
  • Scroll across the color panel and preview the changes on the live emulator. Keep experimenting until you find the right aesthetic.
  • You can also enter a hex code or RGB values to arrive at the color best suited to your design.

Align

Adjust the alignment of the text as you want it to appear on the banner.

  • Click on the buttons under Align to set your text on the left, center, or right of the banner.
  • Preview the text alignment on the right side of the screen.
  • Select the alignment for the banner text.

Click SAVE to save design settings for the Main Banner section.