Cách tạo băng chuyền hình ảnh dọc trên WordPress bằng Elementor

Muneeb Hướng dẫn WordPress Jan 21, 2022

Bản trình chiếu ảnh hoặc thông tin mà người xem có thể chọn bằng cách nhấn nút để di chuyển chúng về phía trước hoặc phía sau trong trình chiếu được gọi là băng chuyền hình ảnh. Nó làm tươi sáng giao diện chung của trang web của bạn và hỗ trợ quảng cáo các dịch vụ thiết yếu.

Những bức ảnh hấp dẫn có thể lôi kéo những khách truy cập mới vào trang web của bạn bằng cách thu hút sự chú ý của họ ngay lập tức. Hướng dẫn này sẽ chỉ cho bạn cách sử dụng Elementor để tạo băng chuyền ảnh dọc trên WordPress.

Cách tạo băng chuyền hình ảnh dọc thành phần

Trước tiên, hãy tạo một hình ảnh phù hợp cho Băng chuyền trơn thẳng đứng Elementor của bạn. Bạn sẽ cần một hình ảnh đã chứa tất cả các bức ảnh của bạn. Sử dụng Crello , một chương trình giống Canva, bạn có thể tạo một chương trình, nhưng bất kỳ phần mềm chỉnh sửa hình ảnh nào cũng phải đủ.

Tất nhiên, điều này có nhược điểm là không năng động và có thể bất tiện khi chỉ cần thay đổi một vài bức ảnh. Tuy nhiên, nó cung cấp một số lợi ích. Nó tạo ra một băng chuyền chỉ CSS mà không có yêu cầu JS. Hình ảnh động rất mượt mà với rất ít CPU. Tóm lại, nó hiệu quả vô cùng, mặc dù hơi bất tiện.

Tạo trang web tuyệt vời

Với trình tạo trang miễn phí tốt nhất Elementor

Bắt đầu bây giờ

Sau đó, cung cấp cho cột của bạn cột tên dọc dưới dạng một lớp.
Đặt Không gian tiện ích cho cột đó thành 0 trong cài đặt CộtBố cục .

Add an image element to that column and choose the picture you made. Thêm phần tử hình ảnh vào cột đó và chọn hình ảnh bạn đã tạo. Assign the class carousel vertical to the picture element . Gán chiều dọc băng chuyền lớp cho phần tử hình ảnh .

Tạo mọi thứ chính xác như bạn muốn, sau đó sao chép nó. Trong cột đó, bạn sẽ cần hai trong số chúng, mỗi cái có các thông số giống hệt nhau. Và sau đó, bạn có thể chuyển sang sử dụng mã CSS được cung cấp bên dưới. Bạn có thể sử dụng mã này ở bất kỳ đâu để thực hiện các thay đổi.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Có bình luận đáng kể với mã để cho phép bạn hiểu đủ và thực hiện các thay đổi ở bất cứ đâu bạn cần. Sử dụng mã này, bạn có thể tạo thành công băng chuyền dọc Elementor .

5 Plugin băng chuyền hình ảnh tốt nhất

1. Đăng Carousel cho Elementor

Post Carousel For Elementor của iThemelandCo là một plugin addon Elementor cho phép bạn tạo Băng chuyền phương tiện sáng tạo đáng kinh ngạc với bố cục băng chuyền được tạo sẵn. Plugin tích hợp hoàn hảo với Elementor và cung cấp 19 bố cục được tạo sẵn. Các bố cục này hoàn toàn có thể tùy chỉnh và có thể dễ dàng tùy chỉnh theo nhu cầu của bạn bằng cách sử dụng cơ chế kéo và thả của Elementor.

Băng chuyền sản phẩm cho Elementor

Product Carousel For Elementor là một plugin addon Elementor khác được thiết kế rõ ràng cho các cửa hàng Thương mại điện tử để giới thiệu sản phẩm của họ trong một băng chuyền. Plugin cung cấp các điều khiển băng chuyền 12 \ 002B như Tự động phát, Trượt để cuộn, Tạm dừng khi di chuột, v.v. Plugin này có khả năng phản hồi cao trên tất cả các loại thiết bị và bạn có thể tạo nhiều băng chuyền tùy thích. Hơn nữa, nó là một plugin đa ngôn ngữ 100% có nghĩa là nó sẽ hoạt động ngay cả khi trang web của bạn được dịch sang ngôn ngữ khác.

3. Băng chuyền nhanh cho Elementor

Fast Carousel For Elementor là một Plugin addon Elementor được tuyên bố là đủ nhanh để tạo băng chuyền cho bạn trong một phút. Âm thanh ấn tượng như vậy, nó cũng cung cấp các loại phòng trưng bày khác nhau cũng như hơn mười phong cách độc đáo. Plugin được trang bị hơn năm điều khiển băng chuyền bên cạnh việc cung cấp các tùy chọn màu tùy chỉnh với từng băng chuyền. Đối với một giải pháp nhanh chóng, đây có thể là đặt cược tốt nhất của bạn cho một băng chuyền hình ảnh.

Chúng tôi hy vọng bạn thấy hướng dẫn này hữu ích trong việc nâng cao trang web của bạn. Đảm bảo tham gia với chúng tôi trên Facebook  và Twitter của chúng tôi để tiếp tục nhận các hướng dẫn giúp hành trình WordPress của bạn trở nên thú vị và dễ dàng.

Divi WordPress Theme