iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

WordPress 初探 -- 據說是最經典 Avada 主題可以做些什麼呢?系列 第 20

20 - 常用的網站的整體樣式客製化 - 顏色、TitleBar、文字 設定

  • 分享至 

  • xImage
  •  

“ 全站式 ” 常用調整內容導引

網站顏色:

D20-1

  • Predefined Theme Skin 還蠻酷的,亮或暗的主題選擇,很像 iOS 13 。 點擊後前台就會直接切換
  • Predefined Color Scheme 還不確定是針對每個主題都有不同的配色或是全主題都有這些顏色的推薦,一樣也是點擊後前台就會直接切換,

輕鬆秒換成暗主題+亮桃紅導引色的網站 (不過還是原配好看些XD )
D20-2


Page Title Bar:

D20-3

  • Creative 樣式中,此區域是被隱藏,並以 Slider 作為對應功能。
  • Styling可控內容:
    • 寬、高、手機高
    • 背景色
    • 邊框色
    • 標頭文字大小
    • 行高
    • 標頭字色
    • 副標字色
    • 文字對齊
  • Background Image 可控內容:
    • 自定義背景圖
    • Retina背景圖
    • 100%背景圖
    • Parallax 效果
    • Fading Animation。

Typography

分為 Body、Heading 兩大調整區塊

Body 可控內容

D20-4

Headers 可控內容

  • H1~H6 + Post Title & Post Title Extras Typography :

    • Font Family (兩組)
    • 字體粗細程度
    • 字體子集
    • 字大小
    • 行高
    • 字距
    • margin上下
    • 字色
      (調整區塊下附即時範例圖)
  • H1~H6是對應到 Text Block 文字編輯器中的 標題1~ 標題6 (如下圖 )
    D20-5

另外看著還有針對搜尋和麵包屑的調整選項欄位,不過影片沒帶到,這邊就也先暫略,之後實作有調整到再整理。


上一篇
19 - 如何在 Footer 新增工具欄位 與 可套用的小工具列表
下一篇
21 - 一次編輯多個文章並使用彙整頁面功能,輕鬆製作指定的內容列表
系列文
WordPress 初探 -- 據說是最經典 Avada 主題可以做些什麼呢?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言