Slider là gì? Hướng dẫn cơ bản tạo slider trong wordpress site

Thanh trượt. Băng chuyền. Trình chiếu. Bất kể bạn gọi chúng là gì, thanh trượt là một công cụ thiết kế cực kỳ linh hoạt cho phép bạn trưng bày hình ảnh, video và các nội dung khác đẹp mắt và hiệu quả hơn trong khi tối đa hóa không gian trên trang web của bạn. Cho dù bạn cần một cách đơn giản để hiển thị trình chiếu ảnh trên trang web Thương mại điện tử hoặc bất động sản hoặc muốn một tiêu đề video táo bạo với lời gọi hành động, thanh trượt có thể giúp bạn nhanh chóng thu hút sự chú ý của khách truy cập .

Không có thư rác. Miễn phí. Chỉ cần email giám tuyển.

Trong bài đăng này, chúng tôi sẽ đi sâu vào các thanh trượt, sử dụng các ví dụ từ Smart Slider 3 , một plugin trượt phổ biến cho WordPress. Chúng ta sẽ khám phá chúng là gì, chúng được sử dụng như thế nào , các loại thanh trượt khác nhau mà bạn có thể tạo, cũng như tất cả các loại hành vi, yếu tố, hoạt hình và hiệu ứng khác nhau mà bạn có thể đưa vào thanh trượt của mình.

Một thanh trượt là gì?

Thuật ngữ thanh trượt được sử dụng cho một yếu tố thiết kế, được thêm vào trang WordPress để hiển thị nội dung trực quan . Từ trình chiếu hình ảnh cổ điển đến thanh trượt toàn màn hình hiện đại , thanh trượt có đủ hình dạng và kích cỡ. Sử dụng plugin thanh trượt WordPress phù hợp, thật dễ dàng để tạo thanh trượt của riêng bạn. Các nhà thiết kế yêu thích các thanh trượt vì tính linh hoạt của chúng và các yếu tố thị giác giúp dễ dàng kể một câu chuyện hấp dẫn. Mặt khác, chủ sở hữu trang web yêu thích họ vì họ có thể quảng bá nhiều khía cạnh của một doanh nghiệp trong một thành phần và không gian trang web . Về cơ bản nhất, trình chiếu hình ảnh có thể chứa một loạt hình ảnh, mỗi hình ảnh có chú thích riêng, như ví dụ này:

Thanh trượt hình ảnh đơn giản với chú thích

Nhưng trong những năm gần đây, thanh trượt đã phát triển để cung cấp chức năng và tính năng lớn hơn ngoài hình ảnh và văn bản đơn giản . Giờ đây, bạn có thể thêm video, sử dụng các lớp để kết hợp hình ảnh, văn bản và nút và thậm chí bao gồm cả các yếu tố và hình động - tất cả trong cùng một thanh trượt. Chúng ta hãy xem một vài ví dụ hiện đại . Amazon sử dụng thanh trượt tự do trên khắp trang web của mình để quảng bá sản phẩm của mình. Trên trang chủ, có một thanh trượt với các sản phẩm nổi bật, cũng như một số thanh trượt nhỏ bên dưới với những người bán hàng tốt nhất. Trong ví dụ này, Airbnb sử dụng một thanh trượt trên trang chủ của nó để hiển thị các thành phố mà mọi người có thể đặt chỗ ở ngắn hạn trên toàn thế giới: Và trong ví dụ phức tạp hơn này, Lonely Planet sử dụng thanh trượt trang chủ toàn màn hình kết hợp điều hướng và xem trước văn bản để hiển thị các bài viết nổi bật mới nhất của nó: Đây chỉ là một số thương hiệu lớn sử dụng thanh trượt để hiển thị nội dung tốt nhất của họ trong khi tối đa hóa không gian màn hình quan trọng. Nhưng nó không chỉ là thương hiệu lớn sử dụng thanh trượt. Thanh trượt rất dễ dàng để thêm vào bất kỳ trang web WordPress nào và có rất nhiều tùy chọn ngoài đó, đặc biệt là cho người dùng WordPress.

Làm thế nào để Sliders làm việc với WordPress?

