【網站設計教學#6】Elementor 教學：實際帶你完成 WordPress 網站設計

前言

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

如你還不是很了解網站設計，先前有分享一篇 WordPress 教學，給新手小白快速上手。

網站規劃架構

WordPress 外觀設定

網站線框規劃

Elementor 基礎教學

網站整體配色

Elementor 區塊樣式

網站視覺設計

網站基本頁面

上一篇已經完成 WordPress 外觀的全域設定，也將頁首/頁尾的製作完成，接下來會繼續完成網站視覺設計的頁面製作，所以如果還沒有完成外觀設計，可以先回到上一篇完成小作業。

在開始頁面製作前，會先介紹 Elementor 這套工具，包含接下來我們可能會使用到的功能，以及其他 Elementor 小工具的運用。

我最常被詢問是否該付費 Elementor 這套工具？其實如果知道每個工具的特性，運用免費版本也能設計出好看的網站頁面，對於新手來說是不用付費購買的。

Elementor 是什麼？

Elementor 是用來編輯網站頁面的工具，可以用自由拖拉的方式來製作頁面，高度客製化的功能，比起要使用程式語法來製作，相對容易許多。

在免費版本的頁面設計上，就能達到專業的形象網站，如果你不是需要比較特殊的功能，像是「作品集、價格表、購物車」等需要付費的小工具，免費版本就有 30+ 的小工具功能。

Elementor 擴充外掛：Ultimate Addons Elementor

Ultimate Addons Elementor 是 Elementor 額外擴充的小工具，總共有 30+ 的小工具（下圖），這裡分享我最喜歡，也是大部分有在經營大量文章、作品圖，很需要的文章分類功能，主要可以在上方顯示分類標題，讓你的文章或作品更容易讓人找到。

為什麼使用 Elementor 這套工具？

不需要學會程式語言就能架設網站

對於一般人來說，會認為需要使用 HTML / CSS 程式語法來進行網站製作，會認為門檻太高。但其實 Elementor 就是針對不懂程式的人所設計的頁面編輯器工具，免費版本就能做到很完整個網站設計。

不需要付費版本就能設計基本網站

我自己目前在接客戶的案子上，也幾乎都是使用 Elementor 來製作。舉例來說，「DR.DEAN 處方箋」這個網站就是完全使用免費版本的 Elementor 來製作，沒有額外付費。

不需要模索就能立即點選修改位置

當我幫客戶設計完成後，在沒有使用過 Elementor 頁面編輯器之前，都會擔心我能自己改文案嗎？如果想要新增區塊，可以自己新增嗎？這點是不用擔心，只需要點選該文案就能直接修改文字，在編輯區塊也是相當覺

大多數的人會擔心用 Elementor 會不會有問題，我是覺得使用 Elementor 的人數很多，相對來說也代表他是一套穩定且值得信任的工具，比較不用擔心哪一天不支援，頁面就消失。

如何安裝 Elementor 並開啟頁面編輯？

step 1

安裝 Elementor

1. 到 WordPress 後台，點選「外掛」
2. 搜尋「Elementor」
3. 點選「立即安裝」
4. 點選「啟用」完成安裝

step 2

安裝後的 Elementor 設定

1. 到 WordPress 後台，點選「Elementor」
2. 點選「設定」
3. 在內容類型，勾選文章、頁面、Landing Pages
4. 完成後，點選「儲存設定」

step 3

開啟 Elementor 進行頁面編輯

1. 到 WordPress 後台，點選「頁面」
2. 點選「新增頁面」
3. 輸入「頁面名稱」
4. 點選「儲存草稿」
5. 點選「使用 Elementor 編輯」

下圖為點選「使用 Elementor 編輯」後開啟的畫面

1. 左側：小工具列
2. 右側：頁面製作區域

Elementor 頁面編輯器介面介紹

在開始教 Elementor 的小工具前，要先懂頁面編輯器介面位置，在操作上也會更順手。

Elementor 功能很多，除了小工具，也會有一些圖層、歷史紀錄、各裝置的功能：

一、Elementor 功能選單

左側工具列的左上角有三條樣式，裡面有功能選單，點選後可以調整網站頁面的「基本設定」。

二、Elementor 欄位

