Wordpress

Elementor 範本怎麼套用?Kit 匯入教學一次學會

組一個家很少有人從鋸木頭、選五金開始,多半是先逛家具店,看中一組現成的沙發或書櫃搬回家,再依照自己的空間微調擺放的位置、換掉抱枕的顏色。做網站排版的邏輯其實很像,Elementor 範本(Template)就是那組已經做好、只等你搬進來再調整的「現成家具」,不用從間距抓多少、標題配幾號字開始試,而是先插入一個別人設計好的版面,再動手改成自己的樣子。

從零排版最花時間的地方,往往不是想內容,是還沒碰到內容之前,就先耗在間距要留多少、標題字級配幾號、按鈕顏色要不要跟主色一致這些細節上。範本能省下的正是這一段,它把版面結構、字體層級、留白比例都先決定好,剩下要做的只是把示範文字換成自己的內容,再把風格調整到符合網站原本的樣子。懂得挑對範本、用對匯入方式,能讓做一頁網站的時間從幾天縮短到幾小時。

不過範本庫裡其實不只一種東西,插入方式也不只一種,先分清楚才不會挑錯工具。先從範本分成哪幾種講起,再一路拆到套用之後該怎麼改成自己的網站。

Elementor 範本其實分三種,你想套的是哪一種?

打開 Elementor 編輯器,畫面上有個資料夾圖示,點下去就是範本庫(Template Library)的入口,新增頁面時也會看到插入範本的按鈕。範本庫裡放的東西看起來都叫「範本」,實際上分成三種顆粒度完全不同的素材。

Elementor 範本分單頁範本、區塊範本、Template Kit 三種,差別在套用範圍從一段、一頁到整個網站
Elementor 範本分三種,差別不在誰高級,而在動到的範圍:區塊是一段、單頁是一頁、Template Kit 則是整個網站。

第一種是單頁範本,插入後就是一整頁的排版,從上到下都排好了,適合快速生出一頁完整的頁面。第二種是區塊範本,只是頁面裡的一段,像一段見證區塊、一段聯絡表單,插入後要自己組合搭配其他區塊才會變成完整的一頁。第三種是 Template Kit,範圍最大,不只是排版,還包含頁首頁尾、多個互相搭配的頁面,以及全站的配色與字體設定,等於是一整個網站的雛形。

三者的差別在「範圍多大」與「套用之後會動到什麼」,不是誰比誰高級。只想快速補一頁或一段,用單頁範本或區塊範本就夠;想讓整個網站的風格一次到位,才輪到 Template Kit 出場,兩者也可以混著用,這點後面會再說明。先從最輕量的單頁範本、區塊範本開始,看看怎麼插進頁面。

做法一:插入單頁範本或區塊範本,排版兩三步就有雛形

單頁範本和區塊範本是範本庫裡最基本、也最常用的兩種,操作方式幾乎一樣,差別只在插入之後拿到的是一整頁,還是一小段。這條路徑適合的情境很明確:臨時要生一個活動頁、需要一頁單獨的服務介紹、或只是想幫某個頁面補一段聯絡表單,都不必動到整個網站的風格設定。

範本庫的「頁面」和「區塊」兩個分頁,有什麼差異?

編輯畫面裡點開資料夾圖示,範本庫會跳出來,上方分成「頁面」和「區塊」兩個分頁。頁面分頁放的是整頁排版,區塊分頁放的是單一段落,選錯分頁是最常見的困惑,插進去以為會是一整頁,結果只多了一小段,通常就是點錯分頁。挑到喜歡的範本,點選插入,它就會直接進到目前正在編輯的頁面裡,接下來就跟平常操作 Elementor 一樣,可以任意調整每個元件的文字、圖片與樣式。

Elementor 編輯器的版型庫上方分成頁面與區塊兩個分頁,頁面放整頁排版、區塊放單一段落
點編輯器裡的資料夾圖示叫出版型庫,上方「頁面」放整頁範本、「區塊」放單一段落,選錯分頁是最常見的困惑。

範本插入之後就是獨立的一份內容,範本本身之後若又推出更新,已經插入頁面裡的東西不會跟著自動變。這跟頁首頁尾這類歸在主題建構器管理的模板不一樣,那類模板改一次全站都會跟著動;單頁範本和區塊範本則是插入的當下就定型,之後要改,只能自己手動改。

免費版能看到的範本,比 Pro 版少了一大截

免費版和 Pro 版看到的範本庫內容不一樣。Elementor 自己在部落格上提到,免費版能用的只有少數幾個單頁範本,Pro 版才拿得到完整、多頁互相搭配的範本與 Kit。差別不只在數量,很多範本會用到表單、輪播這類進階小工具,這些小工具本身就是 Pro 才有,免費版就算看得到範本縮圖,插進去也可能少了幾個區塊。想知道自己用的版本夠不夠,插入前先看一眼範本說明裡有沒有標示需要 Pro,比事後才發現缺元件省事。

做法二:匯入 Template Kit,讓整個網站風格一次到位

比起單頁範本和區塊範本只處理某一頁或某一段,Template Kit 動的是整個網站。一個 Kit 除了頁面本身,還包含頁首頁尾、彼此搭配好的多個頁面,以及全站的配色、字體、版面寬度這些設定。適合的情境也很明確,全新的網站想快點有雛形,或是想大幅翻新既有網站的整體風格,用 Kit 一次把架構定下來,比逐頁慢慢調整快得多。

Kit Library 能先看預覽,確定喜歡再套用

Kit 的入口在後台的範本管理裡,通常叫「網站範本」或 Kit Library。進去之後可以看到一整排 Kit 的縮圖,點進喜歡的一個,會先進到預覽畫面,還能切換桌機、平板、手機三種畫面分別看效果,確定喜歡再往下套用,不用真的套進網站才知道合不合。

Elementor 的網站範本(Kit Library)列出一整排 Kit 縮圖,可先瀏覽預覽再決定要不要套用
後台的網站範本(Kit Library)列出一整排 Kit 縮圖,點進去能先看預覽、確定喜歡再套用,不必真的套進網站才知道合不合。

套用時可以只挑你要的部分,不必整包吞下去

確定要套用某個 Kit 之後,畫面會列出三個可以分開勾選的範圍:

  1. 範本:包含頁首頁尾與各頁的版型結構。
  2. 內容:Kit 裡實際的頁面、文章這些內容本身。
  3. 網站設定:全站的配色、字體、版面寬度、彈出視窗等全域設定。

不必整包一次匯入,只想借用它的版面結構、不想動到自己已經設好的配色,可以只勾範本、不勾網站設定。如果網站已經有自己的頁首頁尾,匯入畫面通常會提醒有沒有要覆蓋既有的範本,這一步別急著全部按下確定,先看清楚會不會蓋掉已經在用的東西。套用完成後,接下來就是逐頁把示範內容換成自己的,這部分留到後面「改成自己的內容與風格」再細講。

匯入 Elementor Kit 時可分開勾選範本、內容、網站設定三個範圍,只想借版型就別勾網站設定
套用 Kit 前會列出範本、內容、網站設定三個可分開勾選的範圍;既有網站只想借版型,就只勾範本、別勾網站設定。

做法三:從 Envato 這類平台買的 Kit,匯入流程不太一樣

不是所有 Kit 都來自 Elementor 自己的 Kit Library,不少人是在 Envato 這類國際數位資產平台(例如旗下的 ThemeForest 市集)上買現成的 Kit,這種第三方 Kit 的匯入方式跟前面講的內建流程不太一樣。

第三方 Kit 通常需要先安裝一支專用的匯入外掛,才能把買到的壓縮檔讀進 WordPress。大致流程是先確認外掛與伺服器需求都符合,像特定的 Elementor 功能要先啟用、PHP 版本要夠新,安裝對應的匯入外掛後,把下載到的壓縮檔上傳進去,畫面通常會先要求安裝這個 Kit 需要的附加元件,接著才能開始匯入。

匯入的順序也有講究,一般會先匯入全站的樣式設定,把配色字體定下來,再逐一匯入個別範本,而不是一次全部匯完。匯入完成後,這些範本會集中存放在「已儲存的範本」裡,還要自己新增頁面、把範本插進去,不像 Kit Library 那樣選了就直接生出完整頁面。這條路徑比內建 Kit Library 多了幾道手續,但好處是能買到的設計選擇比免費資源多很多。

第三方 Kit 的匯入流程:確認需求、安裝匯入外掛、上傳壓縮檔、裝附加元件、開始匯入,且先匯樣式再匯範本
第三方(如 Envato)Kit 的匯入比內建 Kit Library 多幾道手續:確認需求、裝匯入外掛、上傳壓縮檔、裝附加元件再匯入,順序上先匯全站樣式、再逐一匯範本。

