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 pricing table (bảng giá dịch vụ) 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é!
Pricing table (bảng giá dịch vụ) đóng một vai trò quan trọng đối với các web kinh doanh về dịch vụ. Nó sẽ giúp người dùng chọn lựa chọn các sản phẩm phù hợp với tiêu chí của mình. Khi thiết kế pricing table, bạn nên kiểm tra cẩn thận các danh mục sản phẩm và chọn các tính năng quan trọng nhất để trình bày. Sau đó chúng ta đi vào thiết lập danh sách chi tiết hơn cho từng chức năng cụ thể và so sánh rõ ràng giữa chức năng của các gói dịch vụ mà mình cung cấp.
Sau đây mình sẽ giới thiệu một số component Pricing Table (bảng giá dịch vụ) đượ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.
Thiết Kế Bootstrap Pricing Tables:
Giá dịch vụ là điều đầu tiên mà người dùng muốn thấy khi truy cập bảng giá dịch vụ của bạn do đó mình sử dụng component pricing table này. Nó làm nổi bật giá và tên dịch vụ bằng cách sử dụng những font chữ lớn lơn và thiết kế cũng vô cùng bắt mắt. Nó cũng sắp sếp giá theo hướng tăng dần giúp người dùng dễ dàng so sánh tính năng giữa các với giá tiền khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Bootstrap Pricing Tables 2019 (demo 2) by Sahar Ali Raza (@mrsahar) on CodePen.
Thiết Kế Bootstrap Pricing Snippet:
Bằng cách xây dựng một cách so sánh liền kề chức năng giữa các gói, người dùng sẽ có một cái nhìn trực quan nhất giúp họ dễ dàng tìm được gói phù hợp cho mình. Ngoài ra nó còn có mức đánh giá cho từng sao được thêm ở tiêu đề cho người dùng biết chức năng sẽ cải thiện tốt hơn cho những gói có giá cao hơn. Và do chỉ sử dụng HTML, CSS và Bootstrap nên bạn có thể sử dụng hầu như đa số cho mọi thiết kế web mà không cần phải cài thêm một plugin nào. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Bootstrap Pricing Table by Prem Regmi (@regmiprem) on CodePen.
Thiết Kế 3D Pricing Table:
Pricing table này theo mình thấy tuy đơn giản nhưng rất sáng tạo bằng cách sử dụng thiết kế 3D cho bảng và hiệu ứng chuyển màu cho từng gói khi người dùng hover vào. Mình có lưu ý nhỏ là nó có sử dụng thuộc tính :after trong CSS, nếu bạn muốn tham khảo lại thì xem ở đây nha: Thuộc tính after CSS. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen 3-d Pricing-table by Aashima (@Aashima) on CodePen.
Cách Tạo Pricing Table UI:
Điểm đặc biệt của pricing table này là việc phối hợp màu sắc giữa các thành phần trong gói bằng thuộc tính CSS background: linear-gradient(...), nếu bạn muốn tham khảo lại thuộc tính này có thể xem ở đây nhé CSS3 Gradient. Ở đây nó làm nổi bật icon bằng kích thước lớn, màu sắc rực rỡ, icon khác nhau cho từng gói để ám chỉ cho người dùng biết rằng mức độ chức năng và tốc độ phụ thuộc vào giá tiền của dịch vụ. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen pricing table ui by jamal hassonui (@devjamal) on CodePen.
Cách Tạo Bootstrap 4 Responsive Pricing Table:
Nếu bạn muốn một thiết kế đơn giản bằng Bootstrap 4 với việc chỉ kết hợp HTML và CSS thì nên chọn component này. Nó sẽ chỉ cho người dùng biết gói được ưu tiên nên lựa chọn bằng cách thiết lập màu nền khác so với các tiêu đề gói dịch vụ còn lại. Ngoài ra nó còn tích hợp hiệu ứng hover đơn giản chuyển đổi màu sắc khi người dùng hover. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Bootstrap Pricing Table by Sahar Ali Raza (@mrsahar) on CodePen.
Thiết Kế Pricing Table HTML5 CSS3:
Pricing table này sử dụng HTML và CSS để thiết kế và nó được responsive trên nhiều loại màn hình thiết bị khác nhau. Do vậy bạn có thể áp dụng hầu như cho tất cả các bố cục trang web. Theo mình nghĩ điểm nổi bật của nó là cách thiết kế màu nền trang web với component này và việc sử dụng font Open Sans giúp nó mang phong cách đơn giản, hiện đại. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Pricing Table by Travis Williamson (@travisw) on CodePen.
Cách Tạo HTML5 Pricing Table:
Nếu bạn cung cấp các gói dịch vụ theo tháng và theo năm thì mình nghĩ nên sử dụng component này. Nó giúp trang web chúng ta giảm bớt đi những thứ không cần thiết và không gây sự khó hiểu cho người dùng. Ở đây nó chuyển đổi thời gian giữa các gói bằng thuộc tính id và tạo hiệu ứng đổi màu sắc cho tiêu đề và nút đăng ký khi người dùng hover vào. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Pricing table by shamim khan (@shamim539) on CodePen.
Thiết Kế Responsive Bootstrap Pricing Table:
Nếu bạn cần chia các tiện ích ra thành từng phần khác nhau và dễ dàng so sánh các chức năng giữa các gói thì bạn nên sử dụng component này. Với thiết kế đơn giản rõ ràng kết hợp với việc chỉ rõ giá tiền khi thêm các plugin tiện ích đi kèm giúp người dùng có thể chọn gói phù hợp nhất với họ. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Responsive Bootstrap Pricing Table by Owen Bick (@bick) on CodePen.
Thiết Kế CSS3 Pricing Table:
Pricing table này được thiết kế nổi bật bởi màu sắc tương phản giữa màu nền và màu chữ. Ngoài ra với việc xây dựng hình tròn cho giá dịch vụ giúp thu hút sự chú ý của người dùng hơn. Nó cũng có hiệu ứng nhỏ là sẽ mở rộng chiều dài của nút đăng kí khi người dùng hover vào. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Pricing Table by Aladin Bensassi (@Eliteware) on CodePen.
Thiết Kế Pricing Table Gradient CSS3:
Pricing table này cũng như ở trên nhưng nó chỉ khác là thiết lập màu sắc tương ứng cho mỗi gói và hiệu ứng sẽ thay đổi màu nền cho giá dịch vụ của gói khi người dùng hover vào. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:
See the Pen Price by catcod (@catcode) on CodePen.
Nếu bạn muốn tham khảo các thiết kế pricing table khác dành cho website thì truy cập đường dẫn bên dưới nha.
Pricing Tables Đẹp Cho Website
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 Pricing Table 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ẻ!
