上一期我們講述了如何設(shè)置Woodmart主題的海報（banner），這期我們講述Elementor編輯器來裝修Woodmart主題，我們將深入探討如何使用Elementor編輯器來進(jìn)一步自定義和優(yōu)化您的WoodMart主題。通過本篇教程，學(xué)習(xí)如何利用Elementor的多功能模塊，打造一個既美觀又實用的網(wǎng)站前端。

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

每個模版會里面有不同的模塊，如下圖，這是其中一個模塊的截圖，但實際的應(yīng)用不是說每個模塊都合適

如下圖，這是同樣的模版，但是是另外一個效果

是不是覺得好看了許多，不是那么單調(diào)但又有自己的個性

接下來我們來講述Elementor編輯器各個功能的效果和具體的方法。

我們先來講解下上圖的模版整個布局，我們進(jìn)入到模版的編輯頁面右邊會看到整個布局，如下圖

如上圖布局都是Container（容器）組成的，容器里面才有各個模塊

如上圖，比如由標(biāo)題和分類模塊兩個實現(xiàn)的，在右邊的就會對應(yīng)的顯示，Elementor編輯器，比較適合新手，但如果你想調(diào)整的更美觀更好看，也是需要一定經(jīng)驗的

我們拿兩個比較有特殊的模塊，來舉例，如下圖

從上圖來看，這是一個海報或者圖片加一個產(chǎn)品展示的模塊對吧，布局是1:3，其實就是兩個容器里面加入了模塊

先看左邊，如下圖方框符號是容器（Container），筆符號是模塊的編輯，這是一個Promo Banner（促銷橫幅）模塊

步驟：網(wǎng)站前端→選擇對應(yīng)的模塊→方框（容器）Container

進(jìn)入容器，我們能看到容器的一些設(shè)置，如下圖

有三大設(shè)置，如下圖

Layout：布局

Style：風(fēng)格

Advanced：高級設(shè)置（先進(jìn)的）

Container Layout：容器的樣式，分為彈性盒子和網(wǎng)格（紅色框）

Content Width：容器的布局，分為居中和全寬，全寬就是全屏，根據(jù)翻譯和實際效果就能明白了（黃色框）

Width：整個容器的寬度。（藍(lán)色框）

Min Height：整個容器的高度（藍(lán)色框）

可以看到藍(lán)色框調(diào)整后面可以根據(jù)百分比調(diào)整或者像素調(diào)整，但還有其他的，一共四種格式，最常用還是我說的那兩種，大家根據(jù)實際情況來調(diào)整，同時還能看到設(shè)備圖案，說明是可以根據(jù)每個設(shè)備單獨調(diào)整的，如果自適應(yīng)不是很理想，可以去調(diào)整

Gaps：柱子，可以理解為容器之前的間隙（綠色框）

如上圖，Style（風(fēng)格）

這里容器調(diào)整的就是Background（背景)色了,其他的暫時不需要動

如上圖，Advanced：高級設(shè)置（先進(jìn)的）

Layout→Margin：調(diào)節(jié)外框的偏移

Layout→Padding：調(diào)節(jié)內(nèi)框的偏移

一般是不需要調(diào)整的，如果需要樣式不一樣，或者填充則需要調(diào)整，也就是需要更好的效果，但不建議新手弄，可能會導(dǎo)致電腦端感覺好，但其他設(shè)備出現(xiàn)亂遭的感覺

Responsive：響應(yīng)式，你可以使這個模塊，在所以設(shè)備上顯示，或者只顯示在某個設(shè)備上，非常的靈活，甚至你可以設(shè)置兩個一樣的，但針對不同設(shè)備的，已到達(dá)非常好的效果，也會避免自適應(yīng)或者調(diào)整到不效果的一種解決辦法

以上就是容器（Container）基本的使用，容器基本的內(nèi)容都差不多，會有細(xì)微的差別，但模塊就不一樣，區(qū)別都會很大

下面我們講述下這個模塊

General：一般的，這個模塊顯示就可以插入鏈接(link)

Background：背景

Source：背景來源

choose imae：選擇圖片，但前提你的來源是選擇圖片，可以去媒體庫或者上傳圖片

Banner height：模塊的高度

Image Position：顯示圖片的位置

如上圖，Content（內(nèi)容）

分別對應(yīng)右邊模塊的位置，這個比較簡單就不一樣講述了，大家也可以根據(jù)翻譯理解

Style：風(fēng)格，這里可以處理每一個部件的樣式，就是使得他們更美觀，比如標(biāo)題描述按鈕，以及模塊更多的效果，大家根據(jù)翻譯去理解

Advanced：高級設(shè)置（先進(jìn)的），基本和容器一樣，但新手不需要去調(diào)整

接下里我們講述右邊

步驟：網(wǎng)站前端→對應(yīng)的容器（方框圖標(biāo)）或者模塊（筆符號）

如上圖顯示，他是由一個容器里面加入了標(biāo)題模塊和按鈕模塊，容器的下方加入了一個產(chǎn)品模塊

如上圖，觸碰標(biāo)題會出現(xiàn)筆符號進(jìn)入編輯，按鈕模塊也是一樣的，如下圖

如上圖，意思根據(jù)翻譯理解，非常好理解。通過本期的詳細(xì)介紹，相信您對Elementor編輯器在自定義WoodMart主題中的應(yīng)用有了更加深入的理解。我們展示了如何通過不同的模塊和容器來增強網(wǎng)站的視覺效果和功能。請期待我們的下一篇文章，我們將繼續(xù)探索更多基礎(chǔ)模塊和容器的使用技巧，幫助您進(jìn)一步提升網(wǎng)站設(shè)計。感謝您的閱讀，我們下期再見！

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