如何在WordPress中設置圖像背景

如何在WordPress中設置圖像背景
帶有其他元素的主頁的 WordPress 背景圖像。

在 WordPress 中添加背景圖片的方法有很多。隨著主題代碼的變化,從基礎到最高級。然而,我們很高興推出一款用戶友好的工具,非常適合沒有編碼和設計知識的網站管理員。 Citadela Pro插件 帶有許多用於網站定制的功能和設置。

免費嘗試 Citadela Pro 插件中強大的塊、設置和功能。我們提供包含所有高級功能的 7 天試用版。您可以探索完美的工具,它允許您將背景圖像添加到 WordPress 頁面、帖子和自定義帖子類型。

Cluster 是 WordPress 中的一個古騰堡塊,允許您添加背景圖像。多功能元素使您能夠更改 WordPress 的默認背景。您不僅可以添加背景圖像,還可以將其與其他塊組合。您將獲得許多變化和多功能性。

結合 頁面標題塊,您可以輕鬆獲得一個精美的網站。您可以在 WordPress 中添加更多古騰堡塊並自定義背景圖像。此外,您還可以保存一組塊(例如可重複使用的塊),並在網站上的任何位置添加主題。這樣您就可以立即更改 WordPress 網站的後台。

如何使用古騰堡塊在 WordPress 中添加背景圖像

現在就開始

立即開始無風險試用。無需信用卡。

通過 Cluster 塊的 WordPress 背景圖像

我們向您介紹我們為 WordPress 古騰堡背景圖像製作的方便塊 - 集群塊。它是我們自己的塊組的一部分。 Citadela Pro插件有很多功能可以幫助您創建漂亮的網站。所有 AitThemes 自定義塊均可在 Citadela Pro插件.

請閱讀 集群塊文檔 進行詳細設置。

集群塊允許您將多個塊分組為一個。您可以有效地處理整個集群組,因為它是一個塊。簇寬度可以設置為整頁寬度,這意味著您有超大的空間來添加各種塊。

如果出現以下情況,簇將不會拉伸至全寬:

  • 您有一個活動側邊欄
  • 如果您使用的列會限制 Cluster 的空間

由於一些核心 WordPress 塊只能與內容寬度對齊,因此 Cluster 塊在構建網站時提供了更大的可變性。另一個很棒的功能是,您可以為 WordPress 設置背景圖像,更改其顏色或設置背景圖像疊加。因此可以將背景配置到網站設計中。

在這篇文章中,我們將向您展示:

如何添加簇塊

集群塊是高級塊,僅在安裝並激活後才可用 Citadela 塊插件。安裝插件後,Cluster 塊將自動添加到 WordPress 塊編輯器中,您可以立即開始使用它。

集群塊可以添加到帖子和頁面中。只需單擊頂部欄中或編輯器桌面上任意位置的“+”符號即可。之後只需搜索 Cluster 塊即可。

單擊“+”將 Cluster 塊添加到 WordPress 編輯器
單擊“+”添加 Cluster 塊

添加 Cluster 塊的第二個選項是輸入“/”並在其後鍵入塊名稱。然後簇塊就可以使用了。

添加帶有斜杠“/”的 Cluster 塊
使用斜杠“/”添加 Cluster 塊

使用 Cluster 對塊進行分組

Cluster block的主要特點是將多個塊組合為一個。讓我們看看它是如何工作的。如果將 Cluster 塊插入頁面,您將立即看到一個佔位符 “在此處插入更多塊”。 如果單擊它,您將獲得所有可用塊的列表。您還可以使用列表頂部的搜索欄搜索請求的塊。

選擇嵌套塊的過程
選擇和插入嵌套塊的過程

所有嵌套塊都將具有所有可用的默認選項和設置。例如,如果您插入圖像塊,您將可以選擇上傳圖像或從媒體庫中選擇圖像。

例如,使用 Cluster 塊,您可以在網站上創建引人注目的部分來展示您最近的工作。從您的作品集中添加圖像,然後在其下方設置背景圖像。您剛剛創建了一個指向您的投資組合的良好鏈接。

嵌套在 Cluster 塊中的圖像塊
在 Cluster 塊的幫助下創建的投資組合網站

簇塊還可用於創建有吸引力的產品展示。您可以將產品圖片設置為部分背景並選擇其顏色。 服務區 也可以嵌套在 Cluster 塊內。

嵌套在 Cluster 塊中的服務塊
使用 Cluster 塊中的 Service 塊以更具吸引力的方式展示您的產品(及其功能)

多個塊合二為一

