Dựng nội dung bằng trình soạn thảo khối (Gutenberg)

Trình soạn thảo khối (còn gọi là Gutenberg) không chỉ để viết chữ mà còn dựng được bố cục trang: chia cột, banner có chữ trên ảnh, nút bấm, khoảng trắng giữa các phần… Bài này dùng chung cho cả Bài viết và Trang. Cách gõ nội dung, chèn ảnh, video và định dạng chữ xem ở bài Viết và đăng bài viết mới và Chèn ảnh, video và định dạng nội dung bài viết.

Bước 1: Di chuyển, nhân bản và xoá khối

Bấm vào một khối, thanh công cụ của khối hiện ngay phía trên:

• 1 Bấm mũi tên lên/xuống để dời khối lên hoặc xuống một bậc. Cần chuyển xa hơn thì giữ chuột vào biểu tượng sáu chấm rồi kéo khối tới chỗ mới.
• 2 Bấm biểu tượng ba chấm Tùy chọn để mở menu của khối.
• 3 Tạo bản sao: nhân đôi khối, tiện khi cần nhiều khối giống nhau.
• 4 Thêm đằng trước / Thêm đằng sau: chèn một dòng trống ngay trước hoặc sau khối để thêm khối mới.
• 5 Xóa: xoá khối đang chọn.

Bước 2: Chọn và sắp xếp khối bằng chế độ xem danh sách

Khi trang có nhiều khối lồng nhau (cột trong cột, chữ trong ảnh bìa…), bấm trực tiếp trên nội dung khó chọn đúng khối. Dùng danh sách khối sẽ dễ hơn:

• 1 Bấm biểu tượng ba gạch Tổng quan nội dung ở thanh trên cùng. Cột bên trái hiện thẻ Cấu trúc nội dung.
• 2 Bấm mũi tên trước tên khối để mở các khối con bên trong.
• 3 Bấm vào tên khối để chọn đúng khối đó trên trang.

Có thể kéo tên khối lên hoặc xuống trong danh sách để sắp xếp lại. Biểu tượng ba chấm cạnh tên khối mở cùng menu như ở bước 1.

Bước 3: Chia nội dung thành nhiều cột

Bấm nút + ở góc trên bên trái, gõ “cột” rồi chọn khối Cột. Khối mới hiện các bố cục để chọn:

• 1 Ví dụ chọn 33 / 33 / 33 để có ba cột rộng bằng nhau (con số là phần trăm chiều rộng mỗi cột).

Sau đó bấm vào từng cột và thêm khối như bình thường (tiêu đề, đoạn văn, ảnh…). Muốn đổi số cột, chọn khối Cột (dễ nhất là qua danh sách khối ở bước 2) rồi chỉnh ở cột bên phải. Trên điện thoại, các cột tự xếp chồng thành một cột.

Bước 4: Gom nhiều khối thành nhóm

Chọn nhiều khối liền nhau: bấm khối đầu, giữ phím Shift rồi bấm khối cuối. Thanh công cụ đổi thành các nút cho nhiều khối:

• 1 Nhóm: gom các khối vào một khối Nhóm, sau đó đặt màu nền, khoảng lề chung cho cả phần ở cột bên phải (mục Nền, Kích thước lề).
• 2 Hàng ngang: xếp các khối nằm cạnh nhau trên một hàng.
• 3 Hàng dọc: xếp các khối chồng lên nhau.
• 4 Lưới: xếp các khối thành lưới ô đều nhau.

Nhóm cũng tiện để di chuyển, nhân bản cả một phần trang cùng lúc.

Bước 5: Làm banner bằng khối Bìa

Khối Bìa (Cover) hiển thị ảnh nền có chữ nằm trên, thường dùng làm banner đầu trang. Thêm khối bằng nút +, gõ “bìa”, rồi tải ảnh lên hoặc chọn ảnh trong Thư viện.

• 1 Bấm vào chữ trên ảnh để sửa nội dung; có thể thêm tiêu đề, đoạn văn, nút bấm bên trong.
• 2 Thay thế: đổi sang ảnh khác.

Kéo chấm tròn ở mép dưới ảnh để chỉnh chiều cao banner. Màu và độ đậm lớp phủ (giúp chữ dễ đọc trên ảnh) chỉnh ở thẻ Kiểu (biểu tượng nửa hình tròn) ở cột bên phải. Nên dùng ảnh ngang, đủ lớn (rộng khoảng 1600 px).

Bước 6: Thêm khoảng cách và nút bấm

• 1 Khoảng cách: khối trống tạo khoảng trắng giữa hai phần. Bấm vào khối rồi kéo chấm tròn ở cạnh dưới để chỉnh độ cao.
• 2 Nút bấm: bấm vào nút để sửa chữ, rồi bấm biểu tượng Liên kết trên thanh công cụ (hoặc nhấn Ctrl + K) và dán địa chỉ trang cần mở khi khách bấm.

Khi nút đang được chọn, cột bên phải có Kiểu hiển thị (Đổ màu hoặc Viền ngoài) và màu chữ, màu nền của nút. Muốn đặt hai nút cạnh nhau, bấm dấu + ngay sau nút đầu tiên.

Bước 7: Chèn nhanh bố cục có sẵn từ Mẫu khối

Mẫu khối là các bố cục dựng sẵn (phần giới thiệu, kêu gọi hành động, chân trang…), chèn vào rồi chỉ việc thay chữ và ảnh:

• 1 Bấm nút + ở góc trên bên trái (khi đang mở, nút đổi thành dấu ×).
• 2 Chọn thẻ Mẫu khối.
• 3 Chọn nhóm mẫu, ví dụ Giới thiệu.
• 4 Bấm vào mẫu để chèn vào vị trí con trỏ, hoặc kéo mẫu thả vào chỗ cần đặt.

Danh sách mẫu tuỳ giao diện và plugin của website; một số mẫu có chữ tiếng Anh hoặc ảnh minh hoạ, nhớ thay bằng nội dung của mình trước khi đăng.

Bước 8: Xem trước trên điện thoại

Phần lớn khách xem website bằng điện thoại, nên kiểm tra bố cục trước khi đăng:

• 1 Bấm biểu tượng Xem (hình màn hình) cạnh nút Lưu nháp.
• 2 Chọn Di động: khung soạn thảo thu lại bằng màn hình điện thoại để anh/chị xem cột, ảnh, chữ hiển thị thế nào.

Chọn Máy tính để quay lại khung soạn thảo bình thường. Xem trước ở tab mới mở trang trong tab mới với đầy đủ giao diện (đầu trang, chân trang) của website.

Lưu ý

• Lỡ tay xoá hay kéo nhầm khối, nhấn Ctrl + Z (Mac: Cmd + Z) hoặc bấm nút mũi tên quay lại ở thanh trên cùng.
• Không lồng quá nhiều tầng nhóm, cột trong cột: trang khó sửa và dễ vỡ bố cục trên điện thoại.
• Dựng trang dài thì bấm Lưu nháp thường xuyên, xem trước trên điện thoại rồi mới Xuất bản.
• Một số trang của website (thường là trang chủ) có thể được bên em dựng bằng trình dựng trang khác như Elementor, UX Builder…, khi đó cách sửa sẽ khác bài này. Cần hỗ trợ, anh/chị gửi yêu cầu cho bên em.