Landing Page Content
      Back to home
      1. ClickBid Help Center
      2. Landing Page Content

      Hero Banner Examples & Optimal Image Sizes for Landing Pages

      Below are examples of various Hero Banner styles available in the Landing Page Builder.
      For optimal visual impact, we recommend using the following image dimensions for Hero Banners. Please note that these are suggested guidelines—resizing your image may be necessary to ensure it displays well within the banner layout.

      Hero 1

      • the Hero logo will display at the top of the screen
      • The ability to add a description/venue information/date can be added in between the Hero Logo and the Hero background after closing the ‘settings’ tab.
      • If ‘show hero button’ is set to Yes that will display between the Logo and the background.
      Hero background will display below

      • Laptop view:

      • Mobile device view: 


      • Logo: 200×200px
      • Hero Background: 1920×1080px or 1024×576px (Smaller sizes may appear slightly blurry)
        • Note: These recommendations are based on general testing for optimal display across devices, but we cannot guarantee these dimensions will work perfectly with your specific images. Text may get cut off with certain hero styles, and visual elements may display differently than expected depending on your content. We encourage you to test and adjust sizes to achieve your desired look and feel for your particular imagery and text.


      Hero 2

      • Title -the larger print verbiage to the left of the hero banner
      • Subtitle- the smaller print verbiage to the left of the hero banner
      • My hero button (optional) This will display if it was set to yes in the settings and a URL to where the button goes when clicked.
      • The verbiage in the button can be edited
      • If ‘Show Social Media Share Buttons’ is set to yes, those buttons will display below the hero button
      • The Hero Logo will display encased in a white box in front of the hero background
      • The Hero background will display behind the Hero Logo and to the right of the title & subtitle
      • Laptop view:
      • Mobile device view:
      • Logo: 100×100px or 50×50px
      • Hero Background: 1024×576px or 640×360px
      • Note: These recommendations are based on general testing for optimal display across devices, but we cannot guarantee these dimensions will work perfectly with your specific images. Text may get cut off with certain hero styles, and visual elements may display differently than expected depending on your content. We encourage you to test and adjust sizes to achieve your desired look and feel for your particular imagery and text.

      Hero 3

      • Hero Logo is at the top
      • Title -the larger print verbiage is below the Hero Logo
      • Subtitle- the smaller print verbiage below the Title
      • Hero button (optional)
      • Social Media buttons (optional)
      • Hero background will display at the bottom of the hero area.
      • Laptop view: 

      • Mobile device view:
      • Logo: 200×200px
      • Hero Background: 1024×576px or 640×360px
      • Note: These recommendations are based on general testing for optimal display across devices, but we cannot guarantee these dimensions will work perfectly with your specific images. Text may get cut off with certain hero styles, and visual elements may display differently than expected depending on your content. We encourage you to test and adjust sizes to achieve your desired look and feel for your particular imagery and text.

      Hero 4 

      • Hero Logo will display in a White Card on the middle to left side of the hero area
      • Title: Larger verbiage is in the white card with the Hero logo
      • Subtitle: Smaller verbiage is in the white card under the title
      • Hero Button (optional) displays below subtitle in the white card
      • Social Media share buttons (optional) displays below Hero Button
      • The Hero Banner displays to the right side of the Hero Area
      • Laptop View:

      • Mobile device view: 
      • Logo: 150×150px
      • Hero Background: 830×830px (square format)
      • Note: These recommendations are based on general testing for optimal display across devices, but we cannot guarantee these dimensions will work perfectly with your specific images. Text may get cut off with certain hero styles, and visual elements may display differently than expected depending on your content. We encourage you to test and adjust sizes to achieve your desired look and feel for your particular imagery and text.

      Hero 5 

      • Hero Banner full size in background
      • Hero Logo is positioned in a white box floating over the hero banner
      • Title: Larger verbiage is below the Hero logo
      • Subtitle: Smaller verbiage is below the Title
        Hero button (optional) below the subtitle
        Social Media share buttons (optional) below hero button
      • Laptop View:

      • Mobile device view:
      • Logo: 200×200px
      • Hero Background: 1920×1080px, 1024×576px, or 640×360px (all sizes work well)
      • Note: These recommendations are based on general testing for optimal display across devices, but we cannot guarantee these dimensions will work perfectly with your specific images. Text may get cut off with certain hero styles, and visual elements may display differently than expected depending on your content. We encourage you to test and adjust sizes to achieve your desired look and feel for your particular imagery and text.