Professional Documents
Culture Documents
Thiet Ke Landing Page MR Duc Final
Thiet Ke Landing Page MR Duc Final
THIẾT KẾ
LANDING PAGE
NGUYỄN ĐỨC – 2021
ĐÂY LÀ
NỘI DUNG PRE-
TRANNING
BẠN CẦN HOÀN THÀNH TRƯỚC KHI THAM GIA HỌC CÙNG GIẢNG VIÊN VÀ CẢ LỚP
2
3
WHERE
WHAT ? WHY ? HOW ? WHO ? WHEN ?
?
Bước 1. Luôn bắt đầu câu hỏi What: Nó là cái gì ? Ghi nhớ “keyword” – từ khóa để mình
tra cứu trên google, và các tài liệu, hỏi người khác.
Bước 2. Sau khi biết nó WHAT – là cái gì rồi, thì phải biết TẠI SAO PHẢI NHƯ VẬY ?
Làm có ích lợi gì ? Tìm hiểu nguyên lý rồi mới đến HOW
Bước 3. Biết WHAT, hiểu WHY rồi thì đến HOW: Làm nó như thế nào ? Rồi tự làm hay nhờ,
hay thuê, hợp tác (who) ? Tiếp đến là Khi nào làm ? Và làm ở đâu ?
6
PHẦN 1: WEBSITE
7
ĐỂ WEBSITE HOẠT ĐỘNG CẦN CÓ
Khách hàng tự vào xem sản phẩm và mua hàng mà không cần có chủ cửa hàng ở đó.
Một website được thiết kế tốt và đầy đủ thì sẽ có thể TỰ ĐỘNG HÓA VIỆC BÁN HÀNG,
TIN TỨC
GIẢI TRÍ
10
CÁC LOẠI WEBSITE
CÔNG TY
11
WEBSITE BÁN HÀNG:
SÀN TMĐT
Ví dụ: Tiki.vn, Lazada.vn,
Shopee,…
12
WEBSITE BÁN HÀNG:
VÍ DỤ:
namagarden.vn
trituedautu.net
16
Nội dung trong một Landing Page tốt luôn được quy hoạch tập trung
nhằm điều hướng tới mục tiêu chuyển đổi được định sẵn, không có thông tin thừa.
Vì vậy mà tỷ lệ chuyển đổi từ người truy cập trang sang khách hàng tiềm năng tại
Landing Page cao hơn nhiều so với website.
18
VÌ SAO LANDING PAGE QUAN TRỌNG?
Điều này giúp khách hàng nắm được nhiều thông tin và có thiện cảm với sản phẩm
của bạn hơn.
Một trang Landing Page có thể khiến sản phẩm thay đổi từ bình thường, trở nên
sang trọng nếu biết tận dụng các yếu tố thiết kế phù hợp.
19
VÌ SAO LANDING PAGE QUAN TRỌNG?
Dễ thử nghiệm, thay đổi và tối ưu
Đối với Landing Page, việc “đập đi xây lại” một trang mới là điều khá dễ dàng vì
không cần biết lập trình.
Chúng ta có cơ hội thử nghiệm và nhận kết quả nhanh, đôi khi chỉ cần thay tiêu đề
là tỷ lệ chuyển đổi đã tăng lên
20
http://ladipage.vn/?ref=
duc-nik
22
3 BƯỚC ĐỂ ĐĂNG KÝ TÀI KHOẢN LADIPAGE
BƯỚC 1:
GIỮ PHÍM CTRL và BẤM
LINK DƯỚI
http://ladipage.vn/?ref=
duc-nik
BƯỚC 2:
BẤM NÚT KHOANH ĐỎ BƯỚC 3:
TRÊN GIAO DIỆN WEB VỪA BẬT RA ĐIỀN FORM ĐĂNG KÝ
23
SAU KHI ĐIỀN FORM ĐĂNG KÝ XONG.
BẠN CẦN KIỂM TRA EMAIL ĐỂ XÁC THỰC TÀI
KHOẢN LADIPAGE
LƯU Ý:
- Nhiều Anh/Chị không XÁC THỰC EMAIL với LADIPAGE
nên các học phần sau thường xảy ra lỗi.
Giảng viên phải đi dò để tìm lỗi cho từng người rất mất thời gian.
Gây ảnh hưởng đến tiến độ học của các học viên khác trong lớp.
- Bạn cần HOÀN THÀNH BƯỚC NÀY thì mới học được tiếp các phần sau.
24
MÀN HÌNH KIỂM TRA: BẠN ĐÃ ĐĂNG KÝ
LADIPAGE THÀNH CÔNG CHƯA
25
https://help.ladipage.vn/xuat-
ban-landing-page/ten-mien
32
NGUYÊN TẮC CHUNG CỦA 1 LANDING PAGE 33
NGÀNH BẤT ĐỘNG SẢN
1. Nội dung quan trọng: Mặt bằng, Bảng Giá, Chính sách bán hàng, Thông tin pháp lý
3. Tiêu đề:
Nên có tiêu đề ở tất cả các section (trừ section ảnh). Nếu một
section không có tiêu đề, khách hàng sẽ bỏ qua vì nghĩ section đó
chỉ là một đoạn text thông thường nối với section trước nó tiêu
đề phải luôn được nhấn mạnh
hơn các nội dung chữ khác
NGUYÊN TẮC CHUNG CỦA 1 LANDING PAGE 34
NGÀNH BẤT ĐỘNG SẢN
5. Các nội dung nút CTA thường dùng cho ngành Bất động sản:
Tải bảng giá; Nhận bảng giá chi tiết; Tư vấn cho tôi; Nhận tư vấn; Đăng ký nhận tư vấn; Để lại thông tin để nhận
tư vấn; Tìm hiểu ngay; Nhận vé mời tham quan căn hộ mẫu; Nhận vé tham dự buổi mở bán, Đặt lịch xem nhà
ngay.
NGUYÊN TẮC CHUNG CỦA 1 LANDING PAGE 36
NGÀNH BẤT ĐỘNG SẢN
38
PHẦN ĐẦU CỦA LANDING PAGE 39
NGÀNH BẤT ĐỘNG SẢN
Phần đầu của Landing Page được đầu tư nhiều thời gian nhất. Nhiệm vụ
của phần này là gây ấn tượng tốt với khách hàng trong 3 giây đầu tiên.
Cấu trúc một Hero Section chuẩn Landing Page chuyển đổi bao gồm 4 phần: Tiêu đề (Headline); Nội
dung mô tả (Description); Hình ảnh sản phẩm và Nút kêu gọi hành động (CTA).
MỤC ĐÍCH:
- Tạo ấn tượng đầu tiên của khách hàng khi truy
cập một trang
- Ảnh hưởng đến quyết định khách hàng sẽ tiếp
tục đọc nội dung của trang hay sẽ thoát.
HERO SECTION 41
1. Tiêu đề ( Headline )
MỤC ĐÍCH: Đây là thành phần nội dung quan trọng nhất của Hero Section ngành BĐS. Nêu bật được lý do vì sao
khách hàng tiếp tục xem thông tin về sản phẩm.
Tiêu đề thường là “Một lời đề nghị hấp dẫn đến mức không thể bỏ qua”
42
43
CÁC CÁCH VIẾT TIÊU ĐỀ THƯỜNG THẤY:
- Mô tả dự án + thông tin khách hàng mục tiêu hoặc giá: Tiêu đề: IMPERIA SMART CITY; Phụ đề: Nơi tận hưởng
giá trị sống đỉnh cao.
- Chương trình ưu đãi cho khách hàng: Chiết khấu lên đến 8% giá trị căn hộ.
- Lợi ích/ Ưu điểm vượt trội của dự án: Dự án đầu tiên tại Việt Nam có 100% căn hộ sở hữu tầm nhìn Panorama
đẳng cấp.
- Dùng cỡ chữ to, màu sắc nổi bật so với màu nền và các phần còn lại của Hero Section.
- Vị trí Headline thường nằm phía lề bên trái hoặc ở giữa Hero Section.
- Căn chỉnh cỡ chữ để Headline nằm tối đa 3 dòng để giúp khách hàng dễ quét mắt.
44
2. Nội dung mô tả (Description)
– Có thể thay ảnh tĩnh bằng video hoặc hình Gif nếu có.
MỤC ĐÍCH: Điều hướng khách hàng thực hiện hành vi chuyển đổi cụ thể.
CÁC NỘI DUNG THƯỜNG GẶP: Tuỳ vào mục tiêu chuyển đổi là gì mà nội dung nút CTA thay đổi.
(Đăng ký nhận tự vấn; Nhận tư vấn ngay; Để lại thông tin để nhận tư vấn; Tư vấn cho tôi; Đăng ký
ngay)
ĐẶC ĐIỂM: Tuyền tải 1 mục tiêu duy nhất, Sử dụng động từ - Dễ hiểu, đi thẳng vào vấn đề
49
- Nếu có 2 nút nút CTA, bắt buộc chọn nhấn mạnh vào 1 nút, nút còn lại chỉ cần để chữ bình
thường không cần bo khung.
5. Thanh chỉ mục (Navigation Bar) 50
MỤC ĐÍCH: Là thanh chỉ mục giúp khách hàng chọn nhanh thông tin họ muốn đọc.
ĐẶC ĐIỂM: Nội dung đặt trong Navigation Bar thường bao gồm 3 - 5 nhóm nội dung được khách hàng
quan tâm nhiều nhất hoặc bạn đánh giá là quan trọng.
- Cao vừa phải: Không thiết kế Navigation Bar quá to, hay cao vì có thể gây mất tập trung cho phần
Hero Section, thường là 60 - 80 pixel.
- Luôn ghim thanh Navigation Bar chạy theo nội dung để khách hàng có thể đọc đi đọc lại thông tin
mong muốn trong quá trình lướt trang mà không cần kéo lại về đầu trang. ( Tăng thời gian ở lại
web)
- Logo ở Navigation Bar ưu tiên đặt ở viền bên trái, nút CTA đặt viền bên phải.
PHẦN GIỮA CỦA LANDING PAGE 52
NGÀNH BẤT ĐỘNG SẢN
Nhiệm vụ của phần GIỮA Landing Page là giữ khách hàng say mê với
thông tin bạn muốn
MỤC ĐÍCH: Cho KH biết dự án có nằm ở vị trí nào, có tốt hay không.
GỢI Ý TIÊU ĐỀ: Vị trí đắc địa; Vị trí vàng; Vị trí đắc địa giao thông thuận lợi; Vị trí
tiềm năng.
58
– Xung quanh có trường học hay bệnh viện – Section này cũng thường có ảnh để minh
không? hoạ cho vị trí (có thể dùng dạng ảnh bản
– Hướng của dự án cụ thể ra sao? đồ, ảnh chuyển động hoặc dạng hình chụp
thật)
– Có thuận lợi cho đi làm hay vào nội thành
không?
59
HƯỚNG DẪN THIẾT KẾ CƠ BẢN
MỤC ĐÍCH: Cung cấp thông tin toàn cảnh về mặt bằng
dự án.
GỢI Ý TIÊU ĐỀ: Tổng quan mặt bằng dự án; Mặt bằng
dự án; Thiết kế tổng thể; Mặt bằng phân khu.
NỘI DUNG NỀN: Hình ảnh mặt bằng dự án; Nội dung
giới thiệu từng khu vực trong dự án.
– Thiết kế căn hộ
– Căn hộ mẫu dự án
65
NỘI DUNG NỀN ĐẶC ĐIỂM
– Có bao nhiêu loại căn hộ (1PN, 2PN...)? – Cung cấp đầy đủ thông tin về mặt bằng của từng
loại căn hộ.
– Mỗi loại căn hộ diện tích bao nhiêu?
– Về ảnh nên dùng ảnh 3D và dạng ảnh cho phép
– Mặt bằng mỗi loại như thế nào?
tương tác trực tiếp (MatPor).
– Cách bố trí không gian trong căn hộ?
66
MỤC ĐÍCH
GỢI Ý TIÊU ĐỀ: Bảng giá căn hộ; Bảng giá chung cư.
NỘI DUNG NỀN: Mỗi loại căn hộ có giá khoảng bao nhiêu? Loại
căn hộ nào còn, loại căn hộ nào đã hết? Nếu là dự án đất thì giá lô
đất là bao nhiêu?...
ĐẶC ĐIỂM: Không cần nói rõ giá cụ thể bao nhiêu, nhưng cần để
khoảng số dạng Từ X - Y tỷ vì như vậy sẽ kích thích khách hàng
điền thông tin tải bảng giá.
69
MỤC ĐÍCH: Trả lời được câu hỏi xung quanh dự án có gì đáng giá?
GỢI Ý TIÊU ĐỀ: Tiện ích dự án; Danh sách tiện ích; Tiện ích vượt trội; Tiện ích
75
- Khu vực dự án có cây xanh không? về tài chính thì họ sẽ tập trung quan tâm
nhiều đến tiện ích (Môi trường sống
- Dự án có khu vui chơi cho trẻ em không? Có
xung quanh)
phòng tập thể dục hay sân thể thao không? Có hồ
bơi không?
ĐẶC ĐIỂM
- Nhấn mạnh vào thông tin liên quan đến hợp đồng, giấy
tờ sổ sách và chủ đầu tư.
- Nếu chủ đầu tư là thương hiệu nổi tiếng thì có thể viết
1 đoạn ngắn để nhấn mạnh.
+ KH sẽ xem lại những điểm đáng chú ý nhất của sản phẩm
+ Gồm 2 mục nội dung chính là Khu vực thực hiện chuyển đổi (Section
Form) và Footer.
MỤC ĐÍCH
Lấp khoảng trống khu vực điền Form, nhắc nhở khách
hàng không bỏ lỡ những giá trị mà bạn trao cho khách
hàng.
- Ảnh (như ví dụ minh hoạ) – Nên đặt nằm bên trái hoặc bên phải Form
- Danh sách lợi ích: Lặp lại một vài phần nội dung – Nếu Form ở giữa section thì có thể lựa chọn đặt phần
quan trọng khoảng 3 - 5 gạch đầu dòng, Chương này phía dưới hoặc bỏ hẳn.
trình ưu đãi – Sử dụng tính năng Gallery nếu có nhiều ảnh
84
1.2 Bảng điền thông tin (Form)
Caption: Thông tin phụ để trấn an khách hàng hoặc giải CTA: Tương tự Hero Section hoặc dùng động từ theo câu
thích nội dung như: Sau khi đăng ký, chuyên viên sẽ gọi tiêu đề Form.
điện tư vấn quý khách
86
ĐẶC ĐIỂM: Tuỳ thuộc vào nhu cầu mà bạn có thể yêu cầu
khách hàng điền nhiều hay ít thông tin nhưng lưu ý đừng cố gắng
“hỏi cung” khách hàng.
- Nhấn mạnh Form bằng cách bọc nền màu phía sau.
- Nếu thiết kế ngang thì đặt ở trên các nội dung phụ.
87
2. Chân trang (Footer)
MỤC ĐÍCH: Cung cấp thông tin về địa chỉ, thương hiệu, số điện thoại liên hệ, thông tin
mạng xã hội và tăng độ tín nhiệm của trang với hệ thống đánh giá từ Google.
88
ĐẶC ĐIỂM: Thông tin mang tính liệt kê, giúp khách hàng có thể chủ động liên hệ với
bạn khi phát sinh nhu cầu.
Thông tin mang tính liệt kê, giúp khách Trình bày theo các mẫu có sẵn trong mục
hàng có thể chủ động liên hệ với bạn khi section Footer mẫu của LadiPage.
phát sinh nhu cầu.
90
PHỤ TỐ KÍCH THÍCH KHÁCH HÀNG THỰC HIỆN
HÀNH VI CHUYỂN ĐỔI
Các phụ tố kích thích chiếm rất ít diện tích trên trang
nhưng lại tác động mạnh đến tâm lý hành vi của
khách hàng.
Những phụ tố này được ứng dụng rộng rãi trong cả ngành thương mại
điện tử để kích thích khách hàng hoàn tất thanh toán nhanh hơn.
91
Các phụ tố kích thích chiếm rất ít diện tích trên trang nhưng lại tác động mạnh
đến tâm lý hành vi của khách hàng.
92
93
95
96
PHẦN 1:
GIAO DIỆN
LADIPAGE BUILDER
Sau khi đăng ký tài khoản Ladipage thành công:
Bạn bấm gõ địa chỉ: https://builder.ladipage.com/ trên trình duyệt để vào phần này
MENU TRÁI CỦA TRANG LADIPAGE BUILDER 97
8: Phần quản lý danh sách các tên miền bạn đã trỏ về ladipage.
9: Phần tạo các đường link theo dõi.
10: Phần giới thiệu người dùng để được tặng thêm license ladipage
11: Phần quản lý thành viên, team cùng sử dụng tài khoản ladipage.
CÁC PHẦN THƯỜNG XUYÊN DÙNG 98
7: Phần cấu hình để kết nối các công cụ lưu trữ dữ liệu với ladipage.
8: Phần quản lý danh sách các tên miền bạn đã trỏ về ladipage.
11: Phần quản lý thành viên, team cùng sử dụng tài khoản ladipage.
99
PHẦN 2:
THAO TÁC TẠO
LANDING PAGE
THAO TÁC TẠO, BACKUP, RESTORE 1 LANDINGPAGE 100
Sau khi bấm vào nút “Tạo landing mới” thì sẽ xổ xuống 1 menu như hình dưới
PHẦN 2:
GIAO DIỆN CÁC CHỨC NĂNG
TRONG TRANG
THIẾT KẾ LANDINGPAGE
102
Nên chia Landing page thành nhiều Section để tiện cho việc quản lý và chỉnh sửa.
Phần chỉnh sửa giao diện Mobile sẽ tiện lợi hơn nếu giao diện được chia nhỏ.
Quản lý các Popup 105
Bấm vào đây để quản lý các Popup
Khi chia sẻ link landing page thì sẽ ảnh này sẽ hiện thị
Favicon là hình ảnh nhỏ xuất hiện trên cửa sổ trình duyệt
Đây là Tiêu đề nhé Ảnh nhỏ này là Favicon – kích thước hình vuông nhé, thường là 16px*16px
MENU BÊN PHẢI -> Thiết lập ->Mã chuyển đổi 111
114
THỰC HÀNH 2:
CHỨC NĂNG
LÊN TRÊN & XUỐNG DƯỚI
115
THỰC HÀNH 2:
THAY ĐỔI CẤU HÌNH FORM
116
TẠO TRANG
THANK YOU
VIDEO HƯỚNG DẪN: https://youtu.be/hzJOGZZ6L6g
117
CÀI ĐẶT MÃ CHUYỂN ĐỔI GOOGLE
VÀO LANDING PAGE
Cài Tiện ích Google Tag Assistant trên trình duyệt để kiểm tra
118
CÀI ĐẶT MÃ CHUYỂN ĐỔI
FACEBOOK
VÀO LANDING PAGE
Cài Tiện ích Facebook Pixel Helper trên trình duyệt để kiểm tra
119
CÀI ĐẶT MÃ
GOOGLE ANALYTICS
VÀO LANDING PAGE
120
Teachers open the doors,
but you must enter by
yourself!
121
QUY CHUẨN THIẾT KẾ LANDING PAGE CHO 9 NGÀNH HÀNG
F&B: http://ldp.to/0aGin
Mẹ - Bé: http://ldp.to/3WN4h
122
VIDEO HƯỚNG DẪN LÀM LADING PAGE TỪ A ĐẾN Z CỦA KT CITY
https://www.youtube.com/watch?v=V70UCpRFqxY
123
HƯỚNG DẪN MUA TÊN MIỀN VÀ TRỎ VỀ LADIPAGE
https://www.youtube.com/watch?v=kdczNLBqleY
124
HỌC HỎI TỪ CỘNG ĐỒNG LADIPAGE VIỆT NAM
https://www.facebook.com/groups/LadiPageVietnam
125
126
127
Hãy giữ liên lạc với Tôi
THANK YOU!