[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: chủ đề WordPress dễ sử dụng nhất

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] TẢI XUỐNG [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí.

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 phần tử sang trạng thái di chuột để có hiệu ứng di chuột đối với tác vụ. Vì vậy, hôm nay chúng tôi sẽ hướng dẫn bạn cách triển khai những hình ảnh động này với 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ài đặt thiết kế có sẵn 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 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 trang tổng quan 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 ở phía 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 độ.

Làm nổi bật cài đặt divi

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.

Divi hover hoạt hình

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; }

Các thông số của trang divi

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.

Tóm tắt các thông số

Đ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 ngay cả khi kiểu 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".

Chuyển đổi thuộc tính Divi khi nhấp

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn tạo Dễ dàng và Miễn phí bất kỳ trang web hoặc thiết kế blog với một cái nhìn chuyên nghiệp. Ngừng trả nhiều tiền cho một trang web mà bạn có thể tự làm.

Sau đó, đ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 blog của bạn:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Thêm phần tích hợp divi

Đó 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.

Ảnh động

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ụ blurb đơn giản được sử dụng ở trên. Tiếp theo, chúng tôi sẽ thêm một số ngoại cảnh bổ sung đằng sau nó để mỗi khi bạn nhấp vào ngoại cảnh trên cùng, nó sẽ thoát ra để hiển thị nội dung làm nổi bật bổ sung ở phía sau đầu. 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.

Điều chế tóm tắt diviCập nhật nội dung của văn bản bố cục để chỉ bao gồm một tiêu đề (xóa nội dung thân mặc định) và thêm biểu tượng trình bày.

Tùy chỉnh mô-đun tóm tắt diviSau đó 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

Sửa đổi khoảng cách mô-đun divi

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.

Mô-đun tóm tắt divi trùng lặp

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:

Bạn có muốn bán sản phẩm của mình trên internet?

Tải xuống WooCommerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress và dễ dàng tạo cửa hàng trực tuyến của bạn. Hoàn hảo cho người mới bắt đầu.

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

Sửa đổi phông chữ và phông nền divi

Đị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%;

Chuyển đổi thuộc tính Divi khi nhấp

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

Tùy chỉnh mô-đun css divi

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%

Divi biến đổi

Biến đổi nguồn gốc: tâm trên cùng

Biến đổi sửa đổi divi

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)

Chuyển đổi thuộc tính Divi khi nhấp

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; }

Cài đặt trang DiviBạ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');
    }); 
});

Thêm phần tích hợp divi

Chúng ta hãy xem kết quả cuối cùng.

Mô-đun hoạt hình divi blurb

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.

2 cổ phiếu
cổ phiếu2
tweet
Enregistrer