Title: Services Section Block – present your services in clean grids and columns
Author: bPlugins
Published: <strong>2021 年 8 月 7 日</strong>
Last modified: 2026 年 9 月 5 日

---

搜尋外掛

![](https://ps.w.org/services-section/assets/banner-772x250.png?rev=3623350)

![](https://ps.w.org/services-section/assets/icon.svg?rev=3623350)

# Services Section Block – present your services in clean grids and columns

 由 [bPlugins](https://profiles.wordpress.org/bplugins/) 開發

[下載](https://downloads.wordpress.org/plugin/services-section.1.4.6.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/services-section/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/services-section/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/services-section/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/services-section/#developers)

 [技術支援](https://wordpress.org/support/plugin/services-section/)

## 外掛說明

**Present your services professionally with a polished “Our Services” section your
clients will trust – built right in the block editor, no code required.**

[**Services Section**](https://bplugins.com/products/services-section/) | [**Demos**](https://bplugins.com/products/services-section/#demos)
| [**Pricing**](https://bplugins.com/products/services-section/pricing)

### Why Services Section Block?

**Services Section Block** adds a new block to the Block Editor that lets you create
a professional-looking services or “OUR SERVICE” section in minutes. It is very 
effective at presenting your services nicely, with many options to decorate your
section using any colors you like.

Pick an icon from the built-in icon library (or upload your own PNG, JPEG, or JPG),
start from a ready-made template, and fine-tune typography for titles and descriptions
until the section matches your brand.

### Free Features

 * **Icon Library:** Select the icon of your choice from the built-in library, or
   upload any image in PNG, JPEG, or JPG format as a service icon.
 * **Built-in Templates:** Start from ready-made templates whenever you want to 
   present your services.
 * **Customizable Elements:** Apply custom typography to the title and description.
 * **Color Options:** Decorate your service section using any color you like.

### Pro Version – Unlock Advanced Layouts & Styling

[**Get Pro Version**](https://bplugins.com/products/services-section/pricing)

 * **Advanced Layout Variations:** Unlock exclusive layouts (Layout 2 to Layout 
   8) with unique styles and structures.
 * **Pro-Level Padding & Spacing Controls:** Set custom padding and spacing per 
   side with more flexibility.
 * **Enhanced Border Customization:** Full border controls including individual 
   side styles and advanced radius options.
 * **Animation Direction Settings:** Directional animation control for layout-specific
   designs like Layout 4.
 * **Border Div Customization (Layout 8):** Toggle and style an additional decorative
   border layer behind items.
 * **Advanced Shadow Effects:** Smooth box shadows and hover transitions for modern
   aesthetics.
 * **Flexible Linking Options:** Enable links on items and choose where they apply–
   button, title, or entire box.
 * **Open in New Tab:** Choose whether links open in a new browser tab.
 * **Opacity & Hover Opacity:** Control the transparency of the circle background,
   including on hover.
 * **Radius & Border:** Control corner roundness and customize border style, width,
   and color.

### How to Use Services Section Block – Quick Start

 1. Install and activate the **Services Section Block** plugin.
 2. In the Gutenberg editor, add the **Services Section** block from the **Widgets**
    block category.
 3. Add your services, choose icons from the library or upload your own images.
 4. Pick a template and adjust colors and typography from the right-side settings sidebar.
 5. Publish – enjoy!

### Use Cases

 * **Agencies & Freelancers:** Present design, development, or marketing services
   in a clean grid.
 * **Local Businesses:** Showcase what you offer with icons and short descriptions.
 * **Corporate Sites:** Build a polished “Our Services” page section with consistent
   branding.
 * **Landing Pages:** Highlight key offerings with linked service cards (Pro).

Did you like this plugin? Do you have a feature request? [Please share your feedback with us](https://tw.wordpress.org/plugins/services-section/support@bplugins.com?output_format=md)

### ⭐ Check out the Parent Plugin of this plugin-

🔥 **[B Blocks](https://bblockswp.com)** – Gutenberg blocks collection for WordPress.

### ⭐ Check out our other WordPress Plugins-

🔥 **[Html5 Audio Player](https://bplugins.com/products/html5-audio-player)** – 
Audio player plugin for WordPress.

🔥 **[Html5 Video Player](https://bplugins.com/products/html5-video-player)** – 
Video player plugin for WordPress.

🔥 **[PDF Poster](https://bplugins.com/products/pdf-poster)** – A fully-featured
PDF Viewer Plugin for WordPress.

🔥 **[Document Embedder](https://bplugins.com/products/document-embedder)** – WordPress
Document Embedder Plugin.

🔥 **[3D Viewer](https://bplugins.com/products/3d-viewer)** – Display interactive
3D models on the web.

🔥 **[Advanced Post Block](https://bplugins.com/products/advanced-post-block)** –
Post Display Plugin for WordPress.

## 螢幕擷圖

[⌊Add Block⌉⌊Add Block⌉[

Add Block

[⌊Layout, Items & Elements Settings⌉⌊Layout, Items & Elements Settings⌉[

Layout, Items & Elements Settings

[⌊Service Configuration⌉⌊Service Configuration⌉[

Service Configuration

[⌊Default Layout⌉⌊Default Layout⌉[

Default Layout

[⌊Layout 1⌉⌊Layout 1⌉[

Layout 1

[⌊Layout 2⌉⌊Layout 2⌉[

Layout 2

[⌊Layout 3⌉⌊Layout 3⌉[

Layout 3

[⌊Layout 4⌉⌊Layout 4⌉[

Layout 4

[⌊Layout 5⌉⌊Layout 5⌉[

Layout 5

[⌊Layout 6⌉⌊Layout 6⌉[

Layout 6

[⌊Layout 7⌉⌊Layout 7⌉[

Layout 7

[⌊Layout 8⌉⌊Layout 8⌉[

Layout 8

[⌊ShortCode⌉⌊ShortCode⌉[

ShortCode

[⌊Centered Circle⌉⌊Centered Circle⌉[

Centered Circle

[⌊Elegant Cards⌉⌊Elegant Cards⌉[

Elegant Cards

[⌊Feature Spotlight⌉⌊Feature Spotlight⌉[

Feature Spotlight

[⌊Glow Cards⌉⌊Glow Cards⌉[

Glow Cards

[⌊Layered Cards⌉⌊Layered Cards⌉[

Layered Cards

[⌊Minimal Features⌉⌊Minimal Features⌉[

Minimal Features

[⌊Ribbon Cards⌉⌊Ribbon Cards⌉[

Ribbon Cards

[⌊Vertical Timeline⌉⌊Vertical Timeline⌉[

Vertical Timeline

## 適用於區塊編輯器

這個外掛提供 11 個可供區塊編輯器使用的區塊。

 *   Services Section Selector Choose and display your favorite services layout
 *   Vertical Timeline Vertical process timeline with a gradient rail, circular 
   icons, and hover-sliding cards.
 *   Layered Cards Cards sitting on an offset accent layer that slides further out
   on hover.
 *   Centered Circle Circular ringed icons with a rotating dashed ring, title and
   description — with an optional connector line between steps.
 *   Minimal Features Minimal feature grid with top-left icons, accent bar, and 
   a clean, refined palette.
 *   Ribbon Cards Cards with a folded corner ribbon label, a soft tinted icon tile
   and a lift-on-hover shadow.
 *   Services Section Display your business services in a clean, responsive, and
   customizable section.
 *   Elegant Cards An editorial showcase: centred eyebrow and serif heading above
   ringed-icon cards that lift on hover.
 *   Glow Cards Dark premium cards with corner glow, tinted icon, and sliding arrow
   on hover.
 *   Feature Spotlight Dark premium feature tiles with gradient icons, corner glow,
   and hover arrow.
 *   Service Service item for services.

## 安裝方式

**From your WordPress dashboard (recommended):**

 1. Go to **Plugins  Add New**.
 2. Search for **“Services Section”**.
 3. Click **Install Now**, then **Activate**.
 4. In the Gutenberg editor, search for the **Services Section** block and add it to
    any post or page.

**Manual installation:**

 1. Download the **Services Section** plugin (_.zip file_).
 2. In your admin area, go to **Plugins  Add New  Upload Plugin**, choose the **`services-
    section.zip`** file, and click **Install Now**.
 3. Activate the plugin through the **Plugins** menu in WordPress.

## 常見問題集

### Is Services Section Block free?

Yes, Services Section Block is a free Gutenberg block plugin. A Pro version with
advanced layouts and styling controls is also available.

### Does it work with any WordPress theme?

Yes, it works with any standard WordPress theme.

### Can I use my own images as service icons?

Yes. If the icon you want is not in the built-in icon library, you can upload any
image in PNG, JPEG, or JPG format and set it as a service icon.

### Are there ready-made templates?

Yes. Several built-in templates are included so you can present your services quickly
without designing from scratch.

### Can I add links to service items?

Yes, in the Pro version you can enable links on items and choose where they apply–
on the button, the title, or the entire box – and whether they open in a new tab.

### Can I change block settings?

Yes, you can change all block settings from the right sidebar of the Gutenberg block
editor.

### How many times can I reuse the block?

You can use the block an unlimited number of times across posts and pages.

### Where can I get support?

You can post your questions on the [support forum here](https://wordpress.org/support/plugin/services-section/)

## 使用者評論

![](https://secure.gravatar.com/avatar/ca481b56965d51c2202d6b74d3e6567908a142d529dc39061546a1acef255af2?
s=60&d=retro&r=g)

### 󠀁[Good start, but needs more work](https://wordpress.org/support/topic/good-start-but-needs-more-work/)󠁿

 [Lovro Hrust](https://profiles.wordpress.org/lovor/) 2024 年 9 月 6 日

This plugin does its job and it looks nice. What I didn’t like about it is that 
it enqueues React in the frontend, which is unnecessary for that relatively simple
functionality. For that, I decided not to use it in the future in order not to slow
down sites. Also, block has its own styling which is different from block editor
native styling which I am familiarized with. It is impossible to insert any block
inside services cards, just predefined titles, subtitles and places for icons are
possible.

![](https://secure.gravatar.com/avatar/818785ba5093b76cf8d79e49495ab233f8b67d5da2c1f89ec732610f6fe5e6c1?
s=60&d=retro&r=g)

### 󠀁[Very clean layouts](https://wordpress.org/support/topic/very-clean-layouts/)󠁿

 [pencilbee](https://profiles.wordpress.org/pencilbee/) 2022 年 9 月 28 日

The layouts are very clean and pretty straight forward

![](https://secure.gravatar.com/avatar/c73f8587cccdf67fb4bbe5afb4a223d612f067787c86d54073911880f504fefe?
s=60&d=retro&r=g)

### 󠀁[Excellent](https://wordpress.org/support/topic/excellent-12072/)󠁿

 [ahmed4d](https://profiles.wordpress.org/ahmed4d/) 2022 年 8 月 5 日

It’s a professional blocks with great variety of icons thank you so much

![](https://secure.gravatar.com/avatar/6ca1113a1f709ce71abb4156459ea3b6952b3fd33bf2c1201e941606f820376e?
s=60&d=retro&r=g)

### 󠀁[Excellent!](https://wordpress.org/support/topic/excellent-11234/)󠁿

 [vlavanch](https://profiles.wordpress.org/vlavanch/) 2021 年 10 月 17 日

Works fine, easy to use and the support is super reactive!

 [ 閱讀全部 4 則使用者評論 ](https://wordpress.org/support/plugin/services-section/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈Services Section Block – present your services in clean 
grids and columns〉的開發相關工作。

參與者

 *   [ bPlugins ](https://profiles.wordpress.org/bplugins/)
 *   [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/)
 *   [ Freemius ](https://profiles.wordpress.org/freemius/)
 *   [ MD.SHIHAB SHAMIM ](https://profiles.wordpress.org/shihabshamim/)

[將〈Services Section Block – present your services in clean grids and columns〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/services-section)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/services-section/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/services-section/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/services-section/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/services-section/)。

## 變更記錄

#### 1.4.6 – 05 September, 26

 * **New:** Added 8 New Blocks.

#### 1.4.5 – 09 August, 26

 * **Updated:**Added a modern and intuitive dashboard layout.
 * **New:**Added 8 New Blocks.

#### 1.4.4 – 09 April, 26

 * **Fixed:** Class naming conflict and namespace resolution issue in LicenseActivation.
 * **Updated:** Freemius SDK to latest version.

#### 1.4.3 – 28 Feb, 26

 * Update brand new dashboard with license activation support

#### 1.4.2 – 24 Jan, 26

 * Improved section title formatting in dashboard

#### 1.4.1 – 04 Nov, 25

 * update sdk

#### 1.4.0 – 15 October, 25

 * added modern dashboard and layout switch in toolbar

#### 1.3.8 – 28 July 25

 * updated admin dashboard page

#### 1.3.7 – 20 May 25

 * escapeHTML imported from common

#### 1.3.6 – 6 May 25

 * Improve Admin dashboard demo page

#### 1.3.5 – 17 Feb 25

 * Improve security

#### 1.3.4 – 28 Dec 24

 * Fix default image not found issue.

#### 1.3.3

 * Update font library

#### 1.3.2

 * Fix empty link

#### 1.3.1

 * Reduce assets load

#### 1.3.0

 * Remove the link if no link

#### 1.2.9

 * Add translate feature

#### 1.2.8

 * Fix HTML Render

#### 1.2.7

 * Reduce PHP Code
 * Performance Improvement

#### 1.2.6

 * Fix the default icon issue.

#### 1.2.5

 * Reduce PHP Code

#### 1.2.4

 * Performance upgrade

#### 1.2.3

 * Performance upgrade

#### 1.2.2

 * Update theme and link position settings in the global

#### 1.2.1

 * Add an option for the link in the whole service element

#### 1.2.0

 * Add options for hover background
 * Fix the upload icon

#### 1.1.4

 * Fix align issues

#### 1.1.3

 * Fix issues

#### 1.1.2

 * Add Templates
 * Add more settings

#### 1.1.1

 * Fix align class

#### 1.1

 * Add Icon Upload Option

#### 1.0

 * Initial Release.

## 中繼資料

 *  版本 **1.4.6**
 *  最後更新 **3 天前**
 *  啟用安裝數 **2,000+**
 *  WordPress 版本需求 ** 6.5 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.1**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/services-section/)
 * 標籤:
 * [block](https://tw.wordpress.org/plugins/tags/block/)[service card](https://tw.wordpress.org/plugins/tags/service-card/)
 *  [進階檢視](https://tw.wordpress.org/plugins/services-section/advanced/)

## 評分

 4.5 星，滿分為 5 星

 *  [  3 個 5 星使用者評論     ](https://wordpress.org/support/plugin/services-section/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/services-section/reviews/?filter=4)
 *  [  1 個 3 星使用者評論     ](https://wordpress.org/support/plugin/services-section/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/services-section/reviews/?filter=2)
 *  [  0 個 1 星使用者評論     ](https://wordpress.org/support/plugin/services-section/reviews/?filter=1)

[撰寫評分](https://wordpress.org/support/plugin/services-section/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/services-section/reviews/)

## 參與者

 *   [ bPlugins ](https://profiles.wordpress.org/bplugins/)
 *   [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/)
 *   [ Freemius ](https://profiles.wordpress.org/freemius/)
 *   [ MD.SHIHAB SHAMIM ](https://profiles.wordpress.org/shihabshamim/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/services-section/)

## 贊助

想要支援這個外掛的發展嗎？

 [ 贊助這個外掛 ](https://www.buymeacoffee.com/abuhayat)