Thin Banner

Thinbanner_ex1

This is an example of a Thin Banner

The Thin Banner is a trunk-level pod that lets you catch your customer’s attention with solid text and a bold graphic.

thin banner selection.JPG

Thin Banner template

Thinbanner 4
  1. Internal Name: This title will not be visible on the website; it is only used for organizing your content.
  2. Share: If you flag this pod, your chosen content and settings will be saved to be added easily throughout your website. *If you need to change this pod, you can adjust it in one instance, and it will automatically be updated throughout the site.
  3. Image: Add an image from your image library. The image’s height and width will determine your banner’s size. Below are examples of different-sized images. The image will be centered on the screen. A broken image icon will be applied if you do not apply an image.
  4. Title: An H2 header will be applied over the image. The text will be centered unless it is larger than the screen size – then, it will be left-aligned.

In the “Options” tab, you can choose a “Preset.” Presets allow you to customize your page sections further. We can help set up and manage your preset library.

Examples

The banner images below were created in Adobe Illustrator and saved as SVGs.

Example 1

The image for the example below was created on a 1400 by 200 pixels artboard.

Thinbanner_ex1

Thin Banner example 1

Below is the original image.

Thinbanner_ex1

Example 2

This banner was created on another site’s theme with a different font. The text color was adjusted using “Presets”. The artboard for this image is 800 by 120 pixels.

Preset4

Below is the original image.

Thinbanner_ex3

Tips for your best Thin Banner

  • When creating your Thin Banner, try different-sized images to see what works best with your text.
  • Make sure your text is legible on your image, and double-check that it stays legible when resizing screens.

Save and publish

To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.

Pagecreate6