【網站設計教學#7】Elementor版型設計：教你製作常用的頁面區塊

前言

這系列是《網站設計教學》，目標是幫助完全不懂網站設計的小白們，可以跟著教學實際完成自己網站的設計。

上一篇已經將 Elementor 教學：介面位置、全域設定、欄位組合、工具完整說明，並且將首頁製作完成，到這邊整個網站的設計流程大致已經告一段落。

但是頁面的區塊設計，並不會每一個人都相同，所以接下來我會將網站基本會用到的區塊，做成幾種比較常見的模板樣式，並一步一步的示範給大家看。

在初期剛開始經營網站時，我都會建議不要買付費的版本，所以接下來教大家製作的基本區塊模板樣式，用 Elementor 的免費版本就能製作完成。

常見的區塊設計（以 Elementor 製作）

總共有 8 個常用的主題區塊，每一塊都可以有不同的編排方式，不過大家在參考模板的時候，也需要依照自己的內容為主，別為了好看而省去了內容。

Banner 橫幅

樣式一：圖片背景

• 樣式特色：以圖片佔據整個版本視覺，上面有一層顏色的透明度，可以讓整體圖片融入網站風配色格。
• 適用時機：想使用有圖片的風格，但又不希望圖片太過搶眼，就能使用顏色重疊的方法。

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「1」欄位數

step 2

拖曳「標題、內容編輯器、按鈕」小工具

step 3

調整工具的間距及位置

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 在文字對齊，點選置中
4. 點選「版面配置」
5. 在高度，調整「最小高度」，並調整數值
6. 在欄位置，調整「中央」

step 4

在「樣式 > 背景 」新增一張圖片，並調整位置等樣式

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 點選「圖片」
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

step 5

在「樣式 > 背景覆蓋 」新增顏色，並調整透明度

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#14181BC9」（色票碼僅供參考，可以調整適合自己網站的色調）

step 6

在「樣式 > 排版樣式 」修改文字顏色

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 在標題顏色，點選「色票」圖示，並輸入色票號碼「#000000」
4. 在文字色彩，點選「色票」圖示，並輸入色票號碼「#000000」

樣式二：圖片風格

• 樣式特色：以乾淨的背景色，加上獨特的插畫風格，會使視覺更顯眼
• 適用時機：適用簡約風的網站，右方可以放上符合網站是覺得圖片或插圖

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「2」欄位數

step 2

拖曳「標題、內容編輯器、按鈕」小工具

step 3

在「版面配置」「進階」調整工具的位置及間距

1. 點選「六個小點」
2. 點選「版面配置」分頁
3. 在垂直對齊，選擇「中央」
4. 點選「進階」分頁
5. 在邊框間距，調整上下距離「60px」

step 4

在「內容」新增圖片

1. 點選右側圖片
2. 點選「內容」分頁
3. 在選取圖片，點選圖片
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

step 5

在「樣式」設定背景色

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）

step 6

在「進階」調整按鈕與文字的距離

1. 點選右側按鈕工具
2. 點選「進階」分頁
3. 在邊界，調整上方的距離「30px」

主題分類/服務項目

樣式一：垂直卡片

• 樣式特色：以卡片的形式呈現，排版上比較不會凌亂，也比較清楚能看出重點
• 適用時機：如果服務項目的主題較多時，可以使用這種設計，讓整體視覺整齊不會太過凌亂

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「圖示方框」小工具

step 3

增加背景及陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 4

在「進階」調整背景內部以及外部的距離

1. 點選「欄位」圖示
2. 在「進階」分頁
3. 調整欄位間距數值。邊界：「0、12、0、12」px，邊框距離：「30」px

樣式二：水平卡片

• 樣式特色：讓原先僅是列點呈現的單調文字，加上卡片的樣式，在視覺上更凸顯重點
• 適用時機：可以用在數量比較少的服務主題，這樣的排列，不會使空間太過空泛

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「2」欄位數

step 2

拖曳「內部段」小工具。因為在同一個欄位裡，需要兩個小工具的元素

step 3

拖曳「標題、內容編輯器、圖示」小工具

step 4

調整標題的大小

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在 HTML 標籤，選擇「H3」

step 5

調整圖示的欄位寬度與位置

1. 點選「欄位」圖示
2. 點選「版面配置」分頁
3. 在欄寬度，輸入數值「30」%
4. 點選「六個小點」
5. 點選「版面配置」分頁
6. 在垂直對齊，選擇「中央」

step 6

增加「欄位」背景顏色及陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 7

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 在「進階」分頁
3. 調整欄位間距數值。邊界：「0、12、0、12」px，邊框距離：「30」px

樣式三：中間分支

• 樣式特色：四格主題的說明，中間的圖片可以加上有插圖，讓呈現的項目跟品牌主視覺結合，變得更有整體性
• 適用時機：如果剛好有四格主題想要說明，可以在中間加上一張圖，左右呼應四個主題項目

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「內部段」小工具。因為在同一個欄位裡，需要多個小工具的元素

step 3

將「內部段」的其中一個欄位刪除

1. 滑鼠右鍵點選「欄位」圖示
2. 點選「刪除」。就能將欄位移除了

step 4

拖曳「圖片、圖示方框」小工具

step 5

在「版面配置」調整工具的位置

1. 點選「六個小點」
2. 點選「版面配置」分頁
3. 在垂直對其他人，選擇「中央」

step 6

在「內容」新增圖片

1. 點選右側圖片
2. 點選「內容」分頁
3. 在選取圖片，點選圖片
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

樣式四：編號卡片

• 樣式特色：大數字可以清楚的看到流程編號，不會讓版面太過單調又能抓住讀者眼球
• 適用時機：想要使用步驟說明，像是你想告訴讀者預約步驟、製作的流程等

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「標題、圖示方框」小工具

step 3

將「標題」改成編號數字

1. 點選右側「標題」 小工具
2. 點選「內容」分頁
3. 在「標題」輸入編號數字
4. 點選「樣式」分頁
5. 在文字色彩，點選「色票」圖示，輸入「#D7DCE2」
6. 在「排版樣式 > 尺寸」，輸入「136 px」就能將字體放大

step 4

將數字編碼排列在圖示方框的底下

1. 點選編碼大數字
2. 點選「進階」分頁
3. 在位置，選取「絕對」定位
4. 在 Z-index，輸入「0」。這個步驟可以將數字移至圖示方框的底下

step 5

在「進階」調整欄位的背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊框距離：「80、0、80、0」px

文章/作品

樣式一：卡片模式

• 樣式特色：以同等比例的卡片視覺，讓讀者更清楚這個網站有哪些內容，也不會因為數量多就導致版面混亂，反而更有秩序
• 適用時機：如果有剛好三個主題的文章，可以利用一排三個卡片，一目瞭然的知道類別

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「標題、圖片、內容編輯器、按鈕」小工具

step 3

調整標題的大小

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在 HTML 標籤，選擇「H3」

step 4

調整最外框背景顏色

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）

step 5

調整欄位背景顏色與陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 6

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 在「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「24」px

step 7

調整圖片與外框內部以及外部的距離

1. 點選「圖片」工具
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「-24、-24、0、-24」px
4. 點選「六個小點」
5. 點選「進階」分頁
6. 調整欄位間距數值。邊框距離：「60、0、60、0」px

step 8

調整按鈕與上方文字的距離

1. 點選右側「按鈕」工具
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「30、0、0、0」px

樣式二：列表模式

• 樣式特色：讓文章的排列上多了一份活潑，再不規則中帶一點規律
• 適用時機：在同一系列中，會有一個主題是特別想要凸顯，就能使用左邊最大圖，搭配三個小圖

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「2」欄位數

step 2

拖曳「內部段」小工具。因為在同一個欄位裡，需要三個小工具的元素

step 3

拖曳「標題、圖片、內容編輯器、按鈕」小工具

step 4

調整標題的字級大小

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在 HTML 標籤，選擇「H3」

step 5

調整欄位背景顏色

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 點選「六個小點」
7. 在背景類型，點選「筆刷」樣式
8. 在色彩，點選「色票」圖示
9. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）

step 6

調整欄位背景陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」
4. 點選「六個小點」
5. 點選「樣式」分頁
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 7

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「24」px

step 8

調整右側中間「欄位」上下距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「24」px

step 9

調整圖片與欄位之間距離

1. 點選左圖最大張的「圖片」工具
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「-24、-24、0、-24」px
4. 點選「六個小點」
5. 點選「版面配置」分頁
6. 在欄間距，選擇「沒有距離」
7. 點選「欄位」圖示
8. 在「進階」分頁
9. 調整欄位間距數值。邊框距離：「12」px

step 10

在「內容」新增圖片

1. 點選右側圖片
2. 點選「內容」分頁
3. 在選取圖片，點選圖片
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

step 11

將欄位裡的文字上下置中

1. 點選「欄位」圖示
2. 點選「版面配置」分頁
3. 再垂直對齊，選擇「中央」

聯絡我們

樣式三：地圖位置

• 樣式特色：地圖顯示的邊緣通常會太過單調，將它做成有圓角的卡片樣式，讓視覺更加立體
• 適用時機：如果是有公司地址，可以使用地圖顯示的方式，增加頁面豐富度，也能讓讀者直接點選，連結到 Google 地圖，減少查詢的動作，也是一種貼心的使用者體驗。

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「2」欄位數

step 2

拖曳「內部段」小工具

step 3

拖曳「標題、內容編輯器、按鈕、地圖」小工具

step 4

將欄位裡的文字上下置中

1. 點選「六個小點」
2. 點選「版面配置」分頁
3. 在垂直對齊，選取「中央」

step 5

調整欄位背景顏色、陰影與圓角

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在框線圓角半徑，輸入「60」px
7. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 6

調整「欄位」背景內部以及外部的距離

1. 點選「六個小點」
2. 在「進階」分頁
3. 調整欄位間距數值。邊界：「60、0、60、0」px，邊框距離：「60」px

拖曳「標題、圖片、內容編輯器、按鈕」小工具

樣式二：郵件訂閱

• 樣式特色：版面佔比不大，但卻很顯眼，清楚讓讀者知道你的希望他們做的事情
• 適用時機：這個樣式很適合穿插在區塊的中間部分，讓頁面有一個突出的視覺層次

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「標題、圖片、內容編輯器、按鈕」小工具

step 3

調整第一欄位的寬度比例，將圖片的寬度縮小比例

1. 點選「欄位」圖示
2. 點選「版面配置」分頁
3. 在欄寬度，輸入「30」%

step 4

將欄位裡的文字上下置中

1. 點選「六個小點」
2. 點選「版面配置」分頁
3. 在垂直對齊，選取「中央」

step 5

將按鈕靠右。這裡的按鈕也可以放上電子郵件輸入框等

1. 點選右側「按鈕」工具
2. 點選「內容」分頁
3. 在對齊。選擇「置中」圖示

step 6

調整欄位背景顏色

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#3A4046」（色票碼僅供參考，可以調整適合自己網站的色調）

step 7

在「樣式 > 排版樣式 」修改文字顏色

1. 點選「六個小點」
2. 點選「樣式」分頁
3. 在標題顏色，點選「色票」圖示，並輸入色票號碼「#000000」
4. 在文字色彩，點選「色票」圖示，並輸入色票號碼「#000000」

step 8

調整按鈕的顏色

