Moving beyond the conventional image with text overlay section, the Image banner section provides a flexible and stylish option for combining text, image, and links. Use the section blocks and settings to showcase media and messaging with an editorial edge.
Customize general settings
Open the Image banner section to customize its general settings.
Wide display
Enable Wide display for the section to span the full width of the window. Otherwise, the section will be limited by a horizontal container.
Desktop height
Select 400px, 500px, 600px, 700px, or 800px to set a maximum Desktop height for the image(s). Select Adapt to height of first image to use the first image's height as the basis for following images.
Images
Upload one or two images using the Image 1 and Image 2 slots. Click Select Image to locate images from your library.
From the blog
"Not only does this site-spanning, larger-than-life image appeal to our visual sensibilities, but done right, it can be a powerful way to establish a brand, highlight promotions, and bring products to life."
How to design large, full-width hero images for landing pages
Adjust the Image focal point settings for the image(s).
The options are:
| Top left | Top center | Top right |
| Center left | Center | Center right |
| Bottom left | Bottom center | Bottom right |
These settings will produce different results depending on whether one or two images are present, as well as the order and settings of blocks.
Upload a separate Mobile image to provide an image more suitable for smaller devices. Adjust the Mobile image focal point to position the image within its container.
The options are:
| Top left | Top center | Top right |
| Center left | Center | Center right |
| Bottom left | Bottom center | Bottom right |
Text alignment
Align the text to the Left, Center, or Right by selecting one of these options from the Text alignment setting.
Colors and overlay
Select a custom font color for the Text with the provided color picker.
Add an overlay to the images by selecting a color for the Solid overlay or several colors for the Gradient overlay.
Use the Overlay opacity range finder to adjust the translucency of the Solid overlay color.
Customize blocks
Click the toggle beside Image banner to reveal its blocks.
Each block includes a Text position or Position setting to influence the layout of the section. These settings relate to the number and order of blocks included in the section. Revisit these settings when adjusting blocks or block settings.
Preheading block
Click the Preheading block to customize its content.
Add the text for the preheading with the Content field.
Select Small, Medium, or Large for the Size.
Enable Bolder text to increase the font weight.
Activate Uppercase text to change all letters to uppercase.
Heading block
Click the Heading block to customize its content.
Add the text for the heading with the Heading field.
Select Small, Medium, or Large for the Desktop size.
To have separate font sizes for desktop and mobile, select Small, Medium, Large, or Extra large for the Mobile size. To keep these the same, select Same as desktop.
Text block
Click the Text block to customize its content.
Add the content to the Description field.
Select Small, Medium, or Large for the (font) Size.
Button block
Click the Button block to customize its content.
Select one of four button Style options.
The options are Icon, Signpost, Primary, or Secondary.
Customize the button Label using the provided field.
Connect a page or other URL with the Link field.
Customize the Main color and Contrast color using the color pickers.
Share your experience with Tailor
Your feedback is crucial! Help make Tailor better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Tailor?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!