上一期介紹了Elementor編輯器的基本介紹與WoodMart主題的搭配，今天我們將深入探討如何使用Elementor編輯器與WoodMart主題進(jìn)行更高級的網(wǎng)站設(shè)計自定義。無論您是設(shè)計新手還是尋求更精細(xì)化布局的經(jīng)驗者，本篇文章都將為您提供實用的步驟和技巧。

步驟：網(wǎng)站前端→Edit with Elementor→滑動到頁腳的前面（或者某個模塊的添加也可以）

如上圖，一共有四個按鍵，分別是添加，模版文件，ai構(gòu)建，主題模版選項

一般用的最多的是第一個，第二個模版文件，除非你保存了某個模塊，然后想要添加到某個位置，但這屬于高階設(shè)置了，一般新手用不上，第三個ai構(gòu)建不建議用，第四個主題模版，根據(jù)主題的不一樣，當(dāng)然內(nèi)容也不一樣，上述顯示的是WoodMart主題的

我們點(diǎn)擊添加會得到下面的選項

上述顯示的容器（Container）的樣式選擇，根據(jù)實際情況去選擇

他們有一個明顯的區(qū)別是Grid（網(wǎng)格）是需要設(shè)置第一個才能設(shè)置第二個格子，F(xiàn)lexbox（彈性盒子）則不需要，但也會有一個區(qū)別，就是如果你添加彈性盒子開始只選擇了整個，沒有分開，選擇兩格或者三個，他不能選擇，除非重新添加，但如果是網(wǎng)格就可以自己切換多個格式，大家根據(jù)實際情況去選擇

添加容器后，在容器（Container）的上方都會有三個按鈕，分別是添加，編輯，關(guān)閉

文章的前面說過，除了網(wǎng)頁最下端的頁腳能添加之外，任何容器的添加也是能添加容器的，

第二個是編輯，關(guān)于容器（Container）的一些設(shè)置選項

第三個就是關(guān)閉了，無需多說

我們重點(diǎn)講述第二個編輯，如下圖

其他的在上一篇的文章有介紹過就不說了，如上圖，這個功能新手一般用不上，但如果想容器更美觀或者調(diào)節(jié)多樣性就必須會，其實翻譯寫的很明顯了，所以很容易明白，紅色框有一個項目，下面有一個方向，上圖顯示的往下，因為你添加容器選擇的是就是向下的其他都是一些方位的顯示，大家根據(jù)實際情況去調(diào)整

風(fēng)格也在上一篇介紹了，這里也就不多多說了

今天講述先進(jìn)的其中一個沒有講到的功能

如上圖，為了大家更好的理解，我用中文的圖片來說，應(yīng)該會更好理解一些，基本中文都說明了選項，大家應(yīng)該對“黏“比較困惑，因為翻譯是不準(zhǔn)確的，其實就這個容器你可以選擇固定頂端或者底部，或者不固定的意思

Transform：容器（Container）的一些特殊的效果，大家根據(jù)翻譯去選擇，一般是不用動的

容器點(diǎn)添加，你就可以選擇模塊了，左邊會有容器（Layout），以及基本功能（Basic），和Elementor PRO版（Pro）的功能

每個主題的基本功能都是不一樣的，如果你網(wǎng)站有其他的插件的話，也會在基本功能展示

但基本的功能能滿足你一個網(wǎng)站的基本的構(gòu)建，可能會不夠美觀，和炫彩的效果，那樣就需要Pro付費(fèi)版的才能實現(xiàn)，需要添加什么模塊，點(diǎn)擊你需要的模塊拖動到容器里面就行

模塊介紹：

步驟：網(wǎng)站前端→Edit with Elementor→容器（Container）→Heading

Heading：標(biāo)題，理解為大標(biāo)題，如下圖，你可以設(shè)置標(biāo)題文案（Title），以及鏈接（link）以及標(biāo)題大?。℉TML Tag）以及標(biāo)題的方向（Alignment），標(biāo)題顏色（Text Color），字體排版（Typography）大小或者字體風(fēng)格，大小等等

步驟：網(wǎng)站前端→Edit with Elementor→容器（Container）→Text Editor

Text Editor：文本編輯器（如果文字多的話建議用這個，比如一些產(chǎn)品介紹，公司的介紹等等）如下圖，文本內(nèi)容，文本分列（Columns），可以理解為文本在整個容器占據(jù)多少，柱間隙（如果你沒有設(shè)置文本分列，則不需要調(diào)整）

如上圖，還有一個文本編輯器風(fēng)格，可以調(diào)整配色方案（Color scheme），文本的方向（Alignment），文本標(biāo)題顏色（Text Color），文字排版（Tyроgraphy），內(nèi)容對齊（Content align），內(nèi)容寬度（Content width）

步驟：網(wǎng)站前端→Edit with Elementor→容器（Container）→Text Editor

image：圖片展示

Choose lmage：選擇一張圖片，你可以選擇從網(wǎng)站媒體庫或者本地上傳

Image Resolution：圖片的分辨率大小，可以選擇非常多的分辨率

Caption：標(biāo)題，可以展示也可以不展示

Link：鏈接，可以展示自定義鏈接，或者媒體鏈接

如上圖，Alignment（圖片位置）Width（圖片寬度），Max width（圖片最大寬度），Height（圖片高度）Normal（默認(rèn)狀態(tài)），Hover（懸停狀態(tài)，鼠標(biāo)點(diǎn)擊狀態(tài)）兩種不同狀態(tài)可以分別調(diào)整，其他根據(jù)翻譯理解就行

步驟：容器（Container）→選擇兩列布局→圖片選擇網(wǎng)格的形式選擇兩列

如上圖，如果你想實現(xiàn)上圖的效果，你則需要用到圖片（image）的Advanced（先進(jìn)的）高級功能，請注意是圖片（image）的，而不是容器（Container）的，需要在下圖的Margin（外框）設(shè)置數(shù)值偏移，但請斷開鏈接的符號，如果不斷開則四個方向是一起變動的，如上圖，一個偏左下，一個偏右上，在相對應(yīng)的方向設(shè)置數(shù)值就行了

當(dāng)然有一個簡單的方法那就是做一張這種圖片直接插入，會比我這種方法簡單，大家根據(jù)需要選擇

步驟：網(wǎng)站前端→Edit with Elementor→容器（Container）→Button

Button：按鈕，可以跳轉(zhuǎn)鏈接的按鈕，是必不可少的一個功能，而且美觀

Type（類型），一般是默認(rèn)的，你也可以選擇其他的

Text（按鈕名稱），根據(jù)實際情況寫

Link（鏈接）按鈕跳轉(zhuǎn)鏈接

Icon（圖標(biāo)），你可以設(shè)置有圖標(biāo)或者沒有圖標(biāo)的，看實際情況調(diào)整

Button lD（按鈕ID），一般不用設(shè)置的

Position：按鈕的方向

Typography：按鈕排版

Text Color：文本顏色
Background Type：背景類型
Color：顏色

Normal：默認(rèn)
Hover：懸停

兩種不同狀態(tài)分別調(diào)整

步驟：網(wǎng)站前端→Edit with Elementor→容器（Container）→Spacer

Spacer：墊片。你可以理解為上下兩個模糊或者容器的間隙

步驟：網(wǎng)站前端→Edit with Elementor→容器（Container）→Divider

Divider：分割線

可以設(shè)置寬度和顏色，還有高度，他和墊片（Spacer）的區(qū)別就是功能會強(qiáng)大一點(diǎn)，墊片（Spacer）的功能只是間隙，如下圖，分割線（Divider）效果會不一樣

更多的模塊

Video：視頻插入

Google Maps：地圖插入

icon：圖標(biāo)

這些設(shè)置比較簡單就不說了，大家根據(jù)翻譯就能設(shè)置

這期就講述到，我們講述了Elementor編輯器的基本功能和一些經(jīng)驗分享，通過今天的教程，我們希望您能夠掌握Elementor編輯器與WoodMart主題的高級應(yīng)用，從而打造出既美觀又功能全面的網(wǎng)站。下一期，我們將介紹Elementor的付費(fèi)版功能，敬請期待更多專業(yè)技巧和深入指導(dǎo)！

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