Bạn có muốn thay đổi kiểu của một số phần tử Divi khi di chuột hoặc sau khi nhấp chuột?
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thay đổi kiểu của nhiều phần tử khi di chuột hoặc nhấp vào Divi.
Đầu tiên, chúng ta sẽ tận dụng các tùy chọn thiết kế có sẵn của Divi để thiết kế bố cục phần.
Tiếp theo, chúng tôi sẽ trình bày một đoạn mã jQuery đơn giản mà bạn có thể sử dụng kết hợp với CSS tùy chỉnh để điều chỉnh kiểu của bất kỳ phần tử nào trong phần này khi bạn di chuột qua hoặc nhấp vào một nút.
Điều này nghe có vẻ phức tạp (đặc biệt là đối với người mới bắt đầu), nhưng bạn có thể ngạc nhiên về mức độ đơn giản của nó.
Hãy bắt đầu!
khảo sát
Dưới đây là một cái nhìn nhanh về thiết kế mà chúng tôi sẽ thực hiện trong hướng dẫn này.
Thay đổi các yếu tố khi di chuột qua nút
Sửa đổi các yếu tố sau khi nhấp vào nút
Hãy bắt đầu bằng cách tạo một trang với Divi Builder
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Phần 1: Thiết kế bố cục mặt cắt
Để bắt đầu, hãy tạo một hàng mới có hai cột.
Cài đặt phần
Trước khi thêm mô-đun, hãy mở cài đặt phần và cập nhật những điều sau:
- Nền: #ffffff
Hãy thêm dấu phân tách phần
- Dải phân cách (Trên cùng)
- Phong cách: xem ảnh chụp màn hình
- Màu: #ffffff
- Chiều cao: 5vw
- Dải phân cách (Dưới cùng)
- Phong cách: xem chụp
- Màu: #ffffff
- Chiều cao: 5vw
- Đệm (Trên và Dưới): 6vw
Hình ảnh (Trước khi di chuột)
Trong cột bên trái của hàng hai cột, hãy thêm một mô-đun hình ảnh mới.
Tiếp theo, tải lên hình ảnh bạn muốn làm nổi bật.
Dưới tab Thiết kế, cập nhật căn chỉnh và bật tùy chọn Cường độ toàn bộ băng thông.
- Căn chỉnh hình ảnh: căn giữa
- Cường độ toàn bộ băng thông: CÓ
Hình ảnh (Khi di chuột hoặc sau khi nhấp chuột)
Tiếp theo, chúng tôi sẽ tạo một hình ảnh khác mà chúng tôi sẽ hiển thị khi chúng tôi di chuột / nhấp vào một nút.
Để tạo hình ảnh, hãy nhân đôi mô-đun hình ảnh trước đó.
Sau đó tải lên một hình ảnh mới. Hình ảnh phải có cùng kích thước với hình ảnh khác vì nó sẽ thay thế hình ảnh khác khi di chuột / nhấp chuột.
Đối với hình ảnh này, chúng tôi sẽ cung cấp cho nó một vị trí tuyệt đối. Điều này sẽ làm cho hình ảnh nằm ngay trên hình ảnh khác mà không chiếm bất kỳ không gian thực nào trên trang.
- Chức vụ: Tuyệt đối
Dưới tab Thiết kế, thay đổi độ mờ trong các tùy chọn bộ lọc để hình ảnh hoàn toàn không nhìn thấy.
- Độ mờ: 0%
Thêm mô-đun Văn bản
Trong cột bên phải, hãy thêm một mô-đun Văn bản mới.
Sau đó dán đoạn mã HTML sau vào ô nội dung từ cơ thể:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Lưu ý rằng một số từ trong văn bản được bao quanh bởi các thẻ nhịp cầu. Đây là cách chúng tôi có thể nhắm mục tiêu và tùy chỉnh những từ này sau này bằng CSS tùy chỉnh.
Dưới tab Thiết kế, cập nhật các tùy chọn kiểu H3 như sau:
- Tiêu đề 3:
- Phông chữ: Montserrat
- Trọng lượng phông chữ Trọng lượng phông chữ: Cực đậm
- Phong cách: TT
- Kích cỡ văn bản: 60 px (máy tính và máy tính bảng), 40 px (điện thoại)
- Khoảng cách chữ: 0,06em
- Chiều cao dòng: 2 em
Trong phần tiếp theo, chúng tôi sẽ thêm nút mà chúng tôi sẽ sử dụng để bắt đầu thay đổi kiểu.
Tạo một phần cho nút
Trước tiên, chúng ta cần tạo một phần thông thường mới trong phần hiện tại.
Sau đó, thêm một hàng vào một cột vào phần.
Thêm một nút
Trong cột, hãy thêm một mô-đun mới nút.
Thay đổi văn bản của nút thành "Tiếp tục ...".
Chuyển tab mới Thiết kế và cập nhật thiết kế nút như sau:
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Kích thước văn bản: 16px
- Màu văn bản: #ffffff
- Nền nút (Máy tính để bàn): # 4b4baf
- Nút Backround (Di chuột): # 67ddc1
- Chiều rộng đường viền: 0 pixel
Đọc cũng: Divi: Cách thêm biểu tượng bánh hamburger vào mô-đun Menu
- Khoảng cách chữ cái nút: 4px
- Phông chữ: Montserrat
- Độ đậm phông chữ: Bán đậm
- Kiểu phông chữ nút: TT
- Lề (Dưới cùng): 0px
- Đệm (Trên và Dưới): 1.5em
- Đệm (Trái và Phải): 4em
Phần 2: Thêm lớp CSS vào phần tử
Bây giờ thiết kế của chúng tôi đã sẵn sàng, chúng tôi sẽ thực hiện thay đổi phần còn lại của thiết kế bằng cách sử dụng mã tùy chỉnh (CSS và JQuery).
Nhưng trước khi bắt đầu thêm mã tùy chỉnh của mình, chúng ta cần thêm các lớp CSS vào tất cả các phần tử mà chúng ta muốn thay đổi khi chúng ta di chuột / nhấp vào nút.
Thêm một lớp CSS vào phần
Để thêm một lớp CSS vào phần, hãy mở cài đặt phần và nhấp vào tab Nâng cao. Sau đó nhập lớp CSS sau:
- Lớp CSS: et-change-style_section
Thêm một lớp CSS vào các mô-đun Hình ảnh
Tiếp theo, mở cài đặt cho hình ảnh đầu tiên ở cột bên trái và thêm lớp CSS sau:
- Lớp CSS: et-before-image
Đây sẽ là hình ảnh sẽ được hiển thị "trước" khi di chuột / nhấp vào nút.
Sử dụng phương thức lớp, mở cài đặt cho hình ảnh thứ hai (hình ảnh bị ẩn với bộ lọc độ mờ) và thêm lớp CSS sau:
- Lớp CSS: et-after-image
Đây sẽ là hình ảnh sẽ được hiển thị “sau khi” di chuột / nhấp vào nút.
Thêm một lớp CSS vào mô-đun Văn bản
Tiếp theo, thêm lớp CSS sau vào mô-đun văn bản trong cột bên phải:
- Lớp CSS: et-style-text
Thêm một lớp CSS vào mô-đun Nút
Cuối cùng, thêm một lớp CSS tùy chỉnh vào nút ở phần dưới cùng như sau:
- Lớp CSS: et-toggle-button
Chúng tôi cần lớp này để nhắm mục tiêu nút cho chức năng di chuột / nhấp chuột trong mã sau này.
Phần 3: Thêm mã tùy chỉnh để thay đổi kiểu khi di chuột hoặc nhấp
Bây giờ tất cả các lớp CSS của chúng tôi đã có sẵn, chúng tôi có thể thêm mã cần thiết để thay đổi kiểu của tất cả các phần tử này khi bạn di chuột / nhấp vào nút.
Thêm mô-đun mã
Để thêm mã, hãy thêm mô-đun Mã bên dưới nút ở phần dưới cùng.
Dán mã jQuery
Sau đó, dán đoạn JQuery sau. Đảm bảo bọc mã trong các thẻ tập lệnh khi chúng tôi thêm mã vào tài liệu HTML (không phải tệp JS).
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Thay đổi kiểu của các phần tử bằng CSS tùy chỉnh
Mở mô-đun Mã và dán CSS tùy chỉnh sau lên trên tập lệnh JQuery, đảm bảo bọc nó trong các thẻ kiểu cần thiết.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Sau đó, dán CSS bổ sung sau vào các thẻ kiểu.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Sau đó, dán phần còn lại của CSS vào bên trong các thẻ kiểu:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}Các đoạn mã CSS này sử dụng cùng một khái niệm để thay đổi kiểu của phần tử khi phần (hoặc nút) có lớp mới.
Kết quả cuối cùng (tổng quan)
Sau khi mã được thêm, hãy lưu các thay đổi và mở trang để xem kết quả. Lưu ý các mục chúng tôi nhắm mục tiêu thay đổi như thế nào khi bạn di chuột qua nút.
Thay đổi kiểu khi nhấp chuột
Để thêm chức năng nhấp chuột, hãy thay thế JQuery hiện tại bằng JQuery sau (một lần nữa, hãy đảm bảo rằng nó được bao bọc trong các thẻ script):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Đây là kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Có thể nhắm mục tiêu và tạo kiểu cho nhiều phần tử trên một trang khi bạn di chuột qua hoặc nhấp vào thứ gì đó là một kỹ năng hữu ích trong thiết kế web.
Bạn có thể sử dụng kỹ thuật này cho nhiều trường hợp sử dụng khác nhau (trước và sau, CTA, v.v.)
Tất nhiên, biết một chút CSS và JS / JQuery sẽ rất hữu ích. Tuy nhiên, như bạn đã thấy trong hướng dẫn này, bạn không cần kiến thức sâu về mã hóa để có được kết quả đáng kinh ngạc!
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo 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.
...
