Elementor PRO 教學 (三) – Header Templates 建立步驟與操作說明

Elementor Header Templates 建立步驟教學 內容綱要:

Header TemplatesElementor 一個比較實用的功能,通常應用在想要客製化網站頁首選單的部分,比如想要改變網站 Logo 位置、加入網站標語、新增社交連結圖示、增加站內搜尋框區域等,讓網站不會再受限於佈景主題樣式,可以有更多的變化。

另外一提, Header Templates 是屬於比較進階的網站架設操作方式,雖然說可自訂的自由度很高,但相對的也需要建立網站的操作人員具有一定程度的網站專業架設知識,尤其在當前智慧型手機滿街跑的趨勢下,使用客製化的方式建立網站頁首也需注意到手機版網站的呈現方式,這一點必須要跟大家做個提醒。

Elementor Page Builder 外掛下載點:https://wordpress.org/plugins/elementor/

Elementor 官方網站:https://elementor.com/

Elementor Saved Templates 說明文件:https://docs.elementor.com/article/320-templates

• 使用 Elementor 建立網站頁首區域

第一步:點選 Templates->Saved Templates

Header Templates

第二步:在標示的位置內按下新增。

Header Templates

第三步:版型種類選擇頂部,替版型命名後按下建立版型。

Header Templates

第四步:點擊紅框中的 + 符號,建立一個區域。

Header Templates

第五步:選擇區域欄位數量。

Header Templates

第六步:點選外框標籤圖示,這個位置是設定最外層區塊的樣式。

Header Templates

第七步:按下佈局->拉神段自由選擇->最小高度依據個人需求調整。

Header Templates

第八步:按下樣式->點擊背景->一般->選擇喜愛的背景顏色->這時候攔的背景就呈現出設定好的顏色。

Header Templates

第九步:將 Menu 小工具選單拖曳到欄位中。

Header Templates

第十步:點擊內容->選擇選單名稱->選擇後攔內就會出現該選單設定的連結。詳細選單小工具設定方式,可以參考此篇文章:Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學

Header Templates

第十一步:按下樣式->Top Level Item->Hover->文字及背景顏色選擇不同的色塊,在滑鼠游標移動到選單文字上時,將會有變色的效果。

Header Templates

第十二步:設定完成後按下發佈。

Header Templates

第十三步:選擇此頁首版型要在網站中哪些頁面呈現,下圖所列出的條件第一、二、四項都是讓整個網站套用此頁首,第三項是只在 Woocommerce 相關頁面套用。

Header Templates

 

結語:

Elementor 頁首模板在 AstraOcaen WP 這兩個主題上,只要發布後就會自動覆蓋掉主題原本的頁首樣式,這是鵠學苑網站開發人員實測後的結果,但如果是使用別種主題做搭配,有可能會導致錯誤或者顯示無效,因此在使用網站頁首 Templates 前建議先將網站備份,或者使用測試站來製作,這一點特別提醒大家。

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Elementor 相關教學文章:

網站架設知識推薦閱讀:

Site Kit for WordPress – Goolge 官方服務整合外掛正式上線

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

Google 優先索引行動版內容 將於一年內對所有網站實施

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top