Làm cho trang web hiển thị đúng trên điện thoại và máy tính bảng
Xem cửa hàng của bạn trông thế nào trên máy tính bảng và điện thoại, ẩn khối trên màn hình nhỏ, và chỉnh vị trí một khối chỉ cho một kích thước màn hình.
Hầu hết khách hàng ghé cửa hàng bằng điện thoại, nên các trang của bạn phải hoạt động ở mọi kích thước. Bạn thiết kế một lần, và Payly tự điều chỉnh trang cho máy tính bảng và điện thoại. Bài viết này giải thích những gì xảy ra tự động và cách thay đổi khi bạn muốn một khối hoạt động khác đi trên màn hình nhỏ hơn.
Bố cục của bạn thích ứng thế nào
Các khối nằm trong các ô của lưới 12 cột, không bao giờ ở vị trí pixel cố định, nên chúng không thể chồng lên nhau trên màn hình nhỏ. Trang chuyển bố cục tại hai điểm:
- Máy tính bảng (màn hình hẹp hơn 1024 pixel) giữ nguyên lưới. Một khối vẫn ở yên chỗ cũ trừ khi bạn di chuyển nó cho máy tính bảng.
- Điện thoại (760 pixel trở xuống) đặt mọi khối trên một hàng riêng với toàn bộ chiều rộng. Các khối xếp chồng từ trên xuống theo thứ tự bạn đọc trên máy tính: từ trên xuống dưới, rồi từ trái sang phải.
Một số khối thích ứng thêm nữa. Liên kết đầu trang được gộp sau một nút menu, lưới thu lại còn một cột, và thư viện ảnh cùng dải logo hiển thị hai cột. Kết quả là một cửa hàng hoạt động trên điện thoại mà không cần thiết lập thêm.
Chuyển giữa các kích thước màn hình
- Trên thanh trên cùng của trình chỉnh sửa, nhấp vào Máy tính bảng hoặc Điện thoại. Trang thu hẹp lại để hiển thị cách nó trông ở kích thước đó.
- Xem qua trang để tìm mọi thứ chưa hiển thị tốt. Cuộn, và chọn khối như bình thường.
- Nhấp vào Máy tính để quay lại bố cục toàn màn hình.
Các nút này làm nhiều hơn là xem trước. Chúng còn chọn bố cục nào bạn đang chỉnh sửa. Khi bạn chuyển sang Máy tính bảng hoặc Điện thoại, một thông báo nhắc bạn rằng thay đổi chỉ áp dụng cho kích thước đó. Mọi thứ bạn thay đổi ở đó đều không ảnh hưởng đến bố cục máy tính.
Ẩn một khối trên màn hình nhỏ
Một ảnh lớn hoặc một khối trang trí dài có thể làm chật điện thoại. Bạn có thể ẩn nó trên màn hình nhỏ và vẫn giữ nó trên máy tính.
- Nhấp vào Điện thoại (hoặc Máy tính bảng) trên thanh trên cùng.
- Chọn khối.
- Trong bảng cài đặt, mở Kích thước và vị trí.
- Bật Ẩn trên điện thoại (hoặc Ẩn trên máy tính bảng). Khối biến mất khỏi chế độ xem đó và không để lại khoảng trống trên trang đã xuất bản.
Khối bị ẩn trên máy tính bảng cũng bị ẩn trên điện thoại, trừ khi bạn tắt công tắc khi đang xem Điện thoại. Để ẩn một khối trên mọi màn hình, dùng Ẩn khối này khi đang ở Máy tính.
Đặt một khối khác đi trên một kích thước
- Chọn Máy tính bảng hoặc Điện thoại trên thanh trên cùng.
- Chọn khối và mở Kích thước và vị trí.
- Thay đổi Bắt đầu từ cột, Rộng bao nhiêu cột, Bắt đầu từ hàng hoặc Cao bao nhiêu hàng, hoặc nhấp vào Lấp đầy toàn bộ chiều rộng. Bạn cũng có thể kéo và thay đổi kích thước khối trên trang.
Thanh ở đầu Kích thước và vị trí cho biết bạn đang chỉnh sửa bố cục nào. Nó hiển thị Kế thừa khi khối theo kích thước lớn hơn, và nút Đặt lại khi khối đã có cài đặt riêng. Nhấp vào Đặt lại để khối theo kích thước lớn hơn trở lại. Nhấp vào Dùng bố cục này trên mọi màn hình để sao chép bố cục hiện tại sang mọi kích thước.
Thanh trên cùng cũng đếm các khối khác với bố cục máy tính, ví dụ 1 khối khác nhau trên điện thoại. Nhấp vào con số để chuyển từ khối này sang khối tiếp theo như vậy.
Giữ một khối giống nhau trên mọi màn hình
Bật Giống nhau trên mọi màn hình trong Kích thước và vị trí để một khối có một bố cục ở mọi nơi. Mọi cài đặt dành cho máy tính bảng hay điện thoại của khối sẽ bị xóa, và các chỉnh sửa về sau sẽ áp dụng cho mọi kích thước cùng lúc.
Lưu ý: Di chuyển một khối sang một phần khác sẽ thay đổi nó trên mọi kích thước màn hình, nên Payly chỉ cho phép việc đó trên Máy tính. Để đặt một khối khác đi trên điện thoại, hãy thêm nó vào cả hai phần và ẩn phần bạn không muốn trên mỗi kích thước.
Kiểm tra kết quả
Dùng Xem trước để nhấp qua các trang ở chiều rộng điện thoại và máy tính bảng, và xem cửa hàng đã xuất bản trên một chiếc điện thoại thật trước khi thông báo. Xem Xem trước trang web trước khi xuất bản.