如何新增圖文模塊、如何更換原有的圖片、如何線上調(diào)整圖片的尺寸或者編輯圖片、如何為圖片添加鏈接、如何為圖文模塊添加邊框背景?如何編輯文本內(nèi)容等等
提示：，每張圖的大小不超過512KB（一般網(wǎng)頁圖片，小圖40KB、大圖100KB已經(jīng)非常清晰）；上傳前，請根據(jù)個人需要先調(diào)節(jié)好圖片的尺寸比例（如正方形圖1:1，長方形圖3:2或者4:3或其它比例）以節(jié)省時間。請不要刪除正在使用的任何一張圖片，否則可能會造成頁面模塊無法顯示等現(xiàn)象。

一. 添加圖文模塊
首先，點擊頁面左上角“添加”, 在彈出功能條中選擇“圖文”并拖至頁面中的任意位置：

松手，該模塊添加成功，后續(xù)仍可以鼠標(biāo)拖動該模塊進(jìn)行任意移動。松手后，系統(tǒng)會自動彈出“模式更換”選擇您需要的樣式：

選擇后效如下

二、 編輯圖片

1.更換圖片

在這個界面，您可以選擇使用：
a. 我的圖片：本地上傳的所有圖片和最近使用過的圖片都會顯示在這個分類中（如果之前添加過子分類，如“example”等，則需要點擊 “example”后方可選擇這個類別下的圖片）。點擊指定圖片中間的“選擇使用”即可更換使用這張圖片。



b. 互聯(lián)網(wǎng)圖片：點擊后會出現(xiàn)輸入圖片URL的界面：

URL地址必須為一張圖片在某個網(wǎng)頁上的地址，注意，這個地址必須是以圖片格式后綴結(jié)尾的，如：
https://screenshots.eznetonline.com/screenshots/school-13-a.jpg

注意：如果使用互聯(lián)網(wǎng)圖片，系統(tǒng)會自動在“我的圖片”處保留一個副本，屆時也可以選擇直接使用保存好的圖片而放棄URL鏈接（URL鏈接方式的弊端：如果對方網(wǎng)頁撤除這個圖片，自己的網(wǎng)頁上將無法顯示，因這個URL鏈接已經(jīng)不再存在）
c. 重新上傳一張圖片：點擊右手邊的“上傳文件”上傳后再按a的流程選用即可

（注意：請調(diào)整自己的圖片尺寸比例以配合本身設(shè)計的比例）

3. 直接在頁面上調(diào)整圖片尺寸
頁面調(diào)整分為兩種：縮放模式和裁剪模式，這兩種模式可以通過點擊該功能標(biāo)互換

  和 裁剪模式

縮放模式：整圖縮放，類似放大鏡的功能，但處理不當(dāng)，可能出現(xiàn)壓縮的情況。此功能并不改變系統(tǒng)中已保存的圖的大小尺寸，僅在顯示的部分上作出調(diào)整，仍可以通過恢復(fù)高或?qū)挾葋砘謴?fù)到原圖的樣子
圖片上傳成功并顯示在網(wǎng)頁上, 我們可以通過拖動圖片模塊的右下角邊線來調(diào)整圖片的顯示的尺寸。頁面上直接調(diào)整大小可能會造成圖片被擠壓。為達(dá)到最好的圖片展示效果，建議上傳前先調(diào)整好圖片的尺寸和比例。
裁剪模式：固定圖片的一邊，減少顯示的部分。此功能并不改變系統(tǒng)中已保存的圖的大小尺寸，僅在顯示的部分上作出調(diào)整，仍可以通過恢復(fù)高或?qū)挾葋砘謴?fù)到原圖的樣子
左中右：原圖、縮放模式、裁剪模式

4. 編輯圖片并修改原圖
我們?yōu)榻ㄕ臼褂谜咛峁┝艘惶讏D片編輯插件, 在這里您只需要簡單的操作, 即可對自己已經(jīng)上傳并添加至頁面上的圖片進(jìn)行編輯, 而無需使用專業(yè)化的圖片編輯軟件, 鼠標(biāo)選中圖片模塊并點擊模塊上方“圖片編輯”功能按鈕 . 系統(tǒng)會彈出下面界面：


圖片編輯功能, 預(yù)設(shè)有美化圖片、人像美容、拼圖、動畫再功能，每種功能有不同效果。具體的每項功能, 您可以在實踐中慢慢體會。請記得每做一次調(diào)整，必須點擊“應(yīng)用”再進(jìn)行下一步的調(diào)整或者編輯。

5. 給圖片建立一個鏈接
雙擊圖片或點擊圖片上的屬性功能按鈕 , 系統(tǒng)彈出圖片設(shè)置對話框, 可以點擊設(shè)置鏈接按鈕選擇鏈接到：網(wǎng)址、頁面、郵件、文件等您需要的的地方。

“站外鏈接”：是指可以將圖片鏈接到互聯(lián)網(wǎng)上的某個頁面或某個站點, 只要您把地址填進(jìn)去即可。如下圖，以www.google.com為例，勾選“在新窗口打開鏈接”可以在新增的選項卡中打開www.google.com的頁面。

