Tạo Trang Đích Bán Hàng — Hướng Dẫn Từng Bước

Giới thiệu

Bạn có từng mong muốn có thể thiết kế những phần trang đích đẹp, tương thích mọi thiết bị — mà không cần viết một dòng mã nào không? Với Selldone Plugin trong ChatGPT, giấc mơ đó trở thành hiện thực.

Trong hướng dẫn này, bạn sẽ được chỉ dẫn từng bước cách chuyển từ một hình ảnh tham khảo thành một section sống, hoàn toàn đáp ứng trong Page Builder của Selldone — tất cả được hỗ trợ bởi AI.

Sau khi hoàn tất, bạn sẽ có một section thiết kế chuyên nghiệp sẵn sàng xuất bản lên trang Selldone của mình.

💡 Lưu ý: Page Builder của Selldone được xây dựng trên Vuetify (Vue 3) — vì vậy mọi section được plugin tạo ra đều tương thích hoàn hảo với framework front-end hiện đại, responsive của Selldone.

Bước 1 – Chuẩn bị Hình Tham Khảo

Để bắt đầu, tìm một mẫu section truyền cảm hứng cho bạn. Trong bài này, chúng ta sẽ dùng một section từ trang chủ của Shopee làm tham chiếu — một bố cục sạch, hiện đại, trưng bày sản phẩm nổi bật với hình ảnh mạnh mẽ và lời kêu gọi hành động rõ ràng.

Chụp màn hình section Shopee đó; chúng ta sẽ dùng nó làm tham chiếu hình ảnh trong ChatGPT khi tạo thiết kế tùy chỉnh với Selldone Plugin.

💡 Mẹo: Chọn một section có bố cục có cấu trúc và cân đối về mặt hình ảnh. Thiết kế càng rõ ràng, ChatGPT càng phân tích và tái tạo chính xác hơn.

⚠️ Thông báo Sử dụng Hợp lý: Ảnh chụp màn hình Shopee được sử dụng ở đây chỉ nhằm mục đích giáo dục và minh họa như nguồn cảm hứng thiết kế. Tất cả nhãn hiệu, hình ảnh và bố cục thuộc về Shopee — hướng dẫn này không liên kết hay được Shopee xác nhận.

Bước 2 – Mở ChatGPT với Selldone Plugin

Đảm bảo bạn đã bật Selldone Plugin trong ChatGPT:

1. Vào ChatGPT → Settings → Beta Features → Plugins và bật tính năng Plugins.
2. Truy cập Plugin Store và cài đặt Selldone Plugin.
3. Bắt đầu một cuộc trò chuyện mới với plugin đang hoạt động.

Bạn sẽ thấy logo Selldone bên cạnh khung chat — điều đó nghĩa là plugin đã sẵn sàng sử dụng

Bước 3 – Tải Lên Thiết Kế Tham Khảo

Tải lên ảnh chụp màn hình của bạn và gõ một prompt rõ ràng, ví dụ:

Từ menu trên cùng, đảm bảo bạn đang dùng phiên bản ChatGPT mới nhất.

“Tôi muốn xây một section giống hình này, với kích thước chữ responsive, font và màu thẻ có thể tùy chỉnh, và các thẻ có thể là hình tròn hoặc vuông bo góc.”

ChatGPT (với Selldone) sẽ phân tích hình ảnh và sinh mã dựa trên Vuetify (Vue 3) hoàn toàn tương thích với Page Builder của Selldone.

Tạo Trang Landing Mới trong Selldone

Trước khi thêm section tùy chỉnh, hãy tạo một trang landing thô trong Selldone để sử dụng.

1. Từ menu trên cùng của cửa hàng, điều hướng tới Pages → Landing → Add New Landing.
   
2. Ở màn hình này, bạn sẽ thấy ba mẫu trang landing mặc định.
3. Nhấp vào một trong số chúng để chọn và vào Landing Page Designer. Trong designer, mở thanh bên trái, tìm phần tử “Code” và kéo nó vào khu vực Page Builder. Phần tử “Code” này là nơi bạn sẽ dán hoặc nhập section do ChatGPT tạo bằng Selldone Plugin.
4. Nhấp vào trong hộp Code để kích hoạt thanh công cụ — bạn sẽ thấy một thanh công cụ phía trên xuất hiện, và ta sẽ sử dụng nó thường xuyên.

