專注於企業網站架設,分享WordPress教學和Elementor教學
不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%,感謝你的互惠互助

Elementor主題樣式設置詳解

更新日期:2021-06-13

掃碼加入 讀者學習群

相關 教學

我自用的 架設網站資源

當你點擊本站的鏈接購買主機、主題、外掛,我會得到一些佣金用於運營網站,但不會影響你的購買價格,我只推薦自己在用的,感謝有你的支持~比心( •̀ ω •́ )y

Cloudways

不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%
了解詳情→

elementor logo gradient 01 1
Elementor

最熱門的網頁可視化設計編輯器,我的網站就是用它建的
了解詳情→

Namesilo

註冊網域,購買時使用優惠券loyseo可減1美元
前往註冊→

Share on facebook
Share on twitter
Share on linkedin

Elementor的theme style主題樣式可設置各種元素的默認樣式,例如背景,標題,按鈕,圖像和表單字段。這些設置將覆蓋主題自帶的樣式設置,從而使您可以使用Elementor為非Elementor構建的元素設置樣式。

默認情況下,這裡的樣式只會應用於非Elementor元素, 例如WooCommerce結帳字段,Contact Form 7標籤等等。你也可以強制將主題樣式設置應用於Elementor內置的元素,只需要禁用Elementor的默認顏色和字體(下文將介紹方法)。

譬如我用的主題是免費的Hello elementor(沒錯,是Elementor外掛的官方主題),這樣我就能省下主題的錢了,然而這個主題沒有提供主題樣式設置功能,但直接用本文中講解的Elementor外掛的主題樣式功能就可以了。

下圖就展示了主題樣式功能的實際效果,該一處,處處改,很是方便;同時,如果你對元素的樣式做了自定義,而不是默認的default,那就不會取用全局的主題樣式。

elementor-theme-style

如何禁用默認字體和默認顏色

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

功能入口:在用Elementor編輯頁面時,點擊左上角的elementor style setting 2按鈕即可進入下圖中的全局樣式與設置面板,再點擊下圖中的“主題樣式”,它提供了背景、排版、按鈕、表單、圖像和自定義CSS的設置,注意,設置任一樣式時,當?為藍色時,說明當前有自定義的樣式,若想恢復默認,點擊旁白你的刷新?按鈕。接下來將逐一講解

背景

elementor theme style tutorial
  • 背景類型,為頁面設置背景提供了兩種背景類型
    • 顏色+圖像
    • 漸變色

排版

elementor theme style tutorial

排版是服務於文字內容的,用於設置網站中各類文本內容的顏色、字體、字號、行距等等,具體如下:

  • Body:
    • 文本顏色:用於設置所有文本的默認顏色
    • 排版:用於設置所有文本的默認字體、樣式等等,詳見這篇文章
    • 段落間距:用於設置段與段之間的距離
  • 鏈接:
    • 標準和懸停:標準是指默認用戶會看到的樣子;而懸停是鼠標懸停於鏈接上時的樣子
    • 顏色和排版的功能同上
  • H1-H6:你可以將它理解為內容的標題、子標題,一個頁面只要有一個H1,作為最大的標題,而H2-H6都是字標題,用來體現內容的邏輯層級
    • 顏色和排版的功能同上

按鈕

elementor theme style tutorial
  • 排版:用於設置按鈕上的文字的排版
  • 文本陰影:用於設置按鈕上的文字的陰影效果
  • 標準和懸停,標準是指默認用戶會看到的樣子;而懸停是鼠標懸停於鏈接上時的樣子;針對標題和懸停都可以設置如下選項
  • 文本顏色
  • 背景顏色:指按鈕的顏色
  • 盒子影子:指按鈕的影子
  • 邊框類型:用於設置按鈕的邊框,譬如實現、虛線等等
  • 寬度:用於設置按鈕邊框的粗細,並且可以實現不同設備上不同粗細,點擊寬度旁邊的電腦圖標就可以切換設備進行設置
  • 顏色:用於設置邊框的顏色
  • 邊框半徑:用於設置按鈕的四個角,調整半徑數值,可以設置為圓角的、圓弧等等各種自定義效果
  • 內距:用來設置文本和按鈕邊框之間的距離,一般用它來調整按鈕的大小

表單字段

elementor theme style tutorial

用於設計聯繫表單等填表類元素的樣式

  • 標籤:是指表格中每個輸入項上方或左方的文本,譬如Name、Email等等
  • 字段:是指每個輸入項,譬如輸入框
    • 標準和focus:標準就是什麼都不干時看到的樣子;focus就是焦點的意思,是指鼠標點選輸入框時的樣子,對這兩種狀態都可以設置文本顏色、背景顏色、盒子影子、邊框類型、邊框寬度、邊框顏色、邊框半徑、內距,跟上方按鈕的設置功能一樣,此處不做贅述。

圖像

elementor theme style tutorial

用於設置圖像的默認效果,譬如本站就在圖片周圍加了寬度為4px,顏色是灰色的邊框,這樣在長文裡看起來就有了區隔和一致性,對圖像同樣有標準和懸停的設置,也同樣是邊框類型、邊框寬度等設置,跟上方按鈕的設置功能也一樣,此處不贅述。

不同的是,有個CSS過濾器功能,可以給圖片設置模糊度,亮度,對比度和飽和度,不過通常我們也用不上它。

custom css自定義css

用於給頁面添加自定義CSS,需要CSS知識,大部分情況我們都不需要用到它。

本教學到此結束,下面是與樣式有關的其他文章,也許你也正好需要哦~

點贊
0 / 5 0

Your page rank:

超快獨享主機
Cloudways
免費試用3天,無需充值
費用月結| 不用一次性付整年
*註冊優惠碼Promo code:LOYSEO
*用Gmail郵箱,註冊易通過