在 WordPress 中更改鏈接顏色的 5 種簡單方法

[ad_1]

無論是幫助導航還是推動轉化,鏈接在大多數現代網站中都發揮著至關重要的作用。 但是,您可能會覺得主題的默認 URL 不夠用,這就是您可能想要更改 WordPress 中鏈接顏色的原因。

幸運的是,可以使用您選擇的編輯器選項、插件或自定義代碼來更改 WordPress 中的鏈接顏色。 通過應用您自己的自定義顏色,您可以使您的鏈接從背景中脫穎而出 – 或與您的設計的其餘部分無縫融合。

在這篇文章中,我們將介紹在 WordPress 中更改鏈接顏色的五種不同方法。 無論您使用的是頁面構建器插件還是 WordPress 定製器,您都應該找到適合您的技術。

在 WordPress 中更改鏈接顏色的最簡單方法

如果您想了解如何在 WordPress 中更改鏈接的顏色,請閱讀本教程。 以下是我們接下來將介紹的方法:

  1. 自定義 CSS 代碼——如果您願意添加一些基本的 CSS 代碼,這通常是最靈活和最廣泛適用的方法。
  2. WordPress 定製器 – 您的主題很有可能提供專用選項來更改鏈接顏色。
  3. Elementor – Elementor 頁面構建器可以輕鬆更改站點範圍內的鏈接顏色。
  4. Beaver Builder – Beaver Builder 頁面構建器插件和主題還包括更改鏈接顏色的選項。
  5. WordPress 編輯器(單個鏈接)——如果您只想更改特定鏈接的顏色,您可以通過 WordPress 編輯器手動進行。

1.添加CSS代碼

在 WordPress 中更改鏈接顏色的一種方法是編寫一些自定義 CSS 代碼。 這要求您輸入要在網站上使用的顏色的十六進位代碼。 您可以使用 color-hex 等服務探索各種代碼:

顏色十六進位網站。

找到完美的十六進位代碼後,請登錄您的 WordPress 儀錶板。 然後導航到外觀>自定義:

如何更改 WordPress 中的鏈接顏色。

在左側菜單中,選擇附加 CSS。 您現在可以輸入以下 CSS:

