Cách dễ dàng tạo thanh trượt đáp ứng trong WordPress

Tác giả sysadmin, T.Năm 06, 2023, 02:47:25 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách dễ dàng tạo thanh trượt đáp ứng trong WordPress


Bạn có muốn tạo thanh trượt đáp ứng cho trang web WordPress của mình không?

Thanh trượt thường được sử dụng trên trang nhất của trang web để giới thiệu các sản phẩm, dịch vụ, lời chứng thực hoặc nội dung quan trọng nhất của bạn theo cách tương tác.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm thanh trượt đáp ứng vào trang web WordPress của bạn.

Tại sao lại thêm Thanh trượt WordPress đáp ứng vào trang web của bạn?

Thanh trượt hoặc trình chiếu là một cách tuyệt vời để làm nổi bật các sản phẩm WooC Commerce phổ biến nhất của bạn, video YouTube mới nhất, đánh giá của khách hàng, v.v.


Một số thanh trượt tự động phát, vì vậy chúng tự động di chuyển giữa các trang chiếu. Điều này cho phép bạn hiển thị nhiều thông tin trong một không gian nhỏ, giúp bạn có nhiều chỗ để hiển thị nội dung khác.

Vì lý do này, nhiều trang web sử dụng thanh trượt trên các trang quan trọng nhất của họ, chẳng hạn như trang đích, trang chủ hoặc trang bán hàng.

Ngay cả khi thanh trượt được đặt thành tự động phát, khách truy cập thường có thể di chuyển giữa các trang chiếu theo cách thủ công bằng cách nhấp vào các nút điều hướng. Theo cách này, thanh trượt khuyến khích khách truy cập tương tác với trang web của bạn, điều này làm cho trang web hấp dẫn hơn.

Bạn có thể thấy trong ảnh GIF bên dưới mức độ năng động của một thanh trượt có thể tạo ra một trang.


Như đã nói, hãy xem cách bạn có thể dễ dàng tạo thanh trượt đáp ứng trong WordPress. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng.

1. Phương pháp 1. Tạo Thanh trượt WordPress đáp ứng bằng Plugin (Nhanh chóng và dễ dàng)

Nếu bạn muốn tạo một thanh trượt đơn giản trông đẹp mắt trên máy tính để bàn và thiết bị di động, thì chúng tôi khuyên bạn nên sử dụng plugin Soliloquy.

Plugin thanh trượt WordPress này cho phép bạn tạo các trang chiếu bằng hình ảnh từ thư viện phương tiện của mình và cũng có thể hiển thị video được lưu trữ trên nền tảng của bên thứ ba như YouTube.


Bạn cũng có thể thêm văn bản thay thế và chú thích cho mỗi trang trình bày, điều này rất tốt cho WordPress SEO.

Trước tiên, bạn cần đăng ký tài khoản Soliloquy. Sau đó, bạn có thể cài đặt và kích hoạt plugin Soliloquy trên trang web của mình. Để biết thêm chi tiết, bạn có thể làm theo hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy truy cập Soliloquy » Settings trong bảng điều khiển WordPress và nhập khóa cấp phép của bạn.


Bạn có thể tìm thấy khóa bằng cách đăng nhập vào tài khoản của mình trên trang web Soliloquy. Sau khi nhập thông tin này, nhấp vào nút 'Xác minh khóa'.

Khi đã xong, bạn có thể thêm một thanh trượt mới vào trang web WordPress của mình bằng cách truy cập Soliloquy »Thêm mới.


Bạn có thể bắt đầu bằng cách gõ vào một tiêu đề. Đây chỉ là để bạn tham khảo nên bạn có thể sử dụng bất kỳ thứ gì giúp bạn xác định thanh trượt trong bảng điều khiển WordPress của mình.

Tiếp theo, đã đến lúc thêm hình ảnh và video vào thanh trượt. Bạn có thể kéo và thả tệp vào trình chỉnh sửa hoặc nhấp vào 'Chọn tệp từ các nguồn khác'.


