Astra Pro模組教學指南-Sticky Header固定頁首設定

如何使用Astra新增Sticky Header固定頁首或On-Scroll Fixed Header滾動式固定頁首?

這是Astra Pro Addon外掛提供的一項進階功能。
要使用這些Pro功能,你需要在網路行銷網站上安裝Astra主題以及Astra Pro外掛。

當使用者滾動頁面時,Sticky Header會將頁首固定在網頁的頂部。
它將允許從頁面的任何部分快速點擊到選單。

筆記:
Astra已經發佈了Astra 3.0,引入了Header / Footer Builder,因此更改了一些內容。

如何使用Sticky Header模組新增固定頁首或On-Scroll Fixed Header的快速步驟

步驟1:確保已安裝並啟用了Astra Pro Addon外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用Sticky Header模組
步驟3:訪問控制台 [ 外觀 > 自訂 > Header Builder >Sticky Header ] 以編輯模組設定

這是Astra Pro提供的一項進階功能。
你可以從 外觀 > Astra Options > Sticky Header啟用模組

你可以在 外觀 > 自訂 > Header Builder > Sticky Header下找到設定

延伸閱讀:
了解有關行銷網站中常用的購物車系統,
WooCommerce電子商務與Astra整合概述的更多資訊
Astra Pro 通過WooCommerce模組擴展網站商店選項。


Sticky Header 固定頁首設定

Stick Primary Header選項將保留成預設主題頁首。

在Astra 3.0版本前,如果你啟用了Astra Pro的Header Sections模組,
則會看到WordPress網站設計中固定 Above上方 和 Below下方 頁首位置的選項。

啟用 Stick Above Header Section 或 Stick Below Header Section
會將相應的頁首位置固定到頁面滾動的頂部。


Sticky Logo and Logo Width 固定LOGO和LOGO寬度

這使你可以為固定頁首選擇與網站LOGO不同的LOGO。
如果要使用與網站LOGO相同的LOGO,請將其選項保留為空值。
你可以新增一般LOGO和Retina LOGO,還可以使用滑條輕鬆設定寬度。

如果你已從Astra Pro啟用了 Colors & Background 模組,
並且從 外觀 > 自訂 > Header Builder > Sticky Header已設定頁首的背景顏色。

然後,此背景顏色將自動應用於Sticky Header。
在這種情況下,你可以使用 Sticky Background Opacity固定背景不透明度 選項來管理背景顏色的不透明度。


Enable Shrink Effect 啟用縮放效果

它將縮小Sticky Header的高度,LOGO和選單大小。
網站設計的固定頁首將以緊湊的尺寸顯示。
當主頁首的高度很長,並且想把固定頁首縮小時,此功能很有用。


Select Animation Effect 選擇動態效果

動態效果將出現在Sticky Header條目上。


Display On 開啟顯示

你可以選擇在桌機或手機裝置上或同時在兩者上顯示固定頁首。

小提醒:預設情況下,陰影會出現在頁首上。
如果要刪除它,請使用自訂CSS。

.main-header-bar.ast-sticky-active {
    box-shadow: unset;
}

Colors & Background for Sticky Header 固定頁首的顏色和背景 

Header Builder > Sticky Header下的自訂中,所有選項均可用。
如果你網頁設計的主頁首帶有固定性,則會顯示相應的選項。
如果 Above上方 和 Below下方 頁首設定為固定,則會顯示不同的選項。 

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security