Astra Pro模組教學指南-Page Headers設定

使用Page Headers頁首在響應式裝置上設定Parallax Effect視差效果

Astra對 Page Headers 附加模組進行了改善,現在你也可以在響應式裝置上設定視差效果。

你將在 Page Headers 的同一部分下找到新選項。
現在,你將找到在要顯示視差效果的特定裝置上啟用視差的選項。

Astra實施此選項的主要原因是?

  • 在諸如手機之類的響應式裝置上,某些圖片無法以視差效果正確顯示。
    在這種情況下,使用者可以在Mobile上停用 Parallax Effect 視差效果,反之亦然。

新建選項包含以下選擇:

  1. None = 在所有裝置上停用視差
  2. Desktop + Mobile = 在兩個裝置上都啟用視差
  3. Desktop = 僅在桌機上啟用視差(在手機裝置上停用)
  4. Mobile = 僅在手機裝置上啟用視差(在桌機上停用)

如何在響應式裝置上啟用視差效果?

  1. 創建一個新的頁首。
  2. 現在,在其設定中,你會注意到,
    用於啟用Parallax Effect視差的選項有下拉式選單(Dropdown)可替換。

小提醒:通過此改進,Astra還分別顧到現有用戶和新用戶。

針對現有用戶:

Astra將遷移已經設定的值,因此,如果使用者啟用了該選項,
則它將保持原樣運行,並且在更新到2.2.5或更高版本後將啟用視差效果。

使用者現在可以根據需要從響應式裝置中選擇選項。

針對新用戶:

預設情況下,視差將設定為None無,並且可以根據需要為響應式裝置進行更改。


如何移除Page Header標題?

你可能曾經有過需要刪除Page Header的標題。
以前唯一的選擇是使用自訂CSS隱藏相同內容。

Astra提供了兩個過濾器。
一個用於刪除Page Header標題,另一個用於在內文區域中新增頁面標題。

讓Astra深入研究這兩種情況,並查看其工作原理的過濾器–

案例1:

如何刪除出現在圖片頂部的Page Header標題。
解決方法:你需要新增以下過濾器,這可以從Page Header中刪除標題。

add_filter( 'astra_advanced_header_title', 'remove_page_header_title' );
function remove_page_header_title() {
  return;
}

筆記
將以上代碼貼上到 子主題的functions.php文件中。

案例2:

從Top Banner頂部橫幅刪除Page Header後,我們需要在下面的內文區域中新增標題。
解決方法:你需要將標題新增到內文區域的過濾器

add_filter( 'astra_the_title_enabled', 'display_page_title', 999 );
function display_page_title() {
  return true;
}

筆記
將以上代碼貼上到 子主題的functions.php文件中。
這是刪除Page Header並在內容部分新增標題的方法。


Page Headers概述

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

你可以設計帶有Breadcrumb頁面路徑,背景顏色/圖片的有吸引力的網頁標題/Page Header區域。你還可以設計網站Header以適合特定頁面上的頁面標題設計。

如何使用Page Headers模組設計有吸引力的Page Header的快速步驟

步驟1:確保已安裝並啟用Astra Pro Addon外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用模組;
步驟3:訪問控制台 [外觀 > Astra Options > Page Headers ]以設計Page Header

啟用模組後,點擊 Settings 選項以開始使用。
現在,你可以在外觀選項下的 Astra Options 下方看到 Page Headers 選項。

新增一個新的Page Headers並為其指定適當的名稱。
選擇Page Header的選項,網站Header設定顯示規則,就完成了!

  • Page Header
  • Site Header
  • Display Rules

Page Header

Layout 排版:

會在頁面中間並排Page Header和Breadcrumb頁面路徑(如果啟用的話)。

它將在前端顯示為

Inline 串聯:

它將在右側和左側同一行顯示Page Header和Breadcrumb頁面路徑(如果啟用)。

它會在前端顯示為

Display Breadcrumb 顯示頁面路徑:

Breadcrumb頁面路徑顯示使用者在網站上的當前位置。
它通常用作輔助導航,允許使用者在網址連結階層中上下移動。
如果要顯示Breadcrumb頁面路徑,則需要啟用此選項。

它將在前端顯示為

Title and Breadcrumb Colors 標題和頁面路徑顏色:

你可以使用此選項設定標題和頁面路徑文字的顏色。

它會在前端顯示為

 Background Size背景大小:

你可以使用此選項定義頁面Header的高度,增強了Page Header的設計。

Custom Size 自訂大小:

你可以為Page Header定義頂部和底部Padding內距。
自訂大小可以設定為任意正整數,帶或不帶單位為 5 或 5px ,預設單位為 %

它會在前端顯示為

Full Size 全尺寸:

它將Page Header顯示為全屏。

它將在前端顯示為

 Background背景:

你可以將顏色或圖片設定為Page Header的背景。

Color 顏色:

你可以從顏色選擇器中為Page Header背景選擇一種顏色。

Image 圖片:

你可以使用此選項為Page Header設定背景圖片。

你將獲得以下進階網站設計選項-
在各個文章和頁面上使用Featured image精選圖片蓋過此圖
如果要用為特定文章或網頁設計的精選圖片覆蓋上面的背景圖片,請啟用該選項。

Overlay Background Color覆蓋背景色:
如果啟用此選項,則將背景色(如果設定了該值)用作背景圖片的覆蓋。

它將在前端顯示為

Parallax視差:
在視差效果中,滾動時背景圖片的手機速度與前端內容的手機速度不同。
如果要使背景圖片具有視差效果,請啟用此選項。

如果要從頁面標題中刪除Page Header,則需要使用自訂代碼(filter過濾器)。

Site Header 網站標題

如果你希望自訂目前的網站Header以及Page Header,則可以使用此選項。
使用此選項自訂網站設計的Header時,網站Header選項卡下的所有設定都將覆蓋當前網站Header的自訂設定。

Merge Page Header with Site Header 合併頁面和網站頁首:

此選項會將Page Header與當前網站Header合併。
它將當前Header設定為透明,並將Page Header拉到頂部。
啟用此選項將顯示進階自訂選項列表。

它將在前端顯示為

Site Identity 網站識別:

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

Customize Site Header 自訂網站頁首:

當你將Page Header與Site Header合併時,
為Page Header設定的背景將自動應用到Site Header。
你可以使用此選項設定Site Header的背景覆蓋顏色,邊框底部大小和顏色。

它將在前端顯示為

Primary Menu 主選單:

如果要覆蓋網站頁首的當前選單顏色,請使用以下選項。
你可以使用此設定Background Color背景顏色、
Link / Text Color連結/文字顏色和Link Active / Hover Color連結活動/懸停顏色。

Submenu Color Options [NEW] 子選單顏色選項[新]:

Astra Pro v2.5.0開始
Astra為 Link Active Color連結活動顏色 和 Submenu Color子選單顏色 選項
引入了單獨的選項,如下所示。
同樣,這些選項也會顯示在 Above Header、Below Header連結 和 Submenu子選單 顏色選項中。

Custom Primary Menu 自訂主選單:

如果要顯示與主選單不同的選單,則可以從下拉選單中選擇它。
網站上所有可用選單將顯示在下拉選單中。

Custom Menu Item 自訂選單項目:

通過該選項,你可以在所選選單的末尾新增自訂選單項目。
你可以從下拉選單中選擇一個自訂選單。

筆記:
如果你使用的是Header Footer Builder(適用於Astra主題版本3.0.0及更高版本),則此選項將不可用。

Customizer Setting 客製設定:

如果要在自訂中為 Primary Header主頁首 顯示設定的Custom Menu Item,請選擇此選項。

Search 搜尋:

它將在所選選單的末尾為搜尋框新增一個搜尋圖標。
當你點擊圖標時,將出現搜尋框。

它會在前端顯示為

筆記:
如果你使用的是Header Footer Builder(適用於Astra主題版本3.0.0及更高版本),則此選項將不可用。

Text / HTML 文字/ HTML:

它將允許你插入文字和HTML元件代碼。
你可以插入號召性按鈕,聯絡電話,電子郵件地址等。

筆記:
如果你使用的是Header Footer Builder(適用於Astra主題版本3.0.0及更高版本),則此選項將不可用。

Widget 小工具:

你可以使用此選項將小工具新增到Header。

選擇小工具選項作為自訂選單項後,
你將能夠從 外觀 > 自訂 > 小工具 > Header Builder小工具

選擇任何WordPress預設小工具,或者你可以使用任何第三方外掛將小工具新增到列表中。

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

Take custom menu item outside除外自訂選單項目:

此選項允許你將自訂選單項目與所選選單分開。
它將在響應式裝置上分別顯示你的自訂選單項目

筆記:
如果你使用的是Header Footer Builder(適用於Astra主題版本3.0.0及更高版本),則此選項將不可用。

Display Rules 顯示規則

Display On 開啟顯示:

你可以選擇Page Header以顯示在特定頁面上,也可以顯示在你網頁設計上的文章。
從列表中選擇一個位置。你可以新增顯示規則和/或排除規則。

User Roles 使用者角色:

你可以決定應該顯示其頁首的使用者角色。

Astra使用頁面Header外掛設計了一個示範。
它將顯示你如何創造性地使用Page Headers Addon。
https://websitedemos.net/blog-03/category/fashion/

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security