Nếu bạn muốn sử dụng hình ảnh, thì bạn có thể thêm các tệp đó giống hệt như cách bạn thêm hình ảnh trong trình chỉnh sửa khối WordPress.

Nếu bạn muốn bao gồm video, thì chúng tôi khuyên bạn nên tải chúng lên trang web lưu trữ video như YouTube hoặc Vimeo. Tải video trực tiếp lên trang web của bạn không phải là một ý tưởng hay vì nó có thể làm chậm trang web của bạn và chiếm nhiều dung lượng lưu trữ.

Trong khi đó, các nền tảng như YouTube được tối ưu hóa cho video, vì vậy bạn có thể hiển thị video có độ phân giải cao trong thanh trượt mà không ảnh hưởng tiêu cực đến trang web của mình.

Sau khi chọn nền tảng lưu trữ video, bạn sẽ cần tải lên tất cả các video bạn muốn đưa vào thanh trượt WordPress. Nếu bạn không chắc chắn về cách tải video lên, thì chúng tôi khuyên bạn nên đọc tài liệu chính thức hoặc hướng dẫn sử dụng cho nền tảng video bạn đã chọn.

Khi đã xong, chỉ cần nhấp vào nút 'Chọn tệp từ các nguồn khác' rồi chọn 'Chèn trang chiếu video'.


Bây giờ, bạn có thể tiếp tục và dán URL của video vào trường 'URL video'.

Soliloquy hiển thị tất cả các định dạng liên kết được hỗ trợ ở phía bên tay phải, vì vậy hãy đảm bảo rằng liên kết của bạn sử dụng một trong các định dạng này.


Sau khi hoàn thành, bạn có thể tiếp tục và nhập tiêu đề vào trường 'Tiêu đề'. Đây chỉ là để bạn tham khảo để bạn có thể sử dụng bất cứ thứ gì bạn muốn. Bạn cũng có thể thêm văn bản thay thế, điều này sẽ giúp các công cụ tìm kiếm hiểu nội dung của trang trình bày này.

Sau đó, bạn có thể nhập chú thích tùy chọn vào trường 'Chú thích'. Điều này sẽ được hiển thị trong một thanh màu xám ở cuối video trước khi khách truy cập nhấn 'Phát'.


Nếu bạn không muốn hiển thị thanh này, thì chỉ cần để trống trường 'Chú thích'.

Khi hài lòng với thông tin bạn đã nhập, bạn có thể tạo thêm trang chiếu bằng cách nhấp vào 'Thêm trang chiếu video khác'.

Để định cấu hình trang trình bày mới này, chỉ cần thực hiện theo quy trình tương tự được mô tả ở trên.


Khi bạn đã tạo tất cả các trang chiếu của mình, hãy tiếp tục và nhấp vào 'Chèn vào Thanh trượt.'

Bây giờ, bạn sẽ thấy tất cả các trang chiếu của mình trong phần 'Hiện tại trong Thanh trượt của bạn'.


Tiếp theo, bạn có thể nhấp vào tab 'Cấu hình' và thay đổi cài đặt hiển thị thanh trượt. Ví dụ: có các tùy chọn để chọn chủ đề thanh trượt mới, thay đổi kích thước hình ảnh và thay đổi vị trí của thanh trượt và chú thích.

Bạn cũng có thể tùy chỉnh các mũi tên thanh trượt và nút tạm dừng/phát, điều chỉnh tốc độ chuyển tiếp, thay đổi thời gian trễ, v.v.


Tiếp theo, bạn sẽ muốn đảm bảo thanh trượt của mình trông đẹp mắt trên thiết bị di động cũng như trên máy tính và máy tính xách tay.

Như đã nói, hãy nhấp vào tab 'Di động' và chọn hộp bên cạnh 'Tạo Hình ảnh Thanh trượt Di động'.


Sau đó, bạn có thể nhập kích thước bạn muốn sử dụng cho hình ảnh và video trên thiết bị di động. Khi đưa ra những quyết định này, có thể hữu ích khi xem phiên bản di động của trang web WordPress của bạn trên máy tính để bàn.

Theo mặc định, Soliloquy sẽ ẩn phụ đề cho người dùng di động. Thông thường, điều này giúp các trang trình bày vừa vặn thoải mái hơn trên màn hình nhỏ hơn thường được sử dụng bởi điện thoại thông minh và máy tính bảng.

Vì lý do đó, chúng tôi khuyên bạn nên tắt cài đặt này nhưng bạn có thể chọn hộp bên cạnh 'Hiển thị chú thích trên thiết bị di động' nếu muốn.

Khi đã xong, hãy nhấp vào tab 'Khác'. Tại đây, bạn có thể thêm CSS tùy chỉnh vào thanh trượt của mình, chỉnh sửa tiêu đề và sên của thanh trượt cũng như xuất thanh trượt.


Khi bạn hài lòng với cách thiết lập thanh trượt, hãy tiếp tục và nhấp vào nút 'Xuất bản'.

Soliloquy sẽ tự động tạo một mã ngắn mà bạn có thể thêm vào bất kỳ trang, bài đăng hoặc khu vực sẵn sàng cho widget nào.


Để biết thêm thông tin về cách đặt mã ngắn, vui lòng xem hướng dẫn của chúng tôi về cách thêm mã ngắn trong WordPress.

Bạn cũng sẽ nhận thấy một số đoạn mã mà bạn có thể thêm vào chủ đề WordPress của mình.


Để biết hướng dẫn từng bước, hãy xem hướng dẫn của chúng tôi về cách dễ dàng thêm mã tùy chỉnh trong WordPress.

Cách dễ nhất để thêm thanh trượt vào trang web của bạn là sử dụng khối Soliloquy. Chỉ cần truy cập trang hoặc bài đăng nơi bạn muốn hiển thị thanh trượt và sau đó nhấp vào nút '+'.

Trong cửa sổ bật lên xuất hiện, nhập 'Soliloquy'.


Khi khối bên phải xuất hiện, nhấp để thêm nó vào blog hoặc trang web WordPress của bạn.

Sau đó, mở khối Soliloquy và chọn thanh trượt bạn vừa tạo.


Giờ đây, bạn có thể nhấp vào nút 'Cập nhật' hoặc 'Xuất bản' để làm cho thanh trượt hoạt động.

Phương pháp 2. Tạo Thanh trượt đáp ứng bằng Trình tạo trang (Có thể tùy chỉnh thêm)

Nếu bạn muốn tạo một thanh trượt đơn giản, thì một plugin như Soliloquy là một lựa chọn tốt. Tuy nhiên, nếu bạn muốn thêm thanh trượt nâng cao vào trang đích, trang chủ tùy chỉnh hoặc thậm chí chủ đề WordPress của mình thì chúng tôi khuyên bạn nên sử dụng trình cắm trình tạo trang để thay thế.

SeedProd là trình tạo trang WordPress kéo và thả tốt nhất. Nó cho phép bạn thiết kế các trang đích tùy chỉnh và thậm chí tạo một chủ đề WordPress tùy chỉnh mà không phải viết một dòng mã nào.

Nó cũng có một khối Image Carousel mà bạn có thể sử dụng để tạo các thanh trượt tuyệt đẹp.


Bạn có thể chỉ cần thả khối tạo sẵn này vào bất kỳ đâu trên trang và sau đó tùy chỉnh nó bằng trình chỉnh sửa kéo và thả mạnh mẽ.

