Giao diện Redline (thương hiệu trượt ván, đường phố)

Đây là hướng dẫn sử dụng Redline (redline), giao diện chính thức của Zittme dành cho thương hiệu trượt ván · thể thao đường phố. Giao diện kết hợp giới thiệu thương hiệu và bán hàng hóa thương hiệu (merch) trên cùng một website. Nền đen được điểm màu đỏ tín hiệu, chữ được viết rất lớn; trang đầu có ảnh phủ kín màn hình và menu mở ra toàn màn hình. Luồng mua sắm (giỏ hàng · đặt hàng · thanh toán) giống giao diện Sinsunhan, nên với nội dung không có ở đây, hãy xem thêm tài liệu Giao diện Sinsunhan (cửa hàng trực tuyến).

Demo: redline-demo.zitt.me

Thành phần

Cài đặt và áp dụng

1. Cài từ cửa hàng hoặc giải nén vào themes/redline.
2. Trong Quản trị > Cài đặt thiết kế, chọn Redline để áp dụng.
3. Nếu có mô-đun thương mại, giỏ hàng ở đầu trang · ô tìm kiếm ở đầu trang · khối merch trên trang chủ sẽ tự động liên kết. Nếu có nhiều mô-đun cửa hàng, hãy nhập mid vào "Địa chỉ cửa hàng merch (mid)" trong Cài đặt layout > Cơ bản.

Môi trường khuyến nghị: Zittme 1.0.1 trở lên, thương mại 1.1.1 trở lên. Đây là giao diện đáp ứng nên khuyến nghị tắt chế độ xem riêng cho di động.

Chế độ màu

Giao diện này được thiết kế lấy nền đen làm chuẩn. Trong Cài đặt layout > Cơ bản > Chế độ màu, chọn một trong "Luôn tối (mặc định)", "Luôn sáng", "Theo cài đặt thiết bị của khách truy cập".

• Nếu có logo riêng cho chế độ sáng, hãy đặt vào "Ảnh logo cho chế độ sáng".
• Khi đổi màu nhấn, màu chữ trên nút và màu chữ nhấn được tự động điều chỉnh phù hợp với nền để không xuất hiện tổ hợp màu khó đọc.
• Màn hình lỗi 404 · 500 được vẽ bên ngoài layout cũng tuân theo chế độ màu của website.

Loại trang

Trong sơ đồ website, nhập giá trị dưới đây vào ô Lớp (class) của menu để quyết định kiểu trang.

Lớp	Kiểu
m	Trang chính. Hiển thị bìa và các khối trang chính.
sf	Toàn chiều rộng. Nội dung trải rộng hết chiều rộng màn hình. Phù hợp với trang giới thiệu thương hiệu.
(để trống)	Trang con thông thường

Trang chính tích hợp trong giao diện (bố cục trang chính)

Lắp ráp theo thứ tự bằng trường lặp "Khối trang chính" trong tab Bố cục trang chính của Cài đặt layout. Nếu không có khối nào thì dùng bố cục mặc định.

Loại khối	Nội dung	Các ô sử dụng
Tuyên ngôn	Một khối chữ lớn. Giới thiệu thương hiệu trong một câu	Nội dung · tên nút · liên kết nút
Đội rider	Lưới thẻ ảnh đen trắng. Khi rê chuột lên, màu sắc trở lại	Trường lặp "Đội rider"
Chỉ số	Số lớn trên dải màu đỏ. Số tăng dần khi xuất hiện trên màn hình	Trường lặp "Chỉ số"
Merch / Hàng mới / Đang giảm giá	Thẻ sản phẩm của cửa hàng	Số lượng hiển thị
Tạp chí	Thẻ bài mới nhất của bảng tin	Nguồn (mid bảng tin, để trống là bảng tin đầu tiên) · số lượng hiển thị
Dải ảnh	Câu chữ và nút trên ảnh phủ kín màn hình	Ảnh · nội dung · tên nút · liên kết nút
Dòng chữ chạy	Dải chữ chạy ngang	Tiêu đề khối (để trống thì dùng dòng chữ chạy của trang đầu)

