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

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

Cách sử dụng tiện ích Testimonial Carousel

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 Testimonial Carousel là gì ?

Tiện ích Băng chuyền Lời chứng thực (Testimonial Carousel) trong Elementor là một công cụ tuyệt vời để hiển thị các đánh giá và lời khen ngợi từ khách hàng một cách động và thu hút. Nó giúp xây dựng lòng tin và sự tín nhiệm cho doanh nghiệp hoặc sản phẩm của bạn.

3. Các bước sử dụng tiện ích Testimonial Carousel

I. Nội dung (Content)

Tiện ích Băng chuyền Lời chứng thực (Testimonial Carousel) trong Elementor là một công cụ tuyệt vời để hiển thị các đánh giá và lời khen ngợi từ khách hàng một cách động và thu hút. Nó giúp xây dựng lòng tin và sự tín nhiệm cho doanh nghiệp hoặc sản phẩm của bạn.

Đây là nơi bạn thêm các lời chứng thực cá nhân và cấu hình cài đặt chung cho băng chuyền.

A. Slides (Các slide)

Image8

  • Tên slide (Slides Name): Có thể đặt tên cho nhóm slide lời chứng thực của bạn (ví dụ: “Lời chứng thực khách hàng”).
  • Thêm mục (Add Item): Nhấp vào đây để thêm một lời chứng thực mới vào băng chuyền của bạn.
  • Chỉnh sửa Slide: Nhấp vào từng mục slide để mở các tùy chọn chỉnh sửa riêng cho lời chứng thực đó:
    • Content (Nội dung): Nhập văn bản lời chứng thực của khách hàng (ví dụ: “Lorem ipsum dolor sit amet, consectetur adipiscing elit.”).
    • Image (Hình ảnh): Tải lên hoặc chọn ảnh đại diện của khách hàng.
    • Name (Tên): Nhập tên của khách hàng (ví dụ: “John Doe”).
    • Title (Chức danh/Tiêu đề): Nhập chức danh hoặc thông tin bổ sung về khách hàng (ví dụ: “CEO”).
  • Kéo và thả để sắp xếp lại thứ tự các lời chứng thực theo ý muốn.

B. Settings (Cài đặt)

Image9

  • Màu sắc (Colors): (Thường liên quan đến việc chọn bảng màu chung hoặc màu nhấn cho băng chuyền, nhưng trong hình chỉ hiển thị “Mặc định”).
  • Bố cục (Layout): Chọn cách hình ảnh, nội dung và tên được sắp xếp trong mỗi slide (ví dụ: Image Inline – Hình ảnh nằm cùng hàng với văn bản).
  • Căn chỉnh (Align): Căn chỉnh nội dung của băng chuyền (trái, giữa, phải).
  • Slides Per View (Số slide hiển thị): Chọn số lượng lời chứng thực hiển thị cùng lúc trên băng chuyền.
  • Slides to Scroll (Số slide cuộn): Đặt số lượng lời chứng thực sẽ cuộn mỗi lần chuyển động.
  • Chiều rộng (Width): Đặt chiều rộng cho băng chuyền (theo %).
  • Autoplay (Tự động phát): Bật/tắt chế độ tự động chuyển slide.
  • Autoplay Speed (Tốc độ tự động phát): Đặt thời gian (ms) giữa các lần chuyển slide tự động.
  • Infinite Loop (Vòng lặp vô hạn): Bật/tắt chế độ lặp lại vô hạn của băng chuyền.
  • Pause On Hover (Tạm dừng khi di chuột): Tạm dừng tự động phát khi di chuột qua băng chuyền.
  • Navigation (Điều hướng): Chọn loại điều hướng (Mũi tên & Dấu chấm, Mũi tên, Dấu chấm, Không).
  • Animation Speed (Tốc độ hoạt ảnh): Điều chỉnh tốc độ chuyển động giữa các slide (tính bằng ms).

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

Đây là nơi bạn tùy chỉnh giao diện của băng chuyền lời chứng thực.

A. Testimonial (Lời chứng thực)

Image12

  • Background Color (Màu nền): Màu nền của mỗi slide lời chứng thực.
  • Border Type (Loại đường viền): Thêm đường viền cho mỗi slide.
  • Border Width (Độ dày đường viền): Độ dày của đường viền.
  • Border Color (Màu đường viền): Màu của đường viền.
  • Border Radius (Bán kính bo tròn): Bo tròn góc của mỗi slide.
  • Box Shadow (Bóng đổ): Thêm bóng đổ cho mỗi slide.
  • Padding (Khoảng đệm): Khoảng đệm bên trong mỗi slide.

B. Content (Nội dung)

 

Image2

  • Text Color (Màu văn bản): Màu chữ cho nội dung lời chứng thực.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nội dung lời chứng thực.

C. Image (Hình ảnh)

Image10

  • Size (Kích thước): Kích thước của ảnh đại diện khách hàng.
  • Border Radius (Bán kính bo tròn): Bo tròn góc của ảnh đại diện (thường dùng để tạo ảnh tròn).
  • Spacing (Khoảng cách): Khoảng cách giữa hình ảnh và tên khách hàng.

D. Name (Tên)

Image6

  • Color (Màu sắc): Màu chữ cho tên khách hàng.
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho tên khách hàng.

E. Title (Chức danh/Tiêu đề)

Image5

  • Color (Màu sắc): Màu chữ cho chức danh/tiêu đề của khách hàng.
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho chức danh/tiêu đề.

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

Image13

  • Arrows (Mũi tên):
    • Color (Màu sắc): Màu của các mũi tên điều hướng.
    • Size (Kích thước): Kích thước của các 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.
    • Spacing (Khoảng cách): Khoảng cách giữ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 Băng chuyền Lời chứng thực.

Image4

  1. Bố cục (Layout):
  • Margin (Lề): Khoảng cách bên ngoài tiện ích Băng chuyền Lời chứng thực 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 Băng chuyền Lời chứng thực.
  • 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 Băng chuyền Lời chứng thực 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 Băng chuyền Lời chứng thực.
  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 Băng chuyền Lời chứng thực 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...