「Elementor」是用來排版的最基本元素，頁面上的每個區塊，都會需要新增獨立的欄位來放置。而欄位也會有不同的排版方法，都會影響區塊的呈現，後面會再詳細教學。

step 1

初次新增欄位

1. 點選頁面中的「＋新增」
2. 選擇所需的欄位

step 2

欄位之間再新增欄位

1. 滑鼠碰觸欄位框
2. 點選「＋新增」
3. 點選「＋新增欄位」
4. 點選所需欄位
5. 點選「Ｘ」可刪除欄位

step 3

兩種欄位拖曳

1. 點選「六個小點」滑鼠長按
2. 上下移動拖曳
3. 點選欄位左上角的「欄位按鈕」滑鼠長按
4. 隨意拖曳位置

三、一般設定

點選左下方的齒輪按鈕，這邊就是頁面的「一般設定」，可以看到標題名稱、頁面的狀態、精選圖片，以及頁面佈局的設定。

四、導覽器（圖層）

點選左側工具列下方的「導覽器」在右方會出現頁面物件的圖層位置，這個功能非常的方便，在製作時會遇到無法點選的狀態時，就能使用導覽器（圖層）來找尋物件。

五、修訂紀錄

點選左側工具列下方的「修訂紀錄」，在製作時如果喜歡上一個版本，這麼一來就不用重新製作，只需要來這裡找到某個版本的動作，點選後就能回到上個樣式設定。

六、響應模式（手機排版）

「響應模式」可以預覽各個裝置的畫面，包含網站、平板、手機的頁面配置

step 1

點選左側工具列下方的「響應模式」，會在上方出現一條個裝置的預覽設定

step 2

點選「桌機按鈕」，通常預設就是桌面的大小

step 3

為了觀看更全面，點選左側小工具列縮合

頁面縮合狀態

step 4

點選「平板按鈕」，會顯示平板的寬度狀態

step 5

點選「手機按鈕」，會顯示手機的寬度狀態

七、Elementor 預覽變更

點選左側工具列下方的眼睛圖示「預覽變更」，可以實際觀查製作完成的樣貌

八、Elementor 儲存草圖

發佈後如果不希望讓大家看見頁面，可以「儲存草圖」，設定位置在工具列右下方。

1. 點選向下箭頭符號
2. 點選「儲存草圖」

九、Elementor 發佈

點選「發佈」頁面就能讓讀者看到，所以在發佈之前可以先預覽頁頁面，確認無誤再發佈頁面。

補充一下，如果發佈後遇到「頁面不存在」的狀態，該如何解決：

1. 到 WordPress 後台頁面，點選「設定」
2. 點選子選單「永久連結」
3. 勾選文章名稱
4. 點選「儲存設定」

十、Elementor 另存範本

這個功能可以將已經製作好的頁面儲存為範本，如果其他頁面也需要一樣的設計，就能直接匯入，不需要再重新製作，是一個非常減少時間的小技巧。

step 1

另存範本功能介紹：

1. 點選最右方「向下箭頭」
2. 點選「另存為範本」
3. 輸入名稱
4. 點選「儲存」完成後會出現剛剛所新增的範本
5. 點選右上角「關閉」

step 2

如何將剛剛儲存的範本匯入頁面

1. 點選中間的「資料夾圖示」
2. 在版型庫選擇範本，點選「匯入」

Elementor 全域設定（幫你減少編輯時間）

為什麼需要設定 Elementor 全域功能？因為編輯講求的是效率，當在拖曳工具時，如果有事先設定好，拖曳出的工具會是以設定好的模式出現，並不需要每一次都再設定一次，非常的節省時間。

頁面佈局設定

首先，要先來進行頁面佈局的設定。

還記得網站設計框線圖的教學中，有提到「網格系統尺寸」，也就是螢幕尺寸與網站容器寬度之間的關係，所以在開始製作頁面時，就需要調整頁面的佈局。

分享兩種我常用的設定：

一、Elementor 預設值：以 Astra 佈景主題預設為主

step 1

點選左下角「一般設定」

step 2

在頁面佈局，點選「下拉選項」

step 3

選擇「預設值」

step 4

點選眼睛圖示「預覽變更」

step 5

會另開新頁面

step 6

點選上方「編輯頁面」

step 7

點選 「Astra 圖示按鈕」

step 8

在 Content Layout 看到六個頁面選項，可依照自己的需求選擇，一般我會使用左下角「全幅寬度」背景可以顏色整個螢幕。

各個頁面畫布的效果：

二、Elementor 畫布

step 1

點選左下角「一般設定」

step 2

在頁面佈局，點選「下拉選項」

step 3

選擇「Elementor 畫布」

step 4

點選眼睛圖示「預覽變更」

點選預覽變更後所顯示的頁面，頁首頁尾會消失，因為它們是使用 Astra 的工具製作的，所以不在 Elementor 畫布的範圍裡。

如果想要使用 Elementor 的頁首頁尾功能，就必須購買付費版的功能。

全域顏色設定

這個功能是協助將之前於網站配色教學中帶大家選定的品牌色票，在全域中做設定。

step 1

點選左上角的工具選單

step 2

點選「網站設定」

step 3

點選「全域顏色 Global Colors」

step 4

點選「色票」

step 5

輸入「色票號碼」

全域字型設定

預設的字體會以黑體字為主，如果有其他字型，可以在全部字形做修改。

step 1

點選左上角的工具選單

step 2

點選「網站設定」

step 3

點選「全域字形」

step 4

點選「鉛筆樣式按鈕」，調整文字的樣式設定

排版樣式設定

排版樣式設定，可以單獨調整「h1、h2、h3、h4、h5、h6」的顏色與字形樣式

step 1

點選左上角的工具選單

step 2

點選「網站設定」

step 3

點選「排版樣式」

下圖是「h1、h2、h3、h4、h5、h6」的顏色、排版樣式調整示意：

如果想要使用 Elementor 的排版樣式的功能，可以獨立設定文字顏色、字體樣式等設定，必須先到後台做勾選關閉全域設定，不然只會出現上一個步驟「全域顏色 Global Colors」的配色，無法單獨設定排版樣式。

首先到 WordPress 後台：

step 1

點選 「Elementor」

step 2

再點選子選單「設定」

step 3

勾選「停用預設顏色」、「禁用預設字型」

step 4

點選「儲存設定」

按鈕樣式設定

按鈕在網站是讓使用者點選的功能，可以在全域設定中將樣式統一，就不用每次拖曳按鈕小工具，都需要再重新調整。

step 1

點選左上角的工具選單

step 2

點選「網站設定」

step 3

點選「按鈕」

設計前要先知道的 Elementor 欄位概念

Elementor 的欄位是在網站線框圖教學時所介紹的 12 條線來組合網站是同等的概念，這裡的欄位框線可以直接點選幫你分出網站的欄位，讓你再分出欄位時，可以直接拖曳小工具來做排版。

網站線框圖如何設計？
Wireframe 教學與範例解析

立即閱讀下一篇

那我們來了解一下 Elementor 欄位是由「段」與「欄」的組合 ：

• 「段」：它是欄位的最外框，通常會拿來設計背景，讓它延伸到螢幕的寬。
• 「欄」：它是網站的容器寬度，通常在排版時會使用的欄位數量。

段與欄有哪些組合？

一、第一組

step 1

點選「＋新增」

step 2

選擇「欄位數量」

step 3

將小工具拖曳至欄位裡

二、第二組

step 1

點選「＋新增」

step 2

選擇「欄位數量」

step 3

將內部段拖曳至欄位（這樣裡面就又多兩個欄位）

step 4

再將小工具拖曳至欄位裡

6 個 Elementor 常用的小工具

Elementor 有很多的小工具，但有 6 個是我認為最常使用的工具，只要有這幾個小工具，基本上就能排出很多好看的頁面。

而接下來每個工具，我都會詳細介紹它，而每一個工具都包含：內容、樣式、進階，3 個可以設定的功能：

首先，以「進階」功能設定開始介紹，無論是什麼小工具，進階功能都是統一的設定內容，所以我開頭先直接一次性說明，後面就不重複講：

1-1 邊界：可以調整邊框外距的上下距離
1-2 邊框間距：可以調整邊框內距的上下左右距離
1-3 寬度：每個元件本身都會有一個框，但預設是透明的，所以調這個選項時可能會看不出差異，但如果像下圖一樣有底色，就會看得出寬度的不同，這個設定就是在調整這個寬度

