專注於架設企業網站,分享WordPress教學和Elementor教學

如何用Elementor Pro製作網站頁頭導航【視頻】

更新日期:2024-06-15
本系列教學

正版分銷:

90元/1個網站/2年

最先進的WordPress頁面編輯器,能夠快速創建高端的、完美的網站。 適合任何主題,任何頁面,任何設計。
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
黑五優惠前4個月6折, 戳上方按鈕註冊即可自動帶入優惠碼BFCM2024
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com邮箱,注册易通过
遇到問題,聯繫我

使用Elementor pro可以創作出多種多樣的頁頭導航,可以不再局限於主題自帶的導航了。 並且Elmentor Pro的範本庫里提供了幾十款導航範本,一鍵導入就可以直接用起來了,還可安裝Envota elements外掛,裡頭還有十幾款頁頭。

2021年4月更新視頻教學

操作步驟如下:

elementor header 2
  1. 滑鼠放在在「範本」菜單
  2. 點擊theme builder
  3. 點擊添加新範本
  4. 選擇範本類型為header
  5. 輸入範本名稱,譬如header
  6. 點擊「創建範本」按鈕,可進入下圖所示的library頁面:
    1. 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    2. 選擇喜歡的範本,點擊insert按鈕即可導入到範本中;
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 1

如下圖所示,若你創建了多個菜單,且需要更換菜單,可以滑鼠按一下導航元素塊,被選中元素塊周圍有藍色線框,此時,左側面板將會切換為:當前選中的元素塊的操作面板,在面板的layout》menu中選擇你所需的菜單即可。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 33

接下來是保存header範本

  1. 點擊左下角的update按鈕
  2. 在彈出層中點擊add condition
  3. 系統自動出現一個默認條件,表示全站都使用這個header; 你也可以下拉菜單看看條件的構成; 你也可以根據需要創建多個header,不同條件下用不同的header。
  4. 點擊save&close即可
elementor header tutorial 32

此時訪問網站位址或點擊publish按鈕左側的previewelementor編輯器教學-31即可看到導航。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 30

在滾動頁面時,如何將導航固定在頁面頂部

在使用Elementor製作的導航中,選中導航所在的setion,然後在左側操作欄中選中advanced,找到motion effects欄目,將sticky的選項設置為top,則能夠實現:當滾動頁面時,導航將固定黏在頁面的頂部,即跟隨頁面進行滾動。
sticky header elementor

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
黑五優惠前4個月6折, 戳上方按鈕註冊即可自動帶入優惠碼BFCM2024
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com邮箱,注册易通过
遇到問題,聯繫我