Chọn mẫu và diện mạo
Xem trước các mẫu, rồi đặt màu sắc, phông chữ, bố cục và logo cho trang web.
Dành cho chủ đội và quản trị viên · 11 bước
Bạn cần chuẩn bị gì
- Đội của bạn có gói trang web. Khu quản trị của đội miễn phí hiện Nhận trang web thay vì Mẫu.
- Bạn là chủ sở hữu hoặc quản trị viên của đội.
Các bước
Bước 1: Mở Mẫu
Trong menu bên trái, nhấn Mẫu.
Bạn sẽ thấy: trang có tiêu đề Mẫu, mỗi mẫu một thẻ. Mẫu trang web của bạn đang dùng được đánh dấu Đang dùng. Nếu trang web chưa có mẫu, mỗi thẻ sẽ hiện Chọn — nhấn vào sẽ chọn mẫu đó, kèm bộ màu đầu tiên của nó, và mở Giao diện.
Bước 2: Xem trước một mẫu
Trên thẻ của một mẫu, nhấn Xem trước.
Bạn sẽ thấy: chính trang web của bạn trong mẫu đó, bên dưới một thanh ghi Xem trước. Chỉ quản trị viên của đội mới mở được. Nhấn Về trang quản trị khi xem xong.
Bước 3: Mở Giao diện
Quay lại trang Mẫu, nhấn Giao diện ở góc trên bên phải.
Bạn sẽ thấy: trang có tiêu đề Giao diện — biểu mẫu ở một bên và hình ảnh trực tiếp của trang web bên cạnh (bên dưới nếu màn hình hẹp).
Bước 4: Chọn bộ màu
Trong Bộ màu, chọn một bộ thiết lập sẵn của mẫu.
Bạn sẽ thấy: bộ thiết lập được khoanh viền, và hình ảnh trang web mang màu của nó. Một bộ thiết lập đổi cả năm màu và hai phông chữ cùng lúc.
Bước 5: Đổi một màu
Trong Màu sắc, gõ mã màu như
#7dd3fcvào Chính, Màu nhấn, Màu nổi bật, Nền hoặc Văn bản — hoặc nhấn ô vuông bên cạnh để chọn màu.Bạn sẽ thấy: hình ảnh trang web thay đổi, và Tùy chỉnh được khoanh viền trong Bộ màu. Mỗi màu hiện màu mặc định của mẫu; Đặt lại trả lại màu đó.
Bước 6: Đặt màu riêng cho chữ và bề mặt
Trong Chữ và bề mặt, nhấn Chọn màu bên cạnh Tiêu đề, Chú thích, Thẻ, Đường kẻ, Liên kết và nhãn, Nút hoặc Chữ trên nút, rồi gõ mã màu hoặc nhấn ô vuông bên cạnh. Mỗi mục bắt đầu ở Tự động, tức là đi theo năm màu của bạn như cách mẫu vẫn làm; Dùng Tự động trả mục đó về như cũ.
Bạn sẽ thấy: hình ảnh trang web thay đổi, và dưới mỗi màu dùng cho chữ có một con số như 7.2:1 · dễ đọc — cho biết màu đó nổi bật thế nào so với nền và thẻ của bạn. Dưới 4.5:1 (3:1 với tiêu đề), nó báo khó đọc, hiện màu mà khách truy cập sẽ thấy thay thế, và có nút Làm cho dễ đọc để điền màu đó vào ô.
Bước 7: Chọn phông chữ
Trong Kiểu chữ, mở Phông tiêu đề hoặc Phông nội dung và chọn một phông. Mỗi phông được hiển thị bằng chính nó và xếp vào một nhóm — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — và bạn có thể gõ tên để tìm.
Bạn sẽ thấy: hình ảnh trang web hiện bằng phông đó. Đổi phông cũng chuyển bộ màu sang Tùy chỉnh.
Bước 8: Thêm logo
Trong Logo, nhấn Chọn ảnh bên cạnh Logo chữ, Logo vuông hoặc Favicon (nút sẽ thành Thay thế khi đã có ảnh). Trong hộp Chèn ảnh, chọn một ảnh hoặc tải ảnh lên — JPEG, PNG, WebP hoặc AVIF, tối đa 5 MB — rồi nhấn Chèn. Logo không cần văn bản thay thế.
- Logo vuông hiện trên thanh điều hướng của trang web, ở đầu Trang chủ và trong đội hình.
- Logo chữ là tùy chọn: tên đội dưới dạng ảnh, hình dạng bất kỳ. Khi bạn đặt logo chữ, nó thay cho logo vuông và tên đội trên thanh điều hướng và ở đầu Trang chủ.
- Favicon là biểu tượng nhỏ trên tab trình duyệt.
Logo của bạn không bao giờ bị cắt hay chỉnh sửa. Mọi ảnh đều hiện nguyên vẹn, và nền trong suốt vẫn giữ trong suốt. Vì vậy logo vuông và favicon phải là ảnh vuông, ít nhất 256 × 256 pixel — ảnh có hình dạng khác sẽ bị từ chối khi bạn lưu, kèm thông báo cho biết kích thước ảnh. Logo bạn đã chọn trước khi có quy định này vẫn hiện cho đến khi bạn thay.
Bạn sẽ thấy: tên ảnh bên cạnh ô. Bộ thiết lập sẵn không bao giờ thay đổi các logo này.
Bước 9: Đặt tùy chọn của mẫu
Kéo xuống dưới, trong Tùy chọn Broadcast, chọn Hero layout (Image behind the text hoặc Image beside the text) và Card edges (Cut corners hoặc Square corners). Các mẫu khác có tùy chọn riêng ở đây: Motion của Neon Grid là Full motion hoặc Calm (mọi thứ đứng yên), và Hero glow là Bright (phần đầu trang chủ chuyển dần từ màu nền sang màu nhấn) hoặc Tối (sang màu xám tối pha từ màu chính và màu nhấn, cho vẻ tối hơn); Hero layout của Crosshair là Split (chữ bên trái, ảnh bên phải với trận tiếp theo đè lên) hoặc Full-width image; Hero alignment của Faceoff là Centered hoặc Left, và Home roster là Scattered (thẻ người chơi xếp quanh dòng chữ lớn "Meet the squad") hoặc Grid; Hero layout của Clutch là Bento (hero bên cạnh khung Latest news) hoặc Full width, và Corners là Rounded hoặc Square; Nền của Varsity là Pinstripe (sọc chéo mờ phía sau mọi trang) hoặc Đơn giản, và Hero size là Full (ảnh cao với menu đè lên) hoặc Banner (ảnh thấp hơn); Photo tint của Redline là Duotone (ảnh được phủ màu chính) hoặc Natural (giữ màu gốc), và Panels là Offset (khối tối đặt phía sau ảnh và các mục) hoặc Flat.
Bạn sẽ thấy: hình ảnh trang web thay đổi bố cục.
Bước 10: Lưu
Nhấn Lưu ở cuối biểu mẫu.
Bạn sẽ thấy: "Đã lưu giao diện". Khách truy cập chưa thấy thay đổi — các thay đổi đã lưu nằm trong bản nháp cho đến khi bạn xuất bản.
Bước 11: Xuất bản trang web
Nhấn Xuất bản trong menu bên trái và xuất bản — xem Xuất bản trang web.
Bạn sẽ thấy: Giao diện trong danh sách thay đổi trước khi xuất bản, và trang web mang diện mạo mới sau đó.
Làm sao biết đã thành công
- Trang Mẫu đánh dấu mẫu của bạn là Đang dùng.
- Sau khi xuất bản, trang web hiện màu sắc, phông chữ và logo của bạn — nguyên vẹn, không bao giờ bị cắt.
- Mọi màu dùng cho chữ đều báo dễ đọc, hoặc bạn đã chấp nhận sắc độ dễ đọc mà khách truy cập thấy thay thế.
Có gì đó không ổn?
Mình đã đổi màu nhưng trang web trông vẫn vậy
Lưu chỉ giữ thay đổi trong bản nháp. Nhấn Xuất bản trong menu và xuất bản (bước 11).
Một màu báo "khó đọc"
Chữ màu đó không đủ nổi bật so với nền hoặc thẻ để mọi người đọc được — chữ thường cần 4.5:1 và tiêu đề cần 3:1. Khách truy cập không bao giờ thấy màu khó đọc: trang web hiện sắc độ dễ đọc gần nhất thay thế, và biểu mẫu ghi rõ màu đó. Nhấn Làm cho dễ đọc để dùng sắc độ đó, hoặc tự chọn màu cho đến khi báo dễ đọc. Màu để ở Tự động cũng được điều chỉnh như vậy mà không cần hỏi. Khi xuất bản cũng có cảnh báo, nhưng không bao giờ chặn bạn xuất bản.
Trang web khó đọc vì chỉ có một màu ở khắp nơi
Đặt cho mỗi loại chữ một màu riêng trong Chữ và bề mặt (bước 6): ví dụ Tiêu đề màu đỏ, Văn bản màu xám nhạt cho đoạn văn, và màu Thẻ sáng hơn một chút để các khung nổi bật trên trang. Để tô màu khác cho cả từng phần của trang — cửa hàng sáng trong trang web tối, một dải màu nhấn — xem Đặt màu riêng cho từng phần trang web.
Đổi mẫu có xóa nội dung của mình không?
Không. Nội dung thuộc về trang web, không phải mẫu: màu sắc và phông chữ được giữ lại ở những chỗ mẫu mới dùng đến, tùy chọn riêng của mẫu trở về mặc định, và mục nào mẫu không hiển thị được sẽ bị ẩn chứ không bị xóa. Hộp thoại mở ra trước khi đổi liệt kê cả ba điều này, và bạn có thể hủy. Nếu trang web vẫn dùng màu và phông mặc định của nền tảng — bạn chưa từng chọn bộ màu hay đổi màu nào — thì bộ màu đầu tiên của mẫu mới sẽ được dùng, để trang web trông giống ảnh của mẫu; hộp thoại ghi rõ điều này ở mục Màu sắc và phông chữ. Có bảy mẫu: Broadcast, phong cách ngày thi đấu; Neon Grid, nền đen neon với lưới chuyển động và dải chuyển màu phát sáng sau hero, logo lơ lửng phía trên, bộ đếm số liệu và tường video; Crosshair, đen và kỹ thuật với khung viền, nhãn trong ngoặc vuông, logo chữ lớn ở chân trang và ảnh làm trọng tâm; Faceoff, xanh đen và xanh băng, logo của bạn đối mặt logo đối thủ trên mọi thẻ trận đấu, với hero lớn và đội hình xếp quanh dòng tiêu đề khổng lồ; Clutch, phong cách sáng với thẻ trắng bo góc, tiêu đề in hoa giãn rộng và một màu tươi, trận tiếp theo ở hero và, trên màn hình rộng, ở đầu mọi trang; Varsity, phong cách học đường với các dải xanh navy, một màu vàng, thành tích giải đấu tốt nhất phía trên đội hình, và các trận đấu dạng bảng lịch; và Redline, một màu đỏ trên nền gần đen với ảnh phủ màu chính (mặc định là đỏ), nút vuông và các trận đấu dạng hàng ảnh với hai logo hai bên chữ VS. Tiêu đề của Clutch dùng Archivo Expanded, bạn có thể chọn phông này ở mọi mẫu trong nhóm Heavy display. Trên máy tính hoặc máy tính bảng, nút Join our Discord của Faceoff ở đầu mọi trang chỉ hiện khi bạn đã thêm liên kết Discord trong Mạng xã hội (Thêm mạng xã hội). Mọi mẫu đều hiển thị buổi stream trực tiếp giống nhau: đếm ngược trong ngày, trình phát Twitch ở đầu trang chủ khi bạn đang live, và thanh Live trên mọi trang khác (Lên lịch buổi stream).
Báo "Trang web đã thay đổi từ khi bạn mở"
Một quản trị viên khác đã lưu trước, và chưa có thay đổi nào của bạn được lưu. Nhấn Tải lại, rồi thực hiện lại thay đổi.
Báo "Logo này … Hãy tải lên ảnh vuông"
Logo vuông và favicon phải là ảnh vuông — rộng và cao bằng nhau — và ít nhất 256 × 256 pixel, vì chúng tôi không bao giờ cắt chúng. Thông báo cho biết kích thước ảnh của bạn. Tạo một bản vuông (thêm khoảng trống trong suốt quanh logo ngang), tải lên rồi lưu lại. Logo không vuông thì đặt vào Logo chữ.
Báo "Logo này không có thông tin kích thước"
Chúng tôi không biết kích thước ảnh đó nên không kiểm tra được ảnh có vuông hay không. Tải ảnh lên lại, chọn bản mới, rồi lưu.
Các ô và nút Lưu bị mờ
Gói đăng ký của đội đã hết hạn, nên các trang của trang web chỉ xem được cho đến khi gói hoạt động lại. Hãy gia hạn — xem Quản lý thanh toán.
Bài trợ giúp liên quan
Vẫn chưa giải quyết được? Liên hệ hỗ trợ hoặc gửi email tới support@spawnfront.com — cho chúng tôi biết bạn đang ở trang nào và bước số mấy.