Header của một trang web là phần đầu tiên mà người dùng thấy khi truy cập vào trang đó. Thường nằm ở phía trên cùng của trang, header bao gồm các thành phần như logo, menu điều hướng, tìm kiếm và thông tin liên hệ. Header giúp người dùng dễ dàng truy cập các phần khác của trang web và tạo ra một cấu trúc tổ chức cho giao diện người dùng.
Header được xem như “lời mời gọi” với nhiệm vụ cung cấp thông tin cốt lõi về sản phẩm digital để người dùng có thể nắm bắt thông tin chỉ trong vài giây. Tại đây còn chứa các tiêu đề chính của website, giúp người truy cập dễ dàng điều hướng sang phần thông tin khác. Để hiểu hơn về header là gì trong website thì ta cần biết những yếu tố/ thành phần thường xuất hiện ở header trang web.
Một tiêu đề cơ bản thường bao gồm:
- Logo Menu điều hướng
- Đăng nhập/ Giỏ hàng
- Thông tin liên hệ
- Các CTA (kêu gọi hành động)
Khi bạn thiết kế header nổi bật, trình bày tất cả các thông tin cần thiết ở nơi mà khách truy cập muốn xem sẽ giúp khách hàng ấn tượng mạnh với website. Điều này không đồng nghĩa với việc tất cả các yếu tố được đề cập ở trên đều được sử dụng trong cùng một header, vì chúng có thể gây ra tình trạng quá tải thông tin, khiến người dùng bị rối. Càng nhiều đối tượng thu hút sự chú ý, càng khó tập trung vào trọng tâm.
Hướng dẫn thiết kế Header và cấu hình nội dung header trên website của Leadpage
Sau khi đăng nhập và tiến vào khu vực quản trị của website của bạn trên nền tảng Leadpage.vn bạn thực hiện các bước theo quy trình sau:
Bước 1: Chọn loại bố cục hiển thị cho Header website của bạn
Chọn Menu Giao diện -> Header -> Chọn bố cục:
Sau khi chọn Header, bạn sẽ thấy hàng loạt bố cục thiết kế sẵn có do Leadpage xây dựng, đây là những bố cục thường dùng của hầu hết các website hiện nay, bạn chỉ cần lựa chọn rồi sau đó vào trong cấu hình. Khi bạn chọn bố cục, Hệ thống sẽ đưa bạn vào cấu hình. Bạn yên tâm rằng bên trong cấu hình header có đủ 3 tầng nội dung bao gồm : Top Header, Middle Header và Bottom Header và bạn có thể chủ động bật tắt các tầng này để đảm bảo Header của bạn được tuỳ chỉnh ở mức cao nhất.
Bước 2: Làm quen giao diện cấu hình nội dung cho Header
Sau khi chọn, bạn sẽ được đưa vào khu vực quản trị và sắp xếp bố cục nội dung cho header của mình theo hình sau:
- Theo đó cột bên trái là thanh điều hướng điều chỉnh bố cục Header website của bạn
- Chính giữa là phần hiển thị Header của bạn sau khi điều chỉnh và hiển thị bên ngoài website
- Trên cùng chính giữa là vùng bạn có thể điều chỉnh kích thước màn hình hiển thị để xem Header sẽ hiển thị thế nào trên Mobile, Laptop và Tablet
- Góc phải trên cùng để Lưu lại những tuỳ chỉnh của bạn
- Góc trên cùng bên trái để quay về trang chủ quản trị, bật tắt cột thanh điều hướng và zoom phóng màn hình điều khiển
Bước 3: Thiết lập bố cục cho Header của bạn
Ở bước 2, bạn đã thấy giao diện quản trị khu vực cấu hình Header, tại đây, để cấu hình bố cục header, bạn chọn “Cài đặt”
Tại đây bạn sẽ thấy các điều chỉnh về độ rộng Header, Cấu hình màu,hình nền của header, các khoảng cách Padding và Margin của Header và các tuỳ chỉnh hiển thị cho Top, Middle và Bottom Header
Tắt/Mở và tuỳ chỉnh thiết kế của Top Header:
Click 3 chấm ở Top Header để mở hộp điều khiển, Chọn Hiển thị Top Header để bật tắt Header, Top Header sẽ được hiển thị tại khu vực chính giữa với các thông tin mặc định, Bạn có thể tuỳ chỉnh màu nền và khoảng cách của Top Header so với phần còn lại. Các nội dung trên Top Header được tuỳ chỉnh ở các Menu khác
Làm tương tự cho Main Header (Middle Header) và Bottom Header
Bước 4: Thay đổi logo cho website trên Header
Bước này đơn giản là bạn vào Menu Header và thay hình ảnh logo cho Header theo hình sau:
Bước 5: Thay đổi thông tin và liên kết mạng xã hội trên Top Header
Đây là khu vực thay đổi các nội dung của Top Header bao gồm các liên kết mạng xã hội và thông tin liên hệ của bạn trên header
Sau khi Click vào menu điều khiển bạn sẽ thấy các nội dung tương ứng để điều chỉnh, sau đó bạn có thể thêm nội dung bằng cách click vào nút Thêm nội dung và điều chỉnh màu sắc, khoảng cách bằng cách click vào 3 chấm của nội dung bạn cần điều chỉnh
Bước 6: Thay đổi Menu (Thanh điều hướng) trên Main Header
Đây là phần quan trọng nhất của một Header – Menu cung cấp điều hướng của website cho tất cả các trang trên website, trong trường hợp bạn sử dụng Landing page, menu điều hướng có thể giúp bạn điều hướng đến các section trên Landing page của bạn.
Bạn chọn Menu chính để vào bảng điều khiển Menu
Tại đây bạn sẽ thấy bảng điều khiển Menu tương ứng với menu đang hiển thị của website
Bạn có thể tạo thêm Menu bằng cách click vào nút thêm nội dung ở bên dưới các menu ở thanh điều khiển
Mỗi một Menu điều hướng sẽ bao gồm 3 Icon : 
- Dấu cộng: Tạo các menu con của menu. Bạn có thể tháy tại menu Dự án được tạo 2 menu con là dự án 1 và dự án 2 được tạo ra bằng cách click dấu cộng. Bên ngoài sẽ hiển thị mũi tên chỉ xuống của Dự án giúp người dùng hiểu là bên trong dự án sẽ còn menu con
- Bánh răng thiết lập: Khi chọn bánh răng thiết lập, hệ thống sẽ hiển thị Popup để bạn tạo liên kết điều hướng cho menu. Có 2 loại điều hướng là điều hướng nội bộ: là loại điều hướng có sẵn của website như các trang, bài viết, danh mục trên website và điều hướng tuỳ chỉnh: là loại điều hướng bạn chỉ cần thêm link để hướng người dùng về trang cần liên kết
- Sọt rác: Dùng để xoá Menu nếu bạn thấy chúng không cần thiết hoặc bạn vô tình tạo dư menu
Bước 7: Bật tắt các Icon chức năng trên Header
Các Icon và Menu chức năng được bật tắt cho phù hợp với từng loại website bao gồm:
- Công cụ tìm kiếm
- Giỏ hàng
- Tài khoản
Đối với website landing page, bạn có thể không cần Header, hoặc Header dùng để điều hướng các section trên trang nên không cần sử dụng thanh công cụ tìm kiếm, giỏ hàng, tài khoản, bạn có thể tắt chúng đi ở các Menu này.
Bước 8: Các tuỳ chỉnh khác cho Header của bạn
Bạn đã điều chỉnh được hầu hết các nội dung quan trọng của Header. Bạn cũng có thể kiểm tra hiển thị của header trên Mobile để tiến hành điều chỉnh riêng cho chúng:
Bạn còn 1 lưu ý nữa là trong hầu hết các tuỳ chỉnh nội dung của Header đều sẽ có tab Kiểu hiển thị để bạn tuỳ chỉnh thiết kế cho chúng như khoảng cách, màu sắc, font chữ, kích cỡ…
