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

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

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

elementor 02
圖片來源:Elementor

Elementor 的特色

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

什麼是頁面編輯器?

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

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

Theme Style (網站設定)

elementor 03

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

一般設定

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

elementor 04

全域字型

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

Fallback Font Family

elementor 05

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

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

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

elementor 06

排版

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

elementor 07

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

Global Colors

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

elementor 08

如何選擇顏色

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

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

Section 設定

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

CSS Level

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

elementor 11

建立預設 section:.std-section

Padding top and bottom 96px 低於 992px (垂直螢幕) 就自動降為 48px
將 CSS 設定在 1st Level , 只要在 2nd Level3rd Level 設定更改數值,就會自動以 2nd Level3rd 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;
}

elementor 12

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

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

延伸閱讀
相關標籤:
SHARE
分享在 facebook
分享在 twitter
分享在 linkedin
WRITTEN BY
Hend Chen
Hend Chen
專長於網頁設計 、UI 設計、品牌設計。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe