Tự tay thiết kế landing page chuyên nghiệp (aladi cookbook)

TỰ TAY THIẾT KẾ LANDING PAGE
CHUYÊN NGHIỆP


Tự tay thiết kế landing page chuyên nghiệp | 2

I.

Bắt đầu với ALADI:
1. Mua tên miền từ Aladi:
● Đây là nơi để bạn mua tên miền trên nền tảng ALADI. Ở đây có rất
nhiều tên miền khác nhau để bạn lựa chọn Và việc mua nó cũng
rất đơn giản (Xem hình 1 và 2).

Hình 1 - Tìm mua tên miền phù hợp

Hình 2 - Điền thơng tin chủ thể tên miền và Tiến hành đăng ký


Tự tay thiết kế landing page chuyên nghiệp | 3
2. Nạp tiền vào tài khoản:
● Việc nạp tiền vào tài khoản để mua tên miền hoặc nâng cấp gói là
hồn tồn tự động. Bạn vui lịng chuyển khoản đúng cú pháp nhé!
(Xem hình 3)

Hình 3 - Nạp tiền vào tài khoản để mua tên miền
3. Thêm tên miền vào tài khoản của bạn:
● Sau khi mua tên miền thành công, bạn hãy cài đặt tên miền vào
Aladi như bên dưới (Lưu ý, bạn phải mua và thanh toán tên miền
trước khi làm bước nàyy) (Xem hình 4 và 5)

Hình 4 - Thêm tên miền vào tài khoản Aladi


Tự tay thiết kế landing page chuyên nghiệp | 4

Hình 5 - Xác thực tên miền và cài đặt bảo mật SSL
● Nếu bạn mua tên miền bên ngoài, bạn cũng thêm bằng cách như
trên, nhưng bạn phải trỏ tên miền của bạn về Aladi theo thơng tin
như hình 6

Hình 6 - Trỏ IP tên miền về ALADI


Tự tay thiết kế landing page chuyên nghiệp | 5
4. Nâng cấp tài khoản:
● Trước khi nâng cấp tài khoản, bạn hãy chắc chắn rằng tiền đã
được nạp vào tài khoản theo như hướng dẫn ở mục số 2 (phần I)
● Việc nâng cấp tài khoản, bạn thực hiện theo trình tự như hình 7

Hình 7 - Nâng cấp tài khoản
5. Nhờ hỗ trợ:
● Khi gặp khó khăn, cần hỗ trợ vui lòng nhắn tin ở hộp thư thoại “Hỗ
trợ online” phía góc phải dưới cùng như hình 8

Hình 8 - Hộp thư Hỗ trợ online


Tự tay thiết kế landing page chuyên nghiệp | 6
II.

Thiết kế Landing Page Cùng Aladi:
1. Chọn mẫu:
● Có 2 cách để tạo trang landing page: 1 là tạo bằng trang trống, 2 là
chọn giao diện mẫu. Bạn chỉ cần làm theo như hình 9 để biết cách
chọn trang phù hợp.

Hình 9 - Chọn mẫu trang landing page
● Sau khi đã chọn được mẫu ưng ý thì bạn chỉ việc làm theo như
hình 10

Hình 10 - Đặt tên landing page và gắn tag
● Tiếp theo là quản lý trang landing page. Xem hình 11 để hiểu rõ
hơn cách sử dụng


Tự tay thiết kế landing page chuyên nghiệp | 7

Hình 11 - Quản lý landing page
2. Bố cục của landing page:
● 1 landing page gồm 3 phần chính: Section → Cột → Phần tử. Được
hiển thị như hình 12
● 1 section có thể gồm 1 cột hoặc nhiều cột và 1 cột có thể gồm 1
phần tử hoặc nhiều phần tử

Hình 12 - Bố cục 1 landing page


Tự tay thiết kế landing page chuyên nghiệp | 8

Hình 13 - Bên trong trang chỉnh sửa landing page

3. Tạo Section:
3.1.
Section là gì:
Section là một đoạn nội dung trên Landing Page. Mỗi đoạn nội
dung có một ý nghĩa riêng và kết hợp với nhau thành một chuỗi
nội dung có tính thuyết phục cao.
3.2. Nội dung thường dùng trong section:
● Giới thiệu (Intro)
● Nội dung chi tiết
● Đặc điểm nổi bật
● Chứng nhận & cam kết
● Ý kiến khách hàng
● Lợi ích khách hàng
● FAQ
● Đội nhóm
● Bảng giá
● Call-To-Action (CTA): nút kêu gọi hành động
● Form đăng ký
● Lời cảm ơn
● Footer (Chân trang)
3.3. Cách tạo section:
● Có 3 cách tạo section, đó là: từ các giao diện mẫu, từ Mẫu đã
lưu của bạn hoặc do bạn tạo section trống.
● Để bắt đầu tạo mới một Section, bạn nhấn vào vị trí bất kỳ
của section, sau đó nhấn dấu + và chọn mẫu section từ Kho
giao diện hoặc trang trống tùy vào nhu cầu của bạn


