Durable’s Banner section comes in multiple styles so you can match your brand’s look and feel.

Here’s how to add and configure a Banner section in your Durable website editor:

Click Add section +
- In your page editor, select Add section + at the top or bottom of your page.
Search for “Banner”
- Type Banner into the search box.
- You’ll see options like Banner, Banner carousel full, Banner image slider horizontal, Banner double image slider, Banner bento grid, and more.
Choose your banner style
- Click the style you prefer to add it to your page. Durable will insert example headlines, subtext, and placeholder images.

Banner

Use the Banner section when you want a bold, uncluttered hero image (or video) with a single clear message and optional call-to-action. It’s perfect for:

Big impact, minimal copy: Launch announcements, product reveals, or brand statements where one striking headline and background carry the story.
Focusing attention: Driving visitors toward one primary action like “Get Started” or “Book Now” without visual distractions.
Seamless brand presentation: Blending your page header into a single, immersive hero image for a streamlined, cohesive look.

Content Tab

This is where you edit the text and decide whether to use a background image/video.

Tagline
- Optional accent line above your main headline.
- Click Generate to let Durable suggest a short phrase.
Headline
- Your primary message.
- Click Regenerate to try different headlines or type your own.
Subtext
- Supporting details under your headline.
- Click Regenerate for new copy suggestions or enter custom text.
Image toggle
- Switch on Image (background image/video) if you want media behind your text.
- If enabled, you’ll see the Image/Video selector below.
Buttons
- Toggle on Buttons to add a call-to-action.
- Click Add button +, then set the Label and Link type (page, section, email, phone, or external URL).

Style Tab

Fine-tune the look, layout, and behavior of your banner’s background and text.

Colors
- Click Change to pick your background and text colors from your theme palette or enter a custom hex code.
Background image/video
- If enabled in Content, you’ll see this option here.
- Position sliders let you shift the image horizontally and vertically.
- Overlay dropdown adjusts how dark or light the overlay is to improve text readability.
- Image/Video blur applies a softness effect behind your text.
Text size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Spacing
- Top and Bottom padding (Small, Medium, Large).
- Min. height: select Content (fits text) or Screen (fills the browser viewport).
Horizontal alignment
- Align your text to the left, center, or right within the banner.
Divider
- Toggle on to add a decorative divider at the bottom of the banner (click Change to pick a style).
Border
- Toggle on to wrap the banner in an outline.
Animations
- Choose how the banner’s elements appear on scroll: From theme (Fade in), Fade, Zoom, or Slide.
Combine with header
- Toggle on to seamlessly blend the banner background into your site header.

Banner Carousel Full

Opt for Banner Carousel Full when you have multiple key messages or visuals you want to showcase in sequence. Ideal scenarios include:

Highlighting features: Rotating through product benefits, service offerings, or case-study snapshots, each with its own headline and subtext.
Storytelling in chapters: Telling a multi-step narrative such as “Plan → Build → Grow” with each slide covering one step.
Maximizing real estate: Using full-width slides to keep your hero section dynamic and engaging, especially when you have 3–5 strong visuals to share.

Content Tab

Use this tab to edit your carousel’s copy, pick images, and toggle buttons.

Tagline
- A brief accent line above your headline.
- Click Generate to auto-suggest a short phrase.
Headline
- Your rotating carousel’s main message.
- Click Regenerate to try fresh headline ideas.
Subtext
- Supporting detail beneath the headline.
- Click Regenerate for new suggestions or enter your own.
Carousel images
- Drag-and-drop to reorder up to 5 slides.
- Click the pencil icon on any slide to change its image, caption, or alt text.
- Click the trash icon to remove a slide.
Buttons
- Toggle on to show a call-to-action button beneath your carousel.
- Click Add button +, then set your Label and Link type (page, section, email, phone, or external URL).

Style Tab

Tune the look and behavior of your carousel’s images, text, and layout.

Colors
- Click Change to pick your background and text colors from your theme or custom palette.
Button style
- Click Change to choose from Durable’s preset button styles (filled, outline, pill, etc.).
Image Style
- Overlay: Adjust darkness/lightness overlay on each slide.
- Image blur: Apply a soft blur behind text for readability.
- Fade: Toggle on to apply a subtle cross-fade between slides.
Text size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Spacing
- Top and Bottom padding: Small, Medium, Large.
- Min. height: Content (fits around text) or Screen (fills the visitor’s viewport).
Content alignment
- Align text and buttons left, center, or right over the carousel.
Divider
- Toggle on to add a decorative shape between your carousel and the next section.
Border
- Toggle on to wrap each slide in a subtle outline.
Animations
- Select how slides animate (From theme, Fade in, Slide, Zoom).
Combine with header
- Toggle on to seamlessly blend the carousel’s first slide with your site header for a hero-style effect.

Banner Image Slider (Horizontal)