1. 點選右側「按鈕」工具
2. 點選「樣式」分頁
3. 在文字色彩，點選「色票」圖示
4. 輸入色票號碼「#3A4046」（色票碼僅供參考，可以調整適合自己網站的色調）
5. 在背景類型，點選「筆刷」圖示
6. 在色彩，點選「色票」圖示
7. 輸入色票號碼「#FFFFFF」（色票碼僅供參考，可以調整適合自己網站的色調）

step 9

調整「欄位」背景內部以及外部的距離

1. 點選「六個小點」
2. 點選「進階」分頁
3. 調整欄位間距數值。邊框距離：「24」px

step 10

在「內容」新增圖片

1. 點選右側圖片
2. 點選「內容」分頁
3. 在選取圖片，點選圖片
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

客戶見證

樣式一：卡片排版

• 樣式特色：以卡片垂直置中的排列方式，讓整體視覺排列整齊，呈現規律，有效提升信任度
• 適用時機：當客戶見證比較多的情況，避免畫面過凌亂，可以使用卡片的樣式

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「星等、見證」小工具

step 3

將見證的圖示往上移動

1. 點選「見證」工具
2. 點選「內容」分頁
3. 在圖片位置，選擇「上」

step 4

將星等調整中央的位置

1. 點選「見證」工具
2. 點選「內容」分頁
3. 在對齊，選擇「置中」圖示

step 5

調整欄位背景顏色與陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 6

調整星等的顏色

1. 點選右側「星點」工具
2. 點選「樣式」分頁
3. 在色彩，點選「色票」圖示。輸入色票號碼「#586069」

step 7

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「24」px

step 8

在「內容」新增圖片

1. 點選右側圖片
2. 點選「內容」分頁
3. 在選取圖片，點選圖片
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

樣式二：左右排版

• 樣式特色：左右排列，人物見證的人像比例會大一些，可以凸顯視覺
• 適用時機：見證人物不多時，可以使用這種排版，讓版本不會太空泛

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「2」欄位數

step 2

拖曳「內部段」小工具。

step 3

拖曳「圖片、內容編輯器、圖示」小工具

step 4

調整第一欄的寬度

1. 點選「欄位」圖示
2. 點選「版面配置」分頁
3. 在欄寬度，輸入「30」％

step 5

將圖示置左及置右對齊

1. 點選右側「圖示」工具
2. 點選「內容」分頁
3. 在對齊，點選「置左」圖示
4. 點選右側「圖示」工具
5. 在對齊，點選「置右」圖示

step 6

將圖示更換引號的標誌

1. 點選右側「圖示」工具
2. 點選「內容」分頁
3. 點選圖示按鈕
4. 搜尋圖示。輸入「Quote」
5. 選擇上引號的圖示
6. 點選「插入」

step 7

將放置大頭照的圖片工具，改成圓的造型

1. 點選右側「圖片」工具
2. 點選「進階」分頁
3. 在 Mask 點選「開啟」的功能，形狀預設是圓形，就不需要再做設定

step 8

將上下引號圖示縮小

1. 點選右側「圖示」工具
2. 點選「欄位」圖示
3. 在尺寸，輸入「24」Px

step 9

編輯「內容編輯器」的文字

1. 點選右側「內容編輯器」工具
2. 點選「內容」分頁
3. 在編輯器裡，填寫「名稱、服務單位」

step 10

調整欄位背景顏色與陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 11

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「24」px

step 12

將內容上下置中

1. 點選「六個小點」
2. 點選「版面配置」分頁
3. 在垂直對齊，選擇「中央」

step 13

複製多個見證

1. 滑鼠右鍵點選「六個小點」
2. 點選「版面配置」分頁
3. 點選「複製」
4. 點選「貼上」

step 14

點選「欄位」圖示，將將人物圖片往右移動，這樣就可以有互相錯開的視覺

價格方案

樣式一：圖片風格

分享其中一位客戶好好理財好好睡的首頁價格方案，就是使用這個框架。

