Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO

情境

在前一篇文章Elementor系列之三:針對特定頁面客製化頂部(Header)中,FirstHatch一起孵完成了第一個目標,成功針對首頁建立了客製化的頂部。在這篇文章中,FirstHatch一起孵要再繼續客製化,置換Sticky header的LOGO,達成在頁面下滑後替換為另一個LOGO的目標

使用到的外掛

  1. Elementor
  2. Elementor pro
  3. Sticky header effects for elementor

解決方法

首先,在LOGO的下方新增一個圖片元素作為Sticky header的LOGO,並依照前一篇文章的設定方法,完成圖片連結的設置。

Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO 1

透過編輯圖片進階中的custom positioning調整圖片的位置。將custom positioning的位置改為Absolute,再透過調整水平及垂直offset將圖片移到希望的位置。

Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO 2

另外,由於後續步驟需要透過CSS來顯示/隱藏圖片,所以在這裡需要先分別透過進階中的進階設定兩張圖片的CSS類別。到這裡為止,就完成Header LOGO的圖片和Sticky header LOGO的圖片的設定。

Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO 3

接著,設定Sticky header。透過編輯段中的進階,啟動Sticky header effects,依據自己的需求啟動/關閉各選項。

Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO 4

最後,透過編輯段中的進階的自訂CSS樣式,以下方的CSS設定兩張圖片在頁面滑動時的顯示/隱藏。

Elementor系列之四:針對特定頁面的Sticky header設置不一樣的LOGO 5

.she-header .homelogo { visibility: hidden; } 
.homestickylogo { visibility:hidden; } 
.she-header .homestickylogo { visibility: visible; }
分享至:

發佈留言