Phần tử và bảng thuộc tính

Một trang là một cây phần tử: khung chứa khung, bên trong là chữ, ảnh, nút. Bạn dựng trang bằng cách kéo phần tử vào, rồi sửa chúng trong bảng thuộc tính bên phải.

Bảng phần tử

Mục Phần tử (en: Elements) trên thanh công cụ mở bảng phần tử, chia thành sáu nhóm:

Nhóm	en	Bên trong có gì
Bố cục	Layout	Khung chứa (phần, hàng, phần dùng chung) và Pop-up
Cơ bản	Basic	Tiêu đề, văn bản, nút, biểu tượng, đường phân cách, danh sách, tab, accordion, dropdown, popover, carousel, breadcrumb, chữ chạy
Nhập liệu	Input	Biểu mẫu, ô tìm kiếm, từ khoá gợi ý, lựa chọn, và các bộ lọc cửa hàng (checkbox, radio, màu, thẻ, thanh trượt)
Điều hướng	Navigation	Menu
Đa phương tiện	Media	Hình ảnh, so sánh ảnh, ảnh chạy, video, YouTube, Vimeo, SoundCloud, mã QR
Nâng cao & Nhúng	Advanced & Embeds	Bản đồ Google, mã tùy chỉnh, nút sáng/tối

Quy tắc chia nhóm là bạn đang tìm thứ gì, không phải nó được dựng thế nào — nên Biểu mẫu nằm ở Nhập liệu, cạnh các ô khách điền, chứ không ở Nâng cao.

Mục Cửa hàng (en: Store) trên thanh công cụ là bảng riêng, chứa các phần tử lấy dữ liệu từ danh mục của bạn: Sản phẩm, Bộ sưu tập, Bài viết, Chuyên mục blog, Đánh giá, Gian hàng (giỏ hàng, đổi tiền tệ) và Thành viên (những gì chỉ khách đã đăng nhập mới thấy — xem Tài khoản khách hàng). Một số nhóm chỉ hiện khi ứng dụng tương ứng đã cài: Khoá học, Đa ngôn ngữ, Điểm thưởng, Thanh toán. Xem Danh sách tự đổ dữ liệu.

Ô tìm kiếm ở đầu mỗi bảng lọc theo tên, nhanh hơn cuộn.

Đưa một phần tử lên trang

Kéo thẻ của nó từ bảng vào canvas. Trong lúc kéo, một chỉ báo cho biết nó sẽ rơi vào đâu — trước, sau, hay bên trong khung bạn đang rê qua.

Gần như mọi thứ đều phải nằm trong một khung chứa. Muốn xếp vài thứ cạnh nhau, thả một khung Bố cục trước rồi bỏ chúng vào; đó là cách duy nhất để chúng cùng chịu một khoảng cách, một nền, một khoảng đệm.

Chọn một phần tử

Bấm vào nó. Đường viền chọn hiện ra kèm một thanh công cụ nhỏ, và bảng bên phải đổi sang tuỳ chọn của nó.

Khi chúng nằm lồng nhau, cú bấm đầu tiên thường trúng phần tử trong cùng. Hai cách đi ngược ra ngoài:

• ⌘ ↑ chọn phần tử cha. Bấm tiếp để đi tiếp ra ngoài. (Windows/Linux dùng Ctrl.)
• Mở Lớp (en: Layer) trên thanh công cụ và bấm thẳng vào nhánh bạn muốn. Cây lớp là cách đáng tin nhất khi trang đã sâu.

Esc bỏ chọn.

Bảng thuộc tính

Bảng bên phải hiện những gì sửa được trên phần tử đang chọn, gom thành nhóm: bố cục, khoảng cách, chữ, nền, viền, đổ bóng, và các nhóm riêng của phần tử đó. Chỗ nào cần giải thích thì có dấu ? cạnh nhãn — rê chuột vào để đọc.

Khi bạn mở trợ lý AI, bảng thuộc tính chuyển sang bên trái. Trợ lý chiếm cột bên phải, nên bảng thuộc tính dọn vào mục Lớp (en: Layer) và nằm đó cho tới khi bạn đóng trợ lý. Đầu bảng có mũi tên quay lại để về danh sách lớp; bấm một lớp là mở lại thuộc tính của phần tử đó. Đóng trợ lý thì mọi thứ về chỗ cũ, kể cả bảng bạn đang mở trước đó.

Vài thói quen đáng có:

Liên kết / bỏ liên kết các cạnh. Khoảng đệm và bo góc có một nút bật tắt giữa "cả bốn cạnh như nhau" và "từng cạnh một".

"Không đặt" khác với 0. Với chiều rộng/cao tối thiểu và tối đa, Không đặt nghĩa là phần tử tự quyết; 0 là một con số bạn áp lên nó.

Vừa nội dung, Lấp đầy khung, Tùy chỉnh. Ba cách một phần tử quyết định bề rộng: co theo nội dung, giãn hết chỗ trống, hay một con số bạn gõ.

