頁首溫研創意品牌 LOGO
Elementor版型設計:WordPress 頁面編輯器模板製作教學封面圖

【網站設計教學#7】Elementor版型設計:WordPress 頁面編輯器模板製作教學

前言

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

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

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

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

溫研創意網站設計作品

常見的區塊設計(以 Elementor 製作)

最常被詢問一樣都是使用 Elementor 頁面編輯器來製作網站,為什麽在區塊上總是少了一點設計感,而我自己在設計網站時,其實也是善用幾個區塊來運用。

在開始之前,如果你忘記如何開啟頁面編輯器,可以回到上一篇,點選「更多 Elementor 基礎教學」:

Elementor 教學:實際帶你完成 WordPress 網站設計封面圖

Elementor 教學
實際帶你完成 WordPress 網站設計

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

樣式一:圖片背景

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「1」欄位數

二、拖曳小工具

step 1

拖曳「標題、內容編輯器、按鈕」至欄位內

三、調整工具的間距及位置

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

在文字對齊,點選置中

step 4

點選「版面配置」

step 5

在高度,調整「最小高度」,並調整數值

step 6

在欄位置,調整「中央」

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

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

點選「圖片」

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

step 6

在位置選擇「置中」

step 7

再重複選擇「不重複」

step 8

在 Display Size 選擇「覆蓋全區」

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

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#14181BC9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在不透明調整「數值0.77」(依據選擇的圖片提整最適合的透明度)

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

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

在標題顏色,點選「色票」圖示,並輸入色票號碼「#000000」

step 4

在文字色彩,點選「色票」圖示,並輸入色票號碼「#000000」

樣式二:圖片風格

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「2」欄位數

二、拖曳小工具

step 1

拖曳「圖片、標題、內容編輯器、按鈕」至欄位內

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

step 1

點選「六個小點」

step 2

點選「版面配置」分頁

step 3

在垂直對齊,選擇「中央」

step 4

點選「進階」分頁

step 5

在邊框間距,調整上下距離「60px」

四、在「內容」新增圖片

step 1

點選右側圖片

step 2

點選「內容」分頁

step 3

在選取圖片,點選圖片

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

五、在「樣式」設定背景色

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

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

step 1

點選右側按鈕工具

step 2

點選「進階」分頁

step 3

在邊界,調整上方的距離「30px」

主題分類/服務項目

樣式一:垂直卡片

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

拖曳「圖示方框」小工具至欄位內

三、增加背景及陰影

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

在「進階」分頁

step 3

調整欄位間距數值。邊界:「0、12、0、12」px,邊框距離:「30」px

樣式二:水平卡片

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「2」欄位數

二、拖曳欄位小工具

step 1

拖曳「內部段」小工具。因為在同一個欄位裡有兩個元素,所以需要新增的兩個欄位

三、拖曳小工具

step 1

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

四、調整標題的大小

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在 HTML 標籤,選擇「H3」

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

step 1

點選「欄位」圖示

step 2

點選「版面配置」分頁

step 3

在欄寬度,輸入數值「30」%

step 4

點選「六個小點」

step 5

點選「版面配置」分頁

step 6

在垂直對齊,選擇「中央」

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

在「進階」分頁

step 3

調整欄位間距數值。邊界:「0、12、0、12」px,邊框距離:「30」px

樣式三:中間分支

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳欄位小工具

step 1

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

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

step 1

滑鼠右鍵點選「欄位」圖示

step 2

點選「刪除」。就能將欄位移除了

四、拖曳小工具

step 1

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

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

step 1

點選「六個小點」

step 2

點選「版面配置」分頁

step 3

在垂直對其他人,選擇「中央」

六、在「內容」新增圖片

step 1

點選右側圖片

step 2

點選「內容」分頁

step 3

在選取圖片,點選圖片

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

樣式四:編號卡片

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

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

三、將「標題」改成編號數字

step 1

點選右側「標題」 小工具

step 2

點選「內容」分頁

step 3

在「標題」輸入編號數字

step 4

點選「樣式」分頁

step 5

在文字色彩,點選「色票」圖示,輸入「#D7DCE2」

step 6

在「排版樣式 > 尺寸」,輸入「136 px」就能將字體放大

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

step 1

點選編碼大數字

step 2

點選「進階」分頁

step 3

在位置,選取「絕對」定位

step 4

在 Z-index,輸入「0」。這個步驟可以將數字移至圖示方框的底下

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊框距離:「80、0、80、0」px

文章/作品

樣式一:卡片模式

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

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

三、調整標題的大小

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在 HTML 標籤,選擇「H3」

四、調整最外框背景顏色

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 4

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

在「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「24」px

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

step 1

點選「圖片」工具

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「-24、-24、0、-24」px

step 4

點選「六個小點」

step 5

點選「進階」分頁

step 6

調整欄位間距數值。邊框距離:「60、0、60、0」px

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

step 1

點選右側「按鈕」工具

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「30、0、0、0」px

樣式二:列表模式

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「2」欄位數

二、拖曳欄位小工具

step 1

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

三、拖曳小工具

step 1

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

四、調整標題的字級大小

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在 HTML 標籤,選擇「H3」

五、調整欄位背景顏色

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

點選「六個小點」

step 7

在背景類型,點選「筆刷」樣式

step 8

在色彩,點選「色票」圖示

step 9

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「24」px

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

step 1

點選「六個點」欄位圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「24」px

九、調整圖片與欄位之間距離

step 1

點選左圖最大張的「圖片」工具

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「-24、-24、0、-24」px

step 4

點選「六個小點」

step 5

點選「版面配置」分頁

step 6

在欄間距,選擇「沒有距離」

step 7

點選「欄位」圖示

step 8

在「進階」分頁

step 9

調整欄位間距數值。邊框距離:「12」px

十、在「內容」新增圖片

step 1

點選右側圖片

step 2

點選「內容」分頁

step 3

在選取圖片,點選圖片

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

十一、將欄位裡的文字上下置中

step 1

點選「 欄位」圖示

step 2

點選「版面配置」分頁

step 3

再垂直對齊,選擇「中央」

聯絡我們

樣式三:地圖位置

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「2」欄位數

二、拖曳欄位小工具

step 1

拖曳「內部段」小工具

三、拖曳小工具

step 1

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

四、將欄位裡的文字上下置中

step 1

點選「六個小點」

step 2

點選「版面配置」分頁

step 3

在垂直對齊,選取「中央」

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在框線圓角半徑,輸入「60」px

step 7

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「六個小點」

step 2

在「進階」分頁

step 3

調整欄位間距數值。邊界:「60、0、60、0」px,邊框距離:「60」px

樣式二:郵件訂閱

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

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

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

step 1

點選「欄位」圖示

step 2

點選「版面配置」分頁

step 3

在欄寬度,輸入「30」%

四、將欄位裡的文字上下置中

step 1

點選「六個小點」

step 2

點選「版面配置」分頁

step 3

在垂直對齊,選取「中央」

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

step 1

點選右側「按鈕」工具

step 2

點選「內容」分頁

step 3

在對齊。選擇「置中」圖示

六、調整欄位背景顏色

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#3A4046」(色票碼僅供參考,可以調整適合自己網站的色調)

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

step 1

點選「六個小點」

step 2

點選「樣式」分頁

step 3

在標題顏色,點選「色票」圖示,並輸入色票號碼「#000000」

step 4

在文字色彩,點選「色票」圖示,並輸入色票號碼「#000000」

八、調整按鈕的顏色

step 1

點選右側「按鈕」工具

step 2

點選「樣式」分頁

step 3

在文字色彩,點選「色票」圖示

step 4

輸入色票號碼「#3A4046」(色票碼僅供參考,可以調整適合自己網站的色調)

step 5

在背景類型,點選「筆刷」圖示

step 6

在色彩,點選「色票」圖示

step 7

輸入色票號碼「#FFFFFF」(色票碼僅供參考,可以調整適合自己網站的色調)

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

step 1

點選「六個小點」

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊框距離:「24」px

在「內容」新增圖片

step 1

點選右側圖片

step 2

點選「內容」分頁

step 3

在選取圖片,點選圖片

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

客戶見證

樣式一:卡片排版

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

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

三、將見證的圖示往上移動

step 1

點選「見證」工具

step 2

點選「內容」分頁

step 3

在圖片位置,選擇「上」

四、將星等調整中央的位置

step 1

點選「見證」工具

step 2

點選「內容」分頁

step 3

在對齊,選擇「置中」圖示

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

六、調整星等的顏色

step 1

點選右側「星點」工具

step 2

點選「樣式」分頁

step 3

在色彩,點選「色票」圖示。輸入色票號碼「#586069」

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「24」px

八、在「內容」新增圖片