如果要將多個嵌套塊添加到 Cluster 中,可以使用 Columns 塊。使用列塊,您可以並排添加多個塊。每列可以有不同的內容類型,例如圖像、段落、列表或按鈕。

多列與 Cluster 塊結合的典型示例是一頁網站。

嵌套在 Cluster 塊中的列塊
如何在一頁網站中使用 Cluster block

工具欄中的基本設置:內容對齊選項

默認情況下,簇塊寬度設置為內容大小。您可以在工具欄中更改此行為。有以下選項可用:

  • 內容大小 – 默認選項,簇塊與內容具有相同的寬度。
  • 寬尺寸 - Cluster 內的內容比內容寬度更寬。
  • 全寬尺寸 - 在本例中,簇寬度是瀏覽器窗口從一側到另一側的寬度。

請務必注意,如果您當前活動的主題支持此設置,則它只會影響集群內容。所有嵌套塊都可以根據其選項的可用性進行配置。

下載 Citadela WordPress 主題和插件

立即開始無風險試用。無需信用卡。

標題和分隔符顏色設置

標題顏色變化

從 WP 5.3 開始,您可以通過標題塊切換標題的顏色。這是一個非常有用的功能 - 特別是如果您有深色佈局和配色方案,最好將默認文本顏色(黑色)更改為較淺的顏色。

在新版本發布之前無法更改標題顏色,這導致其在深色底座上的可見性出現問題。因此,標題經常會與您添加的 WordPress 背景圖像或照片混合在一起。現在您可以選擇正確的標題顏色以使您的網站閃閃發光。

您網站上使用的分隔符的新顏色

當您向 WP 添加背景圖像或任何其他類型的內容時,有時可能需要將其與網站的其餘部分分開。為此,您可以使用稱為分隔符的特殊塊。通過插入分隔符,您可以:

  • 分離特定的塊
  • 將整個文本分成較小的部分
  • 突出重要部分
  • 確保內容更好的可讀性
  • 簡化網站上的導航

此外,您現在可以使用更新的 WordPress 更改分隔線顏色。彩色分隔符非常適合完成您的網站配色方案。

如何在分組塊下添加背景圖像

Cluster 塊的真正強大之處在於您可以在分組塊下方添加背景圖像並設置背景顏色。一切都可以在 WordPress 檢查器中輕鬆配置。讓我們看看如何做。

  1. 單擊背景圖像並激活“顯示背景圖像”功能。
  2. 單擊“選擇圖像”。媒體庫將打開。您可以選擇現有圖像或將新圖像上傳到您的庫。
  3. 背景圖像也可以設置為固定。這意味著如果您滾動頁面,背景不會隨內容移動,並且其位置將被固定。
  4. 您還可以使用“焦點選擇器”選擇應顯示背景圖像的哪一部分。還可以使用百分比選擇圖像的一部分。
如何在分組塊下添加背景圖像
如何添加背景圖像的分步指南

現在就開始

立即開始無風險試用。無需信用卡。

背景疊加

Cluster 中的高級選項之一是背景圖像疊加。您可以選擇默認顏色之一或使用顏色選擇器選擇自定義顏色。還可以設置顏色不透明度。這些集群塊設置可幫助您創建真正有吸引力的網站演示。

WordPress 背景圖像疊加
設置背景疊加並更改其不透明度以創建引人注目的設計

核心中提供了新的組塊

Group 塊和 AitThemes Cluster 塊有什麼區別?

我們定制的 Cluster 塊比 Group 塊更早發布,並提供更複雜的解決方案。您可以使用組塊來對多個塊進行分組,但它的功能仍然有限。例如,您無法在塊中設置顏色疊加 - 您只能選擇圖像周圍而不是圖像上方的基本背景顏色。

背景圖像編輯在我們的 Cluster 塊中是小菜一碟。

您可以上傳到 WordPress 背景圖像,為其設置背景顏色以及背景顏色疊加(也可以自定義疊加不透明度!)。只需幾分鐘。

4 對“How to set image background in WordPress”的思考

  1. 感謝ait主題對所有網站管理員的幫助
    你的網站很好

  2. 是否可以讓訪問您網站的訪問者使用 Cluster 塊從一系列圖像中選擇背景圖像和覆蓋圖像?

    1. 你好約翰,

      感謝您對 Citadela 產品感興趣。是的,為了設置背景,您可以選擇不同的選項。詳細信息可參見:https://www.ait-themes.club/citadela-doc/cluster-block/

      親切的問候!
      茲拉特科
      艾特團隊

評論被關閉。