WordPress Elementor|透明黏貼導覽列設計

“ 一起做出豐富多變的導覽列設計吧~✨ ”

在 Elementor 這個視覺化編輯器裡,除了頁面內容可以很方便的編輯外
就連「導覽列」的版型樣式也可以自己設計,做出非常多的變化~~~

不過內建的Header(導覽列)版型,雖然有辦法做到 fixed 在上方的樣式
但若是設計上要先以「透明背景」的設計出現,滾動一定的位置後再「黏
貼在上方」這個形式,就需要搭配輔助的插件—
Sticky Header Effects for Elementor來製作唷 😉

✨今天就來帶大家做出透明,又可以滾動黏貼定位的導覽列✨
*在這之前,你需要有Elementor Pro,才能夠使用這個插件唷

  • Step1:安裝外掛

找到 Sticky Header Effects for Elementor ,安裝並啟用

  • Step2:新建 Header 版型

到 Templates > ThemeBulider > 新增一個 Header 的版型

 

  • Step3:設計導覽列樣式

接著就可以開始規劃導覽列樣式。
這邊範例試想做成透明背景的,讓導覽列可以蓋在首頁的深色首圖上
因此字及Logo會以白色設計為主~

製作樣式:

模擬深色背景效果:

  • Step4:製作 Sticky Header

這時點選此區塊,到「進階」裡面就會發現多出了
Sticky Header 的選項,將 Enable 打開

  • Step5:

將下面的 Scroll Distance、Transparent Header、Header Background 都打開
這邊都可以依照自己的設計做數值的調整唷 🥳

  • Step6:調整外距 (margin)

因為要讓導覽列覆蓋在背景上,所以我們在下外距這邊要加上負的數值
這個數值可以以導覽列的高度做基準哦 😊

到這邊為止,基本的設定都已經調整好囉!

  • Step7:Display Conditions

按下更新後,可以選擇要在哪些地方出現這個導覽列設計。

⭐️ 大功告成

接下來可以到指定的頁面,看看效果是否有出來了~效果如下:

在未滑動時,透明導覽列會蓋住首圖

滑動 60px 時,導覽列會固定在上方,並出現背景

以上就是 Elementor 透明黏貼導覽列的教學 😊
對於一些想做更多變化的人來說,這個形式或許可以達到你想要的效果喔💪🏻~

以上是哈瑞先生為大家寫的教學 👏
如果還有不清楚的地方,也歡迎留言提問唷!

我們也會盡快解決大家的需求~

如果你喜歡我的教學,歡迎幫哈瑞先生玩行銷按讚
跟在下面留言回饋,也可以分享給你身邊需要的朋友唷!