1-4 位置：物件除了在原先的欄位位置上，也能將物件自由放置在頁面上的任意位置
1-5 Z-index：如果有元素重疊時，數值越大的會在越上層的位置，依序 0、1、2、3 來設定

1-6 進場動畫：可以設定頁面一打開的進場動畫效果
1-7 轉變 Transform：將物件改變外觀樣式，像是旋轉、傾斜、上下左右鏡射

1-8 背景：可以用顏色、漸層兩種方向設置背景效果
1-9 邊線類型：可以將欄位區塊設置線條的樣式，以及粗細寬度
1-10 框線圓角半徑：可以將欄位區塊的四個角，設置圓角樣式
1-11 方框陰影：可以將欄位區塊設置陰影效果
1-12 遮色片 Mask： 遮色片是一個有形狀的外容器，遮住裡面的物件，可以使用圓形、三角形、六邊形等，讓你的圖片呈現不同的形狀造型。
1-13 回應式：可以獨立設定是否要在哪一個裝置顯示，以及區塊位置的排序

接下來，開始分享 6 個最常使用的工具：

一、標題

「標題」小工具，通常運用在大標題、副標題上。

step 1

點選小工具「標題」

step 2

點選工具分頁「內容」
2-1 標題：在輸入框內，填入標題文案
2-2 連結：輸入文字連結的網址，可勾選是否開啟新視窗
2-3 尺寸：可以調整文字的大中小
2-4 HTML 標籤：總共有 h1、h2、h3、h4、h5、h6、div、span、p，每一個標籤會有不同的文字大小，h1～h6 通常是使用標題的層級，像是大標題、副標題、小標題；div、span、p 可以使用一般的內文的文字。
2-5 對齊：調整文字的左中右對齊方向

step 3

點選工具分頁「樣式」
3-1 文字顏色：調整文字的顏色色碼
3-2 排版樣式：調整文字的樣式、大小、粗細等設定
3-3 文字邊框 Text Stroke：可以將文字多一層外框線
3-4 文字陰影：將文字新增陰影
3-5 混合模式：如果有設定文字的背景顏色時，可以跟文字的顏色一起混合出不同的效果

二、圖片

「圖片」小工具，可以選取獨立的照片，通常上傳插圖、人物照等其他素材

step 1

點選小工具「圖片」

step 2

點選工具分頁「內容」
2-1 選取圖片：新增圖片
2-2 圖片尺寸：調整圖片的尺寸大小
2-3 對齊：調整圖片的左中右對齊方向
2-4 標題：可以在圖片的下方新增文字說明
2-5 連結：可以在圖片的下方文字說明，新增連結網址

step 3

點選工具分頁「樣式」
3-1 寬高：調整圖片的寬高大小，可以設置最大寬，也能自己手動設定高度
3-2 不透明度：可以將圖片設定不透明的效果
3-3 CSS 濾鏡：可以調整圖片的模糊、亮度、對比、飽和、色調，跟一般調整照片光影的功能一樣。
3-4 邊線類型：可以將欄位區塊設置線條的樣式，以及粗細寬度
3-5 框線圓角半徑：可以將欄位區塊的四個角，設置圓角樣式
3-6 方框陰影：可以將欄位區塊設置陰影效果

三、內容編輯器

「內容編輯器」通常用於撰寫較多文字的文案，可以調整基本樣式，像是文字顏色、置中、粗細、連結等功能。

step 1

點選小工具「內容編輯器」

step 2

點選工具分頁「內容」
2-1 內容編輯器：將網站上的文案填寫在編輯內。
2-2 下拉：可以設定標題的第一個字是否區要大字。
2-3 欄、欄間距：可以調整欄位的數量，及間距的距離。

step 3

點選工具分頁「樣式」
3-1 內容編輯器：調整內容編輯器內的文字樣式、色彩、陰影等
3-2 下拉：可以設定文案內的第一個字的效果，下圖為三種檢視的樣式。

四、按鈕

「按鈕」是讓人點擊的功能，可以製作各種樣式、文字編輯、連結，以及滑鼠移動的特效。

