Cấu hình và tuỳ chỉnh thiết kế, nội dung của header website
Header là thành phần quan trọng bậc nhất của website, tại đây cung cấp các điều hướng chính và các thông tin nổi bật. Người dùng cũng thường tìm đến header để tìm kiếm nội dung mình cần. Vì vậy, header cần được sắp xếp một cách hợp lý, dễ dùng và thiết kế một các chuyên nghiệp và bắt mắt để tạo ấn tượng thương hiệu. Thông thường một header website sẽ bao gồm các thành phần sau:
- Logo
- Menu điều hướng nổi dung
- Thông tin liên hệ nổi bật
- Công cụ tìm kiếm
- Các công cụ bán hàng: Giỏ hàng, Order.
Theo đó, Kan Solution cung cấp giải pháp tuỳ chỉnh và sắp xếp các nội dung quan trọng của header một cách linh hoạt và dễ dàng. Dưới dây là hướng dẫn cấu hình và tuỳ chỉnh thiết kế cho header website.
1. Tuỳ chọn cấu hình hiển thị của header
Chọn vào Tuỳ chỉnh website, màn hình hiển thị công cụ cấu hình bên trái, Chọn Header -> Chọn Presets – > Chọn dạng hiển thị header mong muốn
Chú ý khi chọn dạng hiển thị, khung hiển thị sẽ xuất hiện demo theo giao diện đã chọn bên trên và cấu trúc tổ chức nội dung bên dưới. Cấu trúc của header thường bao gồm 2 hoặc cả 3 phần: Top bar, Header Main và Bottom
Tại mỗi phần của header, khi chọn, bạn sẽ thấy bên trái xuất hiện bảng điều chỉnh các tuỳ chọn về màu sắc, kích thước các phần nội dung trên header
2. Thay đổi logo website
Thông thường Logo thường nằm ở Header Main. Chọn vào hình Bánh răng tại chữ logo để thiết lập. Khi click vào, bên trái sẽ xuất hiện bảng tuỳ chỉnh, bạn có thể thay đổi, tuỳ chỉnh các thông tin sau:
- Logo Position: Tuỳ chọn vị trí logo nằm bên trái hoặc gữa
- Hình ảnh logo: Click chọn hình ảnh của logo trên Media
- Logo Width: Xác định chiều rộng của logo, chiều cao sẽ được tự động căn chỉnh dựa theo hình ảnh logo, đảm bảo logo không bị cắt hoặc méo
- Logo padding: Khoảng trắng xung quanh logo
- Logo link: Link tuỳ chỉnh khi người dùng click vào logo
- Biểu tượng site: Hình ảnh biểu tượng trên thanh trình duyệt, Kích thước dạng hình vuông
3. Sắp xếp các nội dung trên Header
Tại bảng cấu trúc header, bạn sẽ nhìn thấy danh sách các nội dung có thể sắp xếp lên header, kết hợp với các nội dung đã sắp xếp sẵn trên header sẽ chứa đầy đủ các nội dung bạn cần lên trên header của mình. Bạn chỉ cần kéo thả các nội dung vào vị trí mong muốn bao gồm top bar, header main và header bottom. Các phần sẽ được chia làm nhiều cột hiển thị tuỳ cấu hình hiển thị (Presets) bạn chọn. Danh sách các nội dung điều chỉnh bao gồm:
- Main Menu: Tuỳ chọn thiết kế, màu sắc, kích thước, cách hiển thị cho menu chính. Cấu hình menu chính tại menu
- Vertical Menu: Thường là menu dạng dọc, dành cho các danh mục sản phẩm trên website
- Search Form: Công cụ search, có nhiều dạng hiển thị và tyle cho bạn chọn lựa
- Contact: Hiển thị thông tin và Icon liên hệ qua điện thoại, email…
- Button 1 -2: Các nút tuỳ chỉnh: Bạn có thể thêm nút mình mong muốn với liên kết và nội dung tuỳ chỉnh
- Account: Dành cho các user của website
- Cart: Công cụ giỏ hàng của website bán hàng
- Wishlist: Danh sách sản phẩm mong muốn
- Checkout Button: Nút tiến hành thanh toán với các sản phẩm đang có trong giỏ hàng
- Laguages: Trường hợp website sử dụng nhiều ngôn ngữ
- HTML 1-4: Tuỳ chỉnh nội dung, thông báo của website
- Block 1-2: Tuỳ chỉnh nội dung thiết kế thông qua của Block
- Top Bar Icon: Các Icon, liên kết khác
- Social Icon: Hiển thị Icon và liên kết với mạng xã hội
- Nav Icon: Hiển thị Icon điều hướng, click vào sẽ xuất hiện menu điều hướng
- Search Icon: Hiẻn thị Icon search, click hiển thị hộp điền từ khoá
- Newsletter: Hiển thị hộp lấy thông tin đăng ký Nesletters của khách hàng
