Các chế độ thiết kế giao diện Landing Page

Hiện tại landing page có 3 chế độ thiết kế giao diện: Responsive, Mobile Only và Adaptive.

Bấm vào mục Tạo Landing Page mới → chọn giao diện → chọn kiểu thiết kế bạn muốn sử dụng:

Có 3 kiểu thiết kế bạn có thể chọn: Responsive - Mobile Only - Adaptive.

• Sử dụng giao diện mẫu: chọn được 01 trong 03 chế độ thiết kế, nhưng nếu bạn chọn chế độ thiết kế Adaptive thì sẽ chỉ hiển thị giao diện Desktop, giao diện Mobile sẽ trắng tinh và cần thiết kế lại nội dung giao diện Mobile từ đầu.
• Sử dụng trang trắng: chọn 01 trong 03 kiểu thiết kế và thiết kế giao diện landing page từ đầu.
• Tải file .ladipage từ máy tính: file bạn trước đó được thiết kế theo kiểu thiết kế nào thì sẽ GIỮ NGUYÊN như vậy, không có phần chọn thay đổi chế độ thiết kế. Xem chi tiết tại đây.
• Tải file .htlm: Bạn có sẵn file html đã được thiết kế sẵn ở nền tảng khác, bạn có thể tải file html lên để chỉnh sửa tiếp lại LadiPage. Xem chi tiết tại đây.
• Tạo landing page từ AI: Bạn có thể sử dụng AI của LadiPage để viết câu lệnh và từ đó tạo cho bạn 1 landing page hoàn chỉnh. Xem chi tiết tại đây.

Bạn có thể xem nhanh kiểu thiết kế đang sử dụng cho trang nhanh thông qua các icon trong danh sách landing page.

1. Chế độ Responsive: giao diện desktop và mobile phụ thuộc lẫn nhau

Khi thiết kế thì bạn cần phải thiết kế bản Desktop trước.

Thiết kế giao diện Desktop:

• Trên Desktop, tạo nhóm các phần tử đi liền nhau, để sang mobile, các phần cũng sẽ đi liền với nhau. Cách tạo nhóm xem chi tiết tại đây.
• Các nội dung/hình ảnh chính thiết kế trong khung nét đứt để trang xuất bản sẽ hiển thị tối ưu trên mọi giao diện/trình duyệt.

• Bạn có thể chọn khung thiết kế destop theo khung 960px hoặc 1200px.

Thiết kế giao diện Mobile:

• Nội dung bản Mobile sẽ phụ thuộc vào các nội dung bạn tạo từ bản Desktop. Bạn KHÔNG KÉO DI CHUYỂN PHẦN TỬ RA KHỎI SECTION ban đầu thiết kế và KHÔNG HỦY NHÓM để không ảnh hưởng tới thiết kế bản desktop.
• Nếu sang thiết kế bản mobile bị lệch, bạn thực hiện kéo thủ công lại để việc hiển thị được đẹp nhất, hoặc chọn sắp xếp tự động toàn trang landing page hoặc sắp xếp tự động theo từng section.

• Phần thiết kế mobile có thể độc lập với bản desktop ở các nội dung: HÌNH NỀN, MÀU SẮC của phần tử hoặc section bằng cách KHÔNG ĐỒNG BỘ theo hướng dẫn tại đây. Nếu bạn thay đổi KÍCH THƯỚC, SIZE CHỮ, VỊ TRÍ PHẦN TỬ giữa desktop và mobile thì không cần phải bật Không đồng bộ.
• Bạn có thể chọn khung thiết kế mobile 420px hoặc 320px.

2. Chế độ Mobile Only: giao diện desktop và mobile cùng sử dụng giao diện mobile

Mobile Only là tính năng đặc biệt của LadiPage, cho phép bạn chỉ thiết kế trên giao diện mobile và tắt giao diện desktop. Khi khách hàng truy cập bằng desktop, màn hình sẽ hiển thị bé lại bằng khung hình mobile.

Sử dụng mobile only giúp bạn tiết kiệm thời gian thiết kế để chạy nhanh các chiến dịch quảng cáo đối với các sản phẩm mà nguồn khách hàng truy cập chủ yếu từ các thiết bị di động.

Khi bạn đang ở chế độ thiết kế Responsive, bạn có thể thay đổi để chuyển sang giao diện Mobile Only theo hướng dẫn: Thiết lập → Thiết lập toàn trang → Bật chế độ Mobile only.

3. Chế độ Adaptive: giao diện desktop và mobile hoàn toàn độc lập

Với chế độ Adaptive, bạn cần thiết kế lần lượt cả giao diện desktop và giao diện mobile, nội dung của 2 phiên bản hoàn toàn ĐỘC LẬP với nhau.

Sau khi thiết kế, bạn cần vào cả 2 phiên bản Desktop và Mobile, bấm xuất bản lần lượt các phiên bản để cập nhật và hoàn thiện nội dung thiết kế. Nếu không xuất bản 1 trong 2 giao diện, thì giao diện đó sẽ ở trạng thái 404 của LadiPage.