Cửa sổ trình chỉnh sửa

Trình chỉnh sửa mở ra với khá nhiều thứ cùng lúc. Trang này đặt tên cho từng phần, để mọi hướng dẫn sau đó nói "mở thanh Phần tử" là bạn biết ngay chỗ nào.

Bốn vùng

Thanh công cụ bên trái — một cột biểu tượng, luôn hiện. Mỗi mục mở một bảng trượt ra bên cạnh:

Mục	en	Nó chứa gì
Mẫu	Templates	Các mẫu phần dựng sẵn, kéo thẳng vào trang
Phần tử	Elements	Bảng phần tử — chữ, ảnh, nút, khung, danh sách sản phẩm…
Cửa hàng	Store	Các phần tử lấy dữ liệu từ danh mục của bạn
Lớp	Layer	Cây các phần tử trên trang này
Trang	Pages	Danh sách trang của site, và nơi tạo trang mới
Gán trang	Assign	Gán một trang mẫu cho loại nội dung (chỉ hiện khi trang hiện tại là loại gán được)
Cài đặt	Settings	Cài đặt áp dụng cho mọi trang của site
Phím tắt	Shortcuts	Danh sách phím tắt
Quản lý cửa hàng	Manage store	Chuyển sang trang Quản lý

Bấm lại vào mục đang mở để đóng bảng đó — nút × nằm bên trong thứ đang bị đóng, còn mục trên thanh công cụ thì luôn ở đó.

Canvas ở giữa là trang của bạn. Nó không phải ảnh mô phỏng: đây chính là bộ render thật, cùng một bộ tạo ra HTML khi xuất bản.

Bảng thuộc tính bên phải hiện các tuỳ chọn của phần tử đang chọn. Không chọn gì thì nó hiện cài đặt của trang.

Thanh breakpoint ở trên chuyển giữa bốn bề rộng: Máy tính, Máy tính xách tay, Máy tính bảng, Điện thoại (en: Desktop, Laptop, Tablet, Mobile). Đổi breakpoint không phải là phóng to thu nhỏ — nó đổi khổ bạn đang sửa, và phần lớn thuộc tính lưu riêng cho từng khổ. Chi tiết ở Sửa riêng cho điện thoại.

Lưu, Xem trước, Xuất bản — ba việc khác nhau

Đây là chỗ hay nhầm nhất, nên nói thẳng:

Lưu (en: Save) ghi lại bản nháp của bạn. Khách vào cửa hàng không thấy gì thay đổi. Trình chỉnh sửa báo "Đã lưu thay đổi".

Xem trước (en: Preview) mở trang đã lưu trên đúng địa chỉ storefront thật, không cần xuất bản. Đây là cách xem một bản nháp đúng như khách sẽ thấy.

Xuất bản (en: Publish) đưa trang lên mạng cho mọi người.

Xuất bản đụng tới cả site, không riêng trang bạn đang mở. Hộp thoại nói đúng câu đó: "Xuất bản sẽ cập nhật cả {n} trang của site, không riêng trang này." Đó là chủ ý — một header sửa một lần thì không được phép mới ở trang này mà cũ ở những trang còn lại — nhưng nó có nghĩa là mọi bản nháp đang lưu dở trên các trang khác cũng lên sóng theo. Hãy kiểm lại trước khi bấm.

Sau khi xuất bản, hộp thoại đưa cho bạn liên kết công khai, kèm Sao chép link và Mở trang.

Khi trang từ chối lưu

Đôi khi bạn thấy "Chưa lưu được trang này" kèm một lý do. Cả ba lý do đều nói rõ cách sửa:

Thông báo	Nghĩa là
Global header phải nằm trên cùng, global footer nằm dưới cùng	Bạn đã kéo một global section ra khỏi vùng của nó. Đưa về đúng chỗ.
Global section chỉ được đặt ở cấp ngoài cùng	Bạn đã lồng nó vào trong một phần khác. Kéo nó ra ngoài.
Trang này đang có cùng một global section hai lần	Gỡ bớt một bản.

Đây là những từ chối có thể sửa được và trang nói ra thay vì im lặng bỏ mất thay đổi của bạn. Xem Global section.

Phím tắt

Danh sách đầy đủ nằm ở Phím tắt trên thanh công cụ. Những phím dùng nhiều nhất:

Việc	Phím
Hoàn tác	⌘ Z
Làm lại	⇧ ⌘ Z
Ẩn/hiện bảng thuộc tính	⌘ \
Chọn phần tử cha	⌘ ↑
Bỏ chọn	Esc
Đổi chỗ phần tử	↑ ↓ ← →
Nhân bản	⌘ D
Sao chép / Cắt / Dán	⌘ C · ⌘ X · ⌘ V
Xoá	Del

Trên Windows và Linux, hãy bấm Ctrl ở chỗ ghi ⌘. Giao diện hiển thị ⌘ trên mọi hệ điều hành, nhưng trình xử lý phím chấp nhận cả Ctrl. Đây là một chỗ giao diện chưa nói hết, và nó nằm ở đây cho tới khi giao diện tự nói.

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

Cài đặt trang — áp dụng cho cả site

Mục Cài đặt trên thanh công cụ mở một hộp thoại có hai tab, và cả hai đều ảnh hưởng tới mọi trang:

• Phông chữ — phông mặc định của site khi xuất bản, chọn từ Google Fonts hoặc từ tệp phông bạn tự tải lên. Phần tử nào đã đặt phông riêng thì giữ nguyên.
• Mã tùy chỉnh — CSS và JavaScript của riêng bạn, chèn vào mọi trang.

Đừng nhầm nó với bảng thuộc tính bên phải khi không chọn gì — bảng đó là cài đặt của một trang.

Lúc trình chỉnh sửa đang tải

Trình chỉnh sửa hiện một khung xương và đếm từng phần đang tải: bản dịch, trang của bạn, danh sách trang, cài đặt, giao diện, phông chữ, sản phẩm. Nếu có phần nào không tải được, nó nói tên phần đó và cho bạn dùng tiếp:

"Một số phần chưa tải được: … Trình chỉnh sửa vẫn dùng được — tải lại trang để thử lại."

Một trình chỉnh sửa mở ra được mà thiếu danh sách phông thì vẫn hơn một màn hình trắng, nên nó chọn mở ra và nói thật về chỗ thiếu.