The CTA Section 2026 widget is a call-to-action banner builder with five built-in design styles and three layout variants — section label, headline with an accent-highlighted word, description, a primary button and an optional secondary ghost button, all in one widget. Works identically in Elementor and the WordPress block editor.
Overview
Instead of building a call-to-action strip from separate heading, text, and button widgets, CTA Section 2026 gives you one widget with everything a conversion banner needs already wired together — a section label, headline with an accent-highlighted word, description, primary and secondary buttons (with optional icon), and an optional image for a two-column split layout.
Every part of it is restyled instantly by switching the Design Style dropdown — no custom CSS required.
5 Design Styles
- Bento Grid — crisp white cards, sharp grid alignment, confident typography. The clean SaaS-product look.
- Glassmorphism — frosted-glass translucent panels over a dark, gradient-blurred backdrop. Premium fintech/crypto feel.
- Dark Minimal — near-black canvas, a single lime accent color, high contrast. Dev-tools/AI-native feel.
- Aurora — soft gradient-mesh backgrounds, rounded corners, warm color blends. Modern AI/tech branding feel.
- Neo-Brutalist — hard 2px borders, flat solid colors, offset drop-shadows, no gradients. Bold agency energy.
3 Layouts
- Centered — headline, description, and buttons centered, no image column. Best for a pure message-first banner.
- Split (text + image) — content on one side, an image on the other; the Image Position setting flips which side the image sits on.
- Banner (compact strip) — a slim horizontal row with the content filling the space and the buttons pinned to the side, no image column.
The Image field and Image Position setting only appear when Layout is set to Split — Centered and Banner have no media column.
Content Settings
| Section | Setting | What it does |
|---|---|---|
| Design Style | Style Preset | Bento Grid / Glassmorphism / Dark Minimal / Aurora / Neo-Brutalist |
| Design Style | Layout | Centered / Split (text + image) / Banner (compact strip) |
| Design Style | Image Position | Image on Right / Image on Left — only shown when Layout is Split |
| Content | Show Section Label | Toggles the small eyebrow label above the headline |
| Content | Section Label | Text shown in the eyebrow label |
| Content | Headline | Main heading text — supports a line break for a two-line headline |
| Content | Highlighted Word(s) | Exact word(s) from the headline to style with the accent color/gradient |
| Content | Headline Tag | H1 / H2 / H3 — the actual heading tag rendered |
| Content | Description | Supporting paragraph under the headline |
| Primary Button | Show Primary Button | Toggles the solid primary CTA button |
| Primary Button | Button Text / URL | Label and link for the primary button |
| Primary Button | Icon (optional) | Optional icon shown alongside the button text |
| Primary Button | Icon Position | Before Text / After Text — where the icon renders relative to the label |
| Secondary Button | Show Secondary Button | Toggles the outline/ghost secondary button |
| Secondary Button | Button Text / URL | Label and link for the secondary button |
| Image | Image | Image shown in the media column — only available on the Split layout |
| Image | Alt Text | Accessible alt text for the image |
Style Settings
Every content element above has a matching Style-tab section:
- Section — background and padding.
- Section Label — color, background, border radius, and padding.
- Headline — color and margin, plus a separate Headline Accent color-or-gradient control.
- Description — color.
- Primary Button — typography, background, text color, border, radius, padding, and icon color, plus separate hover-state background, text color, and border, and a shared Buttons Gap slider.
- Secondary Button — typography, background, text color, border, radius, padding, plus separate hover-state background, text color, and border.
- Image (Split layout only) — border radius, border, and box shadow.
All background controls accept either a solid color or a gradient.
Frequently Asked Questions
Do I need Elementor Pro to use this?
No — CTA Section 2026 works with the free version of Elementor, plus the WordPress block editor. No Pro upgrade required.
Can I use a different layout for each design style?
Yes — Design Style and Layout are independent settings. Any of the 5 styles can be paired with any of the 3 layouts (Centered, Split, or Banner).
What happens if I don’t upload an image on the Split layout?
The widget shows a clean dashed-border placeholder with a camera icon and “Add an image” label automatically — nothing breaks, and you can add a real image at any time. Switching to Centered or Banner hides the media column entirely, so a missing image never leaves an empty gap on those layouts.
Is this widget accessible?
Yes — WCAG 2.1 AA, with an `aria-label=”Call to action”` landmark on the section, focus states on both buttons, and a semantic heading tag you choose yourself (H1/H2/H3) to match your page’s outline.
How to Add This Section
- Elementor: search “CTA” in the widget panel under the HT Mega 2026 category, drag it onto your page.
- WordPress Block Editor: click the block inserter (+), search “CTA 2026” under the HT Mega category, insert it, then edit the settings in the block sidebar.