Astra主題教學指南-Header補充設定

透明頁首 Transparent Header

如何在你的網路行銷網站上新增透明頁首的快速步驟
步驟1:在自訂下找到 Transparent Header選項
[ 外觀 > 自訂 > Header Builder > Transparent Header ]
編輯Transparent Header選項。
步驟2:在 Transparent Header 部分下,你可以在完整的網站設計上啟用它,
或設定其他LOGO,並新增邊框底色。

Transparent Header如何工作?

Transparent Header可讓你輕鬆創建美觀且引人注目的Header。
啟用此選項會將主Header背景設定為透明,並將頁面內容拉到頂部。
它將合併主Header和頁面的內容。

這意味著頁面內容的頂部將設定為透明Header的背景。
例如,如果頁面的頂部包含圖片,則將其拉起並設定為透明頁首的背景圖片。

Transparent Header的排版設定

將Astra主題更新到1.6.0及更高版本後,透明頁首設定將在自訂中可用。
從WordPress控制台導航到 外觀 > 自訂 > Header Builder > Transparent Header

以下是可用的選項。

在完整的網站上啟用

如果你希望在整個網站設計上顯示透明的Header,請勾選此選項的複選框。
啟用此選項後,它將提供以下排除規則。
這意味著你可以選擇一些頁面和文章,在其中可以禁用透明Header。

  • 是否在404,搜尋和彙整頁面上禁用?通常不建議在特殊頁面
    (例如Archives彙整頁面,搜尋,404等)上使用此設定。
    如果要在這些頁面上禁用透明頁首,請選中該複選框。
  • 在部落格索引頁面上禁用?
    從主頁設定中如果你設定了 Your homepage displays > Your latest posts,
    則首頁將成為部落格索引頁面。
    如果要禁用透明頁首,請選中該複選框。
  • 是否在頁面上禁用?如果要在所有頁面上禁用透明頁首,請選中該複選框。
  • 是否在文章上禁用?如果要在所有文章上禁用透明頁首,請選中該複選框。

小提醒: 也可以從 頁面Meta標籤 中設定透明頁首。
只需編輯頁面/文章,在右側欄中,你將找到Astra設定部分。
這使你可以啟用/禁用特定頁面/文章的透明Header。

請注意,頁面Meta標籤設定比自訂設定具有更高的優先權。

Enable On 啟用

選擇一個設備以顯示Transparent Header。選項是:

  • Desktop 桌機
  • Mobile 手機
  • Desktop + Mobile 全裝置

Styling 造型風格

  • Different Logo for Transparent Header?透明頁首用不同的LOGO嗎?
    啟用透明Header時,預設情況下,它將顯示在Layout >  Header > Site Identity下設定的網站LOGO。
    如果你希望在透明頁首上設定與該網站LOGO不同的LOGO,請選中該複選框並設定一個LOGO。
  • Bottom Border Size and Color底部邊框大小和顏色:設定透明Header的底部邊框。

透明頁首的顏色和背景

Header Builder > Transparent Header 下的自訂後台中使用
使用以下選項為透明頁首網頁設計不同的顏色:

  • Background背景–透明Header的背景顏色
  • Site Title–網站標題顏色
  • Menu選單–背景顏色,連結/文本顏色,連結活動/懸停顏色
  • Submenu子選單–背景顏色,連結/文本顏色,連結活動/懸停顏色
  • Content內文–文本顏色,連結顏色,連結懸停顏色

筆記:
1. Typography 會繼承給透明頁首,設定從 Global > Typography > Base Typography。
2.可以通過Meta標籤設定為特定頁面啟用或禁用透明頁首。


為什麼我的LOGO模糊?

通常,諸如MacBook Pro之類的高清屏幕上的LOGO(例如:200px X 200px)之類的小圖片會模糊。
這是因為在高清屏幕上,實際上使用兩倍的像素來顯示LOGO(例如:400像素X 400像素)。
因此,LOGO僅被調整大小(放大),從而使其失去清晰度。

要解決這個問題:

選擇1:使用SVG圖片格式(推薦)

SVG代表可縮放矢量圖形。
顧名思義,它是一種可擴展的圖片格式,沒有任何像素。
因此,對於你想要看起來清晰,銳利和清晰的任何重要圖片(例如LOGO),請使用SVG格式。

你可以使用SVG Support之類的外掛,該外掛允許已清理的SVG上傳。
如果你以SVG格式上傳LOGO,則無需使用下面說明的Retina LOGO選項。

選擇2:Retina Logo

如果你沒有SVG格式的圖片,請確保為你的網站上傳(兩倍大小的)視網膜LOGO,以使其看起來清晰銳利。


Primary Header主頁首的顏色和文字樣式

使用Astra主題,將為整個網頁設計的全站顏色和文字樣式自動應用於主要頁首。
如果你要Header特定的顏色/文字設定,則可與Astra Pro Addon外掛一起使用。

Primary Header Colors主頁首顏色

如上所述, 外觀 > 自訂 > Global > Colors 下可用全站顏色應用於Header。
使用Astra Pro外掛時,你可以為Header中的每個元件設定顏色。

Primary Header Typography主頁首文字樣式

預設情況下,在 外觀 > 自訂 > Global > Typography 下為網站設定的文字樣式將應用於Header內。
Astra Pro Addon提供了更多特定選項。


如何使用Astra新增LOGO,網站圖標和網站Header?

可以在自訂 > Header Builder > LOGO下找到
以下是Astra提供的設定,這些設定可讓你輕鬆進行設定以新增網站標誌,例如:

  • Logo 標誌
  • Retina Logo
  • Logo for mobile devices
  • Site Title
  • Site Tagline
  • Site Icon (favicon).

LOGO(一般和Retina

使用LOGO,請從媒體庫中選擇LOGO圖片。
Astra還允許為Retina設備新增不同的LOGO。
高清螢幕上,此2x大小的LOGO是必需的,因此LOGO不會顯得模糊。

如果LOGO較大且覆蓋了手機設備上的大多數Header空間,
請選擇為手機設備設定 不同LOGO ,然後新增一個單獨的較小LOGO。

有關更多詳細資訊,請閱讀有關Header / Footer Builder的Mobile Header的文章。

Logo Width 標誌寬度

你可以使用滑塊輕鬆調整LOGO寬度。
設定切換按鈕調整桌機寬度、平板電腦和手機設備上的LOGO寬度。
Astra以適當的寬高比對LOGO進行裁剪,這有助於減少頁面負荷。

網站標題和標語

網站標題可以是網站的名稱。標語是網站的簡單說明。
網站標題和標語將顯示在網絡瀏覽器的Header欄中。

Inline Logo & Site Title 對齊LOGO跟標題
此選項將LOGO和網站標題–標語設定為一行。
僅在啟用Inline Logo & Site Title時才可以看到。

Site Icon (Favicon) 網站圖標

這是一個小圖片圖標,可以在瀏覽器的標籤,書籤欄以及WordPress手機應用程式中看到。
你可以使用網站圖標選項進行設定。網站圖標的建議大小為512像素。

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security