Detailed description
The hexatenberg/search-overlay block provides a modern fullscreen search experience triggered by a customizable magnifier button. With one click, users get an immersive search panel featuring a focused input, submit action, and clear close control. This pattern is especially effective on content-heavy websites (blogs, media, e-commerce, documentation) where fast discovery directly affects engagement and retention.
Built for Gutenberg, the block combines clean defaults with practical controls. You can customize overlay color, opacity, trigger label, input placeholder, icon size, top padding, and input max width. This gives teams enough flexibility to match brand guidelines without turning setup into a technical task.
UX and SEO Benefits
- Reduces navigation friction with instant search access.
- Helps users discover more pages and relevant internal content.
- Supports stronger engagement signals (session depth, time on site), which can reinforce SEO performance.
- Mobile-friendly by design, with a focused interface and clear actions.
Recommended Use Cases
- Editorial websites with large article archives.
- E-commerce stores with broad catalogs.
- Corporate portals with layered resources and documentation.
- Advanced marketing websites that want a premium search interaction.
Why Use It in Gutenberg
- Fast setup with minimal overhead.
- Visual configuration directly in the editor.
- Clean integration with theme styling.
- Reusable search pattern for consistent site-wide UX.
Performance
Zero useless scripts, Vanilla JS only.
Native Gutenberg
WCAG compliance for all users.
Search Overlay
JS Weight
< 2kb
Version
1.0.1
WCAG
WCAG 2.1 AA
2
Likes
1
Downloads
Vanilla JS Architecture
Guaranteed zero technical debt, optimized for Core Web Vitals.
You might also like
Discover more blocks in the category premium