Elementor教學:2小時快速入門,輕鬆建立響應式網站

Elementor是WordPress的一款視覺化頁面編輯器外掛。使用該插件,你可以在沒有技術人員支援的情況下,透過組件拖曳的方式來輕鬆建立專業的B2B外貿網站。

這個Elementor教程是一篇知識掃盲教程;但更多的是一篇實操教程,可以讓我們學習在建置外貿行銷型網站的過程中具體需要用到的功能、需要製作的頁面是怎麼樣實現的。並且在實操的過程中來讓我們熟悉Elementor常用的設定和功能,是指向性非常明確的一門教學。

Elementor基礎教程

 在基礎教學模組中,將帶你初步了解Elementor的安裝與使用,以及Elementor中最重要的概念:容器&佈局。也會介紹Elementor的基礎功能以及付費版本跟免費版的功能差異。

01
開始使用安裝Elementor
帶你從零完成外掛安裝、基礎設定、以及如何使用Elementor來編輯我們的頁面
02
將Section轉換為Flexbox容器
雖然現在Elementor都是預設用容器佈局,但是如果網站之前有舊版Elementor,那麼這個教學會教你把舊的Section佈局安全遷移到Container + Flex,頁面更輕更好維護;
03
Elementor 容器&佈局詳解(重點)
Elementor 3.6 以後發布了Flexbox Containers,這個容器的概念是我們使用Elementor打造專業頁面的重點。可以這麼說,掌握了容器,你就掌握Elementor。我們這章教學會進行實操,實作Intel的一部分頁面模組。
04
Elementor 進階功能設定
Elementor的小工具總數有90個以上,這些小工具包括表單、滑桿、貼文展示、作品集、價格表、選單導航、登入/註冊表單、WooCommerce 整合小工具等。每個小工具都有一些進階設定可以讓我們給小工具不一樣的效果。
05
Elementor Pro vs. Elementor
儘管Elementor免費版已經足夠我們去實現專業的網站佈局,但是使用了Elementor Pro之後能夠讓你的網站從「好看」轉變成「好看、好用、好轉化」。這篇文章會介紹一些Elementor跟Elementor Pro的一些差異。

Elementor頁面元素設計

這部分我們將會使用Elementor來製作外貿網站頁面中常見的重要部分,部分內容需用到Elementor Pro。也需要用到上一部分基礎教程的Elementor容器和佈局這塊的知識。

01
Elementor製作Banner
Banner作為網頁的核心視覺元素,既是吸引訪客目光的第一道風景線,也是傳達關鍵訊息和引導使用者行動的有效方式。我們這個章節將學習如何用Elementor來實現Banner。
02
Elementor製作Header
Header部分也是網站非常重要的一個模組。 Header中清晰的導覽列能讓訪客第一時間看懂站點怎麼整理內容,快速抵達「產品、解決方案、 使用者案例」等關鍵入口,進而提升瀏覽效率與滿意度。同時,把「聯絡、報價、試用、WhatsApp」等轉換型按鈕放在導覽中,也能明顯拉升點擊與諮詢轉換。
03
Elementor製作Footer
Footer是集導航、信任、合規與轉化於一身的底部中樞;用Elementor搭建能把它做成可視化、可復用、可度量的全站模組,省時、省心、好維護。
04
Elementor製作懸浮按鈕
我們可以使用Elementor將客服、詢問表單、電話或WhatsApp等入口做成懸浮按鈕,依照裝置或頁面類型設定顯示條件,增加使用者轉換機會。
05
Elementor製作返回頂部按鈕
在頁面上新增“回到頂部”,增加網頁的易用性,提升使用者體驗
06
Elementor製作側邊欄
側邊欄(Sidebar)在不同類型的網站中扮演不同的角色。我們這個教學將學習如何透過Elementor合理設計側邊欄,不僅能夠提升使用者體驗,還能有效支援網站的業務目標。
07
Elementor製作外貿詢盤表單
外貿詢盤表單是B2B外貿行銷網站中最重要的功能之一。它不僅是獲取潛在客戶的關鍵途徑,更能大幅提升使用者體驗和企業形象。透過Elementor Pro強大的Form小工具,我們可以輕鬆設計出符合企業需求的客製化詢盤表單。
08
Elementor製作超級菜單
超級選單(也稱為Mega Menu)是一種比普通下拉更寬、更大的選單導航:當用戶懸停或點擊頂級選單時,會展開一個多欄佈局,把大量連結按產品線、行業應用、資源等清晰分區,並可嵌入圖標、縮圖、推薦卡片、甚至表單與下載入口。這篇Elementor教學將教你使用Elementor Pro+ ElementsKit Elementor Addons外掛程式來實現超級選單。

Elementor模板

前置條件:Elementor Pro專業版。模板是Elementor Pro中最重要的功能之一。有了模板,我們可以依照自己的需求對網頁進行自訂,提升網站的美觀與功能性。

01
Elementor打造專屬產品詳情頁
這篇Elementor教學,會帶你實現產品詳情頁,替換掉呆板、預設的WooCommerce產品詳情介面,讓產品詳情頁面看起來既輕快又可信。
02
Elementor如何做產品分類列表
分類頁是產品架構的“路口”,把使用者快速帶到適當的子類與產品卡。它提升可發現性(清楚的分組與麵包屑讓人不迷路)、承接廣告與SEO(用戶多從「產品類目關鍵字」進入)、也方便橫向比較與篩選,從而提高到達詳情頁與詢問/下單的比例。用Elementor來做分類頁能夠做出專業的介面小姑、可重複使用的高效模板,非常好用。
03
Elementor如何做文章列表頁
文章清單頁的任務是把零散文章組織成可瀏覽的路徑,讓讀者在封面、標題、摘要、標籤之間迅速判斷價值,而我們這裡要學習的Elementor的模板功能能把這些元素做成統一卡面。長期來看,這頁能提升站內停留、帶動內鏈權威度,並為產品頁導流。
04
Elementor個人化搜尋結果頁面
預設的搜尋結果像一串生硬鏈接,我們將學習如何使用Elementor建立個人化搜尋結果頁面。個人化之後,結果可以按類型分區(產品、文章、下載),每個卡片帶有縮圖、關鍵屬性和行動按鈕。
05
Elementor自訂404頁面
學習如何使用Elementor來實作自訂404頁面。當使用者造訪網站上不存在的頁面時,提供搜尋框、熱門分類與返回首頁等快速入口來增加使用者留存率。
返回頂端
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors