如何使用 Elementor 創建透明頁眉?

已發表: 2022-03-01

透明標題是改善網站外觀的好方法。 它使您的網站設計脫穎而出,並讓您的網站訪問者看起來更具互動性。

但是你可以在不了解任何編程語言的情況下使用 Elementor 在 WordPress 上創建一個透明的標題嗎? 答案是肯定的! 你絕對可以。 本文將向您展示輕鬆創建 Elementor 透明標題的說明。

目錄
[顯示隱藏]
  1. 使用透明標頭的優勢
    1. 非常適合長網頁
    2. 最適合可操作的網站
    3. 提高您的網站導航能力
  2. 如何使用 Elementor Pro 創建透明頁眉?
    1. 安裝並激活 Elementor Pro 插件
    2. 為您的網站創建菜單
    3. 使用 Elementor Pro 創建普通頁眉
    4. 使用 Elementor Pro 創建透明的置頂標題
  3. 如何使用 Elementor 免費創建透明頁眉?
    1. 安裝並激活 Elementor 插件的 Elementor 和 Essential 插件
    2. 為您的網站創建菜單
    3. 使用 Elementor 的基本插件創建透明的粘性標題
  4. 如何為 Woostify 用戶創建透明標題?
  5. 最後的話

使用透明標頭的優勢

elementor-transparent-header-1

您可以輕鬆創建引人入勝的 Elementor 透明標題。 但是,如果您願意,您可以更進一步,在訪問者滾動瀏覽頁面內容時將其固定。 以下是優點:

非常適合長網頁

使用透明的粘性標題是一種時尚且快速的方式,可確保您的訪問者獲得愉快的體驗。

它們可以幫助您的網站擁有更加用戶友好的導航系統。 如果您網站的內容很長,這個好處將非常有益。

最適合可操作的網站

透明的粘性標題最適合可操作的網站,例如零售或電子商務網站。 這是因為您希望訪問者仍然在頁面內容上時採取特定操作。

當您在瀏覽您的網站時漂亮地顯示標題時,訪問者會發現瀏覽起來更方便。

更重要的是,由於標題是透明的,它不會降低內容的可讀性。 因此,添加一個透明的標題可能會降低您網站的跳出率,並有助於有效地引導您的訪問者。

提高您的網站導航能力

在您的網站上使用透明的粘性標題可以鼓勵您的訪問者立即採取行動。 在搜索特定選項時,它可以節省他們的時間。

您無需將品牌徽標放在主頁上的任何位置,您可以將其優雅地顯示在透明的粘性標題上。

如何使用 Elementor Pro 創建透明頁眉?

現在,讓我們學習如何使用 Elementor Pro 創建和自定義透明標題。

安裝並激活 Elementor Pro 插件

如果您的網站還沒有 Elementor Pro,您需要安裝並激活它。

  1. 在 WordPress 儀表板中,轉到Plugins > Add New
elementor-transparent-header-2
  1. 通過輸入“Elementor”找到插件。 然後,您將看到 Elementor Website Builder 作為一個選項列出。
  2. 分別單擊立即安裝按鈕和激活按鈕。
  3. 成功購買 Elementor Pro 後,訪問 my.elementor.com。
  4. 購買後使用您在電子郵件中獲得的信息登錄。
  5. 接下來,您將被帶到個人資料頁面。 單擊右上角的下載插件按鈕,將 .zip 文件下載到您的計算機。
elementor-transparent-header-3
  1. 在您網站的 WordPress 儀表板中,單擊Plugins > Add New 。 然後,單擊左上角的上傳插件按鈕。
  2. 單擊選擇文件按鈕。 選擇您剛剛下載的 .zip 文件。 接下來,單擊激活
  3. 在站點的儀表板頂部,您會收到一條通知,要求您激活許可證密鑰。

為您的網站創建菜單

接下來,如果您還沒有這樣做,您必須使用 WordPress 儀表板創建一個標題菜單。 以下是入門指南。

  1. 在 WordPress 儀表板中,導航到外觀>菜單
elementor-transparent-header-4
  1. 菜單名稱文本框中輸入菜單名稱。 然後,單擊創建菜單按鈕。
  2. 專注於左側面板。 在這裡,您可以將站點的頁面、帖子、類別和自定義鏈接添加到菜單中。
elementor-transparent-header-5
  1. 您可以拖放菜單項以重新排列它們或在右側面板上創建子菜單。
elementor-transparent-header-6
  1. 當您滿意時,請記住單擊“保存菜單”按鈕。

使用Elementor Pro創建普通頁眉

  1. 從 WordPress 儀表板轉到模板 > 添加新的。
elementor-transparent-header-7
  1. 將出現一個彈出窗口。 從下拉菜單中選擇 Elementor 標頭模板,然後在Name your template文本框中輸入其名稱。 然後,單擊創建模板按鈕。
elementor-transparent-header-8
  1. Elementor 模板庫將出現在彈出窗口中。 您可以瀏覽所有 Elementor 標題樣式。 一旦你選擇了一個收藏夾,將光標移到它,然後單擊插入按鈕。 您還可以預覽所有這些。
