酷爆的透明 Header 是怎樣做的?Elementor Pro 示範教學

玻璃陳
//
更新於 2022 年 7 月 1 日
//
0 個留言

做了那麼多網站,我發現很多人都非常喜歡透明 Header 的設計。確實我也挺喜歡做這個效果的。但我發現原來是有很多人不知道怎樣去做這種的 Header。用 Elementor Pro 的話,要做這個效果一點的都不難,這次就帶著你和我一起從零開始做出這種很抓眼球的透明 Header 吧!

看這個教學最好的是有一點 Elementor Pro 的使用基礎,當然我也會盡可能用簡單而懂的字語來寫這個教學。
試範網址:https://sf-demo.com/透明-header-示範-01/

新增新 Header

到 Theme Builder(主題建構器)  新增 Header,你會看到 Elementor Pro 預設都會給你一些模板去開始,但這次我們先不用,把他關掉,從一張白紙開始。

新增 Section  然後調整到它的參數:

  1. 內容寬度 > 全寬
  2. 欄間距 > 沒有間距
  3. 高度 > 最小高度 > 180px
  4. 垂直對齊 > 中央
  5. 拉伸段 > 是
  6. HTML 標籤 > Header

設定及調整 Sticky Header

到  進階  設定頁:

  1. 邊界 > 取消連結 > 下 -200
  2. 間距 > 上下 10 左右 100
  3. Z-Index > 10
  4. CSS 類別 > sticky-header

這個部份是透明 Header 最重要的部份,我先大概說一下,實在有不明白的話,就留言給我吧。

我們之前一開始把 Section 的高度設為最少 180px,然後這裡的 Padding(間距)設的是上下都有 10px,那加起來就是 180 + 10 +10 = 200px,這個 Header 的高度最少是 200px。

那麼我們只要在 Margin(邊界)設 -200px,就會把 Header 下面的所有內容都往上提高 200px,然後將 Z-Index(如果不知道是什麼意思,你可以先理解為第幾層,數字較大的會覆蓋在較少的數值上。)設為 10,就是為了讓整個 Header 疊在其他的內容上面。

動作特效

  1. Sticky > Top
  2. Effect Offest > 100

Custom CSS

貼上下面的 CSS:

header.sticky-header {
     --header-height: 90px;
    /*高度(可改)*/
     --opacity: 1;
    /*透明度(可改)*/
     --shrink-me: 0.80;
    /*元素縮小的比例(可改)*/
     --sticky-background-color: white;
    /*背景頻色(可改)*/
     --transition: .5s ease-in-out;
     transition: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition);
}
 header.sticky-header.elementor-sticky--effects {
     background-color: var(--sticky-background-color) !important;
     background-image: none !important;
     opacity: var(--opacity) !important;
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
}
 header.sticky-header > .elementor-container {
     transition: min-height var(--transition);
}
 header.sticky-header.elementor-sticky--effects > .elementor-container {
     min-height: calc(var(--header-height) * var(--shrink-me))!important;
     height: calc(var(--header-height) * var(--shrink-me));
}
 header.sticky-header .elementor-nav-menu .elementor-item {
     transition: padding var(--transition);
}
 header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
     padding-bottom: 10px !important;
     padding-top: 10px !important;
}
 header.sticky-header > .elementor-container .logo img, header.sticky-header > .elementor-container .cta-btn {
     transition: all var(--transition);
}
 header.sticky-header.elementor-sticky--effects .logo img{
     max-width: calc(100% * var(--shrink-me));
}
 header.sticky-header.elementor-sticky--effects .cta-btn {
     transform: scale(var(--shrink-me));
}

CSS 引用:How to Create a Shrinking Sticky Header With Elementor

這段代碼最開始的幾個參數是可以改的,你可以按自己的需求修改。就算你不知道要怎麼修改也沒關係,預設的一樣是可以用的。

貼上之後你會看到很多的紅色「X」,不需要擔心繼續下一步就好了。

增加 Column 及加入元素

我們的 Header 會有三個元素:Logo, Menu, Button,所以我們要增加 Column 的數量(其實是我一開始忘了選 XD)

酷爆的透明 Header 是怎樣做的?Elementor Pro 示範教學 | Elementor 教學 | Elementor, WordPress, 教學

調整三個 Column 的寬度分別為:左 20、中 55、右 25。然後加入相對的元素。

酷爆的透明 Header 是怎樣做的?Elementor Pro 示範教學 | Elementor 教學 | Elementor, WordPress, 教學

詳細可以根據你自己的要求去調整元素它們的位置或樣式,但主要我們要給 Logo 和 Button 加上個額外的 CSS Class。

酷爆的透明 Header 是怎樣做的?Elementor Pro 示範教學 | Elementor 教學 | Elementor, WordPress, 教學

左邊的 Logo 就加上 logo;右邊的按鈕就加上 cta-btn

我們之前在 Custom CSS 加的代碼裡面,就有把 logo & cta-btn  這兩個額外的 Class 進行調整的代碼。

做完這些基本上就大功告成了!YEAH!!! 來再看一下效果吧!

這樣就可以得到類似的效果,說真的我是挺喜歡做這種的 Header 的,也覺得這效果真的挺酷的。你覺得呢?有什麼想法的話可以留言給我,或是你有什麼樣的效果想學的話,也可以跟我說說。

玻璃陳
雙子座,一名毒撚(宅男中的宅男),同時也是Mario他爸。兼職 Digital Marketer ,2016年開始接觸到現在,雖然沒有像其他大 Boss 一樣年薪破千萬(破千是有的),但過程中找到很多的滿足感。希望可以跟大家分享我的經驗同時,從你們身上學習更多。

Leave the first comment