巧妙設置 Weebly 頭像和區域背景的技巧

巧妙設置 Weebly 頭像和區域背景的技巧

Weebly 提供了在編輯器中為頭像和區域元素設置背景的功能。免費用戶可以設置純色、漸變色或圖片作為背景,而視頻背景僅限於專業及以上用戶。使用具有背景圖片的頭像是登陸頁和博客頁的完美解決方案。Weebly 頁面中的頭像圖片大小取決於您選擇的頁面佈局。非響應式主題的佈局選擇和使用圖片作為背景的過程與默認響應式主題完全不同。本文將詳述這項功能在響應式和非響應式主題中的應用。

響應式主題與非響應式主題

進入 Weebly 編輯器中的“主題”選項卡,然後點擊“更改主題”按鈕。這將顯示支持最新 Weebly 元素的響應式主題列表。向下滾動頁面,然後單擊“顯示舊主題”選項。現在,您將看到舊的非響應式主題列表。這些主題的結構與新主題不同,且不支持“區域”元素。

網站的每個頁面不必呈現相同的頭像圖片。Weebly 提供默認功能,允許為網站的不同頁面添加不同的頭像圖片,無需修改主題的源代碼。

1. 在響應式主題中使用不同的頭像圖片

  1. 響應式主題提供的默認頁面佈局可以在創建頁面時選擇,或通過“頁面 > 選擇頁面 > 頭像類型”進行選擇。要使用頭像圖片,需要選擇“頭像”選項。
  2. 選擇具有背景圖片的頭像佈局
    Weebly 默認情況下將使用已選主題中的頭像佈局。單擊頭像元素,選擇“替換頭像佈局”選項。此後會彈出一條消息,通知您選擇新頭像將刪除當前佈局及其元素。點擊“刪除”以查看所有可用的頭像佈局。請確保選擇具有背景圖片的新佈局。
  3. 編輯背景圖片
    保存頭像佈局後,單擊該佈局並選擇“編輯背景”選項。如果需要,點擊“替換”按鈕以從可用項目列表中更改背景圖片,或上傳自己的圖片。點擊“編輯”按鈕使用 Weebly 圖片編輯器開啟背景圖片。Weebly 圖片編輯器允許您調整縮放、模糊、黑暗度並應用過濾器以獲得自定義的頭像佈局背景。完成定制後,點擊圖片編輯器右上角的“保存”按鈕。
  4. 為其他頁面應用相同的背景樣式
    單擊頭像佈局元素,然後進入“高級 > 保存到更多頁面”選項。這將顯示網站的所有可用頁面列表,並檢查要應用相同頭像圖片佈局的頁面。點擊“保存”鏈接應用更改。請記住只有當您已選擇“頭像”作為所選頁面的“頭像類型”時,頭像佈局才會顯示。

2. 在非響應式主題中使用不同頭像圖片

儘管不建議使用非響應式主題,但有些用戶可能仍喜歡使用舊主題並使用移動編輯器自定義移動網站。如果您是其中的一員,那麼可以按照以下步驟使用不同的頭像圖片。

  1. 選擇頁面佈局
    在舊主題中可能看到不同的頁面佈局。選擇除無頭像之外的頁面佈局選項(無頭像頁面不會有任何頭像部分)。
  2. 上傳頭像圖片
    將鼠標移動到頭像圖片上,然後單擊“編輯圖片”按鈕。這將打開 Weebly 集成的圖片編輯器工具。單擊“添加圖片”按鈕以添加自己的頭像圖片。您應該有適合所選佈局大小的圖片,用於登陸頁、長頭像或短頭像。儘管大多數 Weebly 主題使用以下默認尺寸作為頭像圖片,但您可以裁剪或擴展圖片以適應空間。

    • 長頭像 – 960 x 287 像素
    • 短頭像 – 960 x 144 像素
    • 登陸頁 – 473 x 297 像素

    使用可用選項編輯您的圖片,以便您的圖片與網站內容和佈局緊密融合。

  3. 保存選項
    完成編輯後,點擊“保存”按鈕。您將看到以下三個選項:

    • 保存到所有頁面
    • 僅保存到此頁面
    • 保存到選定頁面

    例如,如果您在短頭像頁面中選擇了頭像圖片並選擇了保存到所有頁面的選項,那麼將發生以下情況:

    • 所有具有短頭像佈局的現有頁面將更改為該圖片。
    • 新創建的短頭像頁面將默認擁有該圖片。

    選擇僅保存到此頁面有助於僅將頭像圖片保存到該頁面。這樣您可以為 Weebly 網站的每個頁面自定義不同的頭像圖片。

    最後一個選項是將圖片保存到選定的頁面。例如,如果您在登陸頁佈局中上傳了圖片並選擇了此選項,您將看到類似旁邊顯示的彈出窗口。

    這種方法對於想要為同類特定頁面的組添加自定義頭像圖片非常有用。注意:如果您是專業用戶,那麼您將有選項在頭像中添加幻燈片。不同的幻燈片可以像上述對單獨圖片的說明那樣添加到不同的頁面。可以通過單擊頭像圖片上的設置圖標更改現有頁面的頁面佈局。如果您有三個不同的圖片(分別用於登陸頁、短頭像和長頭像),那麼通過這樣切換頁面佈局是更改頭像圖片的最簡單方法。

最後總結

如您所見,使用默認選項在 Weebly 上為不同頁面應用不同的頭像圖片非常簡單。然而,在響應式和非響應式主題中的處理過程完全不同。我們推薦使用最新的響應式主題,因為它們同樣支持使用具有背景的“區域”元素。

哦,您好 👋很高興認識你。

訂閱我們的電子報,定期發送很棒的科技內到您的郵

相關問題  IFERROR 與 VLOOKUP 一起使用以消除 #N/A 錯誤

Post Comment