Trước tiên, bạn cần cài đặt và kích hoạt plugin SeedProd. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Lưu ý: Có một phiên bản SeedProd miễn phí cho phép bạn tạo các thiết kế chuyên nghiệp bất kể ngân sách của bạn là bao nhiêu. Tuy nhiên, chúng tôi sẽ sử dụng plugin SeedProd cao cấp vì nó đi kèm với khối Image Carousel. Nếu bạn đang tạo thanh trượt để quảng bá sản phẩm hoặc dịch vụ của mình thì plugin cao cấp cũng tích hợp với WooC Commerce và tất cả các dịch vụ tiếp thị qua email tốt nhất.

Sau khi kích hoạt plugin, SeedProd sẽ hỏi mã cấp phép của bạn.


Bạn có thể tìm khóa cấp phép này trong tài khoản của mình trên trang web SeedProd. Sau khi nhập thông tin, nhấp vào nút 'Xác minh khóa'.

Khi đã xong, hãy truy cập SeedProd » Landing Pages trong bảng điều khiển WordPress của bạn.


SeedProd đi kèm với hơn 180 mẫu được thiết kế chuyên nghiệp được nhóm thành các danh mục. Dọc phía trên cùng, bạn sẽ thấy các danh mục cho phép bạn tạo các trang sắp ra mắt đẹp mắt, kích hoạt chế độ bảo trì, tạo trang đăng nhập tùy chỉnh cho WordPress và hơn thế nữa.

Tất cả các mẫu của SeedProd đều dễ dàng tùy chỉnh, vì vậy bạn có thể sử dụng bất kỳ thiết kế nào bạn muốn. Khi bạn tìm thấy một mẫu ưng ý, chỉ cần di chuột qua mẫu đó và nhấp vào biểu tượng dấu kiểm.


Giờ đây, bạn có thể nhập tên cho trang đích của mình vào trường 'Tên Trang'. SeedProd sẽ tự động tạo 'URL trang' bằng tên trang.

Thật thông minh khi bao gồm các từ khóa có liên quan trong URL này bất cứ khi nào có thể, vì điều này sẽ giúp các công cụ tìm kiếm hiểu nội dung của trang. Điều này thường có thể cải thiện SEO WordPress của bạn.

Để thay đổi URL được tạo tự động của trang, chỉ cần nhập vào trường 'URL trang'.


Khi bạn hài lòng với thông tin mình đã nhập, hãy nhấp vào 'Lưu và Bắt đầu Chỉnh sửa Trang.' Thao tác này sẽ tải giao diện trình tạo trang SeedProd.

Trình tạo kéo và thả đơn giản này hiển thị bản xem trước trực tiếp thiết kế trang của bạn ở bên phải. Ở bên trái là một menu với tất cả các khối và phần khác nhau mà bạn có thể thêm vào trang.


Khi bạn tìm thấy một khối muốn thêm, chỉ cần kéo và thả khối đó vào mẫu của bạn.

Để tùy chỉnh một khối, chỉ cần nhấp để chọn khối đó trong trình chỉnh sửa SeedProd. Menu bên trái bây giờ sẽ cập nhật để hiển thị tất cả các cài đặt bạn có thể sử dụng để tùy chỉnh nó.


Khi bạn đang xây dựng trang, bạn có thể di chuyển các khối xung quanh bố cục của mình bằng cách kéo và thả chúng. Để biết hướng dẫn chi tiết hơn, vui lòng xem hướng dẫn của chúng tôi về cách tạo trang đích bằng WordPress.

Để tạo một thanh trượt đáp ứng bằng SeedProd, chỉ cần tìm khối Image Carousel trong menu bên trái rồi kéo nó vào bố cục của bạn.


Tiếp theo, nhấp để chọn khối Image Carousel trong trình chỉnh sửa trang.

Bây giờ bạn có thể tiếp tục và thêm tất cả hình ảnh bạn muốn hiển thị vào thanh trượt. Để bắt đầu, hãy nhấp vào mục 'Hình ảnh 1' mà SeedProd tạo theo mặc định.


