Elementor 很適合用來客製化網頁設計,因為它的功能實在強大!
不論是套用內建的美觀模板,或是使用內建多種元素功能,它都能輕而易舉建構出獨一無二的網頁,因此受到眾多站長喜愛與推薦。
這一篇教學文章要來教大家,使用 Elementor Pro ,建立出特別的頁首與頁尾,打造出一個客製化網站!
1. Elementor 是什麼?
Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,基本上與所有主題兼容。可參考 Elementor 外掛教學。
你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。
有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..,都將變得更加簡單。
Elementor 有多種功能區塊,是建置網站的好幫手,當你心中簡單構圖完成,接下來只要拖放區塊,並放置在網頁上即可完成設計。
Elementor 有多種區塊模板和網站樣板,點擊按鈕就可套用,再從中進行修改自己喜歡的設計,可節省大量的建置網站時間。
購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 電商外掛,有良好的支援。
並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般的頁面設計,你也能設計客製化的購物網站頁面。
像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等 .. ,如下圖。
方案評論
Elementor 有免費版方案可使用,如果感覺不錯用且有更多設計上的需求,再升級為進階版即可。完整 Elementor Pro 進階教學。
Elementor 進階版,有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。
Elementor 進階版方案,分為個人用、公司用的兩大類型,裡面又有不同的方案,但能使用的功能幾乎都一樣,最大的差別是「 使用的網站數量 」。
如果你只有一個網站會使用,只需購買最低的方案即可,依此類推。
產品定價
Elementor 個人用,起手價格是 $ 59 美元 / 年(約 $1,800 台幣 / 年),算是滿平價的費用,可應用在一個網站上,並享用它的全部功能。
2. 如何製作頁首?
我們先從頁首開始教起,之後再到頁尾!
這一章節是要告訴大家,如何簡單、快速地客製化網站的頁首,讓造型整個煥然一新!
STEP 1. 開啟 Elementor Pro 主題建構器
只要更改網站的頁面外觀,一律都是開啟「使用 Elementor 編輯」中的「主題建構器」,點入後我們就會進入到主題編輯器的後台。
STEP 2. 新增頁首編輯界面
進入主題建構器的後台裡,裡面會有各種頁面的版型(如:頁首、頁尾、文章列表等等)可以編輯,我們在眾多的頁面區塊中,找出「頁首」的造型區塊並新增它,然後就會進入挑選外觀造型的環節。
STEP 3. 挑選頁首樣式
在「區塊」裡,我們挑選出一個喜歡的外觀造型,然後套入使用。
而在挑選造型樣本時,我們可以透過預覽圖知道頁首外觀長怎樣,挑選出一個喜歡的樣式並點擊它,系統就會進行運作,之後就進入到頁面編輯的畫面。
除了挑選樣本外觀這個方式,如果不滿意編輯器裡的樣式,我們可以在「我的版型」,上傳自己喜歡的範本樣式使用。
STEP 4. 編輯頁首
關於頁首的編輯界面,我們可以編輯標題或選項的文字顏色,也能增加圖片美化,調整文字之間的高度與寬度,還可以設定文字的動畫效果。
除此之外,我們可以上下移動頁首在頁面的區塊位置,調整到理想的頁面位置中(一般都置頂在網頁最上方)。
STEP 5. 儲存套用
我們編輯完畢後,就在左下角,選擇「Display Conditions」,之後會進入一個視窗,按下 Add Condition,會出現一個選項,我們選擇「包含(include)」、「整個網頁」,並儲存關閉。
回到前台觀看,頁首就換上我們剛剛設定的造型(如下圖)。
以上是編輯頁首的教學,下一章節我們要談如何編輯頁尾,步驟一樣很簡單!
3. 如何製作頁尾?
其實設定頁尾的步驟跟頁首一模一樣,但我們這邊再詳細說明一次!
STEP 1. 開啟 Elementor Pro 主題建構器
這步驟跟頁首一樣,開啟主題建構器,只要做任何的頁面或是網頁區塊,都是從主題建構器打開,進入後台。
STEP 2. 新增頁尾編輯界面
在多個頁面版型裡,我們選擇頁尾的的造型區塊,這步驟跟上一章節相同,只不過我們要進行頁尾的編輯流程。
STEP 3. 挑選頁尾樣式
在「區塊」裡,我們挑選出一個喜歡的外觀造型,並套用到頁尾;除了挑選樣本外觀這個做法,如果想要造型更具有個人特色,我們可以自行上傳喜歡的樣式。
套用外觀後,接著進行修改頁尾設定的流程!
STEP 4. 編輯頁尾
在頁尾的編輯界面,我們除了編輯頁尾的聯絡資訊內容,可以修改選項的文字顏色,調整文字大小、文字之間的高度與寬度,還能設定文字的動畫效果。
而且我們可以增加許多「社群分享按鈕」,透過它們有效幫助我們宣傳網站!
STEP 5. 儲存套用
這步驟跟上一章節相同,我們編輯完畢後,在左下角選擇「Display Conditions」,會進入一個視窗畫面,按下 Add Condition,會出現一個選項,我們選擇「包含(include)」、「整個網頁」,並儲存關閉。
回到前台觀看,頁尾就換上新的外觀造型(如下圖)。
以上就是頁尾的製作步驟,不論是頁首還是頁尾,只要透過頁面專門的版型就能做出來,這就是 Elementor Pro 的優勢,對於新手的站長來說,不需要學會程式碼,就可以建立出頁面的外觀。
4. 如何移除或更換頁首/頁尾?
既然說到了製作頁首頁尾,當然會有替換或移除版型的時候,假設日後想更換新的樣式,或是將樣式刪除,該怎麼做呢?
替換(取消)樣式 STEP:
我們到主題建構器的後台,裡面會有編輯的介面,我們可以發現左上角有個「綠色標記」,那個是版面使用中的狀態,只需要把綠色標記變成「灰色標記」,讓它變成非使用中的狀態。
再將新的版型設定成綠色標記就完成,頁面就換上新的版型,讓我們來看操作步驟吧!
至於說要如何把「綠色標記」變成「灰色標記」呢?
首先,我們點選要設定的頁面版型,左下角會有一個編輯連結,並點擊它。
進入編輯連結裡面,會有一個欄位項目,它是展示頁面版型的位置(如:整個頁面),我們只要把欄位選項按下「X」取消,再按右下角存檔。
綠色標記就變成灰色標記,代表該版型是「未使用的狀態」,頁面區塊就不會展示在網頁上,這樣就完成了!
之後我們再把想使用的頁面版型進行設定,左上角出現「綠色標記」,代表成功使用了!
刪除樣式 STEP:
如果有不喜歡的頁面版型樣式,想刪除它,該怎麼刪除呢?
我們點選要刪除的頁面版型,在欄位的右邊會有 3 個點的標記,點開會出現編輯選項,裡面有一個叫做「Trash」的垃圾桶圖標,那個就是刪除選項。
點擊刪除後,版型就會永久被移除在編輯介面了!
使用 Elementor Pro 建立客製化頁首頁尾的教學,介紹到這裡!
不曉得看完文章後,有沒有覺得其實很簡單,沒有想像中這麼複雜!如果對於 Elementor Pro 教學 還有興趣的話,可以閱讀相關教學文章,進階學習。
常見問題
我要如何上傳自訂版型?
首先,在 Elementor 版型庫裡右上會有一個上傳的圖標,點選後將自訂範本檔案匯入。
之後在我的版型裡面就會看到上傳的檔案,選擇要用的檔案後,按下插入,最後按下右上的存檔圖標,就換成新的版型樣式。
如何判斷頁面主題是否支援 Elementor?
只要任一種主題有符合 WordPress 開發原則,Elementor 都可以用,所以通常主題商都會在官網或行銷文案上,特別標註「有支援 Elementor」,可以根據這方式選擇。
推薦哪些主題是對 Elementor 有良好支援?
上述有提到,只要符合「WordPress 開發原則」的主題,Elementor 都可以用,但若是選出最為推薦的,我會推薦使用「Astra 主題」。
因為它是多功能輕量級主題,裡面內建許多主風格樣板,可以用來 建造 Blog 、 企業形象網頁 和 購物平台賣場 ,這些多元類型的網站。
可以滿足多數站長的使用需求,若有興趣推薦參考 Astra Theme 教學 。
WordPress 學習資源
學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 3 項實用資源,可有效幫助大家做學習。
資源一:WP 高手架站課(線上課程)
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!
資源二:SEO 排名飆升課(線上課程)
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!
資源三:犬哥數位(專業 WordPress 網頁設計公司)
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!
資源四:更多犬哥教學資源
如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG。