Muốn biết cách hiển thị đoạn trích bài viết khi di chuột vào Divi ?
Xem trước các đoạn trích của bài đăng trên blog khi di chuột có thể là một cách hiệu quả để giữ bố cục lưới nhỏ gọn cho các bài đăng trên blog của bạn mà không phải bỏ hoàn toàn các đoạn đó.
Vì vậy, ý tưởng ban đầu là ẩn các đoạn mã và sau đó hiển thị chúng khi bạn di chuột qua một bài đăng trong lưới. Do đó, nó cho phép người đọc xem nhiều bài đăng hơn đồng thời cung cấp cho họ khả năng xem các đoạn trích của bài đăng mà họ quan tâm.
Vì vậy, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo hiệu ứng chuyển đổi đoạn trích trong bài đăng blog này khi di chuột vào Divi.
Hãy bắt đầu!
khảo sát
Đầu tiên, đây là tổng quan về những gì chúng tôi sẽ tạo trong hướng dẫn này.
Tạo bố cục mô-đun blog
Đầu tiên, chúng ta cần tạo một bố cục cơ bản cho các bài đăng trên blog của mình. Đối với hướng dẫn này, chúng tôi sẽ thêm một hàng vào một cột và chèn một mô-đun Blog vào đó.
Tạo một dòng
Để bắt đầu, hãy chèn một hàng một cột vào phần
chiều rộng dòng
Sau đó vào cài đặt dòng. sau đó, trong tab Kiểu, bên dưới Định cỡ, hãy sửa đổi độ rộng như sau:
- Chiều rộng tối đa: 90%
- Chiều rộng tối đa: 1200px
Thêm một mô-đun blog
Sau đó, chèn một mô-đun Blog vào cột của dòng đã tạo trước đó.
Cài đặt mô-đun blog
Sau đó, đi tới cài đặt mô-đun Blog, trong tab Nội dung, trong Phần tử, đặt tùy chọn “Hiển thị nút Đọc thêm” thành “Có”
Bây giờ, hãy chuyển đến tab Kiểu, trong Mẫu, chọn mẫu “Lưới” làm bố cục cho blog.
Cuối cùng, chuyển đến tab Nâng cao và thêm lớp CSS sau:
Lớp CSS: chuyển đổi-blog-đoạn trích
Sau đó, chúng tôi sẽ sử dụng lớp này làm bộ chọn cho mã CSS tùy chỉnh của chúng tôi trong bước tiếp theo.
Thêm CSS tùy chỉnh với mô-đun Mã.
Tại thời điểm này, các bài đăng trên blog của chúng tôi được bố trí dưới dạng lưới và một lớp CSS tùy chỉnh đã được thêm vào menu Blog. Vì vậy, chúng tôi sẽ sử dụng bộ chọn lớp CSS này để nhắm mục tiêu cụ thể mô-đun Blog này và thêm hiệu ứng chuyển đổi khi di chuột qua một bài viết.
Để thêm CSS, chúng tôi sẽ sử dụng mô-đun Mã. Để thực hiện việc này, hãy thêm mô-đun Mã bên dưới mô-đun Blog.
Tiếp theo, dán CSS tùy chỉnh bên dưới cần thiết để tạo hiệu ứng chuyển đổi đoạn mã bài viết khi di chuột. Trên hết, hãy đảm bảo dán mã CSS giữa các thẻ kiểu cần thiết.
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!important;}/* keep post content visible in visual builder */body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {visibility:visible;opacity:1;max-height:none;}/* hide post content */.toggle-blog-excerpt .et_pb_post .post-content {visibility:hidden;opacity:0;max-height:0px;}/* show post content when hovering over post item */.toggle-blog-excerpt .et_pb_post:hover .post-content {visibility:visible;opacity:1;max-height:500px;}/* set min-height for all post items */.toggle-blog-excerpt .et_pb_post {min-height:400px;}}
Hãy xem kết quả thu được cho đến nay.
Kết quả
Hãy thêm một số kiểu bổ sung vào mô-đun Blog với trình tạo Divi
Bây giờ CSS đã sẵn sàng để cung cấp cho chúng tôi hiệu ứng chuyển đổi cho các đoạn bài đăng trên blog của mình, sau đó chúng tôi có thể thêm bất kỳ kiểu dáng bổ sung nào vào mô-đun blog bằng cách sử dụng hàm tạo Divi.
Đối với ví dụ này, chúng tôi sẽ thực hiện các điều chỉnh tối thiểu đối với phong cách, nhưng bạn cũng có thể tự do khám phá phong cách của riêng mình.
Kiểu tiêu đề bài viết
- Tiêu đề ánh sáng mờ: Văn bản in đậm
- Màu văn bản tiêu đề: # 6D6A7E
- Kích thước văn bản tiêu đề: 20px
- Chiều cao dòng tiêu đề: 1.3em
Kiểu văn bản "Đọc thêm"
- Đọc thêm Dim Light: Bold Text
- Đọc thêm Kiểu sao chép: TT
- Màu chữ Đọc thêm: # 6D6A7E
- Khoảng cách giữa các chữ cái Đọc thêm: 1px
- Chiều cao dòng Đọc thêm: 3.5em
Thay đổi cách hiển thị của phân trang Văn bản
- Hiển thị phân trang Đèn mờ: Chữ in đậm
- Màu văn bản Hiển thị phân trang: # 6D6A7E
- Khoảng cách chữ cái Hiển thị phân trang: 1px
- Hiển thị phân trang Kiểu sao chép: TT
Xóa đường viền
- Chiều rộng đường viền bố cục lưới: 0px
Hover Shadow Box Style
- Hộp bóng: Xem ảnh chụp màn hình
- Vị trí bắt đầu: 0px
- Độ mạnh của Box Shadow Blur: 38px
- Màu phông chữ phụ đề: rgba (109,106,126,0.25)
Kết quả cuối cùng
Kết luận
Tóm lại, như được hiển thị trong hướng dẫn này, việc thêm một số đoạn mã CSS có thể cung cấp cho bạn chức năng bạn cần để tạo các đoạn trích bài đăng trên blog với hiệu ứng di chuột đẹp mắt.
Điều quan trọng nhất của phương pháp này là chúng ta có thể thêm kiểu bổ sung theo ý muốn vào mô-đun blog bằng cách sử dụng các tùy chọn tích hợp của Divi. Hơn nữa, nó sẽ cho phép bạn tùy chỉnh các phần tử bài đăng bao gồm thêm nhiều hiệu ứng di chuột hơn.
Hy vọng rằng điều này sẽ giúp mang lại cho blog của bạn Website Divi tăng thêm về mặt thiết kế và chức năng. Hãy cho chúng tôi biết về kinh nghiệm của bạn trong các bình luận.