• 樣式特色：以圖片、標題、圖示列表、按鈕垂直置中的狀態排列，清楚知道方案規格。
• 適用時機：在使用這個風格需要加上同系列的封面圖，會讓視覺更一致。

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「標題、圖片、按鈕、圖示列表」小工具

step 3

調整欄位背景顏色與陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 4

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「24」px

step 5

調整標題的大小

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在 HTML 標籤，選擇「H3」

step 6

編輯圖示列表的文案

1. 點選右側「圖示列表」工具
2. 點選「內容」分頁
3. 在版面配置編輯列表文案

step 7

調整圖示列表的樣式

1. 點選右側「圖示列表」工具
2. 點選「樣式」分頁
3. 開啟「分隔線」
4. 樣式選擇「點線」
5. 調整點線的線條粗細，輸入「2」px
6. 在色彩，點選「色票」圖示
7. 輸入色票號碼「#D7DCE2」

step 8

將物件全部水平置中

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在對齊，選擇「置中」圖示
4. 點選右側「圖示列表」工具
5. 點選「樣式」分頁
6. 在對齊，選擇「置中」圖示
7. 點選右側「按鈕」工具
8. 點選「內容」分頁
9. 在對齊，選擇「置中」圖示

step 9

在「內容」新增圖片

1. 點選右側圖片
2. 點選「內容」分頁
3. 在選取圖片，點選圖片
4. 在媒體庫裡，選擇一張需要的圖片
5. 點選「選取」

樣式二：金額風格

• 樣式特色：使用大數字金額，並且在左上角標示安案的標籤，讓讀者能更清楚價格與方案。
• 適用時機：在服務或產品能明確的顯示價格，同時想針對方案做比較時，可以使用這種樣式。

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「3」欄位數

step 2

拖曳「按鈕、內容編輯器、圖示列表、按鈕」小工具

step 3

將上方的按鈕樣式改成小標籤的樣式

1. 點選右側「按鈕」工具
2. 在背景類型，點選「筆刷」圖示
3. 在色彩，點選「色票」圖示，並輸入色票號碼「#586069」
4. 在框線圓角半徑，輸入數值「50」px
5. 在方框陰影，點選「鉛筆」圖示，將陰影調成透明度
6. 調整欄位間距數值。邊框距離：「8」px

step 4

設定金額，並且將數字放大

1. 點選右側「內容編輯器」工具
2. 點選「內容」分頁
3. 調整「標題１」
4. 輸入金額「$000」

step 5

編輯圖示列表的文案

1. 點選右側「圖示列表」工具
2. 點選「內容」分頁
3. 在版面配置編輯列表文案

step 6

調整圖示列表的樣式

1. 點選右側「圖示列表」工具
2. 點選「樣式」分頁
3. 開啟「分隔線」
4. 樣式選擇「點線」
5. 調整點線的線條粗細，輸入「2」px
6. 在色彩，點選「色票」圖示
7. 輸入色票號碼「#D7DCE2」

step 7

將物件全部水平置中

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在對齊，選擇「置中」圖示
4. 點選右側「圖示列表」工具
5. 點選「樣式」分頁
6. 在對齊，選擇「置中」圖示
7. 點選右側「按鈕」工具
8. 點選「內容」分頁
9. 在對齊，選擇「置中」圖示

step 8

調整欄位背景顏色與陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 9

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「60、24、60、24」px

step 10

修改標籤的文案

1. 點選右側「按鈕」工具
2. 點選「內容」分頁
3. 在文字，輸入「方案一」

常見問題

樣式一：隱藏樣式

• 樣式特色：可以將內容關掉，減少版面的空間
• 適用時機：常見問題較多的情況之下，可以使用隱藏的方式，不讓版面太長

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「1」欄位數

step 2

拖曳「收合容器」小工具

step 3

修改「收合容器」的開關圖示

1. 點選右側「收合容器」工具
2. 點選「內容」分頁
3. 在圖示，點選圖示按鈕
4. 選擇想要更改的圖示
5. 點選「匯入」

step 4

將「收合容器」的開關圖示往右移動

1. 點選右側「收合容器」工具
2. 點選「樣式」分頁
3. 在對其，點選「置右」圖示

step 5

調整標題與內容的背景顏色

1. 點選右側「收合容器」工具
2. 點選「樣式」分頁
3. 在標題，點選背景「色票」圖示，並輸入色票號碼「#D7DCE2」
4. 在內容，點選背景「色票」圖示，並輸入色票號碼「#F5F6F9」

step 6

在「收合容器」設定邊框的粗細以及顏色

1. 點選右側「收合容器」工具
2. 點選「樣式」分頁
3. 調整框線寬度，輸入「2」px
4. 在框線色彩，點選背景「色票」圖示，並輸入色票號碼「#FFFFFF」

樣式二：展開樣式

• 樣式特色：全部展開的情況，可以一目瞭然的知道問題與回答。
• 適用時機：常見問題較少的情況，或者想讓人一眼看見有哪些問題時使用

step 1

新增欄位

1. 點選「＋」新增
2. 選擇「1」欄位數

step 2

設定「內部段」小工具的欄位數量

1. 拖曳「內部段」小工具。
2. 滑鼠右鍵點選「欄位」圖示
3. 點選「刪除」

step 3

拖曳「標題、內容編輯器、圖示」並更改圖示樣式

1. 點選右側「圖示」工具
2. 搜尋圖示。輸入「Quest」
3. 選擇問題圖示
4. 點選「插入」

step 4

調整圖示的大小

1. 點選右側「圖示」工具
2. 點選「樣式」分頁
3. 在尺寸，輸入「50」px

step 5

調整標題的大小

1. 點選右側「標題」工具
2. 點選「內容」分頁
3. 在 HTML 標籤，選擇「H3」

step 6

調整圖示欄位的寬度大小

1. 點選「欄位」圖示
2. 點選「版面配置」分頁
3. 在欄寬度，輸入「6」％

step 7

在「版面配置」調整工具的位置

1. 點選「六個小點」
2. 點選「版面配置」分頁
3. 在垂直對其他人，選擇「中央」

step 8

調整欄位背景顏色與陰影

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼「#F5F6F9」（色票碼僅供參考，可以調整適合自己網站的色調）
6. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整數值：色彩「#58606933」，模糊「31」

step 9

調整「欄位」背景內部以及外部的距離

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位間距數值。邊界：「12」px，邊框距離：「24」px

如何使用 Elementor 區塊模板？

在前面介紹完各種不同的區塊樣式，這些樣式都是可以自己製作的，但如果你覺得自己製作太麻煩，也可以選擇直接匯入別人製作的模板，再去進行修改，會是更快速的方式。

接下來的步驟，我會教大家如何匯入別人製作的模板，以及在模板上可以調整的樣式範圍有哪些：

步驟一：匯入模板

首先，要將你所獲得的模板，匯入到你的頁面中。(如果是使用我文末提供的模板，一樣要先匯入)

step 1

在右方頁面，點選「資料夾」的圖示

step 2

點選右上方的上方圖示按鈕

step 3

開啟資料夾，選擇全部的模板。這邊示範我就先選擇「00_wenyan_elementor_全部.json」檔案，也能選擇匯入單一主題的 .json 檔。

step 4

點選檔案後，在我的版型，找到名稱：「00_wenyan_elementor_全部.json」，點選「匯入」。

step 5

下圖是將模板匯入後，整個頁面的區塊展示

另外，Elementor 也有免費的區塊模板可以使用：

1. 在「區塊」分頁
2. 選擇需要的模板「主題」
3. 點選「插入」

下圖為插入的模板範例：

在使用 Elementor 官方提供的模板時，以下有幾點可以注意：

1. 通常是英文版本，調整成中文時，整體的風格會與英文有些落差
2. 改成中文時，也需要統一字體的大小，避免整體網站的文字大小不一
3. 選擇模板時，右上方有一個「pro」標籤，是需要付費才能使用

步驟二：全域標題顏色

上傳模板後，如果想要改標題的顏色，除了單獨修改，也可以到全域的「排版樣式」設定

1. 點選模板 Elementor 功能選單
2. 點選「網站設定」
3. 點選「排版樣式」
4. 調整 H1~H6 的文字顏色

步驟三：全域按鈕

上傳模板後，如果需要更改按鈕的樣式，可以使用全域來修改，這樣就能一次調整完成

1. 點選模板 Elementor 功能選單
2. 點選「網站設定」
3. 點選「按鈕」
4. 在色彩，點選「色票」圖示，調整顏色
5. 如果想要調整樣式，也能在框線圓角半徑，輸入「50」px。

步驟四：樣式修改

相同的模板也可以有很多變化，讓模板玩出更多的花樣，不要被模板給侷限了想像。

以下 5 個樣式，建議可以互相搭配，玩出屬於自己網站的風格。

底色

除了乾淨的白色背景以外，也可以配色符合網站色系的顏色。

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在背景類型，點選「筆刷」樣式
4. 在色彩，點選「色票」圖示
5. 輸入色票號碼

邊框

線框的風個也是很萬用，他給人一種簡約的調性

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在色彩，點選「色票」圖示
4. 輸入色票號碼

陰影

不同的陰影也會給人不同的感受，下圖的陰影模糊數值是比較高的，所以顯示的色塊就會更凸出。

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在「框線 > 方框隱影」，點選「鉛筆」圖示。調整陰影的數值及顏色

圓角

如果你的風格是比較柔性一點，那圓角就一定少不了，增加了圓形半徑的數值，讓整個風格都比較圓潤。

1. 點選「欄位」圖示
2. 點選「樣式」分頁
3. 在框線圓角半徑，輸入數值

間距

間距的調整我認為是很重要的，它是讓整體的網站空間能呼吸，有時候留白也很美

1. 點選「欄位」圖示
2. 點選「進階」分頁
3. 調整欄位「邊界」與「邊框距離」的數值。

結論：一杯咖啡，送你模板

Elementor 區塊樣式會因為大家的主題不同，排版樣式也會不同。在不同主題下，區塊也可以有各種的排列方法，網站設計上就能看見差異。

我自己在製作頁面時，會有固定的順序：

1. 新增欄位
2. 拖曳小工具
3. 調整欄位的寬度比例
4. 物件的位置擺放，像是上下置中，左右對齊
5. 調整背景顏色以及陰影
6. 最後，才是調整「欄位」內部以及外部的距離

最常被詢問為什麼每一次在製作頁面時，會花很多的時間再調整，因為常常同一件事情就重複好多設定，這時候就會出現沒有耐心的狀態。

所以在一開始非常建議要先將「全域」的顏色樣式設定好，接著確認需要使用到的小工具，最後才是調整顏色、陰影、間距等。

若沒有確認小工具的位置擺放，就先設定背景、陰影樣式，很容易因為改動的小工具，而導致樣式需要重新設定的狀況，這樣重複動作會浪費很多時間。

如果你覺得自己製作網頁太花費時間，想要我利用我製作好的模板，再直接去做調整，那麼你可以不限金額請我喝一杯咖啡，我會把模板傳送給你，以下是領取模板的流程。

1. 點擊「我要模板」
2. 加入溫研 LINE 官方
3. 留言告訴我：我想要模板
4. 我會把模板連結傳送給你

如果你還不確定是否要找網頁設計師合作，可以參考我這篇的分析：製作網站需要找設計師嗎？專業設計師分析給你聽