Hướng dẫn thiết kế 1 Landing Page hoàn chỉnh trên AMIS aiMarketing

Nội dung

1. Tổng quan

Bài viết này hướng dẫn cách tạo và thiết kế một Landing page hoàn chỉnh, từ việc bắt đầu với một trang trắng hoặc lựa chọn các template có sẵn, cho đến việc tùy chỉnh các phần tử để phù hợp với mục tiêu cụ thể của bạn. Ngoài ra, chúng tôi cũng sẽ chỉ ra cách tối ưu hóa giao diện cho cả phiên bản desktop và mobile đồng thời chia sẻ những mẹo thiết kế hữu ích để bạn tận dụng tối đa nền tảng aiMarketing trong việc xây dựng Landing page hiệu quả.

Nội dung bài viết bao gồm:

Cách thiết kế, tạo một Landing Page.
Hướng dẫn tùy chỉnh Landing Page trên giao diện desktop/ mobile.
Những lỗi thường gặp khi thiết kế Landing Page.
Một số lưu ý khi thiết kế, tạo Landing Page.

2. Hướng dẫn thực hiện

2.1. Tạo mới Landing Page

Cách 1: Tạo landing page từ trang trắng

Bước 1: Trên AMIS aiMarketing, vào phân hệ Landing page

Bước 2: Nhấn Tạo Landing page

Bước 3: Chọn Tạo từ trang trắng nếu muốn tự thiết kế bố cục, màu sắc và nội dung

Bước 4: Tại giao diện Landing page trắng, kéo thả các phần tử như: Hình ảnh, Tiêu đề, Đoạn văn bản, Nút bấm, Video… vào vị trí mong muốn.

Bước 5: Sau khi thêm các phần tử cơ bản, tùy chỉnh chúng theo nhu cầu của mình bằng cách chỉnh sửa nội dung, thay đổi màu sắc, phông chữ, kiểu chữ, cỡ chữ… và điều chỉnh các thuộc tính như kích thước, khoảng cách, đổ góc, chỉnh sửa viền và bo góc.

Xem hướng dẫn thiết kế, chỉnh sửa phần tử với thanh thiết kế nhanh tại đây

Bước 6: Có thể thêm các section mẫu để tiết kiệm thời gian, đơn giản hóa quy trình thiết kế Landing Page.

Xem hướng dẫn thêm section tại đây.

Cách 2: Chọn từ template có sẵn

Bước 1: Trên AMIS aiMarketing, vào phân hệ Landing page

Bước 2: Nhấn Tạo Landing page

Bước 3: Tìm các mẫu Landing page đúng theo lĩnh vực ngành nghề đang cần

Sử dụng tính năng “Xem trước” để xem qua các Landing page trước khi đưa vào sử dụng.

Bước 4: Nhấn “Sử dụng” để bắt đầu chỉnh sửa.

Bước 5: Tại giao diện Landing page trắng, kéo thả các phần tử như: Hình ảnh, Tiêu đề, Đoạn văn bản, Nút bấm, Video… vào vị trí mong muốn.

Bước 6: Sau khi thêm các phần tử cơ bản, tùy chỉnh chúng theo nhu cầu của mình bằng cách chỉnh sửa nội dung, thay đổi màu sắc, phông chữ, kiểu chữ, cỡ chữ… và điều chỉnh các thuộc tính như kích thước, khoảng cách, đổ góc, chỉnh sửa viền và bo góc.

Xem hướng dẫn thiết kế, chỉnh sửa phần tử với thanh thiết kế nhanh tại đây

Bước 7: Có thể thêm các section mẫu để tiết kiệm thời gian, đơn giản hóa quy trình thiết kế Landing Page.

Xem hướng dẫn thêm section tại đây.

2.2. Tối ưu Landing Page trên giao diện desktop/ mobile

Tập trung thiết kế trên một màn hình trước

Khi thiết kế một Landing page trên nền tảng aiMarketing, style của phần tử (màu sắc, kích thước, font chữ, v.v.) sẽ ưu tiên theo màn hình đầu tiên chỉnh sửa. Điều này có nghĩa là khi thêm một phần tử vào trang và chưa chỉnh sửa style cho phần tử đó trên phiên bản Mobile, sau đó chuyển sang chỉnh sửa trên Desktop, thì style của phần tử sẽ áp dụng theo thiết lập đã chỉnh sửa trên Desktop, ngay cả khi quay lại phiên bản Mobile.

