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

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

Chào anh/chị,

Trong bài hướng dẫn này, chúng tôi sẽ chỉ cho anh/chị cách tự tạo ra các “nút bấm” trên website của mình.

Anh/chị hãy tưởng tượng nút bấm trên website giống như một cái chuông cửa hoặc một tấm biển chỉ đường. Khi khách hàng bấm vào đó, nó sẽ dẫn họ đến một nơi khác mà anh/chị muốn, ví dụ như trang liên hệ, trang sản phẩm, hoặc gọi điện thoại trực tiếp cho anh/chị.

Việc này rất đơn giản, anh/chị chỉ cần làm theo các bước dưới đây thôi ạ.

Phần 1: Mở trình chỉnh sửa trang web (UX Builder)

Giống như lần trước, chúng ta cần vào đúng khu vực chỉnh sửa.

Bước 1: Đăng nhập vào trang quản trị

  • Truy cập đường link quản trị: tenmiencuabạn.com/wp-admin
  • Nhập Tên người dùng và Mật khẩu đã được cấp.

Bước 2: Tìm và mở trang cần chèn nút bấm

  1. Ở cột menu màu đen bên trái, tìm và bấm vào mục “Trang” (Pages).
  2. Tìm đến trang anh/chị muốn thêm nút (ví dụ: Trang chủ).
  3. Rê chuột vào tên trang đó và bấm vào nút “Edit with UX Builder”.

Image10

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

Phần 2: Thêm và tùy chỉnh một nút bấm (Button)

Bây giờ, chúng ta sẽ cùng nhau tạo ra một chiếc “biển chỉ đường” thật đẹp nhé.

Bước 1: Thêm khối “Button” vào trang

  1. Trong cột công cụ bên trái, anh/chị bấm vào nút có dấu cộng + Add Elements.
  2. Một bảng lớn chứa các khối chức năng hiện ra. Anh/chị gõ chữ “Button” vào ô tìm kiếm ở trên cùng.
  3. Khi khối Button hiện ra, anh/chị hãy bấm vào nó.

Image2

Ngay lập tức, một nút bấm mẫu với chữ “Button” sẽ xuất hiện trên trang web, và cột bên trái sẽ hiển thị các tùy chọn để “trang trí” cho chiếc nút này.

Bước 2: Chỉnh sửa các thông tin cho nút bấm

Đây là phần quan trọng nhất. Cột bên trái bây giờ là bảng điều khiển cho nút bấm của anh/chị.

1. TEXT (Nội dung trên nút):

  • Đây là nơi anh/chị gõ chữ mà mình muốn hiển thị trên nút. Hãy xóa chữ “Button” mẫu đi và gõ nội dung của mình.
    • Ví dụ: “XEM THÊM”, “LIÊN HỆ NGAY”, “GỌI TƯ VẤN”, “ĐẶT HÀNG”.

Image3