step 1

點選小工具「按鈕」

step 2

點選工具分頁「內容」
2-1 類型：除了按鈕本身設置的顏色，他也有資訊、成功、警告、危險的顏色效果
2-2 文字：輸入按鈕上的文字
2-3 連結：新增按鈕上的連結網址
2-4 對齊：將按鈕對齊左中右的位置
2-5 圖示：可以在按鈕上顯示圖示，並且可以設定文字的前後位置，以及圖示與文字間的距離

step 3

點選工具分頁「樣式」
3-1 排版樣式：調整文字的樣式、大小、粗細等設定
3-2 文字陰影：將文字新增陰影設定
3-3 文字色彩：調整文字的顏色色票
3-4 背景類型：調整按鈕的背景顏色
3-5 邊線類型：可以將欄位區塊設置線條的樣式，以及粗細寬度
3-6 框線圓角半徑：可以將欄位區塊的四個角，設置圓角樣式
3-7 方框陰影：可以將欄位區塊設置陰影效果
3-8 邊框間距：調整按鈕的內部距離

五、圖示系列

「圖示系列」共有三種模式，有單獨圖示，也有加上文字標題，或是條例事的樣式，可以針對自己所設計的視覺來做選擇。

一、圖示

step 1

點選小工具「圖示」

step 2

點選工具分頁「內容」
2-1 圖示：點選可新增圖示樣式
2-2 檢視：可以將圖示的背景設置樣式，像是背景色塊，以及線框效果
2-3 形狀：背景設置樣式的造型設定
2-4 連結：新增圖示上的連結網址
2-5 對齊：將圖示對齊左中右的位置

step 3

點選工具分頁「樣式」
3-1 主要顏色：設定圖示的顏色
3-2 尺寸：設定圖示的大小尺寸
3-3 旋轉：設定圖示的旋轉位置

二、圖示方塊

step 1

點選小工具「圖示方塊」

step 2

點選工具分頁「內容」
2-1 圖示：點選可新增圖示樣式
2-2 標題：新增該圖示的標題名稱
2-3 描述：新增該圖示的描述內容
2-4 連結：新增該圖示的連結網址
2-5 圖示位置：可以設定圖示的對齊位置

step 3

點選工具分頁「樣式」
3-1 主要顏色：設定圖示的顏色
3-2 間距：設定圖示與標題的上下間距
3-3 尺寸：設定圖示的大小尺寸
3-4 旋轉：設定圖示的旋轉位置
3-5 對齊：將三個物件：圖示、標題、描述，調整左中右的位置
3-6 垂直對齊：將物件調整上中下的位置
3-7 標題：調整標題的樣式設定
3-8 描述：調整描述的樣式設定

三、圖示列表

step 1

點選小工具「圖示列表」

step 2

點選工具分頁「內容」
2-1 版面配置：設定水平、垂直的排列
2-2 項目 Items：設定圖示、文字的項目
2-3 新增項目：點選可以新增圖示、文字的項目
2-4 關閉項目：點選右方打叉，就能單獨刪除項目
2-5 複製項目：點選複製按鈕，就能單獨複製項目

step 3

點選工具分頁「樣式」
3-1 之間的空間：設定列表之間的距離
3-2 對齊：調整圖示列表的對齊位置
3-3 分隔線：圖示列表之間可以增加線條
3-4 圖示：調整圖示的尺寸大小，以及與文字的距離
3-5 文字：調整列表項目的文字樣式

Elementor 教學
教你製作常用的頁面版型設計

更多 Elementor 工具教學

完成 Elementor 網站設計教學（以首頁為例）

在上一篇中，已經將頁首、頁尾完成。如果還沒完成，可以到上一篇設定WordPress外觀，以及頁首、頁尾的製作。

接下來的這一段，會繼續將網站視覺設計的首頁製作完成，如果想回顧首頁如何設計，可以點選「立即閱讀下一篇」

網站視覺設計教學
用 Canva 設計有質感的網站

立即閱讀下一篇

你也想有一個專業的網站嗎？365 日完整培訓計畫

製作過這麼多設計專案，很常有人問我：「如何經營一個跟你專業的網站？」

如果你剛開始經營，可以不用找我預約，我與我的教練 Dean 一同開發了一套完整的網站培訓。