Ví dụ:

- Khi thêm một Button A vào phiên bản Mobile mà chưa chỉnh sửa style.

- Tiếp theo, chuyển sang phiên bản Desktop và điều chỉnh style của Button A (màu sắc, kích thước, font chữ).

- Khi quay lại phiên bản Mobile, Button A sẽ giữ nguyên style đã chỉnh sửa trên Desktop, không dùng style mặc định của Mobile.

⇒ Vì vậy, nên tập trung thiết kế trên một màn hình trước: Để tránh nhầm lẫn và đảm bảo tính đồng bộ giữa các phiên bản, hãy bắt đầu với phiên bản màn hình lớn (Desktop) và hoàn thiện thiết kế ở đó. Sau đó, có thể chuyển sang Mobile để điều chỉnh cho phù hợp với kích thước màn hình nhỏ hơn.

Đồng bộ nội dung giữa các phiên bản Desktop và Mobile

Khi thêm hoặc xóa một phần tử trên giao diện Landing page ở một chế độ (web hoặc mobile), phần tử đó sẽ tự động được đồng bộ hóa và hiển thị (hoặc bị xóa) ở chế độ còn lại. Điều này đảm bảo sự nhất quán trong nội dung giữa hai phiên bản giao diện, giúp không phải lặp lại thao tác thêm hoặc xóa ở từng chế độ riêng lẻ. Quy tắc này áp dụng cho mọi phần tử trên trang Landing page.

Ví dụ: 1 button Xem thêm trên phiên bản Desktop thì button này cũng sẽ được hiển thị trên phiên bản mobile. Nếu đổi nội dung của Button từ “Xem thêm” thành “Tìm hiểu ngay,” cả Desktop và Mobile đều sẽ cập nhật.

Tùy chỉnh Style và Vị trí riêng biệt cho Desktop và Mobile

Trên nền tảng aiMarketing, có thể tùy chỉnh Style (màu sắc, cỡ chữ, hình nền, …) và Vị trí của các phần tử trên giao diện Desktop và Mobile một cách độc lập mà không ảnh hưởng đến phiên bản còn lại.

Trên giao diện Desktop, đặt button Xem thêm ở bên phải màn hình.

Khi chuyển sang giao diện Mobile, có thể kéo nút này vào giữa màn hình để phù hợp với thiết kế dọc của điện thoại mà không làm thay đổi vị trí nút trên Desktop.

Trên Desktop, nút Button có màu xanh đậm với kích thước chữ lớn hơn để phù hợp với màn hình lớn.

Trên Mobile, thay đổi màu nút sang xanh nhạt và giảm kích thước chữ để nút hiển thị gọn gàng hơn trên màn hình nhỏ.

Tính năng “Tự động sắp xếp mobile” sau khi thiết kế Landing page hoàn chỉnh trên phiên bản web

Đầu tiên, thiết kế và chỉnh sửa Landing page hoàn chỉnh trên phiên bản Desktop (bao gồm vị trí, kích thước, và bố cục của các phần tử như hình ảnh, văn bản, nút bấm, v.v.). Sau khi hoàn thành phiên bản Desktop, chuyển chế độ sang Mobile.

Khi chuyển sang chế độ Mobile, chọn vào từng section và chọn tính năng “Tự động sắp xếp Mobile” để tự động căn chỉnh các phần tử trên trang sao cho phù hợp với màn hình nhỏ. Tính năng này sẽ giúp phần tử tự động thay đổi kích thước, vị trí, và chiều dài sao cho phù hợp với không gian màn hình di động, giúp Landing page trông gọn gàng và dễ sử dụng trên điện thoại.

Sau khi sử dụng tính năng “Tự động sắp xếp Mobile“, nếu cảm thấy kết quả không vừa ý hoặc không phù hợp với yêu cầu thiết kế của mình, có thể sửa lại vị trí của các phần tử bằng cách kéo và thả chúng vào vị trí mong muốn.

2.3. Những lỗi thường gặp khi thiết kế Landing Page

Tình huống 1:

Trên phiên bản Desktop, tạo một phần tử (ví dụ: một nút hoặc hình ảnh), sau đó chuyển sang phiên bản Mobile, thay vì sử dụng lại phần tử đã tạo, ẩn phần tử đó và tạo một phần tử mới giống hệt trên Mobile để chỉnh sửa và kéo thả vị trí.

⇒ Giải pháp đúng:

Chỉ nên sử dụng một phần tử duy nhất cho cả hai phiên bản (Desktop và Mobile).
Kéo và thả phần tử để thay đổi vị trí cho phù hợp với phiên bản Mobile.
Chỉnh style riêng biệt (màu sắc, kích thước, vị trí, …) cho phần tử ở mỗi phiên bản.

Tình huống 2:

Khi bạn kéo một phần tử (như nút, hình ảnh, hoặc văn bản) ra ngoài phạm vi của Section chứa nó, phần tử đó sẽ mất các thiết lập responsive (bao gồm vị trí, kích thước, hoặc cách hiển thị trên các kích thước màn hình khác nhau).

Ví dụ minh họa:

Bước 1: Bạn có một nút “Đăng ký ngay” trong Section A, và nút này được căn giữa trên phiên bản Desktop và nằm dưới cùng trên phiên bản Mobile.
Bước 2: Nếu bạn kéo nút này ra ngoài Section A, nút sẽ không còn các thiết lập responsive ban đầu, có thể bị hiển thị lệch hoặc sai vị trí trên phiên bản Mobile.
Bước 3: Để di chuyển, hãy giữ nút trong phạm vi Section A và điều chỉnh vị trí thông qua các công cụ chỉnh sửa trong Section đó.

⇒ Giải pháp đúng:

Chỉ kéo thả phần tử trong phạm vi của Section chứa nó: Đảm bảo rằng mọi chỉnh sửa vị trí đều được thực hiện bên trong Section mà phần tử thuộc về

Tình huống 3:

Các phần tử được sắp xếp hợp lý trong khung thiết kế Mobile.
Bố cục không bị vỡ hoặc xuất hiện phần tử vượt ra ngoài vùng hiển thị của thiết bị.

2.4. Một số lưu ý khi thiết kế Landing page trên aiMarketing

Khi thiết kế Text trên Landing page, nên chừa thêm một khoảng rộng nhỏ trong khung chứa Text (Text Box) để tránh tình trạng xuống dòng không mong muốn trên một số thiết bị. Nguyên nhân do các thiết bị khác nhau có thể hiển thị Text Width (chiều rộng của đoạn văn bản) khác nhau, dẫn đến lỗi giao diện khi nội dung không vừa khung.

Tính năng ẩn/hiện phần tử nên được sử dụng hạn chế và chỉ khi nội dung giữa các phiên bản thực sự khác biệt.

Thiết kế phần trên của trang web trước, sau đó thiết kế dần xuống: Bắt đầu từ phần trên cùng (Header, Hero Section) để tạo ấn tượng ban đầu mạnh mẽ và định hướng nội dung. Sau đó, thiết kế các phần nội dung chi tiết dần xuống dưới để dẫn dắt người dùng theo mạch câu chuyện.

Thiết kế dóng theo phía trái trước, rồi mới sang phía phải màn hình: Bố cục từ trái sang phải phù hợp với thói quen đọc và duyệt web tự nhiên của người dùng. Hoàn thiện các phần tử ở phía trái trước giúp bố cục rõ ràng, tránh việc phải điều chỉnh nhiều khi hoàn thiện toàn bộ hàng hoặc cột.

Group các phần tử trước khi di chuyển nhiều phần tử cùng lúc: Khi cần di chuyển nhiều phần tử, nhóm (group) các phần tử lại trước để di chuyển đồng loạt. Điều này giúp:

- - Giữ nguyên khoảng cách và bố cục giữa các phần tử.
  - Tiết kiệm thời gian điều chỉnh từng phần tử riêng lẻ.
  - Đảm bảo tính đồng nhất khi di chuyển cả nhóm.

2.5 Câu hỏi thường gặp (Q&A) khi thiết kế Landing Page trên nền tảng AMIS aiMarketing

– Có cách nào tối ưu tốc độ tải trang không?

Giải đáp:

Hạn chế sử dụng hình ảnh và video có dung lượng lớn. Nên nén ảnh trước khi tải lên để tối ưu tốc độ.

Chọn định dạng hình ảnh phù hợp: Sử dụng định dạng WebP hoặc JPEG thay vì PNG cho hình ảnh có nhiều màu sắc và chi tiết, giúp giảm dung lượng mà vẫn giữ chất lượng hình ảnh.

Giảm kích thước hình ảnh: Sử dụng công cụ như TinyPNG, ImageOptim để nén hình ảnh mà không làm giảm chất lượng quá nhiều. Hình ảnh nặng sẽ làm chậm tốc độ tải trang.

Sử dụng các mẫu Section có sẵn thay vì thiết kế phức tạp từ đầu để giảm thiểu mã nguồn dư thừa.

Rà soát và loại bỏ các phần tử ẩn không cần thiết để giảm tải cho trang web.

– Làm sao để tạo liên kết đến một phần tử cụ thể trên trang?

Giải đáp:

B1: Chọn phần tử (tiêu đề, hình ảnh, nút bấm, v.v.) muốn tạo liên kết.

B2: Trong phần thiết lập, chuyển sang tab “Sự kiện” và chọn “Chuyển đến phần tử”.

B3: Chọn phần tử đích làm điểm đến.

Ví dụ: Khi khách hàng nhấp vào nút “Đặt tour ngay”, trang sẽ cuộn đến section chứa form đặt tour trong Landing Page.

– Làm sao để chỉnh sửa bố cục mà không làm hỏng cấu trúc hiện tại?

Giải đáp:

Sử dụng tính năng Group để nhóm các phần tử liên quan trước khi di chuyển hoặc chỉnh sửa.

Khi cần thay đổi thứ tự, hãy thao tác trên các Section thay vì chỉnh sửa từng phần tử riêng lẻ để tránh xáo trộn bố cục. Giả sử bạn có một Landing Page với các Section như sau:

- Section 1: Tiêu đề + Mô tả.
- Section 2: Hình ảnh sản phẩm.
- Section 3: CTA (Call to Action).

Nếu muốn đổi vị trí của Section 2 và Section 3:

Sử dụng mũi tên di chuyển Section lên/xuống: Bạn chỉ cần kéo Section 2 xuống dưới Section 3, và toàn bộ phần tử bên trong (hình ảnh, mô tả, nút CTA) sẽ tự động di chuyển theo một cách nguyên vẹn, không làm xáo trộn bố cục.

– Làm thế nào để kiểm tra Landing page trước khi xuất bản?

Giải đáp:

Sử dụng tính năng Xem trước (Preview) để kiểm tra giao diện trên cả Desktop và Mobile.

Kiểm tra các liên kết, nút bấm, và tốc độ tải trang để đảm bảo tất cả hoạt động tốt.

– Làm sao để kiểm tra và tối ưu hóa Landing Page cho SEO?

Tiêu đề trang (Title tag): Đảm bảo tiêu đề của trang có chứa từ khóa chính và hấp dẫn người dùng. Tiêu đề nên có độ dài từ 50-60 ký tự.Tối ưu hóa các yếu tố On-page SEO

Mô tả meta (Meta Description): Mô tả ngắn gọn về nội dung trang, chứa từ khóa chính và khuyến khích người dùng nhấp vào. Độ dài lý tưởng từ 150-160 ký tự. Tìm hiểu thêm chi tiết về cách thiết lập trang landing page tại đây.

Thẻ heading (H1, H2, H3…): Đảm bảo thẻ H1 chứa từ khóa chính và chỉ xuất hiện một lần trên mỗi trang. Các thẻ H2, H3 có thể sử dụng để phân cấp các nội dung phụ liên quan đến từ khóa phụ.

Đặt tên file hình ảnh trong landing page có ý nghĩa, chứa từ khóa.

Ví dụ:

- - Tên file không tối ưu: img1234.jpg
  - Tên file tối ưu: thuyen-du-lich-trang-an-ninh-binh.jpg

Tối ưu hóa URL

- Đơn giản và dễ đọc: URL nên ngắn gọn, dễ hiểu và chứa từ khóa chính. Tránh sử dụng ký tự đặc biệt hoặc các dãy số không có ý nghĩa. Ví dụ: /landing-page-cach-thiet-ke thay vì /page1/abcd1234.
- Sử dụng dấu gạch ngang (-): Chia các từ trong URL bằng dấu gạch ngang thay vì dấu gạch dưới (_) để Google dễ dàng đọc và hiểu các từ.

Bài viết này hữu ích chứ?

Có Không