如何編輯組件的樣式（編輯樣式）？

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

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

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

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

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

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

1、組件全局

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

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



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




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

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




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

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

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



2、標題欄

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

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




3、內容區

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

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

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

三.功能更新

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

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

（2）新增功能操作方法：

（3）新增功能應用效果：