Elementor Template 範例:讓你的網站更具吸引力


使用 Elementor 模板的好處包括:

  • 節省時間:使用現成的模板,可以省去自己從頭開始設計的時間,讓你更快速地建立美觀的網站。
  • 降低成本:如果雇用設計師建立網站,成本可能非常高。使用 Elementor 模板,你可以省去這些費用,同時還可以得到專業設計師的風格指導。
  • 適應性強:使用 Elementor 模板,可以讓你的網站適應不同的螢幕大小和設備,從而提供更好的用戶體驗。
  • 自定義選項:使用 Elementor 模板,你可以自由地修改模板,以符合你的品牌形象和需求。
  • 大量範本可用:Elementor 提供了豐富的模板庫,涵蓋各種類型的網站,你可以根據自己的需求進行選擇,而且每個模板都可以進行自定義。

因此,使用 Elementor 模板可以讓你更快速地建立網站,節省成本,並提供更好的用戶體驗。



Elementor 是什麼?

如果你正在打造自己的 Wordpress 網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 Elementor 這個 WordPress 插件。

Elementor 可以讓你快速而簡單地創建專業而美觀的網站,它的三大特點:

  • 「拖放式 (Drag and Drop)」編輯介面 :簡單易操作,讓任何人都能夠輕鬆設計和編輯網頁。
  • 不需要具備程式設計能力:Elementor 將想得到的功能都設計成元素,直接「拖放」就能使用。
  • 網上最多模板和教學資源支援 :使用 Elementor 模板和範本讓我們站在巨人的肩膀上。你可以在網路上找到任何關於 Elementor 的問題和教學,省下大量解決問題的時間。



此外,在最新的統計中,Elementor 是最受歡迎的 WordPress 網頁編輯工具,例如說:

  • 平均每 10 秒創建一個網站
  • Elementor 是一個開源的平台
  • 自 2016 年推出,至今已擴展到 180 多個國家/地區
  • 超過 5,000,000 次活躍安裝



以下是 Elementor 的一些特點:

  • 優秀的性能:Elementor 能夠快速載入,不會讓你的網站變得緩慢。
  • 大量模板可用:Elementor 提供了豐富的模板庫,涵蓋各種類型的網站,你可以根據自己的需求進行選擇,而且每個模板都可以進行自定義。
  • 無需程式背景:Elementor 的編輯界面簡單易用,讓你可以輕鬆設計和修改網站的外觀和功能,而且不需要任何程式設計知識。
  • 免費和付費版本:Elementor 提供了免費和付費兩個版本,免費版本已經足夠使用,但付費版本可以提供更多功能和模板。
  • 網上大量免費學習資源:Elementor 是最受歡迎的 WordPress 編輯工具,超過 800 萬網站使用,可以在網路上找到大量的學習文章。



Elementor 是基於 WordPress 開放系統下的網頁編輯工具軟體,可以從 Loading Page 到電子商務網站等幾乎所有網頁應用中使用,是大叔最喜歡且常使用的編輯器之一。

Elementor 的強大功能和簡單易用的編輯界面,讓它成為了最受歡迎的 WordPress 編輯工具之一,無論你是新手還是有經驗的網站開發者,都可以輕鬆使用它來打造出美觀而實用的網站。


▼ Elementor 網頁編輯器影片 - 由 Elementor 提供




什麼是登入頁 ( Landing Page )?

Landing Page 的主要目的就是告訴使用者正確的方向。

也就是「引導」的工作,像是讓用戶…

  • 了解公司服務
  • 購買商品
  • 留下連絡資料等


而登入頁就像某人來到陌生的地方要問路的時候,他會由登入頁的…

  • 外觀 - 決定我們是不是夠不夠專業,是否值得詢問。
  • 標題 - 決定是否為他的目標對象。
  • 內容 - 決定我們的服務和商品是否配合他的期待。


當我們都過關了,他自然會相信我們給他的「引導」。

常見的引導有什麼呢? 例如說:

  • 購買商品
  • 最新活動相關內容
  • 留下連絡資料

所以良好的登入頁 ( Landing Page ) 設計,是為會公司帶來很高的轉換率,也就是業績啦。

那我們就開始吧。



Elementor Template 模板教學



Step1.載入 Elementor 版型

新增個頁面,然後點擊新增版型。

在搜尋框打上 Landing Page 選一個你喜歡的吧。

Elementor Template|Name



然後插入它。

影片出現問題,請連絡我



Step2.修改內容

再來先修改內容,最好先決定你希望用戶看到什麼內容。我們將針對這幾點做修改。

  • 商標
  • 標題
  • 簡述
  • Call To Acting
Elementor Template|Name



影片出現問題,請連絡我



Step3.修改商標 LOGO

一般網站用 LOGO 都是長高比約 2:1 ,如果你還沒有自己的商標的話,網路上可以找到很方便的 LOGO 設計。

參考文章: 【Logo 設計】2022 自己品牌自己做 - 品牌DIY



修改標題

Elementor Template|Name

標題的重點就是「簡單」,最好很清楚的了解你的核心服務或是商品。也有人這樣樣使用…

「品牌」加上「關鍵字」,例如說…

台灣大哥大的網頁 TITLE 就是【台灣大哥大 5G 能所不能】,關鍵字就是 "5G" 這樣的感覺。



修改簡述

寫作的朋友可能知道,研究表示一個人停留在標題的時候只有 0.3 秒,如果他停下來看你的內容的時候。

簡述只有 3秒來決定他要不是再往下看。

3秒的關鍵時間,你只能在 1-2 句話給用戶一個留下的理由。


再換個照片吧!

我把手機的照片換成了我的背影。



調整版面

再來你一定覺得哪裡怪怪的,所以我們就需要調整一下設計版面;並希望調整到下面的樣子。

版面的設計可依你的個人喜好,大叔的作法只是提供你一個參考的選擇。

Elementor Template|Name

在過程中,我們調整的地方有:



編輯段

  • 版面配置 - 內容寬度改為方框 800 px
  • 拉伸段 - 打開
Elementor Template|Name



  • 邊框間距
Elementor Template|Name




  • 背景顏色 分別為:#F3EAE3 - 膚色、#6D7C69 - 墨綠色,讓大家參考。


Elementor Template|Name



新增空白間隔

  • 空白間隔高度為 300px
  • 背景顏色為 #6D7C69
  • Z-index - 0
  • 位置 - Absolute
  • Horizontal Orientation -20px
  • Vertical Orientation -20px

然後圖片的 Z-index 要改為 9 這樣才不會被空白間隔給擋住。

改完後,就成了新的首頁的樣子;是不是看起來不錯。

Elementor Template|Name



心得 & 總結

Landing Page 十分的重要,如果你可以在這放上最重要的內容,讓用戶更了解你的品牌和核心價值。

大叔目前網站也是使用【Elementor】設計的,如果你對這套工具有什麼問題,都可以在下面留言發問,如果我可以為你服務的話,這是我的榮幸。



讀者優惠

  • Elementor Pro 大叔優惠請看 → mo Studio
  • 部落客專屬:用 Notion 打造一個 Wordpress 網站,讓你專心寫,其它問題大叔幫你解決 → mo Studio