Description
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
Blocks
This plugin provides 1 block.
- ATTN Hero Banner
Installation
- Upload the plugin folder to
/wp-content/plugins/or install the ZIP through Plugins > Add New > Upload Plugin. - Activate ATTN Hero Banner.
- Open ATTN Hero in the WordPress admin menu.
- Create and publish a hero.
- Copy its shortcode into any shortcode-compatible area, or insert the ATTN Hero Banner block.
FAQ
-
Can I use this with Elementor or another page builder?
-
Yes. Insert the generated shortcode using the builder’s Shortcode widget or module.
-
How do I create a carousel?
-
Add a second slide. Slider settings appear in the editor and control autoplay, transitions, arrows, dots and looping.
-
Can one slide contain two images?
-
Yes. Add a second image to a slide. Both images remain side by side on desktop and mobile.
-
What does Show container on mobile do?
-
It moves the slide content into a separate colored section beneath the images on smaller screens.
-
Yes. Select a banner background color and leave the image fields empty.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“ATTN Hero Banner – Image Banner Slider & Carousel” is open source software. The following people have contributed to this plugin.
Contributors
Translate “ATTN Hero Banner – Image Banner Slider & Carousel” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.5
- Matched the translation text domain to the WordPress.org plugin slug.
- Added object-level permission checks to the hero REST API routes.
- Documented the included, unminified JavaScript source and build process.
1.0.4
- Added a translator note for the carousel slide labels.
- Read the editor’s hero ID in the browser instead of accessing a read-only query parameter in PHP.
1.0.3
- Changed the exposed background during slide transitions from black to white.
- Improved the plugin title, summary, tags, and feature description for clarity and discovery.
1.0.2
- Simplified the template library to Image Overlay and Content Card.
- Applied content positioning consistently to text and buttons.
- Limited corner radius styling to content cards.
- Fixed solid banner backgrounds when no image is selected.
- Banner background color now also controls the image overlay tint.
1.0.1
- Fixed the Add New editor incorrectly requesting hero ID 0 on some WordPress installations.
- Added graceful error handling when an existing hero cannot be loaded.
1.0.0
- Initial release.