Giờ đây, bạn có thể sử dụng ảnh từ thư viện tích hợp của SeedProd hoặc nhấp vào 'Sử dụng hình ảnh của riêng bạn' và chọn một tệp từ thư viện phương tiện WordPress.

Sau khi chọn một hình ảnh, bạn có thể thêm chú thích sẽ xuất hiện bên dưới hình ảnh đó. SeedProd không hiển thị chú thích theo mặc định, nhưng chúng tôi sẽ chỉ cho bạn cách bật chúng sau trong bài đăng này.


Khi bạn hài lòng với cách cấu hình trang chiếu, hãy nhấp vào nút 'Thêm hình ảnh' để tạo một trang chiếu khác.

Để thêm nhiều trang chiếu hơn, chỉ cần thực hiện theo quy trình tương tự được mô tả ở trên.


Sau khi thêm tất cả hình ảnh vào thanh trượt của bạn, đã đến lúc tùy chỉnh giao diện và hoạt động của thanh trượt đó.

Trong menu bên trái, hãy nhấp để mở rộng phần 'Cài đặt băng chuyền'.


Để bắt đầu, bạn có thể chuyển đổi giữa chế độ sáng và tối cho các nút điều hướng của thanh trượt.

Để thử các chế độ khác nhau này, hãy nhấp vào các nút bên cạnh 'Chế độ màu điều hướng'. Bản xem trước trực tiếp sẽ tự động cập nhật để bạn có thể xem mình thích chế độ nào nhất.


Theo mặc định, băng chuyền hiển thị một trang chiếu và khách truy cập sẽ cần sử dụng các điều khiển điều hướng để xem thêm nội dung.

Tuy nhiên, bạn có thể muốn hiển thị nhiều trang chiếu cùng một lúc bằng cách mở menu thả xuống 'Slide to Show' và chọn một số từ danh sách. Điều này có thể hữu ích nếu thanh trượt có nhiều nội dung và bạn lo lắng rằng khách truy cập có thể không nhấp qua tất cả các trang chiếu.


Theo mặc định, khách truy cập sẽ cần nhấp để xem trang trình bày tiếp theo. Với ý nghĩ đó, bạn có thể muốn bật tự động phát, vì điều này thường làm tăng số lượng trang trình bày mà khách truy cập nhìn thấy.

Để thực hiện việc này, hãy nhấp để bật công tắc 'Tự động phát' và sau đó chỉ định thời gian mỗi trang chiếu sẽ ở trên màn hình trong bao lâu bằng cách nhập một số vào 'Tốc độ phát tự động'.


Nếu bạn đã thêm chú thích cho hình ảnh của mình thì hãy đảm bảo rằng bạn nhấp vào thanh trượt 'Hiển thị chú thích' để chuyển chú thích từ 'Không' thành 'Có'.

Bạn cũng có thể thay đổi căn chỉnh phụ đề.


Tùy thuộc vào màu nền, bạn có thể cần thay đổi màu chú thích trước khi chúng hiển thị với khách truy cập.

Để thực hiện việc này, hãy nhấp vào tab 'Nâng cao', sau đó sử dụng cài đặt 'Màu phụ đề'.


Bạn có thể tạo kiểu thêm cho văn bản bằng cách nhấp vào nút 'Chỉnh sửa' bên cạnh 'Kiểu chữ Chú thích'.

Thao tác này thêm một số cài đặt mà bạn có thể thay đổi kích thước phông chữ, chiều cao của dòng, khoảng cách, v.v.


Khi bạn hài lòng với hình thức của chú thích, bạn có thể thêm các bóng hộp khác nhau vào các trang chiếu bằng cách sử dụng menu thả xuống 'Kiểu hình ảnh thanh trượt'.

Những bóng đổ này thực sự có thể làm nổi bật các trang chiếu, vì vậy bạn nên thử các bóng đổ khác nhau để xem liệu chúng có phù hợp với thiết kế trang của bạn hay không.


