Documentation
Foundry
Addons
Other

Banner

Base Foundry stack

Create beautiful banners to top your pages and draw in your visitors. The Banner stack allows you to build complex banners with ease.

  • Choose from a solid color, or a gradient for a backdrop
  • Opt to use drag-and-drop or remote image for background
  • Use an image that covers the background or is tiled
  • Opt for a locked background image
  • Choose to have a solid overlay color or a gradient on top of your image
  • Set horizontal and vertical image origin points
  • Add your own content within the banner drop zone
  • Add Parallax scrolling effect to banner background images
  • Choose from Fluid or Fixed-Width for your banner content
  • Choose a banner height for each breakpoint or use a flexible height
  • Opt for a "hero" banner whose height matches that of the browser
  • Use a standard or animated graident
  • Set gradient angle
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example


Using Banner

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Banner stack.

Inner Container
You can choose between a fixed-width for the inner portion of the Banner stack or make it fluid. Fluid allows the contents of the Banner stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

Inner Max-Width
Set the maximum width you desire for your content in the Banner stack when using Fixed-Width as your inner container type.

Remove Left & Right Padding
When using the Fluid option of the Inner Container setting you are given the option of whether to remove the outer padding on the left- and right-hand sides of the Banner’s content container.

Hero Banner
Enabling this feature forces your banner area to take up the entire browser window. The exact size will depend on your visitor’s current browser size or the device that they are visiting your site on. You’ll want to experiment to make sure that this type of banner is right for your project.

Disable Hero on Mobile v2
When enabled the Hero Banner feature will be turned off at the Mobile breakpoint. When this feature is used the Banner's height becomes Flexible at the Mobile breakpoint.

Scroll Down Button
This feature is available only when the Hero Banner is enabled. It allows your visitor to click a downwards facing arrow icon and the browser scrolls upwards to show your content on the page. You can customize the look of the scroll down button’s background and arrow icon, as well as add a subtle shadow to it.

Banner Style

Banner Style
Choose what kind of banner you will have on your page. You can choose from an image, a solid color, a gradient or an animated gradient (note that animated gradients are processor intensive for your visitors).

Gradient (Animated Gradient mode)
Choose 4 different colors for your gradient. The animated gradient will cycle through these colors subtlety.

Cycle duration (Animated Gradient mode)
Set how long it will take for it to animate through the entire gradient. You set this value is seconds. The larger the value the more subtle and pleasing the animation will be.

Banner Background
This is the color picker for your banner's background when you have opted to use the Color Picker Banner Style for your banner.

Image Type v2
When you've chosen Image as your Banner Style you'll be allowed to then choose an Image Type. Starting in Foundry v2 you have many more options here. You can opt for the traditional drag-and-drop method or you can use a remote URL for your image.

In addition you can also opt to select Dark Mode versions of either the drag-and-drop or remote URL options. When you do you'll be given the ability to provide a Dark Mode image that will be displayed as your banner image when a visitor is using an OS or browser with Dark Mode enabled.

When you choose drag-and-drop you'll be given an image well for you to place your banner image inside and RapidWeaver will manage your image for you. If you've opted for the remote URL feature you'll be given a link button that allows you to type the URL of your remote image where it exists on your server, and you'll need to manage your images manually using your ow FTP software.

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set the Banner's background image.

Background Image Type
Choose how you wish for your image to be displayed inside your Banner stack. You can choose from Cover or Tiled. Cover responsively sizes and / or crops the image, as necessary, to cover the entirety of your banner area background. Tiled allows you to take an image and repeat it both horizontally and vertically.

Vertical Origin v2
Choose to have the center, or origin point, for your image be the top, center or bottom of your image. This allows you to define the focal point of the image.

Horizontal Origin v2
Choose to have the center, or origin point, for your image be the left, center or right of your image. This allows you to define the focal point of the image.

Lock Background
Enabling Lock Background sizes your image up to be the size of the browser. The image only shows though in the "window" that is your banner area so it appears as though your site’s other content is scrolling on top of your image which is locked into position.

Overlay Type v2
Choose whether to use a solid color or a gradient as your overlay that will be applied on top of your banner's background image. You'll be given either one color picker for your solid color overlay or two color pickers and an angle control for a gradient overlay.

Enable Parallax Effect
Turning on this feature creates a parallax scrolling effect for your banner’s background image. This moves, scales or fades the image slightly as the user scrolls through the page in either the upward or downward direction.

Parallax Style
Choose whether to have your background banner image scroll, scale, or change its opacity as the user scrolls through your page. There are also two combination options that pair Scroll & Opacity or Scale & Opacity together.

Parallax Speed
This is essentially a relative value that determines the speed at which the parallax effect occurs. Generally the default value will be optimal.

  • Please Note: The Lock Background feature, if enabled, is replaces by the Parallax settings when you enable the Parallax effect.
  • Also Note: The Parallax effect automatically sets the background image type to Cover. This is in essential in order to achieve the Parallax effect.

Banner Height

These options are not available when using Hero Banner mode.

Plus / Minus Circle
When the plus circle is visible the banner is in Flexible mode. The banner height will adjust depending on the content that you’ve added to the banner. If you have no content in the banner when using Flexible mode the banner will be a height of zero.

When the minus circle is showing you will be presented with four different height settings. This allows you to set custom, fixed-height sizes for the 3 different breakpoints as well as for Large displays. The banner height is not flexible in this mode and if you have more content in the banner than will fit in this mode it will be cropped off.

Insight
Partitions Pairing

If you use a Banner stack, or other stacks that use Parallax or Locked Backgrounds, inside of a Partitions stack you'll want to note that those options won't act like you'd expect.

Parallax and Locked Backgrounds rely on the browser scrolling as the visitor scrolls through your pages. In Partitions the browser window itself never scrolls. Instead the individual sidebars and main content areas scroll, while the browser itself stays stationary. Thus you'll want to avoid using the Parallax and Locked Background features of the Banner stack inside of the Partitions stack.