🎯 Mục tiêu

Sau bài này, khách hàng sẽ:

  • Biết dùng Icon List (Danh sách biểu tượng) để liệt kê tính năng/dịch vụ.

  • Biết tạo bảng giá (Pricing table) dạng 2–3 cột.

  • Làm được 1 trang Dịch vụ hoặc Gói giá đẹp mắt, dễ so sánh.


📝 Nội dung hướng dẫn

1. Tạo danh sách tính năng với Icon List

  • Kéo widget Danh sách Icon vào cột.

  • Nhập từng dòng: “✔ Hỗ trợ 24/7”, “✔ Giao diện chuẩn SEO”, “✔ Tối ưu tốc độ”.

  • Có thể đổi icon (dấu check, ngôi sao, dấu cộng…).

  • Chỉnh màu icon xanh lá → tạo cảm giác tích cực.

Kéo widget Danh sách Icon vào cột.
Vào tab Nội dung và chọn các mục để điền văn bản và thay biểu tượng.

 

Chỉnh màu cho biểu tượng (icon).

2. Tạo Bảng giá cơ bản

  • Kéo widget Price Table (Elementor Pro) hoặc dựng thủ công bằng Heading + Text + Button.

  • Trong Price Table:

    • Title (Tiêu đề) = Gói Cơ bản.

    • Price (Giá) = 5,000,000 VNĐ.

    • Features List (Danh sách tính năng) = 5–6 dòng tính năng.

    • Button (Nút) = Đăng ký ngay.

Kéo widget Price Table vào Phần / Cột.
Tùy chỉnh các phần như hướng dẫn.

 

Kết quả ta được một bảng giá cơ bản.

3. Tạo Bảng giá nhiều cột (2–3 cột)

  • Thêm Phần mới → chọn Bố cục 3 cột.

  • Mỗi cột đặt 1 Price Table (Bảng giá).

  • Điều chỉnh màu nền khác nhau để phân biệt (ví dụ: cột giữa màu nổi bật).

  • Gắn nhãn “Phổ biến nhất” (Popular) vào gói trung tâm.

 

Để gắn nhãn “Phổ biến nhất” ta chọn phần “Ribbon” và điền tiêu đề vào.

 

Kết quả ta đã được một trang bảng giá với các gói khác nhau

🎯 Bài tập thực hành

  • Tạo 1 section bảng giá gồm 3 gói: Cơ bản – Nâng cao – Chuyên nghiệp.

  • Mỗi gói có:

    • Tên gói.

    • Giá.

    • 5 tính năng (dùng Icon List).

    • Nút CTA “Đăng ký ngay”.

  • Làm cho gói ở giữa có màu khác và thêm nhãn “Phổ biến nhất”.


✅ Kết quả mong đợi

Sau bài này, khách hàng sẽ làm được:

  • Danh sách dịch vụ/tính năng bằng Icon List.

  • Bảng giá nhiều cột dễ so sánh.

  • Trang Dịch vụ hoặc trang Bảng giá trông chuyên nghiệp, có nút kêu gọi hành động rõ ràng.

Tagged: