維看幫助中心

如何編輯組件的樣式(編輯樣式)?

瀏覽數量:329     作者:本站編輯     發佈時間: 2017-02-07      來源:本站

如何編輯組件的樣式(編輯樣式)?如何設置某一塊內容的背景、邊框、邊距、文字樣式?

編輯樣式為組件通用功能,即幾乎每個組件都是有“編輯樣式”這個功能的。


一.如何進入組件的“編輯樣式”功能?

把鼠標移到這塊內容(這個組件)所在的區域上,在這個區域的左上角或右上角或左下角或右下角即四角區域,出現組件名稱及一排操作按鈕,找到“編輯樣式”圖標,單擊該圖片即可進入組件的“編輯樣式”功能。

編輯樣式入口.png


二.什麼是組件全局、標題欄、內容區?

點擊“編輯樣式”圖標彈出編輯樣式的彈出層,可分別對組件全局、標題欄、內容區進行樣式編輯,當組件標題為空時,則不顯示組件標題,樣式編輯器中就沒有“標題欄”這個頁簽,同理如果組件內容區為空,則樣式編輯器中沒有“內容區”這個頁簽。點擊該圖標彈出編輯樣式的彈出層,可分別對組件全局、標題欄、內容區進行樣式編輯,當組件標題為空時,則不顯示組件標題,這裡就沒有“標題欄”這個頁簽,同理如果組件內容區為空,則沒有“內容區”這個頁簽。以文章分類組件為例做介紹:


編輯文章分類組件樣式

1、組件全局

組件全局頁簽下包含組件尺寸、組件背景、組件邊框、組件邊距。


如何調整組件的高度?手機端或Pad端出現內容被遮擋或留白情況,怎麼辦?
組件尺寸:可以設置組件的高度,一般清情況下都使用自適應的高度,若固定高度可能會導致不同終端下出現模塊被遮擋、留白等情況,此功能請謹慎使用(手機端或PAD端出現模塊被遮擋或留白情況,請首先檢查是否是設置了高度所致);

組件全局--組件尺寸

如何給一塊內容添加背景?如何給組件加背景?如何修改背景?
組件背景:可以給這個組件添加顏色背景或圖片背景,也可以選擇背景圖片的平鋪模式、平舖位置、背景尺寸,不同的選擇可以有不同的展示效果,可以分別點一下試一下哦。

組件全局--組件背景


如何給一塊內容添加邊框?如何給組件加邊框?

組件邊框:在這裡可以設置組件邊框的顏色、樣式(實線、虛線、雙實線、點)、邊框的粗細、邊框的圓角。

組件全局--組件邊框


什麼是組件內邊距?什麼是組件外邊距?如何設置組件邊距?

組件邊距:在這裡可以設置組件的內邊距和外邊距,內邊距和外邊距是如何定義的,請看下圖。

設置邊距時請考慮對手機端或pad端的影響,建議左右邊距設置同樣的距離最好不超過50px,上下也設置同樣的距離,這個距離到pad或手機是不會等比縮小的,如果邊距設置的比較大,到手機上有效內容佔的空間比較小,很不美觀。

設置邊距後的效果圖

2、標題欄

如何設置組件的標題欄?如何設置組件標題欄文字的大小?

標題欄設置:可以單獨對標題欄進行設置,可以選擇顯示或隱藏標題欄、可以設置標題欄的高度、背景、文字、邊框、邊距。如下圖所示:

文章分類組件--標題欄設置


3、內容區

如何設置組件內容區的背景/文字/邊框/邊距?

可以給組件內容區添加顏色背景或圖片背景、可以設置內容區非鏈接文字或帶鏈接文字的字體/大小/間距/行高/對齊方式/字體樣式等、可以設置內容區的邊框和內容區的邊距。

文章分類組件--內容區設置

設置好以上內容以後,若要同步到網站前台,需要點頁面上的“發布”按鈕才可以。

單擊發布按鈕.jpg




三.功能更新



1.樣式編輯器中組件全局新增陰影效果; (2017-9-30優化)

(1)新增功能應用場景:組件的樣式編輯器中增加“陰影效果”設置,支持對陰影方向、顏色、偏移、拓展、虛化等方面進行設置;

(2)新增功能操作方法:

QQ圖片20180514151943


(3)新增功能應用效果:

QQ圖片20180514152731


建站流程

找不到你的問題?
135-6001-3420
seoprixcom@gmail.com
214227632
Facebook
Twitter
Google
LinkedIn
Instagram
維看雲建站系統
專業外貿建站系統,為您打造一個適合谷歌的優化網站!
  • 客服QQ
    214227632
  • 微信手機
    (852) 6741 8807
  • 郵箱
    seoprixcom@gmail.com