專注於架設企業網站,分享WordPress教學和Elementor教學

WordPress建站實例教程(2):零基礎用Elementor外掛程式做企業外貿網站

更新日期:2024-01-13
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我
來開通 SEO 工具20+

你是否剛開始嘗試建站,預算又有些吃緊,而尋找建站服務商的過程讓你怕被忽悠,對於自學建站又感到迷茫呢? 在本文,我會用自己十餘年建站領域的經驗説明你,我將使用完全免費的WordPress建站系統,並結合Elementor外掛程式,教你一步步地構建你自己的B2B外貿公司詢盤型網站。

本教程超過24000字,它是我花費一個月寫的WordPress建站實例教程,上線三年有餘,得到了眾多讀者的實踐反饋。 只要你願意投入時間,一點一滴地學習和探索,按照我提供的步驟進行,你一定能建立出一款適合初學者的外貿企業網站。 我相信你,你也請相信自己。

這篇建站教程相對比較進階,如需容易一點的,請查看這篇:WordPress建站實例教程(1):零基礎用Astra主題做外貿企業獨立站

如果你缺少自學建站的時間,也可查看我提供的外貿建站服務

WordPress建站要花多少錢

  • 域名費用:75元左右/年
  • 主機費用:900-1200左右/年,獨享帶託管的VPS主機,非虛擬主機
  • 主題費用:0元(Hello Elementor主題)
  • 外掛程式費用:Elementor Pro 官方價格49美元/網站/年(≈340/年), 瞭解省錢購買攻略
  • 教程費用:0。
是的,本站的教程都免費,且圖文+視頻兼備。 為了互惠互助,如果你沒有主機的話,希望你能點擊本站的主機連結(Cloudways)、使用本站的優惠券代碼(loyseo)註冊帳號,可免費試用3天,不用先充值,前3個月優惠30%。  
我推薦的這款主機是近兩年自己用過7、8款主機后,對比留下的性價比最好的,它得到了我的建站客戶的一致認可。
最後,感謝你的互惠互助,因為通過主機給我的傭金,我才能維持網站的運營和不斷寫作。

註冊功能變數名稱

建議在Cloudflare註冊功能變數名稱,不僅價格優惠,還方便後續解析功能變數名稱、配置給網站加速的CDN,還能提供安全防護。

功能變數名稱取名要點

  • 用.COM功能變數名稱
  • 功能變數名稱長度要盡量短一點
  • 最好不要有數位、連字元-
  • 選擇容易被記住的名字

基於以上條件,再看下面的幾條:

  • 首選:用品牌名,知名樣例:alibaba.com, amazon.com
  • 次選:用品牌名+主營產品關鍵詞,又叫半匹配功能變數名稱(PMD),例如我的網站:loyseo.com
  • 非常不建議直接用產品關鍵詞做功能變數名稱,又叫EMD(精準匹配功能變數名稱),牢記咱們是品牌企業網站,更多原因分析請看: 關於EMD和PMD的分析文章

如需查詢功能變數名稱是否可用、瞭解更多關於註冊功能變數名稱的知識,請點擊此處

下方我錄了一個從功能變數名稱取名、在cloudflare註冊功能變數名稱並解析、綁定到網站的教程,其中網站是放在Cloudways主機的,下文會教如何開通Cloudways主機。

YouTube video

如果你想在Namesilo購買功能變數名稱,可以看下方的視頻教程。

功能變數名稱買好后,就可以來購買主機了。

購買主機

推薦和我一起用Cloudways主機建站,我在主機坑裡摸爬了三年留下的它,他不僅速度快、對新手來說非常易用,我有不少讀者甚至從Siteground或是Hostinger等共用主機搬家到Cloudways,Cloudways也十分易於後期擴展,還提供了Astra主題付費基礎版一年不限網站

同時,通過本站的鏈接購買主機后,我能獲得一些傭金(但不影響你的購機價格),同時,我也為你準備了多種選擇的 福利 。 通過這些傭金來支援我獨立經營網站,畢竟木有收入,無以為繼呀。 如果你忘記用我的連結註冊,或遇到了身份認證,也可以聯繫我,告知註冊郵箱,驗證后,官方也會把你計入我的銷售中。

別漏了:註冊填表時,點擊promo code文案,輸入loyseo可享有頭3個月7折優惠,上面連結里我已經為你自動帶了優惠碼。 如果忘記填了,可以聯繫在線客服添加。

我製作了:Cloudways文章教程、視頻教程合集(放在B站,請看下方視頻)、分章節的短視頻教程,請按需選擇。

請查看上方的教程,完成如下事項,你也可以點擊下方連結,前往對應教程:

  1. 註冊Cloudways主機
  2. 在Cloudways中創建伺服器和wordpress網站(這裡提供了主機機型以及價格的建議)
  3. 在Cloudways中升級為付費帳戶
  4. 綁定功能變數名稱
  5. 安裝SSL證書
  6. 登錄網站後台

基礎操作

首要登錄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

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

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

wordpress中安裝主題-2

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

wordpress中安裝主題-3

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

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

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

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

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

刪除無用主題

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

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

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

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

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

刪除無用外掛程式

在安裝建站外掛程式之前,先把暫時不用的外掛程式deactivate禁用,不需要的外掛程式delete刪除

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

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

然後對wordpress starter進行delete刪除;

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

安裝外掛程式

外掛程式清單

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

外掛程式名稱外掛程式作用外掛程式費用何時啟用
頁面設計製作
elementor最熱門的前端拖放頁面生成器,兩個外掛程式都要裝。免費一直啟用
elementor pro官方價格:單網站版本$59/年,本站正版分銷:90元/2年/1個網站,可聯繫我購買付費一直啟用
envato elements良心外掛程式! 免費版就提供了100多套elementor的網站範本,還有豐富的模組庫。 付費版提供更多網站範本以及付費的圖片庫,官方價格16.5美元/月,本站正版分銷:159元/1個網站/1年+(跟隨我使用),可聯繫我購買免費 付費網站完成後可禁用或刪除
IKS MenuElementor Pro提供的側邊分類篩選功能挺醜的,所以我一般都用這款外掛程式,免費版功能不錯,通常夠用,不夠用可以問我購買付費版:99元/不限網站/終生有效免費若用到它,則一直啟用
WooCommerce管理產品的電商系統,適合做跨境電商獨立站,但如果你是B2B的企業網站,不需要銷售功能,那只需要其中產品功能即可。 不過,因woocommerce功能龐大,確實會降低網站後台速度,也會增加頁面體積,稍許降低頁面速度,如果你不做在線銷售的網站,可以查看這個方案管理產品免費一直啟用
Advanced Custom Fields默認情況下,文章、產品只有標題、摘要、正文、封面圖等基本字段,通過它可以新增各種自定義欄位,譬如視頻、產品手冊附件、qa、規格參數等。免費若用到它,則一直啟用
SEO外掛程式
Rank Math SEO網站SEO設置功能,譬如tdk、sitemap、robots、關聯Google Search Console等等N多的功能。 對SEO有追求的,可以和我一起用付費版,本站正版分銷:90元/2年/1個網站,可聯繫我購買免費網站完成製作後需要配置SEO設置時,一直啟用
安全外掛程式
Wordfence Security防火牆和惡意軟體掃描,安全防護類的外掛程式,通常裝這一個就夠了,不要重複安裝,譬如:Jetpack。免費一直啟用
提速外掛程式
WP Rocket緩存外掛程式,給網站加速,官方價格:單網站版本$59/年,本站正版分銷:159元/1個網站/2年以上,可聯繫我購買付費網站完成製作後啟用,並保持啟用
Perfmatters是WP Rocket的搭檔,雖然存在部分功能重疊了,但其核心功能是可以按需精簡頁面里的css、js檔,消除一些不必要的HTTP請求,官方價格:24.95美元/1個網站/1年,本站正版分銷:99元/1個網站/2年以上付費若用到它,則一直啟用
Shortpixel壓縮圖片,可以批量壓縮、自動壓縮,還能將圖片轉成webp; 每月可免費壓縮100張圖片(注意,這裡的100張不是指你上傳的原圖,因為wordpress會為你上傳的每一張圖片生成多張縮略圖,每張縮略圖都視為需要壓縮的一張圖片,故此,100張免費壓縮指標可能只能壓縮20張左右的原圖)。 Shortpixel是我一直在用的,它的計費方式靈活,可以包月包年,也可以按量購買。 前往瞭解免費 付費一旦開始有需要壓縮的圖片時,則啟用; 不需要壓縮圖片時,可禁用或刪除
其他
Code Snippets可以通過它各種代碼片段,譬如安裝GA\禁用縮略圖等短代碼到function.php檔中,若直接修改function.php檔,在更新後會引起還原,所以用這個管理段代碼就避免了這個問題。免費若用到它,則一直啟用
Post SMTP用於配置郵件通知和記錄郵件發送歷史; 有些主機提供了為網站發送郵件通知的功能,但是你無法看到發送記錄,所以我偏好用這個外掛程式。免費若用到它,則一直啟用
WPML性價比最高的WordPress網站多語言外掛程式,官方價格:99歐元/3個網站/1年,本站正版分銷:90元/1個網站/2年。付費若用到它,則一直啟用

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

安裝免費外掛程式的方法

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

  1. 鼠標左鍵移動到菜單“插件”上
  2. 點擊安裝插件
  3. 輸入外掛程式名稱或關鍵詞搜索外掛程式;
  4. 點擊目標外掛程式的「現在安裝」按鈕;
  5. 安裝完成後,再點擊active「啟用」按鈕; 暫時用不上的外掛程式也可以不點啟用啟用“,需要用的時候,在”已安裝外掛程式“清單中啟用即可。
企業網站:用Elementor建站到上線的詳細步驟

安裝付費外掛程式的方法

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

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

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

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

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

安裝Elementor pro

  1. 如自購,則前往https://elementor.com/購買PERSONAL版本,$49/年,30天內可退款,支持信用卡和paypal
  2. 購買完成後,登錄帳戶下載Elementor Pro外掛程式安裝包,然後按照上文辦法進行安裝並啟用
企業網站:用Elementor建站到上線的詳細步驟
  1. 啟用Elementor pro后,按照下圖所示啟動,不激活無法使用高級元素塊以及範本功能
企業網站:用Elementor建站到上線的詳細步驟
企業網站:用Elementor建站到上線的詳細步驟

Woocommerce設置

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

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

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

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

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

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

請在設置》常規中,將wordpress位址與網站位址中的HTTP改為HTTPs,保存即可,保存后需要重新登錄網站後臺。

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

Wordfence Security設置

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

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

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

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

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

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

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

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

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

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

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

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

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

Code snippets設置

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

隱藏頁面預設顯示的標題的snippets
企業網站:用Elementor建站到上線的詳細步驟

具體步驟如下:

  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保存
企業網站:用Elementor建站到上線的詳細步驟

製作網站

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

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

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

創建功能表

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

添加空白頁面

  1. 滑鼠放置於頁面功能表
  2. 點擊新建頁面
  3. 輸入頁面標題,例如Home
  4. 無需填寫頁面內容,點擊發佈按鈕,保存成功即可。
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

創建WordPress功能表

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

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

保存成功后,我們依舊還在功能表頁面,此時將「顯示位置」設置為primary並保存功能表,那這個功能表就能預設出現在網站導航位置了。

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

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

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

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

如何創建Wordpress新功能表

  1. 滑鼠懸停於外觀功能表
  2. 點擊菜單
  3. 輸入菜單名稱,例如menu
  4. 點擊創建菜單
企業網站:用Elementor建站到上線的詳細步驟
  1. 在頁面標籤下,全選所有剛才添加的頁面,你也可以逐個勾選頁面,譬如Home功能表可不選,因為點擊logo可進入首頁。
  2. 點擊添加到菜單按鈕
  3. 此處再次將顯示位置設置為primary,以便接下來導入header範本后可以直接引用它
  4. 點擊保存菜單
企業網站:用Elementor建站到上線的詳細步驟

如何調整WordPress功能表順序

如下圖所示,左鍵點選並長按某個功能表后,上下移動即可調整排序;

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

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

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

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

如何修改功能表

視訊教程:

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

  1. 打開 設置>閱讀頁面
  2. 將「您的主頁顯示」選中「一個靜態頁面」,並將主頁選為「Home」,這樣訪問網站與點擊logo時默認打開的就是Home頁面了,文章頁設為Blog,這樣發佈的文章將直接出現在Blog頁面; 將「對feed中的每篇文章,包含」選為摘要(能提升網站速度)
  3. 點擊保存更改
企業網站:用Elementor建站到上線的詳細步驟
  1. 進入woocommerce》設置》產品
  2. 將商店頁面設置為products頁面,點擊保存,這樣能使得發佈后的產品都出現在products頁面,
企業網站:用Elementor建站到上線的詳細步驟

使用Elementor theme builder製作頂部header

視訊教程:

Header即功能表區域,操作步驟如下

企業網站:用Elementor建站到上線的詳細步驟
  1. 滑鼠放在在「範本」功能表
  2. 點擊theme builder
  3. 點擊添加新範本
  4. 選擇範本類型為header
  5. 輸入範本名稱,譬如header
  6. 點擊「創建範本」按鈕,可進入下圖所示的library頁面:
    1. 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    2. 選擇喜歡的範本,點擊insert按鈕即可導入到範本中;
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

接下來是保存header範本

  1. 點擊左下角的update按鈕
  2. 在彈出層中點擊add condition
  3. 系統自動出現一個默認條件,表示全站都使用這個header; 你也可以下拉功能表看看條件的構成; 你也可以根據需要創建多個header,不同條件下用不同的header。
  4. 點擊save&close即可
企業網站:用Elementor建站到上線的詳細步驟

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

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

使用Elementor theme builder製作底部footer

視訊教程:

企業網站:用Elementor建站到上線的詳細步驟
  1. 點擊 範本>theme builder
  2. 點擊添加新範本
  3. 選擇範本類型為footer
  4. 輸入範本名稱,譬如footer
  5. 點擊「創建範本」按鈕,可進入下圖所示的library頁面
  6. 在下圖的library中,左鍵移動到範本上方,將出現放大鏡按鈕,點擊可預覽範本; 選擇喜歡的或接近喜歡的範本,點擊insert按鈕即可導入到範本中; 然後如同添加header一樣,點擊publish發佈並點擊add condtion,然後save保存。
企業網站:用Elementor建站到上線的詳細步驟

給網站添加返回頂部按鈕

  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建站到上線的詳細步驟

接下來瞭解一下頁面類別與結構

頁面結構

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

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

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

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

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

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

在學習本章節前,請先瞭解一下Elementor的基礎編輯功能

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

下面是簡單版的文字教程

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

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

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

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

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

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

這兩個圖示企業網站:用Elementor建站到上線的詳細步驟對應的都是範本庫,前者是Elementor官方範本庫,後者是Envato elements外掛程式的範本庫。

最近我買了Envato Elements的付費會員,能夠使用1000多套網站範本和海量圖片資源,如有需要,可以聯繫我購買團購 。

點擊企業網站:用Elementor建站到上線的詳細步驟我們將看到如下範本庫,瀏覽範本后,若發現有喜歡的範本,查看範本的名稱1,通過搜索範本的標題關鍵詞2,以便將所有範本都搜索出來。

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

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

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

下圖是導入後的效果

elementor編輯器教程-21-1

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

可以通過新建備用頁面導入範本,再從頁面中複製出需要的元素塊到最終頁面中,備用頁面用完后刪除掉。

複製元素塊的方法如下

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

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

我們還可以繼續流覽envato elements的範本庫獲取靈感和素材,點擊企業網站:用Elementor建站到上線的詳細步驟你將看到下圖,當前沒有任何範本,此時你需要回到wordpress後台首頁

企業網站:用Elementor建站到上線的詳細步驟
  1. 進入Elements > free kits頁面
  2. 可以通過搜索名稱查找網站範本,對喜歡的網站範本可以點擊preview預覽範本
  3. 對需要的網站範本點擊install kit
  4. 點擊view kit可以查看網站範本的每個頁面範本,隨後可以導入頁面範本
  5. 所有已安裝的kits在左側elements >install kits中可查看
企業網站:用Elementor建站到上線的詳細步驟

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

最近我買了Envato Elements的付費會員,能夠使用1000多套網站範本和海量圖片資源,如有需要,可以聯繫我團購。

網站範本導入完畢后,我們回到編輯首頁頁面上,繼續點擊企業網站:用Elementor建站到上線的詳細步驟,將看到網站範本已經導入了,繼續點擊view installed kit,我們將看到這個網站範本的所有頁面範本

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

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

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

頁面框架完成後,可以點擊下圖中的2預覽看效果,也可以點擊1直接發佈,因為網站目前是建設期,遮罩搜尋引擎抓取,也不擔心被使用者看到;

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

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

其他操作項分別是:

  • 企業網站:用Elementor建站到上線的詳細步驟:頁面的基本設置
  • 企業網站:用Elementor建站到上線的詳細步驟:頁面內元素的導航,類似文章的章節導航,能快速幫你找到需要的元素,以及調整頁面內的元素排序。
  • 企業網站:用Elementor建站到上線的詳細步驟:歷史動作和版本管理,方便回溯,操作錯了也可以恢復,但刪除元素塊后就無法恢復了。
  • 企業網站:用Elementor建站到上線的詳細步驟:回應式模式,目前看到是PC效果,點擊可選擇到平板、手機視圖,以便調整網頁在不同設備上的效果。

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

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

製作關於我們頁面

製作聯繫我們頁面

製作下載頁面

製作產品頁面

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

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

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

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

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

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

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

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

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

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

保存功能表後去查看一下,將看到如下效果

企業網站:用Elementor建站到上線的詳細步驟
用woocommerce發佈5個示例產品
  1. 進入 產品》添加新的
  2. 輸入產品名稱
  3. 輸入產品描述,一段無關的圖文都可以
  4. 勾選多個分類
  5. 上傳產品圖片,可以理解為首圖、封面圖
  6. 選擇性上傳產品相冊,有就傳兩三張,沒有也沒關係
  7. 點擊發佈
企業網站:用Elementor建站到上線的詳細步驟

還可以繼續在產品頁面的下方找到產品簡短描述欄位,輸入範例內容,稍後可用於製作產品詳情頁範本

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

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

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

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

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

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

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

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

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

用Elementor theme builder創建Single Products範本

2021/4/12更新視頻教程

  1. 進入範本》添加新範本,選擇範本類型為single product,輸入範本名稱,譬如single product
企業網站:用Elementor建站到上線的詳細步驟
  1. 點擊“創建模板”按鈕,可進入下圖所示的library頁面:
    • 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    • 選擇喜歡的模板,點擊insert按鈕即可導入;
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

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

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

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

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

企業網站:用Elementor建站到上線的詳細步驟
用Elementor theme builder創建Product Archive範本

創建完產品詳情頁的範本后,我們開始做產品清單頁的範本,同理,你也可以對不同的產品分類採用不同的範本。

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

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

2021/4/12更新視頻教程

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

企業網站:用Elementor建站到上線的詳細步驟
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建站到上線的詳細步驟
發佈4篇博客
  1. 進入文章》寫文章
  2. 輸入標題
  3. 輸入文章描述,複製黏貼一段無關的圖文都可以
  4. 勾選多個分類
  5. 上傳特色圖像,可以理解為首圖或封面圖
  6. 點擊發佈
企業網站:用Elementor建站到上線的詳細步驟

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

用Elementor theme builder創建Single範本

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

  1. 進入範本》添加新範本,選擇範本類型為single post,點擊“創建範本”按鈕,進入下一步
企業網站:用Elementor建站到上線的詳細步驟
  1. 進入library頁面:
    1. 左鍵移動到模板上方,將出現放大鏡按鈕,點擊可預覽模板;
    2. 選擇喜歡的模板,點擊insert按鈕即可導入;
    3. 導入后,會自動選擇一篇文章數據嵌入,以便我們直觀看到效果
企業網站:用Elementor建站到上線的詳細步驟

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

用Elementor theme builder創建Archive範本

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

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

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

Elementor編輯功能教程

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

左側工具區

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

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

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

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

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

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

右側內容製作區

認識結構section與column(Elementor老版本)

2023年12月21日注:目前Elementor經過一年多的打磨,已經將section改為container了,操作上略有區別,下文會以視頻的形式簡介Container的用法

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

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

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

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

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

企業網站:用Elementor建站到上線的詳細步驟
Elementor的Container如何使用?

請學習:Elementor:如何使用Flexbox Container?

如何添加元素到內容區

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

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

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

企業網站:用Elementor建站到上線的詳細步驟
如何修改元素

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

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

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

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

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

相關文章:

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

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

企業網站:用Elementor建站到上線的詳細步驟
避免重複工作的Global元素

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

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

給它命名並保存

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

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

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

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

學習元素設置的訣竅

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

以Single Product範本頁面為示例調整細節

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

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

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

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

elementor-navigator

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

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

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

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

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

  1. 點選列
  2. 在左側點擊advanced
  3. 選中advanced欄
  4. 調整padding,padding是指列內部上下左右的內間距
  5. 將padding都改為0,你也可以選中鎖鏈圖示,它將使得4個間距值保持一致,改任一值,其他三值都一樣改變; 反之,解鎖鎖鏈后,就可以單獨編輯每個間距值; 額外說一下padding上方的margin值是所選元素與周圍其他元素的外間距,請試試看吧。
