Section Landing Page Header

Section Landing Page Headers allow two looks:

Small Banner

small banner example screenshot

Large Banner

Large Banner options screenshots

To add a banner to your landing page, Log into Drupal.  Navigate to the webpage you want to edit.  Select the edit tab.

edit tab with red circle and arrow

 

The edit overlay window will appear.  Select the Extras tab and expand Section Landing Page Header.  Check the box Section landing page.  Choose the Small or Large banner from the Header Type dropdown.

Recommended dimensions:

  • 960×480 for “Large Image with Tagline and Buttons”
  • 960×180 for “Small Image with Tagline”

Extras Tab

Click Browse to upload your image.  An Upload window will appear.

Choose the image from your computer by browsing through your files.  Click Next.  It is not necessary to click Upload.  Clicking Next uploads your image and brings you to a new window.

Add an Alt Text.  Alternative text is used by screen readers, search engines, and when the image cannot be loaded. By adding alt text you improve accessibility and search engine optimization.

Add a Title Text.  Title text is used in the tool tip when a user hovers their mouse over the image. Adding title text makes it easier to understand the context of an image and improves usability.

Caption is not necessary.

Scroll down and click Save.

There are a few more options to decide.

Tagline

A tagline is optional.  It is a short message that appears in the section header just below the page title. To safely fit the space on all devices, this text should be 90 characters or less.  Enter the text in the Tagline field.

tagline for banner

Action Buttons

Action Buttons are optional.  You may use both or only one.  They appear just below the page title and tagline.

Screenshot banner buttons

The Action Button Title title is limited to 128 characters maximum, but Action Button titles should be short (~10 characters or less).  If a longer button title is needed, use only one button and the design will allow it extra button size.

You may paste a link into the URL field or use the Search button to look for a webpage in Drupal.

After you have configured the Section Landing Page Headers, scroll to the bottom of the page and click Save.

Use the Webpage Example for Extras and Homepage Options to further explore.

Category: