Giới thiệu

Banner (hero section) là khu vực hiển thị đầu tiên khi người dùng truy cập website Tournament. Khu vực này thường bao gồm ảnh nền banner, logo giải đấu và tiêu đề chính, giúp truyền tải ngay thông tin về giải đấu, mùa giải và nhận diện thương hiệu.
Trong theme Tournament, banner được quản lý thông qua bài viết dạng Trang, cho phép Admin chủ động chỉnh sửa cả nội dung HTML lẫn CSS giao diện.

Hướng dẫn sử dụng

Truy cập khu vực quản lý banner trang chủ

1.png
Từ Admin, bạn vào: Các phần trang→ Trang chủ. Tại đây, tìm mục Phần đầu trang dùng cho banner trang chủ, thường có tên như: "`home_header`" . Nhấn Sửa để mở màn hình chỉnh sửa nội dung banner.

Cấu trúc banner (Hero section) trên trang chủ

2.png
Trong khung soạn thảo nội dung HTML, banner thường được khai báo dưới dạng một khối section, ví dụ:
Thẻ
hoặc tương đươngBên trong gồm:
  • Logo giải đấu
  • Tiêu đề chính
  • Tiêu đề phụ (mùa giải / năm tổ chức)
👉 Việc chỉnh sửa banner chủ yếu sẽ thực hiện ngay trong khối HTML này.

Tùy chỉnh logo hiển thị trên banner

3.pngTrong phần HTML của banner, logo thường được khai báo bằng thẻ .Cách chỉnh logo:
  • Thay đổi đường dẫn src để trỏ tới ảnh logo mới
  • Logo nên được upload sẵn trong Media, sau đó copy URL để dán vào src
Có thể chỉnh:
  • Kích thước logo (height, width)
  • Thuộc tính alt để mô tả logo
📌 Lưu ý:
  • Nên dùng logo nền trong suốt (PNG) để hiển thị đẹp trên banner
  • Không nên dùng ảnh quá lớn để tránh tải trang chậm

Tùy chỉnh tiêu đề chính và tiêu đề phụ

Ngay dưới logo là các thẻ tiêu đề, thường là:
  • Tiêu đề chính: tên giải đấu
  • Tiêu đề phụ: mùa giải, năm tổ chức
Cách chỉnh:
  • Thay đổi nội dung văn bản trong các thẻ <h1>, <h2> hoặc tương đương
  • Có thể viết hoa toàn bộ hoặc theo phong cách thương hiệu
Ví dụ:
  • Tiêu đề chính: GIẢI ĐẤU THẦN ĐỒNG CỜ VUA
  • Tiêu đề phụ: MÙA 2 · 2025
👉 Nội dung này sẽ hiển thị trực tiếp ở trung tâm banner ngoài website.

Tùy chỉnh ảnh nền banner

4.pngẢnh nền banner thường được cấu hình trong phần CSS bổ sung đầu trang (hoặc ngay trong style của section). Cách chỉnh ảnh nền:
  • Tìm thuộc tính background hoặc background-image
  • Thay URL ảnh nền bằng ảnh banner mới đã upload trong Media
📌 Khuyến nghị:
  • Dùng ảnh có chiều ngang lớn, độ phân giải cao
  • Nội dung ảnh không quá rối để logo và tiêu đề dễ đọc

Tùy chỉnh giao diện (màu sắc, căn chỉnh, hiệu ứng)

Trong phần CSS của banner, Admin có thể:
  • Điều chỉnh chiều cao banner
  • Căn giữa nội dung (logo + tiêu đề)
  • Thay đổi màu chữ cho tiêu đề
  • Chỉnh hiệu ứng gradient hoặc độ mờ lớp phủ
Những thay đổi này giúp banner:
  • Đồng bộ với màu sắc tổng thể của website
  • Tạo điểm nhấn thương hiệu cho giải đấu
👉 Sau mỗi lần chỉnh CSS, nên lưu và kiểm tra ngay ngoài giao diện người dùng.

Lưu và kiểm tra hiển thị ngoài website

5.pngSau khi hoàn tất chỉnh sửa:
  • Nhấn Cập nhật
  • Truy cập website Tournament
Kiểm tra banner trang chủ:
  • Logo hiển thị đúng, rõ nét
  • Tiêu đề và tiêu đề phụ đúng nội dung
  • Ảnh nền hiển thị đẹp, không vỡ
  • Tổng thể giao diện cân đối, đồng bộ với menu và các trang khác

Lưu ý

✔ Mỗi lần chỉnh sửa HTML/CSS nên thay đổi từng phần nhỏ để dễ kiểm soát lỗi✔ Luôn kiểm tra banner trên nhiều kích thước màn hình (desktop, tablet)✔ Không xóa cấu trúc section nếu chưa hiểu rõ, tránh làm hỏng layout trang chủ