fbpx

【Elementor Template】從版型開始打造一個 Landing Page 三分鐘教學

WordPress 編輯器中,Elementor 肯定是最受歡迎的其中之一,超過 5百萬人次的下載和 5000多個五星評價。如果一個工具好用而且容易學習,還有中文化,沒有理由不試用看看。

本文將教大家由最容易的版型開始設計自己的登入頁 Landing Page,它不僅只是用戶最常看到的頁面,也是互動及收集名單的重要來源喔。

3分鐘的教學,肯定值得一看。

來給他看下去…

更新於 04/08/2021

在閱讀前,請容許大叔聲明幾件事情:這些事情對您可能蠻重要的:

  • 內容中連結可能有參加聯盟計畫,這並不影響您的購買權利。
  • 聯盟計畫和廣告都會做為網站經營基金。
  • 部份收入將捐給流浪動物基金會。(公益捐款明細)
  • 喜歡我的文章的話,請幫我這樣做,點擊下面的拍手圖示。

【Elementor Template】從版型開始打造一個 Landing Page 三分鐘教學

1️⃣ 什麼是登入頁 ( Landing Page )?

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

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

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

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

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

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

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

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

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

那我們就開始吧。

2️⃣ 載入 Elementor 版型

3️⃣ 修改內容

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

  • 商標
  • 標題
  • 簡述
  • Call To Acting

修改內容

修改商標 LOGO

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

參考文章: 【網頁Logo設計】2020免費線上Logo設計軟體推薦 – 自己動手做品牌

修改標題

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

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

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

台灣大哥大 5G

修改簡述

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

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

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

再換個照片吧!

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

4️⃣調整版面

elementor template

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

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

菈喜首頁

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

編輯段

  • 版面配置 – 內容寬度改為方框 800 px
  • 拉伸段 – 打開

elementor_編輯段

  • 邊框間距

elementor_編輯段

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

elementor_編輯段

新增空白間隔

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

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

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

首頁設計

總結一下 -Elementor Template

從版型開始打造一個 Landing Page

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

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

菈喜大叔 - 減法生活提案

喜歡這篇文章嗎?

請幫大叔一個忙

分享文章給需要的朋友
分享在 facebook
分享在 pinterest
分享在 linkedin
用手機聽我的文章
分享在 pocket

發表迴響

搜惠

搜更多優惠碼