單頁範本、區塊範本、Kit,你的情況該選哪一種?

三條路徑講完,回頭看手上的情況該選哪一個,判斷的關鍵不是哪個功能比較多,而是這次要動的範圍有多大。

情境適合的做法
只要快速生出一頁,像活動頁、單一服務介紹單頁範本
只想補某個段落,像見證區塊、聯絡表單區塊範本
全新網站,想快點有完整雛形Template Kit
既有網站要大幅翻新整體風格Template Kit
既有網站風格要延續,只是缺一頁內容單頁範本或區塊範本,避免用 Kit

最後一種情況特別容易踩雷,網站已經上線,風格也定型了,只是缺一頁內容,這時如果貪方便直接套一整個 Kit,很可能連配色字體都一起被換掉,反而把原本調好的風格弄亂。這種時候寧可花多一點時間,從單頁範本或區塊範本裡挑接近的樣式,自己調整成符合網站原本的樣子。三種範本也不是互斥的,可以先用 Kit 把整體風格定下來,之後個別頁面缺內容,再插入單頁範本或區塊範本補上,不必每次都重新判斷該用哪一種。

範本套進來只是開始,改成自己的內容與風格才是重點

不管走哪一條路徑,插入範本或匯入 Kit 都只是排版工作的起點,不是終點。最常見的失誤是套完範本之後急著發布,網站上還留著範本原本的示範文字、示範圖片,甚至聯絡電話都還是範本作者留的假資料,讀者一眼就能看出這是一個沒改完的範本站,而不是真正經營中的網站。

文字和圖片要先換掉,頁面才不再像範本原本的樣子

逐頁檢查每一段文字,公司名稱、電話、地址、社群連結,這些最容易漏改,尤其是頁尾版權文字和表單收件信箱,因為藏在不起眼的位置,常常整個網站都改完了,才發現這兩處還是範本原本的內容。圖片也要留意版權,範本裡搭配的示範圖片多半只授權用來展示效果,正式上線前要換成自己有權使用的圖片,不確定授權範圍就直接換掉,別心存僥倖。

全域顏色與字型也要跟著調,風格才會一致

如果套用範本或 Kit 時沒有一起勾選「網站設定」,配色字體就不會跟著換進來,這時範本原本設計搭配好的顏色組合,可能跟網站既有的品牌色、字體對不上,版面看起來會有點各自為政。遇到這種情況,回頭到全域設定裡調整顏色和字型,讓範本的版面骨架配上網站原本的風格,而不是逐頁一段一段改顏色。逐頁改不但費工,還很容易漏改到某一頁,讓整個網站的風格兜不起來。

除了手動選範本,AI 也能先幫你規劃整個網站架構

前面講的都是自己動手在範本庫裡一個個挑,最近 Elementor 也提供了另一條路,讓 AI 先幫你把網站規劃好。透過 AI Site Planner,只要用對話的方式描述這個網站要做什麼、賣什麼、給誰看,AI 就會產出一份網站規劃草案,包含建議的頁面架構與線框稿,讓你先看到網站大致的樣子,再進到編輯器裡實際套版與調整內容。

Elementor AI Site Planner 用對話描述專案,就能生成網站的 sitemap 與線框稿草案
Elementor 的 AI Site Planner 讓你用一句話描述專案,就先產出網站的頁面架構與線框稿草案(畫面來源:Elementor 官網)。

跟前面幾種做法的差別在於,範本庫是「找一個現成的成品」,AI 規劃則是「先讓 AI 幫你想清楚這個網站該有哪些頁面、架構怎麼安排」,兩者其實可以搭配,用 AI 先規劃出頁面架構,再用範本或 Kit 把每一頁實際做出來。Elementor 提到,這個網站規劃功能在免費方案就能使用,只是更進階的頁面內建生成功能才需要升級付費方案。想快一步定案網站架構,這是值得留意的新選項。

不管是插入一段區塊、套一整個 Kit,還是先讓 AI 幫你規劃架構,範本真正省下的都是排版的力氣,不是把它變成「自己的網站」這一步。搬回家的家具擺對位置,換上自己喜歡的抱枕,才真的算是這個家的一部分;網站也一樣,套用完成只是排版到位,把內容、風格都改到符合自己網站的樣子,才是真正把範本用對。

資料來源
  1. Elementor Free vs Pro: Which Is Better in 2026? — Elementor
  2. AI Site Planner: generate sitemaps & wireframes in minutes — Elementor