Thêm thanh trượt vào trang web WordPress của bạn cũng dễ như cài đặt và kích hoạt plugin, sau đó sử dụng trình xây dựng hình ảnh được cung cấp để thiết kế thanh trượt của bạn. Có rất nhiều plugin trượt WordPress có sẵn, cho phép bạn tạo thanh trượt và thêm chúng vào bất kỳ trang hoặc bài đăng nào trên trang web của bạn. Bạn có thể tải xuống các plugin trượt miễn phí từ WordPress.org . Dưới đây, bạn sẽ thấy Smart Slider 3 là plugin thanh trượt được đánh giá cao nhất cho WordPress : Ngoài ra còn có nhiều plugin trượt cao cấp có sẵn cho WordPress, chẳng hạn như Smart Slider 3 Pro và Revolution Slider , hai plugin sau được đóng gói với nhiều chủ đề ThemeForest. Thông thường, các plugin trượt miễn phí chỉ cung cấp các tính năng cơ bản, chẳng hạn như khả năng tạo thanh trượt hình ảnh với chú thích và chuyển tiếp đơn giản. Khi bạn nâng cấp lên một plugin trượt cao cấp, bạn có thể bắt đầu xây dựng thanh trượt phức tạp hơn sử dụng các lớp, hình ảnh, văn bản, video, CTAs, hình ảnh động , và nhiều hơn nữa.

Mang ý tưởng của bạn đến với cuộc sống

Quyền lực. Trực quan. Trực giác. Smart Slider 3 là công cụ tạo khối và thanh trượt tiên tiến nhất cho WordPress và Joomla.

Tải xuốngMua ngay

Các loại thanh trượt

Có một số loại thanh trượt khác nhau, mỗi loại cung cấp cấu trúc cho một thanh trượt, trên đó bạn có thể thêm các yếu tố khác. Đây là những loại thanh trượt bạn sẽ tìm thấy trong Smart Slider 3: 

• Tiêu chuẩn - Còn được gọi là trình chiếu, loại thanh trượt này cho phép bạn hiển thị nhiều hình ảnh một lần.
• Carousel - Loại thanh trượt này hiển thị hai hoặc nhiều hình ảnh cùng một lúc, người dùng có thể quay vòng qua.
• Showcase - Loại thanh trượt này cho phép bạn đặt tiêu điểm vào một hình ảnh, nhưng cũng có thể xem lén các hình ảnh khác trong sê-ri.
• Accordion - Accordion trượt ra như một chiếc đàn accordion khi bạn nhấp vào từng hình ảnh.
• Khối - Một khối nội dung chỉ có một slide nhưng có thể bao gồm nhiều yếu tố khác nhau (văn bản, hình ảnh, video, v.v.), hình động và hiệu ứng.

Các loại hành vi trượt

Ngoài các loại thanh trượt, có các hành vi trượt khác nhau xác định cách thức một loại thanh trượt sẽ trông như thế nào trên một trang web. 

• Mặc định - Đây là loại bố cục điển hình nhất bạn sẽ bắt gặp trên web, chẳng hạn như trang web Thương mại điện tử hiển thị các mặt hàng sản phẩm.
• Toàn bộ chiều rộng - Hiển thị một thanh trượt trên toàn bộ chiều rộng của trang.
• Toàn trang - Bố cục toàn màn hình này sẽ lấp đầy toàn bộ trang trong màn hình đầu tiên.
• Thanh - Sử dụng bố cục này để hiển thị một thanh ở dưới cùng của thanh trượt cho văn bản và chú thích.
• Accordion (ngang và dọc) - Đối với thanh trượt accordion, bạn có thể chọn hiển thị hình ảnh theo chiều ngang hoặc chiều dọc.
• Hình thu nhỏ (ngang và dọc) - Hiển thị hình thu nhỏ cho loạt hình ảnh của bạn (hoặc nội dung khác) theo chiều ngang hoặc chiều dọc.

Làm việc với các lớp trượt

