Header là phần trên cùng, xuất hiện ở mọi nơi trong trang web.
Một ví dụ dễ thấy nhất là phần Logo và Menu. Đây là 2 phần cơ bản của Header.
Để tạo Header mà không cần code, bạn có thể sử dụng Plugin Beaver Buider và Beaver Themer. Hai plugin này cho phép bạn tạo ra toàn bộ bố cục của website.
Header đơn giản
Header đơn giản bao gồm một số kiểu chính là:
- Kiểu 1: Logo và Menu
- Kiểu 2: Chỉ có Menu
- Kiểu 3. Logo, Menu, nút Call to Action
- Kiểu 4. Logo và Menu (có icon)
- Kiểu 5. Topbar (trên), Logo và Menu (dưới)
- Kiểu 6: Logo (trên) và Menu (dưới) hoặc Ngược lại
Topbar là phần phía trên của Header, thường sẽ chứa thông tin liên hệ như Email, SĐT hoặc lời chào mừng, hoặc một số liên kết mạng xã hội.
Sticky Header
Header sẽ đính vào phần trên cùng của website khi cuộn chuột. Cuộn chuột tới đâu, header đi theo tới đó.
Sticky Header cũng có một số kiểu:
- Kiểu 1: Logo và Menu
- Kiểu 2: Logo (trên, sticky) – Menu (dưới)
- Kiểu 3: Logo (trên) – Menu (dưới, sticky)
- Kiểu 4: Topbar (trên, sticky) – Logo, Menu (dưới)
- Kiểu 5: Topbar (trên) – Logo, Menu (dưới, sticky)
Header thu nhỏ (Shrink Header)
Khi cuộn chuột, header sẽ thu nhỏ chiều cao và chiều rộng các phần tử bên trong và đính vào phần trên cùng website. Kéo chuột tới đâu thì header đi theo tới đó.
Bạn có thể kết hợp các kiểu Shrink Header tương tự Sticky Header.
Header trong suốt (Transparent Header)
Header có màu nền là trong suốt.
Header với Logo ở giữa
Header có Menu ở 2 bên và Logo ở giữa
Không Header
Web không có Header, hoặc Header bị ẩn. Thường gặp ở các trang Landing Page.