Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Testimonial Là Gì? 9 Ví Dụ Về Testimonial  Slider

Testimonial Là Gì? 9 Ví Dụ Về Testimonial Slider


Ngày 11 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các slider bằng cách kết hợp HTML, CSS, Javascript và Bootstrap 4 . Nào hãy cũng mình tìm hiểu nhé!

Theo mình thấy chức năng chính của trang web kinh doanh ngày nay là dùng để quảng bá thương hiệu, sản phẩm và tiếp cận tới những khách hàng tiềm năng mà ngày xưa cửa hàng thông thường không thể tiếp cận được. Vậy làm sao để một khách hàng khi vào trang web của chúng ta có thể tin tưởng và sẵn sàng chi tiền cho sản phẩm? Ngoài những nội dung ấn tượng thì mình nghĩ cần thêm những lời nhận xét, đánh giá của khách hàng cũ khi sử dụng sản phẩm lên trên trang web như là hình ảnh khách hàng và đánh giá, video quay lại cảm nghĩ khách hàng...

Do quan trọng như vậy nên sau đây mình sẽ giới thiệu một số component Testimonials Slider (nhận xét) được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Testimonials Slider:

Testimonials Slider

Testimonials này sử dụng màu nền đen với chữ trắng làm nổi bật lời nhận xét, đánh giá của khách hàng và bạn có thể thoải mái sử dụng cho mọi trang web vì nó được thiết bởi 3 ngôn ngữ cơ bản là HTML, CSS và Javascript. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Testimonials Slider by Fey (@feyinway) on CodePen.

Nguồn

Testimonial Carousel Design:

Testimonial Carousel Design

Điểm đặc biệt của Testimonials này là không sử dụng các nút điều khiển hay tự động chuyển trang mà chúng ta phải giữ chuột và kéo sang trái hoặc sang phải để thấy nhận xét. Và nó cũng áp dụng chức năng lazy loading giúp giảm thời gian tải khi bạn sử dụng trên trang web. Mình có điểm lưu ý nhỏ là nó có sử dụng thêm plugin Owl Carousel 2, bạn có thể tham khảo ở đây nhé Owl Carousel 2 và để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

See the Pen Testimonial Carousel Design by FinByz Tech Pvt. Ltd. (@finbyz) on CodePen.

Nguồn

Responsive Testimonial Carousel:

Responsive Testimonial Carousel

Điểm đặc biệt của Testimonials này là ngoài hiện lời nhận xét đánh giá của khách hàng mà còn hiện thêm số sao đánh giá cho sản phẩm của chúng ta giúp người dùng có cái nhìn trực quan hơn. Nó cũng có chức nằng tự động chuyển trang và cho phép xem hình ảnh và số sao của khách hàng tiếp theo.Mình có điểm lưu ý nhỏ là nó có sử dụng thêm plugin Owl Carousel 2, bạn có thể tham khảo ở đây nhé Owl Carousel 2. Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen Responsive Testimonial Carousel by Md Nahidul Islam (@thenahid) on CodePen.

Nguồn

Creative Testimonial Circle Slider:

Creative Testimonial Circle Slider

Điểm đặc biệt của Testimonials này là cách thiết kế đơn giản nhưng hiện đại và có tính sáng tạo rất cao, theo mình thấy nên sử dụng cho các trang web về công nghệ thông tin . Nó cũng có chức nằng tự động chuyển trang và cho phép xem tất cả hình ảnh của khách hàng sẽ đưa ra đánh giá. Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen Testimonials 3(source from bootsnipp) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Testimonial:

Testimonial

Điểm đặc biệt của Testimonials này là cách thiết kế đơn giản và sử dụng component carousel trong Bootstrap 4 để tạo hiểu ứng chuyển động cho các nhận xét đánh giá của khách hàng. Ảnh nền cũng một điểm rất đáng chú ý giúp làm nổi bật nội dung cũng như cho khách hàng hiểu thêm về công ty hoặc sản phẩm . Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen Testimonial by Baahubali (@anupkumar92) on CodePen.

Nguồn

Bootstrap Testimonial Với Hover Animation:

Bootstrap Testimonial Với Hover Animation

Testimonials này chúng ta sử dụng hệ thống lưới kết hợp với component card trong Bootstrap 4 để thiết kế giúp bạn dễ dàng reponsive trên nhiều màn hình. Nó phù hợp với số lượng nhận xét đánh giá của khách hàng ít và nó cũng có hiệu ứng phóng to khi người dùng hover để không tạo sự nhàm chán cho trang web. . Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen Bootstrap 4 testimonial with hover animation(source from bbbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Responsive testimonial slider:

Responsive testimonial slider

Nếu bạn cần người dùng tập trung chủ yếu vào văn bản trích dẫn nội dung của khách hàng thì bạn nên sử dụng Testimonials này. Ngoài việc tạo chuyển động trang mượt mà nó con rất tốt trong việc sử dụng màu sắc với màu nền hầu như thay đổi để làm nổi bật thông điệp của khách hàng . Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen Responsive testimonial slider by hellokatili (@hellokatili) on CodePen.

Nguồn

Testimonial Card:

Testimonial Card

Nếu bạn thích thiết kể đơn giản cùng với việc yêu thích màu tối thì Testimonials sẽ phù hợp với bạn đấy. Ở đây nó không sử dụng hiệu ứng nào nhưng điểm mình thích ở nó là cách phối màu giũa các thành phần bên trong cũng như như bên ngoài card . Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen #1390 - Testimonial Card by LittleSnippets.net (@littlesnippets) on CodePen.

Nguồn

CSS3 Testimonials Slider:

CSS3 Testimonials Slider

Testimonials này giúp trang web bạn hấp dẫn và chuyên nghiệp hơn bằng cách chia thành 3 thành phần bố cục rõ ràng là hình ảnh, nội dung nhận xét đánh giá , cộng việc của khách hàng. Nhiều người có xu hướng nhớ hình ảnh hơn là chữ do đó bạn nên chọn những khách hàng có sức ảnh hưởng, có uy tín để góp phần tăng thêm mức độ tin cậy của sản phẩm . Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

See the Pen CSS3 Testimonials Slider by Sara Soueidan (@SaraSoueidan) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Testimonials trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!