最佳化你的 Elementor – Fonts / Color / Section 一次搞定

Elementor 是 WordPress 頁面編輯器外掛 (Page Builder) 之一，為一家以色列公司 Elementor Ltd. 於 2016 年創立。目前已超過 500 萬次的下載安裝，它最大的特色在於可以讓你透過用滑鼠拖曳區塊的方式，在不用寫任何程式碼的情況下，直接建構出一個功能完整且美觀的網站，縮短了以往製作網頁的時程。

利益揭露：文章中的連結可能為推廣連結，透過此連結購買產品或服務，我將得到廠商的推廣獎金；但不論是直接或間接購買，皆無需負擔額外的費用。

Elementor 的特色

1. 容易上手：所見即所得的編輯畫面，操作直覺。
2. 製作快速：提供多種版型，可以直接匯入，快速完成一個頁面。
3. 使用人數最多：豐富的社群討論資源，如：Elementor Community on Facebook、Elementor Community、Elementor頁面編輯器愛好者討論區。

Elementor Website Builder

什麼是頁面編輯器?

以欄、區塊的概念，搭配豐富的元素，使編輯頁面時更加靈活、呈現多種組合版面。
市面上常見的頁面編輯器有：

• Divi Builder
• Elementor
• WPbakery Page Builder
• Beaver Builder
• Oxygen Builder

如何有效管理 Elementor 的 Fonts、Color、Section 呢？
若您是第一次接觸 Elementor，可以先閱讀：WordPress 頁面編輯器 – Elementor 教學 (初級) 🙂

Theme Style (網站設定)

Theme Style (網站設定) 可以設定的元素有：圖片、表單、按鈕、標題及內文、超連結、背景等。

• 版本需求：Elementor Version 2.9 以上。
• 可以一次性調整整站的顏色、字型等設定。
• 維持網頁設計的一致性。
• 設定每個元素的預設樣式，如：標題、按鈕等。
• 官方文件：Introducing Theme Style: We’re Bringing Global Theme Design Into Elementor

一般設定

至網站後台 / Elemenotr / 設定 / 一般，勾選「停用預設顏色、禁用預設字型」，讓 Elementor 的 Theme Style (網站設定) 生效 ，使網站樣式一致，避免與佈景主題設定產生衝突。

全域字型

預設有主要、次要、文本、摘要，可以給予按鈕、部分文字等無法給予 HTML 標籤的元素使用。

Fallback Font Family

可以設定後備字型，類似 CSS font-family 的設定， 若預設字型不支援或沒有該字型，則採用第二種字型，依此類推。

選擇設定好的全域字型或顏色

點擊樣式右側地球的小圖示，使用設定的全域字型或顏色，避免每個元素個別設定樣式，以便於後續的更新與維護，確保設計樣式的一致性。

排版

設定 HTML 標籤，如 p, link, H1, H2, H3 等…

若對字型選擇沒有想法，可以參考我先前的文章 🙂
網頁字型指南：了解英文字型 3 大類，讓你的網站更專業！(2021 最新)

Global Colors

預設有主要、次要、文本、摘要，可以設定整站顏色。

如何選擇顏色

(1) Material Design Palette
線上顏色組合匹配工具，可以選擇自己喜歡或符合形象的顏色，快速生成配色方案 。

(2) 網站色彩計畫 (2021最新)
進行網頁設計時可以思考六種顏色：主色、次要色、按鈕顏色、文字顏色、裝飾線顏色、其他。

Section 設定

(以下內容取自 Blue Li 分享)

CSS Level

設定 section 前必須了解 Elementor 的 CSS 是最後一層 CSS 會複寫之前的 CSS。

建立預設 section：.std-section

Padding top and bottom 96px 低於 992px (垂直螢幕) 就自動降為 48px
將 CSS 設定在 1st Level ， 只要在 2nd Level 或 3rd Level 設定更改數值，就會自動以 2nd Level 或 3rd Level 的值為優先。若 section 需要 full width 沒有 padding，就不需要加 .std-section 這個 CSS Class。

.std-section{
    padding-top: 96px;
    padding-bottom: 96px;
} 
@media screen and (max-width: 992px){ 
.std-section{
    padding-top: 48px;
    padding-bottom: 48px;
} 
}

小工具空白間隔

把小工具空白間隔預設的 20px 拿掉
小工具空白間隔預設 20px 會影響每個元素間的編排，也許只有 Heading 的元素會需要，將 CSS 設定在 1st Level，加入 CSS 後使標題與內文產生適當的間隔，如此一來網站的編排間隔才會有一致性。

.elementor-widget-heading .elementor-heading-title {
    margin-bottom: .2em;
}

設定好 Fonts / Color / Section 可以改善什麼？

• 效能：善用全域設定，省去個別設定元素的文字、顏色等樣式。
• 維護：只要更改全域設定，即可以一次性的更新，不用一個一個更改。
• 設計：確保整站的一致性，如：配色、文字大小等。
• 時間：只需要花費更新全域設定的時間。
• 人力：將來方便編輯人員更新、新增頁面。