“頁面”：是指可以將圖片鏈接到您網(wǎng)站上面的某個頁面, 屬于站內(nèi)鏈接。設(shè)置好后，客戶點擊這個圖片，就會打開目標(biāo)的頁面以達(dá)到展示更多內(nèi)容的目的。如下圖中鏈接指向“商城動態(tài)”，則訪客點擊這張圖片時，會打開“商城動態(tài)”這個頁面。


“郵件”：是指可以將圖片鏈接到郵箱上, 當(dāng)點擊該鏈接時，系統(tǒng)會自動調(diào)用本地的郵件發(fā)送程序（如outlook或者foxmail，注意：訪客必須本地有安裝這樣的客戶端方可打開，否則點擊沒有反應(yīng))，發(fā)送email到您設(shè)定的賬戶。如下圖的設(shè)置，當(dāng)點擊圖片的時候，會打開客戶端郵件編輯界面并進(jìn)入編輯一封主題為“產(chǎn)品咨詢”、收件人為abcde@google.com的郵件。

“文件”：是指可以將圖片鏈接到您已上傳在“我的文件”中的文件（如jpg，pdf，word，mp3等等）。當(dāng)點擊該圖片時，系統(tǒng)會調(diào)用訪客本地電腦的相關(guān)程序并打開相應(yīng)的文件。注意：如果訪客本地客戶端沒有可以支持的軟件或者版本不支持，將無法打開這個文件。添加的方式如下圖：選擇好文件后確定，再保存即可。

6.為圖片模塊添加邊框背景等
在圖片“屬性”的設(shè)置界面的下半部分，有5個主要的功能：圖片說明、圖片模塊邊框、常用、圖片模塊背景和頁腳元素。

1）圖片說明：當(dāng)設(shè)置了圖片說明后，訪客鼠標(biāo)放在該圖上就會自動顯示說明的內(nèi)容。如圖中：“暢銷產(chǎn)品AAAA！”不指向時不顯示。

2）模塊邊框：我們可以為每個圖片設(shè)置邊框，而邊框也可以選擇線條類型、粗細(xì)程度和線條顏色，這個和word中表格是類似的。現(xiàn)在來看看設(shè)置和設(shè)置后的效果（左圖為設(shè)置，右圖是效果）


當(dāng)然，如果您不喜歡方正的邊角，還可以對模塊進(jìn)行圓角顯示的設(shè)置。假設(shè)把圓角數(shù)值設(shè)為26，來看看右圖的效果，對比上圖：

3）常用：點擊“常用”進(jìn)入另外一個設(shè)置界面，這里沿用了上圖的設(shè)置
填充：在真實圖片和邊框之間加入空隙位置，一般會縮小圖片的比例；
邊框：我們可以看到“邊框”數(shù)值是10，事實上，只要我們不在這個位置做調(diào)整，系統(tǒng)會默認(rèn)剛才在“邊框”頁面所做的設(shè)置。但如果要統(tǒng)一四條邊線的磅數(shù)，可以直接在這里對4條邊一起調(diào)整；
透明：指這個圖片的清晰程度，如果數(shù)值越高，意味著越透明；
旋轉(zhuǎn)：圖片相對于頁面的角度，可以為0-359°。
中下位置是預(yù)覽圖。

我們來做一個效果，可以看到，框和圖間有空白，右圖是半透明并且傾斜的。

4）背景：為達(dá)到明顯的效果，我們將該圖的透明度調(diào)回0，并且將填充值調(diào)大，然后添加一個背景。背景可以為一張圖片，也可以是顏色的簡單填充。（下面第一組圖為填充綠色背景，第二組圖為添加另外一張圖片作為背景）
如果選擇使用背景顏色，就會簡單得多，不需要設(shè)置位置對齊等等。注意：如果同時添加了圖片背景和顏色背景，必須移除了圖片背景后顏色背景方可生效。

如果選擇使用圖片，則：點擊“更改背景”，從“我的圖片”中選擇對應(yīng)的圖片后即可直接生效；點擊“移除背景”將會刪除該背景；勾選“固定背景”則無論圖片尺寸多少，該背景相對于模塊的位置不變；左下角可以設(shè)置背景重復(fù)和對齊位置。

7. 圖片模塊的其它注意事項
如其它模塊一樣，圖片模塊可以放置在頁腳，僅需勾選“頁腳元素”后，將編輯設(shè)置好的圖片拖至已有的頁腳中即可；
圖片模塊的邊框大小必須大于或者等于圖片的高寬大小，否則無法正常顯示整張圖片；
網(wǎng)站中的所有模塊都有層次的概念，當(dāng)一個模塊被另外一個模塊的框遮住的時候（可能只是框遮住，但仍能夠看見），底層的框中的鏈接等都會無法點選。
 

8.設(shè)置圖片外邊距

可以設(shè)置圖片與文本之間的間距調(diào)整后效果如下

?

三.文本模塊編輯