< Back to All Pod Tutorials

Large Banner

Largebanner11

Use a Large Banner to quickly grab your customers’ attention and highlight products, sales, and events.

The Large Banner pod can only be selected at the trunk level of the page and ideally should be used once per page. As its intended use is as a header, and the title of this pod is an H1, it should be the first section on the page or at least placed as close to the top as possible.

large banner selection.JPG

Large Banner template

Content tab

Largebanner 1
  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 size of your image can determine the height of your banner, so keep this in mind.
  4. Title: An H1 header will be applied next to the image.
  5. URL: If you want to add a button, you will add the link for your button here.
  6. Button CTA: Add the text for your button. By default, text will be capitalized. Adding a button is optional, but the “URL” and “Button CTA” must be populated if you wish to add a button.
  7. Content: Add your content here as you would a Text pod. This field is optional.

Options tab

Largebanner8
  1. Preset: Presets allow you to customize your page sections further. We can help set up and manage your preset library.
  2. Use image as background: This option will use the image as a full-size background. Once selected, you will have more options.
    Largebanner9
    2. a. Add gradient above background image: This will add a black-to-clear gradient from left to right.
    2. b. Scale banner: You can scale your banner to 30%, 50%, 60%, or 80% of the height of the screen size.
  3. CTA below image on mobile: When viewing your banner on smaller screens, the button will usually appear below your text and above the image. If you flag this, your button will appear below your image.
    *This option will not work if this “image as background” is used. Largebanner10
  4. Align text to the right of image: The large banner is preset to have the text on the left and the image on the right; flag this to reverse their positioning.
    *This option will not work if this “image as background” is used.

Examples

The below example is styled with “Presets” to change the background and text color. The option to “Align text to the right of image” is also selected.

Largebanner7

The below example uses “image as background,” an “added gradient above the background image,” and a 60% “scale banner.”

Largebanner4

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