Các tùy chọn chuyển đổi tích hợp của Divi đã được chứng minh là một công cụ thiết kế cực kỳ hữu ích, cho phép bạn thay đổi kích thước, xoay, nghiêng hoặc định vị bất kỳ phần tử nào trên trang một cách dễ dàng. Và bạn thậm chí có thể chọn chuyển các mục sang trạng thái di chuột để có hiệu ứng di chuột tuyệt vời. Vì vậy, hôm nay chúng tôi sẽ hướng dẫn bạn cách triển khai các hoạt ảnh này chỉ bằng một cú nhấp chuột.
Phương thức này yêu cầu sử dụng jQuery. Điều tuyệt vời về kỹ thuật này là bạn có thể sử dụng các thông số thiết kế tích hợp của Divi để tạo kiểu cho các thuộc tính biến đổi, sau đó bật (hoặc tắt) các thuộc tính biến đổi đó bằng một cú nhấp chuột. Điều này sẽ mở ra rất nhiều khả năng độc đáo để tiết lộ nội dung ẩn bằng cách di chuyển các mục khi nhấp chuột thay vì di chuột. Và nó cũng giúp giảm bớt nhu cầu biết nhiều về CSS.
Chúng ta hãy bắt đầu.
Những gì bạn cần để bắt đầu
Đối với hướng dẫn này, tất cả những gì bạn cần là Divi. Để bắt đầu, hãy truy cập bảng điều khiển WordPress của bạn. Tạo một trang mới, đặt tiêu đề cho trang của bạn và tiếp tục thiết kế trên trình tạo Divi ở nền trước. Chọn tùy chọn “Xây dựng từ đầu”. Bây giờ bạn đã sẵn sàng để đi!
Ý tưởng cơ bản được giải thích
Trước khi đi vào quá chi tiết trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách hoạt động của kỹ thuật này trong một vài từ.
Mỗi khi bạn tùy chỉnh một phần tử (phần, dòng hoặc mô-đun) trong Divi, bạn sẽ thêm CSS tùy chỉnh vào phần tử này trong nền. Ví dụ: bằng cách sử dụng cài đặt có sẵn của Divi, bạn có thể thêm thuộc tính xoay chuyển đổi vào mô-đun làm nổi bật để nó xoay mô-đun dọc theo trục Z 20 độ.
Nhưng đằng sau hậu trường, bạn tạo một CSS tùy chỉnh được thêm vào mô-đun văn bản này và trông như thế này:
.et_pb bản_0 {biến đổi: rotationZ (20deg); }
Đủ đơn giản. Và giả sử bạn muốn thêm tùy chọn chuyển đổi khi di chuột đó. Bạn chỉ cần áp dụng thuộc tính chuyển đổi cho trạng thái di chuột trong cài đặt của Divi Builder.
Và mã sẽ trông giống như thế này đằng sau hậu trường:
.et_pb bản_0: hover {Transform: rotationZ (20deg); }
Tuy nhiên, nếu bạn muốn triển khai thuộc tính chuyển đổi khi nhấp chuột, mọi thứ sẽ phải hoạt động hơi khác một chút. Bạn sẽ cần nhập một số mã javascript để kích hoạt sự kiện nhấp chuột vào phần tử (hoặc mô-đun văn bản).
Với ví dụ hiện tại của chúng tôi, mục tiêu chính của chúng tôi về cơ bản là bật và tắt thuộc tính biến đổi "biến đổi: xoay Z (20deg)" khi nhấp chuột. Một cách dễ dàng để làm điều này là tạo một lớp CSS tùy chỉnh với thuộc tính "biến áp: không có!" Quan trọng ”trong cài đặt trang (hoặc bảng kiểu bên ngoài). Nó sẽ trông giống như thế này.
.toggle-Transform-animation {Transform: none! quan trọng; }
Với CSS đó tại chỗ. Chúng ta có thể thêm lớp CSS "toggle-biến-hoạt hình" vào phần tử mô-đun blurb có thuộc tính chuyển đổi của chúng ta.
Điều này sẽ vô hiệu hóa (ghi đè) thuộc tính biến đổi và ngăn nó kích hoạt ban đầu mặc dù kiểu của thuộc tính biến đổi đã được thêm vào nó.
Bây giờ tất cả những gì bạn phải làm là kích hoạt (thêm và xóa) lớp CSS tùy chỉnh này khi bạn nhấp vào phần tử. Vì vậy, mỗi khi chúng ta nhấp vào phần tử, lớp sẽ bị xóa và các thuộc tính chuyển đổi (những thuộc tính bạn đã thêm bằng Divi) sẽ được triển khai.
Đây là một ví dụ đơn giản về cách thực hiện điều này. Đầu tiên, hãy thêm một lớp CSS khác vào mô-đun blurb có tên là "biến đổi mục tiêu".
Tiếp theo, đi tới Divi > Tùy chọn chủ đề > Tích hợp và thêm tập lệnh jQuery sau vào đầu blog của bạn:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Đó là tất cả ! Bây giờ, mỗi khi bạn nhấp vào mô-đun bản trình bày, thuộc tính chuyển đổi mà bạn đã thêm vào bản trình bày trong Divi sẽ được kích hoạt hoặc hủy kích hoạt.
Bây giờ chúng ta hãy xây dựng một ví dụ để bạn có thể thấy cách này có thể hữu ích cho các dự án của riêng bạn.
Cách chuyển đổi thuộc tính chuyển đổi trên Bấm để hiển thị nội dung trong Divi
Đối với ví dụ này, chúng tôi sẽ sử dụng một ví dụ giới thiệu đơn giản được sử dụng ở trên. Tiếp theo, chúng tôi sẽ thêm phần giới thiệu bổ sung đằng sau phần này để bất cứ khi nào bạn nhấp vào phần giới thiệu trên cùng, nó sẽ di chuyển ra ngoài để hiển thị phần giới thiệu nội dung lời giới thiệu bổ sung nằm phía sau tài liệu.
Tạo mô-đun Blurb trước và sau
Sau đó thêm một mô-đun trình bày vào cột 1.
Cập nhật nội dung văn bản trình bày để chỉ bao gồm tiêu đề (xóa nội dung nội dung mặc định), sau đó thêm biểu tượng trình bày.
Sau đó cập nhật các thông số thiết kế như sau:
Màu nền: #4c5866
Màu biểu tượng: #ffffff
Định hướng của văn bản: trung tâm
Màu văn bản
: Margin tùy chỉnh nhẹ: 0px ở phía dưới
Đệm tùy chỉnh: 15% ở trên cùng, 15% ở phía dưới, 10% ở bên trái, 10% ở bên phải
Chúng tôi sẽ quay lại mô-đun này sau, nhưng bây giờ, chúng tôi cần tạo mô-đun Blurb thứ hai của chúng tôi, sẽ hoạt động như một mô-đun "trở lại" với nội dung bổ sung.
Để làm điều này, sao chép mô-đun trình bày bạn vừa tạo.
Sau đó, trên mô-đun thứ hai, hãy xóa biểu tượng bản trình bày (và hình ảnh mặc định) và thêm nội dung cơ thể trở lại mô-đun. Sau đó cập nhật các thông số thiết kế như sau:
Màu nền: rgba (76,88,102,0.3)
Màu văn bản: Đen
Đệm tùy chỉnh: 20% hàng đầu
Định vị mô-đun trước Tóm tắt
Bây giờ hai ô mờ của chúng ta đã được tạo kiểu, chúng ta cần quay lại vùng nền phía trước (trên cùng) và đặt nó ở phía trên vùng nền phía sau (phía dưới). Để làm điều này, chúng tôi sẽ cung cấp cho nó một vị trí tuyệt đối với chiều cao là 100% và chiều rộng là 100%.
Đầu tiên, mở cài đặt mô-đun trình bày trên / trước và cập nhật các thông tin sau:
chiều cao: 100%;
chiều rộng: 100%;
Sau đó, thêm mã CSS tùy chỉnh sau vào phần tử chính:
vị trí: tuyệt đối! quan trọng; chuyển tiếp: tất cả .5;
Sau đó cập nhật chỉ số z như sau:
Chỉ số Z: 2000
Vị trí tuyệt đối, kết hợp với 100% chiều cao và chiều rộng và chỉ số z, đảm bảo rằng mô-đun blurb vẫn ở trên đầu mô-đun blurb đằng sau nó. Thuộc tính chuyển đổi trên thực tế là khoảng thời gian của quá trình chuyển đổi các tùy chọn chuyển đổi mà chúng ta sẽ triển khai trong lần nhấp tiếp theo. Và "con trỏ: con trỏ" là thay đổi con trỏ để phần tử xuất hiện có thể nhấp được đối với người dùng.
Thêm tùy chọn chuyển đổi và các lớp tùy chỉnh vào phía trước
Bây giờ là lúc để thêm các thuộc tính biến đổi của chúng ta vào vùng trước. Sau đó, chúng tôi sẽ thêm các lớp CSS tùy chỉnh cần thiết cho jQuery của chúng tôi để chuyển đổi các thuộc tính này khi nhấp chuột.
Trong các tham số thiết kế blurb phía trước, thêm các thuộc tính chuyển đổi sau:
Thang đo chuyển đổi X và y: 20%
Biến đổi nguồn gốc: tâm trên cùng
Hãy nhớ rằng thiết kế chuyển đổi mà bạn thấy tại thời điểm này sẽ là thiết kế được kích hoạt khi nhấp chuột. Chúng tôi chỉ cần tận dụng lợi thế của trình xây dựng Divi để có được thiết kế mong muốn. Trong trường hợp này, khung nền phía trước sẽ co lại và trở nên chính giữa ở đầu nó giống như một biểu tượng có thể nhấp được.
Khi bạn đã hoàn tất, hãy thêm hai lớp CSS cần thiết để nhắm mục tiêu vào phần trước với jQuery như sau:
Lớp CSS: toggle-Transform-animation Transform_target
(hãy chắc chắn tách từng tên lớp bằng một khoảng trắng)
Sau đó thêm đoạn mã CSS tùy chỉnh sau đây sẽ được sử dụng để bật và tắt các thuộc tính chuyển đổi với jQuery.
.toggle-biến-hoạt hình {biến đổi: không có! quan trọng; }
Bạn sẽ nhận thấy rằng các thuộc tính chuyển đổi blurb được thêm trước đó đã bị vô hiệu hóa vì lớp này đã được áp dụng cho nó.
Bây giờ, hãy đi tới Divi> Tùy chọn chủ đề> Tích hợp và thêm tập lệnh jQuery sau vào phần đầu của blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Chúng ta hãy xem kết quả cuối cùng.
Bạn có thể sử dụng ví dụ này để tạo ra những thiết kế ấn tượng hơn nữa. Đừng ngần ngại chia sẻ ý kiến của bạn trong phần bình luận.
