Image banner

Pipeline's powerful block-based hero style image banner section

Fully customizable image banner section with options for mobile and desktop devices including support for multiple buttons, and text options:

Each button block can contain multiple buttons

Separate image options for Desktop and Mobile

Section settings

Use the section settings to choose images for desktop and mobile, image position, and section height:

Tip: Use the Image height setting to view the entire image without any cropping. Especially helpful for mobile devices. All other height options will automatically crop and position the image based on position and height settings selected. The provided mobile image option is designed to help by using a custom image which may work with different height options.

The overlay feature is only applied to the text area, adjust the color and opacity to help the text stand out over the image.

Customize the text options and section spacing to finetune the design. The text area can be transparent or contain a background color:

Blocks

Add content blocks to customize the Image banner section. Individual blocks can be added multiple times and reordered for complete customization:

Add your content into each block and customize using the settings available to each block type. The Buttons block can have multiple buttons, add content to create each required button:

Buttons are stacked on mobile and horizontal in a row on desktop. For stacked desktop buttons, add a second Button block. The second block will display below the first block:

Transparent header

Blend your banner image with the header area:

Here are some tips for the perfect transparent header and Image banner combination:

Header section settings

1. Enable with the checkbox in the Header settings under Transparent header.

2. Add an alternate logo that works best for the transparent header effect. In our example, we have a white Alternate logo and the standard header logo is black.

Header settings

Image banner section settings

1. Use the Full width option under Section spacing

2. Set Padding top to 0px (none)

Image banner section settings