Rotating banner

The Rotating banner feature allows you to easily create multiple, slideshow-style banners and blocks for your website. In addition, it allows you to add:

  • Multiple images to banners you create
  • Various transition effects between the banner images
  • Customized texts and links to one or more banner images

Rotating Banner demo

Enabling this feature

To enable this feature as you create your Drupal Gardens website, drag the slider for Rotating banner to On on the Choose a template page.

Rotating banner feature

If you enable the feature from the Choose a template page, Drupal Gardens displays an example rotating banner on your website's home page.

Video: Creating a rotating banner

Adding banners

You can create new rotating banners at any time and put them in any block region or page on your website.

Creating the banner

To create a new banner:

  1. Go to Structure > Blocks, and then click the Add a rotating banner link.

    Add a rotating banner link

  2. Enter a title to help you identify the banner in the Banner title field. This field isn't displayed to your website users.

    Banner title field

  3. Click Create.

Adding images to your banner

You can now add and configure as many images as your banner requires.

  1. In the Banner images section, click the Add a new slide to this banner link to add your own image.
  2. Click the Choose banner image link. You can select images from your website's Media library, upload a new image, or provide the URL of an online image you wish to use. The image you select is displayed in the Preview field.

    Note: If you are leaving your banner in the "Banner" region, 934 or 960 pixels are good widths to try for your banner images. The banner will look better if all the images it contains are the same height. See also the upcoming section, Configuring banner settings.

    banner_1-1.png

  3. Select from the following options in the Layout list to set the position of the text on your image:
    • Top left, Bottom left, Top right, Bottom right - Displays the banner headline and text in the selected position.
    • Custom - Adds more controls and options, allowing you to add as many headlines and text areas as you need and position them anywhere on the banner image.
  4. Edit banner headlines and text areas by double-clicking them on the banner image.

    banner_2.png

  5. In the Link field, enter the location to which you want to redirect users when they clicking on the banner. You can use:
    • Absolute URLs (http://example.com)
    • Relative URLs (node/12)
    • Paths on your site (contact)
    • <front> links to the default front page of your site
  6. Click Save to save the image and settings.

banner_3.png

banner_5.png

Configuring banner settings

After you've added images to your banner, configure how you want your banner to interact with the website and with users.

  1. In the Banner settings section, configure the following settings:
    • Banner size options
      • The banner will shrink to fit the page - If your images are wider than the display area of the banner's block, they will be shrunk to fit. If your images are smaller than the display area of the banner's block, the banner will be resized to match them. Banner images will never be stretched, only shrunk.
      • The banner will not shrink to fit the page - You may specify a maximum width and/or height for your banner. Larger images will be cropped to fit these dimensions.
    • Transition type list - Choose from a variety of transition effects.
    • Automatically change slides check box - If you clear this check box, banner slides change only when your users click on the banner controls (see the following).
    • Delay between slides in milliseconds - Define how long each image is displayed. 1000 milliseconds = 1 second.
    • Type of control to switch between slides list
      • None - Your users cannot skip to another slide manually.
      • Buttons - A row of small "buttons" is displayed below the banner, one for each slide. Your users can click these to advance to that slide in the banner.
      • Numbers - A row of small numbers is displayed below the banner, one for each slide. Your users can click these to advance to that slide in the banner.
  2. In the Block location section, use the list to select a display region for the rotating banner in your selected theme. You may also set this region on the Blocks page at Structure > Blocks. For more information on blocks, block regions and visibility settings, see Blocks.
  3. Click Save block.

Modifying banners

Drupal Gardens displays rotating banners in blocks on your website. This means that all of the configuration options for your banners are on the Blocks page.

To modify an existing banner on your website:

  1. Go to Structure > Blocks.
  2. Find the rotating banner that you want to modify, and then click its configure link.

    If you enabled the Rotating banner feature when you created your website, to edit the example banner on your home page, click the configure link for the Rotating banner: Main banner item.

  3. Configure the banner based on the information in the Adding banners section, changing images and settings as needed.
  4. Click Save block.

Your banner now displays the changes you made on the Blocks page.

Creative Commons attributions

Creative Commons attributions for images used making this page can be found here.

Feedback