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

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

Cách sử dụng tiện ích đánh giá – Reviews

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

  • Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
  • Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
  • Advanced (Nâng cao): Các tùy chọn nâng cao như:
    • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
    • Z-index: Thứ tự hiển thị của các lớp phần tử.
    • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
    • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
    • Background: Màu nền, hình ảnh nền, gradient.
    • Border: Đường viền.
    • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
    • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
    • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích đánh giá là gì ?

Tiện ích Reviews (Đánh giá) trong Elementor là một công cụ mạnh mẽ để hiển thị các lời chứng thực (testimonials) hoặc đánh giá sản phẩm/dịch vụ từ khách hàng của bạn. Điều này giúp xây dựng niềm tin và uy tín cho trang web của bạn.

Image9

3. Các bước sử dụng tiện ích đánh giá

I. Nội dung (Content)

Đây là nơi bạn thêm và quản lý các đánh giá riêng lẻ.

A. Slides (Các slide)

Image8

  • Slides Name (Tên các slide): Có thể là một trường để đặt tên cho nhóm slide đánh giá này. Trong hình là “Slides”.
  • Slides (Các slide): Đây là khu vực bạn thêm từng đánh giá riêng lẻ.
    • Bạn sẽ thấy các mục đánh giá mẫu đã được thêm vào (Mục #1, Mục #2, Mục #3).
    • Nhấp vào nút “+ Thêm mục” để thêm một đánh giá mới.
    • Đối với mỗi mục đánh giá, bạn sẽ có các tùy chọn để nhập:
      • Nội dung đánh giá: Văn bản chính của lời chứng thực hoặc đánh giá. Trong hình là “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.”.
      • Tên người đánh giá: (Ví dụ: “John Doe”).
      • Chức danh/Tên người dùng: (Ví dụ: “@username” hoặc “CEO”).
      • Hình ảnh đại diện (Avatar): Tải lên ảnh của người đánh giá.
      • Biểu tượng (Icon): Có thể là một biểu tượng nhỏ đi kèm, ví dụ như biểu tượng Twitter trong hình ảnh bạn cung cấp, cho thấy đây có thể là một đánh giá từ mạng xã hội.
      • Số sao đánh giá (Rating/Stars): (Không hiển thị rõ trong hình nhưng là một tùy chọn phổ biến trong tiện ích đánh giá).

B. Slides Per View (Số slide hiển thị)

Image10

  • Slides Per View (Số slide hiển thị): Điều chỉnh số lượng đánh giá sẽ hiển thị cùng lúc trên màn hình. Trong hình là “Mặc định”.

Image15

  • Slides to Scroll (Số slide cuộn): Xác định số lượng slide sẽ cuộn mỗi lần khi người dùng nhấp vào nút điều hướng. Trong hình là “Mặc định”.
  • Chiều rộng (Width): Điều chỉnh chiều rộng tổng thể của carousel đánh giá (thường là tính bằng %).
  • Chiều cao (Height): Điều chỉnh chiều cao tổng thể của carousel đánh giá (thường là tính bằng pixel).

C. Tùy chọn bổ sung (Additional Options)

Image3

  • Phần này có thể bao gồm các tùy chọn điều khiển hành vi của carousel như:
    • Autoplay (Tự động phát): Tự động chuyển slide sau một khoảng thời gian.
    • Autoplay Speed (Tốc độ tự động phát): Thời gian chờ giữa các lần chuyển slide.
    • Loop (Lặp lại): Lặp lại carousel khi đến slide cuối cùng.
    • Navigation (Điều hướng): Hiển thị/ẩn các mũi tên điều hướng hoặc dấu chấm trang.
    • Transition (Chuyển tiếp): Kiểu hiệu ứng chuyển tiếp giữa các slide (ví dụ: Slide, Fade).

II. Kiểu hiển thị (Style)

Đây là nơi bạn tùy chỉnh giao diện của các đánh giá và carousel. Các tùy chọn ở đây sẽ tùy thuộc vào cấu trúc của tiện ích, nhưng thường bao gồm:

A. Slides (Các slide)

Image11

  • Gap (Khoảng cách): Khoảng cách giữa các slide đánh giá.
  • Background (Nền): Màu nền hoặc hình nền cho từng slide đánh giá.
  • Border (Đường viền): Loại đường viền, độ dày, màu sắc và bán kính bo tròn cho từng slide.
  • Box Shadow (Bóng đổ): Thêm bóng đổ cho từng slide.
  • Alignment (Căn chỉnh): Căn chỉnh nội dung bên trong mỗi slide.

B. Content (Nội dung)

Image5

  • Text Color (Màu chữ): Màu của nội dung đánh giá.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nội dung đánh giá.

C. Author (Tác giả)

Image6

  • Text Color (Màu chữ): Màu của tên người đánh giá và chức danh/tên người dùng.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tên người đánh giá và chức danh/tên người dùng.

D. Avatar (Hình đại diện)

Image12

  • Size (Kích thước): Điều chỉnh kích thước của hình ảnh đại diện.
  • Border Radius (Bán kính bo tròn): Bo tròn góc của hình ảnh đại diện để tạo hình tròn hoặc bo tròn.

E. Navigation (Điều hướng)

Image1

  • Arrows (Mũi tên):
    • Color (Màu sắc): Màu của mũi tên điều hướng.
    • Size (Kích thước): Kích thước của mũi tên.
  • Pagination (Phân trang – dấu chấm):
    • Color (Màu sắc): Màu của các dấu chấm phân trang.
    • Size (Kích thước): Kích thước của các dấu chấm.

III. Nâng cao (Advanced)

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Reviews.

Image14

  1. Bố cục (Layout):
  • Margin (Lề): Khoảng cách bên ngoài tiện ích Reviews với các phần tử khác xung quanh.
  • Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
  • Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Reviews.
  • Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
  • Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
  1. CSS ID & CSS Classes:
  • Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
  1. Hiệu ứng chuyển động (Motion Effects):
  • Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Reviews khi trang được tải.
  • Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
  • Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
  • Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
  1. Nền (Background):
  • Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Reviews.
  1. Đường viền (Border):
  • Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
  1. Mặt nạ (Mask):
  • Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.
  1. Khả năng đáp ứng (Responsive):
  • Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Reviews trên các loại thiết bị khác nhau nếu cần.
  1. Thuộc tính (Attributes):
  • Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
  1. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
  • Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.
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...