外貿(mào)建站教程：零基礎(chǔ)用Elementor制作一個(gè)外貿(mào)網(wǎng)站

時(shí)間：2022-08-28 22:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-28 22:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

本文目標(biāo)：按照篇外貿(mào)建站教程的順序操作，能夠?qū)崿F(xiàn)：基于全球份額最大的建站系統(tǒng)“WordPress”，使用Elementor插件付費(fèi)版和Hello elementor免費(fèi)主題，從零建設(shè)一個(gè)B2B外貿(mào)網(wǎng)站，且建站成本每年小于1000元（如果不計(jì)算自己投入的人力成本的話(huà)）。這篇外貿(mào)建站教程相對(duì)比較進(jìn)階，如需容易一點(diǎn)的，請(qǐng)查看這篇：Astra主題教程：免費(fèi)外貿(mào)建站

本建站教程首發(fā)于：https://loyseo.com/

模板站點(diǎn)：基于下述的外貿(mào)建站教程，我制作了B2B外貿(mào)網(wǎng)站模板https://b2bdemo.loyseo.com/。

閱讀建議：本文建議在電腦上閱讀，體驗(yàn)更佳

外貿(mào)建站如何購(gòu)買(mǎi)域名

• 外貿(mào)建站域名取名
• 用.COM域名
• 域名長(zhǎng)度要盡量短一點(diǎn)
• 最好不要有數(shù)字、連字符-
• 選擇容易被記住的名字
• 基于以上條件，再看下面的幾條：

1. 首選：用品牌名，知名樣例：alibaba.com, http://amazon.com
2. 次選：用品牌名+主營(yíng)產(chǎn)品關(guān)鍵詞，又叫半匹配域名（PMD），例如我的站點(diǎn)：loyseo.com
3. 非常不建議直接用產(chǎn)品關(guān)鍵詞做域名，又叫EMD（精準(zhǔn)匹配域名），牢記咱們是品牌企業(yè)網(wǎng)站，更多原因分析請(qǐng)看： 關(guān)于EMD和PMD的分析文章

• 購(gòu)買(mǎi)域名
• Porkbun：購(gòu)買(mǎi)前3個(gè)域名，每個(gè)域名首年僅需$4.15（￥29），續(xù)費(fèi)$8.56（￥60）/年。
• 阿里萬(wàn)網(wǎng)：新用戶(hù)有32元代金券，購(gòu)買(mǎi).COM域名首年常規(guī)價(jià)55元，使用代金券后為23元，續(xù)費(fèi)69元/年，略有不便的是需要實(shí)名認(rèn)證，點(diǎn)段首鏈接直接可進(jìn)入有代金券的頁(yè)面。
• Namesilo：新會(huì)員首次購(gòu)買(mǎi)域名時(shí)輸入優(yōu)惠代碼：loyseo，可少付1美元，即$7.99（￥56），常規(guī)價(jià)格$8.99（￥63）/年。

買(mǎi)完后暫時(shí)不用做任何配置，繼續(xù)下一步驟：買(mǎi)存放網(wǎng)站用的主機(jī)Siteground。

購(gòu)買(mǎi)wordpress托管主機(jī)Siteground

Siteground

1. Siteground是價(jià)格低于10美金的、性?xún)r(jià)比最高的wordpress托管主機(jī)，也是國(guó)內(nèi)較為推崇的外貿(mào)建站主機(jī)
2. 是wordpress官方推薦的三大建站主機(jī)之一，且好評(píng)率排名第一，高達(dá)92%.
3. 價(jià)格：2020年6月18號(hào)起,創(chuàng)建站點(diǎn)不限數(shù)量的Growbig套餐，從$5.95/月漲價(jià)到$9.99/月，昔日優(yōu)惠不再，之前真是白菜價(jià)，目前漲價(jià)后雖然性?xún)r(jià)比不夠高了，如果資金充裕，它依舊是值得選擇的主機(jī)（服務(wù)好、管理面板的功能易用），點(diǎn)此了解價(jià)格詳情

GreenGeeks

對(duì)價(jià)格敏感的話(huà)，比Siteground用戶(hù)規(guī)模小一點(diǎn)的GreenGeeks可以考慮，它的5星評(píng)價(jià)占比91%（siteground是92%）， 它的價(jià)格套餐如下，套餐詳情可前往官網(wǎng)查看。

重點(diǎn)：我咨詢(xún)了一下官方，GreenGeeks的價(jià)格越高的版本服務(wù)器性能越好，就跟汽車(chē)性能一樣，在使用功能方面沒(méi)有區(qū)別，有些主機(jī)的版本與功能掛鉤，譬如Siteground的低配就沒(méi)有動(dòng)態(tài)緩存與手動(dòng)備份等功能。

需要注意的是，GreenGeeks提供免費(fèi)域名，但次年起要續(xù)費(fèi)，價(jià)格$13.95/年，略貴，如果需要域名隱私，還要單獨(dú)付費(fèi)$9.95/年，所以我不建議在這里使用免費(fèi)域名。

關(guān)于GreenGeeks的購(gòu)買(mǎi)的注意事項(xiàng)點(diǎn)擊這里查看

購(gòu)買(mǎi)注意事項(xiàng)：

1. 若開(kāi)著代理時(shí)購(gòu)買(mǎi)遇到問(wèn)題，就關(guān)閉代理；不要用新加坡區(qū)域代理，會(huì)額外增加$5費(fèi)用
2. 套餐 Choose Plan：點(diǎn)此進(jìn)入后，選擇GrowBig套餐，不推薦StartUp套餐，因?yàn)闆](méi)有按需備份，且只能創(chuàng)建一個(gè)站點(diǎn)。

1. 域名Choose Domain：選擇I already have a Domain，輸入剛才購(gòu)買(mǎi)的建站域名

1. 主機(jī)位置 Data center：有6個(gè)選項(xiàng)：美國(guó)、新加坡、澳大利亞、英國(guó)、德國(guó)、歐洲、新加坡，請(qǐng)選擇你的主要客戶(hù)區(qū)域，在主機(jī)靠近的區(qū)域速度表現(xiàn)相對(duì)更好一些，我的兩臺(tái)主機(jī)分別位于美國(guó)和新加坡

1. 購(gòu)買(mǎi)年限 Period：按需選擇，續(xù)費(fèi)回復(fù)原價(jià)24.99美元/月，但通常官方會(huì)提供20%-30%的續(xù)費(fèi)折扣。
2. 支付方式：默認(rèn)是visa、master信用卡；若需要PayPal支付，需點(diǎn)此聯(lián)系銷(xiāo)售客服獲取
3. 費(fèi)用：$71.4/年，約500元，若是購(gòu)買(mǎi)時(shí)發(fā)現(xiàn)有個(gè)$5的GST，那么請(qǐng)更改代理的節(jié)點(diǎn)到非新加坡。

1. 退款規(guī)則：前30天內(nèi)可退全款。

買(mǎi)完后，出現(xiàn)如下界面時(shí)，就可以點(diǎn)擊SET UP SITE按鈕著手創(chuàng)建網(wǎng)站了。

安裝wordpress

點(diǎn)擊上圖中的set up site，或者在登錄siteground后，按下圖序號(hào)依次操作，點(diǎn)擊new website創(chuàng)建網(wǎng)站。

再按下圖序號(hào)依次操作：1.點(diǎn)選域名類(lèi)型，2.輸入剛才購(gòu)買(mǎi)的域名，3.提交

提交后，系統(tǒng)會(huì)提示：“站點(diǎn)創(chuàng)建完成后需要我們?nèi)バ薷挠蛎腄NS設(shè)置”，稍后我們?nèi)バ薷?，此時(shí)點(diǎn)擊continue繼續(xù)下一步

按下圖序號(hào)順序依次操作：

1. 選擇start new website
2. 選擇wordpress
3. 輸入郵箱作為登錄wordpress后臺(tái)的賬號(hào)
4. 輸入復(fù)雜的強(qiáng)密碼，或點(diǎn)擊generate自動(dòng)生成強(qiáng)密碼，建議copy密碼保存到記事本里，不保存關(guān)系也不大，可以直接在siteground登錄wordpress的后臺(tái)。
5. 點(diǎn)擊continue繼續(xù)下一步

進(jìn)入下圖界面后，不用add付費(fèi)的服務(wù)，直接點(diǎn)擊Finish按鈕，網(wǎng)站便開(kāi)始創(chuàng)建，大約需要2分鐘，創(chuàng)建完成后，系統(tǒng)也會(huì)發(fā)郵件通知你。

站點(diǎn)完成后，我們獲取下圖中的2條NS記錄

有時(shí)候安裝過(guò)程會(huì)比較長(zhǎng)，系統(tǒng)不會(huì)反饋上面的圖，此時(shí)，你可以在收到站點(diǎn)創(chuàng)建成功的郵件通知后，在siteground中按下圖序號(hào)操作，進(jìn)入網(wǎng)站管理工具獲取NS記錄。

進(jìn)入site tools后，將看到如下界面，我們拿著這兩條name servers信息（簡(jiǎn)稱(chēng)NS），去修改域名的NS記錄。

解析域名

接下來(lái)對(duì)上文說(shuō)到的三大域名注冊(cè)商，分別介紹修改NS的方法。

在Porkbun修改NS

登錄porkbun，進(jìn)入域名管理界面

按下圖序號(hào)操作，在Namesever處點(diǎn)擊edit

在修改界面，先清空已有的NS記錄，從siteground中的復(fù)制NS記錄黏貼到此處，注意不需要復(fù)制括號(hào)及其內(nèi)部的IP，然后提交即可。通常需要48h生效，實(shí)際經(jīng)過(guò)測(cè)試，大約5-10分鐘大部分地區(qū)都能生效的。

在阿里萬(wàn)網(wǎng)修改NS

登錄阿里云，進(jìn)入域名管理，點(diǎn)擊域名操作項(xiàng)中的管理按鈕

在NS服務(wù)器處，點(diǎn)擊修改DNS按鈕

繼續(xù)點(diǎn)擊修改DNS服務(wù)器

從siteground中的復(fù)制NS記錄黏貼到此處，注意不需要復(fù)制括號(hào)及其內(nèi)部的IP，然后提交即可。通常需要48h生效，實(shí)際經(jīng)過(guò)測(cè)試，大約5-10分鐘大部分地區(qū)都能生效的。

在namesilo修改NS

登錄namesilo，點(diǎn)擊域名數(shù)量鏈接，進(jìn)入域名管理