Biểu thức calc. Ở chỗ cần một phép tính, bạn gõ được calc của CSS. Nó chỉ nhận độ dài, + - * /, var() và dấu ngoặc; gõ sai thì ô nói ngay chứ không lưu một giá trị không chạy được.

Một phần tử có thể làm việc gì đó

Nhiều phần tử có nhóm Hành động: Khi nhấp (en: On click) làm gì. Có sẵn: mở liên kết, mở trang, mở pop-up, mở/đóng giỏ hàng, đến thanh toán, mở/đóng/ bật-tắt menu, mở/đóng/bật-tắt dropdown, chuyển tab, lưu để xem sau, đăng xuất, và các thao tác trên dòng giỏ hàng.

Chọn một hành động chưa chạy được trên trang đã xuất bản thì trình chỉnh sửa nói thẳng, ví dụ "Đã lưu, nhưng phần tử này chưa hiển thị dạng liên kết nên không tới được đích." — thay vì để bạn tự phát hiện sau khi lên sóng.

Dropdown và Popover

Hai phần tử ở Cơ bản cùng một cấu tạo: một vùng trigger bạn bấm và một panel mở ra, kéo gì vào cũng được. Khác nhau ở câu hỏi chúng trả lời: Dropdown treo một bảng dưới nút (menu tài khoản, chọn ngôn ngữ); Popover nổi một thẻ nhỏ cạnh thứ gì đó và chỉ về nó bằng mũi tên (một biểu tượng thông tin, một mức giá).

Bốn điều không tự nhìn ra:

• Trên canvas, panel chỉ hiện khi bạn đang chọn phần tử (hoặc thứ gì bên trong nó). Bỏ chọn là panel gập lại để khỏi che trang — bấm lại là thấy.
• Trigger và panel là hai phần cố định. Đổi nội dung bên trong thoải mái, nhưng không xoá hay kéo riêng từng phần ra. Muốn bỏ thì xoá cả phần tử.
• Khi rê chuột chỉ có tác dụng trên máy có chuột. Màn hình cảm ứng luôn là chạm, nên bật tuỳ chọn này không làm mất đường bấm.
• Không chỉ trigger của nó mới mở được. Bất kỳ phần tử nào có nhóm Hành động đều nhận Mở dropdown, Đóng dropdown, Bật/tắt dropdown rồi trỏ vào cái bạn muốn — nên một ảnh đại diện ở đầu trang mở được bảng nằm chỗ khác, và dấu ✕ đặt trong panel đóng được chính nó. Ba hành động này gọi được cả Popover lẫn Lựa chọn.

Ba hàng trong bảng thuộc tính, đặt riêng được cho từng khổ màn hình: Vị trí (trên · dưới · trái · phải — Dropdown mặc định dưới, Popover mặc định trên), Căn panel (đầu · giữa · cuối cạnh đó), và với Popover thêm Mũi tên bật/ tắt.

Gắn vào một phần tử có sẵn

Không cần bắt đầu từ Dropdown. Chọn bất kỳ phần tử nào trên trang — một nút, một biểu tượng, một ảnh đại diện — rồi bấm ⋮ trên thanh công cụ và chọn Gắn Dropdown hay Gắn Popover; hoặc ở thẻ Nâng cao của bảng thuộc tính, nhóm Gắn vào có hai nút Dropdown / Popover. Phần tử đó trở thành trigger ngay tại chỗ nó đang đứng, kèm một panel mở sẵn để kéo nội dung vào. ⌘ Z hoàn tác cả cụm.

Tháo khỏi Dropdown/Popover ở cùng chỗ làm ngược lại: phần tử về chỗ cũ, panel và mọi thứ trong đó bị xoá — nên nếu panel đang có nội dung, trình chỉnh sửa hỏi lại trước.

Lựa chọn

Phần tử → Nhập liệu → Lựa chọn (en: Elements → Input → Select) là một nút mở ra danh sách để khách chọn một giá trị — sắp xếp kệ hàng, hay lọc theo một thuộc tính.

Nó là phần tử riêng, không phải một kiểu của Dropdown: Dropdown chứa nội dung bạn kéo vào, còn Lựa chọn gắn với dữ liệu và tự đổ ra các dòng. Bạn vẫn chỉnh màu, viền, đệm của nút và bảng như thường; chỉ phần chữ là do dữ liệu quyết định.

Trong bảng phần tử, hàng Lựa chọn mở ra các thẻ kiểu — Boxed, Rounded, Underline… — như hàng Tìm kiếm: thả thẻ nào thì nút mặc đúng kiểu đó, và hàng Kiểu trong bảng thuộc tính của nút cho đổi hoặc bỏ về sau. Trong cây Lớp nó tên là Select; hai phần con là Select box và Select list.

