在這篇文章中，我們探討如何通過 Elementor 設(shè)置字體和顏色，以確保你的網(wǎng)站保持一致的風(fēng)格，同時(shí)為需要的部分保留靈活性。

Elementor 字體和顏色的默認(rèn)設(shè)置

在 Elementor 中，你可以啟用或禁用默認(rèn)的全局顏色和字體設(shè)置。這些設(shè)置可以在 Elementor 的“常規(guī)”設(shè)置中找到，提供了兩個(gè)主要選項(xiàng)：

• 禁用默認(rèn)顏色
• 禁用默認(rèn)字體

啟用或禁用這些選項(xiàng)可以極大地影響你的設(shè)計(jì)工作流程。當(dāng)你禁用這些默認(rèn)設(shè)置時(shí)，Elementor 將不再強(qiáng)制應(yīng)用它的默認(rèn)顏色或字體，轉(zhuǎn)而使用你在“站點(diǎn)設(shè)置”中定義的全局顏色和字體。

這樣你可以根據(jù)自己網(wǎng)站的需求進(jìn)行調(diào)整，而不會(huì)被 Elementor 的預(yù)設(shè)限制。

何時(shí)應(yīng)該禁用默認(rèn)顏色和字體

1. 一致性的需求

如果你希望網(wǎng)站的字體和顏色在不同的頁面、部分或小部件之間保持一致，禁用默認(rèn)顏色和字體可能是一個(gè)不錯(cuò)的選擇。禁用這些選項(xiàng)意味著 Elementor 將使用你預(yù)先設(shè)置的全局樣式。例如，如果你希望網(wǎng)站的所有標(biāo)題都使用特定的字體，如 Montserrat，只需在站點(diǎn)設(shè)置中將其設(shè)置為全局字體，當(dāng)你拖動(dòng)一個(gè)新的標(biāo)題小部件到頁面上時(shí)，它會(huì)自動(dòng)應(yīng)用該字體。

案例：取消選中兩個(gè)框的效果 假設(shè)你將 Montserrat 字體應(yīng)用為全局字體，當(dāng)你取消選中這兩個(gè)框時(shí)，任何新添加的文本小部件將自動(dòng)繼承該字體和你設(shè)定的全局顏色。這種一致性對于設(shè)計(jì)和用戶體驗(yàn)來說非常重要，確保了網(wǎng)站風(fēng)格的連貫性。

2. 使用自定義 CSS 的靈活性

如果你更喜歡通過自定義 CSS 來控制網(wǎng)站的樣式，取消默認(rèn)顏色和字體會(huì)讓事情變得更加靈活。這樣做的好處是，Elementor 不會(huì)自動(dòng)應(yīng)用它的全局樣式，這使得你可以完全通過 CSS 來定義頁面元素的樣式。

然而，如果你禁用默認(rèn)設(shè)置但又不使用自定義 CSS，你可能會(huì)發(fā)現(xiàn)頁面上的文字和顏色看起來并不如預(yù)期。因此，禁用默認(rèn)設(shè)置通常適用于希望完全控制樣式的用戶，尤其是那些熟悉 CSS 的用戶。

添加自定義 CSS 的技巧

在使用自定義 CSS 時(shí)，有時(shí)需要使用 !important 標(biāo)簽來覆蓋 Elementor 的默認(rèn)樣式。比如，如果你想通過 CSS 來更改 H1 標(biāo)題的顏色和字體，可以使用以下代碼：

cssCopy code
h1 {
    color: var(--e-global-color-accent) !important;
    font-family: Verdana !important;
}

在這個(gè)例子中，如果不添加 !important 標(biāo)簽，你的自定義樣式可能不會(huì)應(yīng)用，因?yàn)?Elementor 的全局設(shè)置具有更高的優(yōu)先級(jí)。

啟用或禁用全局顏色和字體的不同效果

1. 全局顏色和字體的應(yīng)用

