
重點整理
本文是 Elementor 小工具入門:示範新增區段與欄位,再把標題、圖片、影片小工具拖進頁面,並在左側面板調整 HTML 標籤、尺寸與樣式。提醒:每頁的 h1 標題只用一次。
Elementor 小工具教學 在這篇文章中將說明如何使用 Elementor 為網頁加入標題、圖片以及影片,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget(小工具),只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,與 WordPress 原本只能輸入程式碼的編輯器相比,Elementor 在架設網站的速度上是非常有效率的。
如果你懂一些網頁程式碼,就會知道要修改網頁元素樣式,必須要寫入 CSS 才能控制位置、顏色等外觀,但使用 Elementor 小工具只需要在視覺化編輯器上提供的選項中做簡易操作,就能達到修改網頁樣式的目的。另外建議可以在自己的網站上先安裝 Elementor ,照著本文教學操作會更快上手喔!
使用 Elementor 加入網頁標題
第一步:以 Elementor 開啟頁面後,在畫面中央按下圖標,新增區域

第二步:選擇需要的架構,按照圖形比例點選後插入即可。

第三步:在畫面右側網頁編輯區域就會出現藍框,代表已經加入單一欄位的區塊。

第四步:從左邊工具欄拖拉標題圖樣到剛剛新增的藍色框區域裡。

第五步:會如果希望此標題可以套用既定的主題格式,可以選擇 HTML 標籤讓此小工具有相同屬性,如果對 HTML 沒有概念,在一般網頁編輯時選擇預設值即可。

第六步:在左邊工具欄輸入標題、尺寸(小提醒:h1標籤每頁僅使用一次)。

第七步:可在左側工具欄樣式裡調整所需要的樣式,諸如顏色、大小等,因為介面是中文,在此就不多做說明。


Elementor 圖片、影音小工具操作說明
第一步:和標題一樣從左側工具欄拖拉出圖片小工具。

第二步:像畫面這樣,突然出現大圖像也不要驚慌,可以在樣式裡調整大小。

第三步:點選左側工具列上的選擇圖片欄位。

第四步:就會跳出媒體庫上傳圖片的畫面。

第五步:上傳後按右下角插入媒體的按鈕。

第六步:在樣式裡拉可以使用拉桿調整圖片大小。
第七步:加入影音的做法與圖片相同。

第八步:特別要注意的是影音必須要選擇正確的來源,以網址加入影片會是比較好的做法。

第九步:若要關閉影音播放控制器,要記得開啟自動播放,當然都是可以按照個人想法做調整的,另外在內容設定的地方也可以自己選擇影片開始及結束的時間。

新版 Elementor 的區段與容器有什麼不同?
本文示範的是「區段+欄位」的版面架構。新版 Elementor 的新網站預設改用 容器(Container),以彈性排版取代固定欄位,新增時不再先選欄位比例,而是先選容器的排列方向與結構。
操作邏輯其實相同:先建立外層版面,再把標題、圖片、影片小工具拖進去,在「內容」「樣式」「進階」三個分頁調整。如果你的編輯畫面和截圖不一樣,多半就是容器版面的差異,小工具本身的設定項目大致沒變。
常見問題
Elementor 免費版可以用標題、圖片、影片小工具嗎?
可以。標題、圖片、影片都是 Elementor 免費版內建的基本小工具,安裝外掛後就能直接拖進頁面使用;表單、動態內容等進階小工具才需要付費的 Elementor Pro。
Elementor 標題的 HTML 標籤要選 H1 還是 H2?
每一頁只放一個 H1,通常就是頁面的主標題;頁面中的段落標題依層級使用 H2、H3。若佈景主題已經自動輸出頁面標題當 H1,Elementor 裡的標題就從 H2 開始,避免一頁出現多個 H1。
影片要上傳到媒體庫還是用 YouTube 網址?
建議用 YouTube 或 Vimeo 網址嵌入。影片檔案通常很大,直接上傳會占用主機空間與流量,也會拖慢頁面;用網址嵌入由影音平台負責播放,主機負擔較小。
結語
Elementor 小工具有很多種類,在之後的教學中鵠學苑會由淺入深逐一介紹常用小工具的特色與做法,希望讓想要架設網站的朋友們可以熟練的運用這套網頁編輯外掛,加快網頁編輯效率!