我會在培訓中負責網站 & Logo 設計，讓你不只有美麗外觀，還擁有豐富內容。

瞭解更完整培訓計畫

步驟零：頁面製作前置作業

在頁面製作前，可以將素材先整理完成，避免在製作時還要回頭下載圖檔，花費更多時間。

一、整理素材

step 1

選取素材圖

如果想要單獨下載素材圖，必須選取「兩張以上」的圖片，按滑鼠右鍵才會出現「下載所選項目」

1. 將兩個素材圖選取，按下「滑鼠右鍵」
2. 點選「下載所選項目」

step 2

下載素材圖設定

1. 點選檔案類型「PNG」
2. 勾選「透明背景」
3. 點選「下載」

Ps. 透明背景需要付費版功能，建議大家如果只有一次性使用，可以免費試用 30天

step 3

如果只有單獨一張圖，這裡有個下載的小秘訣

1. 點選「元素」
2. 將方塊移至圖片上方
3. 把方塊調整為透明
4. 選擇一張「方塊」
5. 選取透明方塊與圖片
6. 點選滑鼠右鍵「下載所選項目」

二、素材命名

上述已經完成全部的圖片素材下載，為了方便管理，未來能更快速找到圖片，建議將圖檔案命名。

為了未來方便找尋我的習慣命名會是以：頁面_區塊_編碼。

範例：下圖是以首頁 Home_部落格 Blog _ 01

三、上傳圖片

將命名完的圖片素材上傳至 WordPress 媒體庫，在上傳之前可以先將圖片壓縮，避免圖檔太大，頁面跑得太慢。

step 1

到 WordPress 後台，點選「媒體 > 媒體庫」

step 2

將命名完的圖片，拖曳上傳圖片

步驟一：欄位設定

以首頁的第一張 Banner 網站線框圖為例，它是左右兩欄，所以新增第二個兩個框的選項

step 1

點選「＋ 新增欄位」

step 2

選擇所需的欄位數

step 3

點選後，會出現兩個空白的欄位框

依此類推，將每一區塊新增完畢

步驟二：拖曳工具

文字、按鈕的顏色樣式，在前面的全域設定中如果已經有設定好，拖曳後就不需要再次設定。

Ps.全域設定可以省下很多的時間，也避免樣式大小不一致的情況，所以建議一開始就要完成設置。

step 1

將左方需要的小工具拖曳至欄位區塊內，不需要管位置排版。

步驟三：上傳圖片

先將全部的圖片，新增至我們設計的圖片素材

step 1

點選右方預設「圖片」工具

step 2

在左側分頁，點選「選取圖片」

step 3

勾選已經在「插入媒體」上的圖片。如果還沒上傳，可以拖曳圖片上傳在做勾選

step 4

選定圖片後，點選「選取」完成上傳

下圖為完成首頁全部圖片的上傳

步驟四：配色設定

將背景、文字、圖示等元素，設定網站配色教學所配置的網站品牌色

一、設定最外框的背景色

step 1

點選最外框的「六個小點」

step 2

在左側分頁，點選「樣式」

step 3

在背景類型，點選「筆刷造型的」工具

step 4

在色彩，點選「色票」

step 5

輸入「色票號碼」

二、設定欄位框的「背景色」

step 1

點選框線左上角的「欄位圖示」

step 2

在左側分頁，點選「樣式」

step 3

在背景類型，點選「筆刷造型的」工具

step 4

在色彩，點選「色票」

step 5

輸入「色票號碼」

三、設定欄位框的「圓角、邊框線」

step 1

點選框線左上角的「欄位圖示」

step 2

在左側分頁，點選「樣式」

step 3

選擇邊線類型「寬線」，輸入「寬度」數值

step 4

在框線圓角半徑，輸入上下左右「數值」

四、設定圖示 ICON 顏色

step 1

點選「圖示 ICON」

step 2

在左側分頁，點選「樣式」

step 3

在主要顏色，設定品牌顏色

五、設定標題顏色

step 1

點選「標題」

step 2

在左側分頁，點選「樣式」

step 3

在主要顏色，設定品牌顏色

六、設定背景框

step 1

點選框線左上角的「欄位圖示」

