Wordpress

Hello Elementor 教學:安裝設定與頁首頁尾搭配

多數人挑佈景主題,想的是功能夠不夠齊全:內建版型多不多、頁首頁尾要不要自己動手弄、後台設定夠不夠豐富。但如果目標是用 Elementor 這套視覺化編輯器蓋網站,Elementor 官方自己推薦、全球裝機數已經破百萬的佈景主題,反而是一個幾乎什麼都沒有的空白主題,連自己的頁首頁尾都不做。

這不是沒開發完,是刻意設計成這樣。一般佈景主題自己帶一整套標題大小、間距、頁首頁尾的樣式,跟你在 Elementor 裡蓋出來的東西疊在一起很容易打架,字級跑掉、留白對不齊都是常見狀況。把這些拿掉,Elementor 才有一張乾淨的畫布可以蓋。Hello Elementor 就是這個主題,由 Elementor 團隊自己開發、完全免費,裝機數已經超過一百萬。選錯搭配的主題,這些問題得慢慢排查;選對了,可以直接省下這段麻煩。

先從 Hello Elementor 是什麼講起,再拆到怎麼安裝、裝好之後該先看過哪些設定,以及怎麼搭配 Elementor Theme Builder 把頁首頁尾做起來。

Hello Elementor 是什麼?

Hello Elementor 是 Elementor 團隊自己開發、放進 WordPress.org 官方佈景主題目錄的免費開源主題。它的定位很單純,專門給用 Elementor 編輯器蓋網站的人當一張空白畫布,除了瀏覽器相容性需要的基本重設樣式,幾乎不帶任何自己的設計。

它有幾個具體、查得到的事實。第一,官方自己開發,代表它跟 Elementor 編輯器的每一次版本更新永遠同步,相容性風險是所有可搭配主題裡最低的一類。第二,完全免費、開放原始碼,不用額外付費就能下載使用。第三是裝機數,根據 WordPress.org 官方主題目錄與 Elementor 官方公布的數字,目前裝機數已經超過一百萬,WordPress.org 上的評價落在 4.2 星。第四,支援 71 種語言,也內建由右至左語言(像阿拉伯文、希伯來文)的排版支援,不用另外處理。

Hello Elementor 的四個核心事實:Elementor 官方團隊開發、完全免費開源、裝機數破一百萬、支援 71 種語言
Hello Elementor 是 Elementor 官方開發的免費空白主題,四個核心事實一次看懂。

要注意的是,Hello Elementor 本身只是佈景主題,不是頁面編輯器。真正把內容、版面蓋出來的工作,還是要靠另外安裝的 Elementor 編輯器外掛完成,兩者是分開的兩個東西,只是設計成天生互補。知道它是什麼之後,更值得搞懂的是為什麼要把一個主題做得這麼空。

為什麼「幾乎空白」才是 Hello Elementor 跟 Elementor 最搭的原因

前面提到的樣式衝突,值得拆開來看清楚機制。一般佈景主題為了讓使用者一裝上就能用,會內建一整套標題大小、間距、按鈕樣式、頁首頁尾排版的 CSS。這套樣式原本是為了方便,但一旦你改用 Elementor 編輯器重新排版,問題就跟著跑出來。Elementor 有自己的一套樣式系統,跟主題原本內建的樣式疊在一起,常常出現同一個標題被套用兩層字級、按鈕邊界跟主題預設對不上、頁首在不同瀏覽器寬度下位置跑掉這類狀況。遇到這種情形,你得一項項排查,搞清楚是主題的 CSS 還是 Elementor 的設定在搶著生效,才能把畫面調回原本想要的樣子。

Hello Elementor 的做法,是從源頭把這個問題拿掉,讓主題幾乎不帶自己的樣式,好讓 Elementor 編輯器畫出來的就是最後看到的樣子,不用再猜是誰的設定在作怪。

一般佈景主題自帶樣式會和 Elementor 疊成兩層互相打架,Hello 幾乎不帶樣式讓畫布保持乾淨
一般主題的樣式會跟 Elementor 疊在一起打架;Hello 幾乎不帶樣式,Elementor 畫的就是最後結果。

第二層原因是效能。樣式表、腳本檔案越少,瀏覽器要下載、解析的東西就越少,首次繪製自然更快。Elementor 官方把載入速度直接列為 Hello Elementor 的主打賣點之一,對用來承接廣告流量、講求載入速度的到達頁尤其有感。再加上這個主題由官方自己開發,也是官方測試每個新版 Elementor 編輯器時採用的預設主題,相容性問題天生比一般主題少一截。空白反而成了它的優勢,這正是為什麼它會被官方視為跟 Elementor 最搭的組合。

Hello Elementor 怎麼安裝與啟用?

進入實際操作,安裝這一步不難,不過有一個常讓新手誤會的地方,值得先說在前面。

從 WordPress 後台安裝 Hello Elementor,兩條路都通

最常用的路徑是直接從後台搜尋安裝。登入 WordPress 後台,依序點「外觀」、「佈景主題」、「新增佈景主題」,在搜尋框輸入「Hello Elementor」,找到之後點「安裝」,安裝完成按鈕會變成「啟用」,點下去就完成了。

在 WordPress 後台佈景主題搜尋 Hello Elementor,找到官方主題卡片後點安裝就能裝好
後台「外觀 → 佈景主題 → 新增」搜尋 Hello Elementor,找到後點卡片上的「安裝」即可。

另一條路是先到 WordPress.org 官方佈景主題目錄下載 Hello Elementor 的 zip 檔案,回到後台「新增佈景主題」頁面點「上傳佈景主題」,選擇剛下載的 zip 檔案上傳安裝。這條路通常用在伺服器連不到 WordPress.org、或想先在本機保留一份安裝檔的情況,多數人直接用後台搜尋安裝就夠了。

只裝主題還不算完整的起手式。Hello Elementor 只是佈景主題,真正拖拉排版還是要靠 Elementor 編輯器這個外掛,兩者要一起裝好、一起啟用,才能開始設計。

啟用 Hello Elementor 後畫面「空白」,是正常現象

啟用 Hello Elementor 之後,打開首頁很可能會嚇一跳。畫面幾乎什麼都沒有,只剩最陽春的文字排版,連基本的顏色跟間距都沒有。這不是安裝失敗,也不是哪個步驟漏做,Elementor 官方自己也明講,啟用後看起來空白正是預期中的樣子。

會這樣是因為前面講過的設計邏輯,這個主題本來就不打算自己輸出畫面,所有版面都留給你之後用 Elementor 編輯器去蓋。看到空白畫面時,先別急著重新安裝或換主題,下一步是打開想設計的頁面,點「用 Elementor 編輯」開始排版,畫面才會真正有內容。

啟用 Hello Elementor 後前台幾乎空白,用 Elementor 排版後才會有頁首、版面與頁尾
啟用後看到空白別緊張,那是正常的;用 Elementor 排版後畫面才會真正有內容。

裝好之後,這幾項 Hello 主題設定值得先看過

安裝並啟用 Hello Elementor 之後,後台側邊欄會多出一個「Hello」選單,點進去的「Settings」頁面分成三個分頁,值得花幾分鐘看過,尤其是第二個分頁,直接關係到接下來要不要搭配 Elementor Theme Builder。

Hello 設定三個分頁的重點開關,第二個分頁的停用主題頁首頁尾與停用頁面標題最關鍵
Hello 設定分成三個分頁,最該留意第二個分頁的「停用主題頁首頁尾」與「停用頁面標題」。

第一個分頁是「SEO 與無障礙」。這裡面有兩個開關。一個是網頁描述的 meta 標籤,主題預設會自動輸出這個標籤,幫助搜尋引擎跟社群平台判斷網頁的內容摘要;如果你之後另外裝了 SEO 外掛(例如常見的 Yoast),它多半也會自己輸出同一個標籤,兩邊同時存在會變成重複標籤,這時候建議把主題內建的這個關掉,讓 SEO 外掛統一管理就好。另一個是「跳到主要內容」連結,是給用鍵盤操作的訪客快速跳過頁首選單、直接到主要內容的無障礙功能,只有用鍵盤瀏覽的訪客才看得到,一般不需要關掉。

第二個分頁是「結構與版面」,這裡的兩個開關最重要。一個是「停用主題頁首頁尾」,如果之後決定改用 Elementor Theme Builder 自己重新設計整套頁首頁尾,打開這個開關就能讓主題內建的那組頁首頁尾整個消失,避免畫面上同時出現兩組;另一個是「停用頁面標題」,因為 Hello 預設會把每篇文章或頁面的標題自動輸出成一個 H1,如果之後在 Elementor 編輯器裡自己又加了一個標題元件當作 H1,同一個頁面就會出現兩個 H1,對搜尋引擎判讀頁面結構不利,這時候就該把這個選項關掉,只留 Elementor 裡自己加的那一個 H1。

第三個分頁是「CSS 與樣式控制」,可以進一步關掉主題的重設樣式表或基礎樣式表,把主題壓到更輕。這幾個選項比較進階,不確定會不會影響畫面顯示的話,新手階段先維持預設值就好,等站台架構穩定之後再視需要調整。

搭配 Elementor Theme Builder,做出全站共用的頁首頁尾

前一節提到的「停用主題頁首頁尾」開關,只有在你打算自己重新設計一套頁首頁尾時才用得上,而負責做這件事的工具就是 Elementor Theme Builder。這一節只講最基礎的起手動線,讓頁首頁尾能先動起來;Theme Builder 底下還有單篇文章版面、分類列表頁、顯示條件這些更細的操作,留給更深入的專題慢慢拆解。

要用 Theme Builder,前提是要有 Elementor Pro,免費版 Elementor 目前對頁首頁尾的支援還很有限。好消息是不用一次買到最貴的方案,官方最入門的單站方案就已經內含 Theme Builder,可以編輯頁首、頁尾跟其他版面區塊,不是只有進階方案才有這個功能。

安裝好 Elementor Pro 之後,到 WordPress 後台找「Elementor」底下的「Theme Builder」,會看到 Header、Footer 這類卡片。點 Header 卡片新增一個模板,進入 Elementor 編輯器,把 Logo、選單這些元素排好;排版完成按下發佈時,系統會跳出視窗詢問要套用在哪些頁面,一般選「整個網站」,就能讓這組頁首套用到全站每一頁。Footer 的流程完全一樣,差別只在內容通常會放版權文字、社群連結、次要選單這類資訊。

在 Elementor Theme Builder 點左側頁首(Header)新增模板,做出全站共用的頁首頁尾
到 Elementor 的 Theme Builder,點左側「頁首」新增模板,就能建立全站共用的頁首。

兩組都做完之後,記得回到前一節提到的 Hello 設定,把「停用主題頁首頁尾」打開,避免主題內建的頁首頁尾跟你剛做好的這組同時出現在頁面上。

Hello Elementor 與 Astra 這類輕量主題,怎麼選?

Hello Elementor 不是唯一的輕量選項,國際上另一個常被拿來一起討論的是 Astra。兩者都主打輕量、都有免費版可以先用,不過背後的邏輯剛好相反,適合的人也不太一樣。

Astra 走的是「主題自己先把基本功能準備好」的路線。後台就有頁首頁尾、部落格列表版面、常見樣式的設定選項可以直接調,不用另外靠頁面編輯器組出來,而且不綁定一定要搭配哪套頁面編輯器,搭 Elementor 用、搭 WordPress 內建的區塊編輯器用都可以。好處是就算之後想換掉頁面編輯器,主題本身的結構通常還在,搬遷的負擔比較小。

Hello Elementor 走的是完全相反的邏輯,主題自己幾乎不管事,所有版面,包括頁首、頁尾、單篇文章、列表頁,全部收進 Elementor Theme Builder 裡管理。好處是整個網站的設計語言統一收在同一套編輯器裡調整,不用在主題後台跟頁面編輯器之間來回切換;代價是幾乎所有版面都跟 Elementor 綁在一起,之後如果真的想換掉 Elementor,這些版面得重新用別的工具做一遍。

Hello Elementor 把版面全收進 Elementor,Astra 主題後台自帶功能不綁編輯器,兩種邏輯相反
Hello 把設計全收進 Elementor,Astra 主題後台自帶功能且不綁編輯器,看你想把多少工作交給 Elementor。

實務上可以用一個簡單的判斷點決定,如果打算把設計工作完全收進 Elementor 裡做到底,也不排斥多花點時間用 Theme Builder 組出頁首頁尾,Hello 這種空白主題會更乾淨;如果比較想要主題後台就有現成選項可以微調、也想替日後可能更換編輯器留一點彈性,Astra 這類內建功能較多的輕量主題是另一個合理方向。兩者都是國際上通用、有免費版可以先試用的選項,沒有絕對誰比較好,差別只在你想把多少設計工作收進 Elementor 這一套系統裡。

把 Hello Elementor 裝起來、看過那幾個基礎設定開關,再用 Theme Builder 把第一組頁首頁尾建起來,等於幫 Elementor 準備好一張真正乾淨的畫布,接下來不管想設計什麼版面,都不用再擔心主題本身的樣式跳出來搗亂。頁首頁尾能不能依不同頁面切換不同版本、單篇文章版面怎麼統一套版,這些更細的操作,等這張畫布準備好之後,再一步步往下練就好。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

Hello Elementor 需要付費才能使用嗎?

不需要,Hello Elementor 是 Elementor 團隊開發、放在 WordPress.org 官方佈景主題目錄的免費開源主題,下載安裝後就能直接使用。

為什麼主題自帶樣式會跟 Elementor 打架?

因為一般佈景主題內建整套標題大小、間距、按鈕、頁首頁尾的 CSS 樣式,改用 Elementor 排版後會跟這套樣式疊在一起,常出現同一標題套兩層字級、按鈕邊界對不上、頁首在不同螢幕寬度下跑位這類狀況。

Hello Elementor 啟用後畫面空白正常嗎?

正常,這是 Hello Elementor 預期中的設計,不是安裝失敗,因為它本身幾乎不輸出畫面,所有版面都留給之後用 Elementor 編輯器去蓋。

為什麼要關掉 Hello 主題自動輸出的頁面標題?

因為 Hello 預設會把每篇文章或頁面標題自動輸出為一個 H1,如果之後在 Elementor 編輯器裡又加了一個當作 H1 的標題元件,同一頁面就會出現兩個 H1,不利於搜尋引擎判讀頁面結構,因此建議關閉,只保留 Elementor 的那一個。

Theme Builder 一定要付費才能用嗎?

要用 Theme Builder 的前提是要有 Elementor Pro,但不用一次買最貴的方案,Elementor 最入門的單站方案就已內含 Theme Builder 功能,可以用它編輯頁首、頁尾和其他版面區塊。

資料來源
  1. Hello Elementor – WordPress 官方佈景主題目錄頁 — WordPress.org
  2. Hello: The best & fastest theme for WordPress — Elementor