The Services Section 2026 widget builds a service/feature card grid with five built-in design styles and three layout variants — icon, title, description, and an optional link on every card, plus an optional bottom CTA button. Works identically in Elementor and the WordPress block editor.
Overview
Instead of building a services or features grid from separate icon, heading, and text widgets, Services Section 2026 gives you one widget with everything already wired together — a section header with label and headline, a repeatable list of service cards (icon, title, description, optional link), and an optional CTA button underneath the grid.
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
- Card Grid — service cards arranged in a responsive 2, 3, or 4-column grid.
- Icon-Left List — full-width rows with the icon on the left and title/description to the right.
- Centered / Stacked — single-column, center-aligned cards.
The Grid Columns setting (2/3/4) only applies to the Card Grid layout — Icon-Left List and Centered / Stacked always render a single column.
Content Settings
| Section | Setting | What it does |
|---|---|---|
| Design Style | Style Preset | Bento Grid / Glassmorphism / Dark Minimal / Aurora / Neo-Brutalist |
| Design Style | Layout | Card Grid / Icon-Left List / Centered / Stacked |
| Design Style | Grid Columns | 2, 3, or 4 columns — only shown/applied when Layout is set to Card Grid |
| Section Header | Show Section Label | Toggles the small label above the headline |
| Section Header | Section Label | Text shown in the label (default “What We Offer”) |
| Section Header | Headline | Main heading text — supports a line break for a two-line headline |
| Section Header | Highlighted Word(s) | Exact word(s) from the headline to style with the accent color/gradient |
| Section Header | HTML Tag | H1 / H2 / H3 — the actual heading tag rendered |
| Section Header | Description | Supporting paragraph under the headline |
| Service Items | Icon | Icon shown at the top of each service card |
| Service Items | Title | Name of the service |
| Service Items | Description | Short paragraph describing the service and its value |
| Service Items | Show Link | Toggles a “Learn more” style link on the card |
| Service Items | Link Text / Link URL | Label and link target for the card link, shown only when Show Link is enabled |
| Bottom CTA | Show CTA Button | Toggles a button below the services grid |
| Bottom CTA | Button Text / Button URL | Label and link for the CTA button |
| Bottom CTA | Button Icon | Icon shown inside the CTA button |
Style Settings
Every content element above has a matching Style-tab section:
- Section — background and padding.
- Section Label — typography, color, background, radius, and padding.
- Headline — color and margin, plus a separate Headline Accent color/gradient control.
- Description — typography and color.
- Service Card — background (solid or gradient), border radius, box shadow, and border.
- Card Icon — responsive size, color, icon-background color, and radius.
- Card Title — typography, color, and margin.
- Card Description — typography and color.
- Card Link — typography, color, and hover color.
- CTA Button (shown when the CTA is enabled) — typography, background, text color, border, radius, padding, and separate hover-state background/text color/border.
Frequently Asked Questions
Do I need Elementor Pro to use this?
No — Services 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.
What happens if I don’t add a link to a service card?
Leave Show Link switched off (its default state) and the card simply renders the icon, title, and description with no link — nothing breaks, and the card layout still looks complete.
Does the Grid Columns setting do anything on the other layouts?
No — Grid Columns only affects the Card Grid layout. Icon-Left List and Centered / Stacked always display a single column regardless of that setting.
Is this widget accessible?
Yes — WCAG 2.1 AA, with a labeled section landmark, a proper list structure for the service cards, semantic heading tags for the section headline, and decorative icons marked with aria-hidden so screen readers only announce meaningful content.
How to Add This Section
- Elementor: search “Services” in the widget panel under the HT Mega 2026 category, drag it onto your page.
- WordPress Block Editor: click the block inserter (+), search “Services 2026” under the HT Mega category, insert it, then edit the settings in the block sidebar.