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

Chào Anh/Chị,

Bài hướng dẫn này sẽ giúp Quý khách dễ dàng tự tạo ra những khối giới thiệu đẹp mắt trên website của mình bằng chức năng Image Box (Khối Hình Ảnh).

Image Box là gì?

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

• Một hình ảnh minh họa.
• Một tiêu đề ngắn gọn.
• Một đoạn mô tả chi tiết hơn.
• Và có thể bấm vào để dẫn đến một trang khác.

Quý khách có thể dùng Image Box để giới thiệu dịch vụ, sản phẩm, thành viên đội ngũ, hoặc các hạng mục nổi bật.

Phần 1: Mở Trình Chỉnh Sửa UX Builder

Trước tiên, chúng ta cần vào đúng nơi để chỉnh sửa trang web.

1. Đăng nhập vào trang quản trị website của Quý khách (thường có dạng tenmiencuaban.com/wp-admin).
2. Ở thanh menu màu đen bên trái, tìm và chọn mục Trang.
3. Một danh sách các trang web (như Trang chủ, Giới thiệu, Liên hệ…) sẽ hiện ra. Hãy tìm đến trang mà Quý khách muốn chỉnh sửa.
4. Rê chuột vào tên trang đó, và nhấn vào nút “Edit with UX Builder”.

Bây giờ, màn hình sẽ được chia làm hai phần: bên trái là các công cụ, bên phải là giao diện trực quan của website.

Phần 2: Thêm Khối Image Box Vào Trang

Bây giờ chúng ta sẽ “gắp” khối Image Box và “thả” vào vị trí mong muốn.

1. Nhìn sang cột công cụ bên trái, Quý khách sẽ thấy một nút màu xanh rất lớn có dấu cộng + Add Elements. Hãy nhấn vào đó.
2. Một cửa sổ mới sẽ hiện ra với rất nhiều khối chức năng. Để tìm cho nhanh, hãy gõ chữ Image Box vào ô tìm kiếm ở trên cùng.
3. Nhấn chuột vào khối Image Box. Ngay lập tức, một khối mẫu sẽ được thêm vào trang ở bên phải. Đồng thời, cột bên trái sẽ hiển thị các tùy chỉnh cho khối này.

Phần 3: Tùy Chỉnh Nội Dung Cho Khối Image Box

Đây là phần quan trọng nhất, chúng ta sẽ thay đổi hình ảnh và chữ viết mặc định thành nội dung của mình. Mọi thao tác đều thực hiện ở cột bên trái.

1. Thay Đổi Hình Ảnh:

• Ở cột bên trái, nhấn vào nút Change media.
• Một cửa sổ Thư viện sẽ hiện ra.
  • Cách 1: Dùng ảnh có sẵn: Chọn một hình ảnh đã được tải lên từ trước trong tab “Thư viện”.
  • Cách 2: Tải ảnh mới: Chuyển sang tab “Tải file lên” -> Nhấn “Chọn tập tin” và tìm đến hình ảnh trong máy tính của Quý khách.
• Sau khi chọn hoặc tải ảnh lên, hãy nhấn nút Sử dụng hình ảnh này (Use this image) màu xanh ở góc dưới bên phải.

2. Thay Đổi Chữ Viết (Tiêu Đề và Mô Tả):

• Kéo xuống dưới một chút ở cột bên trái, Quý khách sẽ thấy các ô để nhập chữ.
• Ô

  Lorem ipsum dolor sit amet...

  : Xóa dòng chữ

  Lorem ipsum dolor sit amet...

  đi và gõ vào tiêu đề mà Quý khách muốn. Ví dụ: “Dịch Vụ Chuyên Nghiệp”.
• Ô [text]: Xóa dòng chữ [text] đi và gõ vào đoạn mô tả ngắn. Ví dụ: “Chúng tôi cung cấp giải pháp tối ưu cho doanh nghiệp của bạn”.

3. Thêm Liên Kết (Để khách hàng bấm vào):

Nếu Quý khách muốn khách hàng khi bấm vào khối này sẽ được chuyển đến một trang khác (ví dụ: trang chi tiết dịch vụ), hãy làm như sau:

• Tìm đến ô Link.
• Dán đường link của trang đích vào đây. (Ví dụ: https://tenmiencuaban.com/dich-vu-a).
• Mục Target:
  • Để trống: Khi bấm vào sẽ mở ra ngay trên trang hiện tại.
  • Chọn “Open in a new tab”: Khi bấm vào sẽ mở ra một thẻ mới trên trình duyệt. (Nên dùng cách này khi link dẫn ra ngoài website của mình).

Phần 4: Các Tùy Chỉnh Nâng Cao (Hãy thử để làm đẹp hơn!)

Phần này không bắt buộc, nhưng sẽ giúp khối Image Box của Quý khách trông chuyên nghiệp và độc đáo hơn.

• Style (Kiểu dáng): Đây là mục rất hay! Nó thay đổi cách sắp xếp của hình và chữ. Hãy thử bấm vào các lựa chọn để xem sự thay đổi trực tiếp bên phải nhé!
  • Normal: Hình bên trái, chữ bên phải.
  • Vertical: Hình ở trên, chữ ở dưới (rất phổ biến).
  • Badge: Hình tròn nhỏ nằm đè lên trên.
  • Shade: Chữ nằm đè lên trên ảnh và có một lớp mờ.
• Hover (Hiệu ứng khi rê chuột): Mục này tạo hiệu ứng khi khách hàng đưa chuột vào khối Image Box, làm cho website sống động hơn.
  • Fade In: Chữ sẽ mờ dần và hiện ra.
  • Zoom: Hình ảnh sẽ phóng to lên một chút.
  • Glow: Khối sẽ phát sáng nhẹ.
  • Hãy thử từng cái để chọn hiệu ứng Quý khách thích nhất!
• Text Align (Căn lề chữ): Dùng để căn chữ sang trái, ra giữa, hoặc sang phải.

Phần 5: Lưu Lại Toàn Bộ Thay Đổi

Đây là bước cuối cùng và quan trọng nhất. Nếu không lưu, mọi công sức sẽ mất hết.

1. Sau khi đã chỉnh sửa ưng ý ở cột bên trái, hãy nhấn nút Apply ở góc dưới cùng của cột.
2. Sau đó, để lưu lại tất cả thay đổi trên toàn bộ trang, hãy nhấn vào nút Update màu xanh ở góc trên cùng bên phải màn hình.

Xong rồi! Quý khách đã hoàn tất việc thêm và chỉnh sửa một khối Image Box. Quý khách có thể lặp lại các bước trên để tạo thêm nhiều khối khác và sắp xếp chúng cạnh nhau để tạo thành một khu vực giới thiệu dịch vụ hoàn chỉnh.

Lời khuyên: Đừng ngại thử nghiệm các tùy chọn. Trình chỉnh sửa UX Builder cho phép Quý khách thấy ngay kết quả mà không ảnh hưởng đến website thật cho đến khi nào Quý khách nhấn Update. Nếu làm sai, chỉ cần không lưu và tải lại trang là được.