11 thanh trượt website thực hành tốt nhất mà bạn phải theo dõi – Bạn muốn thêm thanh trượt hình ảnh vào website? Trước khi bạn làm, có vài thực hành tốt nhất mà bạn nên biết. Với bài này, tôi xin chia sẻ 11 thực tiễn tốt nhất về thanh trượt website mà bạn phải tuân theo nếu muốn thanh trượt thân thiện với người dùng, thu hút khách truy cập đến website.
Nếu sử dụng WordPress, vài giao diện sẽ đi kèm với tùy chọn để thêm thanh trượt hình ảnh. Tuy nhiên, hầu hết thanh trượt này rất hạn chế về tính năng. Để làm theo mọi thực tiễn tốt nhất này (không phải mã hóa thanh trượt riêng bạn), khuyên bạn nên sử dụng plugin thanh trượt WordPress như Soliloquy.
Thiết kế cho thiết bị di động
Bạn biết khoảng. 56% lưu lượng truy cập website đến từ điện thoại di động? Điều đó nghĩa là hơn nửa số khách truy cập sẽ nhìn vào thanh trượt từ thiết bị di động.
Để đảm bảo thanh trượt bên bạn luôn hoạt động theo cách nó cần, bạn nhất định phải sử dụng thiết kế đáp ứng. (Thiết kế đáp ứng đơn giản nghĩa là thanh trượt điều chỉnh theo kích thước màn hình nhỏ được sử dụng bởi loạt thiết bị di động khác nhau.)
Nếu bạn đang sử dụng plugin Soliloquy Slider, bạn không phải lo lắng về điều đó vì mọi giao diện từ Soliloquy đều đáp ứng đầy đủ, thân thiện với thiết bị di động. Bạn thậm chí tạo slide riêng thiết bị di động nếu bạn muốn, thay đổi cài đặt di động để thanh trượt trông chính xác theo cách bạn muốn ở màn hình nhỏ.
Use Thumbnail Navigation for Sliders with 4+ Slides
Đặc biệt nếu thanh trượt bên bạn bao gồm 4 slide trở lên, bạn sẽ cần bao gồm cách dễ dàng để khách truy cập điều hướng giữa slide. Cách trực quan, thân thiện với người dùng nhất để thêm điều hướng vào thanh trượt là với hình thu nhỏ thanh trượt.
Hình thu nhỏ đồng ý khách truy cập xem trước trang chiếu sắp tới, trước đó. Qua cách này, họ tìm thấy slide chính xác mà họ cần chỉ bằng cú nhấp chuột, mà không cần phải chà qua lại.
Dưới đây là ví dụ về thanh trượt với điều hướng hình thu nhỏ:
Hiển thị ảnh trong Popup Lightbox
Nếu bạn dự định sử dụng thanh trượt để hiển thị danh mục đầu tư hay ảnh bạn muốn làm nổi bật, bạn sẽ cần thiết lập nó để hình ảnh mở ở cửa sổ bật lên lightbox khi nhấp vào.
Nhờ cách này, bạn sử dụng toàn bộ khu vực xem màn hình lớn cùng độ phân giải để hiển thị những bức ảnh đẹp bạn sở hữu.
Dưới đây là ví dụ về thanh trượt lightbox (nhấp trang chiếu để xem cửa sổ bật lên lightbox):
Lên lịch khuyến mãi của bạn
Nếu bạn dự định sử dụng thanh trượt để có ưu đãi đặc biệt, ưu đãi giới hạn thời gian, hãy đảm bảo bạn lên lịch slide này chỉ xuất hiện vào ngày khuyến mãi.
Nếu bạn đang sử dụng Soliloquy, bạn đặt ngày bắt đầu, ngày kết thúc cho trang chiếu (như được hiển thị).
Xem thêm: Xây dựng trang Website với WordPress
Nhập hình ảnh truyền thông xã hội của bạn
Nếu bạn hay đăng hình ảnh lên phương tiện truyền thông xã hội, chẳng hạn Instagram, bạn không nên tự tải lên rồi chèn hình ảnh này vào thanh trượt website. Đó không phải là quy trình công việc tốt.
Để quản lý thời gian tốt hơn, hãy nhập hình ảnh trực tiếp từ phương tiện truyền thông xã hội vào thanh trượt hình ảnh.
Nếu bạn sử dụng Soliloquy, mọi thứ bạn phải làm là chọn Thanh trượt bên ngoài, chọn tài khoản truyền thông xã hội bạn muốn nhập từ đó.
Dưới đây là ví dụ về thanh trượt Instagram
Thêm nút Pin-It vào trang trình bày của bạn
Nói về phương tiện truyền thông xã hội, Pinterest là nền tảng chia sẻ hình ảnh lớn nhất thế giới. Bạn đang tận dụng triệt để điều đó?
Đảm bảo thêm nút Pinterest vào trang chiếu để khán giả chia sẻ hình ảnh bên bạn trực tiếp lên bảng Pinterest họ.
Bảo vệ các slide của bạn khỏi Trộm hình ảnh
Để đảm bảo không ai tải xuống hình ảnh từ slide bên bạn rồi đánh cắp chúng, hãy đảm bảo tắt khả năng nhấp chuột phải.
Sử dụng CSS tùy chỉnh
Đôi khi bạn cần tùy chỉnh vài khía cạnh nhất định về ngoại hình thanh trượt, để nó hoàn toàn phù hợp với thương hiệu website cùng nhu cầu duy nhất bạn đưa ra. Thêm mã CSS tùy chỉnh riêng bạn đồng ý bạn làm điều này.
CSS tùy chỉnh cũng cung cấp đến thanh trượt bên bạn liên lạc cá nhân, vì vậy chúng dễ nhớ hơn, không giống bất kỳ ai khác.
Soliloquy đồng ý bạn thêm biểu định kiểu riêng mình cho thanh trượt hoàn toàn độc đáo.
Kết nối slide sản phẩm với giỏ hàng của bạn
Nếu bạn dự định sử dụng thanh trượt để hiển thị sản phẩm bạn có bán, bạn sẽ cần kết nối slide đó với giỏ hàng.
WooCommerce là plugin WordPress mà chúng tôi khuyên dùng để thêm hệ thống giỏ hàng vào website bạn. Nó cũng dễ dàng tích hợp với thanh trượt hình ảnh Soliloquy.
Bản demo thanh trượt sản phẩm WooCommerce
Sử dụng băng chuyền để hiển thị hơn 10 slide
Nếu bạn muốn hiển thị 10 hình ảnh trở lên ở trang chiếu, tốt nhất nên sử dụng bố cục băng chuyền.
Băng chuyền hiển thị trang chiếu liên tiếp với nút điều hướng đồng ý bạn dễ dàng duyệt qua toàn bộ hình ảnh ở thanh trượt.
Đây là ví dụ về thanh trượt băng chuyền:
Thiết lập cài đặt thanh trượt mặc định
Đặc biệt, nếu bạn có kế hoạch tạo thanh trượt thường xuyên, bạn sẽ muốn thiết lập cài đặt thanh trượt mặc định để bạn không phải đặt thanh trượt thủ công mỗi khi bạn tạo thanh trượt mới.
Kết luận
Đó là tất cả! hy vọng bài viết này đã giúp bạn tìm hiểu 11 thực tiễn tốt nhất về thanh trượt website bạn phải tuân theo.
