Hướng dẫn sử dụng Widget – Grids

Chào Anh/Chị,

Để website của mình trông thật chuyên nghiệp, gọn gàng và đẹp mắt, việc sắp xếp các nội dung (như hình ảnh, bài viết, sản phẩm) vào các cột là vô cùng quan trọng. Công cụ Lưới (Grids) trong UX Builder sẽ giúp Anh/Chị làm điều này một cách dễ dàng.

Hãy tưởng tượng Lưới (Grids) giống như một cái kệ sách lớn. Cái kệ này có thể chia thành nhiều ngăn (cột) khác nhau. Anh/Chị có thể đặt sách (nội dung) vào từng ngăn để mọi thứ trở nên ngăn nắp.

Phần 1: Bắt đầu – Làm thế nào để thêm một Lưới (Grid) vào trang?

Đầu tiên, Anh/Chị cần vào đúng trang mình muốn chỉnh sửa.

Bước 1: Mở trình chỉnh sửa UX Builder

• Đăng nhập vào trang quản trị WordPress của Anh/Chị.
• Ở cột menu bên trái, chọn Trang (Pages).
• Tìm đến trang Anh/Chị muốn chỉnh sửa, rê chuột vào tên trang và chọn “Edit with UX Builder”.

Bước 2: Thêm thành phần Lưới (Grid)

• Sau khi vào trình chỉnh sửa, Anh/Chị sẽ thấy giao diện trang web của mình và một cột tùy chọn bên trái.
• Hãy nhấn vào nút dấu cộng (+) “Add elements” ở vị trí Anh/Chị muốn thêm Lưới.
• Một cửa sổ chứa rất nhiều chức năng sẽ hiện ra. Anh/Chị hãy tìm đến thành phần có tên là Grid. Có thể gõ chữ “Grid” vào ô tìm kiếm cho nhanh.
• Nhấn vào Grid để thêm nó vào trang.

Phần 2: Tùy chỉnh Lưới (Grid) – Chia cột và sắp xếp

Sau khi thêm, một Lưới mặc định sẽ xuất hiện. Bây giờ là lúc chúng ta tùy chỉnh nó theo ý muốn. Hãy nhìn vào cột công cụ bên trái nhé.

A. Chia số cột cho Lưới

Đây là chức năng quan trọng nhất! Anh/Chị muốn bố cục của mình có mấy cột? 2, 3, hay 4 cột?

• Trong cột tùy chọn bên trái, tìm mục Columns (Số cột).
• Anh/Chị sẽ thấy một thanh trượt hoặc các con số. Hãy kéo thanh trượt hoặc chọn số cột mình muốn. Ví dụ:
  • Chọn 2 để có bố cục 2 cột.
  • Chọn 3 để có bố cục 3 cột.
• Ngay lập tức, Anh/Chị sẽ thấy Lưới trên trang thay đổi theo.

B. Điều chỉnh khoảng cách giữa các cột

Anh/Chị có muốn các cột dính sát vào nhau hay có một khoảng hở nhỏ cho đẹp mắt không?

• Tìm mục Col Spacing (Khoảng cách cột).
• Chọn một trong các kích thước có sẵn (ví dụ: small, normal, large). Normal là lựa chọn phổ biến nhất.

C. Thêm nội dung vào từng cột

Bây giờ “cái kệ” đã được chia ngăn, đã đến lúc đặt “sách” (nội dung) vào.

• Hãy di chuột vào một cột (Column) bất kỳ bên trong Lưới. Anh/Chị sẽ thấy một dấu cộng (+) nhỏ hiện ra bên trong cột đó.
• Nhấn vào dấu cộng (+) này.
• Một cửa sổ “Add to Column” sẽ hiện ra. Giờ Anh/Chị có thể thêm bất cứ thứ gì mình muốn vào cột này:
  • Image: Để thêm hình ảnh.
• Làm tương tự cho các cột còn lại.

Phần 3: Ví dụ thực tế – Tạo một khu vực “Dịch vụ của chúng tôi” có 3 cột

Để dễ hình dung hơn, chúng ta hãy cùng nhau làm một ví dụ cụ thể nhé.

1. Bước 1: Nhấn (+) Add elements và chọn Grid.
2. Bước 2: Ở cột tùy chọn bên trái, tại mục Columns, chọn 3.
3. Bước 3: Tại mục Col Spacing, chọn normal.
4. Bước 4: Di chuột vào cột đầu tiên và nhấn vào dấu cộng (+) bên trong nó.
5. Bước 5: Chọn Image để thêm ảnh đại diện cho dịch vụ 1. Sau khi thêm, hãy nhấn Apply hoặc Update.
6. Bước 6: Vẫn ở trong cột đó, nhấn lại vào dấu cộng (+) bên dưới tấm ảnh vừa thêm, lần này chọn Text.
7. Bước 7: Viết tên và mô tả ngắn cho dịch vụ 1 vào ô văn bản. Nhấn Apply.
8. Bước 8: Lặp lại các bước từ 4 đến 7 cho cột thứ hai và cột thứ ba.

Vậy là Anh/Chị đã tạo xong một khu vực giới thiệu dịch vụ rất chuyên nghiệp!

Phần 4: Quan trọng – Chỉnh sửa cho đẹp trên điện thoại

Một trang web đẹp trên máy tính chưa chắc đã đẹp trên điện thoại. UX Builder cho phép chúng ta tùy chỉnh riêng cho từng thiết bị.

• Ở thanh công cụ phía dưới hoặc phía trên màn hình, Anh/Chị sẽ thấy các biểu tượng: Màn hình máy tính (Desktop), Máy tính bảng (Tablet), và Điện thoại (Mobile).
• Hãy nhấn vào biểu tượng Điện thoại (Mobile).
• Lúc này, giao diện xem trước sẽ thu nhỏ lại giống như màn hình điện thoại.
• Anh/Chị sẽ thấy bố cục 3 cột của mình có thể bị nhỏ và khó đọc.
• Cách khắc phục:
  • Nhấn vào Lưới (Grid) của Anh/Chị để mở lại bảng tùy chọn bên trái.
  • Tìm đến mục Columns (Mobile). Đây là tùy chọn số cột CHỈ DÀNH CHO ĐIỆN THOẠI.
  • Hãy chọn 1.
  • Ngay lập tức, 3 cột trên điện thoại sẽ tự động xếp chồng lên nhau theo chiều dọc, rất dễ nhìn và dễ đọc.

Sau khi đã hoàn thành tất cả các chỉnh sửa, Anh/Chị đừng quên làm bước quan trọng nhất nhé!

• Nhấn nút Apply (Áp dụng) ở góc dưới bên trái.
• Sau đó, nhấn nút Update (Cập nhật) ở góc trên bên phải để lưu lại tất cả thay đổi.

Một vài lời khuyên nhỏ:

• Đừng ngại thử: Anh/Chị có thể tạo một trang nháp để thực hành cho quen tay trước khi chỉnh sửa trang chính.
• Xem trước: Sử dụng các biểu tượng thiết bị (máy tính, điện thoại) để xem trước bố cục của mình trông như thế nào.
• Bắt đầu đơn giản: Hãy bắt đầu với Lưới 2 hoặc 3 cột. Khi đã quen, Anh/Chị có thể thử các thiết lập phức tạp hơn.