Cấu hình nó giống hệt các bộ lọc — cùng hộp Cấu hình, mở từ nút trên canvas hoặc từ bảng thuộc tính. Cột phải của hộp là Xem trước: ô đóng đọc đúng placeholder, danh sách mở bên dưới, chạm thử được và không lưu gì. Hộp mở đầu bằng Sắp xếp hay Bộ lọc, vì nó quyết định phần còn lại nghĩa là gì. Bộ lọc Checkbox, Radio, Màu, Thẻ cũng có đúng lựa chọn này: một hàng thẻ đổi thứ tự kệ là cùng một control với hàng thẻ thu hẹp nó.

Những điều đáng biết trước khi dùng:

• Sắp xếp là từ vựng đóng: sáu thứ tự — mới nhất, cũ nhất, giá tăng, giá giảm, tên A-Z, tên Z-A. Đổi tên, đổi thứ tự, tắt bớt thoải mái; không thêm dòng mới được, vì một khoá lạ thì máy chủ bỏ qua và kệ không nhúc nhích mà chẳng báo gì. Với danh sách bài viết, hai mục theo giá không đổi gì.
• Sắp xếp giữ nguyên bộ lọc đang bật, và đưa về trang đầu — trang 3 của thứ tự cũ không còn nghĩa gì. Thứ tự nằm trong địa chỉ nên link chia sẻ được.
• Áp dụng cho chọn đúng danh sách bị ảnh hưởng; các danh sách khác trên trang giữ nguyên. Lọc và sắp xếp chạy cả trên trang bộ sưu tập, trang sản phẩm và trang blog.
• Cách chọn (một hay nhiều) tách khỏi hình dạng: checkbox mặc định tick nhiều, radio mặc định chọn một, nhưng đổi được cả hai chiều. Lựa chọn không có hàng này — một ô chọn giữ đúng một giá trị. Cho chọn nhiều thì có thêm Khi chọn nhiều giá trị: khớp BẤT KỲ hay khớp TẤT CẢ.
• Danh mục tự động là một nguồn riêng, nằm ngay dưới Danh mục trong ô Nguồn. Nó không giữ sẵn danh sách nào: các dòng CHÍNH LÀ danh mục con của danh mục mà trang đang phục vụ, đọc từ slug trên địa chỉ lúc khách mở trang. Nhờ vậy một trang mẫu Danh mục mang một bộ lọc đúng cho mọi danh mục, thay vì phải tạo một trang cho mỗi danh mục. Ngoài trang mẫu Danh mục nó không hiện gì — ở đó nó không có danh mục nào để bám theo.
• Kiểu hiển thị đổi hình dạng bộ lọc giữa ô vuông, ô tròn và thẻ bấm mà không mất gì: mọi giá trị, tên và thiết lập đều giữ nguyên. Bộ lọc màu không nằm trong nhóm đổi được — ô màu của nó là dữ liệu không kiểu nào khác có. Với nguồn danh mục còn thêm Phân cấp: danh mục con thụt vào dưới danh mục cha, hay dàn phẳng hết về một mức.
• Số sản phẩm in số sản phẩm của từng danh mục ngay cạnh tên nó, ví dụ Áo (12). Chỉ nguồn Danh mục có — số này lấy từ một phép đếm gom sẵn trong cơ sở dữ liệu, và danh mục là thứ duy nhất có phép đếm đó; thẻ hay thương hiệu chưa có nên không hiện được hàng này. Danh mục chưa có sản phẩm nào thì không in số, chứ không in (0). Số đếm sản phẩm nằm trực tiếp trong danh mục, không cộng cả danh mục con.
• Hai nguồn lọc dễ bỏ qua: Lịch sử mua hàng (đã mua / chưa mua, theo khách đang đăng nhập — khách vãng lai thấy danh sách trống, và trang này không vào bộ nhớ đệm chung) và Chuyên mục bài viết (tick chuyên mục cha là giữ cả bài trong chuyên mục con).
• Danh sách bật phân trang nói luôn trần của nó dưới ô chọn kiểu tải: tối đa 500 sản phẩm, 200 bài viết, 200 bộ sưu tập hoặc 100 chuyên mục blog cho một danh sách.

Trên trang đã xuất bản: bấm ra ngoài hoặc Esc là đóng, mở menu này thì menu kia tự đóng, bàn phím tới được (Tab, Enter/Space, Esc), và panel sắp tràn màn hình tự neo sang mép còn lại.

Phím tắt đáng nhớ

Việc	Phím
Nhân bản	⌘ D
Xoá	Del
Đổi chỗ trong khung chứa	↑ ↓ ← →
Sao chép / Cắt / Dán	⌘ C · ⌘ X · ⌘ V
Hoàn tác / Làm lại	⌘ Z · ⇧ ⌘ Z
Ẩn/hiện bảng thuộc tính	⌘ \
Tìm nhanh	⌘ K

Mũi tên đổi chỗ theo trục của khung chứa: ← → khi xếp ngang, ↑ ↓ khi xếp dọc.

Tiếp theo

Phần lớn thuộc tính bạn vừa chỉnh được lưu riêng cho từng khổ màn hình. Đó là Sửa riêng cho điện thoại, và là điều nên đọc trước khi bạn chỉnh nhiều.