Bạn cần thêm hiệu ứng di chuột trong Elementor thông qua CSS tùy chỉnh?
Elementor có một tính năng tích hợp để thêm hiệu ứng di chuột vào một phần tử (Chúng tôi đã đề cập đến vấn đề này trong một trong các bài viết của mình. Mặc dù tính năng này đủ hữu ích nhưng nó có một nhược điểm. Bạn chỉ có thể thêm hiệu ứng di chuột vào một phần, một cột, tiện ích Hình ảnh, tiện ích Nút và tiện ích Bài đăng.
Đọc cũng: Cách cài đặt Elementor trên WordPress
Tính năng hiệu ứng di chuột tích hợp của Elementor không cho phép bạn thêm hiệu ứng di chuột vào các widget khác như tiện ích Trình soạn thảo văn bản, tiện ích Tiêu đề,… Một nhược điểm khác là bạn chỉ có thể thêm hiệu ứng di chuột rất cơ bản.
Có tùy chọn nào khác để thêm hiệu ứng di chuột trong Elementor không?
Có, có. Bạn có thể thêm hiệu ứng di chuột trong Elementor thông qua CSS tùy chỉnh. Nhưng để thêm CSS tùy chỉnh, bạn cần sử dụng Elementor Pro vì CSS tùy chỉnh chỉ có trên Elementor Pro.
Thêm hiệu ứng di chuột trong Elementor thông qua CSS tùy chỉnh
Trước khi bắt đầu, chúng ta hãy xem ví dụ về hiệu ứng di chuột được tạo thông qua CSS tùy chỉnh.
Không giống như hiệu ứng di chuột có sẵn của Elementor, bạn có thể sử dụng phương pháp này để thêm hiệu ứng điểm vào bất kỳ phần tử nào trong Elementor. Cho dù đó là một phần, một cột hay một widget (tất cả các widget).
Trong ví dụ này, chúng tôi sẽ chỉ cho bạn cách thêm hiệu ứng điểm vào một cột.
Đầu tiên, nhấp vào tay cầm cột để chuyển sang bảng cài đặt cột. Khi đó, hãy chuyển đến tab tiên tiến và mở khối Tuỳ chỉnh CSS và dán mã CSS sau đây.
selector: hover {chuyển tiếp: all-in-out dễ dàng .2s; biến đổi: scale (1.1); con trỏ: trỏ; z-index: 1; }
Voilà
Trên đoạn mã trên, chúng tôi đang sử dụng thuộc tính CSS biến đổi () để thêm hiệu ứng di chuột. Loại chuyển đổi mà chúng tôi đang sử dụng trong ví dụ này là tỷ lệ, với thời gian là 1,1 giây.
Có 4 kiểu biến đổi khác mà bạn có thể sử dụng:transform
- Matrix
- Dịch
- Quay
- Nghiêng
Nếu bạn muốn sử dụng một kiểu biến đổi khác, bạn chỉ có thể thay thế giá trị của biến đổi trên mã CSS ở trên.
Bạn có thể đọc trang cette để tìm hiểu thêm về chuyển đổi CSS.
Bạn có thể làm theo cùng một lộ trình để thêm hiệu ứng di chuột cho các phần tử khác.
Để thêm hiệu ứng trỏ vào một phần, bạn có thể nhấp vào tay cầm phần và chuyển đến tab tiên tiến và mở khối CSS tùy chỉnh.
Để thêm hiệu ứng di chuột vào một tiện ích, bạn có thể nhấp vào tay cầm của tiện ích đó và chuyển đến tab một lần nữa. Nâng cao, sau đó mở khối CSS tùy chỉnh.
Các plugin WordPress cao cấp bổ sung khác
Cũng khám phá khác plugin WordPress cao cấp giúp tối ưu hóa hiệu suất của trang web hoặc blog WordPress của bạn.
1. Popup bán hàng trực tiếp
Cửa sổ bật lên bán hàng trực tiếp là một Plugin WordPress thông báo với một số tiện ích mà bạn có thể biến thành lợi thế. Trước hết, anh ta có khả năng hiển thị một cửa sổ bật lên khi ai đó hoàn thành đơn đặt hàng. 
Thứ hai, cửa sổ bật lên bán hàng thời gian thực cũng có thể hiển thị thông báo khi một người chỉ cần thêm một mặt hàng vào giỏ hàng. Và thứ ba, bạn có thể sử dụng công cụ này để tăng cường quảng cáo cho sản phẩm bằng cách hiển thị số lượng khách đã xem bài viết.
Với xu hướng web mới nhất, bạn có thể mong đợi Cửa sổ bật lên bán hàng trực tiếp hiển thị đẹp mắt trên tất cả các thiết bị và trình duyệt. Về bố cục cửa sổ bật lên, bạn có thể tùy chỉnh nó đến từng chi tiết nhỏ nhất.
Để đọc: Làm thế nào để sửa chữa một báo động an ninh trên blog WordPress của bạn
Các tính năng khác của Cửa sổ bật lên bán hàng trực tiếp là hơn ba mươi hình ảnh động, âm thanh, đếm ngược và định vị được cá nhân hóa. Nó cũng hoạt động với các thông báo giả mạo và cho phép bạn đặt nó chỉ cho các trang cụ thể mà bạn muốn thông báo thực hiện nhiệm vụ của nó.
Tải về | Bản demo | Web hosting
2. Foodify
Foodify là cách nhanh nhất và dễ nhất để khách hàng gọi món từ cửa hàng. Nó là hoàn toàn đáp ứng và bao gồm các tính năng bổ sung như hình ảnh, tùy chọn tìm kiếm, thông tin sản phẩm. 
Nó cũng thêm các nút vào giỏ để cải thiện trải nghiệm người dùng. Phần mở rộng WooCommerce này là một giải pháp đặt hàng nhanh chóng, toàn diện có thể được thêm vào bất kỳ trang web WooCommerce nào.
Ở đây cho bạn Các plugin 5 WordPress để tối ưu hóa các mô tả và nhãn danh mục
Nó có ưu điểm là rất linh hoạt và tương thích với nhiều plugin hiện có trong thư mục WordPress.
Tải về | Bản demo | Web hosting
3. Mega Zoom & Pan Image Viewer
Plugin Mega Zoom & Pan Image Viewer là một trình duyệt và trình duyệt hình ảnh tuyệt vời với bố cục đáp ứng đầy đủ để hiển thị hình ảnh lớn trên blog WordPress.
Đây là một công cụ mạnh mẽ được thiết kế để trình bày sản phẩm (hình ảnh sản phẩm có độ phân giải cao. Ví dụ: Quần áo, ô tô, sơ đồ kỹ thuật, v.v.), hiển thị bản đồ và tất cả các hình ảnh khác, nhờ khả năng thu phóng, chức năng của nó toàn cảnh, điều khiển điều hướng của nó, thanh cuộn của nóvà các điểm đánh dấu / điểm truy cập có thể tùy chỉnh cao.
Dưới đây là 5 ứng dụng điện thoại thông minh để bảo vệ hình ảnh và video của bạn
Plugin này hoạt động tốt trên iOS (iPad, iPhone), Android và Windows mobile, v.v. Nó cũng hoạt động trên tất cả các trình duyệt hiện đại và các trình duyệt cũ hơn như IE7 hoặc IE8.
Các tài nguyên được đề xuất khác
Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.
- Cách xóa tất cả các bình luận đang chờ xử lý trong WordPress
- Khi nào và làm thế nào để cài đặt WordPress trong một thư mục con
- 5 plugin WordPress để thêm niềm vui Giáng sinh vào trang web của bạn
- 10 WordPress plugin để cải thiện hình ảnh của trang web của bạn
Kết luận
Đây là ! Đó là nó cho hướng dẫn này. Chúng tôi hy vọng bài viết này đã giúp bạn thêm hiệu ứng di chuột trong Elementor thông qua CSS tùy chỉnh. Bạn cũng có thể đọc bài viết của chúng tôi về Cách sửa lỗi chặn hiển thị JavaScript và CSS trong WordPress.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, 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.
Nếu bạn có bạn bè hoặc một ý kiến, xin vui lòng để lại nó trong phần chú thích. Hầu hết chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