elementor-transparent-header-9

使用Elementor Pro創建透明的置頂標題

  1. 現在,您需要使用 Elementor Pro 使標題透明。 為此,請單擊標題上方的六點按鈕。
elementor-transparent-header-10
  1. 在“佈局”部分,在菜單下拉菜單中選擇所需的菜單。
elementor-transparent-header-11
  1. 轉到樣式選項卡以更改標題的背景顏色和透明值。 在“背景”部分,選擇經典背景類型(用畫筆表示)。
elementor-transparent-header-12
  1. 單擊顏色選擇器按鈕。 然後,選擇您想要的顏色和透明值。
  2. 您可以進一步更改頁眉的整體外觀,包括排版、背景覆蓋、邊框和分隔線。 隨意嘗試。
  3. 接下來,轉到“高級”選項卡。 然後,滾動到運動效果部分。 啟用滾動效果選項。
elementor-transparent-header-13
  1. 效果相對於下拉菜單中選擇整個頁面選項。
  2. 最後,從粘性下拉菜單中選擇頂部選項。
  3. 如果您滿意,請單擊“發布”按鈕以應用更改。

結果將如下所示:

elementor-transparent-header-14

如何使用 Elementor 免費創建透明頁眉

如果您預算不足並且不想在 Elementor Pro 上花錢,則需要另一個插件來創建透明標題。

在本文中,我們將使用 Elementor 插件的基本插件。 這是最受歡迎的小部件庫,擁有超過一百萬的活躍用戶。

您將免費獲得許多小部件,以使網站脫穎而出並儘可能吸引人。 請注意,您不需要高級版本來創建透明標題。

安裝並激活 Elementor 插件的 Elementor 和 Essential 插件

  1. 在 WordPress 儀表板中,轉到Plugins > Add New
elementor-transparent-header-15
  1. 通過輸入“ Elementor ”找到插件。 然後,您將看到 Elementor 插件作為一個選項列出。
  2. 分別單擊“立即安裝”按鈕和“激活”按鈕。
  3. 使用 Elementor 插件的基本插件重複上述過程。

為您的網站創建菜單

我們已經在上面介紹了這一點。 請向上滾動以了解訣竅。

使用Elementor的基本插件創建透明的粘性標題

  1. 導航到Essential Addons > Elements 。 在這裡,激活簡單菜單小部件。 請記住單擊“保存設置”按鈕。
elementor-transparent-header-16
  1. 使用 Elementor 創建新頁面/帖子或打開現有頁面。
  2. 單擊左下角的“設置”按鈕(由齒輪表示)。 在頁面佈局下拉菜單中選擇“Elementor Canvas”。 這樣,您可以擺脫主題附帶的標題。
elementor-transparent-header-17
  1. 單擊九方形圖標返回小部件菜單。 搜索簡單菜單小部件。 將其拖放到所需位置。
elementor-transparent-header-18
  1. 在“常規”部分中,在“選擇菜單”下拉菜單中選擇所需的菜單。
elementor-transparent-header-19
  1. 轉到樣式選項卡以更改標題的背景顏色和透明值。
elementor-transparent-header-20
  1. 背景部分,選擇經典背景類型(由畫筆表示)。
  2. 單擊顏色選擇器按鈕。 然後,選擇您想要的顏色和透明值。
  3. 您可以進一步更改頁眉的整體外觀,包括排版、背景覆蓋、邊框和分隔線。 隨意嘗試。
  4. 接下來,轉到“高級”選項卡。 然後,滾動到定位部分。 在位置下拉菜單中選擇固定選項。
elementor-transparent-header-21
  1. 單擊九方形圖標返回小部件菜單。 搜索Spacer小部件。 將其拖放到Simple Menu小部件的正下方。
elementor-transparent-header-22
  1. Spacer部分,調整Space值以匹配頁眉的高度。
elementor-transparent-header-23
  1. 如果您滿意,請單擊“發布”按鈕以應用更改。

如何為 Woostify 用戶創建透明標題?

如果您使用 Woositfy 主題,甚至是免費版本,您可以在幾分鐘內快速為您的整個網站應用漂亮的透明標題。 請按照以下說明了解相關知識:

  1. 從 WordPress 儀表板導航到外觀 > 自定義
elementor-transparent-header-24
  1. 然後,轉到Layout > Header Transparent
elementor-transparent-header-25
elementor-transparent-header-26
  1. 打開啟用透明標題開關。
elementor-transparent-header-27
  1. 在新的常規設計選項卡中,您可以根據需要自定義新的透明標題。 例如,您可以在特定頁面上啟用/禁用它,例如 404、帖子等,
elementor-transparent-header-28
elementor-transparent-header-29
  1. 當您對結果感到滿意時,不要忘記單擊“發布”按鈕。

最後的話

創建 Elementor 透明標題是幫助用戶瀏覽您的網站的一種時尚方法。

我們創建的標題是完全響應的。 因此,您不必太擔心這個問題。 對於那些使用 Woostify 的人,你應該選擇第三種方式。 當您想要創建一個漂亮的透明標題時,這也是最簡單和最快的方法。