5.2 各項首頁模組說明

彩虹電子商務網站提供了總計五大類型共13種的首頁模組

5.2.1 大篇幅橫向輪播

(大篇幅輪播模組)

 

(輪播模組編輯畫面)

大篇幅輪播模組主要目的為展示主頁面的招牌,為目前通俗入口頁面的指標,透過大篇幅的輪播圖片能提高使用者的檢視意願,輪播內容編輯包含了三個區塊,輪播設定(1)、輪播內容設定(2)、結果預覽(3)

 

5.2.1.1                輪播設定

輪播設定說明:

1.          啟用此輪播:是否於前台顯示此輪播模組,可依據需求隨時決定是否顯示整個輪播模組

2.          模組類型:輪播的模組類型包含橫向純圖片輪播、圖片及文字輪播、文字篇幅輪播3


 

(橫向純圖片輪播示意圖)

橫向純圖片輪播之功能特色:

*          可最大幅度的展現出完整的輪播圖片

*          可透過簡短的文字表達連結資訊

 

(文字篇幅輪播示意圖)

文字篇幅輪播之功能特色:

*          可大幅度的展現出完整的輪播圖片

*          可透過短篇幅文字表達連結資訊

*          自訂文字布幕顏色,搭配輪播背景

(圖片及文字輪播結果示意圖)

(輪播背景、商品圖片選擇示意圖)

圖片及文字輪播之功能特色:

*          可將目光焦點著重於『商品』

*          可透過簡短的文字表達連結資訊

*          輪播之背景圖片與商品圖片為分開選擇

*          無需自行設計完整輪播圖片

 

3.          模組名稱:作為模組清單中使用者識別用途

4.          垂直位移(PX):可依需求調整首頁模組與上方模組的預設垂直距離,正數為增加距離,負數為減少距離,單位為px (首頁中第一個模組無法設定)


 

5.          模組高度:模組在不同的瀏覽裝置底下的高度,可以依據需求設定此高度,可使使用者在不同的瀏覽裝置底下有最好的瀏覽體驗

(模組高度預設值)

(模組高度實際效果示意圖)

5.2.1.2                輪播內容編輯

輪播內容設定說明:

1.          新增輪播內容:新增一個輪播內容,輪播的最大可容納內容為10

2.          啟用此輪播:是否於前台顯示此輪播內容,可依據需求隨時隨時決定是否顯示某個輪播內容

 

 

 

3.          輪播背景圖片:可自由選擇輪播的背景圖,建議圖片大小為 2010px * 640px

(選擇背景圖)

 

 

 

(建議尺寸示意圖)


 

 

4.          商品圖片:此處為選擇輪播內容,所彈出的商品圖片(此功能僅限於『圖片及文字輪播』類型)

5.          商品圖片位置:商品圖片預設為靠左,若勾選此項目則商品圖會靠於右側(此功能僅限於『圖片及文字輪播』類型)

6.          商品圖片外框:商品圖片可選擇外框(無框、方框、圓框) (此功能僅限於『圖片及文字輪播』類型)

 

(商品圖靠左、方框示意圖)

 

(商品圖靠右、圓框示意圖)


 

7.          垂直對齊方式:輪播之背景圖為求顯示最佳化,若圖片尺寸不符合網頁畫面將會進行畫面裁減,而輪播背景圖提供三種對齊方式(置左、置中、置右),可依據圖片內容自行調整對齊方式

(輪播背景原圖)

(輪播背景網頁畫面-置左)

(輪播背景網頁畫面-置中)

(輪播背景網頁畫面-置右)

8.          輪播文字顏色:可變更輪播所使用之文字顏色

9.          輪播背景顏色:可變更輪播所使用之文字布幕顏色()

10.     輪播連結:該輪播內容所指向的網址

11.     輪播文字標題

12.     輪播文字內容

(選擇顏色示意圖)

 

 

(輪播文字示意圖)

(選擇文字布幕顏色示意圖)

 

(文字布幕顏色示意圖)

 

13.     其他輪播內容:可點擊輪播內容標題,來切換檢視所編輯的輪播內容

14.     順序調整、刪除:可點擊上下按鈕來調整輪撥內容的順序,也可按下垃圾桶鍵刪除該輪播內容

15.     更新輪播設定:當編輯完畢後(輪播內容、順序、刪除),需按下此鍵來更新模組內容


 

5.2.2 自訂主要連結

(自訂連結模組編輯畫面)

 

(自訂連結模組編輯畫面)

 

 

 

 

(自訂連結模組編輯畫面)

自訂主要連結模組主要目的,為將網站所要提供給使用者的主要連結(譬如主要商品、最新消息、)以利使用者快速了解連結目的,自訂連結內容編輯包含了三個區塊,自訂連結設定(1)、自訂連結內容設定(2)、結果預覽(3)


 

5.2.2.1                自訂連結設定

設定說明:

1.          啟用此自訂連結:是否於前台顯示此自訂連結模組,可依據需求隨時上下架整個自訂連結模組

2.          模組類型:模組類型包含3項自訂超連結、4項自訂超連結、2項自訂動態磚、3項自訂動態磚

 

(3項自訂超連結示意圖)

 

(4項自訂超連結示意圖)

 

(2項動態磚示意圖)

 

(3項動態磚示意圖)

3.          模組名稱:除作為模組清單中使用者識別用途外,可勾選『顯示標題列』於前台顯示

(未勾選顯示標提列示意圖)

(勾選顯示標提列示意圖)

4.          垂直位移(PX):可依需求調整首頁模組與上方模組的預設垂直距離,正數為增加距離,負數為減少距離,單位為px (首頁中第一個模組無法設定)

(垂直位移為0時之示意圖)

(垂直位移為50時之示意圖)

5.          模組高度:模組在不同的瀏覽裝置底下的高度,可依據需求設定此高度,可使使用者在不同的瀏覽裝置底下有最好的瀏覽體驗(僅限動態磚模組)

6.          重設模組高度:可重設為初始建議高度(僅限動態磚模組)

(模組高度實際效果示意圖)

7.          更新模組設定:更新目前所設定之模組設定值

 

5.2.2.2                自訂連結內容編輯

自訂連結內容設定說明:

1.          選擇連結圖片:選擇該連結所使用之圖片

2.          標題:連結之標題

3.          次標題:連結之次標題

4.          連結網址:連結所前往之網址

5.          更新模組設定:更新所編輯之內容

5.2.3 商品列表模組

 

(商品列模組編輯畫面)

商品列模組編輯包含了三個區塊,商品列模組設定(1)、商品列模組內容設定(2)、結果預覽(3)


 

5.2.3.1                商品列表設定

設定說明:

1.          啟用此商品列:是否於前台顯示此商品列模組,可依據需求隨時決定是否顯示整個商品列模組

2.          模組類型:模組類型包含2項商品列、3項商品列、4項商品列、輪播商品列

(2項商品列)

 

(3項商品列)

 

(4項商品列)

 

(輪播商品列)

3.          模組名稱:除作為模組清單中使用者識別用途外,可勾選『顯示標題列』於前台顯示

(顯示標題列示意圖)

 

4.          垂直位移(PX):可依需求調整首頁模組與上方模組的預設垂直距離,正數為增加距離,負數為減少距離,單位為px (首頁中第一個模組無法設定)

(垂直位移示意圖)

5.2.3.2                商品列內容設定

自訂連結內容設定說明:

1.          商品列內容:目前商品列所使用之內容

2.          所有商品:目前網站的所有商品

3.          商品類別:透過商品類別可快速篩選出想要的商品

4.          新增商品至商品列:找到欲新增之商品,按下右方的 ← 按鈕即可將商品新增至商品列

5.          調整商品順序:可透過↑↓按鈕調整商品的顯示順序

6.          移出商品列:可將既有之商品移出商品列

7.          更新商品列表:套用目前之設定


 

5.2.4 自訂分隔模組

(自訂分隔模組示意圖)

 

(自訂區隔模組編輯畫面)

自訂分隔模組編輯包含了三個區塊,模組設定(1)、模組內容設定(2)、結果預覽(3)


 

5.2.4.1                自訂分隔模組設定

輪播設定說明:

1.          啟用此輪播:是否於前台顯示此輪播模組,可依據需求隨時決定是否顯示整個輪播模組

2.          模組名稱:作為模組清單中使用者識別用途

3.          垂直位移(PX):可依需求調整首頁模組與上方模組的預設垂直距離,正數為增加距離,負數為減少距離,單位為px (首頁中第一個模組無法設定)

4.          模組高度:模組在不同的瀏覽裝置底下的高度,可以依據需求設定此高度,可使使用者在不同的瀏覽裝置底下有最好的瀏覽體驗

5.          重設模組高度:可重設為初始建議高度

6.          更新模組設定:套用所變更之模組設定


 

5.2.4.2                自訂分隔模組內容設定

自訂連結內容設定說明:

1.          背景圖片:自訂分隔模組之背景圖片(若使用此功能則會覆蓋背景顏色,建議寬度為 2000px,並依據圖片高度調整模組高度)

2.          文字水平對齊方式:文字標題、文字內容的對齊方式(置左、置中、置右)

3.          水平位移(px):可依據需求調整文字水平偏差距離,正數為向右偏移,負數為向左偏移

4.          文字顏色:文字標題、文字內容的文字顏色

5.          背景顏色:自訂分隔的背景顏色

6.          文字標題:自訂分隔區塊之標題

7.          文字內容:自訂分隔區塊之文字內容

8.          更新模組設定:套用目前之設定


 

5.2.4.3                效果展示

(文字置左、水平位移50px 示意圖)

 

 

(文字置中 示意圖)

 

(文字置右、水平位移-50px 示意圖)

 

 

(文字置中、使用背景圖片、模組高度200px 示意圖)

 


 

5.2.5 自訂HTML編輯區模組

(自訂HTML編輯區)

 

(自訂文字編輯區模組編輯畫面)

自訂HTML編輯區模組主要目的為提供除了既有模組所能編輯的內容以外,一個可以自由發揮的HTML文字區塊,內容編輯包含了三個區塊,模組設定(1)HTML內容設定(2)、結果預覽(3)


 

 

5.2.5.1                模組設定

設定說明:

1.          啟用此自訂連結:是否於前台顯示此自訂連結模組,可依據需求隨時上下架整個自訂連結模組

2.          模組名稱:除作為模組清單中使用者識別用途外,可勾選『顯示標題列』於前台顯示

(勾選顯示標提列示意圖)


 

3.          使用全篇幅:目前主流網頁內容皆為將內容局限於合適閱讀的範圍,並在窄螢幕才會顯示全篇幅畫面,若無論在任何裝置底下都要顯示全篇幅則需勾選此項目

(未勾選全篇幅示意圖)

 

(勾選全篇幅示意圖)

4.          垂直位移(PX):可依需求調整首頁模組與上方模組的預設垂直距離,正數為增加距離,負數為減少距離,單位為px (首頁中第一個模組無法設定)

5.          模組高度:模組在不同的瀏覽裝置底下的高度,可以居需求設定此高度,可使使用者在不同的瀏覽裝置底下有最好的瀏覽體驗(編輯內容若超出此高度則匯出現滾軸)

6.          重設模組高度:可重設為初始建議高度(僅限動態磚模組)

(模組高度示意圖)

 

7.          更新模組設定:更新目前所設定之模組設定值

 

 

5.2.5.2                HTML編輯區

自訂HTML編輯區內容設定說明:

1.          HTML編輯工具列:工具列提供了各式各樣的編輯功能

2.          HTML編輯區:所見及所得的HTML編輯區

3.          更新模組設定:套用所編輯的內容