{ 顏色:#0000FF; }

確保將 color: 值替換為您之前確定的十六進位代碼。 要使您的更改生效,請單擊發布:

WordPress 定製器。

您網站上所有鏈接的顏色現在應該會發生變化。 如果您對這種新外觀不滿意,您可以隨時在 WordPress 定製器中輸入不同的十六進位代碼:

附加 CSS 設置。

在某些時候,您可能會改變主意並決定恢復主題的默認鏈接顏色。 為此,只需刪除定製器的附加 CSS 部分中的所有代碼,然後單擊發布。

2.檢查WordPress定製器

根據您選擇的主題,您可以在 WordPress 定製器中修改您的鏈接。 這意味著您不必編寫任何 CSS。

在您的 WordPress 儀錶板中,導航到外觀 > 自定義並搜索任何標記為顏色的選項。 這些設置可能因主題而異。

例如,如果您使用我們自己的 Hestia WordPress 主題,請選擇外觀設置 > 顏色。 然後,您可以使用強調色設置自定義鏈接:

Hestia WordPress 主題。

或者,如果您有特定的十六進位代碼,您可以將此值輸入到隨附的文本欄位中。 當您對自己的選擇感到滿意時,單擊發布。

在嘗試了各種顏色後,您可能會決定更喜歡默認顏色。 如果是這種情況,您可以通過單擊默認按鈕恢復 Hestia 的原始強調色。

我們的 Neve 主題還可以讓您直接在 WordPress 定製器中輕鬆定製您的鏈接。 在左側菜單中,選擇顏色和背景:

如何使用 Hestia 主題更改 WordPress 中的鏈接顏色。

然後選擇主要操作。 您現在可以從顏色選擇器中進行選擇:

通過 WordPress 定製器更改 URL 顏色。

要使您的更改生效,請單擊發布。

如果您改變主意,可以通過滾動到「顏色和背景」菜單底部來恢復 Neve 的默認設置。 然後選擇全部重置為默認值。

3. 使用 Elementor 頁面構建器

Elementor 擁有超過 500 萬的活躍安裝,是最受歡迎的 WordPress 頁面構建器插件之一。 如果您在網站上使用 Elementor,則可以通過在 Elementor 編輯器中打開任何頁面或帖子來更改鏈接顏色:

Elementor WordPress 頁面構建器。

在左上角,選擇漢堡圖標。 然後點擊站點設置:

如何使用 Elementor 在 WordPress 中更改鏈接顏色。

接下來,選擇排版。 在隨後的菜單中,您可以更改鏈接處於默認未選中狀態時的顏色。 要進行此更改,請確保選中「正常」選項卡:

Elementor 站點設置。

接下來,單擊顏色設置附帶的任一圖標。 從左到右,這些圖標會啟動主題的全局定義顏色列表或 WordPress 顏色選擇器:

使用頁面構建器更改 WordPress 中的鏈接顏色。

在自定義鏈接時,您可能還想更改各種排版屬性。 這包括樣式、字母間距和行高。 您可以使用排版彈出窗口進行這些更改:

如何使用 Neve 主題更改 WordPress 中的鏈接顏色。

Elementor 還為您提供了定義不同懸停顏色的選項。 這可以確認訪問者已成功定位到特定鏈接,這對於具有多個 URL 的頁面特別有用。 對於那些有視力相關障礙的人來說,它還可以提高您網站的可訪問性:

使用 Elementor 更改懸停蓋。

要進行此更改,請選擇 Elementor 左側菜單中的「懸停」選項卡。 然後,您可以使用熟悉的顏色和排版彈出窗口來創建獨特的懸停效果。

完成自定義 URL 後,不要忘記單擊「更新」按鈕。 Elementor 現在會將這些更改應用於所有 Elementor 設計和模板中的每個鏈接。

4. 使用 Beaver Builder 插件和主題

Beaver Builder 是一種直觀的拖放式構建器,已被近 40 萬個網站使用。 如果您使用這個流行的插件和 Beaver Builder 主題,那麼您可以訪問一系列預設。 要更改 WordPress 中的鏈接顏色,您需要覆蓋這些預設。

在您的 WordPress 儀錶板中,導航到外觀 > 主題。 然後將滑鼠懸停在 Beaver Builder 主題上並選擇自定義。 這將啟動 Beaver Builder 編輯器:

Beaver Builder 頁面編輯器。

在左側菜單中,導航到「常規」>「強調色」。 您現在可以單擊「強調顏色」並使用後續選擇器選擇新顏色:

使用 Beaver Builder 更改強調色。

如果您有特定的十六進位代碼,您可以在隨附的文本欄位中鍵入該值。 與 Elementor 類似,當您將滑鼠懸停在鏈接上時,Beaver Builder 為您提供了定義不同顏色的選項:

Beaver Builder 的口音設置。

編輯這些預設後,您可以通過單擊發布來更新您的站點。 您的鏈接現在將擁有全新的外觀和感覺! 如果您想在任何時候恢復 Beaver Builder 的默認設置,只需導航回此部分並單擊默認按鈕。

5. 在 WordPress 編輯器中更改單個鏈接的顏色

到目前為止,我們介紹的所有方法都改變了整個網站的鏈接顏色。 一致的設計對於呈現專業形象通常是必不可少的。 它還可以幫助用戶理解和瀏覽您的網站。

但是,有時您可能需要覆蓋這些站點範圍的設置。 例如,您可能希望將注意力吸引到具有多個 URL 的頁面上的特定鏈接。 或者,您可以嘗試通過創建與您網站的其餘部分設計形成對比的登錄頁面來吸引訪問者的注意力。

您可以使用標準的 WordPress 編輯器更改單個鏈接的顏色。 首先,突出顯示有問題的 URL。 在出現的浮動工具欄中,選擇向下箭頭:

WordPress 頁面和帖子編輯器。

然後選擇文本顏色。 您現在可以選擇預定義的顏色或選擇自定義顏色。 後者啟動 WordPress 的內置顏色選擇器:

如何更改單個鏈接的顏色。

您可以重複這些步驟,將獨特的顏色應用到此頁面上的任何其他鏈接。 如果您對結果感到滿意,請照常更新或發布頁面。

關於如何更改 WordPress 鏈接顏色的結論

在創建美觀、專業設計的網站時,正確的 WordPress 主題至關重要。 但是,每個站點都是獨一無二的,即使找到了完美的主題,您可能仍然需要進行一些調整。

讓我們快速回顧一下在 WordPress 中更改默認鏈接顏色的五種方法:

  1. 添加 CSS 代碼。
  2. 檢查 WordPress 定製器。
  3. 使用 Elementor 頁面構建器。
  4. 使用 Beaver Builder 插件和主題。
  5. 更改單個鏈接的顏色。

有關使用最佳顏色的一些提示,請查看我們關於為您的網站選擇配色方案的帖子。

您對如何自定義 WordPress 鏈接顏色有任何疑問嗎? 讓我們在下面的評論部分中討論它們!

相關文章