Trình tạo header và footer từ các khối thực sự
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ẻ.
Cập nhật
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
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ự.
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.
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.
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ự.
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
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
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
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.
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
Đượ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
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.
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 đủ và tài liệu.
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.
Xây dựng website tiếp theo của bạn với Canvas
Dù là người mới bắt đầu, freelancer hay agency, bạn đều có cùng khối và cùng bản demo. Hãy bắt đầu với một website, rồi xây dựng bao nhiêu website tùy nhu cầu trên cùng một giấy phép.