Service Section
The Service block displays the services you've created in Services (admin) as cards, lists or sliders. It's content‑driven: edit the actual services in their admin screen; this block decides how they're shown.
Purpose
Use the Service block to showcase what you offer. It automatically pulls your published services, so adding a new service makes it appear here without editing the page.
Available layouts
The Service block offers 11 layouts in the library (plus a few hidden variants used by themes):
| Layout | Best for |
|---|---|
| Grid (default) | A clean card grid. |
| Feature | Larger feature cards with more detail. |
| Icon Grid | Icon‑led cards, compact. |
| Reveal | Hover‑reveal effect cards. |
| Pinned | A pinned/scroll layout. |
| Dark Slider | A dark carousel. |
| Smart Solution | A solution‑focused layout. |
| Compact List | A tidy list, good for many services. |
| Brand Cards | Branded card style. |
| Medical Grid | A grid styled for medical/clinical sites. |
| Startup Slider | A startup‑style carousel. |
Field reference
Header
| Field | What it does |
|---|---|
| Section subtitle | Small label above the title. |
| Section title | The heading. |
| Section description | Supporting text. |
Which services to show
| Field | What it does |
|---|---|
| Tab source | How services are grouped into tabs. |
| Show tabs / Show all tab | Show category tabs and an "All" tab. |
| All tab label | The label for the "All" tab. |
| Custom tabs | Define your own tabs (label + filter by category/type). |
| Service limit | Maximum number of services to display. |
| Category filter | Show only services from one category. |
| Open links in new tab | Open service links in a new tab. |
Labels & buttons
| Field | What it does |
|---|---|
| Item CTA label / Read more / View info / View work | Button text on each card. |
| Show CTA + CTA label / URL | A section‑level button. |
| Highlight text | An emphasized phrase. |
Style
- Section border width / radius / inner padding.
- Padding top / bottom.
- Full button styling (background, text, hover, border, radius, padding, typography, shadow).
- Optional header shape toggles for certain layouts.
Best practices
- Write benefit‑driven service names ("Grow Traffic with SEO" beats "SEO").
- Use icons or thumbnails consistently — set them on each service in the Services admin.
- Limit the count on the homepage (e.g. show 6) and link to a full Services page.
- Group with tabs if you have many services in different categories.
Example
- Layout: Feature
- Title: "What We Do"
- Category filter: none (show all)
- Service limit: 6
- Item CTA label: "Learn More"
- Show CTA: on → "View All Services" →
/services
Frontend result
A grid/list/slider of service cards, each showing the service's icon/image, name, short description and a link to its detail page (if enabled).
Screenshot: Page Builder → Service Section (Grid layout) on the live site
Troubleshooting & common mistakes
| Problem | Fix |
|---|---|
| No services appear | Make sure your services are Published in Services admin. |
| A service is missing | Check it's published and matches the category filter. |
| Cards have no image/icon | Set a thumbnail or icon on each service. |
| "Learn More" goes nowhere | Enable the service's detail page, or set its custom URL. |
| Tabs are empty | Assign services to categories, or turn tabs off. |
Common mistakes: forgetting to publish services, mixing services with and without images (inconsistent cards), showing too many on the homepage.
➡️ Related: Services · Service Detail Pages
➡️ Next: Brand Section