在域名列表，點(diǎn)擊下圖中的小地球按鈕

在彈出窗中點(diǎn)擊click here

進(jìn)入NS修改界面后，從siteground中的復(fù)制NS記錄黏貼到此處，注意不需要復(fù)制括號(hào)及其內(nèi)部的IP，然后提交即可。通常需要48h生效，實(shí)際經(jīng)過(guò)測(cè)試，大約5-10分鐘大部分地區(qū)都能生效的。

訪(fǎng)問(wèn)網(wǎng)站檢測(cè)解析是否生效

在域名解析配置完畢之后，我們直接訪(fǎng)問(wèn)域名網(wǎng)址，試試看能否打開(kāi)網(wǎng)站。

當(dāng)打開(kāi)網(wǎng)站能看到下圖所示界面，說(shuō)明解析生效啦。

若打不開(kāi)網(wǎng)站，則NS可能沒(méi)生效，你可以通過(guò)切換代理的位置看看生效與否，也可以通過(guò)這個(gè)網(wǎng)站https://www.whatsmydns.net/#NS/，輸入域名查看NS生效與否。

外貿(mào)建站基礎(chǔ)操作

安裝并強(qiáng)制啟用SSL證書(shū)

1. 進(jìn)入Siteground的site tools，進(jìn)入Site》SSL manager
2. 選擇ssl為 let’s encrypt
3. 點(diǎn)擊get，等待安裝完成后去啟用

安裝完成后在該界面能看到一條記錄，點(diǎn)擊操作項(xiàng)中的enforce https強(qiáng)制使用SSL

進(jìn)入下個(gè)頁(yè)面后，打開(kāi)https enforce開(kāi)關(guān)

此時(shí)我們?cè)L問(wèn)網(wǎng)站域名后，將在域名左側(cè)發(fā)現(xiàn)多了一個(gè)鎖狀的安全圖標(biāo)及證書(shū)信息

進(jìn)入網(wǎng)站管理后臺(tái)

方法1.通過(guò)網(wǎng)站后臺(tái)管理地址進(jìn)入

默認(rèn)管理后臺(tái)地址是：域名/wp-admin/，譬如：https://domain.com/wp-admin/；

剛剛創(chuàng)建完網(wǎng)站時(shí)，可以直接通過(guò)這個(gè)地址訪(fǎng)問(wèn)；

在后文中，我們將修改該地址以提升網(wǎng)站安全，屆時(shí)通過(guò)自己定義的地址進(jìn)入。

方法2.登錄siteground的site tools，從wordpress管理面板進(jìn)入

此外，此處還能進(jìn)行：修改密碼、刪除站點(diǎn)等操作，忘了密碼也不怕~

首要登錄wordpress后需要做的操作

1.登錄wordpress后臺(tái)，跳過(guò)siteground提供的wordpress向?qū)?br>
2.勾選“建議搜索引擎不收錄”，在外貿(mào)網(wǎng)站建完之后再去掉勾選，以便讓搜索引擎收錄

• 進(jìn)入settings》reading
• 將search engine visibility勾選
• 點(diǎn)擊save changes

3.修改后臺(tái)界面語(yǔ)言為中文，方便使用

第一步，安裝簡(jiǎn)體中文語(yǔ)言包

第二步，將site language改回English

如果你的站點(diǎn)不是英文的，而是西班牙語(yǔ)的，那么你就需要在這里安裝西班牙語(yǔ)，并將site language設(shè)置為西班牙語(yǔ)。

第三步，在用戶(hù)處修改語(yǔ)言為中文

此操作確保后臺(tái)是中文的，網(wǎng)站前臺(tái)看到的依舊還是英文，或你設(shè)置的其他語(yǔ)言。

安裝Hello Elementor主題

主題是WordPress網(wǎng)站的重要組成部分，不可缺少，它就是個(gè)框架/皮膚，在外貿(mào)建站時(shí)，如果你用Hello Elementor主題，它就是個(gè)空格，需要你自己用Elementor Pro DIY各種頁(yè)面，譬如頁(yè)頭頁(yè)腳；如果你用Astra主題，那么主題自帶了頁(yè)頭頁(yè)腳。

Hello elementor是建站可視化插件elementor的官方免費(fèi)主題，很輕很快，堪比知名的Astra，并且由于是官方親生的，兩者之間的兼容性更好。

安裝主題的教程如下：

進(jìn)入主題列表，點(diǎn)擊添加按鈕

輸入主題名稱(chēng)或關(guān)鍵詞，譬如hello elementor

找到主題后，點(diǎn)擊安裝按鈕

安裝完成后，點(diǎn)擊主題下的啟用按鈕

啟用完成后，提示新主題已經(jīng)激活，點(diǎn)擊訪(fǎng)問(wèn)站點(diǎn)查看效果

安裝新主題后的網(wǎng)站樣貌，如下圖所示（嗯，很簡(jiǎn)單，幾乎不像一個(gè)網(wǎng)站的樣子）

刪除無(wú)用主題

主題安裝好以后，我們把用不上的系統(tǒng)自帶主題刪除

在主題頁(yè)面，點(diǎn)選需要?jiǎng)h除的主題

在主題詳情面板上，點(diǎn)擊右下角的刪除即可。

刪除無(wú)用插件

在安裝建站插件之前，先把暫時(shí)不用的插件deactivate禁用，不需要的插件delete刪除

對(duì)下圖中的兩個(gè)插件，分別點(diǎn)擊deactivate禁用；

然后對(duì)wordpress starter進(jìn)行delete刪除；

安裝插件

插件是wordpress建站必備的，能為我們實(shí)現(xiàn)各種各樣的功能。

插件清單

先列一下插件清單，請(qǐng)認(rèn)準(zhǔn)插件名稱(chēng)和作者，這樣就不會(huì)裝錯(cuò)了，Elementor pro要在線(xiàn)認(rèn)證，建議自購(gòu)單站點(diǎn)版本（前往https://elementor.com/購(gòu)買(mǎi)），付費(fèi)插件不建議使用來(lái)路不明的破解版本，謹(jǐn)防惡意代碼注入（譬如黑鏈）。

插件并非越多越好，選用的人多的、評(píng)價(jià)好的插件，安裝夠用的插件即可，過(guò)多插件會(huì)拖累網(wǎng)站速度，增加網(wǎng)站漏洞風(fēng)險(xiǎn)。

安裝免費(fèi)插件的方法

與安裝主題方法的類(lèi)似，步驟概述：搜索-安裝-啟用：

1. 鼠標(biāo)左鍵移動(dòng)到菜單“插件”上
2. 點(diǎn)擊安裝插件
3. 輸入插件名稱(chēng)或關(guān)鍵詞搜索插件；
4. 點(diǎn)擊目標(biāo)插件的“現(xiàn)在安裝”按鈕；
5. 安裝完成后，再點(diǎn)擊active“啟用”按鈕；暫時(shí)用不上的插件也可以不點(diǎn)“啟用”，需要用的時(shí)候，在“已安裝插件”列表中啟用即可。

安裝付費(fèi)插件的方法

通過(guò)上傳插件壓縮包進(jìn)行安裝，步驟概述：上傳-安裝-啟用：

1. 鼠標(biāo)左鍵移動(dòng)到菜單“插件”上
2. 點(diǎn)擊安裝插件
3. 點(diǎn)擊上傳插件
4. 點(diǎn)擊選擇文件，靜待文件上傳完畢
5. 點(diǎn)擊現(xiàn)在安裝
6. 安裝完成后，再點(diǎn)擊active“啟用”按鈕；

暫時(shí)用不上的插件也可以不點(diǎn)“啟用”，需要用的時(shí)候，在“已安裝插件”列表中啟用即可。

下面介紹一下部分插件安裝時(shí)的注意事項(xiàng)

安裝Elementor pro

1. 如自購(gòu)，則前往https://elementor.com/購(gòu)買(mǎi)PERSONAL版本，$49/年，30天內(nèi)可退款，支持信用卡和paypal
2. 購(gòu)買(mǎi)完成后，登錄賬戶(hù)下載Elementor Pro插件安裝包，然后按照上文辦法進(jìn)行安裝并啟用

1. 啟用elementor pro后，按照下圖所示激活，不激活無(wú)法使用高級(jí)元素塊以及模板功能

woocommerce設(shè)置

WooCommerce可以在外貿(mào)建站中實(shí)現(xiàn)產(chǎn)品管理功能，以及如果你要做B2C外貿(mào)網(wǎng)站，也可以用它進(jìn)行進(jìn)行店鋪管理。

啟用woocommerce時(shí)，將打開(kāi)如下界面，直接點(diǎn)擊not right now跳過(guò)

跳過(guò)后，回到后臺(tái)界面，在上方有如下提示信息，依舊點(diǎn)擊skip setup跳過(guò)

如果看到下圖的提示文案，請(qǐng)繼續(xù)下一步

請(qǐng)?jiān)谠O(shè)置》常規(guī)中，將wordpress地址與站點(diǎn)地址中的http改為https，保存即可，保存后需要重新登錄網(wǎng)站后臺(tái)。

Wordfence Security設(shè)置

Wordfence相當(dāng)于殺毒軟件，可以保護(hù)我們外貿(mào)網(wǎng)站的安全。

啟用wordfence后會(huì)進(jìn)入如下界面，按圖序號(hào)所示，依次填寫(xiě)和選擇，最后點(diǎn)擊continue繼續(xù)下一步

在此界面點(diǎn)擊no thanks跳過(guò)，在站點(diǎn)的新生階段只需要使用免費(fèi)版的，若站點(diǎn)客流蒸蒸日上，就有必要考慮買(mǎi)付費(fèi)版的了。

完成上一步后，回到wordpress后臺(tái)將看到頂部的提示信息，點(diǎn)擊click here to configure以設(shè)置防火墻

然后我們將看到如下界面，點(diǎn)擊download .htaccess后就可以直接點(diǎn)擊continue了

接下來(lái)就看到成功提示了，點(diǎn)擊CLOSE即可。

回到后臺(tái)還會(huì)看到這樣一條提示，問(wèn)我們是否要保持wordfence的自動(dòng)更新，這里點(diǎn)擊YES即可。

自此wordfence的設(shè)置就結(jié)束了，它會(huì)默默保護(hù)網(wǎng)站，防止惡意嘗試登陸、注入等風(fēng)險(xiǎn)，有任何需要你知悉的事件都會(huì)發(fā)郵件通知你，當(dāng)然這是免費(fèi)版的，功力不如付費(fèi)版的，也不可能防住所有風(fēng)險(xiǎn)。

WPS Hide Login設(shè)置

啟用WPS Hide Login后，網(wǎng)站后臺(tái)登錄地址會(huì)默認(rèn)改為域名/login/，如下圖所示

請(qǐng)進(jìn)入 設(shè)置》常規(guī) 中修改login url，不要用默認(rèn)的wp-admin，容易被攻擊，當(dāng)然也不要用插件默認(rèn)的login，改為只有你知道的字母組合，如果你以后自己都忘記了它，可以從上文說(shuō)的siteground后臺(tái)直接免密登錄。

Code snippets設(shè)置

隱藏頁(yè)面默認(rèn)顯示的標(biāo)題的snippets

具體步驟如下：

1. 進(jìn)入 Snippets > add new
2. 輸入標(biāo)題，例如：禁用頁(yè)面默認(rèn)標(biāo)題
3. 輸入如下代碼

function ele_disable_page_title( $return ) { return false;}add_filter( 'hello_elementor_page_title', 'ele_disable_page_title' );

1. 選擇 only run on site front-end
2. 點(diǎn)擊save changes保存

禁用自動(dòng)生成縮略圖

上傳圖片或?qū)肽０鍟r(shí)，wordpress及woocommerce會(huì)自動(dòng)為圖片生成很多種尺寸的圖片，有不少尺寸我們壓根不用上，白白占服務(wù)器空間

這些自動(dòng)生成的圖片并不能在wordpress的媒體庫(kù)看到，需要在siteground后臺(tái)查看，下圖是wordpress的媒體庫(kù)，只能看到原圖

下圖是siteground后臺(tái)查看圖片文件的方法，能看到系統(tǒng)為同一張圖生成了很多不同尺寸的圖片

所以在網(wǎng)站頁(yè)面設(shè)計(jì)完、內(nèi)容上傳前，我們先禁用所有自動(dòng)生成的圖片；若馬上可以上傳內(nèi)容了，我們可以根據(jù)設(shè)計(jì)情況，酌情放開(kāi)部分圖片尺寸，譬如在制作產(chǎn)品列表頁(yè)時(shí)，我們用到了300*300px的圖片，那么就在下面的代碼中，將對(duì)應(yīng)行的代碼前加//注釋掉或直接刪除該行。

1. 進(jìn)入 Snippets > add new
2. 輸入標(biāo)題，例如：禁用所有縮略圖
3. 輸入如下代碼

// disable generated image sizesfunction shapeSpace_disable_image_sizes($sizes) { unset($sizes['thumbnail']); // disable thumbnail size unset($sizes['medium']); // disable medium size unset($sizes['large']); // disable large size unset($sizes['medium_large']); // disable medium-large size unset($sizes['1536x1536']); // disable 2x medium-large size unset($sizes['2048x2048']); // disable 2x large size unset($sizes['shop_catalog']); unset($sizes['shop_single']); unset($sizes['shop_thumbnail']); unset($sizes['woocommerce_thumbnail']); unset($sizes['woocommerce_single']); unset($sizes['woocommerce_gallery_thumbnail']); return $sizes;}add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes');// disable scaled image sizeadd_filter('big_image_size_threshold', '__return_false');// disable other image sizesfunction shapeSpace_disable_other_image_sizes() { remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() remove_image_size('another-size'); // disable any other added image sizes}add_action('init', 'shapeSpace_disable_other_image_sizes');

1. 選擇 Run snippet everywhere
2. 點(diǎn)擊Save changes保存即可。

制作外貿(mào)網(wǎng)站

接下來(lái)我們要進(jìn)入制作網(wǎng)站章節(jié)，請(qǐng)確認(rèn)以下插件都已經(jīng)安裝并啟用。

其中高級(jí)自定義字段插件在下文有實(shí)例，屬于進(jìn)階功能，如果看過(guò)實(shí)例后，你覺(jué)得不需要對(duì)應(yīng)功能，你也可以選擇刪除這個(gè)插件。

創(chuàng)建菜單

添加空白頁(yè)面

1. 鼠標(biāo)放置于頁(yè)面菜單
2. 點(diǎn)擊新建頁(yè)面
3. 輸入頁(yè)面標(biāo)題，例如Home
4. 無(wú)需填寫(xiě)頁(yè)面內(nèi)容，點(diǎn)擊發(fā)布按鈕，保存成功即可。

然后同理制作Products、About us、Contact us、Blog頁(yè)面，Catalogs或其他頁(yè)面按需創(chuàng)建。

在頁(yè)面列表中，將用不上的頁(yè)面，如sample page移至回收站進(jìn)行刪除。

創(chuàng)建新菜單

進(jìn)入 外觀(guān)》菜單界面，你將看到如下界面，我們將 首頁(yè)、sample page分別刪除，先忽略順序問(wèn)題，我們點(diǎn)擊創(chuàng)建菜單按鈕即可保存成功

保存成功后，我們依舊還在菜單頁(yè)面，此時(shí)將顯示位置設(shè)置為primary并保存菜單，那這個(gè)菜單就能默認(rèn)出現(xiàn)在網(wǎng)站導(dǎo)航位置了。

下圖就是此時(shí)網(wǎng)站上的導(dǎo)航，含網(wǎng)站名稱(chēng)、副標(biāo)題和菜單

接下來(lái)，我們說(shuō)一下如何從頭創(chuàng)建一個(gè)新菜單，同時(shí)會(huì)介紹菜單排序方法

1. 鼠標(biāo)懸停于外觀(guān)菜單
2. 點(diǎn)擊菜單
3. 輸入菜單名稱(chēng)，例如menu
4. 點(diǎn)擊創(chuàng)建菜單

1. 在頁(yè)面標(biāo)簽下，全選所有剛才添加的頁(yè)面，你也可以逐個(gè)勾選頁(yè)面，譬如Home菜單可不選，因?yàn)辄c(diǎn)擊logo可進(jìn)入首頁(yè)。
2. 點(diǎn)擊添加到菜單按鈕
3. 此處再次將顯示位置設(shè)置為primary，以便接下來(lái)導(dǎo)入header模板后可以直接引用它
4. 點(diǎn)擊保存菜單

調(diào)整菜單順序的教程：

如下圖所示，左鍵點(diǎn)選并長(zhǎng)按某個(gè)菜單后，上下移動(dòng)即可調(diào)整排序；

左右移動(dòng)可以調(diào)整層級(jí)，向左移動(dòng)是提升層級(jí)，向右移動(dòng)是降低層級(jí)，

譬如，以后添加了產(chǎn)品目錄時(shí)，可以將產(chǎn)品目錄添加到菜單，并向上移動(dòng)放置于products菜單下，長(zhǎng)按稍微向右移動(dòng)，可將產(chǎn)品目錄作為products的子菜單項(xiàng)。

菜單制作完成后，我們接下來(lái)制作全站通用的頂部header，并將菜單放入其中。

設(shè)置網(wǎng)站主頁(yè)、博客頁(yè)、商店頁(yè)

1. 打開(kāi) 設(shè)置>閱讀頁(yè)面
2. 將“您的主頁(yè)顯示”選中“一個(gè)靜態(tài)頁(yè)面”，并將主頁(yè)選為“Home”，這樣訪(fǎng)問(wèn)網(wǎng)站與點(diǎn)擊logo時(shí)默認(rèn)打開(kāi)的就是Home頁(yè)面了，文章頁(yè)設(shè)為Blog，這樣發(fā)布的文章將直接出現(xiàn)在Blog頁(yè)面；將“對(duì)feed中的每篇文章，包含”選為摘要（能提升網(wǎng)站速度）
3. 點(diǎn)擊保存更改

1. 進(jìn)入woocommerce》設(shè)置》產(chǎn)品
2. 將商店頁(yè)面設(shè)置為products頁(yè)面，點(diǎn)擊保存，這樣能使得發(fā)布后的產(chǎn)品都出現(xiàn)在products頁(yè)面，

使用Elementor theme builder制作頂部header

Header即導(dǎo)航菜單區(qū)域，操作步驟如下

1. 鼠標(biāo)放在在“模板”菜單
2. 點(diǎn)擊theme builder
3. 點(diǎn)擊添加新模板
4. 選擇模板類(lèi)型為header
5. 輸入模板名稱(chēng)，譬如header
6. 點(diǎn)擊“創(chuàng)建模板”按鈕，可進(jìn)入下圖所示的library頁(yè)面：
1. 左鍵移動(dòng)到模板上方，將出現(xiàn)放大鏡按鈕，點(diǎn)擊可預(yù)覽模板；
2. 選擇喜歡的模板，點(diǎn)擊insert按鈕即可導(dǎo)入到模板中；

導(dǎo)入完成后，內(nèi)容、logo都可以先不管，下文將介紹Elementor編輯操作的細(xì)節(jié)，待整體框架都搭建完之后，再逐一調(diào)整

如下圖所示，若你創(chuàng)建了多個(gè)菜單，且需要更換菜單，可以鼠標(biāo)單擊一下導(dǎo)航元素塊，被選中元素塊周?chē)兴{(lán)色線(xiàn)框，此時(shí)，左側(cè)面板將會(huì)切換為：當(dāng)前選中的元素塊的操作面板，在面板的layout》menu中選擇你所需的菜單即可。

接下來(lái)是保存header模板

1. 點(diǎn)擊左下角的update按鈕
2. 在彈出層中點(diǎn)擊add condition
3. 系統(tǒng)自動(dòng)出現(xiàn)一個(gè)默認(rèn)條件，表示全站都使用這個(gè)header；你也可以下拉菜單看看條件的構(gòu)成；你也可以根據(jù)需要?jiǎng)?chuàng)建多個(gè)header，不同條件下用不同的header。
4. 點(diǎn)擊save&close即可

此時(shí)訪(fǎng)問(wèn)網(wǎng)站地址或點(diǎn)擊publish按鈕左側(cè)的preview

即可看到外貿(mào)網(wǎng)站的導(dǎo)航。

使用Elementor theme builder制作底部footer

1. 點(diǎn)擊 模板>theme builder
2. 點(diǎn)擊添加新模板
3. 選擇模板類(lèi)型為footer
4. 輸入模板名稱(chēng)，譬如footer
5. 點(diǎn)擊“創(chuàng)建模板”按鈕，可進(jìn)入下圖所示的library頁(yè)面
6. 在下圖的library中，左鍵移動(dòng)到模板上方，將出現(xiàn)放大鏡按鈕，點(diǎn)擊可預(yù)覽模板；選擇喜歡的或接近喜歡的模板，點(diǎn)擊insert按鈕即可導(dǎo)入到模板中；然后如同添加header一樣，點(diǎn)擊publish發(fā)布并點(diǎn)擊add condtion，然后save保存。

用Elementor制作頁(yè)面

網(wǎng)站的頭尾都做好后，我們可以開(kāi)始制作頁(yè)面了。

首先需要對(duì)ELEMENTOR進(jìn)行基礎(chǔ)設(shè)置

ELEMENTOR的一般設(shè)置

1. 進(jìn)入 Elementor > 設(shè)置 > 一般 頁(yè)面中
2. 在文章類(lèi)型選項(xiàng)中，將產(chǎn)品勾選中，使得產(chǎn)品頁(yè)面也可以使用Elementor編輯內(nèi)容。
   勾選兩個(gè)禁用默認(rèn)字體，這樣就不會(huì)與模板的字體產(chǎn)生混淆了。
3. 點(diǎn)擊保存更改

接下來(lái)了解一下頁(yè)面類(lèi)別與結(jié)構(gòu)

外貿(mào)建站的頁(yè)面結(jié)構(gòu)

1. 獨(dú)立頁(yè)面：首頁(yè)Home、公司介紹About us、聯(lián)系我們Contact us
2. 產(chǎn)品頁(yè)面：產(chǎn)品首頁(yè)P(yáng)roducts、*產(chǎn)品列表頁(yè)P(yáng)roducts Archive、*產(chǎn)品詳情頁(yè)Single Product
3. 博客頁(yè)面：博客首頁(yè)Blog、*博客列表頁(yè)Archive、*博客詳情頁(yè)Single

未標(biāo)記*的頁(yè)面：在上文創(chuàng)建菜單時(shí)，我們已經(jīng)創(chuàng)建了空白頁(yè)面，稍后直接用Elementor編輯即可。

標(biāo)記*的是模板頁(yè)，創(chuàng)建方法與上文的header、footer一樣，中文名稱(chēng)后方的英文，即是對(duì)應(yīng)的模板類(lèi)型。

接下來(lái)開(kāi)始逐一制作頁(yè)面，就如同我們上文制作header一樣，我們也是通過(guò)導(dǎo)入模板 – 整合拼接模板 – 修改模板細(xì)節(jié)的方式快速做出網(wǎng)站框架，記得多去看看國(guó)內(nèi)網(wǎng)優(yōu)秀外貿(mào)同行的網(wǎng)站學(xué)習(xí)模仿。

制作獨(dú)立頁(yè)面，以首頁(yè)為例

進(jìn)入頁(yè)面>所有頁(yè)面，找到home頁(yè)面，點(diǎn)擊編輯

在編輯home界面上，點(diǎn)擊使用elementor編輯按鈕

進(jìn)入下圖中的頁(yè)面，頁(yè)面中已經(jīng)包含了之前做好的header和footer

這兩個(gè)圖標(biāo)

對(duì)應(yīng)的都是建站模板庫(kù)，前者是elementor官方建站模板庫(kù)，后者是envato elements插件的模板庫(kù)。

點(diǎn)擊

我們將看到如下模板庫(kù)，瀏覽模板后，若發(fā)現(xiàn)有喜歡的模板，查看模板的名稱(chēng)1，通過(guò)搜索模板的標(biāo)題關(guān)鍵詞2，以便將所有模板都搜索出來(lái)。

也可以根據(jù)當(dāng)前制作的頁(yè)面類(lèi)型來(lái)搜索，譬如輸入homepage、contact、about，找到對(duì)應(yīng)的模板；

若有喜歡的一個(gè)或多個(gè)模板，可以點(diǎn)擊insert導(dǎo)入到頁(yè)面中，結(jié)合實(shí)際需求進(jìn)行刪減調(diào)整；

下圖是導(dǎo)入后的效果

建議不要在同一個(gè)頁(yè)面導(dǎo)入過(guò)多模板，內(nèi)容過(guò)多的頁(yè)面會(huì)影響操作速度；

可以通過(guò)新建備用頁(yè)面導(dǎo)入模板，再?gòu)捻?yè)面中復(fù)制出需要的元素塊到最終頁(yè)面中，備用頁(yè)面用完后刪除掉。

復(fù)制元素塊的方法如下：

點(diǎn)選模塊后，其周?chē)鷷?huì)出現(xiàn)藍(lán)色細(xì)邊框，此時(shí)點(diǎn)擊鼠標(biāo)右鍵，點(diǎn)擊copy復(fù)制，然后在需要放置該元素塊的地方，點(diǎn)右鍵Paste黏貼。

我們還可以繼續(xù)瀏覽envato elements的模板庫(kù)獲取靈感和素材，點(diǎn)擊

你將看到下圖，當(dāng)前沒(méi)有任何模板，此時(shí)你需要回到wordpress后臺(tái)首頁(yè)

1. 進(jìn)入Elements > free kits頁(yè)面
2. 可以通過(guò)搜索名稱(chēng)查找網(wǎng)站模板，對(duì)喜歡的網(wǎng)站模板可以點(diǎn)擊preview預(yù)覽模板
3. 對(duì)需要的網(wǎng)站模板點(diǎn)擊install kit
4. 點(diǎn)擊view kit可以查看網(wǎng)站模板的每個(gè)頁(yè)面模板，隨后可以導(dǎo)入頁(yè)面模板
5. 所有已安裝的kits在左側(cè)elements >install kits中可查看

ps：envato elements除free kits以外的內(nèi)容都是付費(fèi)的，如頂部的tab標(biāo)簽頁(yè)中可見(jiàn)到的photos、template kits > premium kits；付費(fèi)方式是按月訂閱，16.5美元/月，訂閱期間無(wú)限下載和使用，如果確實(shí)有喜歡的模板，我認(rèn)為還是很劃算的，點(diǎn)此查看詳情

網(wǎng)站模板導(dǎo)入完畢后，我們回到編輯首頁(yè)頁(yè)面上，繼續(xù)點(diǎn)擊

，將看到網(wǎng)站模板已經(jīng)導(dǎo)入了，繼續(xù)點(diǎn)擊view installed kit，我們將看到這個(gè)網(wǎng)站模板的所有頁(yè)面模板

如下圖所示，找到需要導(dǎo)入的頁(yè)面模板，點(diǎn)擊insert template就可以將模板導(dǎo)入到頁(yè)面中了。

頁(yè)面框架完成后，可以點(diǎn)擊下圖中的2預(yù)覽看效果，也可以點(diǎn)擊1直接發(fā)布，因?yàn)檎军c(diǎn)目前是建設(shè)期，屏蔽搜索引擎抓取，也不擔(dān)心被用戶(hù)看到；

若站點(diǎn)完成并面向客戶(hù)后，涉及大面積的修改時(shí)，就不建議直接點(diǎn)擊1發(fā)布，而是點(diǎn)擊2預(yù)覽效果，保存時(shí)，點(diǎn)擊1publish旁邊的箭頭>save draft保存為草稿，在確認(rèn)頁(yè)面完成后，再點(diǎn)擊發(fā)布。

其他操作項(xiàng)分別是：




頁(yè)面的基本設(shè)置




頁(yè)面內(nèi)元素的導(dǎo)航，類(lèi)似文章的章節(jié)導(dǎo)航，能快速幫你找到需要的元素，以及調(diào)整頁(yè)面內(nèi)的元素排序。




歷史動(dòng)作和版本管理，方便回溯，操作錯(cuò)了也可以恢復(fù)，但刪除元素塊后就無(wú)法恢復(fù)了。




響應(yīng)式模式，目前看到是PC效果，點(diǎn)擊可選擇到平板、手機(jī)視圖，以便調(diào)整網(wǎng)頁(yè)在不同設(shè)備上的效果。

看到這里，你可能迫不及待想自己調(diào)整一下界面上的元素，那么，你可以跳轉(zhuǎn)到Elementor編輯功能教程的章節(jié)；

用上述教程，我們可依次完成首頁(yè)、關(guān)于我們、聯(lián)系我們的框架搭建，接下來(lái)，我們繼續(xù)把產(chǎn)品與博客類(lèi)頁(yè)面框架的制作方法介紹一下，這樣整站的頁(yè)面結(jié)構(gòu)就全部完成了，再開(kāi)展細(xì)節(jié)調(diào)整所需的ELEMENTOR編輯功能教程。

制作產(chǎn)品頁(yè)面

此階段不用準(zhǔn)備好產(chǎn)品材料，待整站設(shè)計(jì)完成后，再根據(jù)下文中的網(wǎng)站內(nèi)容發(fā)布要點(diǎn)上傳產(chǎn)品。

用woocommerce創(chuàng)建3個(gè)示例產(chǎn)品分類(lèi)

1. 進(jìn)入 產(chǎn)品》分類(lèi)
2. 在添加新分類(lèi)中輸入名稱(chēng)，然后直接回車(chē)即可提交

按照該方法創(chuàng)建3個(gè)示例分類(lèi)

創(chuàng)建完畢后將在分類(lèi)頁(yè)面右側(cè)的列表中看到這些分類(lèi)。

然后將這些產(chǎn)品目錄加入到products的子菜單中，按下圖中的序號(hào)順序操作如，可以將產(chǎn)品、產(chǎn)品類(lèi)別加入到“添加菜單項(xiàng)”欄目中，否則默認(rèn)情況下，你在菜單項(xiàng)欄目中是看不到它們的。

然后，按照上文教過(guò)的移動(dòng)菜單的辦法，將產(chǎn)品分類(lèi)放到Products下方作為子菜單。

保存菜單后去查看一下，將看到如下效果

用woocommerce發(fā)布5個(gè)示例產(chǎn)品

1. 進(jìn)入 產(chǎn)品》添加新的
2. 輸入產(chǎn)品名稱(chēng)
3. 輸入產(chǎn)品描述，一段無(wú)關(guān)的圖文都可以
4. 勾選多個(gè)分類(lèi)
5. 上傳產(chǎn)品圖片，可以理解為首圖、封面圖
6. 選擇性上傳產(chǎn)品相冊(cè)，有就傳兩三張，沒(méi)有也沒(méi)關(guān)系
7. 點(diǎn)擊發(fā)布

還可以繼續(xù)在產(chǎn)品頁(yè)面的下方找到產(chǎn)品簡(jiǎn)短描述字段，輸入示例內(nèi)容，稍后可用于制作產(chǎn)品詳情頁(yè)模板

接下來(lái)我們可以采用復(fù)制產(chǎn)品的辦法快速生成示例產(chǎn)品，按下圖方式復(fù)制產(chǎn)品

復(fù)制后的產(chǎn)品默認(rèn)是草稿狀態(tài)，在頁(yè)面上點(diǎn)擊“發(fā)布”按鈕即可，這樣網(wǎng)站中才會(huì)顯示。

你也可以在“全部產(chǎn)品”頁(yè)面，點(diǎn)擊產(chǎn)品下方的快速編輯，在展開(kāi)的面板中將狀態(tài)設(shè)置為已發(fā)布，點(diǎn)擊更新保存即可。

創(chuàng)建完5條產(chǎn)品后，我們可以訪(fǎng)問(wèn)網(wǎng)站的products頁(yè)面，就能看到產(chǎn)品已經(jīng)上架了。

你也可以點(diǎn)擊一條產(chǎn)品看看目前的樣子，接下來(lái)我們就去添加產(chǎn)品詳情頁(yè)的模板

用Elementor theme builder創(chuàng)建Single Products模板

1. 進(jìn)入模板》添加新模板，選擇模板類(lèi)型為single product，輸入模板名稱(chēng)，譬如single product

1. 點(diǎn)擊“創(chuàng)建模板”按鈕，可進(jìn)入下圖所示的library頁(yè)面：

• 左鍵移動(dòng)到模板上方，將出現(xiàn)放大鏡按鈕，點(diǎn)擊可預(yù)覽模板；
• 選擇喜歡的模板，點(diǎn)擊insert按鈕即可導(dǎo)入；

導(dǎo)入后，系統(tǒng)會(huì)自動(dòng)選擇一個(gè)產(chǎn)品數(shù)據(jù)嵌入，以便我們直觀(guān)看到效果，但依然有一些看不到內(nèi)容的元素，譬如價(jià)格、加入購(gòu)物車(chē)，那是因?yàn)槲覀兩蟼鳟a(chǎn)品時(shí)沒(méi)有填寫(xiě)對(duì)應(yīng)內(nèi)容，你可以挨個(gè)點(diǎn)擊元素，查看左上角這些元素的名稱(chēng)，對(duì)無(wú)用的元素右鍵點(diǎn)擊刪除。

如果你想更換一個(gè)產(chǎn)品以預(yù)覽效果，那么按照下圖的數(shù)字順序操作，以更換產(chǎn)品

最后，點(diǎn)擊publish，點(diǎn)擊add condition為include products，保存即可，然后我們就可以去預(yù)覽一下效果了。

現(xiàn)在打開(kāi)一個(gè)產(chǎn)品頁(yè)面，是下面的樣子，細(xì)節(jié)會(huì)在后文的實(shí)例中調(diào)整。

用Elementor theme builder創(chuàng)建Product Archive模板

創(chuàng)建完產(chǎn)品詳情頁(yè)的模板后，我們開(kāi)始做產(chǎn)品列表頁(yè)的模板

這里有個(gè)操作小說(shuō)明：從剛做完的singe product模板回到wordpress后臺(tái)的方式如下，點(diǎn)擊elementor左上方的按鈕后，再點(diǎn)擊下方的exit to dashboard。

創(chuàng)建方法與上一節(jié)基本一樣，只是模板類(lèi)型選擇product archive，保存時(shí)添加默認(rèn)條件，發(fā)布后訪(fǎng)問(wèn)Products頁(yè)面，是如下效果，Elementor的產(chǎn)品模板比較簡(jiǎn)約。

如果你想要在產(chǎn)品卡片里展示產(chǎn)品簡(jiǎn)介，那么你需要使用元素塊Post，并將取值來(lái)源query從默認(rèn)的Post改為Product。

同時(shí)，將post的layout按如下圖所示配置，其中excerpt為產(chǎn)品的簡(jiǎn)短描述，建議你在上傳產(chǎn)品時(shí)控制好內(nèi)容的字?jǐn)?shù)，不要過(guò)多。下圖中的posts per page是指每頁(yè)文章或產(chǎn)品數(shù)量，你可以按需設(shè)置為8或12，產(chǎn)品數(shù)量較多時(shí)，還要啟用 pagination翻頁(yè)功能。

制作博客頁(yè)面

博客可用于發(fā)布公司新聞、行業(yè)專(zhuān)業(yè)知識(shí)、成功案例等等，請(qǐng)根據(jù)你的實(shí)際情況規(guī)劃分類(lèi)。持續(xù)的發(fā)布博客是有益于Google SEO繼而帶來(lái)客戶(hù)流量的，當(dāng)然，博客內(nèi)容需是盡可能對(duì)你的客戶(hù)群體有價(jià)值、能幫助到他們的內(nèi)容，簡(jiǎn)短無(wú)料的水文不會(huì)帶來(lái)積極作用。

創(chuàng)建文章分類(lèi)及文章的方法與上文的產(chǎn)品無(wú)大差別，下文簡(jiǎn)要說(shuō)明步驟。

創(chuàng)建博客2個(gè)分類(lèi)

如果你沒(méi)多少博客要寫(xiě)，也可以先不創(chuàng)建分類(lèi)，以后內(nèi)容逐漸多了，再添加。

1. 進(jìn)入 文章》分類(lèi)目錄
2. 在添加新分類(lèi)目錄中輸入名稱(chēng)，然后直接回車(chē)或點(diǎn)擊添加新分類(lèi)目錄按鈕，即可提交

按照該方法創(chuàng)建2個(gè)示例分類(lèi)，創(chuàng)建完成后，可以參照上文添加產(chǎn)品分類(lèi)到菜單里的辦法，將博客分類(lèi)加入到Blog菜單下。

發(fā)布4篇博客

1. 進(jìn)入 文章》寫(xiě)文章
2. 輸入標(biāo)題
3. 輸入文章描述，復(fù)制黏貼一段無(wú)關(guān)的圖文都可以
4. 勾選多個(gè)分類(lèi)
5. 上傳特色圖像，可以理解為首圖或封面圖
6. 點(diǎn)擊發(fā)布

文章欄目不具備復(fù)制功能，可安裝插件Duplicate Post實(shí)現(xiàn)，鑒于示例博客數(shù)量不多，你也可以重復(fù)上述步驟，創(chuàng)建另外3篇示例博客

用Elementor theme builder創(chuàng)建Single模板

創(chuàng)作方法與上文的產(chǎn)品單頁(yè)類(lèi)似

1. 進(jìn)入模板》添加新模板，選擇模板類(lèi)型為single，選擇post type為文章，輸入模板名稱(chēng)，譬如post，點(diǎn)擊“創(chuàng)建模板”按鈕，進(jìn)入下一步

1. 進(jìn)入library頁(yè)面：
1. 左鍵移動(dòng)到模板上方，將出現(xiàn)放大鏡按鈕，點(diǎn)擊可預(yù)覽模板；
2. 選擇喜歡的模板，點(diǎn)擊insert按鈕即可導(dǎo)入；
3. 導(dǎo)入后，會(huì)自動(dòng)選擇一篇文章數(shù)據(jù)嵌入，以便我們直觀(guān)看到效果

用Elementor theme builder創(chuàng)建Archive模板

創(chuàng)建完博客詳情頁(yè)的模板后，我們開(kāi)始做博客列表頁(yè)的模板，方法與上基本一樣，只是模板類(lèi)型選擇archive即可，此處不做贅述了。

創(chuàng)建完成后，我們?cè)俚骄W(wǎng)站訪(fǎng)問(wèn)一下blog菜單，查看一下是否生效。

至此，我們對(duì)網(wǎng)站頁(yè)面的結(jié)構(gòu)及搭建框架的方法有了系統(tǒng)的認(rèn)知，你是否也找到了想要參照學(xué)習(xí)的同行網(wǎng)站呢？仿站是對(duì)建站新手而言最快的方式，而過(guò)往我們查看、導(dǎo)入的精美模板，查看這些元素塊的設(shè)置，是熟悉Elementor編輯功能的最快的方式。那么接下來(lái)，我們來(lái)熟悉一下Elementor的常用編輯功能。

Elementor編輯功能教程

界面分為左側(cè)工具區(qū)域與右側(cè)內(nèi)容制作區(qū)域

左側(cè)工具區(qū)

包含了所有元素、各種設(shè)置功能，點(diǎn)擊右上角九宮格可展示所有元素。

元素分類(lèi)：按Elementor的免費(fèi)與付費(fèi)區(qū)分，如Basic、Pro；按用途分：如woocommerce、wordpress等等。

元素搜索：輸入元素的英文名可快速找到對(duì)應(yīng)元素。

右側(cè)內(nèi)容制作區(qū)

認(rèn)識(shí)結(jié)構(gòu)section與column

在內(nèi)容區(qū)，點(diǎn)擊

圖標(biāo)，可創(chuàng)建section，你可以理解為單行，單行可以劃分出多列column ，所有元素塊都必須放到section中。

行與列都可以左鍵、右鍵操作，左鍵點(diǎn)選后，左側(cè)工具欄將出現(xiàn)所選行或列的設(shè)置功能，右鍵點(diǎn)選后，可進(jìn)行所選行或列的復(fù)制、黏貼、刪除等操作，譬如可以通過(guò)復(fù)制列、方便的實(shí)現(xiàn)一行變多列。

section可以進(jìn)行雙層嵌套，即在section內(nèi)再嵌入另一個(gè)section，操作方法是從左側(cè)找到inner setion元素塊拖拽到已有的setion內(nèi)部。

如何添加元素到內(nèi)容區(qū)

鼠標(biāo)左鍵點(diǎn)選元素，長(zhǎng)按左鍵，移動(dòng)鼠標(biāo)到右側(cè)內(nèi)容區(qū)域的section內(nèi)部，或者直接拖拽到灰色虛線(xiàn)區(qū)域，它將自動(dòng)創(chuàng)建一個(gè)section：

若鼠標(biāo)處顯示禁止圖標(biāo)，則此處不能插入元素；

若鼠標(biāo)處顯示藍(lán)色粗橫線(xiàn)，則元素可插入藍(lán)色粗橫線(xiàn)處，可挪動(dòng)鼠標(biāo)到目標(biāo)位置后，松開(kāi)左鍵即可

如何修改元素

左鍵點(diǎn)擊元素后，左側(cè)工具區(qū)將展示元素的修改面板，面板分為三欄：content、style、advanced，每欄里的配置項(xiàng)因元素不同而不同，同時(shí)又有一些共通的規(guī)律，如下。

content，即內(nèi)容。通常用于修改元素的內(nèi)容及內(nèi)容的相關(guān)配置，如文案、圖片、鏈接、內(nèi)容數(shù)量、內(nèi)容取值來(lái)源等等，也會(huì)附加尺寸、對(duì)齊等樣式操作。

style，即樣式。通常用于修改元素的外觀(guān)，如顏色、字體樣式、圖片效果、其他內(nèi)容效果等。

advanced，即進(jìn)階/高級(jí)。通常用于修改元素的外部間距與內(nèi)部間距、動(dòng)畫(huà)效果、背景、邊框、位置、響應(yīng)式、自定義CSS。

如何修改元素在不同設(shè)備上的效果

如下圖所示，當(dāng)你修改元素時(shí)發(fā)現(xiàn)：某個(gè)修改項(xiàng)旁邊有個(gè)電腦圖標(biāo)，點(diǎn)擊下拉后可展開(kāi)平板、手機(jī)圖標(biāo)，那表示：這個(gè)修改項(xiàng)可以在不同設(shè)備上用不同的設(shè)置；若沒(méi)有這些圖標(biāo)，那說(shuō)明所有設(shè)備上都用相同的設(shè)置。

避免重復(fù)工作的Global元素

在元素上右鍵點(diǎn)擊，將元素可保存為Global

給它命名并保存

需要使用時(shí)，點(diǎn)擊左側(cè)的global標(biāo)簽，像添加元素一樣使用即可

修改Global元素時(shí)，其他使用這個(gè)全局元素的地方，都能被修改，節(jié)省了逐一修改的時(shí)間，常見(jiàn)用途：詢(xún)盤(pán)的聯(lián)系表單。

學(xué)習(xí)元素設(shè)置的訣竅

參照模板中模塊的設(shè)置，自己模仿做一個(gè)一樣的。挨個(gè)查看元素的設(shè)置項(xiàng)，進(jìn)行反復(fù)操作試驗(yàn)，

以Single Product模板頁(yè)面為示例調(diào)整細(xì)節(jié)

我們打開(kāi)之前為產(chǎn)品詳情頁(yè)制作的single product模板，進(jìn)行逐一調(diào)整

在導(dǎo)入的模板中，產(chǎn)品圖片是放在背景中的，這會(huì)導(dǎo)致無(wú)法使用相冊(cè)功能，所以我們先將產(chǎn)品圖片從背景中刪除

1. 左鍵選中圖片所在的列
2. 在左側(cè)選擇style標(biāo)簽
3. 點(diǎn)選background欄
4. 在image中點(diǎn)擊x刪除product image，這里有個(gè)重要的細(xì)節(jié)，當(dāng)你看到圖標(biāo)

（dynamic tags），說(shuō)明當(dāng)前設(shè)置可以采用動(dòng)態(tài)調(diào)用的方式獲取，你可以點(diǎn)擊圖標(biāo)，看看有哪些可供調(diào)用的內(nèi)容，這個(gè)功能非常好用，譬如這里就實(shí)現(xiàn)了在背景里調(diào)用當(dāng)前產(chǎn)品的產(chǎn)品圖片

接下來(lái)，我們用navigator功能來(lái)查找不容易發(fā)現(xiàn)的元素（比如即將刪除的spacer元素），在內(nèi)容區(qū)右鍵后找到navigator，點(diǎn)擊后就能看到面板了，其中按頁(yè)面構(gòu)成順序依次展示了行、列、元素，這里不僅可用于查找元素，也可以操作排序功能

我們發(fā)現(xiàn)此列中有個(gè)spacer元素，先刪除此列中的spacer元素

然后我們?cè)谧髠?cè)找到product images元素，并拖入該列

我們發(fā)現(xiàn)圖片周?chē)写笃瞻?，需要進(jìn)行調(diào)整：

1. 點(diǎn)選列
2. 在左側(cè)點(diǎn)擊advanced
3. 選中advanced欄
4. 調(diào)整padding，padding是指列內(nèi)部上下左右的內(nèi)間距
5. 將padding都改為0，你也可以選中鎖鏈圖標(biāo)，它將使得4個(gè)間距值保持一致，改任一值，其他三值都一樣改變；反之，解鎖鎖鏈后，就可以單獨(dú)編輯每個(gè)間距值；額外說(shuō)一下padding上方的margin值是所選元素與周?chē)渌氐耐忾g距，請(qǐng)?jiān)囋嚳窗伞?/li>

去掉間距后，我們進(jìn)一步調(diào)整產(chǎn)品圖片的設(shè)置，在前文中，我么能看到此處的產(chǎn)品相冊(cè)圖是緊貼的，此處按下圖所示修改（下圖是修改后的效果）

1. 點(diǎn)選product image元素
2. 將sale flash關(guān)閉
3. 將第一個(gè)spacing設(shè)置為10px，原來(lái)是0
4. 將第二個(gè)spacing設(shè)置為10px，原來(lái)也是0，然后就能看到如下圖說(shuō)是的效果了

接下來(lái)我們看下其他設(shè)備上的效果

1. 點(diǎn)選列
2. 點(diǎn)選左側(cè)的advanced
3. 點(diǎn)擊左側(cè)底部的設(shè)備圖標(biāo)
4. 切換到平板、手機(jī)依次查看，我們發(fā)現(xiàn)手機(jī)端有一些空白間距
5. 我們進(jìn)行padding的調(diào)整
6. 將padding都改為0，然后update

調(diào)整完產(chǎn)品圖片后，我們調(diào)整右側(cè)的產(chǎn)品簡(jiǎn)介，我在導(dǎo)入模板后，只保留了產(chǎn)品標(biāo)題元素，其他的都刪除了，現(xiàn)在我們按下圖所示補(bǔ)充元素

從上到下依次是：面包屑、產(chǎn)品簡(jiǎn)述、(詢(xún)盤(pán))按鈕、分享按鈕

我們注意到詢(xún)盤(pán)按鈕的顏色與主題不符，我們不用單獨(dú)去為按鈕設(shè)置顏色，可以采用主題樣式的辦法進(jìn)行全局設(shè)置，這樣以后用button元素時(shí)，都有統(tǒng)一的效果，當(dāng)然，若別處需要用到個(gè)性化設(shè)計(jì)的按鈕，你可以在button元素上設(shè)置，它將覆蓋默認(rèn)的全局設(shè)置。

1. 點(diǎn)選左側(cè)左上角的三道杠后，再點(diǎn)擊theme style
2. 切換到theme style面板，點(diǎn)選button欄目，設(shè)置text color為白色
3. 將background color設(shè)置為金色（或者你選的主題的顏色）
4. 將border radius設(shè)為0 ，這將去掉按鈕四角的圓弧，當(dāng)然你也可以將border radius設(shè)置為更大的值，增大四角的圓弧，變成圓角按鈕
5. 記得要點(diǎn)擊update保存樣式，并點(diǎn)擊左側(cè)右上方的x關(guān)閉theme style回到頁(yè)面編輯模式；你還可以依次瀏覽theme style的各項(xiàng)設(shè)置，譬如background用來(lái)設(shè)置所有頁(yè)面的默認(rèn)背景色/圖；typography用來(lái)設(shè)置全局字體、標(biāo)題字體等等，請(qǐng)挨個(gè)探索吧~

1. 回到single product頁(yè)面的編輯后，我們點(diǎn)擊enquiry圖標(biāo)
2. 在text中設(shè)置按鈕上的文案，譬如enquiry
3. 將鏈接link設(shè)置為contact url，
1. 選擇type為email
2. 填寫(xiě)email為mailto:你接受詢(xún)盤(pán)的郵箱

1. 將alignment設(shè)置為居中對(duì)齊，你可以挨個(gè)試一下4個(gè)對(duì)齊方式的效果
2. 選擇一個(gè)icon，或者不選也可以，以上設(shè)置完成后，就將看到下圖所示的按鈕效果

詢(xún)盤(pán)按鈕除了上文的做法，還有另一種辦法，稍微復(fù)雜一些

1. 開(kāi)通企業(yè)郵箱，相關(guān)教程：如何開(kāi)通阿里云企業(yè)郵箱免費(fèi)版
2. 配置發(fā)件郵箱賬號(hào)，在wordpress后臺(tái)安裝SMTP插件并設(shè)置發(fā)件功能
3. 安裝插件Elementor Contact Form DB并啟用，用于在wordpress后臺(tái)存儲(chǔ)詢(xún)盤(pán)記錄
4. 用elementor添加新模板，模板類(lèi)型為popup（彈出窗），我們將在popup里放聯(lián)系表單
5. 在popup模板庫(kù)里不要選擇模板導(dǎo)入，直接點(diǎn)擊右上角關(guān)閉
6. 將heading和form元素加入到頁(yè)面，如下圖所示

6.設(shè)置需要用戶(hù)必須填寫(xiě)的字段，并顯示*標(biāo)記；你也可以在左側(cè)新增字段，默認(rèn)情況下是name、email、message三個(gè)字段，建議字段不要過(guò)多，降低用戶(hù)填寫(xiě)難度

7.將調(diào)整完畢的form元素右鍵存儲(chǔ)為Global元素，以便于在其他地方重復(fù)使用

8.發(fā)布表單，并將條件設(shè)為全站，保存即可，不需要設(shè)置其他（triggers或advanced rules）

9.回到產(chǎn)品模板頁(yè)面，點(diǎn)擊詢(xún)盤(pán)按鈕（下圖中我換了一個(gè)示例網(wǎng)站，但操作都是一樣的），在左側(cè)按鈕設(shè)置中，點(diǎn)擊link 右側(cè)的dynamic 按鈕，在下拉選項(xiàng)中選擇popup，然后繼續(xù)點(diǎn)擊popup，在setting中搜索并選中剛才添加的popup

10.此時(shí)，點(diǎn)擊詢(xún)盤(pán)按鈕，將可見(jiàn)到詢(xún)盤(pán)彈出窗口

11.我們?cè)谌我划a(chǎn)品頁(yè)面提交詢(xún)盤(pán)進(jìn)行測(cè)試，查看是否能收到詢(xún)盤(pán)郵件通知以及后臺(tái)是否記錄，詢(xún)盤(pán)郵件將發(fā)送到你的wordpress賬戶(hù)郵箱里，如需添加收件郵箱，請(qǐng)?jiān)谠?xún)盤(pán)表單中進(jìn)行配置，多個(gè)郵箱之間用英文逗號(hào)間隔即可。同時(shí)，在此處也能設(shè)置通知郵件的標(biāo)題、正文。

在發(fā)完測(cè)試詢(xún)盤(pán)后，我們查看郵箱是否收到郵件（注意檢查垃圾郵箱），同時(shí)在后臺(tái)Elementor DB中查看詢(xún)盤(pán)記錄，如下圖所示，大功告成。

接下來(lái)調(diào)整產(chǎn)品介紹的內(nèi)容區(qū)域，主要是調(diào)整字體部分，從模板中導(dǎo)入的元素，通常都有自定義的設(shè)置，無(wú)法直接調(diào)用我們?cè)趖heme style中的默認(rèn)設(shè)置，這會(huì)導(dǎo)致全站的字體混雜，不僅影響觀(guān)感，加載過(guò)多的字體更影響網(wǎng)站的速度

1. 點(diǎn)選product data tabs元素
2. 將panel的typography點(diǎn)選刷新按鈕恢復(fù)themestyle中的默認(rèn)設(shè)置
3. 將heading的typography點(diǎn)選刷新按鈕恢復(fù)themestyle中的默認(rèn)設(shè)置

恢復(fù)默認(rèn)字體后的效果如下圖所示，當(dāng)然也沒(méi)必要所有地方都統(tǒng)一用默認(rèn)字體，適當(dāng)?shù)淖远x字體能增加美觀(guān)

接下來(lái)刪除下面的upsell 及其所在的section，因?yàn)樵蹅兊腂2B站點(diǎn)也用不上這個(gè)功能

最后，如果你希望客戶(hù)能夠提交產(chǎn)品評(píng)價(jià)，或者自己錄入一些過(guò)往客戶(hù)對(duì)你的產(chǎn)品評(píng)價(jià)，以助于更好的宣傳你的產(chǎn)品，你可以增加product rating元素塊。

如果你不想產(chǎn)品頁(yè)面保留評(píng)價(jià)，那么你需要按下圖所示，以關(guān)閉評(píng)價(jià)功能

接下來(lái)，你可以切換到平板、手機(jī)效果下看看網(wǎng)頁(yè)是否正常，并酌情調(diào)整。至此我們就得到了一個(gè)滿(mǎn)足基本需求的產(chǎn)品詳情頁(yè)了，如果想要更多的高級(jí)功能，那就進(jìn)入下個(gè)環(huán)節(jié)，運(yùn)用advanced custom filed高級(jí)自定義字段插件，為產(chǎn)品自定義字段，譬如：Q&A

1. 進(jìn)入 字段》 新建
2. 添加字段組名稱(chēng)，如產(chǎn)品
3. 設(shè)置位置為：內(nèi)容類(lèi)型等于產(chǎn)品，這樣能實(shí)現(xiàn)所有產(chǎn)品頁(yè)面都會(huì)新增這個(gè)字段
4. 點(diǎn)擊添加字段

依次輸入字段標(biāo)簽，字段名稱(chēng)系統(tǒng)會(huì)根據(jù)字段標(biāo)簽自動(dòng)生成，建議都用英文，選擇字段類(lèi)型為可視化編輯器，然后保存即可

保存后我們進(jìn)入產(chǎn)品列表，編輯任一產(chǎn)品，發(fā)現(xiàn)在頁(yè)面下方新增了上述字段，你也可以參照上述辦法再增加一下你需要的其他字段，譬如brochure、why choose us等等，然后在所選產(chǎn)品頁(yè)面填充好QA的示例內(nèi)容。

回到single product模板的編輯頁(yè)面，你可以通過(guò)訪(fǎng)問(wèn)任一產(chǎn)品頁(yè)面，在頁(yè)面頂部點(diǎn)擊edit with elementor，并在展開(kāi)的下拉面板中選中當(dāng)前模板進(jìn)入編輯。

在頁(yè)面的末尾加上一個(gè)heading元素，設(shè)置title為QA，默認(rèn)html tag為h2，師不用修改的，一個(gè)頁(yè)面可以有多個(gè)h2,但只能由1個(gè)h1，h1一般用作標(biāo)題，h1-h6可以理解為章節(jié)標(biāo)題的層級(jí)遞進(jìn)，類(lèi)似總分關(guān)系，數(shù)字越小層級(jí)越高

然后在heading下方再加入一個(gè)text editor元素，點(diǎn)擊dynamic tag，選中acf field（acf 是advanced custom filed插件的首字母）

選中acf field后，在key中選擇剛才添加的字段 QA

若你剛才添加了qa的產(chǎn)品并非當(dāng)前預(yù)覽的產(chǎn)品，則你需要點(diǎn)擊左下角的齒輪setting一下預(yù)覽的產(chǎn)品，點(diǎn)擊apply&preview按鈕后即可看到qa已經(jīng)添加成功了。

好了，關(guān)于這個(gè)elementor編輯的詳細(xì)示例就講解到這里，其他頁(yè)面請(qǐng)自行多多探索，如有疑問(wèn)可以聯(lián)系我，收集到大家的常見(jiàn)問(wèn)題后，我會(huì)繼續(xù)補(bǔ)充到本文中。

外貿(mào)建站內(nèi)容發(fā)布的要點(diǎn)

圖片素材

圖片命名

需按照?qǐng)D片本意進(jìn)行英文命名，不要用中文或亂碼命名，這樣不利于搜索引擎理解圖片的內(nèi)容，譬如：產(chǎn)品若有多張圖片，可以采用同義詞進(jìn)行命名

圖片格式

一般是png、jpg，不同用途的圖片尺寸和大小又有區(qū)別：

1. Logo：寬度不超過(guò)300px，大小建議在50K以?xún)?nèi)
2. 站點(diǎn)圖標(biāo)：顯示在瀏覽器頁(yè)卡中的正方形圖標(biāo)，尺寸用至少512* 512，大小控制在幾K。PS:如果在手機(jī)上用J將網(wǎng)頁(yè)保存到桌面的功能時(shí)，也會(huì)用到此圖標(biāo)。
3. Banner/slider：廣告圖或裝飾用的背景圖片，寬度一般建議在1200px，若banner希望做成全寬的，那么圖片用2560px寬度也是可以的，但要盡量不讓圖片太大，盡量控制在200K以下，以不影響清晰度為前提，越小越好。
4. 產(chǎn)品圖片：寬度建議在600-1200px，大小建議控制在150K以下，盡量保證圖片的方向和尺寸的統(tǒng)一性，避免部分圖片是橫圖，部分又是豎圖。
5. 其他圖片，如證書(shū)、團(tuán)隊(duì)成員等：寬度建議在1200px以?xún)?nèi)，大小建議控制在150K以下。

圖片大小

上文中已經(jīng)介紹過(guò)圖片大小建議，一般我們用手機(jī)或相機(jī)拍的照片，圖片都是幾M以上，這會(huì)嚴(yán)重拖累網(wǎng)站速度，進(jìn)而流失用戶(hù)。那么如果圖片過(guò)大，該怎么處理呢？

第一步：線(xiàn)下壓縮圖片

圖片數(shù)量多時(shí)，用photoshop的自動(dòng)批處理功能

1. 打開(kāi)photshop，打開(kāi)一張圖片
2. 在菜單欄中，點(diǎn)擊“窗口”，勾選“動(dòng)作”，點(diǎn)擊新建按鈕，命名動(dòng)作名稱(chēng)，確定后自動(dòng)開(kāi)始錄制

1. 將圖像大小改為目標(biāo)尺寸，如1000px或1200px

1. 將圖片存儲(chǔ)為web格式，調(diào)整質(zhì)量為90 jpg格式，存儲(chǔ)到非原圖的新文件夾內(nèi)。（PS：如果你的圖片需要保留透明效果，就要保持為png格式，通常png格式比jpg格式的圖片要大）

1. 關(guān)閉圖片，并點(diǎn)擊不保存原圖修改，

1. 至此，動(dòng)作錄制完成，點(diǎn)擊動(dòng)作錄制的結(jié)束按鈕

1. 接下來(lái)進(jìn)行圖片的批量處理，

• 點(diǎn)擊文件》自動(dòng)》批處理
• 選擇動(dòng)作，默認(rèn)已經(jīng)選好剛才錄制的動(dòng)作
• 選擇源件夾：選擇需要處理的圖片所存放的文件夾
• 目標(biāo)文件夾：選擇需要存儲(chǔ)處理后圖片的文件夾
• 點(diǎn)擊確定，photoshop開(kāi)始快速處理圖片，處理完成后你去文件夾里驗(yàn)收即可

圖片數(shù)量少時(shí)，用免費(fèi)軟件paint.net單個(gè)處理，采用下面的步驟會(huì)覆蓋原圖，如需保留原圖，則請(qǐng)先復(fù)制一份原圖

1. 用http://paint.net打開(kāi)圖片
2. 點(diǎn)擊ctrl+r修改圖像尺寸后，回車(chē)鍵確認(rèn)
3. 點(diǎn)擊ctrl+s保存圖片，設(shè)置質(zhì)量為90，回車(chē)鍵確認(rèn)

第二步：線(xiàn)上壓縮圖片

針對(duì)原圖很大的圖片，僅僅線(xiàn)下壓縮是不夠的，我們還可以繼續(xù)在wordpress里進(jìn)行二次壓縮，你也可以用shortpixel.com網(wǎng)站的glossy模式壓縮后，再上傳到wordpress進(jìn)行三次壓縮

順便一說(shuō)：shortpixel是一款付費(fèi)插件，但提供每個(gè)月少量的免費(fèi)壓縮額度，你也可以嘗試安裝這款插件試用一番，shortpixel和下文即將介紹的插件我都在用，shortpixel比本文推薦的reSmush.it image optimizer更好，在本站這么多圖的壓縮中，我先用的reSmush.it image optimizer（它免費(fèi)），發(fā)現(xiàn)不夠理想，就轉(zhuǎn)為用shortpixel付費(fèi)版本了，價(jià)格也不貴，＄9.9可處理10000張圖，且無(wú)時(shí)間限制。

如果你的圖片在1M以?xún)?nèi)，也可以考慮直接采用線(xiàn)上壓縮圖片，而跳過(guò)第一步的線(xiàn)下壓縮，但要試驗(yàn)，確認(rèn)一下線(xiàn)上壓縮后的圖片大小，是符合上文建議的，或者能在100K左右。

確保安裝并啟用了插件reSmush.it image optimizer，按下圖所示配置：

此后每次上傳圖片都會(huì)自動(dòng)處理，若需要優(yōu)化安裝插件之前的圖片，請(qǐng)?jiān)谏蠄D中點(diǎn)擊optimize all pictures，或者在媒體庫(kù)中按需手動(dòng)優(yōu)化。

視頻素材

諸如公司介紹視頻、產(chǎn)品介紹視頻、客戶(hù)評(píng)價(jià)視屏、項(xiàng)目實(shí)施視頻等等，請(qǐng)不要直接上傳到網(wǎng)站的媒體庫(kù)里，當(dāng)面向國(guó)外用戶(hù)時(shí)，請(qǐng)上傳到Y(jié)outube，獲取視頻地址并放入到網(wǎng)站中需要展示的地方。

如果你同時(shí)要做中文站，我的建議是另建站，把服務(wù)器放到國(guó)內(nèi)，速度會(huì)更快，依舊可以用wordpress建站，只是國(guó)內(nèi)建站需要備案。

文案素材

產(chǎn)品分類(lèi)介紹、產(chǎn)品介紹、產(chǎn)品手冊(cè)、產(chǎn)品項(xiàng)目信息、產(chǎn)品評(píng)價(jià)信息…

公司介紹文案、公司歷史、公司資質(zhì)、公司生產(chǎn)水平、公司貿(mào)易水平…

以上圖文介紹信息可參照阿里巴巴國(guó)際站的同行店鋪，在店鋪中找到公司介紹頁(yè)，它的信息結(jié)構(gòu)已經(jīng)被梳理的非常完善，當(dāng)然你也可以參照優(yōu)秀同行做準(zhǔn)備，同時(shí)，更重要的是想目標(biāo)客戶(hù)之所需，內(nèi)容要飽滿(mǎn)，因?yàn)閮?nèi)容稀薄的頁(yè)面不大會(huì)獲得搜索引擎中的高排名，同時(shí)，也會(huì)降低用戶(hù)的詢(xún)盤(pán)意向。

頁(yè)面關(guān)鍵詞

每個(gè)頁(yè)面可以理解為一篇作文，主旨就是核心關(guān)鍵詞，就是你想要向用戶(hù)傳遞的關(guān)鍵信息。

譬如，我們寫(xiě)一篇有關(guān)媽媽的作文，這個(gè)出題的意圖就不精確，作文標(biāo)題會(huì)有不同的取法：

• 媽媽
• 媽媽的手
• 媽媽做過(guò)的飯
• 我的愛(ài)做飯的媽媽
• 工作中的媽媽
• …

那拿著媽媽這個(gè)詞去谷歌里搜索，也會(huì)呈現(xiàn)很多類(lèi)型不一致的結(jié)果，那么這個(gè)詞作為頁(yè)面核心關(guān)鍵詞是不合適的，因?yàn)橐鈭D不明確，我們要找到搜索意圖明確的關(guān)鍵詞。

接下來(lái)以bottle coding machine為示例，在谷歌中搜索后，查看視頻、圖片、文字的搜索結(jié)果是否與產(chǎn)品趨于一致，如果大部分都一致，譬如還能看到阿里巴巴等B2B平臺(tái)的搜索結(jié)果、同行的產(chǎn)品，那么詞意是準(zhǔn)確的。

有些人做的產(chǎn)品是2C的，譬如衣服的批發(fā)，那這種時(shí)候直接搜索衣服，會(huì)看到大部分是amazon等在線(xiàn)銷(xiāo)售的網(wǎng)站，這種時(shí)候，定關(guān)鍵詞時(shí)就要帶上準(zhǔn)確的意圖詞，譬如衣服批發(fā)商、衣服制造商等等。

通常一個(gè)產(chǎn)品可能會(huì)有多個(gè)同義名稱(chēng)，每個(gè)名稱(chēng)的用戶(hù)搜索量是不一樣的，這種時(shí)候，我們通常借助于工具來(lái)查詢(xún)每個(gè)詞的搜索量和排名難度，找尋搜索量大一些，排名難度低一些、搜索意圖準(zhǔn)確的的詞。

我用的工具是Kwfinder，Ahrefs和Semrush，kwfinder評(píng)估的難度值和搜索量更接近同行的均值，但ahrefs和semrush提供了更多的關(guān)鍵詞建議，這三款都提供免費(fèi)的試用，敬請(qǐng)?bào)w驗(yàn)。

我基于目前在用的kwfinder，示意一下操作過(guò)程

注冊(cè)并登錄Kwfinder，在如下頁(yè)面輸入關(guān)鍵詞，點(diǎn)擊find keywords

你將看到如下搜索結(jié)果，左邊展示了相關(guān)關(guān)鍵詞（可用于找同義詞數(shù)據(jù)）、搜索量趨勢(shì)（平穩(wěn)上升或穩(wěn)定的趨勢(shì)好，走下坡路的就盡量避免）、搜索量（大的好）、付費(fèi)搜索單價(jià)（價(jià)格越貴購(gòu)買(mǎi)意圖越強(qiáng)）、付費(fèi)搜索競(jìng)爭(zhēng)度（數(shù)值越大付費(fèi)競(jìng)爭(zhēng)越激烈）、關(guān)鍵詞自然排名的難度值（難度越低越好，越有希望排名靠前）。右邊是搜索量趨勢(shì)數(shù)據(jù)與搜索結(jié)果。

你還可以繼續(xù)用谷歌提供的Google keywords planner（GKP）來(lái)查看搜索量、競(jìng)爭(zhēng)度，它是為Google Ads服務(wù)的（谷歌付費(fèi)搜索），但依舊能為我們提供很大的參考，畢竟它的數(shù)據(jù)是一手的。再使用GKP之前，我們要開(kāi)通Google Ads賬戶(hù)，請(qǐng)自行處理。在進(jìn)入GKP后，將看到如下界面

輸入你的產(chǎn)品名稱(chēng)，設(shè)置好語(yǔ)言和區(qū)域（區(qū)域可以設(shè)定無(wú)，地區(qū)保留為空，即全球）

然后你將得到關(guān)鍵詞建議、搜索量區(qū)間與競(jìng)爭(zhēng)度（針對(duì)付費(fèi)競(jìng)爭(zhēng)）

此時(shí)，若勾選關(guān)鍵詞加入方案中，你將得到更詳細(xì)的數(shù)據(jù)

此外，在谷歌搜索時(shí)，輸入框下方也會(huì)給你用戶(hù)搜索的相關(guān)關(guān)鍵詞提示

好的，說(shuō)到這里，你已經(jīng)知道頁(yè)面關(guān)鍵詞該怎么定了，關(guān)鍵詞要放入頁(yè)面標(biāo)題（title）、頁(yè)面的描述（meta description）、頁(yè)面的H1標(biāo)簽、頁(yè)面的正文中進(jìn)行自然而然的布局，語(yǔ)句要通順，語(yǔ)境要自然，別為了加關(guān)鍵詞而堆砌，這樣會(huì)遭到算法的懲罰。

在這里提前說(shuō)一下隸屬于SEO模塊的內(nèi)容，關(guān)于頁(yè)面的url、title、meta description在哪里設(shè)置，待你安裝好rank math seo插件后，使用“編輯”功能進(jìn)入產(chǎn)品、文章、頁(yè)面等，在頁(yè)面下方，能看到設(shè)置欄目；若頁(yè)面使用了elementor編輯，在elementor界面左側(cè)也能看到rank math設(shè)置欄目

站內(nèi)基礎(chǔ)SEO

當(dāng)你的站點(diǎn)內(nèi)容都已經(jīng)填充完成，三端（電腦、平板、手機(jī)）都進(jìn)行了周密的檢查，我們開(kāi)始站內(nèi)基礎(chǔ)SEO教程。

首先，改網(wǎng)站名字，之前一直沒(méi)改，你也可以提前改，在上線(xiàn)前任何時(shí)間改動(dòng)都可以。請(qǐng)進(jìn)入wordpress后臺(tái)的設(shè)置》常規(guī)頁(yè)面，把站點(diǎn)名稱(chēng)改為你的品牌名稱(chēng)或公司簡(jiǎn)稱(chēng)，不要太長(zhǎng)；副標(biāo)題可以直接去掉。

設(shè)置logo：進(jìn)入外觀(guān)》自定義》站點(diǎn)身份，上傳圖標(biāo)（即logo）和站點(diǎn)圖標(biāo)（上文說(shuō)到的512*512px），最后記得點(diǎn)擊右上角發(fā)布

接下來(lái)按照下述教程，逐一操作

1. 給網(wǎng)站安裝google analytics跟蹤代碼
2. 給網(wǎng)站開(kāi)通google search console
3. 將google analytics關(guān)聯(lián)google search console
4. Rank math SEO設(shè)置教程

外貿(mào)網(wǎng)站速度優(yōu)化

我們需要用工具gtmetrix測(cè)試站點(diǎn)的速度，并進(jìn)行速度優(yōu)化，盡量?jī)?yōu)化到加載時(shí)間在3S以?xún)?nèi)，優(yōu)化教程請(qǐng)按如下子教程逐一實(shí)施

1. 優(yōu)化圖片，在上文中已經(jīng)介紹了圖片的優(yōu)化辦法，此教程中做了一些補(bǔ)充擴(kuò)展
2. 使用SG Optimizer加速網(wǎng)站，如果使用WP Rocket插件，就不要安裝sg optimizer，但針對(duì)使用siteground建站的情況，請(qǐng)進(jìn)入Siteground的site tools>speed>caching頁(yè)面，在Memcached標(biāo)簽頁(yè)中打開(kāi)開(kāi)關(guān)
3. 使用WP Rocket加速網(wǎng)站
4. 在siteground給網(wǎng)站啟用cloudflare CDN

開(kāi)放收錄，站點(diǎn)上線(xiàn)

完成上述內(nèi)容后，你的外貿(mào)網(wǎng)站可上線(xiàn)，開(kāi)放收錄吧、

進(jìn)入設(shè)置》閱讀，將建議搜索引擎不索引本站點(diǎn)去掉勾選，保存更改

還可以進(jìn)入google search console提交站點(diǎn)地圖以助于加快收錄