Các plugin trượt miễn phí (ngoại trừ Smart Slider 3) cho phép bạn chỉ tạo các trình chiếu cơ bản bằng hình ảnh và văn bản. Mặt khác, các plugin trượt cao cấp, cho phép bạn thiết kế nội dung trái tim của mình bằng các lớp. Các lớp về cơ bản là khối xây dựng nội dung mà bạn có thể thêm vào thanh trượt để tạo ra các thiết kế phức tạp hơn, đẹp hơn và phức tạp hơn. Tương tự, Photoshop và các chương trình chỉnh sửa hình ảnh khác sử dụng các lớp để cho phép người dùng xếp chồng và làm việc với các loại nội dung khác nhau. Các lớp cơ bản nhất bạn sẽ tìm thấy trong các plugin thanh trượt cao cấp bao gồm: Tiêu đề, Văn bản, Hình ảnh, Nút và Video (YouTube, Vimeo và tự lưu trữ). Một số thanh trượt cao cấp và nâng cao cũng có thể cung cấp các loại lớp nội dung khác, chẳng hạn như: Biểu tượng, Danh sách, Chú thích, Hộp hình ảnh (và vùng hình ảnh), Chuyển tiếp, Thanh tiến trình, Bộ đếm (và bộ đếm vòng tròn), Âm thanh, Vùng văn bản và iFrame. Cách tốt nhất để hiểu đầy đủ về cách thức hoạt động của các lớp là nhìn thấy chúng hoạt động. Kiểm tra video dưới đây để xem các lớp hoạt động như thế nào trong phiên bản miễn phí của Slider Slider 3 . 

Thêm hiệu ứng động và hiệu ứng cho thanh trượt

Bạn có thể quen thuộc với hình ảnh động trượt từ phải sang trái mặc định mà nhiều trình chiếu hình ảnh sử dụng khi chuyển qua hình ảnh. Nhưng điều thú vị khi làm việc với các thanh trượt là có nhiều hiệu ứng và hiệu ứng tuyệt vời hơn mà bạn có thể sử dụng để thêm các hiệu ứng táo bạo và tinh tế vào trang web của mình.

Ảnh nền

Cho dù bạn muốn làm mờ, xoay, thu phóng hoặc làm cho hình ảnh của bạn bùng nổ một cách ẩn dụ, có hàng tá hình động nền khác nhau mà bạn có thể sử dụng để chuyển tiếp giữa mỗi slide. 

Ảnh động lớp

Tương tự như hoạt hình nền, hoạt ảnh lớp cho phép bạn tạo hiệu ứng cho các lớp cụ thể trong thanh trượt của mình, chẳng hạn như hoạt hình nút bên dưới.

NHÀ THIẾT KẾ UI.

TÔI LÀ PETER.

XIN CHÀO.

NHÀ THIẾT KẾ UI.

TÔI LÀ PETER.

XIN CHÀO.

Độ mờ hàng đầu - Thời lượng: 1600, Offset X: 400

Văn bản hoạt hình

Với hình ảnh động văn bản, bạn có thể làm động các từ của bạn và làm cho văn bản trở nên sống động như một chuỗi các dòng, từ hoặc ký tự.

HETÔITÔIO. TÔI MỘTM PETER. BẠNTÔI DESTÔIGNER.

XIN CHÀO. TÔI LÀ PETER.NHÀ THIẾT KẾ UI.TÔI LÀM ĐƠN GIẢN VÀ SẠCH SẼGIẢI PHÁP THIẾT KẾ CHOWEB & DI ĐỘNG.

XIN CHÀO. TÔI LÀ PETER.

HETÔITÔIO. TÔI MỘTM PETER.

Chế độ: Chars - Sắp xếp: Bình thường, Thời lượng: 1500, Stagger: 200, Offset-X: 200

Hiệu ứng Ken Burns

Làm cho các slide của bạn bật lên với hiệu ứng Ken Burns phóng to và thu nhỏ thanh lịch này , được phát minh cho phim. Một cách đơn giản để cung cấp cho hình ảnh của bạn ảo ảnh của chuyển động.

Downscale - Tốc độ: Chậm, Sức mạnh: Mặc định

Thị sai

Thêm chiều sâu cho thanh trượt của bạn, hoặc ít nhất là ảo ảnh của nó với thị sai. Hình ảnh Parallax di chuyển ở các tốc độ khác nhau và tạo ra ảo ảnh quang học về chiều sâu. 

Chia hình dạng hoạt hình

Thêm các đường cong di chuyển, đám mây và hình dạng đường chéo vào thanh trượt của bạn với hiệu ứng chia hình dạng hoạt hình .

