Image banner
Pipeline's powerful block-based hero style image banner section
Last updated
Pipeline's powerful block-based hero style image banner section
Last updated
Fully customizable image banner section with options for mobile and desktop devices including support for multiple buttons, and text options:
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:
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:
Blend your banner image with the header area:
Here are some tips for the perfect transparent header and Image banner combination:
Enable with the checkbox in the Header settings under Transparent header.
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.
Use the Full width option under Section spacing
Set Padding top to 0px (none)
