Bạn có muốn tạo hoạt ảnh di chuột bằng Elementor ?
Trong hướng dẫn này, chúng tôi sẽ sử dụng một lon pepsi mà chúng tôi sẽ bay qua và sẽ tiết lộ mô tả về nó.
Chúng tôi mời bạn xem video sau đây để có ý tưởng về những gì chúng tôi muốn cho bạn thấy.
Chèn một phần cột duy nhất rồi chọn trong thanh bên Chiều cao tối thiểu sur Hauteur
Sur chiều cao tối thiểu bấm vào VH sau đó kéo thanh trượt đến 100. Luôn ở trong tab Giao diện định nghĩa 650 như chiều rộng.
Chọn cột và trên thanh bên trên trường Căn chỉnh theo chiều dọc lựa chọn milieu.
Trong tab Phong cách, thay đổi màu nền bằng cách nhấp vào Bộ chọn màu và nhập # D37636 sau đó trong phần Biên giới, hãy lấy 20 cho tất cả các bán kính lề đường.
Trong tab tiên tiến, tắt liên kết đệm và nhập 75 cho lợi nhuận nội bộ Haut et Bas et 25 cho lợi nhuận nội bộ Gauche et Droite.
Sau đó, trong cột, hãy kéo một tiện ích con phần nội bộ. Hãy xóa một trong các cột khỏi phần Nội bộ.
Trong cột của phần bên trong còn lại, hãy thả Tiện ích tiêu đề và thay đổi tiêu đề thành Tình yêu Pepsi.
Cũng đọc hướng dẫn của chúng tôi về: Cách tạo thẻ hiệu ứng từ danh mục đầu tư trong Elementor
Sau đó, trong tab Phong cách, cung cấp cho văn bản một màu trắng và cho kiểu chữ, thiết lập kích thước sur 32, các chiều cao hàng sur 1.2, khoảng cách giữa các chữ cái sur 0.5.
Dưới Tiện ích tiêu đề, thả một Tiện ích trình soạn thảo văn bản và chỉnh sửa văn bản. Trong tab Phong cách, thay đổi màu văn bản thành màu trắng và kích thước kiểu chữ trên 16, các chiều cao hàng sur 1.5 vàkhoảng cách giữa các chữ cái sur 0.5.
Trong tab tiên tiến thay đổi lề Bas sur -10.
Trong phần định vị chuyển hướng tiên tiến, sửa đổi Chiều rộng sur Personnalisé và Chiều rộng tùy chỉnh đặt cái sau thành 310.
Bên dưới đoạn văn, chúng tôi sẽ thêm một tiện ích nút với cho Văn bản Đọc Thêm.
Trong tab Phong cách cung cấp cho nút màu sắc Trắng và màu văn bản đặt nó thành Đen.
Bây giờ hãy chọn cột của phần bên trong, trong phần tiên tiến chuyển hướng tiên tiến tắt liên kết và nhấp vào tỷ lệ phần trăm sau đó đặt lề Gauche sur 20 và trong Ký quỹ nội bộ xác định điều đó của Gauche sur 20.
Bây giờ hãy kéo tiện ích hình ảnh phía trên Phần nội bộ chèn một hình ảnh. Chúng tôi đã chọn ví dụ về hình ảnh một loại đồ uống có thể dễ dàng tìm thấy trên web.
Khi bạn đã chèn hình ảnh, hãy định cấu hình Kích thước ảnh sur Trọn và sự liên kết hãy nhấp vào Trung tâm.
Trong tab tiên tiến, đi đến phần Chức vụ sur Chiều rộng lựa chọn Trực tuyến (Tự động)Trên Chức vụ lựa chọn tuyệt đối và Định hướng ngang lựa chọn Ngay sau đó vào Bù lại vào -9.9 và trên Bù lại của Hướng dọc nhập -105.
Đi xa hơn xuống Chuyển đổi phần định nghĩa thay đổi kích thước sur 0.5.
Bây giờ hãy chọn cột của Phần nội bộ và trong tab tiên tiến nhập tên của lớp css văn bản pepsi.
Sau đó chọn phần chính của chúng tôi, chuyển đến phần Tùy chỉnh CSS trong số Tab của anh ấy Nâng cao, sao chép và dán mã sau:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
NHẬN XÉT: Nếu bạn không có phần này thì bạn cần phải đi tới Phiên bản Pro của Elementor.
Bây giờ nếu chúng ta muốn loại bỏ màu nền khỏi văn bản, chúng ta sẽ chọn cột chính của chúng ta và trong tab Kiểu sẽ hủy kích hoạt màu nền.
Lúc này, ảnh động của bạn sẽ chạy bình thường trên trình duyệt.
Hoạt ảnh trên máy tính bảng cũng có vẻ hoàn hảo
Nhưng trên điện thoại thông minh, nó không được hiển thị bình thường. Hãy giải quyết vấn đề này.
Hãy hiển thị trình duyệt
Trong trình duyệt, hãy chọn Phần (đảm bảo rằng bạn vẫn đang ở chế độ điện thoại thông minh) và giảm Chiều rộng sur 320
Sau đó chọn cột chính và trong tab của nó nâng cao, đặt tất cả các lề bên trong thành 25
Trong trình duyệt, hãy chọn hình ảnh và trong tab Phong cáchClick vào PX de Chiều rộng và đặt nó thành 180.
Trong tab tiên tiến du Tiện ích hình ảnh, tiếp tục Chức vụvà chọn tuyệt đốitrong bù ngang vào 75 và trong dịch chuyển dọc vào 236. Tóm lại, hãy đảm bảo căn giữa hình ảnh của bạn ở giữa vòng tròn bằng cách sử dụng các hiệu số khác nhau.
Giờ đây, bạn có thể xem trước hoạt ảnh của mình trên các thiết bị khác nhau.
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Vì thế ! Đó là vì bài viết này hướng dẫn bạn cách tạo hoạt ảnh khi di chuột trong Elementor. Nếu bạn có bất kỳ mối quan tâm nào về cách đến đó, chúng tôi rất muốn nghe ý kiến của bạn 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.
...