Ví dụ bộ chia hình hoạt hình

Hiệu ứng hạt

Tuyệt đẹp nhưng đơn giản. Sử dụng hiệu ứng hạt cho phép bạn thêm các hình dạng và đường di chuyển, dấu chấm, hình tam giác và đa giác theo con trỏ

Ví dụ hiệu ứng hạt

Tạo thanh trượt: Các tính năng và chức năng cần chú ý khi chọn Plugin WordPress Slider

Bây giờ bạn đã có hiểu biết cơ bản về các loại và hành vi khác nhau của thanh trượt, cũng như các lớp, hình động và hiệu ứng, đã đến lúc xem xét một số tính năng nâng cao mà bạn có thể thấy trong các plugin trượt WordPress có uy tín . Từ các loại nội dung và yếu tố động khác nhau đến khả năng hiệu suất và tối ưu hóa, đây là những tính năng bạn nên chú ý khi chọn một plugin trượt chất lượng.

Trình chỉnh sửa trực quan

Mỗi plugin trượt tốt nên đi kèm với trình chỉnh sửa trực quan cho phép bạn thiết kế từng slide riêng lẻ, giống như cách bạn làm với Photoshop và các chương trình chỉnh sửa hình ảnh khác. Trình chỉnh sửa trực quan cho phép bạn kéo và thả các lớp, thay đổi phông chữ, kích thước, màu sắc, thêm hiệu ứng động và hiệu ứng , và nói chung thao tác nội dung trong các trang chiếu của bạn để trông chính xác như bạn muốn.

Giao diện quản trị của Smart Slider 3

Lớp và tùy chỉnh

Hãy tưởng tượng nếu Photoshop không có lớp? Sẽ rất khó để thiết kế và chỉnh sửa hình ảnh, phải không? Đáng ngạc nhiên, nhiều plugin trượt không sử dụng các lớp. Không có chúng, bạn bị hạn chế nghiêm trọng về cách bạn có thể thiết kế các plugin của mình. Các lớp cho phép bạn tạo các thanh trượt giàu nội dung, có thể có nhiều hình ảnh, văn bản, video và các yếu tố khác được xếp cùng nhau để tạo thành một slide tương tác. Khi chọn plugin trượt, hãy đảm bảo rằng nó bao gồm các lớp cơ bản nhất (tiêu đề, văn bản, hình ảnh, video và nút) , cũng như bất kỳ nội dung nâng cao nào bạn có thể cần, chẳng hạn như biểu tượng, âm thanh, danh sách và bộ đếm.

Xem trước trực tiếp

Giống như bất kỳ phần mềm nào, xem trước trực tiếp cho phép bạn nhanh chóng xem mọi thay đổi bạn thực hiện trong thời gian thực. Ví dụ: sau khi cập nhật hình ảnh hoặc thêm lớp văn bản hoặc chuyển tiếp, bạn có thể nhấp vào 'Xem trước' để nhanh chóng xem trước các thay đổi của mình và xem thanh trượt của bạn trông như thế nào với tất cả các lớp, hình động và hiệu ứng hoạt động cùng nhau .

Nội dung động

Bạn không bị giới hạn chỉ thêm hình ảnh tĩnh, video và văn bản vào trang chiếu của mình. Một số plugin trượt, như Smart Slider 3, cho phép bạn tạo các slide có nội dung động , chẳng hạn như bài đăng trên blog của WordPress và Joomla , danh sách phát YouTube và thậm chí các sản phẩm từ trang web WooC Commerce của bạn. Điều này có nghĩa là bạn có thể tự động hiển thị nội dung, chẳng hạn như các sản phẩm bán chạy nhất của cửa hàng thương mại điện tử, bài đăng blog mới nhất của bạn hoặc thậm chí bổ sung video mới vào kênh YouTube của bạn.

Thanh trượt sản phẩm

Trình tạo trang tương thích

Nếu bạn đã xây dựng trang web của mình bằng trình tạo trang, chẳng hạn như Elementor, Beaver Builder, Divi, Site Origin hoặc WP Bakery Page Builder, hãy chắc chắn kiểm tra xem bất kỳ plugin trượt nào bạn chọn có tương thích hay không.

