專注於企業網站架設,分享WordPress教學和Elementor教學
不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%,感謝你的互惠互助

企業網站:用Elementor架設網站到上線的詳細步驟

更新日期:2021-11-02

掃碼加入 讀者學習群

相關 教學

我自用的 架設網站資源

當你點擊本站的鏈接購買主機、主題、外掛,我會得到一些佣金用於運營網站,但不會影響你的購買價格,我只推薦自己在用的,感謝有你的支持~比心( •̀ ω •́ )y

Cloudways

不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%
了解詳情→

elementor logo gradient 01 1
Elementor

最熱門的網頁可視化設計編輯器,我的網站就是用它建的
了解詳情→

Namesilo

註冊網域,購買時使用優惠券loyseo可減1美元
前往註冊→

Share on facebook
Share on twitter
Share on linkedin

本文全篇24000+字,一步步講解:如何用Cloudways主機Elementor外掛Hello elementor免費主題,完整製作一個詢盤展示型企業網站,且架設網站費用每年在1200元左右。

這篇企業網站架設教學相對比較進階,如需容易一點的,請查看這篇:Astra主題教學:免費架設企業網站

如果你缺少自學架設網站的時間,可查看我提供的企業網站架設服務

架設網站要花多少錢

  • 網域費用:65元左右/年
  • 主機費用:800左右/年
  • 主題費用:0元(Hello Elementor主題)
  • 外掛費用:Elementor Pro 官方價格49美元/站點/年(≈340/年),了解省錢購買攻略
  • 教學費用:0。
是的,本站的教學都免費,且圖文+視頻兼備。為了互惠互助,如果你沒有主機的話,希望你能點擊本站的主機鏈接(Cloudways)、使用本站的優惠券代碼(loyseo)去購買主機。我推薦的主機是2020年初以來,我自己用過7、8款主機以後,對比留下的性價比最好的。通過主機和外掛給我的佣金,我才能維持站點的運營和不斷寫作,目前每個月佣金收入太少,以至於不得不接架設網站服務來維持運營,因為一年的佣金收入還不及一個月的架設網站服務收入,哎,於是不得已就降低教學的產量。

註冊網域

下方為2021/4/9更新的視頻教學,新用戶在Namesilo購買網域可以在優惠券處輸入loyseo 以便減1美元哦~

  1. 網域取名
    • 用.COM網域
    • 網域長度要盡量短一點
    • 最好不要有數字、連字符-
    • 選擇容易被記住的名字
    • 基於以上條件,再看下面的幾條:
      1. 首選:用品牌名,知名樣例:alibaba.com, amazon.com
      2. 次選:用品牌名+主營產品關鍵詞,又叫半匹配網域(PMD),例如我的站點:loyseo.com
      3. 非常不建議直接用產品關鍵詞做網域,又叫EMD(精準匹配網域),牢記咱們是品牌企業網站,更多原因分析請看:關於EMD和PMD的分析文章
  2. 購買網域
    • Namesilo:新會員首次購買網域時輸入優惠代碼:loyseo,可少付1美元,即$8.95(¥58),常規價格$9.95(¥64)/年。
    • 阿里萬網:新用戶有36元代金券,購買.COM網域首年常規價63元,使用代金券後為27元,續費75元/年(續費時可以按照界面提示的優惠口令獲取續費優惠),略有不便的是需要實名認證,點段首鏈接直接可進入有代金券的頁面。

如需查詢網域是否可用、了解更多關於註冊網域的知識,請點擊此處

買完後暫時不用做任何配置,繼續下一步驟:買存放網站用的主機

註冊Cloudways

我和很多客戶都用Cloudways主機,速度快、10美金套餐就夠新網站用了、並且是按月計費,不需要年付,還能按需一鍵升級配置,像SiteGround、Bluehost等共享主機都是第一次買優惠很高(譬如3折),到續費就很貴,Siteground續費要25刀一個月,而Bluehost速度不好,且他們是共享主機,比不上cloudways是vps(專享主機),還不能按需一鍵升級配置。

前往Cloudways首頁註冊

註冊Cloudways
註冊Cloudways
image 158
可參考上圖填寫註冊表單,其中促銷代碼填loyseo可獲得前2個月優惠30%

接下來填寫你的姓名、郵箱、密碼等信息,其中我試了qq郵箱、網域郵箱…通通被告知不能註冊,靠譜且推薦的註冊郵箱是Gmail、Hotmail。

點擊Got a promo code按鈕,填寫促銷代碼(promo code):loyseo,能夠獲得前2個月優惠30%

填寫註冊表單提交後,如果你運氣好,那麼你可能不需要下面的身份驗證,否則,你將像我一樣,收到如下圖所示的系統提示,要你自己發一封郵件給[email protected]

image 20 11 25 17 13 07

於是,我發了一封機翻的郵件過去,請求審核賬號。

Hi, Please review my account

Hi, I just registered an account, Please review my account.

Best Regards.

image 155

然後,我收到了下圖所示郵件,告知我郵件回复身份證、社交賬號、聯繫信息等等。

image 156
image 157

我拿出身份證,拍了照片,在照片上PS加上機翻文案:This certificate is only for me to authenticate in cloudways, and can not be used in other places.同時,你也可以給身份證的關鍵信息打碼,譬如地址的詳細信息(只保留了省市)、身份證號碼只保留前幾位(其他的打碼),這樣就不用擔心信息洩露了。再附上了自己的網站和手機號碼,如果你還沒有網站,可以附加LinkedIn、Facebook或Twitter的個人主頁地址

image 158

很快,大約幾分鐘,我就收到了賬戶激活通知,但是也有人等待蠻久的,我問了下官方,審核時間是24小時以內,如果你著急想要激活,可以聯繫我加快審核過程。

image 160

點擊activate account成功登錄~

image 161

在Cloudways中創建服務器

點擊上圖中的let's get started按鈕,系統開始引導我創建應用(Application)了。

第一步,選擇WordPress版本,保持默認即可。

image 162

第二步,選擇服務器提供商,一共有5個,每家價格不一樣,眼睛要擦亮,我選的第一個DigitalOcean,實測速度確實好,WordPress官方都推薦DigitalOcean的服務器,如果你對這方面沒啥研究,跟著我選就好啦~記得不要選vultr,因為這個主機的IP容易被本國牆掉。

image 163

第三步,選服務器的位置,我選的New York,後來我又買了個新加坡的試試看,因為我試過之後發現紐約在國內不開VPN都很快,就想買個新加坡的把我的網站搬過去,但新加坡的明顯沒有紐約的快,我在國內網絡、香港網絡分別訪問兩台服務器上的網站,嘗試了好多天,發現還是紐約的快,所以服務器位置選對也很重要,通常建議服務器位置位於客戶主要區域,但是為了實測速度,可以買多台主機花兩三天測試一下,因為cloudways是用量計費的,最後我們保留速度最佳的服務器

image 164

第四步,接下來填寫WordPress右側的三個名稱,隨喜命名,除了便於識別,沒有其他用處。sever size可以和我一樣選擇1GB(存儲有25GB),每月是10美金(跟Siteground的GrowBig的9.9美金差不多了哈~),但它是按小時計費的,先用後付,用多少收多少,隨用隨退,也不存在續費漲價,此外,每個月還有很低的異地備份費用(0.033刀/G,以0.5刀為計費單位,譬如我的主機每個月的賬單是10.5刀)。同時,只要你不覺得用起來卡,你可以在一台服務器裡創建N個網站,覺得不夠用了再升級。

最後點擊右下角的launch now按鈕創建服務器。

image 165

接下來就是等待服務器創建吧,大約幾分鐘。

你看,界面上提示:新用戶有3天的免費試用,如果確認要用,記得要在結束試用前點擊升級賬戶按鈕,綁定信用卡哦~不然做好的網站可能會消失不見哦~

image 166

購買Cloudways/升級你的賬戶

點擊賬戶頂部的upgrade my account按鈕,進入填寫信用卡信息界面,填完後點擊authorize提交即可,Cloudways是先使用再結算的方式,按月結算。所以綁定信用卡後,也不會立即扣款,此外,如果你想綁定paypal或者用paypal支付賬單,可以點擊這裡查看方法。

image 178
image 179

你也可以按下圖所示操作,進入賬戶提交你的信用卡信息進行升級。

Cloudways主機評測與教學

接下來你可以按需創架設網站了,除了開通賬戶時創建的網站之外,你還可以創建更多網站,每台服務器里至少要有一個網站,所以即便你刪除網站,也要確保服務器裡有一個網站。

在cloudways裡,網站被視為一類應用(Application),所以我們接下來講解如何添加網站應用(Application)。

在Cloudways中創架設網站

在開通服務器時,我們已經創建了一個網站,如果你需要創建更多網站,請按如下步驟操作。

2021/09/28更新視頻教學

下面這個視頻是講解如何將網站搬運到Cloudways主機,搬運是不影響原網站的,不用擔心搬運後原網站就被刪了。

下方是文字版教學