2. LINK (Đường dẫn khi bấm vào nút):

  • Đây là “địa chỉ” mà nút sẽ dẫn khách hàng đến. Đây là phần quan trọng nhất!
    • Nếu muốn dẫn đến một trang khác trên website: Anh/chị mở một tab mới, vào trang đó (ví dụ: trang Liên hệ), copy toàn bộ đường link trên thanh địa chỉ (ví dụ: https://tenmiencuaban.com/lien-he/) rồi dán vào ô LINK này.
    • Nếu muốn dẫn đến một website khác (như Facebook): Anh/chị cũng copy link trang Facebook và dán vào.
    • Nếu muốn khách hàng bấm vào là gọi điện luôn: Anh/chị gõ vào ô này theo cú pháp tel:sốđiệnthoạicủaanhchị (viết liền, không có dấu cách).
      • Ví dụ: tel:0987654321
    • Nếu muốn khách hàng bấm vào là gửi email: Anh/chị gõ vào ô này theo cú pháp mailto:emailcủaanhchị.
      • Ví dụ: mailto:info@tencongty.com
  • Target (Mục tiêu):
    • Ở ngay dưới ô LINK, có mục Target. Mục này hỏi anh/chị rằng khi khách bấm vào nút, trang mới sẽ mở ra như thế nào.
    • Để trống (mặc định): Trang mới sẽ mở đè lên trang hiện tại.
    • Chọn “Open in a new tab” (Mở trong tab mới): Trang mới sẽ được mở ở một cửa sổ/tab mới, khách hàng vẫn giữ được trang cũ. Chúng tôi khuyên anh/chị nên chọn cái này để giữ khách ở lại website của mình lâu hơn.

Image6

3. STYLE (Kiểu dáng của nút):

  • Mục này giúp anh/chị chọn các kiểu dáng có sẵn, giống như chọn kiểu áo vậy.
    • Primary: Kiểu chính, thường có màu nổi bật nhất.
    • Secondary: Kiểu phụ, màu nhạt hơn.
    • Success: Kiểu thành công, thường là màu xanh lá.
    • Alert: Kiểu cảnh báo, thường là màu đỏ.
    • Outline: Kiểu chỉ có viền, nền trong suốt.
    • Anh/chị cứ bấm thử từng kiểu để xem cái nào hợp mắt nhất nhé.

4. COLOR (Màu sắc):

  • Nếu không thích các màu có sẵn ở mục Style, anh/chị có thể tự chọn màu cho nút ở đây.

5. SIZE (Kích thước):

  • Cho phép anh/chị chọn kích thước cho nút: Small (Nhỏ), Normal (Thường), Large (Lớn), X-Large (Rất lớn).

6. ICON (Biểu tượng nhỏ):

  • Anh/chị có thể thêm một biểu tượng nhỏ xinh vào trước chữ để nút trông sinh động hơn (ví dụ: biểu tượng điện thoại trước chữ “GỌI NGAY”).
  • Chỉ cần gõ tên biểu tượng bằng tiếng Anh vào ô này (ví dụ: phone, arrow-right, check, user).

Image1

Phần 3: Ví dụ thực tế – Tạo nút “GỌI TƯ VẤN NGAY”

Chúng ta sẽ cùng nhau thực hành tạo một nút kêu gọi hành động nhé.

  1. Bấm + Add Elements -> tìm và chọn Button.
  2. Tại ô TEXT, gõ vào: GỌI TƯ VẤN NGAY
  3. Tại ô LINK, nhập số điện thoại của anh/chị theo cú pháp: tel:0123456789
  4. Tại mục Target, chọn “Open in a new tab”.
  5. Tại mục STYLE, chọn Primary để nút có màu chính nổi bật.
  6. Tại mục SIZE, chọn Large để nút thật to, dễ nhìn.
  7. Tại ô ICON, gõ chữ phone. Anh/chị sẽ thấy một biểu tượng chiếc điện thoại nhỏ xuất hiện bên cạnh chữ.
  8. Kéo xuống dưới một chút, tìm mục Icon POS (Vị trí biểu tượng), chọn Left (Bên trái).

Vậy là anh/chị đã có một nút “GỌI TƯ VẤN NGAY” hoàn chỉnh, khi khách hàng dùng điện thoại bấm vào sẽ gọi trực tiếp cho anh/chị!

Image9

Phần 4: Lưu lại thay đổi – Đừng quên bước này!

Sau khi đã tạo xong nút bấm ưng ý, anh/chị cần phải lưu lại.

  1. Đầu tiên, ở góc dưới cùng bên trái, bấm nút “Apply” hoặc “Update” để lưu các cài đặt cho riêng nút bấm này.
  2. Tiếp theo, để lưu toàn bộ trang, hãy nhìn lên góc trên cùng bên phải, bấm vào nút màu xanh lá “Update”.

Image5

Khi nút “Update” mờ đi là anh/chị đã lưu thành công. Bây giờ anh/chị có thể ra ngoài website để chiêm ngưỡng “tác phẩm” của mình rồi đó.

Mẹo nhỏ:

  • Một trang web không nên có quá nhiều nút bấm gần nhau, sẽ gây rối mắt.
  • Màu sắc của nút nên tương phản với màu nền để khách hàng dễ dàng nhận ra.

Chúc anh/chị thực hiện thành công! Nếu có bất kỳ vướng mắc nào, anh/chị cứ gọi hoặc nhắn tin cho chúng tôi để được hỗ trợ ngay lập tức nhé.

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...