Muốn tìm hiểu cách thêm hiệu ứng di chuột vào các mục trong tiện ích bài viếtElementor?
Nếu bạn là người dùng WordPress sử dụng Elementor để tạo ra của bạn Website, bạn nên làm quen với tính năng hiệu ứng di chuột. Bạn có thể tìm thấy tính năng này chủ yếu trong mỗi cài đặt tiện ích con Elementor.
Hiệu ứng di chuột có thể làm cho các yếu tố của bạn trở nên hấp dẫn, vì vậy đây là một cách hiệu quả để cải thiện trải nghiệm người dùng trên website.
Chà, nói về hiệu ứng di chuột, bài viết này sẽ chỉ cho bạn cách thêm hiệu ứng sau vào các thành phần bài đăng riêng lẻ trong widget Elementor Các bài đăng sử dụng CSS tùy chỉnh của Elementor, cụ thể là hiệu ứng di chuột phóng to.
Có hai lý do tại sao chúng tôi thực hiện hướng dẫn này cho bạn:
- Theo mặc định, bạn có thể thêm hiệu ứng di chuột vào bài đăng từ tiện ích bài đăng Elementor. Tuy nhiên, hiệu ứng di chuột sẽ rất cơ bản / tiêu chuẩn.
- Theo mặc định, Elementor cho phép bạn thêm hiệu ứng dây kéo vào tiện ích Bài viết (tab tiên tiến -> Máy biến áp -> tỉ lệ). Nhưng hiệu ứng di chuột sẽ tác động đến tất cả các phần tử widget bài đăng (không phải riêng lẻ).
Các bước để thêm hiệu ứng di chuột vào từng bài đăng từ tiện ích bài đăng của Elementor
Trước khi bắt đầu hướng dẫn, chúng tôi muốn cho bạn biết rằng hướng dẫn này sử dụng tính năng CSS tùy chỉnh của Elementor. Tính năng này chỉ có sẵn trên Elementor Pro; đảm bảo rằng bạn đã nâng cấp phiên bản của mình.
Bước 1: Thêm tiện ích bài viết
Chuyển đến trình chỉnh sửa Elementor của bạn và chúng tôi sẽ bắt đầu mọi thứ từ đầu, vì vậy hãy tạo một phần với một cột duy nhất.
Đọc cũng: Cách tích hợp MailChimp với Elementor
Tiếp theo, chọn tiện ích Bài đăng từ bảng tiện ích, sau đó kéo và thả nó vào vùng chỉnh sửa. Khi bạn đã thêm tiện ích Bài đăng, bạn có thể chỉnh sửa và tạo kiểu cho tiện ích theo sở thích của mình.
Remarque: Hãy đảm bảo rằng bạn đã xuất bản các bài viết trên website.
Bước 2: Thêm đoạn mã CSS
Sau khi bạn đã chỉnh sửa và tạo kiểu cho tiện ích Bài đăng, tiếp theo, chúng tôi sẽ thêm hiệu ứng di chuột trong một bài đăng riêng lẻ bằng cách thêm đoạn mã CSS đơn giản. Trong cài đặt tiện ích con Bài đăng, hãy chuyển đến Tab tiên tiến -> CSS tùy chỉnh. Vui lòng sao chép đoạn mã CSS bên dưới và sau đó dán vào trường CSS tùy chỉnh.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Đoạn mã trên sẽ chọn thành phần bài đăng riêng lẻ trên tiện ích Bài đăng bằng bộ chọn .élémentor-post và áp dụng biến đổi CSS.
Nếu bạn hài lòng với hiệu ứng di chuột đã được sử dụng, bạn có thể giữ nguyên như vậy và lưu dự án của mình nếu muốn. Tuy nhiên, nếu bạn muốn tùy chỉnh tốc độ chuyển đổi và giá trị tỷ lệ chuyển đổi, bạn có thể thay đổi giá trị trong đoạn mã CSS.
Remarque: Chuyển đổi / phóng to là một hiệu ứng phổ biến và được sử dụng phổ biến trên các trang web. Nếu bạn muốn biết thêm về các phương pháp chuyển đổi hiệu ứng di chuột khác, bạn có thể truy cập vào đây trang.
Khám phá thêm: tất cả các bộ chọn widget Elementor trong bài viết sau
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Bài viết này cho bạn biết việc thêm hiệu ứng di chuột vào các phần tử bài đăng riêng lẻ trong tiện ích bài đăng của Elementor bằng CSS tùy chỉnh dễ dàng như thế nào.
Kỹ thuật mà chúng tôi sử dụng cho hiệu ứng này là ( phóng to ) liên quan đến 2D và một số phần tử chuyển đổi giả. Tùy chỉnh và chơi với tất cả các kiểu hiệu ứng di chuột cho đến khi bạn tìm thấy hiệu ứng di chuột tốt nhất cho trang web của mình.
Đây là! Chúng tôi vừa giới thiệu cho bạn những công cụ tốt nhất để tiếp thị qua email cho Elementor. Nếu bạn có bất kỳ thắc mắc nào về cách sử dụng chúng, hãy cho chúng tôi biết trong ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