- Biểu tượng đầu tiên (<>) mở Code Editor, nơi bạn có thể dán hoặc chỉnh sửa mã HTML và Vue do ChatGPT tạo ra cho section.
- Biểu tượng thứ hai mở Properties, nơi bạn có thể điều chỉnh bố cục, khoảng cách và cài đặt hiển thị của section.

Bước 4 – Dán Mã Khởi Tạo của ChatGPT vào Trình Soạn Thảo

Có thể là Phiên bản Sai

Bây giờ bạn cần sao chép phiên bản mã đầu tiên mà ChatGPT đã tạo cho bạn.
Theo như ảnh chụp màn hình, kết quả trông khác so với hình tham khảo — điều này có nghĩa ChatGPT đã tạo ra một phiên bản không chính xác của section. Điều này hoàn toàn bình thường, đừng lo lắng.Để khắc phục, gửi lại hình tham khảo và yêu cầu thêm, ví dụ bằng cách nói:

“Tập trung vào hình tôi đã gửi ở trên. Tôi gửi lại hình.”

Bây giờ ChatGPT sẽ bắt đầu lại và tạo mã mới. Phiên bản này vẫn chưa phải bản cuối cùng — có thể bạn sẽ cần thêm yêu cầu và điều chỉnh.Bây giờ, sao chép mã và dán vào trình soạn thảo mã rồi bấm Apply:

Ghi chú quan trọng: Chế độ mặc định của trình soạn thảo mã là HTML. Bạn phải chuyển sang tùy chọn Vue — nếu không, bạn sẽ gặp kết quả trống.

Bây giờ bạn sẽ thấy phiên bản đầu tiên chính xác của section do ChatGPT tạo. Nhấn mục thứ hai trên thanh công cụ (như đã nói ở trên) để mở menu Properties để điều chỉnh. Như bạn thấy, có rất nhiều cài đặt giúp bạn tùy biến section cho phù hợp với doanh nghiệp của mình.

Tùy chọn RESET TO DEFAULT:

Đôi khi, khi bạn dán một phiên bản mã cập nhật, bạn có thể không thấy thay đổi hiển thị. Điều này xảy ra nếu các chỉnh sửa mang tính nền tảng. Trong trường hợp đó, bạn cần nhấn Reset to Default. Xin lưu ý việc dùng tùy chọn này sẽ xóa mọi cài đặt tùy chỉnh của bạn, bao gồm văn bản mới, màu sắc, kích thước font và cả ảnh đã tải lên — nó tương tự như thiết lập lại về trạng thái mặc định 🙂.Vì vậy, chỉ dùng tùy chọn này khi các thay đổi không được áp dụng đúng cách.

Bước 5 – Điều Chỉnh Section

ChatGPT, dựa trên kinh nghiệm nó học được từ người dùng khác đã dùng phương pháp này để xây section, hiện tạo ra các bố cục toàn diện hơn — vì vậy bạn không cần yêu cầu từng phần tử một. Đây là lợi ích thực sự của việc trò chuyện nhiều với nó: cuộc hội thoại càng dài và rõ ràng, ChatGPT càng hiểu rõ sở thích thiết kế của bạn và cho ra kết quả hoàn chỉnh, chính xác hơn.Mã mặc định được sinh đã khá responsive, nhưng bạn vẫn có thể điều chỉnh chi tiết như kích thước font, độ đậm font, chiều cao chiều rộng section hoặc card và các yếu tố trực quan khác theo sở thích.
Ở đây, ví dụ, bạn có thể đặt Selldone hiển thị 8 thẻ trên một hàng ở màn hình desktop lớn, 4 thẻ trên tablet và 2 thẻ trên di động.
Hãy xem ChatGPT hiểu và áp dụng các điều chỉnh này như thế nào — có thể chúng ta sẽ cần thêm vài sửa đổi hay yêu cầu ở các bước tiếp theo.Trong ví dụ này, bạn nên thay đổi Max Width của Section thành 1400px để bố cục đẹp hơn. Bạn cũng nên điều chỉnh số thẻ mỗi hàng thành 8, 4 và 2 cho desktop, tablet và mobile tương ứng.
Để tinh chỉnh khoảng cách, thử giảm Cards Gap (Desktop) xuống khoảng 12px. Thêm vào đó, bạn có thể giảm chiều cao card từ 180px xuống 160px, hoặc điều chỉnh kích thước ảnh cho phù hợp với thiết kế.

Điều quan trọng là bạn có thể dễ dàng tùy biến diện mạo bằng cách thử nghiệm với những con số này — hãy thử và tìm thông số phù hợp nhất với phong cách của bạn.

