Muốn biết cách đặt mô-đun Blurb từ Divi được đánh dấu trong khi làm mờ những người khác?
Dù là loại nào Website bạn đang xây dựng, rất có thể tại một thời điểm nào đó, bạn sẽ muốn xem danh sách các dịch vụ, giai đoạn khác nhau và hơn thế nữa.
Một trong những cách dễ nhất để tiếp cận việc tạo danh sách như vậy theo cách hấp dẫn là sử dụng mô-đun Blurb từ Divi. Các mô-đun trình bày cho phép bạn cấu trúc đẹp mắt nội dung từ danh sách đồng thời mang đến cho bạn khả năng thiết kế vô tận.
Trong hướng dẫn này, chúng tôi sẽ tiến thêm một bước và chỉ cho bạn cách làm nổi bật mô-đun Blurb khi di chuột và làm mờ các mô-đun khác mà bạn đã hiển thị. Đó là một cách tuyệt vời để nhấn mạnh một mô-đun Blurb tại một thời điểm, mà không để các mô-đun Blurb khác làm người đọc phân tâm.
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.
Máy tính desktop
Phiên bản điện thoại
Hãy bắt đầu thiết kế với Divi
Thêm một phần mới
Màu nền
Bắt đầu bằng cách thêm một phần thông thường vào trang mới hoặc trang bạn đang làm việc.
Bạn cũng có thể tham khảo: Divi: Cách tạo phần thành viên trong nhóm dưới dạng băng chuyền
Mở cài đặt phần và thay đổi màu nền.
- Nền: #eaeaea
Khoảng cách
Đồng thời thêm các giá trị khoảng cách.
- Lề (Trên, Dưới, Trái và Phải): 2vw
- Đệm (Trên và Dưới): 0px
Biên giới
Hoàn thành các thông số mặt cắt bằng cách thêm bán kính đường viền.
- Góc tròn: 20px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:
Sizing
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng và thay đổi cài đặt định cỡ.
- Cân bằng độ cao của cột: CÓ
- Chiều rộng: 90%
- Chiều rộng tối đa: 1px
- Chiều cao tối thiểu: 500px (Máy tính để bàn), tự động (Máy tính bảng và Điện thoại)
CSS tùy chỉnh (Yếu tố chính)
Căn chỉnh nội dung của cột bằng cách thêm một dòng mã CSS vào thành phần chính của hàng.
align-items: center;
Thêm mô-đun Blurb vào cột 1
Thêm nội dung
Mô-đun duy nhất mà chúng tôi sử dụng trong suốt hướng dẫn này là mô-đun Blurb.
Tuy nhiên, bạn có thể thay thế mô-đun này bằng bất kỳ mô-đun nào bạn chọn miễn là bạn thêm lớp CSS mà chúng tôi sẽ chia sẻ trong các bước tiếp theo.
Thêm mô-đun Blurb đầu tiên vào cột 1 và chèn nội dung de Votere choix.
Chọn biểu tượng
Sau đó chọn một biểu tượng.
- Sử dụng biểu tượng: CÓ
- Biểu tượng: Xem ảnh chụp màn hình
Nền Gradient (Di chuột)
Sau đó, chỉ sử dụng một gradient nền khi di chuột.
- Dừng Gradient
- 20%: #ffffff
- 80%: # 0f1bff
- Loại Gradient: Tuyến tính
Cài đặt biểu tượng (Màn hình)
Chuyển tab mới Thiết kế của mô-đun và thay đổi cài đặt biểu tượng như sau:
- Màu biểu tượng: #ffffff
- Hình ảnh / Biểu tượng Góc tròn: 50px
- Chiều rộng đường viền hình ảnh / biểu tượng: 5px
- Màu viền: #ffffff
- Vị trí Hình ảnh / Biểu tượng: Trên cùng
- Căn chỉnh hình ảnh / biểu tượng: trái
Cài đặt biểu tượng di chuột
Thay đổi các màu biểu tượng khác nhau khi di chuột.
- Màu biểu tượng (Di chuột): # 0f1bff
- Màu nền của hình ảnh / biểu tượng (Di chuột): # f7f7f7
Cài đặt văn bản tiêu đề
Tiếp tục bằng cách thay đổi cài đặt văn bản tiêu đề.
- Phông chữ tiêu đề: Nguồn Sans Pro
- Độ đậm phông chữ: Bold
- Kiểu phông chữ tiêu đề: TT (chữ hoa)
Di chuột cài đặt văn bản tiêu đề
Thay đổi màu văn bản tiêu đề khi di chuột.
- Màu văn bản tiêu đề: #ffffff
Cài đặt văn bản mô tả (Màn hình)
Tiếp theo là các cài đặt văn bản nội dung.
- Phông chữ nội dung: Mở Sans
- Chiều cao đường cơ thể: 2em
Di chuột qua cài đặt văn bản mô tả
Sử dụng màu văn bản khi di chuột.
- Màu văn bản nội dung (Di chuột): #ffffff
Khoảng cách
Tiếp theo, chuyển đến cài đặt khoảng cách và thêm các giá trị đệm tùy chỉnh.
- Padding (Trên cùng, Dưới cùng, Trái và Phải): 50px
Box Shadow (Máy tính để bàn)
Chúng tôi cũng sử dụng một bóng hộp.
- Độ mạnh của Box Shadow Blur: 80px
- Sức mạnh lan truyền của Box Shadow: -20px
- Màu bóng: rgba (255,255,255,0.18)
Hộp bóng (Di chuột)
Thay đổi màu của bóng di chuột.
- Màu bóng: rgba (0,0,0,0.18)
Lớp CSS
Và để hiệu ứng mờ xảy ra, chúng ta sẽ cần gán một lớp CSS cho mô-đun Blurb của chúng ta. Phần sau của bài viết, chúng ta sẽ sử dụng lớp CSS này trong mã JQuery.
- Lớp CSS: blurb-item
Sao chép mô-đun Blurb hai lần và đặt các bản sao vào các cột còn lại
Sau khi hoàn thành mô-đun Blurb trong cột 1, bạn có thể sao chép nó hai lần và đặt các bản sao vào các cột còn lại của hàng.
Sao chép toàn bộ hàng
Bạn có thể sao chép hàng bao nhiêu lần tùy thích, tùy thuộc vào số lượng mô-đun Blurb bạn muốn hiển thị trên trang của mình.
Tùy chỉnh các mô-đun Blurb riêng lẻ
Tất nhiên, bạn sẽ cần phải sửa đổi nội dung riêng lẻ của từng mô-đun Blurb.
Thêm một dòng mới
Cấu trúc của cột
Thêm một hàng khác vào phần bằng cách sử dụng cấu trúc cột sau:
Khoảng cách
Mở cài đặt dòng và xóa tất cả phần đệm trên cùng và dưới cùng theo mặc định. Điều này sẽ giúp giảm không gian bị chiếm dụng bởi hàng này.
- Đệm (Trên và Dưới): 0px
Thêm mô-đun Mã vào cột
Chèn mã JQuery và CSS
Thêm mô-đun Mã vào cột hàng và chèn một số mã JQuery và CSS để tạo hiệu ứng.
Đừng quên đặt mã JQuery giữa các thẻ script và mã CSS giữa các thẻ style như bạn có thể thấy trong màn hình in bên dưới.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
Máy tính desktop
Phiên bản điện thoại
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã chỉ cho bạn cách sáng tạo với các mô-đun Blurb mà bạn chia sẻ trên Website.
Cụ thể, chúng tôi đã chỉ cho bạn cách làm nổi bật mô-đun Blurb khi di chuột bằng cách làm mờ các mô-đun khác mà bạn đã hiển thị.
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 tiếp theo của bạn. Divi. 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 nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng 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.
...
