Landing page là gì? 7 phần bố cục một landing page hiệu quả

Landing page là gì: trang đích một mục tiêu mà người xem đến sau khi bấm quảng cáo, email hay link bio. Bài giải thích landing page khác website thế nào, các loại landing page, 7 phần bố cục từ hero, lợi ích, bằng chứng tới form và CTA cuối, kèm hai landing page mẫu do ColorME dựng có chú thích từng phần và checklist trước khi chạy quảng cáo.

Landing page là gì? Landing page (trang đích) là một trang web đứng riêng, nơi người xem "đáp xuống" sau khi bấm vào quảng cáo, email, link bio hay mã QR. Khác với website nhiều trang, một landing page chỉ có một mục tiêu: mời người xem làm đúng một việc như đăng ký, đặt lịch, tải tài liệu hoặc đặt hàng. Mọi phần trên trang, từ tiêu đề tới form, đều dẫn về hành động đó.

Bài này đi qua 7 phần bố cục của một landing page hiệu quả, kèm hai landing page mẫu do ColorME dựng bằng HTML/CSS (một trang tiệm hoa trên máy tính, một trang lò rang cà phê trên điện thoại), có chú thích từng phần. Muốn phác bố cục ngay khi đọc, mở công cụ Vẽ wireframe của ColorME: trong mục "Mẫu & tuỳ chỉnh" có sẵn mẫu Landing page để bắt đầu.

Website là cây nhiều nhánh, khách tự đi tìm. Landing page gom mọi nguồn (quảng cáo, email, link bio, mã QR) về một trang và một nút. (sơ đồ: ColorME)

Landing page là gì, hiểu cho đúng

Trong quảng cáo, định nghĩa gọn nhất đến từ bảng thuật ngữ của Google Ads: "Trang đích là trang web nơi mọi người đến sau khi nhấp vào quảng cáo của bạn" (Google Ads Trợ giúp, mục Trang đích). Theo nghĩa đó, bất kỳ trang nào nhận người bấm quảng cáo đều là trang đích, kể cả trang chủ.

Khi designer và marketer nói "làm một landing page", họ thường muốn nói hẹp hơn: một trang được thiết kế riêng cho một chiến dịch, bỏ bớt mọi thứ không phục vụ mục tiêu. Cùng một tiệm hoa có thể có website đầy đủ, nhưng mùa 20/11 lại chạy quảng cáo về một landing page chỉ để nhận đơn đặt trước. Thuật ngữ này cũng có trong thư viện thuật ngữ ColorME nếu bạn cần một định nghĩa ngắn để gửi khách hàng.

Google cũng nói rõ trang đích ảnh hưởng tới quảng cáo: trải nghiệm trang đích là một trong ba thành phần của Điểm chất lượng, cùng với tỉ lệ nhấp dự kiến và mức độ phù hợp của quảng cáo (Giới thiệu về Điểm chất lượng). Theo bảng thuật ngữ, trải nghiệm đó thể hiện qua "tính hữu ích và mức độ liên quan của thông tin được cung cấp trên trang, khả năng thao tác dễ dàng, số lượng đường liên kết trên trang" và kỳ vọng của người dùng dựa trên quảng cáo họ đã bấm. Nói cách khác: trang phải giữ đúng lời hứa của quảng cáo.

Các loại landing page thường gặp

Loại nào cũng dùng chung một khung bố cục. Khác nhau chủ yếu ở phần 5 (ưu đãi và form) và độ dài trang: sản phẩm càng cần suy nghĩ lâu thì trang càng cần nhiều bằng chứng và câu trả lời.

7 phần bố cục của một landing page hiệu quả

Hầu hết landing page tốt đi theo cùng một mạch: hứa hẹn, giải thích, chứng minh, mời làm ngay, gỡ băn khoăn, nhắc lại. Sơ đồ dưới chia mạch đó thành 7 phần, chiều cao mỗi khối theo đúng tỉ lệ landing page mẫu tiệm hoa ở phần sau.

Bảy phần từ trên xuống: hero, lợi ích, sản phẩm và cách hoạt động, bằng chứng, ưu đãi + form, câu hỏi thường gặp, CTA cuối kèm footer gọn. Nút vàng là hành động duy nhất của trang. (sơ đồ: ColorME)

1. Hero: màn hình đầu tiên

Hero là phần người xem thấy trước khi cuộn (vùng above the fold). Trong vài giây, nó phải trả lời ba câu: đây là gì, dành cho ai, tôi làm gì tiếp. Một hero đủ ý thường có:

• Tiêu đề nói lợi ích cụ thể, không chào hỏi. "Hoa 20/11 gói tay, giao tận cổng trường" tốt hơn "Chào mừng đến với tiệm hoa".
• Câu phụ giải thích cách hoạt động: chọn gì, khi nào nhận, ai liên hệ.
• Một nút CTA chính (call to action) ghi bằng động từ và kết quả: "Chọn mẫu và đặt trước", không phải "Gửi" hay "Xem thêm".
• Ảnh hoặc video thật của đúng thứ khách sẽ nhận.
• Một dòng tạo niềm tin ngay dưới nút: cam kết đổi trả, thời gian phản hồi, số khách đã phục vụ.

Hero của landing page mẫu: A tiêu đề, B câu phụ, C nút CTA chính, D dòng tin cậy, E thanh trên chỉ có logo và một nút, F ảnh sản phẩm. Landing page mẫu do ColorME dựng cho thương hiệu giả định "Nhà Sương". Ảnh hoa: Volodymyr Lymariev / Unsplash

Để ý thanh trên cùng (E): không có menu năm mục như website, chỉ có logo và một nút trùng với hành động chính. Mỗi đường dẫn thêm là một lối ra khỏi trang, và Google cũng nhắc tới "số lượng đường liên kết trên trang" khi đánh giá trải nghiệm trang đích.

2. Lợi ích, hoặc vấn đề của khách

Ngay sau hero, gọi tên nỗi khó mà khách đang gặp rồi đưa 3 lợi ích trả lời đúng nỗi khó đó. Viết bằng lời của khách, không bằng lời của người bán: "Không phải dậy sớm ra chợ hoa" dễ hiểu hơn "Dịch vụ giao hàng chuyên nghiệp". Ba thẻ ngang nhau là bố cục quen thuộc vì mắt đọc được cả ba trong một lần lướt.

3. Sản phẩm và cách hoạt động

Cho khách thấy họ nhận được gì: các mẫu, các gói, thông số chính, kèm một quy trình 3 bước ("Chọn mẫu, tiệm gọi xác nhận, nhận hoa"). Ảnh ở phần này nên chụp thật và cùng một phong cách ánh sáng để trang trông như của một thương hiệu, không như ghép từ nhiều nguồn.

4. Bằng chứng

Đây là phần trả lời câu "tại sao tôi nên tin?". Bằng chứng mạnh nhất là cụ thể: con số có mốc thời gian, đánh giá nói về một chi tiết, ảnh khách nhận hàng, tên đối tác hoặc báo chí nếu có thật. Chỉ dùng số liệu và đánh giá thật của chính bạn; một con số bịa có thể làm mất lòng tin của cả trang.

5. Ưu đãi và form

Phần này cho khách lý do làm ngay hôm nay: hạn chót, số lượng có hạn, quà kèm theo. Form càng ít ô càng tốt: chỉ hỏi thứ bạn thật sự cần để phục vụ bước tiếp theo. Ghi rõ điều khách lo nhất ngay gần nút, ví dụ "chưa cần chuyển khoản", và một dòng nói số điện thoại sẽ được dùng để làm gì.

Phần 4 đứng ngay trước phần 5: ba con số và ba đánh giá, rồi ưu đãi có hạn chót và form 4 ô. Số liệu trong mẫu là minh hoạ cho thương hiệu giả định; trên trang thật hãy dùng số của chính bạn. (landing page mẫu: ColorME)

6. Câu hỏi thường gặp

Gom 3 đến 5 băn khoăn khiến khách chần chừ: giao ở đâu, đổi trả thế nào, huỷ ra sao, mất bao lâu. Câu khó nhất có thể mở sẵn câu trả lời. FAQ cũng là chỗ tốt để đặt các thông tin phụ mà không làm hero nặng thêm.

7. CTA cuối và footer gọn

Người đọc tới cuối trang là người đang cân nhắc thật. Nhắc lại lời mời bằng đúng nút ở phần 1, có thể thêm một chi tiết thời gian ("còn 18 ngày đến 20/11"). Footer chỉ cần tên thương hiệu, chính sách cần thiết và thông tin liên hệ bắt buộc, không mở thêm một bản đồ trang.

Xem cả trang: landing page mẫu tiệm hoa 20/11

Ghép 7 phần lại, đây là toàn bộ landing page mẫu "Nhà Sương", một tiệm hoa giả định nhận đặt trước hoa 20/11. Trang dài khoảng 4.700 px ở bề rộng 1280 px, nhưng chỉ có một hành động: đặt trước. Nút vàng xuất hiện ở hero và ở cuối trang; nút trong form mang màu nền xanh của thương hiệu để nổi trên thẻ trắng.