Choose the Banner Image Slider Horizontal style for a side-scrolling carousel that blends images and text in a more compact viewport. Best for:

Visual exploration: Letting users swipe or click through a gallery of 6–10 images—great for portfolios, customer testimonials, or before-&-after galleries.
Layered messaging: Overlaying concise headlines and CTAs on each slide, while keeping the slider height moderate for quicker page access.
Interactive discovery: Encouraging user engagement through manual scroll controls, ideal when visitors need to browse options at their own pace.

Content Tab

This is where you manage your slider’s copy, images, and buttons.

Tagline
- A short, accent line above your headline.
- Click Generate for AI-suggested taglines.
Headline
- The main message that appears over your slider.
- Click Regenerate to try new headline ideas.
Subtext
- Supporting copy beneath the headline.
- Click Regenerate to refresh the suggestion or type your own.
Carousel images
- Drag-and-drop up to 10 images into the list to define your slides.
- Click the ✎ edit icon on a slide to swap its image, update alt text, or change caption.
- Click the 🗑️ trash icon to remove an unwanted slide.
- To add more, click Add image +.
Buttons
- Toggle on to display a call-to-action button beneath your slider.
- Click Add button +, then specify:
  - Label (e.g. “Explore Our Services”)
  - Link type (section, page, external URL, phone, or email)

Tip: Keep button labels concise to maintain visual balance.

2. Style Tab

Use these controls to fine-tune the look and feel of your slider.

Colors
- Click Change to select background, text, and button colors from your theme or a custom palette.
Button style
- Click Change to choose the shape (filled, outline, pill) and hover behavior.
Carousel speed
- Select how fast slides auto-rotate: Slow, Normal, or Fast.
Layout
- Carousel position: Choose whether images scroll horizontally (side-scroll) or vertically (top-down).
- Content alignment: Align text and buttons Left, Center, or Right over the slides.
Text size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Rounded corners
- Apply corner radii to each slide (None, Small, Medium, Large, or Theme default).
Spacing
- Top and Bottom padding: Small, Medium, or Large.
- Min. height: Content (auto height) or Screen (full viewport height).
Animations
- Pick how slides animate in: From theme, Fade in, Slide, or Zoom.
Divider
- Toggle on to insert a decorative SVG divider below the slider.
Border
- Toggle on to add a subtle outline around each slide.

Pro tip: A moderate auto-scroll speed with a simple “Explore” button often yields the best engagement.

Banner Double Image Slider (Vertical)

Use this style when you want to showcase two images side-by-side in each slide, with headline and subtext overlaid, plus a call-to-action. Great for:

Juxtaposing before/after or problem/solution visuals.
Highlighting paired features (e.g. “On-site Support” next to “24/7 Monitoring”).
Maintaining a hero-section height while still giving visitors multiple high-impact images.

Content Tab

Tagline (optional)
- Short accent text above your headline (“Trusted IT Partner”).
- Click Generate for AI suggestions.
Headline
- Main message (“Reliable IT Support for Burnaby Businesses”).
- Click Regenerate to try new angles.
Subtext
- Two- or three-line description beneath the headline.
- Example: “Empowering Burnaby enterprises with dependable IT solutions for seamless operations and enhanced efficiency. Partner with P3Cloud Consulting today.”
Carousel Images
- Up to 10 pairs of images; each slide shows two side-by-side.
- Use the drag handle to reorder, pencil to swap, trash to remove, or Add image + to upload/select new ones.
Buttons
- Toggle Add a button on.
- Customize Link Type (page section, external URL, phone, email).
- Edit Label (“Get IT Support”) and target (“Contact” section or external link).

Style Tab

Colors
- Click Change to select background, text, and button colors from your theme or a custom palette.
Button style
- Click Change to choose the shape (filled, outline, pill) and hover behavior.
Carousel speed
- Select how fast slides auto-rotate: Slow, Normal, or Fast.
Layout
- Carousel position: Choose whether images scroll horizontally (side-scroll) or vertically (top-down).
- Content alignment: Align text and buttons Left, Center, or Right over the slides.
Text size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Rounded corners
- Apply corner radii to each slide (None, Small, Medium, Large, or Theme default).
Spacing
- Top and Bottom padding: Small, Medium, or Large.
- Min. height: Content (auto height) or Screen (full viewport height).
Animations
- Pick how slides animate in: From theme, Fade in, Slide, or Zoom.

Banner Carousel

Use this style when you want to cycle through multiple full-width images with a single headline & subtext overlay, letting visitors swipe or auto-advance through your top messages. Ideal for:

Storytelling in stages (e.g., “Our Process” across 3 steps)
Highlighting featured case studies or portfolio pieces
Showing diverse service offerings in one compact hero

Content Tab

Tagline (optional)
- Short pre-headline accent (“Discover Our Expertise”)
- Click Generate for AI suggestions.
Headline
- Main call-out (“Advance with Strategic IT Consulting”).
- Click Regenerate to try different wording.
Subtext
- Supporting description under the headline.
- Example: “Elevate your business potential with expert IT consulting services tailored to meet your unique needs in Burnaby, BC.”
Carousel Images
- Select up to 10 images each will fill the right half (or full width on mobile) in sequence.
- Reorder via drag-handle, swap via pencil icon, remove via trash, or Add image + to upload/choose new ones.
Buttons
- Toggle Add a button on to surface a CTA (“Get IT Support”).
- Customize Link Type (page section, external URL, phone, email), Label, and target.

Style Tab

Colors
- Change the accent for pagination dots and button highlights.
Layout
- Content alignment: choose left, center, or right overlay.
Text Size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Rounded Corners
- Apply theme radius (e.g. Large) to the overlay card or image mask.
Spacing
- Top & Bottom paddings (Small/Medium/Large) for balance.
Animations
- Entry style (e.g. From theme (Fade in)) for headline and subtext.

Banner Bento Grid

Use Banner Bento Grid when you want a clean, three-image layout that balances a strong headline/subtext block with three supporting visuals. This style is perfect for:

Showcasing Three Core Services: Present your top three offerings side by side.
Highlighting Case Studies: Give equal space to “before,” “during,” and “after” project images.
Featuring Team Members or Testimonials: Pair each photo with a call-out in a unified grid.

Content Tab

Tagline (optional)
- Short pre-headline accent (“Discover Our Expertise”)
- Click Generate for AI suggestions.
Headline
- Main call-out (“Advance with Strategic IT Consulting”).
- Click Regenerate to try different wording.
Subtext
- Supporting description under the headline.
- Example: “Elevate your business potential with expert IT consulting services tailored to meet your unique needs in Burnaby, BC.”
Carousel Images
- Select up to 10 images each will fill the right half (or full width on mobile) in sequence.
- Reorder via drag-handle, swap via pencil icon, remove via trash, or Add image + to upload/choose new ones.
Buttons
- Toggle Add a button on to surface a CTA (“Get IT Support”).
- Customize Link Type (page section, external URL, phone, email), Label, and target.

Style Tab

Colors
- Change the accent for pagination dots and button highlights.
Layout
- Content alignment: choose left, center, or right overlay.
Text Size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Rounded Corners
- Apply theme radius (e.g. Large) to the overlay card or image mask.
Spacing
- Top & Bottom paddings (Small/Medium/Large) for balance.
Animations
- Entry style (e.g. From theme (Fade in)) for headline and subtext.

Banner Grid

Use this style when you want to present a single headline + subtext alongside a compact grid of up to 3 images, all visible at once. It’s perfect for:

Showing multiple service pillars side-by-side under one unifying message
Introducing team members or key clients in a tidy layout
Highlighting product features with quick visual snapshots

Content Tab

Tagline (optional)
- A short pre-headline accent (e.g. “Expert IT Services”)
- Click Generate for AI suggestions
Headline
- Main call-out (e.g. “Elevate Business Performance with Reliable IT”)
- Click Regenerate to try different wording
Subtext
- Supporting description under the headline
- Example: “Optimize your operations with P3Cloud Consulting, Burnaby’s trusted partner for innovative and dependable IT solutions. Experience excellence today.”
Grid Images
- Select up to 3 images—each fills one cell of the grid
- Reorder via drag-handle, swap via pencil icon, remove via trash, or Add image + to upload/choose new ones
Buttons
- Toggle Add a button on to surface a CTA (e.g. “Boost Your IT”)
- Customize Link Type (page section, external URL, phone, email), Label, and target

Style Tab

Colors
- Change the accent (“Cc”) for button and focus states
Button Style
- Choose between Style 1 or Style 2 for your CTA
Layout
- Grid Position: pick image-left, image-right, image-top or image-bottom icons
- Content Alignment: left, center, or right relative to the grid
- Borderless Image: toggle off/on to remove image frames
Rounded Corners
- Apply theme radius (Small/Medium/Large/Extra large) to images & overlay card
Text Size
- Heading: choose Small, Medium, Large, or Extra large.
- Subtext: choose Small, Medium, or Large.
Spacing
- Top & Bottom: choose Small/Medium/Large padding for breathing room
Min. Height
- Set to Content (auto) or Screen (full-viewport)
Divider / Border
- Toggle to draw a thin line or box around the section
Animations
- Entry style (e.g. From theme (Fade in)) for headline and grid

…and don’t forget the new quick-access toolbar at the top of your section

Note that this toolbar only appears when you hover over the section in the page editor simply move your cursor over the section to reveal these quick-action buttons.

Icon / Button	Action
Restyle	Instantly apply a section configuration or color palette to this section.
Regenerate images	Swap out all current visuals for fresh AI-sourced options.
↑ / ↓	Move this section up or down on the page.
⋮ (More menu)	Edit Section • Duplicate section• Delete section•