# Trình tạo header và footer từ các khối thực sự URL: https://canvaswp.com/vi/header-builder/ Updated: 2026-11-03 Trình tạo header Header, footer, thanh trên cùng, mega menu, bảng bên, tiêu đề trang và hero là các bản ghi bạn thiết kế trong trình chỉnh sửa khối, sau đó gán cho toàn bộ trang web hoặc cho một trang riêng lẻ. [Xem trong các bản demo](https://canvaswp.com/vi/demos/) [Cách trình chỉnh sửa hoạt động](https://canvaswp.com/vi/editor/) Cập nhật 3 tháng 11, 2026 Cách xây dựng một header ## Các khối được lồng nhau đúng như bạn mong đợi Một bản ghi header chứa một Header Root. Root chứa một Container, và Container chứa các Zone. Zone là một ô trong hàng header: logo ở một ô, menu ở ô kế tiếp, biểu tượng tìm kiếm và giỏ hàng ở ô cuối. ### Các vùng tạo nên bố cục Vùng quyết định vị trí của từng thành phần. Đẩy một vùng sang phải, gom tìm kiếm và giỏ hàng thành một cụm, hoặc để vùng trống khi bạn muốn mã HTML gọn gàng hơn. - Các vùng tự sắp xếp lại theo từng điểm ngắt, nên một bản ghi bao gồm máy tính, máy tính bảng và điện thoại - Bất kỳ vùng nào cũng có thể được giới hạn cho một nhóm thiết bị và không xuất hiện trong mã trên các nhóm còn lại - Lớp CSS bổ sung trên một vùng khi bạn muốn truy cập vùng đó từ CSS riêng của mình [Mọi khối trong thư viện](https://canvaswp.com/vi/blocks/) ### Bộ 22 khối header #### Header Root Chính header này. Mọi thứ khác đều nằm lồng bên trong. #### Header Container Một container chiều rộng, để header có thể nằm trong khung, toàn chiều rộng hoặc kết hợp cả hai ở các điểm ngắt khác nhau. #### Header Zone Một ô trong hàng tiêu đề. Các vùng chứa thành phần và quyết định vị trí của chúng. #### Header Logo Logo của bạn, kèm tệp riêng cho trạng thái cố định và trạng thái nền tối. #### Header Navigation Menu chính, với menu thả xuống và bảng mega menu. #### Header Search Biểu tượng tìm kiếm mở ra một ô nhập, hoặc một ô nhập luôn mở. #### Header Cart Giỏ hàng WooCommerce với số lượng mặt hàng và bản tóm tắt xổ xuống. #### Header Social Một dãy biểu tượng mạng xã hội từ các hồ sơ bạn đã thiết lập một lần. #### Header Button Khối nút kêu gọi hành động với các cài đặt kích thước, kiểu dáng và liên kết thông thường. #### Header Icon Link Một biểu tượng duy nhất có thể liên kết đến bất kỳ đâu, như số điện thoại hoặc trang tài khoản. #### Header Info Một khối nhỏ chứa thông tin liên hệ, địa chỉ hoặc giờ mở cửa. #### Header Shop Search Tìm kiếm sản phẩm cho cửa hàng, giới hạn trong danh mục sản phẩm của bạn. #### Header Topbar Đặt bản ghi thanh trên cùng phía trên hàng header. #### Mega Menu Column Một cột bên trong bảng mega menu, giúp bảng có thể chứa bố cục thực sự. Bố cục có sẵn ## 7 bộ thiết lập sẵn để bắt đầu Preset là tập hợp các thiết lập bố cục mà bạn áp dụng chỉ với một cú nhấp. Chọn hành vi bạn muốn, rồi thay đổi bất kỳ thiết lập nào trong cài đặt khối. ### Minh bạch Không có nền, nên mọi thứ nằm phía sau header đều hiển thị xuyên qua. ### Bán trong suốt Nền bán trong suốt, để hình ảnh phía sau vẫn hiển thị và văn bản vẫn dễ đọc. ### Dạng nổi Header nằm lơ lửng trong trang, có khoảng trống xung quanh ở mọi cạnh. ### Nổi, bán trong suốt Dạng nổi, kèm nền mờ trong suốt. ### Nổi và thu gọn Một header nổi với chiều cao giảm. ### Toàn chiều rộng, cố định Trải dài toàn bộ chiều rộng khung nhìn và được ghim cố định khi trang cuộn. ### Cố định khi cuộn lên Ẩn khỏi đầu trang khi khách truy cập cuộn xuống và xuất hiện lại khi họ cuộn lên. Thành phần tái sử dụng ## Thanh trên cùng, mega menu và bảng bên cũng là bản ghi Thiết kế từng header một lần, đặt làm mặc định cho website, rồi ghi đè trên những trang cần thiết kế khác. ### Thanh trên cùng Top bar là một bản ghi riêng với các khối riêng: số điện thoại, giờ mở cửa, bộ chuyển đổi ngôn ngữ, chương trình khuyến mãi. Khối Header Topbar đặt nó phía trên hàng header. Gán một top bar cho toàn site rồi ghi đè theo từng trang. 12 trong số 88 bản demo có thanh trên cùng mà bạn có thể chỉnh sửa. ### Mega menu Mega menu là một bản ghi bạn thiết kế bằng các khối và hiển thị bằng khối Mega menu. Một mục menu sau đó mở ra một bảng toàn chiều rộng có thể chứa cột, hình ảnh, nút hoặc bất kỳ khối nào khác. Mega Menu Column giữ bảng trên một lưới. 5 bản demo đã có sẵn một khối như vậy. ### Bảng bên Bảng bên là một bản ghi trượt ra từ mép màn hình, dùng cho menu phụ, giỏ hàng, form liên hệ hoặc một nhóm chi tiết mà nếu để trên header sẽ làm header quá chật. 6 bản demo đi kèm bảng bên đã được kết nối sẵn với một nút kích hoạt. Gán một bản ghi là một trường: chọn bảng bên mặc định, cạnh mà bảng trượt ra, việc bảng đẩy trang hay nổi lên trên trang, và nút kích hoạt trông như thế nào. Thanh trên cùng, mega menu và footer được gán theo cách tương tự. Tùy chọn header ## 94 trường, phần lớn nhất trong Tùy chọn giao diện Tùy chọn giao diện chứa các thiết lập header dùng chung cho toàn trang web, những thiết lập mà không bản ghi riêng lẻ nào nên quản lý. Khi nhập bản demo, mọi thiết lập này được áp dụng sẵn, và bạn chỉ cần thay đổi những mục bạn quan tâm. - 94 trong số 533 trường Tùy chọn giao diện thuộc về header - Đặt bản ghi header mặc định, sau đó ghi đè trên bất kỳ trang nào - Hành vi sticky, chiều cao, khoảng cách và điểm ngắt trên thiết bị di động - Mọi trường đều được ghi chú trong các bài viết tham khảo [Tất cả 533 mục trong Tùy chọn giao diện](https://canvaswp.com/vi/features/#options) **Tùy chọn giao diện, Header.** Chính bảng tùy chọn này, được chụp trên một trang web đang chạy. Mẫu có sẵn ## 40 mẫu header để bắt đầu Chèn một mẫu và bạn sẽ có các khối thông thường để sắp xếp lại, đổi tên hoặc xóa. Không có gì bị khóa, và không có thứ gì chỉ là ảnh chụp màn hình của một bố cục bạn không thể chạm tới. - 40 mẫu header, nhiều hơn bất kỳ danh mục nào khác - 16 mẫu footer cho phần dưới cùng của trang - Tổng cộng 183 mẫu, được xếp vào 17 danh mục - Được chèn từ tab Pattern của trình chèn mà bạn đã quen dùng [Mẫu bố cục theo danh mục](https://canvaswp.com/vi/editor/#patterns) Trình tạo footer ## Footer và thanh bản quyền là các bản ghi riêng biệt Footer hoạt động hoàn toàn giống header. Bản ghi Footer chứa các cột, còn bản ghi Copyrights chứa thanh mỏng bên dưới, nhờ đó bạn có thể thay đổi dòng thông tin pháp lý trên toàn trang mà không cần chạm vào thiết kế phía trên. ### Sáu khối và 17 tùy chọn Footer About dùng cho đoạn giới thiệu công ty, Footer Contacts cho địa chỉ và số điện thoại, Footer Instagram cho nguồn cấp nội dung, Footer Widget Area cho bất kỳ nội dung nào mà widget có thể hiển thị, Widget Links cho một cột liên kết gọn gàng, và Copyrights cho thanh dưới cùng. - Gán footer toàn cục hoặc theo từng trang, giống như header - Một bản ghi bản quyền riêng cho thanh bên dưới - 16 mẫu chân trang để bắt đầu - Xem trước trong khung chỉnh sửa khi bạn xây dựng trang **Tùy chọn giao diện, Footer.** 17 trường toàn trang web nằm sau các bản ghi footer. Tiêu đề trang ## 4 kiểu có sẵn, hoặc tự thiết kế riêng Dải nằm dưới header là một bề mặt thiết kế riêng, với 57 tùy chọn đi kèm và khả năng ghi đè theo từng trang cho mọi trang bạn xuất bản. **Tùy chọn giao diện, Tiêu đề trang.** 57 trường, là phần lớn thứ ba trong sản phẩm. ### Mặc định, Mini, Mẫu hoặc Tùy chỉnh Default là dải tiêu chuẩn. Mini là phiên bản gọn cho các trang bên trong. Template chọn một trong các bố cục chuyên biệt có tên. Custom hiển thị bản ghi tiêu đề trang mà bạn tự xây dựng từ các khối. - Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks - Mặc định trên toàn trang web mà bất kỳ trang đơn lẻ nào cũng có thể ghi đè - Nền, chiều cao, căn lề và breadcrumb đều là các thiết lập [Tiêu đề trang trong danh sách tính năng](https://canvaswp.com/vi/features/#page-titles) Hero và slider ## Được đặt vào mẫu bằng một khối slot Hero và slider là các bản ghi riêng, giống như header. Khối slot nằm trong mẫu khối và kéo hero hoặc slider được gán cho trang đang xem vào. - Bản ghi Hero và bản ghi Slider, cả hai đều được tạo từ các khối - Khối Hero Slot và Slider Slot nằm trong mẫu, không nằm trong nội dung của bạn - Một mẫu dùng chung cho mọi trang, mỗi trang có phần mở đầu riêng - 12 trong số 88 bản demo đi kèm slider có thể chỉnh sửa [Hero và slider](https://canvaswp.com/vi/features/#heroes) Trong trình chỉnh sửa ## Bạn xây dựng header ngay tại nơi bạn sẽ nhìn thấy nó Các khối slot đưa header, thanh trên cùng, tiêu đề trang, hero và footer vào khu vực chỉnh sửa, để trang mở ra giống một trang thực thụ thay vì một khối đoạn văn. Một trang trong trình chỉnh sửa khối, với header và footer được vẽ quanh nội dung bằng cùng đoạn mã mà khách truy cập nhìn thấy. ### Một trình kết xuất Header bạn thấy trong vùng canvas được vẽ bởi cùng đoạn mã vẽ nó cho khách truy cập, nên không có bản xem trước riêng nào cần giữ đồng bộ. ### Toàn cục hoặc theo từng trang Đặt header, thanh trên cùng, tiêu đề trang, hero và footer mặc định cho website, sau đó ghi đè bất kỳ mục nào trên một trang riêng từ phần cài đặt của chính trang đó. ### Thích ứng mọi thiết bị ngay từ thiết kế Các vùng sắp xếp lại theo từng điểm ngắt và có thể giới hạn cho một nhóm thiết bị, nhờ đó bạn kiểm tra bố cục điện thoại trong trình chỉnh sửa trước khi bất kỳ ai khác nhìn thấy. [Mọi thứ mà trình chỉnh sửa làm được](https://canvaswp.com/vi/editor/) Câu hỏi ## Giới thiệu về trình tạo header Phần còn lại của câu trả lời nằm trong [FAQ đầy đủ](https://canvaswp.com/vi/faq/) và [tài liệu](https://docs.canvaswp.com/how-to-build-a-header). **Bạn có cần một header riêng cho thiết bị di động không?** Một header Canvas duy nhất thường cũng đủ cho di động, vì các vùng sắp xếp lại theo từng điểm ngắt và mỗi vùng có thể giới hạn theo nhóm thiết bị. Một bản ghi header có thể đưa logo vào giữa trên điện thoại, ẩn thông tin liên hệ và chuyển menu vào sau một nút chuyển đổi. Chỉ nên tạo bản ghi thứ hai khi bạn thực sự muốn một thiết kế khác, chứ không phải để sửa bố cục. **Một trang có thể dùng header khác không?** Có, mọi header, thanh trên cùng, tiêu đề trang và footer của Canvas đều có mặc định toàn trang và ghi đè riêng cho từng trang, nên một trang đích có thể dùng header trong suốt và thanh trên cùng chỉ có logo, trong khi phần còn lại của trang giữ cấu hình riêng. **Header là khu vực widget hay menu?** Header Canvas không phải là cả hai: nó là một bản ghi bạn chỉnh sửa trong trình chỉnh sửa khối, giống hệt một trang. Điều hướng, logo, tìm kiếm, giỏ hàng và nút bên trong nó là các khối có bảng cài đặt riêng. **Điều gì xảy ra với header của tôi khi giấy phép hết hạn?** Khi giấy phép Canvas hết hạn, header và phần còn lại của website vẫn hiển thị như hiện tại. Phần bị tạm dừng là dịch vụ: cập nhật, nhập bản demo, CanvasAI Engine và chỉnh sửa khối cao cấp sẽ dừng cho đến khi bạn gia hạn. Nếu kiểm tra giấy phép không kết nối được với máy chủ của chúng tôi, bạn có thời gian ân hạn 14 ngày. **Tôi vẫn có thể sử dụng Trình chỉnh sửa trang không?** Có, Canvas được xây dựng trên các mẫu khối thực thụ, nên template và template part vẫn nằm đúng nơi WordPress lưu trữ, và một bản ghi header được đặt vào template thông qua một khối. [Đọc cách trình chỉnh sửa hoạt động](https://canvaswp.com/vi/editor/).