企業網站:用Elementor建站到上線的詳細步驟

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

  1. 點選product image元素
  2. 將sale flash關閉
  3. 將第一個spacing設置為10px,原來是0
  4. 將第二個spacing設置為10px,原來也是0,然後就能看到如下圖說是的效果了
企業網站:用Elementor建站到上線的詳細步驟

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

  1. 點選列
  2. 點選左側的advanced
  3. 點擊左側底部的設備圖示
  4. 切換到平板、手機依次查看,我們發現手機端有一些空白間距
  5. 我們進行padding的調整
  6. 將padding都改為0,然後update
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

我們注意到詢盤按鈕的顏色與主題不符,我們不用單獨去為按鈕設置顏色,可以採用主題樣式的辦法進行全域設置,這樣以後用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建站到上線的詳細步驟
  1. 回到single product頁面的編輯后,我們點擊enquiry圖示
  2. 在text中設置按鈕上的文案,譬如enquiry
  3. 將連結link設置為contact url,
    1. 選擇type為email
    2. 填寫email為mailto:你接受詢盤的郵箱
  4. 將alignment設置為居中對齊,你可以挨個試一下4個對齊方式的效果
  5. 選擇一個icon,或者不選也可以,以上設置完成後,就將看到下圖所示的按鈕效果
企業網站:用Elementor建站到上線的詳細步驟

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

  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建站到上線的詳細步驟
(這是Elementor pro 3.2版本的功能)

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

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

  1. 點選product data tabs元素
  2. 將panel的typography點選刷新按鈕恢復themestyle中的預設設置
  3. 將heading的typography點選刷新按鈕恢復themestyle中的默認設置
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

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

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

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

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

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

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

  1. 進入欄位》 新建
  2. 添加字段組名稱,如產品
  3. 設置位置為:內容類型等於產品,這樣能實現所有產品頁面都會新增這個字段
  4. 點擊添加字段
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

elementor與acf自定義產品欄位教程-6-1

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

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

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

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

然後在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建站到上線的詳細步驟

好了,關於這個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. 在菜單欄中,點擊“窗口”,勾選“動作”,點擊新建按鈕,命名動作名稱,確定後自動開始錄製
企業網站:用Elementor建站到上線的詳細步驟
  1. 將圖像大小改為目標尺寸,如1000px或1200px
企業網站:用Elementor建站到上線的詳細步驟
  1. 將圖片存儲為web格式,調整質量為90 jpg格式,存儲到非原圖的新文件夾內。 (PS:如果你的圖片需要保留透明效果,就要保持為png格式,通常png格式比jpg格式的圖片要大)
企業網站:用Elementor建站到上線的詳細步驟
  1. 關閉圖片,並點擊不保存原圖修改,
企業網站:用Elementor建站到上線的詳細步驟
  1. 至此,動作錄製完成,點擊動作錄製的結束按鈕
企業網站:用Elementor建站到上線的詳細步驟
  1. 接下來進行圖片的批量處理,
    • 點擊文件》自動》批處理
    • 選擇動作,默認已經選好剛才錄製的動作
    • 選擇原始件夾:選擇需要處理的圖片所存放的資料夾
    • 目標文件夾:選擇需要存儲處理後圖片的文件夾
    • 點擊確定,photoshop開始快速處理圖片,處理完成後你去文件夾裡驗收即可
企業網站:用Elementor建站到上線的詳細步驟

圖片數量少時,用免費軟件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,按下圖所示配置:

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

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

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

視頻素材

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

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

文案素材

產品分類介紹、產品介紹、產品手冊、產品專案資訊、產品評價資訊…

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

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

頁面關鍵詞

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

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

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

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

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

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

google serp
企業網站:用Elementor建站到上線的詳細步驟

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

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

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

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

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

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

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

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

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

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

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

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

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

-3-1

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

企業網站:用Elementor建站到上線的詳細步驟
google keywords planner

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

google serp

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

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

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

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

網站站內基礎SEO

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

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

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

設定logo

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

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

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

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

網站速度優化

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

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

開放收錄,網站上線

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

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

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

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

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

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

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

点赞
0 / 5 0

Your page rank:

外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

LOYSEO