Thiết kế đáp ứng

Đảm bảo rằng thiết kế trang web của bạn phản hồi nhanh là điều tối quan trọng khi Google đã chuyển sang lập chỉ mục đầu tiên trên thiết bị di động . Vì vậy, chọn một plugin trượt cung cấp thiết kế đáp ứng nhanh chóng. Một số thanh trượt, như Smart Slider 3, cung cấp các cài đặt dành riêng cho thiết bị cho máy tính để bàn, máy tính bảng và thiết bị di động . Điều này có nghĩa là thanh trượt của bạn sẽ tự động điều chỉnh cho các thiết bị khác nhau. Bạn có thể chọn bật các tính năng như nghiêng và vuốt hoặc đơn giản là tắt thanh trượt cho các thiết bị cụ thể.

Nội dung phản hồi trong Smart Slider 3

Hỗ trợ và cập nhật

Các plugin trượt cao cấp phải luôn đi kèm với hỗ trợ ưu tiên, vì vậy nếu bạn gặp phải bất kỳ vấn đề nào, bạn có thể liên hệ để được trợ giúp. Hỗ trợ thường không đi kèm với các plugin trượt miễn phí, mặc dù bạn có thể sử dụng Diễn đàn hỗ trợ WordPress nếu bạn có bất kỳ câu hỏi nào. Luôn cập nhật plugin trượt của bạn cũng rất quan trọng đối với bảo mật và hiệu suất và vì vậy bạn có thể nâng cấp để nhận các tính năng mới.

Tốc độ và hiệu suất

Có một nhận thức chung rằng các thanh trượt ảnh hưởng tiêu cực đến hiệu suất trang web. Thông thường, mọi người thêm hình ảnh vào thanh trượt quá lớn hoặc chưa được tối ưu hóa. Vì vậy, nếu một plugin thanh trượt ảnh hưởng hơn nữa đến hiệu suất, thì đó sẽ là một gấp đôi cho tốc độ tải trang. Điều quan trọng là các slide của bạn tải ngay lập tức nhưng không làm chậm quá trình tải trang của bạn, vì vậy hãy xem các plugin trượt cung cấp tối ưu hóa hình ảnh và tải lười biếng. Cả hai kỹ thuật này sẽ giúp các slide của bạn tải nhanh chóng. Tương tự, tối ưu hóa tập lệnh là một tính năng khác mà bạn sẽ bắt gặp trong các plugin cao cấp như Smart Slider 3 Pro.

Thân thiện với SEO

Khi bạn thêm các loại nội dung khác nhau như hình ảnh và video vào thanh trượt của mình, sẽ rất hợp lý khi tận dụng nó cho SEO , phải không? Vì vậy, khi chọn một plugin trượt, hãy đảm bảo rằng nó được thiết kế dành cho SEO và cấu trúc HTML của nó tuân theo thực tiễn tốt nhất về SEO . Điều này sẽ đảm bảo các slide cá nhân của bạn cùng với văn bản thay thế mà bạn đã nhập cho các cấp bậc nội dung của bạn trong tìm kiếm.

Thân thiện với nhà phát triển

Nếu bạn muốn kiểm soát nhiều hơn đối với thiết kế trang chiếu của mình, hãy tìm một plugin trượt thân thiện với nhà phát triển và cho phép mã tùy chỉnh trong các trang chiếu, nhưng cũng cho phép bạn chỉnh sửa các tệp bên ngoài để tùy chỉnh như hình động và hiệu ứng.

Phần kết luận

Bây giờ bạn đã học tất cả những điều cần biết về thanh trượt và cách chúng hoạt động với WordPress, bạn đã sẵn sàng bắt đầu tạo riêng cho mình! Như tôi đã đề cập ở trên, có một số tùy chọn miễn phí tuyệt vời, nhưng tôi khuyên bạn nên bắt đầu với Smart Slider 3, bạn có thể tải xuống từ WordPress.org. Smart Slider 3 đi kèm với vô số tính năng và tùy chọn (bao gồm mọi thứ được đề cập trong bài viết này và hơn thế nữa). Kiểm tra các ví dụ thanh trượt tuyệt đẹp này và tải xuống Smart Slider 3 miễn phí để bắt đầu.