Urban Bold Hero Slider - Industrial Split Layout

Make an unforgettable first impression with the Urban Bold Hero Slider. Designed for the modern web, this widget abandons the traditional full-width banner in favor of a high-energy Split-Screen Layout that perfectly balances massive typography with full-bleed imagery.

Visual Aesthetic: The design channels the raw energy of urban environments and industrial design. The left panel features a blazing Safety Orange (#FF5E3A) background, serving as a high-contrast canvas for the jet-black, sticker-style typography. The headings utilize the 'Anton' font to deliver messages with the impact of a street sign. On the right, images are treated like editorial spreads, featuring a subtle "slow-zoom" animation that adds cinematic life to your photography.

Interaction & Motion: Static heroes are a thing of the past. This widget features a custom "Fly-In" Entrance Animation: when the slide changes, the decorative labels, headlines, and call-to-action buttons cascade in with a staggered delay, creating a sense of momentum. The navigation controls are styled to resemble an industrial control panel, centered on the split-line for a unique UI touch.

Use Cases: This hero section is built for brands that lead culture, including:

• Fashion & Streetwear Drops: Announce new collections with a layout that mimics a high-end lookbook.
• Music & Entertainment: Perfect for album releases or tour announcements that need to look edgy and loud.
• Creative Portfolios: Agencies can use this to showcase case studies with a bold, "manifesto" style introduction.
• E-Commerce Sales: Drive traffic to specific categories using the "Sticker" labels (e.g., "LIMITED EDITION," "NEW ARRIVALS").

Key Features:

• Split-Screen Architecture: A 50/50 layout that gives equal weight to your copy and your visuals.
• Industrial "Sticker" UI: Subheads and buttons are styled to look like physical labels or industrial warnings.
• Cinematic Transitions: Features a cross-fade slide transition paired with a "Ken Burns" slow-zoom effect on images.
• Staggered Text Animation: Text elements animate in sequentially, guiding the user's eye down to the Call to Action.
• Touch-Friendly Navigation: Large, blocky arrow buttons ensure easy navigation on touchscreens.
• Mobile Stack: On smaller screens, the layout transforms into a vertical stack, keeping the image prominent while ensuring the text remains readable and impactful.

How to install Urban Bold Hero Slider - Industrial Split Layout to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. If you are using Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to"HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.