專注於架設企業網站,分享WordPress教學和Elementor教學

Elementor的全局樣式與設置

更新日期:2024-08-21
本系列教學

正版分銷:

90元/1個網站/2年

最先進的WordPress頁面編輯器,能夠快速創建高端的、完美的網站。 適合任何主題,任何頁面,任何設計。
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
黑五優惠前4個月6折, 戳上方按鈕註冊即可自動帶入優惠碼BFCM2024
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com邮箱,注册易通过
遇到問題,聯繫我

本篇教學將介紹Elementor網頁編輯器的全域樣式與設置的常用功能,譬如設置全域的字體、顏色、頁面內容寬度、元素默認間距等等。

功能入口:在用Elementor編輯頁面時,如下圖所示,點擊site setting按鈕

Elementor的全局樣式與設置

然後你便能看到如下的配置選項了

site setting

Design System/設計系統

對全域顏色和全域字體進行設置。

Global colors/全域顏色

全域顏色可以讓我們配置常用顏色,以便在製作頁面時直接選擇調用,並且,當你修改全域顏色后,所有調用它的地方,也會統一更換,所以合理使用全域顏色,能夠快速的給網站換配色,也能節約你配色的時間。

Elementor的全局樣式與設置

Global Fonts/全域字體

全域字體可以讓我們配置全站常用字體,以便在製作頁面時直接選擇調用,並且,當你修改全域字體后,所有調用它的地方,也會統一更換。

Elementor的全局樣式與設置

Theme style/主題風格

可設置字體、按鈕、圖片、表格欄位的樣式。

需要注意的是:通常主題本身都提供了類似的字體、配色功能,兩者同時使用可能會令你混亂,需要你自己進行對比試驗。

由於每個主題與elementor的相容性有所不同,沒有一概而論的方案,同時,見下圖,elementor也提供了禁用本身的顏色與字體的功能,而選擇繼承主題的配置,通過這兩個選項,也可以説明你調試樣式。

Elementor的全局樣式與設置

有時候,主題和Elementor的全域樣式設置要搭配著使用。 如果你用的是Hello Elementor主題,那就不需要擔心這個問題,因為它是Elementor官方配套主題。

Typography/文字排版

Elementor的全局樣式與設置

在前文之中,我們定義了全域顏色和字體,接下來,你便可以在排版中運用它們,為網站里的常見內容設置顏色和字體,譬如內容(正文)、鏈接的顏色和排版,又或者H1-H6標題的顏色與排版。

排版設置好之後,在編輯頁面之時,若使用到這些既定的排版,就會直接運用此處的設置,而不需要額外設置啦。

Button/按鈕

Elementor的全局樣式與設置

按鈕也是架設網站過程中常用到的,我們在此處將按鈕的樣式設計好之後,之後在編輯頁面時,若使用按鈕元素,就會自動運用此處的樣式,免去我們重複配置按鈕樣式的工作。

你可以對按鈕的文字排版、文字投影、文字顏色、背景色、陰影、邊框類型與顏色、邊框圓角、內距進行設置。

Images/圖片

對圖片,可以配置常規和懸停時的邊框、邊角半徑、透明度、投影、css濾鏡、以及從正常到懸停效果的過渡時間。

Elementor的全局樣式與設置

Form fileds/表單欄位

當網站使用表單時,譬如企業網站常用的聯繫表單、詢盤表單,可以使用此處配置表單字段的樣式。

諸如欄位標題的顏色、排版,欄位本身的排版,常規以及輸入情況下的字體顏色、背景色、投影、邊框、邊角半徑,以及內距。

Elementor的全局樣式與設置

相關教學:

如何在WordPress中製作聯繫表單(3種方法)

如何用Elementor Pro製作彈出式產品詢盤表單

Setting/設置

Site identity/網站標識

在這裡可以上傳網站的名稱、描述、logo以及網站圖示。

Elementor的全局樣式與設置

相關教學:

WordPress建站必須要做的11件事

Background/背景

此處可設置網頁的背景色,純色或漸變色均可,也可以設置背景圖片,並且還能單獨設置移動端的背景色。

Elementor的全局樣式與設置

Layout/佈局

  • content width/內容寬度:用於設置網頁內容區域的預設寬度,預設值是1140px,當你想網站頁面更寬一點或更窄一些,就調這裡。
  • widget space/小工具間隔:可以理解為元素快之間的間距,預設是20px
  • Page title selector/頁面標題選擇器:這裡是服務於隱藏頁面標題功能的,如果你的主題的頁面標題的樣式選擇器不是entry-title,那麼你就需要更改此處了,如果你用的hello elementor主題,此處也不用改; 只有當你發現使用隱藏標題功能不生效時,才需要考慮修改這裡。
  • Stretched Section Fit To/拉伸部分以適用:在使用elementor的section時,有一個stretch setion的開關,用於拉伸對樣setion到指定的寬度,此處就是用於指定寬度的,只是這裡輸入的是父元素選擇器,拉伸的部分將與之相適應(例如#primary / .wrapper / main等)。 留空以適應頁面寬度。 默認是body,基本不用改這裡。
  • default page layout/頁面默認佈局:用於設置頁面的默認佈局,預設是全寬(elemlentor full width),它包含頁頭頁腳,如果設置為elementor canvas,頁面上就不會有頁頭頁腳了,而是一張空白的畫布。 如果選擇theme,則表示繼承主題的設置。 此外,不同主題還會提供不能的佈局選項,請按需調試使用吧。
Elementor的全局樣式與設置

breakpoints/斷點,你可以人為添加斷點,用於為網站適配不同解析度的設備,也就是常說的回應式。

Elementor的全局樣式與設置

Lightbox/燈箱

可以理解為圖片的彈出窗,如下圖所示,左側為燈箱的配置,右側為燈箱效果,圖中的數字與左側設置是逐一對應的

Elementor的全局樣式與設置
  • 圖像燈箱效果:滑動開關以全局啟用或禁用燈箱
  • 1.計數器:用於控制是否顯示圖片統計數量,通常用於相冊
  • 2.全屏:用於控制是否提供全屏功能按鈕
  • 3.縮放:用於控制是否提供縮放功能按鈕
  • 4.分享:用於控制是否提供分享功能按鈕,譬如分享到Facebook、twitter、Pinterest、下載圖片。
  • 5.標題:用於設置圖片下方的標題文案顯示什麼內容,選項有:沒有內容、圖片標題、圖片描述、字幕(caption)、圖片ALT
  • 描述:功能同上,你可以對圖片顯示兩種文案,這是第二種
  • 6.背景顏色:用於設置圖片周圍的背景色
  • 7.用戶界面顏色:這裡的漢化不大好,實際是控制按鈕或統計數字的顏色,譬如右上角的4個按鈕、翻頁按鈕等等。
  • 8.用戶界面懸停顏色:這裡是控制鼠標停留在按鈕或統計數字時的顯示顏色
  • 9.文本顏色:用於控制標題和描述的顏色
  • 10.工具欄圖標大小:用於控制右上方四個按鈕的大小
  • 11.導航圖標大小:用於控制翻頁圖標的大小

Custom CSS/自定義CSS

當已有的設計配置都無法滿足你的需求時,你可以額外添加css來定義樣式,前提是:你得學會怎麼寫css

Elementor的全局樣式與設置

相關問題

如何禁用預設字體和預設顏色

  1. 進入 Elementor > 設定 > 一般 頁面中
  2. 勾選兩個禁用預設字體,點擊保存即可
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 35

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
黑五優惠前4個月6折, 戳上方按鈕註冊即可自動帶入優惠碼BFCM2024
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com邮箱,注册易通过
遇到問題,聯繫我