Tự tay thiết kế landing page chuyên nghiệp | 9

Hình 14 - Cách tạo section mới
● Nếu bạn lựa chon Section từ kho giao diện, bạn sẽ nhận
được rất nhiều mẫu đẹp, và bạn dễ dàng tùy biến chúng
(Xem hình 15)

Hình 15 - Hiển thị mẫu section trong kho giao diện
3.4.
●
●
●
●

Cách chỉnh sửa section:
Khi muốn chỉnh sửa section, bạn hãy xem hình 16
Tạb Layout: dùng để chỉnh sửa độ rộng của section, khoảng
cách các cột trong section, chiều cao section…
Tab Kiểu: dùng để thay ảnh nền, thay màu nền, chọn hiệu
ứng nền section,...
Tab Nâng cao: dùng để chỉnh sửa margin, padding, hiệu
ứng chuyển động…


Tự tay thiết kế landing page chuyên nghiệp | 10
Hình 12c

Hình 16 - Chỉnh sửa và cài đặt section
4. Tạo Popup:
● Popup là gì? Popup là một cửa sổ hiện ra thu nhỏ hiện đè
lên trên trang hiện tại. Bạn có thể tùy chỉnh nội dung cho
Popup tùy mục đích.

● Các dạng nội dung Popup thường gặp:
+ Popup cảm ơn
+ Popup đăng ký
+ Popup lời chào
+ Popup nội dung chi tiết
● Cách tạo Popup: Xem video sau:
5. Phần tử - Heading/ Text:
● Heading/Text: cho phép bạn tạo ra các dạng Tiêu đề/ văn
bản cho landing page của bạn.
● Cách thêm Heading/Text rất đơn giản, bạn chỉ cần gõ từ
khóa “Heading” hoặc “Text” sau đó chọn phần tử phù hợp là
được. Xem hình 17


Tự tay thiết kế landing page chuyên nghiệp | 11

Hình 17 - Chọn heading/ Text để thêm vào section
6. Phần tử - Hình ảnh/Video:
● Để thêm mới hình ảnh/video, bạn chỉ cần bạn chỉ cần gõ từ
khóa “Hình ảnh” hoặc “Video” sau đó chọn phần tử phù hợp
là được. Xem hình 18.

Hình 18 - Chọn Hình ảnh/Video để thêm vào section
7. Phần tử - Nút bấm (Button - CTA):
6.1.
Nút bấm là gì? Chính là Nút kêu gọi hành động hay viết tắt
là CTA (Call-to-Action), nó được tạo ra để khách hàng nhấn
vào đăng ký/mua hàng hoặc theo mục đích của bạn.
6.2. Cách tạo Nút bấm: Xem hình 19

Tự tay thiết kế landing page chuyên nghiệp | 12

Hình 19 - Tạo nút bấm
8. Phần tử - Biểu tượng (Icon): để tạo hình hộp, biểu tượng/ icon,...
bạn xem hình 20

Hình 20 - Tạo biểu tượng/icon


Tự tay thiết kế landing page chuyên nghiệp | 13
9. Phần tử - Form/Biểu mẫu: Để tạo form/Biểu mẫu, bạn xem hình
21

Hình 21 - Tạo form/biểu mẫu
10. Ẩn/ Hiện section/ phần tử: Là tính năng giúp bạn ẩn các đoạn
nội dung, và chỉ hiển thị khi click vào nút bấm tương ứng: Để
thực hiện, bạn làm theo bước sau: Chọn Phần tử muốn ẩn → Chọn
tab Nâng cao → Chọn mục Responsive → Bật nút Ẩn trên thiết bị
nào mà bạn muốn. Xem hình 22

Hình 22 - Ẩn/Hiện phần tử


Tự tay thiết kế landing page chuyên nghiệp | 14
III.

Xuất bản và tối ưu landing page:
● SEO: Khi bạn muốn đặt tên cho landing page, thêm từ khóa,
mơ tả về landing page cũng như đổi favicon và hình đại diện

thu nhỏ thì xem hình 23 và 24

Hình 23 - Cài đặt và thiết lập thơng tin cho Landing page

Hình 24 - Thiết lập SEO cho landing page
● Tracking: là mã theo dõi hành vi khách hàng. Punnel cho phép
bạn chèn mã tracking ID vào Facebook Pixel, Tiktok Pixel,
Google Analytics, Google Ads và Google Tag. Để cài đặt mã
theo dõi, bạn xem hình 23 và 25


Tự tay thiết kế landing page chuyên nghiệp | 15

Hình 25 - Cài đặt mã theo dõi/ tracking