如何為WordPress設定漸層色字體? 2步搞定

WordPress設定漸層色字體
透過簡單的CSS程式碼即可為WordPress設定漸層色字體,無需安裝多餘的外掛程式。
文章目錄

本篇文章共915 字,預計閱讀時間4 分鐘

新增字體漸層色CSS樣式到主題

WP後台– 外觀– 自訂,進入主題的自訂設定介面。

進入主題額外CSS

點選進入「額外CSS」。

新增文字漸層CSS代碼

貼上下方CSS代碼:

				
					.gradient{
	background: linear-gradient(to right, #ff6b6b, #4DA1F4); /* 从左到右的渐变 */
	-webkit-background-clip: text; /* 只对文本应用背景 */
	color: transparent; /* 使文本颜色透明,背景渐变色显示出来 */
    font-weight: bold;
}
				
			

可以透過修改:background: linear-gradient(to right, #ff6b6b, #4DA1F4); 這行程式碼,調整文字漸層的效果。

  • 「to right」是漸變的方向
  • 也可以透過度數調整漸變的角度“45deg”
  • 「to right」後面的參數是漸層顏色,可以填寫多個顏色
  • 顏色可以是「#ffffff這樣的色號,或者是「red這樣的單字形式

新增CSS代碼後記得儲存。

WordPress設定漸層色字體

開啟文章或頁面的編輯頁面。

Elementor文字元素的進階設定介面

為文字元素添加類別名

為想要新增漸層效果的文字元素新增類別名稱「gradient」。

這個類別名稱和我們加入css程式碼時的類別名稱一致。

文字漸層色效果預覽:

文字漸層效果1

背景:線性漸層(向右,#ff6b6b,#4DA1F4);

向右漸變,兩個漸層色。

文字漸層效果2

背景:線性漸變(向右,紫色,#ff6b6b,#4DA1F4,紅色);

向右漸變,四漸層色。

文字漸層效果3

背景:線性漸變(到頂部,紫色,#ff6b6b,#4DA1F4,紅色);

向上漸層。

漸層色文字效果

越大的字體,漸層效果會更明顯。

只想為指定區域或元素添加CSS樣式請參考在WordPress中加入CSS代碼

至此,為WordPress設定字體漸層教學結束。

還推薦你看:自訂WordPress後台登入頁面樣式 

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章
zh_TWZH_TW