如下圖所示,登錄Cloudways之後:

  1. 點擊頂部菜單中的Application進入應用列表,網站就是一個應用
  2. 點擊頁面右側的Add Application按鈕
  3. 在彈出層中選擇你購買的服務器
  4. 點擊Add Application按鈕提交
Cloudways主機評測與教學

接下來要填寫網站應用的具體信息了

  1. 選擇應用類型,默認是WordPress,點擊它我們能看到4個WordPress選項,通常選擇第1個WordPress就可以了;如果你需要製作B2C企業獨立站,那就選擇第2個WordPress+WooCommerce,其實WooCommerce在WordPress後台就可以安裝,所以直接選第1個WordPress也沒問題。Cloudways主機評測與教學
  2. 應用命名,通常寫你的網域或網站名稱
  3. 選擇項目,通常保持默認,項目是對應用/網站的歸類,只是標記的作用
  4. 點擊Add Application提交
Cloudways主機評測與教學

接下來等待系統創架設網站,大約幾分鐘就好

Cloudways主機評測與教學

此時,你發現沒?我們並未輸入網域,因為Cloudways會分配給你一個臨時網域使用,在下文中,我會講解如何綁定網域。

好啦,網站創建成功,如下圖所示,自動返回了服務器列表頁,請點擊服務器列表右側的的www打開網站應用列表。或者點擊頂部菜單application也能進入應用列表。

Cloudways主機評測與教學

然後選擇你的網站進入管理面板。

Cloudways主機評測與教學

如何找到網站登錄信息

點擊頂部菜單application也能進入應用列表,點擊應用名稱可打開應用管理面板後,我們默認進入了access details頁面,可以查看到網站的臨時地址、網站後台地址、賬號、密碼、IP地址等等。

image 20 12 29 16 07 54

需要注意的是,如果你在網站後台自行修改了後台登錄地址、賬號、密碼,那在面板中不會自動更新,你得自己本地記錄好。

接下來我們將臨時網域換成正式網域。

修改固定鏈接設置

請在登錄網站後台之後,修改一下固定鏈接的設置為下圖所示的文章名。

cloudways setting guding lianjie

綁定網域

關於網域,我們要先想一下,是選帶www的還是不帶www的,我的建議是:不帶www的,因為短一點

如果你希望帶www的網域也能打開當前網站,那還要添加一條www開頭的additional domain(附加網域)。

譬如我的網域是loyseo.com,這是不帶www的,www.loyseo.com便是帶www的。添加解析記錄時,需要添加兩條解析記錄,分別是www和@(@代表不帶www),都指向到網站服務器IP,然後修改網站的.htaccess文件,在其中添加強制跳轉的代碼

想好用什麼網域後,我們進入管理面板左側的domain management,將這個網站的網域填入primary domain(主網域),然後保存。

image 169

接下來請酌情添加additional網域,譬如www開頭的網域,如下圖所示操作。

image 170

綁定完網域後,我們去做網域解析,網域解析便是將綁定的網域指向到Cloudways的服務器IP地址(在服務器列表或是網站應用管理界面,都能查看到IP,點擊ip即可複制)。

image 168

我推薦的網域解析的方法是:將你的網域解析服務器轉移到Cloudflare,然後使用Cloudflare的網域解析管理和免費CDN,一舉兩得,詳見這篇Cloudflare教學

如下圖所示,我在cloudflare添加了兩條解析記錄(不帶www和帶www),類型都是A,代理狀態都是僅限DNS的灰色雲。如果你不需要帶www的網域跳轉到不帶www的網域,可以只添加一條根網域記錄(即名稱處填寫@)

image 165

如果你添加完成後,代理狀態是橙色的雲,那表示給網站開啟了CDN,我的建議是在網站架設期間,不要打開CDN,點擊雲朵就可以操作切換到灰色雲狀態。

image 164

添加完解析記錄後,通常幾分鐘就生效了,你可以打開網站看看,我們接下來去給網站安裝SSL證書。

安裝SSL證書

我們進入管理面板左側的SSL Certificate,然後輸入你的郵箱地址(不是網域郵箱也沒關係)、輸入主網域(如果要給附加網域添加ssl,就點擊add domain添加多個網域),然後點擊Install按鈕安裝SSL證書。

image 20 12 29 17 17 25

等待安裝完成後,我們點擊Enable Https啟用https重定向,這樣訪問http網址能跳轉到https網址。

image 172

等待片刻,重定向設置完畢了

image 173

提示框中也告訴我們,如果遇到問題,可以在應用的設置中禁用重定向。

image 174

基礎操作

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

1.勾選“建議搜索引擎不收錄”,在站點建完之後再去掉勾選,以便讓搜索引擎收錄

視頻教學:

  • 進入settings》reading
  • 將search engine visibility勾選
  • 點擊save changes
wordpress網站不被搜索引擎收錄

2.修改後台界面語言為中文,方便使用

視頻教學:

第一步,安裝簡體中文語言包

wordpress的站點語言

第二步,將site language改回English

如果你的站點不是英文的,而是西班牙語的,那麼你就需要在這里安裝西班牙語,並將site language設置為西班牙語。

wordpress的站點語言-2

第三步,在用戶處修改語言為中文

此操作確保後台是中文的,網站前台看到的依舊還是英文,或你設置的其他語言。

wordpress後台的用戶界面語言為中文-1

相關教學請查看:WordPress安裝後必須要做的10件事

安裝Hello Elementor主題

Hello elementor是架設網站可視化外掛elementor的官方免費主題,很輕很快,堪比知名的Astra,並且由於是官方親生的,兩者之間的兼容性更好。

安裝主題的教學如下:

視頻教學:

進入主題列表,點擊添加按鈕

wordpress中安裝主題

輸入主題名稱或關鍵詞,譬如hello elementor

1%E5%9C%A8wordpress%E4%B8%AD%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98 1

找到主題後,點擊安裝按鈕

wordpress中安裝主題-2

安裝完成後,點擊主題下的啟用按鈕

wordpress中安裝主題-3

啟用完成後,提示新主題已經激活,點擊訪問站點查看效果

1%E5%9C%A8wordpress%E4%B8%AD%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98 4

安裝新主題後的網站樣貌,如下圖所示(嗯,很簡單,幾乎不像一個網站的樣子)

1%E5%9C%A8wordpress%E4%B8%AD%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98 5

相關文章:如何安裝wordpress主題(3種方法)

刪除無用主題

主題安裝好以後,我們把用不上的系統自帶主題刪除

在主題頁面,點選需要刪除的主題

1%E5%9C%A8wordpress%E5%90%8E%E5%8F%B0%E5%88%A0%E9%99%A4%E4%B8%BB%E9%A2%98 1

在主題詳情面板上,點擊右下角的刪除即可。

1%E5%9C%A8wordpress%E5%90%8E%E5%8F%B0%E5%88%A0%E9%99%A4%E4%B8%BB%E9%A2%98 2

刪除無用外掛

在安裝架設網站外掛之前,先把暫時不用的外掛deactivate禁用,不需要的外掛delete刪除

對下圖中的兩個外掛,分別點擊deactivate禁用;

1%E5%9C%A8wordpress%E5%90%8E%E5%8F%B0%E5%88%A0%E9%99%A4%E6%8F%92%E4%BB%B6 1

然後對wordpress starter進行delete刪除;

1%E5%9C%A8wordpress%E5%90%8E%E5%8F%B0%E5%88%A0%E9%99%A4%E6%8F%92%E4%BB%B6 2 1

安裝外掛

外掛清單

先列一下外掛清單,請認准外掛名稱和作者,這樣就不會裝錯了,如果用了我的模板站點,外掛就都不用安裝了;自學的話,請先裝免費的,付費外掛不建議使用來路不明的破解版本,謹防惡意代碼注入(譬如黑鏈)。

外掛名稱外掛作者外掛作用外掛費用何時啟用
內容製作類
elementorElementor.com最熱門的前端拖放頁面生成器,兩個外掛都要裝。免費一直啟用
elementor proElementor.comElementor付費版付費,只需買單站點版本$49/年,前往查看購買攻略一直啟用
envato elementsEnvato良心外掛!免費版就提供了100多套elementor的網站模板,還有豐富的模塊庫。付費版有1000多套網站模板,還有海量圖片。免費,我買了付費會員,如需,可查看本商品站點完成後禁用或刪除
WooCommerceAutomattic管理產品的商城系統,但B2B不需要商城銷售功能,只需要其中產品功能即可。免費若用到它,則一直啟用;啟用外掛後,點擊跳過或Skip引導界面
Advanced Custom FieldsElliot Condon默認情況下,文章、產品只有標題、摘要、正文、封面圖等基本字段,通過它可以新增各種自定義字段,譬如視頻、產品手冊附件、qa、規格參數等。免費若用到它,則一直啟用
SEO外掛    
Rank Math SEORank Math網站SEO設置功能免費站點完成製作後需要配置SEO設置時,啟用它並保持啟用
安全類外掛    
Wordfence SecurityWordfence防火牆和惡意軟件掃描免費一直啟用
提速類外掛    
WP RocketWP Media網站加速付費,單站點$49/年站點完成製作後啟用,並保持啟用
reSmush.it Image OptimizerreSmush.it圖片壓縮免費一旦開始有需要壓縮的圖片時,則啟用;不需要壓縮圖片時,可禁用或刪除
其他輔助    
Code SnippetsCode Snippets Pro可以通過它安裝GA\禁用縮略圖\去除URL的Slug等短代碼到function.php文件中,若直接修改function.php文件,在更新後會引起還原,所以用這個管理段代碼就避免了這個問題。免費若用到它,則一直啟用
Post SMTPYehuda Hassine用於配置郵件通知和記錄郵件發送歷史免費若用到它,則一直啟用

外掛並非越多越好,選用的人多的、評價好的外掛,安裝夠用的外掛即可,過多外掛會拖累網站速度,增加網站漏洞風險。

安裝免費外掛的方法

視頻教學:

 

與安裝主題方法的類似,步驟概述:搜索-安裝-啟用:

  1. 鼠標左鍵移動到菜單“外掛”上
  2. 點擊安裝外掛
  3. 輸入外掛名稱或關鍵詞搜索外掛;
  4. 點擊目標外掛的“現在安裝”按鈕;
  5. 安裝完成後,再點擊active“啟用”按鈕;暫時用不上的外掛也可以不點“啟用”,需要用的時候,在“已安裝外掛”列表中啟用即可。
1%E5%9C%A8wordpress%E5%90%8E%E5%8F%B0%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6%E7%9A%84%E6%AD%A5%E9%AA%A4 2 1

安裝付費外掛的方法

通過上傳外掛壓縮包進行安裝,步驟概述:上傳-安裝-啟用:

  1. 鼠標左鍵移動到菜單“外掛”上
  2. 點擊安裝外掛
  3. 點擊上傳外掛
  4. 點擊選擇文件,靜待文件上傳完畢
  5. 點擊現在安裝
  6. 安裝完成後,再點擊active“啟用”按鈕;

暫時用不上的外掛也可以不點“啟用”,需要用的時候,在“已安裝外掛”列表中啟用即可。

1%E5%9C%A8wordpress%E5%90%8E%E5%8F%B0%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6%E7%9A%84%E6%AD%A5%E9%AA%A4 1

下面介紹一下部分外掛安裝時的注意事項

安裝Elementor pro

  1. 如自購,則前往https://elementor.com/購買PERSONAL版本,$49/年,30天內可退款,支持信用卡和paypal
  2. 購買完成後,登錄賬戶下載Elementor Pro外掛安裝包,然後按照上文辦法進行安裝並啟用
1%E6%BF%80%E6%B4%BBelementor pro 1
  1. 啟用Elementor pro後,按照下圖所示激活,不激活無法使用高級元素塊以及模板功能
1%E6%BF%80%E6%B4%BBelementor pro 2 1
1%E6%BF%80%E6%B4%BBelementor pro 3

Woocommerce設置

啟用woocommerce時,將打開如下界面,直接點擊not right now跳過

B2B%E5%BB%BA%E7%AB%99%E5%AE%89%E8%A3%85woocommerce 1

跳過後,回到後台界面,在上方有如下提示信息,依舊點擊skip setup跳過

B2B%E5%BB%BA%E7%AB%99%E5%AE%89%E8%A3%85woocommerce 2

如果看到下圖的提示文案,請繼續下一步

woocommerce%E6%8F%90%E7%A4%BA%E7%AB%99%E7%82%B9%E4%B8%8D%E5%AE%89%E5%85%A8 1

請在設置》常規中,將wordpress地址與站點地址中的http改為https,保存即可,保存後需要重新登錄網站後台。

woocommerce%E6%8F%90%E7%A4%BA%E7%AB%99%E7%82%B9%E4%B8%8D%E5%AE%89%E5%85%A8%E5%90%8E%E4%BF%AE%E6%94%B9%E7%AB%99%E7%82%B9url

Wordfence Security設置

啟用wordfence後會進入如下界面,按圖序號所示,依次填寫和選擇,最後點擊continue繼續下一步

wordfence%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B 1

在此界麵點擊No thanks跳過,在站點的新生階段只需要使用免費版的,若站點客流蒸蒸日上,就有必要考慮買付費版的了。

wordfence%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B 2

完成上一步後,回到wordpress後台將看到頂部的提示信息,點擊click here to configure以設置防火牆

wordfence%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B 3

然後我們將看到如下界面,點擊download .htaccess後就可以直接點擊continue了

wordfence%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B 4

接下來就看到成功提示了,點擊CLOSE即可。

wordfence%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B 5

回到後台還會看到這樣一條提示,問我們是否要保持wordfence的自動更新,這裡點擊YES即可。

wordfence%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B 6

自此wordfence的設置就結束了,它會默默保護網站,防止惡意嘗試登陸、注入等風險,有任何需要你知悉的事件都會發郵件通知你,當然這是免費版的,功力不如付費版的,也不可能防住所有風險。

Code snippets設置

相關外掛:https://loyseo.com/plugins/code-snippets/

隱藏頁面默認顯示的標題的snippets
hello elementor %E5%8E%BB%E6%8E%89%E5%85%A8%E5%B1%80%E9%BB%98%E8%AE%A4%E6%A0%87%E9%A2%98

具體步驟如下:

  1. 進入Snippets > add new
  2. 輸入標題,例如:禁用頁面默認標題
  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. 點擊save changes保存
hello elementor %E5%8E%BB%E6%8E%89%E5%85%A8%E5%B1%80%E9%BB%98%E8%AE%A4%E6%A0%87%E9%A2%98 2

製作網站

接下來我們要進入製作網站章節,請確認以下外掛都已經安裝並啟用。

wordpress%E5%BB%BA%E7%AB%99%E6%95%99%E7%A8%8B %E6%8F%92%E4%BB%B6

其中高級自定義字段外掛在下文有實例,屬於進階功能,如果看過實例後,你覺得不需要對應功能,你也可以選擇刪除這個外掛。

創建菜單

在創建菜單前,我們得有頁面,所以我們先添加一些空白頁面,頁面內容之後再完成。

添加空白頁面

視頻教學:

  1. 鼠標放置於頁面菜單
  2. 點擊新建頁面
  3. 輸入頁面標題,例如Home
  4. 無需填寫頁面內容,點擊發布按鈕,保存成功即可。
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 13

然後同理製作Products、About us、Contact us、Blog頁面,Catalogs或其他頁面。

在頁面列表中,將用不上的頁面,如sample page移至回收站進行刪除。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 12

創建WordPress菜單

視頻教學:

進入外觀》菜單界面,你將看到如下界面,我們將首頁、sample page分別刪除,先忽略順序問題,我們點擊創建菜單按鈕即可保存成功

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 11

保存成功後,我們依舊還在菜單頁面,此時將“顯示位置”設置為primary並保存菜單,那這個菜單就能默認出現在網站導航位置了。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 10

下圖就是此時網站上的導航,含網站名稱、副標題和菜單

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 9

接下來,我們說一下如何從頭創建一個新菜單,同時會介紹菜單排序方法。

如何創建Wordpress新菜單

  1. 鼠標懸停於外觀菜單
  2. 點擊菜單
  3. 輸入菜單名稱,例如menu
  4. 點擊創建菜單
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 8
  1. 在頁面標籤下,全選所有剛才添加的頁面,你也可以逐個勾選頁面,譬如Home菜單可不選,因為點擊logo可進入首頁。
  2. 點擊添加到菜單按鈕
  3. 此處再次將顯示位置設置為primary,以便接下來導入header模板後可以直接引用它
  4. 點擊保存菜單
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 7

如何調整WordPress菜單順序

如下圖所示,左鍵點選並長按某個菜單後,上下移動即可調整排序;

左右移動可以調整層級,向左移動是提升層級,向右移動是降低層級,

譬如,以後添加了產品目錄時,可以將產品目錄添加到菜單,並向上移動放置於products菜單下,長按稍微向右移動,可將產品目錄作為products的子菜單項。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 6

菜單製作完成後,我們接下來製作全站通用的頂部header,並將菜單放入其中。

如何修改菜單

視頻教學:

 

設置網站主頁、博客頁、商店頁

  1. 打開設置>閱讀頁面
  2. 將“您的主頁顯示”選中“一個靜態頁面”,並將主頁選為“Home”,這樣訪問網站與點擊logo時默認打開的就是Home頁面了,文章頁設為Blog,這樣發布的文章將直接出現在Blog頁面;將“對feed中的每篇文章,包含”選為摘要(能提升網站速度)
  3. 點擊保存更改
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 5
  1. 進入woocommerce》設置》產品
  2. 將商店頁面設置為products頁面,點擊保存,這樣能使得發布後的產品都出現在products頁面,
wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 4

使用Elementor theme builder製作頂部header

視頻教學:

Header即菜單區域,操作步驟如下

elementor header 2
  1. 鼠標放在在“模板”菜單
  2. 點擊theme builder
  3. 點擊添加新模板
  4. 選擇模板類型為header
  5. 輸入模板名稱,譬如header
  6. 點擊“創建模板”按鈕,可進入下圖所示的library頁面:
    1. 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    2. 選擇喜歡的模板,點擊insert按鈕即可導入到模板中;
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 1

導入完成後,內容、logo都可以先不管,下文將介紹Elementor編輯操作的細節,待整體框架都搭建完之後,再逐一調整

如下圖所示,若你創建了多個菜單,且需要更換菜單,可以鼠標單擊一下導航元素塊,被選中元素塊周圍有藍色線框,此時,左側面板將會切換為:當前選中的元素塊的操作面板,在面板的layout》menu中選擇你所需的菜單即可。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 33

接下來是保存header模板

  1. 點擊左下角的update按鈕
  2. 在彈出層中點擊add condition
  3. 系統自動出現一個默認條件,表示全站都使用這個header;你也可以下拉菜單看看條件的構成;你也可以根據需要創建多個header,不同條件下用不同的header。
  4. 點擊save&close即可
elementor header tutorial 32

此時訪問網站地址或點擊publish按鈕左側的previewelementor編輯器教學-31即可可看到導航。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 30

使用Elementor theme builder製作底部footer

視頻教學:

elementor footer 29
  1. 點擊模板>theme builder
  2. 點擊添加新模板
  3. 選擇模板類型為footer
  4. 輸入模板名稱,譬如footer
  5. 點擊“創建模板”按鈕,可進入下圖所示的library頁面
  6. 在下圖的library中,左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;選擇喜歡的或接近喜歡的模板,點擊insert按鈕即可導入到模板中;然後如同添加header一樣,點擊publish發布並點擊add condtion,然後save保存。
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 28

給網站添加返回頂部按鈕

  1. 用Elementor製作WordPress網站的返回頂部按鈕(3分鐘解決),這個方法比下面的方法複雜一些, 但可以少裝一個外掛。
  2. 安裝外掛:WPFront Scroll Top,然後如下圖所示enabled啟用即可,你還可以自行配置按鈕的樣式。
astra tutorial 2020 09 20 13 12 13

給網站添加側邊懸浮聯繫按鈕(付費)

這是我自製的付費模板,能夠在全站右側添加懸浮的4個聯繫按鈕(按鈕你可以自行增減),詳細介紹請查看:網站右側邊懸浮聯繫按鈕

image 3

用Elementor製作頁面

網站的頭尾都做好後,我們可以開始製作頁面了。

首先需要對ELEMENTOR進行基礎設置

ELEMENTOR的一般設置

  1. 進入Elementor > 設置> 一般頁面中
  2. 在文章類型選項中,將產品勾選中,使得產品頁面也可以使用Elementor編輯內容。
    勾選兩個禁用默認字體,這樣就不會與模板的字體產生混淆了。
  3. 點擊保存更改
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 35

接下來了解一下頁麵類別與結構

頁面結構

  1. 獨立頁面:首頁Home、公司介紹About us、聯繫我們Contact us
  2. 產品頁面:產品首頁Products、*產品列表頁Products Archive、*產品詳情頁Single Product
  3. 博客頁面:博客首頁Blog、*博客列表頁Archive、*博客詳情頁Single

未標記*的頁面:在上文創建菜單時,我們已經創建了空白頁面,稍後直接用Elementor編輯即可。

標記*的是模板頁,創建方法與上文的header、footer一樣,頁面中文名稱後方的英文,即是對應的模板類型(見下圖)。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 27

接下來開始逐一製作頁面,就如同我們上文製作header一樣,我們也是通過導入模板– 整合拼接模板– 修改模板細節的方式快速做出網站框架,記得多去看看國內網優秀同行的網站學習模仿。

製作獨立頁面,以首頁為例

2021/4/5更新視頻教學:

下面是簡單版的文字教學

進入頁面>所有頁面,找到home頁面,點擊編輯

wordpress%E6%95%99%E7%A8%8B

在編輯home界面上,點擊使用Elementor編輯按鈕

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 26

進入下圖中的頁面,頁面中已經包含了之前做好的header和footer

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 25

這兩個圖標elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 24對應的都是模板庫,前者是Elementor官方模板庫,後者是Envato elements外掛的模板庫。

最近我買了Envato Elements的付費會員,能夠使用1000多套網站模板和海量圖片資源,如有需要,可以查看這個產品

點擊elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 23我們將看到如下模板庫,瀏覽模板後,若發現有喜歡的模板,查看模板的名稱1,通過搜索模板的標題關鍵詞2,以便將所有模板都搜索出來。

也可以根據當前製作的頁麵類型來搜索,譬如輸入homepage、contact、about,找到對應的模板;

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 22

若有喜歡的一個或多個模板,可以點擊insert導入到頁面中,結合實際需求進行刪減調整;

下圖是導入後的效果

elementor編輯器教學-21-1

建議不要在同一個頁面導入過多模板,內容過多的頁面會影響操作速度;

可以通過新建備用頁面導入模板,再從頁面中復制出需要的元素塊到最終頁面中,備用頁面用完後刪除掉。

複製元素塊的方法如下

點選模塊後,其周圍會出現藍色細邊框,此時點擊鼠標右鍵,點擊copy複製,然後在需要放置該元素塊的地方,點右鍵Paste黏貼。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 20

我們還可以繼續瀏覽envato elements的模板庫獲取靈感和素材,點擊elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 19你將看到下圖,當前沒有任何模板,此時你需要回到wordpress後台首頁

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 18
  1. 進入Elements > free kits頁面
  2. 可以通過搜索名稱查找網站模板,對喜歡的網站模板可以點擊preview預覽模板
  3. 對需要的網站模板點擊install kit
  4. 點擊view kit可以查看網站模板的每個頁面模板,隨後可以導入頁面模板
  5. 所有已安裝的kits在左側elements >install kits中可查看
elementor tutorial 5 17

ps:envato elements除free kits以外的內容都是付費的,如頂部的tab標籤頁中可見到的photos、template kits > premium kits;付費方式是按月訂閱,33美元/月,按年購買是198美元/年。訂閱期間無限下載和使用,如果確實有喜歡的模板,我認為還是很划算的。

最近我買了Envato Elements的付費會員,能夠使用1000多套網站模板和海量圖片資源,如有需要,可以查看這個產品

網站模板導入完畢後,我們回到編輯首頁頁面上,繼續點擊elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 19,將看到網站模板已經導入了,繼續點擊view installed kit,我們將看到這個網站模板的所有頁面模板

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 16 1

如下圖所示,找到需要導入的頁面模板,點擊insert template就可以將模板導入到頁面中了。

elementor 5 15

頁面框架完成後,可以點擊下圖中的2預覽看效果,也可以點擊1直接發布,因為站點目前是架設期,屏蔽搜索引擎抓取,也不擔心被用戶看到;

若站點完成並面向客戶後,涉及大面積的修改時,就不建議直接點擊1發布,而是點擊2預覽效果,保存時,點擊1publish旁邊的箭頭>save draft保存為草稿,在確認頁面完成後,再點擊發布。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 14

其他操作項分別是:

  • elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 13:頁面的基本設置
  • elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 12:頁面內元素的導航,類似文章的章節導航,能快速幫你找到需要的元素,以及調整頁面內的元素排序。
  • elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 11:歷史動作和版本管理,方便回溯,操作錯了也可以恢復,但刪除元素塊後就無法恢復了。
  • elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 34:響應式模式,目前看到是PC效果,點擊可選擇到平板、手機視圖,以便調整網頁在不同設備上的效果。

看到這裡,你可能迫不及待想自己調整一下界面上的元素,那麼,你可以跳轉到Elementor編輯功能教學的章節;

用上述教學,我們可依次完成首頁、關於我們、聯繫我們的框架搭建,接下來,我們繼續把產品與博客類頁面框架的製作方法介紹一下,這樣整站的頁面結構就全部完成了,再開展細節調整所需的ELEMENTOR編輯功能教學。

製作關於我們頁面

製作聯繫我們頁面

製作下載頁面

製作頁面的麵包屑

製作產品頁面

此階段不用準備好產品材料,待整站設計完成後,再根據下文中的網站內容髮布要點上傳產品。

用woocommerce創建3個示例產品分類
  1. 進入產品》分類
  2. 添加新分類中輸入名稱,然後直接回車即可提交

按照該方法創建3個示例分類

wordpress%E4%BA%A7%E5%93%81%E4%B8%8E%E6%96%87%E7%AB%A0%E5%8F%91%E5%B8%83%E6%95%99%E7%A8%8B 6

創建完畢後將在分類頁面右側的列表中看到這些分類。

wordpress%E4%BA%A7%E5%93%81%E4%B8%8E%E6%96%87%E7%AB%A0%E5%8F%91%E5%B8%83%E6%95%99%E7%A8%8B 5

然後將這些產品目錄加入到products的子菜單中,按下圖中的序號順序操作如,可以將產品、產品類別加入到“添加菜單項”欄目中,否則默認情況下,你在菜單項欄目中是看不到它們的。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 3

然後,按照上文教過的移動菜單的辦法,將產品分類放到Products下方作為子菜單。

wordpress%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E6%95%99%E7%A8%8B 2

保存菜單後去查看一下,將看到如下效果

wordpress 20215 1
用woocommerce發布5個示例產品
  1. 進入產品》添加新的
  2. 輸入產品名稱
  3. 輸入產品描述,一段無關的圖文都可以
  4. 勾選多個分類
  5. 上傳產品圖片,可以理解為首圖、封面圖
  6. 選擇性上傳產品相冊,有就傳兩三張,沒有也沒關係
  7. 點擊發布
wordpress%E4%BA%A7%E5%93%81%E4%B8%8E%E6%96%87%E7%AB%A0%E5%8F%91%E5%B8%83%E6%95%99%E7%A8%8B 4

還可以繼續在產品頁面的下方找到產品簡短描述字段,輸入示例內容,稍後可用於製作產品詳情頁模板

wordpress%E4%BA%A7%E5%93%81%E4%B8%8E%E6%96%87%E7%AB%A0%E5%8F%91%E5%B8%83%E6%95%99%E7%A8%8B 3

接下來我們可以採用複制產品的辦法快速生成示例產品,按下圖方式複制產品

wordpress%E4%BA%A7%E5%93%81%E4%B8%8E%E6%96%87%E7%AB%A0%E5%8F%91%E5%B8%83%E6%95%99%E7%A8%8B 2

複製後的產品默認是草稿狀態,在頁面上點擊“發布”按鈕即可,這樣網站中才會顯示。

你也可以在“全部產品”頁面,點擊產品下方的快速編輯,在展開的面板中將狀態設置為已發布,點擊更新保存即可。

wordpress%E4%BA%A7%E5%93%81%E4%B8%8E%E6%96%87%E7%AB%A0%E5%8F%91%E5%B8%83%E6%95%99%E7%A8%8B 1

創建完5條產品後,我們可以訪問網站的products頁面,就能看到產品已經上架了。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 10

你也可以點擊一條產品看看目前的樣子,接下來我們就去添加產品詳情頁的模板,它能夠為你的所有產品定制一個diy的模板,你也可以為不同分類的產品定制不同的模板,這也是Elementor 超級棒的地方。

用Elementor theme builder創建Single Products模板

2021/4/12更新視頻教學

  1. 進入模板》添加新模板,選擇模板類型為single product,輸入模板名稱,譬如single product
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 9
  1. 點擊“創建模板”按鈕,可進入下圖所示的library頁面:
    • 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    • 選擇喜歡的模板,點擊insert按鈕即可導入;
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 8

導入後,系統會自動選擇一個產品數據嵌入,以便我們直觀看到效果,但依然有一些看不到內容的元素,譬如價格、加入購物車,那是因為我們上傳產品時沒有填寫對應內容,你可以挨個點擊元素,查看左上角這些元素的名稱,對無用的元素右鍵點擊刪除。

elementor single product 12
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 6

如果你想更換一個產品以預覽效果,那麼按照下圖的數字順序操作,以更換產品

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 5

最後,點擊publish,點擊add condition為include products,保存即可,然後我們就可以去預覽一下效果了。你也可以下拉products調整展示條件,譬如指定某個分類採用這個模板。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 4

現在打開一個產品頁面,是下面的樣子,細節會在後文的實例中調整。

elementor元素編輯教學12
用Elementor theme builder創建Product Archive模板

創建完產品詳情頁的模板後,我們開始做產品列表頁的模板,同理,你也可以對不同的產品分類採用不同的模板。

這裡有個操作小說明:從剛做完的singe product模板回到wordpress後台的方式如下,點擊elementor左上方的按鈕後,再點擊下方的exit to dashboard。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 11

2021/4/12更新視頻教學

創建方法與上一節基本一樣,只是模板類型選擇product archive,保存時添加默認條件,發布後訪問Products頁面,是如下效果,Elementor的產品模板比較簡約。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 10
Elementor產品列表頁示例

如果你想要在上圖的產品卡片裡展示產品簡介,那麼你需要使用Elementor的元素塊Post,並將取值來源query從默認的Post改為Product。

elementor編輯product-archive教學
Post元素塊調用產品

同時,將post的layout按如下圖所示配置,其中excerpt為產品的簡短描述,建議你在上傳產品時控制好內容的字數,不要過多。下圖中的posts per page是指每頁文章或產品數量,你可以按需設置為8或12,產品數量較多時,還要啟用pagination翻頁功能。

elementor編輯product-archive教學-2
Post元素塊設置
elementor編輯product-archive教學-3
pagination翻頁功能

相關教學:如何用Elementor製作Woocommerce產品列表

製作博客頁面

博客可用於發佈公司新聞、行業專業知識、成功案例等等,請根據你的實際情況規劃分類。持續的發布博客是有益於Google SEO繼而帶來客戶流量的,當然,博客內容需是盡可能對你的客戶群體有價值、能幫助到他們的內容,簡短無料的水文不會帶來積極作用。

創建文章分類及文章的方法與上文的產品無大差別,下文簡要說明步驟。

創建博客2個分類

如果你沒多少博客要寫,也可以先不創建分類,以後內容逐漸多了,再添加。

  1. 進入文章》分類目錄
  2. 在添加新分類目錄中輸入名稱,然後直接回車或點擊添加新分類目錄按鈕,即可提交

按照該方法創建2個示例分類,創建完成後,可以參照上文添加產品分類到菜單裡的辦法,將博客分類加入到Blog菜單下。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 9
發布4篇博客
  1. 進入文章》寫文章
  2. 輸入標題
  3. 輸入文章描述,複製黏貼一段無關的圖文都可以
  4. 勾選多個分類
  5. 上傳特色圖像,可以理解為首圖或封面圖
  6. 點擊發布
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 8

文章欄目不具備複製功能,可安裝外掛Duplicate Post實現,鑑於示例博客數量不多,你也可以重複上述步驟,創建另外3篇示例博客

用Elementor theme builder創建Single模板

創作方法與上文的產品單頁類似,這樣博客文章就有了一個定制的模板了。

  1. 進入模板》添加新模板,選擇模板類型為single post,點擊“創建模板”按鈕,進入下一步
image
  1. 進入library頁面:
    1. 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    2. 選擇喜歡的模板,點擊insert按鈕即可導入;
    3. 導入後,會自動選擇一篇文章數據嵌入,以便我們直觀看到效果
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 6

可以查看這篇教學:如何使用Elementor Pro製作文章頁面模板【視頻】

用Elementor theme builder創建Archive模板

創建完博客詳情頁的模板後,我們開始做博客列表頁的模板,方法與上基本一樣,只是模板類型選擇archive即可,此處不做贅述了。相關教學:如何使用Elementor Pro製作文章列表頁模板

創建完成後,我們再到網站訪問一下blog菜單,查看一下是否生效。

至此,我們對網站頁面的結構及搭建框架的方法有了系統的認知,你是否也找到了想要參照學習的同行網站呢?仿站是對架設網站新手而言最快的方式,而過往我們查看、導入的精美模板,查看這些元素塊的設置,是熟悉Elementor編輯功能的最快的方式。那麼接下來,我們來熟悉一下Elementor的常用編輯功能。

Elementor編輯功能教學

界面分為左側工具區域與右側內容製作區域

左側工具區

包含了所有元素、各種設置功能,點擊右上角九宮格可展示所有元素。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 36

元素分類:按Elementor的免費與付費區分,如Basic、Pro;按用途分:如woocommerce、wordpress等等。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 38

元素搜索:輸入元素的英文名可快速找到對應元素。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 37

右側內容製作區

認識結構section與column

在內容區,點擊elementor元素編輯教學-5圖標,可創建section,你可以理解為單行,單行可以劃分出多列column ,所有元素塊都必須放到section中。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 4

行與列都可以左鍵、右鍵操作,左鍵點選後,左側工具欄將出現所選行或列的設置功能,右鍵點選後,可進行所選行或列的複制、黏貼、刪除等操作,譬如可以通過複製列、方便的實現一行變多列。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 3

section可以進行雙層嵌套,即在section內再嵌入另一個section,操作方法是從左側找到inner setion元素塊拖拽到已有的setion內部。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 2
如何添加元素到內容區

鼠標左鍵點選元素,長按左鍵,移動鼠標到右側內容區域的section內部,或者直接拖拽到灰色虛線區域,它將自動創建一個section:

若鼠標處顯示禁止圖標,則此處不能插入元素;

若鼠標處顯示藍色粗橫線,則元素可插入藍色粗橫線處,可挪動鼠標到目標位置後,鬆開左鍵即可

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B
如何修改元素

左鍵點擊元素後,左側工具區將展示元素的修改面板,面板分為三欄:content、style、advanced,每欄裡的配置項因元素不同而不同,同時又有一些共通的規律,如下。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 1

content,即內容。通常用於修改元素的內容及內容的相關配置,如文案、圖片、鏈接、內容數量、內容取值來源等等,也會附加尺寸、對齊等樣式操作。

style,即樣式。通常用於修改元素的外觀,如顏色、字體樣式、圖片效果、其他內容效果等。

advanced,即進階/高級。通常用於修改元素的外部間距與內部間距、動畫效果、背景、邊框、位置、響應式、自定義CSS。

相關文章:

如何修改元素在不同設備上的效果

如下圖所示,當你修改元素時發現:某個修改項旁邊有個電腦圖標,點擊下拉後可展開平板、手機圖標,那表示:這個修改項可以在不同設備上用不同的設置;若沒有這些圖標,那說明所有設備上都用相同的設置。

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 30
避免重複工作的Global元素

在元素上右鍵點擊,將元素可保存為Global

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 29

給它命名並保存

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 28

需要使用時,點擊左側的global標籤,像添加元素一樣使用即可

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 27

修改Global元素時,其他使用這個全局元素的地方,都能被修改,節省了逐一修改的時間,常見用途:詢盤的聯繫表單。

學習元素設置的訣竅

參照模板中模塊的設置,自己模仿做一個一樣的。挨個查看元素的設置項,進行反复操作試驗,

以Single Product模板頁面為示例調整細節

我們打開之前為產品詳情頁製作的single product模板,進行逐一調整

在導入的模板中,產品圖片是放在背景中的,這會導致無法使用相冊功能,所以我們先將產品圖片從背景中刪除

  1. 左鍵選中圖片所在的列
  2. 在左側選擇style標籤
  3. 點選background欄
  4. 在image中點擊x刪除product image,這裡有個重要的細節,當你看到圖標elementor元素編輯教學-26(dynamic tags),說明當前設置可以採用動態調用的方式獲取,你可以點擊圖標,看看有哪些可供調用的內容,這個功能非常好用,譬如這裡就實現了在背景裡調用當前產品的產品圖片
elementor元素編輯教學25

接下來,我們用navigator功能來查找不容易發現的元素(比如即將刪除的spacer元素),在內容區右鍵後找到navigator,點擊後就能看到面板了,其中按頁面構成順序依次展示了行、列、元素,這裡不僅可用於查找元素,也可以操作排序功能

elementor-navigator

我們發現此列中有個spacer元素,先刪除此列中的spacer元素

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 23

然後我們在左側找到product images元素,並拖入該列

elementor元素編輯教學22

我們發現圖片周圍有大片空白,需要進行調整:

  1. 點選列
  2. 在左側點擊advanced
  3. 選中advanced欄
  4. 調整padding,padding是指列內部上下左右的內間距
  5. 將padding都改為0,你也可以選中鎖鏈圖標,它將使得4個間距值保持一致,改任一值,其他三值都一樣改變;反之,解鎖鎖鏈後,就可以單獨編輯每個間距值;額外說一下padding上方的margin值是所選元素與周圍其他元素的外間距,請試試看吧。
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 21

去掉間距後,我們進一步調整產品圖片的設置,在前文中,我麼能看到此處的產品相冊圖是緊貼的,此處按下圖所示修改(下圖是修改後的效果)

  1. 點選product image元素
  2. 將sale flash關閉
  3. 將第一個spacing設置為10px,原來是0
  4. 將第二個spacing設置為10px,原來也是0,然後就能看到如下圖說是的效果了
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 20

接下來我們看下其他設備上的效果

  1. 點選列
  2. 點選左側的advanced
  3. 點擊左側底部的設備圖標
  4. 切換到平板、手機依次查看,我們發現手機端有一些空白間距
  5. 我們進行padding的調整
  6. 將padding都改為0,然後update
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 19

調整完產品圖片後,我們調整右側的產品簡介,我在導入模板後,只保留了產品標題元素,其他的都刪除了,現在我們按下圖所示補充元素

從上到下依次是:麵包屑、產品簡述、(詢盤)按鈕、分享按鈕

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 18

我們注意到詢盤按鈕的顏色與主題不符,我們不用單獨去為按鈕設置顏色,可以採用主題樣式的辦法進行全局設置,這樣以後用button元素時,都有統一的效果,當然,若別處需要用到個性化設計的按鈕,你可以在button元素上設置,它將覆蓋默認的全局設置。

  1. 點選左側左上角的三道槓後,再點擊theme style
  2. 切換到theme style面板,點選button欄目,設置text color為白色
  3. 將background color設置為金色(或者你選的主題的顏色)
  4. 將border radius設為0 ,這將去掉按鈕四角的圓弧,當然你也可以將border radius設置為更大的值,增大四角的圓弧,變成圓角按鈕
  5. 記得要點擊update保存樣式,並點擊左側右上方的x關閉theme style回到頁面編輯模式;你還可以依次瀏覽theme style的各項設置,譬如background用來設置所有頁面的默認背景色/圖;typography用來設置全局字體、標題字體等等,請挨個探索吧~
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 17
  1. 回到single product頁面的編輯後,我們點擊enquiry圖標
  2. 在text中設置按鈕上的文案,譬如enquiry
  3. 將鏈接link設置為contact url,
    1. 選擇type為email
    2. 填寫email為mailto:你接受詢盤的郵箱
  4. 將alignment設置為居中對齊,你可以挨個試一下4個對齊方式的效果
  5. 選擇一個icon,或者不選也可以,以上設置完成後,就將看到下圖所示的按鈕效果
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 16

詢盤按鈕除了上文的做法,還有另一種辦法,稍微複雜一些

  1. 開通企業郵箱,相關教學:如何在5分鐘內創建免費的企業郵箱
  2. 配置發件郵箱賬號,在wordpress後台安裝SMTP外掛並設置發件功能:Post SMTP – 發送郵件+郵件記錄
  3. 在Elementor>submissions頁面中查看詢盤記錄
  4. 用elementor添加新模板,模板類型為popup(彈出窗),我們將在popup裡放聯繫表單
  5. 在popup模板庫裡不要選擇模板導入,直接點擊右上角關閉
  6. 將heading和form元素加入到頁面,如下圖所示
wordpress-elementor-詢盤表單配置-1

6.設置需要用戶必須填寫的字段,並顯示*標記;你也可以在左側新增字段,默認情況下是name、email、message三個字段,建議字段不要過多,降低用戶填寫難度

wordpress-elementor-詢盤表單配置-7

7.將調整完畢的form元素右鍵存儲為Global元素,以便於在其他地方重複使用

wordpress-elementor-詢盤表單配置-5

8.發布表單,並將條件設為全站,保存即可,不需要設置其他(triggers或advanced rules)

wordpress-elementor-詢盤表單配置-6

9.回到產品模板頁面,點擊詢盤按鈕(下圖中我換了一個示例網站,但操作都是一樣的),在左側按鈕設置中,點擊link 右側的dynamic 按鈕,在下拉選項中選擇popup,然後繼續點擊popup,在setting中搜索並選中剛才添加的popup

wordpress-elementor-詢盤表單配置-4
設置按鈕的link值為popup
wordpress-elementor-詢盤表單配置-3
搜索已添加的popup名稱,並選擇

10.此時,點擊詢盤按鈕,將可見到詢盤彈出窗口

wordpress-elementor-詢盤表單配置-2

11.我們在任一產品頁面提交詢盤進行測試,查看是否能收到詢盤郵件通知以及後台是否記錄,詢盤郵件將發送到你的wordpress賬戶郵箱裡,如需添加收件郵箱,請在詢盤表單中進行配置,多個郵箱之間用英文逗號間隔即可。同時,在此處也能設置通知郵件的標題、正文。

wordpress-elementor-詢盤表單配置-8

在發完測試詢盤後,我們查看郵箱是否收到郵件(注意檢查垃圾郵箱),同時在後台Elementor > submissions中查看詢盤記錄,如下圖所示,大功告成。

elementor pro submission
(這是Elementor pro 3.2版本的功能)

製作詢盤表單的其他推薦教學:如何給產品頁面添加詢盤表單標籤頁

接下來調整產品介紹的內容區域,主要是調整字體部分,從模板中導入的元素,通常都有自定義的設置,無法直接調用我們在theme style中的默認設置,這會導致全站的字體混雜,不僅影響觀感,加載過多的字體更影響網站的速度

  1. 點選product data tabs元素
  2. 將panel的typography點選刷新按鈕恢復themestyle中的默認設置
  3. 將heading的typography點選刷新按鈕恢復themestyle中的默認設置
elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 15

恢復默認字體後的效果如下圖所示,當然也沒必要所有地方都統一用默認字體,適當的自定義字體能增加美觀

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 14

接下來刪除下面的upsell 及其所在的section,因為咱們的B2B站點也用不上這個功能

elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 13

最後,如果你希望客戶能夠提交產品評價,或者自己錄入一些過往客戶對你的產品評價,以助於更好的宣傳你的產品,你可以增加product rating元素塊。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B
elementor product 3

如果你不想產品頁面保留評價,那麼你需要按下圖所示,以關閉評價功能

woocommerce%E5%8E%BB%E6%8E%89%E4%BA%A7%E5%93%81%E8%AF%84%E4%BB%B7%E6%95%99%E7%A8%8B

接下來,你可以切換到平板、手機效果下看看網頁是否正常,並酌情調整。至此我們就得到了一個滿足基本需求的產品詳情頁了,如果想要更多的高級功能,那就進入下個環節,運用advanced custom filed高級自定義字段外掛,為產品自定義字段,譬如:Q&A

  1. 進入字段》 新建
  2. 添加字段組名稱,如產品
  3. 設置位置為:內容類型等於產品,這樣能實現所有產品頁面都會新增這個字段
  4. 點擊添加字段
1%E5%9C%A8acf%E4%B8%AD%E4%B8%BA%E4%BA%A7%E5%93%81%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E6%AE%B5

依次輸入字段標籤,字段名稱系統會根據字段標籤自動生成,建議都用英文,選擇字段類型為可視化編輯器,然後保存即可

1%E5%9C%A8acf%E4%B8%AD%E6%96%B0%E5%A2%9E%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5qa

保存後我們進入產品列表,編輯任一產品,發現在頁面下方新增了上述字段,你也可以參照上述辦法再增加一下你需要的其他字段,譬如brochure、why choose us等等,然後在所選產品頁面填充好QA的示例內容。

elementor與acf自定義產品字段教學-6-1

回到single product模板的編輯頁面,你可以通過訪問任一產品頁面,在頁面頂部點擊edit with elementor,並在展開的下拉麵板中選中當前模板進入編輯。

elementor rukou

在頁面的末尾加上一個heading元素,設置title為QA,默認html tag為h2,師不用修改的,一個頁面可以有多個h2,但只能由1個h1,h1一般用作標題,h1-h6可以理解為章節標題的層級遞進,類似總分關係,數字越小層級越高

elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 5

然後在heading下方再加入一個text editor元素,點擊dynamic tag,選中acf field(acf 是advanced custom filed外掛的首字母)

elementor與acf自定義產品字段教學-4

選中acf field後,在key中選擇剛才添加的字段QA

elementor與acf自定義產品字段教學-3

若你剛才添加了qa的產品並非當前預覽的產品,則你需要點擊左下角的齒輪setting一下預覽的產品,點擊apply&preview按鈕後即可看到qa已經添加成功了。

elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 2

好了,關於這個elementor編輯的詳細示例就講解到這裡,其他頁面請自行多多探索,如有疑問可以聯繫我,收集到大家的常見問題後,我會繼續補充到本文中。

網站內容髮布的要點

圖片素材

圖片命名

需按照圖片本意進行英文命名,不要用中文或亂碼命名,這樣不利於搜索引擎理解圖片的內容,譬如:產品若有多張圖片,可以採用同義詞進行命名

圖片格式

一般是png、jpg,不同用途的圖片尺寸和大小又有區別:

  1. Logo:寬度不超過300px,大小建議在50K以內
  2. 站點圖標:顯示在瀏覽器頁卡中的正方形圖標,尺寸用至少512* 512,大小控制在幾K。 PS:如果在手機上用J將網頁保存到桌面的功能時,也會用到此圖標。
  3. Banner/slider:廣告圖或裝飾用的背景圖片,寬度一般建議在1200px,若banner希望做成全寬的,那麼圖片用2560px寬度也是可以的,但要盡量不讓圖片太大,盡量控制在200K以下,以不影響清晰度為前提,越小越好。
  4. 產品圖片:寬度建議在600-1200px,大小建議控制在150K以下,盡量保證圖片的方向和尺寸的統一性,避免部分圖片是橫圖,部分又是豎圖。
  5. 其他圖片,如證書、團隊成員等:寬度建議在1200px以內,大小建議控制在150K以下。
如果要一鍵去除圖片背景,可以用這個網站:https://www.remove.bg/
圖片大小

上文中已經介紹過圖片大小建議,一般我們用手機或相機拍的照片,圖片都是幾M以上,這會嚴重拖累網站速度,進而流失用戶。那麼如果圖片過大,該怎麼處理呢?

第一步:線下壓縮圖片

圖片數量多時,用photoshop的自動批處理功能

  1. 打開photshop,打開一張圖片
  2. 在菜單欄中,點擊“窗口”,勾選“動作”,點擊新建按鈕,命名動作名稱,確定後自動開始錄製
photoshop%E8%87%AA%E5%8A%A8%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%95%99%E7%A8%8B 1
  1. 將圖像大小改為目標尺寸,如1000px或1200px
photoshop%E8%87%AA%E5%8A%A8%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%95%99%E7%A8%8B 6
  1. 將圖片存儲為web格式,調整質量為90 jpg格式,存儲到非原圖的新文件夾內。 (PS:如果你的圖片需要保留透明效果,就要保持為png格式,通常png格式比jpg格式的圖片要大)
photoshop zidong yasuo 5
  1. 關閉圖片,並點擊不保存原圖修改,
photoshop%E8%87%AA%E5%8A%A8%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%95%99%E7%A8%8B 4
  1. 至此,動作錄製完成,點擊動作錄製的結束按鈕
photoshop%E8%87%AA%E5%8A%A8%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%95%99%E7%A8%8B 3
  1. 接下來進行圖片的批量處理,
    • 點擊文件》自動》批處理
    • 選擇動作,默認已經選好剛才錄製的動作
    • 選擇源件夾:選擇需要處理的圖片所存放的文件夾
    • 目標文件夾:選擇需要存儲處理後圖片的文件夾
    • 點擊確定,photoshop開始快速處理圖片,處理完成後你去文件夾裡驗收即可
photoshop%E8%87%AA%E5%8A%A8%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%95%99%E7%A8%8B 2

圖片數量少時,用免費軟件paint.net單個處理,採用下面的步驟會覆蓋原圖,如需保留原圖,則請先複製一份原圖

  1. 用paint.net打開圖片
  2. 點擊ctrl+r修改圖像尺寸後,回車鍵確認
  3. 點擊ctrl+s保存圖片,設置質量為90,回車鍵確認

第二步:線上壓縮圖片

針對原圖很大的圖片,僅僅線下壓縮是不夠的,我們還可以繼續在wordpress裡進行二次壓縮,你也可以用shortpixel.com網站的glossy模式壓縮後,再上傳到wordpress進行三次壓縮(注意別壓的模糊了,若是模糊了,就別壓那麼多次)

順便一說:shortpixel是一款付費外掛,但提供每個月少量的免費壓縮額度,你也可以嘗試安裝這款外掛試用一番,shortpixel和下文即將介紹的外掛我都在用,shortpixel比本文推薦的reSmush.it image optimizer更好,在本站這麼多圖的壓縮中,我先用的reSmush.it image optimizer(它免費),發現不夠理想,就轉為用shortpixel付費版本了,價格也不貴,$9.9可處理10000張圖,且無時間限制。

如果你的圖片在1M以內,也可以考慮直接採用線上壓縮圖片,而跳過第一步的線下壓縮,但要試驗,確認一下線上壓縮後的圖片大小,是符合上文建議的,或者能在100K左右。

確保安裝並啟用了外掛reSmush.it image optimizer,按下圖所示配置:

wordpress%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%8F%92%E4%BB%B6resmush%E6%95%99%E7%A8%8B

此後每次上傳圖片都會自動處理,若需要優化安裝外掛之前的圖片,請在上圖中點擊optimize all pictures,或者在媒體庫中按需手動優化。

elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 1

視頻素材

諸如公司介紹視頻、產品介紹視頻、客戶評價視屏、項目實施視頻等等,請不要直接上傳到網站的媒體庫裡,當面向國外用戶時,請上傳到Youtube,獲取視頻地址並放入到網站中需要展示的地方。

如果你同時要做中文站,我的建議是另架設網站,把服務器放到國內,速度會更快,依舊可以用wordpress架設網站,只是國內架設網站需要備案。

文案素材

產品分類介紹、產品介紹、產品手冊、產品項目信息、產品評價信息…

公司介紹文案、公司歷史、公司資質、公司生產水平、公司貿易水平…

以上圖文介紹信息可參照阿里巴巴國際站的同行店鋪,在店鋪中找到公司介紹頁,它的信息結構已經被梳理的非常完善,當然你也可以參照優秀同行做準備,同時,更重要的是想目標客戶之所需,內容要飽滿,因為內容稀薄的頁面不大會獲得搜索引擎中的高排名,同時,也會降低用戶的詢盤意向。

頁面關鍵詞

每個頁面可以理解為一篇作文,主旨就是核心關鍵詞,就是你想要向用戶傳遞的關鍵信息。

譬如,我們寫一篇有關媽媽的作文,這個出題的意圖就不精確,作文標題會有不同的取法:

  • 媽媽
  • 媽媽的手
  • 媽媽做過的飯
  • 我的愛做飯的媽媽
  • 工作中的媽媽

那拿著媽媽這個詞去谷歌裡搜索,也會呈現很多類型不一致的結果,那麼這個詞作為頁面核心關鍵詞是不合適的,因為意圖不明確,我們要找到搜索意圖明確的關鍵詞。

1%E5%85%B3%E9%94%AE%E8%AF%8D%E7%A0%94%E7%A9%B6%E4%B9%8B%E8%B0%B7%E6%AD%8C%E6%90%9C%E7%B4%A2 3

接下來以bottle coding machine為示例,在谷歌中搜索後,查看視頻、圖片、文字的搜索結果是否與產品趨於一致,如果大部分都一致,譬如還能看到阿里巴巴等B2B平台的搜索結果、同行的產品,那麼詞意是準確的。

google serp
1%E5%85%B3%E9%94%AE%E8%AF%8D%E7%A0%94%E7%A9%B6%E4%B9%8B%E8%B0%B7%E6%AD%8C%E6%90%9C%E7%B4%A2 1

有些人做的產品是2C的,譬如衣服的批發,那這種時候直接搜索衣服,會看到大部分是amazon等在線銷售的網站,這種時候,定關鍵詞時就要帶上準確的意圖詞,譬如衣服批發商、衣服製造商等等。

通常一個產品可能會有多個同義名稱,每個名稱的用戶搜索量是不一樣的,這種時候,我們通常藉助於工具來查詢每個詞的搜索量和排名難度,找尋搜索量大一些,排名難度低一些、搜索意圖準確的的詞。

我用的工具是KwfinderAhrefsSemrush,kwfinder評估的難度值和搜索量更接近同行的均值,但ahrefs和semrush提供了更多的關鍵詞建議,這三款都提供免費的試用,敬請體驗。

我基於目前在用的kwfinder,示意一下操作過程

註冊並登錄Kwfinder,在如下頁面輸入關鍵詞,點擊find keywords

kwfinder%E5%85%B3%E9%94%AE%E8%AF%8D%E7%A0%94%E7%A9%B6%E6%95%99%E7%A8%8B 2

你將看到如下搜索結果,左邊展示了相關關鍵詞(可用於找同義詞數據)、搜索量趨勢(平穩上升或穩定的趨勢好,走下坡路的就盡量避免)、搜索量(大的好)、付費搜索單價(價格越貴購買意圖越強)、付費搜索競爭度(數值越大付費競爭越激烈)、關鍵詞自然排名的難度值(難度越低越好,越有希望排名靠前)。右邊是搜索量趨勢數據與搜索結果。

kwfinder2021 1 1

你還可以繼續用谷歌提供的Google keywords planner(GKP)來查看搜索量、競爭度,它是為Google Ads服務的(谷歌付費搜索),但依舊能為我們提供很大的參考,畢竟它的數據是一手的。再使用GKP之前,我們要開通Google Ads賬戶,請自行處理。在進入GKP後,將看到如下界面

1%E8%B0%B7%E6%AD%8C%E5%85%B3%E9%94%AE%E8%AF%8D%E8%A7%84%E5%88%92%E5%B8%88%E6%95%99%E7%A8%8B 5

輸入你的產品名稱,設置好語言和區域(區域可以設定無,地區保留為空,即全球)

1%E8%B0%B7%E6%AD%8C%E5%85%B3%E9%94%AE%E8%AF%8D%E8%A7%84%E5%88%92%E5%B8%88%E6%95%99%E7%A8%8B 4

然後你將得到關鍵詞建議、搜索量區間與競爭度(針對付費競爭)

-3-1

此時,若勾選關鍵詞加入方案中,你將得到更詳細的數據

1%E8%B0%B7%E6%AD%8C%E5%85%B3%E9%94%AE%E8%AF%8D%E8%A7%84%E5%88%92%E5%B8%88%E6%95%99%E7%A8%8B 2
google keywords planner

此外,在谷歌搜索時,輸入框下方也會給你用戶搜索的相關關鍵詞提示

google serp

你可以使用這個關鍵詞工具快速獲取和導出谷歌搜索的相關關鍵詞。

好的,說到這裡,你已經知道頁面關鍵詞該怎麼定了,關鍵詞要放入頁面標題(title)、頁面的描述(meta description)、頁面的H1標籤、頁面的正文中進行自然而然的佈局,語句要通順,語境要自然,別為了加關鍵詞而堆砌,這樣會遭到算法的懲罰。

1%E7%BD%91%E7%AB%99%E5%9F%BA%E7%A1%80seo%E6%95%99%E7%A8%8B 2

在這裡提前說一下隸屬於SEO模塊的內容,關於頁面的url、title、meta description在哪裡設置,待你安裝好rank math seo外掛後,使用“編輯”功能進入產品、文章、頁面等,在頁面下方,能看到設置欄目;若頁面使用了elementor編輯,在elementor界面左側也能看到rank math設置欄目

1%E7%BD%91%E7%AB%99%E5%9F%BA%E7%A1%80seo%E6%95%99%E7%A8%8B
elementor%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5SEO

站內基礎SEO

當你的站點內容都已經填充完成,三端(電腦、平板、手機)都進行了周密的檢查,我們開始站內基礎SEO教學。

首先,改網站名字,之前一直沒改,你也可以提前改,在上線前任何時間改動都可以。請進入wordpress後台的設置》常規頁面,把站點名稱改為你的品牌名稱或公司簡稱,不要太長;副標題可以直接去掉。

wordpress%E8%AE%BE%E7%BD%AE%E7%AB%99%E7%82%B9%E5%90%8D%E7%A7%B0

視頻教學:

設置logo:

視頻教學:

進入外觀》自定義》站點身份,上傳圖標(即logo)和站點圖標(上文說到的512*512px),最後記得點擊右上角發布

wordpress%E8%AE%BE%E7%BD%AE%E7%AB%99%E7%82%B9%E5%9B%BE%E6%A0%87%E4%B8%8Elogo

接下來按照下述教學,逐一操作

  1. 給網站安裝google analytics跟踪代碼
  2. 給網站開通google search console
  3. 將google analytics關聯google search console
  4. Rank math SEO設置教學

站點速度優化

我們需要用工具gtmetrix測試站點的速度,並進行速度優化,盡量優化到加載時間在3S以內,優化教學請按如下子教學逐一實施

  1. 優化圖片,在上文中已經介紹了圖片的優化辦法,此教學中做了一些補充擴展
  2. 使用WP Rocket加速網站

開放收錄,站點上線

完成上述內容後,站點可上線,開放收錄吧、

進入設置》閱讀,將建議搜索引擎不索引本站點去掉勾選,保存更改

wordpress%E5%BC%80%E6%94%BE%E6%94%B6%E5%BD%95

還可以進入google search console提交站點地圖以助於加快收錄

google-search-console中提交站點地圖

站點地圖地址可在Rank Math SEO中獲取

image 89

點贊
0 / 5 5

Your page rank:

28 回复

      1. 说实话,你的这篇文章真的让我感觉受益匪浅,数字标明1、2、3、4点击步骤太清晰了。前几天用了Wordpress,照着B站的视频来做总是感觉视频还欠缺了点,然后把阿里云服务器退款了,觉得自己搞不定,但是看了你这个视频,让我觉得照着你教的方法,慢慢来肯定能做好。
        同时还希望能发一份付费的插件,非常感谢。

        1. 已发邮件联系你~
          PS:大家联系我的话,还是加微信哈~٩(๑❛ᴗ❛๑)۶

  1. 今年七月第一次接触Elementor建站 比Betheme主题的Muffin好用太多了

    1. 同感,以前我用的WPB,也用过avada的编辑器,最后发现EL确实是很棒的。

  2. 谢谢分享,请问可以麻烦发一下开箱即用的模板吗?还有其他能用的插件,谢谢你

  3. 太赞的文章了!! 作者牛逼!!!!保存收藏好。 想分享不知道分享到哪里去。 这篇文章真是的花费很多很多功夫的。

    同时还希望能发一份付费的插件,非常感谢。

    1. O(∩_∩)O谢谢~可以分享朋友圈滴~我们已经微信联系了哈

  4. 真的感谢分享,这个网站很好得帮助了我!从一个网络小白到现在已经知道怎么去建设网页啦,现在打算去学习模仿别的的模版,再进行下一步SEO优化。

  5. 你好,多谢你的教程,请问还可以发一下开箱即用的模板吗?

  6. 为什么我在namesilo 域名解析进去和你教程的不一样 最后一个图标 能告诉下怎么解决吗 谢谢

  7. 为什么我登录我的账号会出先错误
    致命错误: 无法重新声明ele_disable_page_title () (以前在 /家庭/客户/ www/tfgemstone .com/public_html/wp 内容/插件/代码片段/php/片段操作.php (469) 代码:1) 在/ 家庭 / 客户 / www/tfgemstone.com/public_html/wp 内容/插件/代码片段 /php/片段操作.php (469) : eval () 在行1
    此网站上存在严重错误。

    了解有关故障排除WordPress的更多信息。
    能解决吗

    1. 去把code snippet插件禁用了,去主机的文件管理功能里,在wp-content 》 plugins 文件夹里,找到code snippet,重命名文件夹,譬如价格 -2,这个插件就禁用了。
      你这个可能是代码段加的有问题。

  8. 请教下最近做的页头部分 的邮箱和社交图标的排版和预览的时候不一样 不知道那里出错了

    1. 这种问题没法回答。。没有过程视频,我也不知道你的问题在哪里。

評論被關閉。

超快獨享主機
Cloudways
免費試用3天,無需充值
費用月結| 不用一次性付整年
*註冊優惠碼Promo code:LOYSEO
*用Gmail郵箱,註冊易通過