Để hình dung tốt hơn kết quả, bạn có thể tải lên ảnh của chính mình. Chúng tôi khuyến nghị sử dụng hình ảnh nền trong suốt, để tùy chọn Card Background Color áp dụng đều cho tất cả — giúp section trông sạch và chuyên nghiệp hơn.Sau khi tải lên ảnh, chỉnh sửa văn bản và hoàn thiện mọi thứ, nhấn nút Save — hoặc nhấn Ctrl + S trên Windows để lưu nhanh.
Bây giờ mở Live Page để xem section vận hành.
Để xem trực tiếp, bạn có thể dùng tùy chọn Live Preview hoặc nhấn nút bên cạnh hiển thị tên landing page của bạn — điều này sẽ mở trang ở chế độ buyer view, đúng như khách truy cập sẽ thấy. Tuy nhiên, tôi không khuyến nghị dùng Live Preview để kiểm tra phiên bản cuối cùng vì nó không phản ánh đầy đủ tính responsive trên các thiết bị khác nhau — điều mà chúng ta sẽ bàn kỹ hơn bên dưới.Đây là kết quả của mã. Bây giờ chúng ta cần kiểm tra trên nhiều kích thước màn hình để đảm bảo mọi thứ hoạt động đúng.
Để mở Web Developer Tools trên trình duyệt Windows, nhấn F12.
Công cụ này cho phép bạn xem trước trang ở nhiều kích thước màn hình — mà không cần thử riêng trên điện thoại, tablet, laptop hoặc các thiết bị khác.Bây giờ, từ menu trên cùng, chọn Responsive để xem section trông thế nào trên các kích thước màn hình khác nhau.Như bạn thấy, phiên bản trên di động trông sạch và hoàn toàn responsive.Ở chế độ tablet — — cài đặt của chúng ta (4 thẻ trên hàng cho tablet) chưa được áp dụng, nó chỉ hiển thị 2. Chúng ta cần yêu cầu ChatGPT sửa lỗi này và viết lại mã.

Bước 6 – Lặp và Hoàn Thiện

Đừng dừng lại ở phiên bản đầu — đây mới là lúc sáng tạo thật sự. Bạn có thể tiếp tục trao đổi với ChatGPT để điều chỉnh các chi tiết như:

• Làm cho section responsive trên mọi thiết bị.
• Thêm animation khi hover.
• Dùng nút dạng gradient.

Mỗi lần yêu cầu sẽ cập nhật section ngay lập tức.

💡 Mẹo chuyên nghiệp: Bạn càng mô tả chi tiết và trò chuyện nhiều, ChatGPT càng hiểu rõ phong cách thiết kế của bạn. Theo thời gian, nó sẽ học sở thích của bạn và cho ra kết quả chính xác, chất lượng hơn.Ở đây, bạn nên mô tả rõ vấn đề để ChatGPT hiểu tốt hơn.
Hãy nhớ, nó không đọc được suy nghĩ — bạn cần mô tả lỗi một cách chi tiết, như ví dụ sau:

Tôi đã chọn 4 thẻ hiển thị trên 1 hàng ở kích thước Tablet nhưng trên iPad Pro 11 inch chỉ hiển thị 2 thẻ. Sửa đi. Tôi đã chọn 2 thẻ cho di động.

Khi ChatGPT trả lời yêu cầu của bạn, đôi khi nó chỉ cung cấp các đoạn mã cần chỉnh sửa cụ thể mà bạn phải thay thế hoặc thêm thủ công, như hình bên dưới. 

Để dễ dàng hơn, hãy yêu cầu nó “Gửi mã đầy đủ”.

Thường thì, ở cuối tin nhắn, ChatGPT sẽ đề xuất các cài đặt bổ sung mà bạn có thể bỏ sót — ví dụ như thêm liên kết vào các thẻ, điều này rất cần thiết cho section của chúng ta.

Sắp xong! Sao chép và dán mã cập nhật vào trình soạn thảo, lưu thay đổi và xem ở chế độ Live để đảm bảo mọi thứ hiển thị đúng.
Như bạn thấy, bây giờ nó hiển thị hoàn hảo 4 thẻ trên một hàng ở phiên bản tablet.

Bước 7 – Hoàn Thiện Mã và Lưu Section

Khi thiết kế đã sẵn sàng, bạn nên cung cấp cho ChatGPT mô tả chi tiết cấu trúc và yêu cầu của section. Sử dụng prompt sau để tạo mã cuối cùng:

Thêm một khối mô tả khái niệm phía trên