Cách tạo hiệu ứng cuộn hình ảnh trong Elementor

Cần cách tạo hiệu ứng cuộn ảnh trong Elementor ? Trong bài viết này, chúng tôi sẽ hướng dẫn bạn tạo hiệu ứng cuộn hình ảnh bằng Elementor trên các trang web của bạn.

Hiệu ứng cuộn hình ảnh sẽ cho phép bạn hiển thị toàn bộ hình ảnh khi người dùng di chuột qua hình ảnh. Khi bạn truy cập một trang web bán các mẫu trang web, bạn có thể xem bản xem trước đầy đủ của các mẫu với các tính năng hiệu ứng cuộn hình ảnh.

Với các tính năng này, bạn có thể dễ dàng hiển thị cho người dùng của mình chế độ xem đầy đủ của trang web trong một không gian nhỏ. Thông thường nếu bạn muốn hiển thị đầy đủ hình ảnh của một trang web thì nó sẽ chiếm khá nhiều dung lượng trên các trang web của bạn. Hơn nữa, nó ảnh hưởng đến thiết kế trang web của bạn.

Nhưng với hiệu ứng cuộn ảnh, bạn có thể thêm nhiều ảnh hơn theo cách hấp dẫn và dễ dàng thu hút sự chú ý của người xem.

Tạo hiệu ứng cuộn ảnh trong Elementor

Elementor không cung cấp tiện ích để thêm hiệu ứng cuộn hình ảnh. Vì vậy, bạn cần thêm hiệu ứng bằng cách sử dụng CSS tùy chỉnh. Tính năng CSS tùy chỉnh chỉ khả dụng với Elementor chuyên nghiệp. Vì vậy, hãy chắc chắn rằng bạn đã nâng cấp lên Elementor Pro.

Bây giờ, hãy mở một trang bằng trình chỉnh sửa Elementor và nhấp vào biểu tượng dấu cộng để thêm một phần.

Bây giờ bạn cần chọn cột cho phần của mình. Ở đây chúng tôi chọn phần cột đơn.

Bây giờ hãy nhấp vào biểu tượng chỉnh sửa phần và trong tab bố cục, đặt chiều cao tối thiểu thành 500.

Bây giờ, từ tiện ích khối, hãy thêm khối phần bên trong vào phần đã tạo của bạn và xóa cột mặc định. Nhấp chuột phải vào biểu tượng chỉnh sửa cột và nhấp vào tùy chọn xóa để xóa cột chính.

Chuyển đến tùy chọn chỉnh sửa của phần bên trong một lần nữa và trong tab bố cục, đặt chiều cao tối thiểu thành 500 như chúng tôi đã trình bày trước đó.

Bây giờ hãy chuyển sang tab kiểu của phần bên trong và đặt nền là cổ điển từ tùy chọn nền. Tiếp theo, bạn cần thêm hình nền của mình. Từ tùy chọn vị trí hình ảnh, đặt vị trí của hình ảnh bằng cách Trung tâm hàng đầu. Từ tùy chọn lặp lại, đặt tùy chọn không lặp lại và kích thước như che.

Bây giờ chuyển sang tab tiên tiến để thêm CSS tùy chỉnh. Trong trường CSS tùy chỉnh, thêm đoạn mã sau:

bộ chọn{ -webkit-transition: dễ dàng ra vào 3 giây! quan trọng; quá trình chuyển đổi: dễ dàng vào ra 3 giây !quan trọng; } selector:hover{ vị trí nền: đáy ở giữa !quan trọng; }

Bạn có thể thay đổi giá trị chuyển đổi để thay đổi hiệu ứng cuộn của hình ảnh. Nếu muốn thêm nhiều ảnh có cùng hiệu ứng, bạn có thể nhân đôi cột rồi thay đổi ảnh nền.

Kết luận

Bằng cách làm theo quy trình, bạn sẽ có thể thêm hiệu ứng cuộn hình ảnh vào trang web của mình bằng trình tạo trang Elementor. Bạn có thể xem các bài viết khác của chúng tôi để tìm hiểu:

Chúng tôi hy vọng bài viết này sẽ hữu ích cho bạn. Nếu bạn thích bài viết này, vui lòng thích trang Facebook của chúng tôi để duy trì kết nối.