step 2

在左側分頁，點選「樣式」

step 3

在背景類型，點選「筆刷造型的」工具

step 4

在色彩，點選「色票」

step 5

輸入「色票號碼」

七、設定欄位框的「圓角」

step 1

點選框線左上角的「欄位圖示」

step 2

在左側分頁，點選「樣式」

step 3

在框線圓角半徑，輸入上下左右「數值」

下圖完成首頁網站品牌配色

步驟五：間距調整

將所有的標題、內文、按鈕上下置中

一、欄位區塊垂直置中

step 1

點選框線左上角的「欄位圖示」

step 2

在左側分頁，點選「樣式」

step 3

在垂直對其，選擇「中央」

二、調整最外框的上下間距，避免區塊跟區塊中間太過密合

step 1

點選最外框的「六個小點」

step 2

在左側分頁，點選「進階」

step 3

在邊框間距，輸入上下左右「數值」

三、調整欄位之間的間距，避免物件之間太過緊密

step 1

點選框線左上角的「欄位圖示」

step 2

在左側分頁，點選「進階」

step 3

在邊界輸入上下左右數值

下圖完成間距設定。這樣一來網站區塊、以及物件之間的間距拉開以後，整體網站的視覺更清爽

步驟六：加上材質

最後一步加上材質，可以讓原先比較單調的區塊，增加有層次的視覺

一、在區塊內新增素材

step 1

新增「欄位」

step 2

點選最外框的「六個小點」

step 3

在左側分頁，點選「樣式」

step 4

在背景類型，點選「畫筆」圖示

step 5

在圖片，點選「+ 新增圖片」

step 6

勾選已經在「插入媒體」上的圖片。如果還沒上傳，可以拖曳圖片上傳在做勾選

step 7

選好圖片後，點選「選取」完成上傳

二、設定區塊素材的樣式

step 1

點選最外框的「六個小點」

step 2

在左側分頁，點選「樣式」

step 3

調整素材的位置，選擇「中上」

step 4

調整是否重覆，選擇「不重複」

step 5

在左側分頁，點選「版面配置」

step 6

調整最小高度。(沒有標準答案的數值，可依據實際排版位置做調整，我會以實際的畫面調整最合適數值

三、設定區塊背景圖示

step 1

點選最外框的「六個小點」

step 2

在圖片，選擇素材背景照片

step 3

調整位置，以實際的位置來停整 X Y 數值

step 4

調整是否重覆，選擇「不重複」

下圖就是網站素材設定完成後的樣貌，最後再記得將文案加上即可。

形象網站設計

馬上看看溫研的網站設計

補充：如何將頁面預設成首頁？

將首頁製作完成後，可以將它設定為預設首頁，這樣讀者一進你的網站，就能優先看見你所設定的首頁，所以需要到 WordPress 後台：

step 1

點選「設定」

step 2

再點選子選單的「閱讀」

step 3

在網站首頁顯示內容，點選「靜態頁面」

step 4

選擇所製作的頁面名稱。

Elementor 價格方案/設計比較，一定要付費升級嗎？

前面有提到，不使用付費版本就能製作非常完整的網站設計，那如果想要升級會差在哪些功能呢？

Elementor 方案介紹

看更多 Elementor 價格方案

小作業

在開始製作頁面前，記得要先將 Elementor 的頁面全域樣式設定完成，並延續上一篇已經製作完的首頁「頁首」及「頁尾」，繼續將首頁的「頁面」製作完成。

接下來，換你跟著以下步驟，實際完成你網站的首頁設計：

1. 下載網站頁面設計的素材圖
2. 將素材圖命名 > 壓縮 > 上傳媒體庫
3. 新增網站頁面框線的欄位數量
4. 將 Elementor 小工具拖曳至欄位裡
5. 新增首頁所需的圖片
6. 設定首頁的整體配色
7. 調整區塊內及區塊間的距離
8. 加上材質，讓網站更有設計感
9. 最後記得將設計好的頁面設定成首頁

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

Winnie

我是一位喜歡隱藏在一個空間，慢慢專研設計的女孩。
努力用文字表達我的設計經驗，分享設計的點點滴滴。

預約服務：https://line.me/R/ti/p/@839vkftr