在之前的文章中，我們詳細(xì)講解了如何設(shè)置網(wǎng)站的ROW(排）和Column（柱子）。今天，我們將繼續(xù)探討模塊的設(shè)置，特別是Revolution Slider（海報(bào)）的使用方法。通過顏色區(qū)分模塊，我們可以更清晰地了解各個(gè)模塊的功能和設(shè)置。

今天我們講一講模塊的設(shè)置

步驟網(wǎng)站前端→Revolution Slider（海報(bào)）

如上圖，你也可以用顏色來區(qū)分，模塊都是綠色

之前也說過，海報(bào)（Revolution Slider）具體的設(shè)置不在編輯器，所以編輯沒什么功能

在這里我們講述一些網(wǎng)站前端基本需要的一些模塊吧，比如產(chǎn)品，產(chǎn)品分類，圖片，標(biāo)題和文本，按鈕這些基本的構(gòu)建元素

步驟Products (grid or carousel)→筆符號（編輯）

如上圖展示的網(wǎng)站產(chǎn)品模塊的編輯

步驟Products (grid or carousel) Settings→General

如上圖，我將一一說出產(chǎn)品的一些基本功能

Products view：產(chǎn)品的顯示樣式，有三種大家根據(jù)需要調(diào)整

Data source：產(chǎn)品數(shù)據(jù)來源

大家根據(jù)需要設(shè)置數(shù)據(jù)源

如果你不想用它的數(shù)據(jù)來源，你可以設(shè)置你想顯示的分類以及標(biāo)簽，但（前提你有這個(gè)產(chǎn)品分類和產(chǎn)品標(biāo)簽），這里可以DIY，所以可玩性還是很不錯(cuò)的

ltems per page：產(chǎn)品模塊的展示的數(shù)量，根據(jù)實(shí)際需要調(diào)整

步驟Products (grid or carousel) Settings→Design

Products hover：鼠標(biāo)懸停的樣式

Columns：產(chǎn)品從做到右的列數(shù)，如下圖就是4列

lmages size：圖片尺寸可以不用動，因?yàn)?strong>WooCommerce插件能設(shè)置固定的尺寸，所有的產(chǎn)品圖片都能自動裁剪的（后面我們會細(xì)說）

Sale countdown：產(chǎn)品倒計(jì)時(shí)，大家可以根據(jù)需要設(shè)置

步驟Products (grid or carousel) Settings→Data Settings

如上圖，可以設(shè)置產(chǎn)品數(shù)據(jù)源的一些具體細(xì)節(jié)，以及你可以單獨(dú)排除一些產(chǎn)品，隱藏缺貨產(chǎn)品等等，大家可以根據(jù)翻譯理解，非常的簡單，請記住所有的選項(xiàng)都要Save changes（保存）才能生效

接下來我們講下產(chǎn)品分類

步驟Product categories→筆符號（編輯）

如上圖我們進(jìn)入編輯

如上圖，并不是每一個(gè)模塊的功能都有好幾個(gè)，比如這個(gè)只有一個(gè)，這里可以設(shè)置標(biāo)題和名字，當(dāng)然你也可以單獨(dú)設(shè)置單獨(dú)的標(biāo)題或者名字，不用在模塊這里設(shè)置

我們重點(diǎn)講一下圈的設(shè)置，其他的可以根據(jù)翻譯理解，比較簡單

Layout：分類的風(fēng)格

Categories design：分類設(shè)計(jì)，你可以理解為分類名稱的位置選擇

Space between categories：類別之間的空間，你可以理解為第一個(gè)與第二分類之間的間隙

Slides per view：在分類模塊展示的分類數(shù)量，大家根據(jù)需要調(diào)整

步驟Product categories Settings→Categories

如上圖，你可以選擇你戰(zhàn)士的名稱，輸入分類名稱或者ID都可以，如果你不選擇它會按照默認(rèn)的方式展示，如果你不喜歡就自己輸入，請記住所有的選項(xiàng)都要Save changes（保存）才能生效

接下來我們講述一下圖片

步驟Single lmage→筆符號（編輯）

如上圖進(jìn)入編輯

我們講一講圈起來的元素，其他的根據(jù)翻譯去理解就行，標(biāo)題你可以在這里設(shè)置或者單獨(dú)設(shè)置一個(gè)標(biāo)題模塊，但我一般不會使用模塊里面的標(biāo)題，因?yàn)榉浅５膯我?，如果選擇標(biāo)題模塊就有很多風(fēng)格選擇，這個(gè)后面會講述到

lmage source：圖片來源，圖中選擇的是媒體庫

lmage：在下面點(diǎn)擊可以添加你需要展示的圖片

lmage alignment：圖片展示的位置

lmage style：圖片的風(fēng)格，一般是默認(rèn)，大家根據(jù)需要調(diào)整

On click action：你可以理解為點(diǎn)擊圖片的反饋，上述是跳轉(zhuǎn)鏈接的選項(xiàng)

Link Target：鏈接跳轉(zhuǎn)的選項(xiàng)，上述是在現(xiàn)在的窗口，還有一個(gè)選項(xiàng)是新窗口打開

CSS Animation：這個(gè)就是模塊的動畫效果了，之前在ROW(排），和Column（柱子）講過。大家可以根據(jù)鏈接查看

步驟Single lmage→Design Options

如上圖，這個(gè)設(shè)置和之前的ROW(排），和Column（柱子）講過。大家根據(jù)鏈接查看，請記住所有的選項(xiàng)都要Save changes（保存）才能生效

接下來我們講述下標(biāo)題和文本
步驟Section title→筆符號（編輯）

步驟Section title Settings→General

如上圖，這是標(biāo)題模塊，我們在Title中換掉就行了，<strong>則是簡碼，不用管他，上述顯示的“Best Sales“標(biāo)題名稱。其他的根據(jù)翻譯理解

Design Options：設(shè)計(jì)選項(xiàng)都一樣，就不必說了，大家可以看上面的圖片模塊也說過的
文本模塊
步驟Text Block→筆符號（編輯）

步驟Text Block Settings→General

文本模塊你可以根據(jù)需要去設(shè)定，比如上述是紅色的字體

Color Scheme：配色方案

前端的展示效果

步驟Button→筆符號（編輯）

如上圖，我們多講述一個(gè)按鈕模塊

Text：按鈕名稱

URL (Link)：按鈕跳轉(zhuǎn)鏈接

Style：按鈕的風(fēng)格

Shape：你可以鏈接為按鈕邊框的樣式

Color：按鈕的顏色

Size：按鈕的大小

Alignment：按鈕的位置

好了，上述講述了網(wǎng)站構(gòu)建的一些基本元素，Basel主題基本的搭建元素，到這里大家基本上可以裝修一個(gè)簡單的網(wǎng)站了，上述講述的是替換演示模版的一些模塊。

總結(jié)

通過以上介紹，相信大家已經(jīng)掌握了網(wǎng)站前端的一些基本模塊設(shè)置。Basel主題提供了豐富的模塊和設(shè)置選項(xiàng)，足以幫助你打造一個(gè)美觀實(shí)用的網(wǎng)站。下一篇文章中，我們將進(jìn)一步探討自定義添加元素和Basel主題的其他高級功能，敬請期待。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息