• Đội rider: đăng ký từng người với ảnh · tên · bộ môn hoặc vai trò · năm gia nhập · liên kết.
• Chỉ số: đăng ký số · ký hiệu sau số (ví dụ: nghìn, năm) · mô tả.
• Nếu để trống tiêu đề khối thì tiêu đề mặc định phù hợp với loại khối sẽ hiển thị.

Trang đầu (bìa · dòng chữ chạy)

• Hiển thị bìa: chỉ ở dạng trang chính · hiển thị cả ở trang con · không dùng
• Chiều cao bìa: toàn màn hình (mặc định) · cao (80% màn hình) · vừa (620px)
• Dòng trên · tiêu đề · mô tả · nút của bìa: tiêu đề hiển thị rất lớn, giữ nguyên các chỗ xuống dòng.
• Dòng chữ chạy: dùng gạch đứng (|) để tách thành các mục. Để trống thì không hiển thị dải. Tốc độ: chậm · vừa · nhanh. Nếu khách truy cập bật giảm chuyển động trên thiết bị, dải sẽ hiển thị ở trạng thái đứng yên.

Màn hình cửa hàng (skin thương mại)

• Trang chủ merch · danh sách: tab danh mục · tìm kiếm · sắp xếp. Huy hiệu giảm giá · hàng mới · đề xuất.
• Chi tiết: tên sản phẩm · giá · ưu đãi tích điểm · phí giao hàng · tùy chọn · mua ngay · giỏ hàng, bên dưới là dòng thông tin giao hàng · hàng chính hãng · đổi·trả hàng.
• Cửa hàng người bán: khi bật chợ mở (open market), mỗi người bán có cửa hàng riêng (/shop-mid/store/shop-id). Cửa hàng hiển thị banner · menu cửa hàng · tìm kiếm trong cửa hàng · sản phẩm tiêu biểu · hàng mới · sản phẩm theo danh mục · thông báo · thông tin người bán, và màu cửa hàng do người bán chọn được dùng làm màu nhấn.
• Giỏ hàng · đặt hàng · mua sắm của tôi · chương trình khuyến mãi: cùng luồng với giao diện Sinsunhan, thanh toán được chuyển tiếp sang skin zittme Pay.

Skin bảng tin

Trong cài đặt skin, chọn tiêu đề bảng tin · mô tả · kiểu danh sách (dạng danh sách · dạng thẻ · dạng webzine · dạng FAQ) · căn lề người viết · ảnh đại diện · chữ ký · tệp đính kèm · hiển thị nút đề xuất. Với bảng tin lấy ảnh làm trọng tâm như tạp chí, khuyến nghị dùng dạng thẻ.

Chân trang

Trong Cài đặt layout > Chân trang, điền câu giới thiệu thương hiệu, số điện thoại · email liên hệ, 3 loại địa chỉ mạng xã hội (Instagram · YouTube · TikTok), câu thông báo cuối trang, thông tin doanh nghiệp · liên hệ (mỗi dòng một mục), dòng bản quyền và chữ cỡ lớn ở chân trang. Menu chân trang được liên kết với "Menu chân trang" trong quản lý menu.

Toàn bộ mục cài đặt layout

Cơ bản

Ảnh logo · ảnh logo cho chế độ sáng · chữ logo · màu nhấn · độ rộng tối đa của nội dung (1280 · 1440 · 1680) · chế độ màu · dùng tìm kiếm · địa chỉ cửa hàng merch (mid)

Trang đầu

Hiển thị bìa · chiều cao bìa · ảnh nền bìa · dòng trên của bìa · tiêu đề bìa · mô tả bìa · tên nút bìa · liên kết nút bìa · dòng chữ chạy · tốc độ chạy

Bố cục trang chính

Khối trang chính (loại · tiêu đề · nội dung · ảnh · nguồn · tên nút · liên kết nút · số lượng hiển thị) · đội rider · chỉ số

Chân trang

Chữ cỡ lớn ở chân trang · câu giới thiệu thương hiệu · số điện thoại liên hệ · email liên hệ · 3 loại địa chỉ mạng xã hội · câu thông báo cuối trang · thông tin doanh nghiệp·liên hệ · dòng bản quyền