Toàn trang landing page mẫu, đánh số theo 7 phần. Landing page do ColorME dựng bằng HTML/CSS cho thương hiệu giả định "Nhà Sương". Ảnh hoa trên Unsplash: Volodymyr Lymariev, Aniki Photos, Farid Zandi, Anya Chernykh, Cody Chan

Vài lựa chọn đáng để ý khi bạn tự làm: các phần giới thiệu dùng nền sáng, còn phần 1, 5 và 7 (những chỗ có nút) dùng nền xanh đậm, nên khi cuộn nhanh mắt vẫn nhận ra đâu là chỗ cần hành động. Tiêu đề dùng một kiểu chữ serif, nội dung dùng một kiểu sans, và chỉ có một màu nhấn. Tất cả chữ trên nền xanh đều là trắng hoặc vàng sáng để đủ tương phản.

Landing page trên điện thoại

Người bấm quảng cáo trên mạng xã hội thường đang cầm điện thoại, nên hãy thiết kế bản điện thoại trước rồi mới mở rộng ra máy tính. Landing page mẫu thứ hai, lò rang giả định "Mây Ngàn" ở Đà Lạt, được dựng cho màn hình 390 px:

Cùng một landing page ở ba vị trí cuộn trên màn hình 390 px: hero, bằng chứng, form giữ chỗ. Thanh dưới cùng luôn hiện nút "Giữ chỗ". Landing page mẫu do ColorME dựng cho thương hiệu giả định "Mây Ngàn". Ảnh: Ryan Wallace / Unsplash

• Một cột, chữ to: tiêu đề hero ở mẫu này cỡ 44 px, nội dung 15 đến 16 px.
• Nút luôn trong tầm ngón cái: nút rộng hết cột ở hero, và một thanh cố định ở đáy màn hình nhắc lại hành động khi khách đã cuộn qua.
• Form chạm thay vì gõ: câu hỏi "Bạn hay pha bằng" dùng các nút chọn, chỉ hai ô cần gõ.
• Tải nhanh: theo web.dev của Google, thời gian hiển thị nội dung lớn nhất (LCP) tốt là từ 2,5 giây trở xuống (web.dev, LCP). Ảnh hero thường chính là phần tử lớn nhất đó, nên hãy nén ảnh trước khi đưa lên, ví dụ bằng công cụ Nén ảnh của ColorME.

Lỗi hay gặp nhất: làm landing page như một trang chủ thu nhỏ

Cách dễ thấy nhất để hiểu landing page là đặt nó cạnh một trang chủ. Hai màn hình dưới cùng thương hiệu, cùng ảnh, cùng bảng màu. Bên trái là kiểu màn hình đầu hay gặp khi lấy trang chủ làm trang đích quảng cáo; bên phải là hero của landing page.

Trước: lời chào chung chung, 7 mục menu, 3 nút ngang nhau. Sau: tiêu đề là lời hứa, một nút, số lượng và thời điểm rõ ràng. Cả hai đều là mẫu do ColorME dựng. Ảnh: Ryan Wallace / Unsplash

Những lỗi khác nên kiểm tra trước khi chạy quảng cáo:

• Quảng cáo hứa một đằng, trang nói một nẻo: quảng cáo ghi "hộp nếm thử", trang lại mở bằng giới thiệu công ty.
• Nhiều nút cạnh tranh nhau: "Đặt hàng", "Tư vấn", "Xem thêm" cùng màu cùng cỡ. Chọn một nút chính; nút phụ làm thành đường dẫn chữ.
• Form hỏi quá nhiều: email, địa chỉ, ngày sinh cho một lần đăng ký nhận tin.
• Chữ trên ảnh không đọc được: theo WCAG, chữ thường cần tương phản ít nhất 4.5:1 với nền, chữ lớn ít nhất 3:1 (W3C, Contrast Minimum). Kiểm tra nhanh bằng công cụ Kiểm tra độ tương phản của ColorME.
• Không đo: không gắn đo lường chuyển đổi thì không biết trang nào tốt hơn để sửa.

Cách làm một landing page từ đầu

1. Chốt một mục tiêu và một người xem. Viết ra: "Ai, đến từ đâu, cần làm gì trên trang". Nếu có hai mục tiêu, làm hai landing page.
2. Viết nội dung trước khi vẽ. Tiêu đề, 3 lợi ích, bằng chứng, câu hỏi thường gặp. Bố cục đẹp không cứu được một lời hứa mơ hồ.
3. Phác wireframe. Xếp 7 phần bằng khối xám để thống nhất thứ tự trước khi lo màu và chữ (xem thêm wireframe là gì).
4. Thiết kế giao diện trên Figma hoặc phần mềm bạn quen, bắt đầu từ bản điện thoại. Nếu mới làm quen Figma, bài Figma là gì là điểm khởi đầu tốt; muốn đi tiếp thành bản bấm thử được, xem prototype là gì.
5. Dựng trang bằng trình tạo trang kéo thả, WordPress, Webflow, Framer hoặc nhờ lập trình viên. Kiểm tra trên điện thoại thật trước khi chạy quảng cáo.
6. Đo, sửa, thử lại. Theo dõi tỉ lệ chuyển đổi, đổi từng thứ một (tiêu đề, ảnh hero, chữ trên nút) và so sánh. Quy trình nghiên cứu, thử nghiệm và nâng cấp được nói kỹ hơn trong bài cách xây dựng một landing page hiệu quả.

Ở bước 3, công cụ Vẽ wireframe của ColorME có mẫu Landing page: bấm "Mẫu & tuỳ chỉnh", chọn "Landing page", rồi kéo thêm khối từ bộ khối (Thẻ, Danh sách, Ô nhập, Nút) để đủ 7 phần. Mẫu có sẵn chỉ là phần mở đầu gồm tiêu đề, đoạn văn, nút, ảnh và một thẻ tính năng; các phần còn lại bạn tự thêm. Có thể chuyển giữa khung Điện thoại (390 × 844), Máy tính bảng và Máy tính (1440 × 1024), tải PNG hoặc tải SVG để mở bằng Figma. Trang công cụ ghi: "Có, miễn phí, không cần đăng nhập." và "Bản vẽ tự lưu trong trình duyệt trên máy bạn, mở lại trang là thấy."

Mẫu "Landing page" trong công cụ Vẽ wireframe, khung Điện thoại 390 × 844, bảng "Mẫu & tuỳ chỉnh" đang mở. Ảnh chụp màn hình công cụ của ColorME, chưa đăng nhập, ngày 02/11/2026.

Checklist landing page trước khi chạy quảng cáo

Landing page là bài tập rất hay để học thiết kế giao diện vì nó buộc bạn sắp xếp nội dung theo mục tiêu, không theo sở thích. Nếu muốn học bài bản từ wireframe tới giao diện hoàn chỉnh trên Figma, tham khảo khoá học Thiết kế UI/UX của ColorME.

Câu hỏi thường gặp về landing page

Landing page là gì, nói ngắn gọn?

Landing page (trang đích) là trang người xem đến sau khi bấm quảng cáo, email hay một đường dẫn chiến dịch. Trang được thiết kế cho một mục tiêu duy nhất, như đăng ký, đặt lịch hay đặt hàng.

Landing page khác website như thế nào?

Website có nhiều trang và menu để khách tự khám phá thương hiệu. Landing page thường chỉ là một trang, rất ít đường dẫn ra ngoài, và mọi phần đều dẫn về một hành động; hiệu quả được đo bằng tỉ lệ người xem làm hành động đó.

Một landing page cần những phần nào?

Khung quen thuộc gồm 7 phần: hero, lợi ích, sản phẩm và cách hoạt động, bằng chứng, ưu đãi kèm form, câu hỏi thường gặp, CTA cuối với footer gọn. Trang cho sản phẩm đơn giản có thể gộp hoặc bỏ bớt, nhưng hero, bằng chứng và CTA thì nên giữ.

Landing page có nên có menu không?

Thường là không, hoặc chỉ giữ logo và một nút trùng với hành động chính. Mỗi đường dẫn thêm là một lối ra khỏi trang; nếu nội dung dài, có thể dùng vài liên kết nhảy tới các phần ngay trong trang.

Landing page dài hay ngắn thì tốt hơn?

Tuỳ quyết định của khách nặng hay nhẹ. Đăng ký nhận tin cần một trang ngắn; một gói dịch vụ hay một khoá học cần trang dài hơn với nhiều bằng chứng và câu trả lời. Cách chắc nhất là làm hai phiên bản và đo.

Làm landing page bằng công cụ gì?

Phác bố cục bằng giấy bút hoặc công cụ wireframe, thiết kế giao diện trên Figma, rồi dựng bằng trình tạo trang kéo thả, WordPress, Webflow, Framer hoặc nhờ lập trình viên viết code. Chọn công cụ cho phép bạn sửa nhanh và gắn đo lường dễ dàng.