Create reusable image banners, hero sliders, and carousels without a page-builder add-on. Choose an Image Overlay or Content Card layout, customize each slide in the live desktop and mobile preview, then add the finished banner to a page using a shortcode or WordPress block.
Use a single slide for a static hero banner or add more slides to create a carousel. Each slide can show one image, two side-by-side images, or just a background color. Add a heading, supporting text, and up to two buttons. The settings include image overlay colors, content positioning, and mobile-specific controls.
Features include:
- Live desktop and mobile preview
- Image Overlay and Content Card templates
- One or two images per slide
- Optional mobile-specific images
- Multiple slides with autoplay, arrows, dots, swipe, slide or fade transitions
- Separate desktop and mobile typography and alignment
- Optional mobile content container below the image
- Colors, overlays, padding, sizing, buttons and content positioning
- Draft, publish, duplicate and reorder workflows
[attn_hero id="123"]shortcode- Dynamic Gutenberg block
- No external services, tracking or accounts
Source code
The JavaScript in assets/admin.js, assets/block.js, and assets/frontend.js is the original, unminified source code shipped directly to WordPress. It is written using WordPress-provided JavaScript APIs and does not require npm, webpack, transpilation, or another build tool. No compiled JavaScript is included.
Screenshots
Create image overlay banners with one or two images, responsive content and customizable layout settings.
Build readable content card banners with editable colors, typography, positioning and buttons.
Choose between Image Overlay and Content Card templates while viewing the live banner preview.