Trong tab 'Nâng cao', bạn cũng sẽ tìm thấy các cài đặt cho phép bạn thêm đường viền, thay đổi khoảng cách và thậm chí tạo hoạt ảnh lối vào.

Hầu hết các cài đặt này đều dễ hiểu, vì vậy bạn nên xem qua chúng để xem bạn có thể tạo loại hiệu ứng khác nhau nào.


Khi hài lòng với giao diện của thanh trượt, bạn có thể tiếp tục làm việc trên phần còn lại của trang. Chỉ cần kéo các khối vào thiết kế của bạn và sau đó tùy chỉnh chúng bằng cách sử dụng cài đặt trong menu bên trái.

Nếu bạn muốn xóa một khối, chỉ cần di chuột qua khối đó rồi nhấp vào biểu tượng thùng rác khi nó xuất hiện.


Khi được hỏi, hãy tiếp tục và nhấp vào 'Có, xóa nó'.

Khi bạn hài lòng với giao diện của trang, đã đến lúc làm cho trang hoạt động bằng cách nhấp vào nút 'Lưu'. Cuối cùng, chọn 'Xuất bản' để thanh trượt của bạn hoạt động.


3. Phương pháp 3. Tạo thanh trượt bằng Smash Balloon (Tốt nhất cho các bài đăng và đánh giá trên mạng xã hội)

Chúng ta có nhiều khả năng thử những thứ mà chúng ta thấy người khác mua, sử dụng hoặc giới thiệu. Như đã nói, bạn nên hiển thị bằng chứng xã hội trên trang web của mình bao gồm đánh giá, lời chứng thực của khách hàng hoặc thậm chí là nhận xét tích cực mà bạn có trên mạng xã hội.

Cách dễ nhất để hiển thị bằng chứng xã hội trên trang web của bạn là sử dụng Smash Balloon. Smash Balloon có các plugin cho phép bạn nhúng nội dung từ Instagram, Facebook, Twitter và YouTube.

Nó cũng có plugin Nguồn cấp dữ liệu đánh giá mà bạn có thể sử dụng để hiển thị các đánh giá từ Facebook, Tripadvisor, Yelp và Google.


Tuy nhiên, hiển thị nhiều nhận xét và đánh giá tích cực trên cửa hàng hoặc trang web trực tuyến của bạn có thể chiếm nhiều dung lượng.

Đó là lý do tại sao Smash Balloon đi kèm với các mẫu và bố cục băng chuyền tích hợp sẵn mà bạn có thể sử dụng để tạo các thanh trượt đáp ứng. Điều này cho phép bạn tạo phương tiện truyền thông xã hội và xem lại trình chiếu chỉ bằng vài cú nhấp chuột.


Tuyệt vời hơn nữa, Smash Balloon sẽ tự động tải nội dung mới để thanh trượt luôn hiển thị các bài đăng mới nhất.

Một tùy chọn khác là hiển thị nội dung từ các tài khoản truyền thông xã hội của riêng bạn.


Nếu khách truy cập thích những gì họ thấy, họ có thể quyết định theo dõi bạn trên mạng xã hội.

Để giúp bạn có thêm nhiều người theo dõi, Smash Balloon đi kèm với các nút kêu gọi hành động được tạo sẵn mà bạn có thể thêm vào thanh trượt của mình.


Để biết hướng dẫn chi tiết từng bước, vui lòng xem hướng dẫn của chúng tôi về cách thêm nguồn cấp dữ liệu truyền thông xã hội vào WordPress và cách hiển thị các bài đánh giá của Google, Facebook và Yelp trong WordPress.

Chúng tôi hy vọng rằng bài viết này đã giúp bạn tìm hiểu cách dễ dàng tạo thanh trượt WordPress đáp ứng. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách chọn phần mềm thiết kế tốt nhất hoặc xem chuyên gia của chúng tôi chọn phần mềm trò chuyện trực tiếp tốt nhất cho các doanh nghiệp nhỏ.