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

Chào anh/chị,

Bài hướng dẫn này sẽ giúp anh/chị tự tay chỉnh sửa một trong những khối nội dung phổ biến và đẹp mắt nhất trên website của mình: khối Icon Box.

1. “Icon Box” là gì và dùng để làm gì?

Hãy tưởng tượng Icon Box giống như một tấm danh thiếp nhỏ trên trang web. Nó bao gồm:

• Một biểu tượng (Icon) để thu hút ánh mắt.
• Một tiêu đề (Title) ngắn gọn.
• Một đoạn mô tả (Text) chi tiết hơn.

Nó thường được dùng để làm nổi bật các dịch vụ, tính năng, ưu điểm của sản phẩm hoặc các bước trong một quy trình.

Ví dụ thực tế:

Bài hướng dẫn này sẽ chỉ anh/chị cách thêm, sửa, và xóa các khối như trên một cách dễ dàng.

2. Bắt đầu: Mở trình chỉnh sửa trực quan (UX Builder)

Để chỉnh sửa trang web, trước hết anh/chị cần vào đúng trang và mở công cụ chỉnh sửa.

• Bước 1: Đăng nhập vào trang quản trị website của anh/chị.
• Bước 2: Di chuyển chuột lên mục “Trang” ở cột menu bên trái, và chọn trang anh/chị muốn sửa (ví dụ: Trang chủ, Giới thiệu, Dịch vụ…).
• Bước 3: Ở phía trên cùng màn hình, anh/chị sẽ thấy một nút màu xanh có chữ “Sửa với UX Builder”. Hãy bấm vào đó.

Giao diện chỉnh sửa sẽ hiện ra, với trang web của anh/chị ở bên phải và các công cụ ở bên trái.

3. Thêm một khối Icon Box mới

Giả sử anh/chị muốn thêm một dịch vụ mới vào danh sách.

• Bước 1: Tìm một vị trí trống trên trang mà anh/chị muốn thêm khối mới. Anh/chị sẽ thấy một nút dấu cộng màu xám (+).
  • Mẹo: Giao diện website được chia thành các hàng và cột. Anh/chị có thể bấm vào dấu cộng ở bất kỳ cột trống nào.
• Bước 2: Bấm vào nút dấu cộng đó. Một cửa sổ có tên “Add to Content” sẽ hiện ra ở bên trái, chứa danh sách rất nhiều công cụ.
• Bước 3: Trong ô tìm kiếm ở trên cùng, gõ chữ “Icon Box”. Công cụ tương ứng sẽ hiện ra ngay lập tức.
• Bước 4: Bấm vào khối “Icon Box”. Ngay lập tức, một khối Icon Box mẫu sẽ được thêm vào trang web và bảng tùy chỉnh sẽ hiện ra bên trái.

4. Chỉnh sửa chi tiết một khối Icon Box

Đây là phần quan trọng nhất. Để chỉnh sửa một khối Icon Box đã có sẵn, anh/chị chỉ cần nhấp chuột trái vào khối đó trên trang web. Bảng tùy chỉnh sẽ tự động hiện ra bên trái.

Bây giờ, chúng ta sẽ đi qua từng mục trong bảng này.

A. Thay đổi Biểu Tượng (Icon)

1. Trong bảng tùy chỉnh bên trái, bấm vào nút “Change” ở ngay dưới mục Icon.
2. Một thư viện với hàng trăm biểu tượng sẽ hiện ra. Anh/chị có thể:
   • Dùng thanh tìm kiếm: Gõ từ khóa tiếng Anh liên quan (ví dụ: phone cho điện thoại, truck cho xe tải, star cho ngôi sao).
   • Lướt và chọn: Kéo xuống để tìm biểu tượng ưng ý.
3. Bấm vào biểu tượng anh/chị thích, nó sẽ tự động được cập nhật trên trang web.

B. Thay đổi Nội dung (Tiêu đề và Mô tả)

1. Kéo xuống dưới một chút trong bảng tùy chỉnh.
2. Mục Title: Xóa tiêu đề cũ và gõ tiêu đề mới của anh/chị vào đây.
3. Mục Text: Đây là nơi gõ đoạn mô tả chi tiết. Anh/chị có thể dùng các công cụ đơn giản như B (in đậm), I (in nghiêng) để làm nổi bật nội dung.

C. Gắn liên kết (Link)

Nếu anh/chị muốn khách hàng bấm vào khối này và được chuyển đến một trang khác (ví dụ: trang chi tiết dịch vụ).

1. Trong mục Link, dán đường dẫn của trang đích vào ô trống.
2. Đánh dấu vào ô “Open in a new tab” nếu anh/chị muốn trang đó mở ra ở một cửa sổ mới, giữ cho khách hàng không bị thoát khỏi trang hiện tại.

D. Tùy chỉnh giao diện (Màu sắc, vị trí,…)

Anh/chị hoàn toàn có thể làm cho khối Icon Box đẹp hơn nữa!

• Icon Position: Chọn vị trí cho biểu tượng (bên trái, bên trên, hoặc bên phải của chữ).
• Icon Color: Bấm vào ô màu để chọn màu mới cho biểu tượng.
• Title Size: Kéo thanh trượt để thay đổi độ lớn của tiêu đề.

Hãy thoải mái thử nghiệm các lựa chọn này. Đừng lo, mọi thay đổi chỉ là tạm thời cho đến khi anh/chị bấm nút lưu cuối cùng.

Sau khi chỉnh sửa xong một khối, hãy bấm nút “Apply” ở cuối bảng bên trái để xác nhận.

5. Các thao tác khác: Sao chép, Di chuyển, Xóa

Khi di chuột vào một khối Icon Box trên trang, một menu nhỏ sẽ hiện ra ở góc trên bên trái của khối đó.

• Để Di chuyển (Move): Bấm giữ vào biểu tượng mũi tên 4 chiều và kéo khối Icon Box đến vị trí mới mà anh/chị muốn.
• Để Sao chép (Duplicate): Bấm vào biểu tượng hai tờ giấy chồng lên nhau. Một bản sao y hệt sẽ được tạo ra ngay bên cạnh. Việc này rất tiện lợi khi anh/chị muốn tạo nhiều khối có chung một kiểu dáng, chỉ cần sao chép ra rồi sửa lại nội dung.
• Để Xóa (Delete): Bấm vào biểu tượng bánh răng cưa (Options), một menu sẽ xổ xuống, sau đó chọn “Delete” và xác nhận.

6. Quan trọng nhất: Lưu lại tất cả thay đổi

Sau khi anh/chị đã thêm, sửa, xóa và cảm thấy hài lòng với tất cả thay đổi của mình, hãy nhìn xuống góc dưới cùng bên trái của màn hình.

• Bấm vào nút “Apply” để lưu các cài đặt nhỏ.
• Sau đó, bấm vào nút “Update” màu xanh dương.

Đây là bước quyết định! Chỉ khi bấm “Update”, tất cả những gì anh/chị làm nãy giờ mới được lưu lại và hiển thị chính thức trên website cho khách hàng thấy.

Sau khi bấm “Update”, anh/chị có thể đóng trình chỉnh sửa bằng cách bấm vào dấu “X” ở góc trên bên trái.

Vậy là anh/chị đã nắm được toàn bộ quy trình để làm chủ khối Icon Box rồi đấy!

1. Mở Sửa với UX Builder.
2. Thêm mới bằng nút dấu cộng.
3. Nhấp vào khối để mở bảng tùy chỉnh (sửa icon, chữ, màu sắc…).
4. Sử dụng menu nhỏ trên khối để di chuyển, sao chép, hoặc xóa.
5. Luôn nhớ bấm Update để lưu lại mọi thứ.