當(dāng)你啟用了全局顏色和字體，Elementor 將自動(dòng)為頁面中的所有元素應(yīng)用全局樣式。這對于那些不熟悉 CSS 或希望節(jié)省時(shí)間的用戶來說是非常便利的。例如，如果你在站點(diǎn)設(shè)置中選擇了某種顏色作為全局配色方案，所有按鈕、標(biāo)題和文本都將自動(dòng)應(yīng)用該顏色。這種設(shè)置可以確保設(shè)計(jì)的一致性，并節(jié)省大量手動(dòng)調(diào)整的時(shí)間。

2. 選中禁用框時(shí)的效果

選中禁用框后，Elementor 將不再自動(dòng)應(yīng)用任何顏色或字體。此時(shí)，你可以完全通過自定義 CSS 來控制網(wǎng)站的樣式，而不需要用 !important 標(biāo)簽來覆蓋全局設(shè)置。例如，以下代碼可以應(yīng)用于 H1 標(biāo)題：

cssCopy code
h1 {
    color: var(--e-global-color-accent);
    font-family: Verdana;
}

這意味著你的自定義樣式將優(yōu)先于任何全局設(shè)置，并且不需要使用 !important 標(biāo)簽來覆蓋。

何時(shí)應(yīng)當(dāng)選中或取消禁用框

根據(jù)你的需求和工作流程，你可以選擇選中或取消禁用框：

• 取消選中： 如果你想保持網(wǎng)站設(shè)計(jì)的一致性可以選中，因?yàn)?Elementer 將自動(dòng)應(yīng)用全局顏色和字體。這種方法特別適用于那些不希望過多定制網(wǎng)站樣式的用戶。
• 選中： 對于那些希望通過自定義 CSS 完全控制網(wǎng)站樣式的用戶，會(huì)讓設(shè)計(jì)更加靈活。在這種情況下，Elementor 將不會(huì)應(yīng)用任何全局樣式，而是允許你通過自定義 CSS 進(jìn)行完全控制。

采用混合方法設(shè)置

取消選中字體設(shè)置，而保留顏色設(shè)置。這樣，我可以確保全局字體（如 Montserrat）自動(dòng)應(yīng)用于整個(gè)網(wǎng)站，同時(shí)通過自定義 CSS 來控制特定元素的顏色。這種方法能夠確保設(shè)計(jì)的一致性，同時(shí)允許我在需要時(shí)進(jìn)行進(jìn)一步的定制。

對于顏色設(shè)置，勾選禁用選項(xiàng)，尤其是希望為特定元素應(yīng)用獨(dú)特的配色方案時(shí)。

使用自定義全局顏色和字體的技巧

為了在 Elementor 中更好地管理字體和顏色，你還可以考慮創(chuàng)建自定義的全局顏色和字體集合。這樣可以確保所有頁面和小部件在添加時(shí)自動(dòng)繼承你預(yù)定義的樣式，同時(shí)也使未來的樣式更新更加簡便。

步驟：創(chuàng)建自定義全局樣式

1. 在站點(diǎn)設(shè)置中找到“全局顏色”和“全局字體”選項(xiàng)。

2. 自定義你的配色方案和字體樣式，將它們保存為全局樣式。

3. 當(dāng)你在頁面上添加新元素時(shí)，所有小部件將自動(dòng)繼承這些全局設(shè)置。

通過這樣的設(shè)置，你不僅能夠節(jié)省時(shí)間，還能夠確保網(wǎng)站風(fēng)格的一致性。

結(jié)論：

Elementor 的字體和顏色設(shè)置都能為你提供豐富的設(shè)計(jì)選項(xiàng)。關(guān)鍵在于找到最適合你工作流程的設(shè)置：

• 一致性設(shè)計(jì)： 取消選中默認(rèn)顏色和字體有助于確保整個(gè)網(wǎng)站的風(fēng)格統(tǒng)一。
• 靈活設(shè)計(jì)： 選中兩個(gè)框能夠讓你在使用自定義 CSS 時(shí)擁有完全的控制權(quán)，而無需擔(dān)心全局設(shè)置的干擾。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息