Banner section

 

The page builder’s Banner section generates a full width banner image that can easily turn into a slider if multiple images are added.

banner-section


Add a Banner section

In the builder menu, hover over the Banner icon and click green-plus to add this section to your page.


Configure the section

Click the Configure section icon in the section header to:

  • Add a section title. This displays above the section if it is set.
  • Configure the options for the slider. These include showing/hiding navigation elements, autoplay, time between slides, and the transition effect.
  • Set the section height. This will be the height of the banner when the browser width is 960px. At wider or narrower widths, the height will change accordingly, depending on the option chosen for Responsive behavior.
  • Set the Banner’s responsive behavior.
  • ➝ Default will maintain its aspect ratio for browser widths between 600px and 960px. At narrower widths, each slide will expand to fit its content, while at wider widths, the height will remain static at the value set for Section height.
    ➝ Aspect will always maintain the same aspect ratio, regardless of the browser width or the amount of content in the slides.

  • Add a HTML section ID or class.
  • Check the box to remove the space below the banner section.

Configure an individual slide

Click the green plus icon to add a new slide. For each slide you can:

  • Set a background image. Click on the gray region with the image icon to upload a new image or choose one from the Media Library.
  • Click the Configure slide icon to set individual slide options. These include the position of the content on the slide, an option to darken the background to make the content more legible, and a background color option.
  • Add content to the slide. Click the Edit content icon to open the content editor. Once a slide has content, the icon will change to green lines.

Drag and drop to reorder individual slides

To rearrange the order of the slides, click and hold the double dotted border at the top of a slide. Drag the slide to a new location and release.


Delete an individual slide

To remove a slide, click the Delete slide icon in the corner of the slide.