step 1

點選右側圖片

step 2

點選「內容」分頁

step 3

在選取圖片,點選圖片

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

樣式二:左右排版

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「2」欄位數

二、拖曳欄位小工具

step 1

拖曳「內部段」小工具。

三、拖曳小工具

step 1

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

四、調整第一欄的寬度

step 1

點選「欄位」圖示

step 2

點選「版面配置」分頁

step 3

在欄寬度,輸入「30」%

五、將圖示置左及置右對齊

step 1

點選右側「圖示」工具

step 2

點選「內容」分頁

step 3

在對齊,點選「置左」圖示

step 4

點選右側「圖示」工具

step 5

在對齊,點選「置右」圖示

六、將圖示更換引號的標誌

step 1

點選右側「圖示」工具

step 2

點選「內容」分頁

step 3

點選圖示按鈕

step 4

搜尋圖示。輸入「Quote」

step 5

選擇上引號的圖示

step 6

點選「插入」

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

step 1

點選右側「圖片」工具

step 2

點選「進階」分頁

step 3

在 Mask 點選「開啟」的功能,形狀預設是圓形,就不需要再做設定

八、將上下引號圖示縮小

step 1

點選右側「圖示」工具

step 2

點選「欄位」圖示

step 3

在尺寸,輸入「24」Px

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

step 1

點選右側「內容編輯器」工具

step 2

點選「內容」分頁

step 3

在編輯器裡,填寫「名稱、服務單位」

調整欄位背景顏色與陰影

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「24」px

將內容上下置中

step 1

點選「六個小點」

step 2

點選「版面配置」分頁

step 3

在垂直對齊,選擇「中央」

複製多個見證

step 1

滑鼠右鍵點選「六個小點」

step 2

點選「版面配置」分頁

step 3

點選「複製」

step 4

點選「貼上」

十四、移動物件

step 1

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

價格方案

樣式一:圖片風格

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

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

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

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「24」px

五、調整標題的大小

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在 HTML 標籤,選擇「H3」

六、編輯圖示列表的文案

step 1

點選右側「圖示列表」工具

step 2

點選「內容」分頁

step 3

在版面配置編輯列表文案

七、調整圖示列表的樣式

step 1

點選右側「圖示列表」工具

step 2

點選「樣式」分頁

step 3

開啟「分隔線」

step 4

樣式選擇「點線」

step 5

調整點線的線條粗細,輸入「2」px

step 6

在色彩,點選「色票」圖示

step 7

輸入色票號碼「#D7DCE2」

八、將物件全部水平置中

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在對齊,選擇「置中」圖示

step 4

點選右側「圖示列表」工具

step 5

點選「樣式」分頁

step 6

在對齊,選擇「置中」圖示

step 7

點選右側「按鈕」工具

step 8

點選「內容」分頁

step 9

在對齊,選擇「置中」圖示

九、在「內容」新增圖片

step 1

點選右側圖片

step 2

點選「內容」分頁

step 3

在選取圖片,點選圖片

step 4

在媒體庫裡,選擇一張需要的圖片

step 5

點選「選取」

樣式二:金額風格

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「3」欄位數

二、拖曳小工具

step 1

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

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

step 1

點選右側「按鈕」工具

step 2

在背景類型,點選「筆刷」圖示

step 3

在色彩,點選「色票」圖示,並輸入色票號碼「#586069」

step 4

在框線圓角半徑,輸入數值「50」px

step 5

在方框陰影,點選「鉛筆」圖示,將陰影調成透明度

step 6

調整欄位間距數值。邊框距離:「8」px

四、設定金額,並且將數字放大

step 1

點選右側「內容編輯器」工具

step 2

點選「內容」分頁

step 3

調整「標題1」

step 4

輸入金額「$000」

五、編輯圖示列表的文案

step 1

點選右側「圖示列表」工具

step 2

點選「內容」分頁

step 3

在版面配置編輯列表文案

六、調整圖示列表的樣式

step 1

點選右側「圖示列表」工具

step 2

點選「樣式」分頁

step 3

開啟「分隔線」

step 4

樣式選擇「點線」

step 5

調整點線的線條粗細,輸入「2」px

step 6

在色彩,點選「色票」圖示

step 7

輸入色票號碼「#D7DCE2」

七、將物件全部水平置中

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在對齊,選擇「置中」圖示

step 4

點選右側「圖示列表」工具

step 5

點選「樣式」分頁

step 6

在對齊,選擇「置中」圖示

step 7

點選右側「按鈕」工具

step 8

點選「內容」分頁

step 9

在對齊,選擇「置中」圖示

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「60、24、60、24」px

十、修改標籤的文案

step 1

點選右側「按鈕」工具

step 2

點選「內容」分頁

step 3

在文字,輸入「方案一」

常見問題

樣式一:隱藏樣式

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「1」欄位數

二、拖曳小工具

step 1

拖曳「收合容器」小工具

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

step 1

點選右側「收合容器」工具

step 2

點選「內容」分頁

step 3

在圖示,點選圖示按鈕

step 4

選擇想要更改的圖示

step 5

點選「匯入」

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

step 1

點選右側「收合容器」工具

step 2

點選「樣式」分頁

step 3

在對其,點選「置右」圖示

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

step 1

點選右側「收合容器」工具

step 2

點選「樣式」分頁

step 3

在標題,點選背景「色票」圖示,並輸入色票號碼「#D7DCE2」

step 4

在內容,點選背景「色票」圖示,並輸入色票號碼「#F5F6F9」

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

step 1

點選右側「收合容器」工具

step 2

點選「樣式」分頁

step 3

調整框線寬度,輸入「2」px

step 4

在框線色彩,點選背景「色票」圖示,並輸入色票號碼「#FFFFFF」

樣式二:展開樣式

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

一、新增欄位

step 1

點選「+」新增

step 2

選擇「1」欄位數

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

step 1

拖曳「內部段」小工具。

step 2

滑鼠右鍵點選「欄位」圖示

step 3

點選「刪除」

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

step 1

點選右側「圖示」工具

step 2

搜尋圖示。輸入「Quest」

step 3

選擇問題圖示

step 4

點選「插入」

四、調整圖示的大小

step 1

點選右側「圖示」工具

step 2

點選「樣式」分頁

step 3

在尺寸,輸入「50」px

五、調整標題的大小

step 1

點選右側「標題」工具

step 2

點選「內容」分頁

step 3

在 HTML 標籤,選擇「H3」

六、調整圖示欄位的寬度大小

step 1

點選「欄位」圖示

step 2

點選「版面配置」分頁

step 3

在欄寬度,輸入「6」%

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

step 1

點選「六個小點」

step 2

點選「版面配置」分頁

step 3

在垂直對其他人,選擇「中央」

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼「#F5F6F9」(色票碼僅供參考,可以調整適合自己網站的色調)

step 6

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整數值:色彩「#58606933」,模糊「31」

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位間距數值。邊界:「12」px,邊框距離:「24」px

如何使用 Elementor 區塊模板?

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

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

步驟一:匯入模板

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

step 1

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

step 2

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

step 3

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

step 4

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

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

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

step 1

在「區塊」分頁

step 2

選擇需要的模板「主題」

step 3

點選「插入」

下圖為插入的模板範例:

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

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

步驟二:全域標題顏色

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

如果你還沒有網站品牌的配色,可以點選下方按鈕閱讀網站配色教學:

網站配色教學,不用工具也能找到品牌色的技巧封面圖

網站配色教學
不用工具也能找到品牌色的技巧

step 1

點選模板 Elementor 功能選單

step 2

點選「網站設定」

step 3

點選「排版樣式」

step 4

調整 H1~H6 的文字顏色

步驟三:全域按鈕

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

step 1

點選模板 Elementor 功能選單

step 2

點選「網站設定」

step 3

點選「按鈕」

step 4

在色彩,點選「色票」圖示,調整顏色

step 5

如果想要調整樣式,也能在框線圓角半徑,輸入「50」px。

步驟四:樣式修改

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

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

一、底色

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在背景類型,點選「筆刷」樣式

step 4

在色彩,點選「色票」圖示

step 5

輸入色票號碼

二、邊框

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 31

在色彩,點選「色票」圖示

step 4

輸入色票號碼

三、陰影

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在「框線 > 方框隱影」,點選「鉛筆」圖示。調整陰影的數值及顏色

四、圓角

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

step 1

點選「欄位」圖示

step 2

點選「樣式」分頁

step 3

在框線圓角半徑,輸入數值

五、間距

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

step 1

點選「欄位」圖示

step 2

點選「進階」分頁

step 3

調整欄位「邊界」與「邊框距離」的數值。

結論:一杯咖啡,送你模板

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

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

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

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

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

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

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

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

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top