直接將此元件拖拉至畫布上欲插入圖片方框的位置。 #
插入元件-圖片方框:

點選圖片方框段(螢光處)可編輯「段」佈局、樣式、進階功能。

將游標移到畫布上圖片方框中的圖片或文字處點選,或於右上角出現編輯圖片方框符號,點選進入編輯圖片方框。

編輯圖片方框–內容 #
點選編輯圖片方框後,顯示編輯圖片方框,一樣包含內容、樣式、進階。

範例將編輯圖片方框-內容,選擇圖片從檔案中上傳圖片,將標題描述文字改為MASSAGE。

而畫布上圖片方框,亦依照上述設定所呈現變更的畫面。

編輯圖片方框–樣式 #
編輯圖片方框-樣式,分為圖片、內容兩個下拉選單。
圖片,調整圖片與標題文字間的間距及圖片寬度(大小),圖片邊線是否呈現圓角及圖片是否設定懸停動畫。
範例先調整圖片與文字間距為5,將寬度調為100%,懸停動畫為Grow(游標滑至圖片時放大)。

編輯圖片方框-樣式中的內容,主要可以調整標題文本與描述說明文本顏色與排版 。
範例先調整標題的文本字型與顏色,尺寸為30PX,重為600,字元間距1.2。

並將描述文本顏色改為深灰色,文本尺寸改為16PX。

畫布上,範例將根據上述調整圖片間距、文本字型、顏色與尺寸而變更。

基本上圖片方框工具透過編輯內容與樣式即可簡易製作符合需求的設計,使用者亦可自行調整內容、樣式與進階功能。
新增欄 #
接著可以運用新增欄的功能,讓圖片方框有更多的變化。
將游標移至畫布上圖片方框內容時,於左上角顯示編輯欄圖示,點選右鍵將出現選單,並於選單中按下複製(^+D)。
選單中顯示兩個複製,分別為複製(^+D)與複製(^+C),而兩者差別為:
前者複製(^+D),點選後畫布將自動新增欄並於欄內自動貼上所複製的元件內容。
後者複製(^+C),點選後為一般複製功能,手動挑選頁面上的段或欄,並在段或欄內再按下右鍵-貼上,手動貼上所複製的元件內容。


範例中按下複製(^+D)後,畫布上圖片方框將會自動新增一欄並複製貼上已建立的圖片方框(包括圖片、文本顏色、尺寸,及圖片懸停效果等)。範例再重複一次動作,呈現為三欄相同內容。

點選畫布上圖片方框第二欄的圖片或右上角點選編輯圖片方框,進入編輯圖片方框,依照前面所述變更內容與樣式;範例將重新選擇圖片、變更標題,使用者亦可再個別調整內容、樣式或進階功能。

範例再點選畫布上圖片方框第三欄的圖片或右上角點選編輯圖片方框,進入編輯圖片方框,亦重新選擇圖片、變更標題描述。
畫布上即可將單一元件呈現三欄不同圖片及不同描述的組合。

直接將此元件拖拉至畫布上欲插入圖示方框的位置。 #
插入元件-圖示方框:
將圖示方框元件拖拉至畫布上欲插入的位置,編輯元件內容/樣式/進階功能與圖片方框大致相同,差異點為編輯圖示(Icon)與編輯圖片(Image)的差異,可以依照需求選擇符合設計的元件來搭配。

編輯圖示方框–內容 #
編輯圖示方框-內容,僅圖示部分,是以圖示(包含圖示尺寸)而非圖片,以及圖示可檢視方式稍有不同;其餘編輯圖示方框-內容與編輯圖片方框-內容,設定方式相同。

範例就編輯圖示的部分稍作說明,編輯圖示方框-內容,將游標移至圖示時,點選並進入Icon Library,選擇圖示(EX:Map),並將檢視改為框架(即外框),堆疊形狀選為圓形。標題描述與說明,與圖片方框相同。

畫布上圖示方框,依照上述選擇Icon,設定為圓形框架後所呈現變更的畫面。

編輯圖示方框–樣式 #
各元件於樣式面板,功能大致相同,皆可以調整各元件中各元素的顏色或尺寸。
編輯圖示方框-樣式,分為圖示、內容兩個下拉選單。
樣式中的圖示,此為與圖片方框"圖片"差異處;可針對圖示(Icon)編輯顏色、尺寸的變更以及與文本的間距或圖示本身與堆疊形狀距離等功能。
範例在此調整圖示主要顏色改為朱紅色。

畫布上圖示方框,依照上述調整所呈現的畫面。
