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

08/09/2025
223 lượt xem
5/5 - (1 đánh giá)
Chia sẻ qua

Chào anh/chị,

Bài viết này sẽ hướng dẫn anh/chị cách sử dụng một tính năng rất hay có tên là “Scroll To”. Tính năng này giúp anh/chị tạo ra một “điểm mốc” vô hình trên trang web. Sau đó, anh/chị có thể tạo một nút bấm, khi khách hàng nhấp vào, trang web sẽ tự động cuộn một cách mượt mà đến đúng “điểm mốc” đó.

Ví dụ dễ hiểu: Anh/chị có một nút “Xem Dịch Vụ Của Chúng Tôi” ở đầu trang. Khi khách bấm vào, màn hình sẽ tự động chạy xuống khu vực giới thiệu dịch vụ. Rất tiện lợi phải không ạ!

Để thực hiện, chúng ta sẽ làm 2 bước chính:

  1. Bước 1: Đặt “Điểm Mốc” (Điểm Đến) bằng Widget “Scroll To”.
  2. Bước 2: Tạo Nút Bấm và “Chỉ Đường” cho nó đến Điểm Mốc.

Hãy cùng bắt đầu từng bước một nhé!

Chuẩn bị: Mở trình sửa trang UX Builder

Đầu tiên, anh/chị cần vào đúng trình chỉnh sửa trang.

  1. Đăng nhập vào trang quản trị website của anh/chị.
  2. Ở thanh công cụ màu đen phía trên cùng, di chuột vào mục “Sửa trang” và chọn “Edit with UX Builder”.

Image1

Giao diện sửa trang sẽ hiện ra, với cột công cụ bên trái và nội dung trang web ở bên phải.

Bước 1: Đặt “Điểm Mốc” (Sử dụng Widget “Scroll To”)

Ở bước này, chúng ta sẽ đặt một cái “biển báo vô hình” tại nơi mà anh/chị muốn khách hàng cuộn tới.

  1. Trong giao diện UX Builder, anh/chị hãy tìm đến khu vực (Section) mà mình muốn làm “Điểm Đến”. Ví dụ: khu vực giới thiệu dịch vụ, khu vực bảng giá…
  2. Nhấp vào nút dấu cộng (+) Add to [Tên khu vực] hoặc (+) Add Elements nằm ngay bên trong khu vực đó.
  3. Một cửa sổ chứa rất nhiều thành phần sẽ hiện ra. Tại ô tìm kiếm, anh/chị gõ chữ “Scroll” để tìm cho nhanh. Anh/chị sẽ thấy một Widget tên là Scroll to. Hãy nhấp vào nó.
  4. Ngay lập tức, cột công cụ bên trái sẽ hiển thị cài đặt cho Widget “Scroll to” này. Anh/chị chỉ cần quan tâm đến một ô duy nhất:
    • Link: Đây là nơi anh/chị đặt tên cho điểm mốc.Image8
  5. Lưu ý quan trọng khi đặt tên:
    • Viết liền, không dấu, không khoảng trắng, không ký tự đặc biệt.
    • Có thể dùng dấu gạch ngang – để ngăn cách các từ.
    • KHÔNG được thêm dấu thăng (#) ở bước này.
  6. Ví dụ đúng: bang-gia, lien-he-ngay, dich-vu-noi-bat
    Ví dụ sai: bảng giá, lienhe#, dich vu
    Ở đây, em sẽ đặt tên là dich-vu-cua-toi. Anh/chị hãy ghi nhớ hoặc copy lại cái tên này.
  7. Nhấn nút “Apply” ở góc dưới cùng bên trái. Anh/chị sẽ thấy một dòng chữ nhỏ “SCROLL TO: [tên anh/chị vừa đặt]” trong trình sửa trang, nhưng đừng lo, khách hàng sẽ không nhìn thấy nó trên trang web thật. Nó hoàn toàn vô hình.

Image2

Vậy là xong Bước 1! Chúng ta đã tạo thành công một “điểm mốc” có tên là dich-vu-cua-toi.

Bước 2: Tạo Nút Bấm để “Chỉ Đường” đến Điểm Mốc

Bây giờ, chúng ta sẽ tạo một nút bấm và ra lệnh cho nó “chạy” đến điểm mốc vừa tạo.

  1. Tìm đến vị trí anh/chị muốn đặt nút bấm (ví dụ: ở đầu trang), rồi nhấn vào nút dấu cộng (+) Add Elements.
  2. Trong cửa sổ hiện ra, tìm và chọn phần tử Button (Nút bấm).Image9
  3. Các cài đặt cho nút bấm sẽ hiện ra ở cột bên trái. Anh/chị hãy điền thông tin vào 2 ô quan trọng nhất:
    • Text: Nhập chữ hiển thị trên nút bấm. Ví dụ: “Tìm Hiểu Dịch Vụ”, “Xem Chi Tiết”.
    • Link: Đây là bước quyết định! Tại ô này, anh/chị hãy nhập dấu thăng (#) rồi viết ngay sau đó là tên Điểm Mốc đã tạo ở Bước 1.
  4. Ví dụ: Ở Bước 1, chúng ta đã đặt tên là dich-vu-cua-toi. Vậy thì ở ô Link này, anh/chị sẽ nhập chính xác là: #dich-vu-cua-toi
  5. Anh/chị có thể tùy chỉnh thêm màu sắc, kích thước cho nút bấm theo ý thích. Sau khi hài lòng, nhấn nút “Apply” ở góc dưới bên trái.Image3Image4

Hoàn Tất: Lưu Lại và Kiểm Tra

  1. Sau khi đã hoàn thành cả 2 bước, anh/chị hãy nhấn nút “Update” màu xanh dương ở góc trên bên trái màn hình để lưu lại mọi thay đổi.
  2. Thoát khỏi trình sửa trang bằng cách nhấn vào dấu “X” ở góc trên cùng bên trái.
  3. Bây giờ, hãy ra ngoài trang web và thử nhấp vào nút bấm anh/chị vừa tạo. Nếu trang web tự động cuộn xuống đúng khu vực giới thiệu dịch vụ, xin chúc mừng, anh/chị đã làm thành công!

Image10

Tóm tắt siêu nhanh:

  1. Tại điểm đến: Thêm Widget Scroll to -> Ô Link -> Đặt tên (ví dụ: bao-gia).
  2. Tại điểm đi: Thêm Button -> Ô Link -> Điền # + tên vừa đặt (ví dụ: #bao-gia).
  3. Nhấn Update để lưu.

Hy vọng bài hướng dẫn chi tiết này sẽ giúp anh/chị dễ dàng thao tác.

5/5 - (1 đánh giá)
Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đang tải...