Bạn nghĩ thế nào vềposterer blog của bạn Divi ở dạng băng chuyền nơi bạn có thể dễ dàng cuộn qua các bài viết?
Đối với nhiều trang web, viết blog đã trở thành một phần quan trọng trong chiến lược tiếp thị của họ. SEO.
Nhưng ngoài việc tạo nội dung chất lượng cao, điều quan trọng là phải đơn giản hóa quá trình duyệt bài đăng cho khách truy cập của bạn. Bằng cách này, họ có thể chuyển từ bài viết này sang bài viết khác và dành nhiều thời gian hơn trên trang web của bạn để đọc nội dung bạn đăng ở đó.
Trong Divi, có một mô-đun Blog mà bạn có thể sử dụng để hiển thị động các bài viết của mình và cũng như tùy chỉnh chúng. Nếu bạn đang tìm cách đưa trải nghiệm tìm kiếm bài đăng lên một tầm cao mới, bạn sẽ thích bài viết này.
Chúng tôi sẽ chỉ cho bạn cách chuyển mô-đun Blog tích hợp của Divi thành một băng chuyền bằng cách sử dụng các phần tử được tích hợp của Divi và thư viện js miễn phí .
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả.
Tạo trang blog với Trình tạo chủ đề Divi
Bắt đầu bằng cách thêm một trang mới vào trang web bạn đang làm việc.
Đặt tiêu đề cho trang của bạn, xuất bản trang và nhấp vào 'Sử dụng Divi Builder'.
Tải xuống Trang Blog về Bố cục Được Thiết kế Trước của 'Công ty Thiết kế Nội thất'
Trong hướng dẫn này, chúng tôi sẽ sử dụng Trang Blog từ bố cục 'Công ty thiết kế nội thất', nhưng bạn có thể tự do sử dụng bất kỳ bố cục nào khác mà mình thích.
Tạo Mẫu Mũi tên 'Trước' và 'Tiếp theo' Sử dụng Mô-đun Tóm tắt của Divi
Khi vào trong trang blog, chúng ta có thể bắt đầu tạo băng chuyền.
Phần đầu tiên dành riêng để tạo các mũi tên mà chúng tôi cần để cho phép khách truy cập điều hướng giữa các bài viết.
Đọc cũng: Cách tạo tiêu đề chung cố định trong DIVI
Để thiết kế các mũi tên, chúng tôi sẽ sử dụng mô-đun Tóm tắt của Divi, nhưng bạn có thể tự do sử dụng bất kỳ mô-đun nào khác mà mình chọn.
Thêm một dòng mới ở đầu phần blog của bạn sử dụng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng và để dòng chạm vào bên trái và bên phải của phần bằng cách thay đổi cài đặt định cỡ như sau:
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 100%
Thêm một mô-đun Tóm tắt
Thêm mô-đun Tóm tắt và chèn tiêu đề.
Sau đó chọn một biểu tượng.
- Sử dụng các biểu tượng: CÓ
Cài đặt biểu tượng
Chuyển sang tab Kiểu và sửa đổi cài đặt biểu tượng như sau:
- Màu biểu tượng: # 000000
- Vị trí Hình ảnh / Biểu tượng: Đỉnh
- Căn chỉnh hình ảnh / biểu tượng: Trung tâm
Cài đặt văn bản tiêu đề
Tiếp theo, thay đổi cài đặt văn bản tiêu đề.
- Phông chữ tiêu đề: Mulish
- Tiêu đề ánh sáng dịu: Bán đậm
- Căn chỉnh văn bản: căn giữa
- Màu văn bản tiêu đề: # 000000
kích thước
Sau đó, chúng tôi thay đổi cài đặt định cỡ mô-đun trên các kích thước màn hình khác nhau.
- Chiều rộng tối đa: 10% (máy tính để bàn), 20% (máy tính bảng), 30% (điện thoại)
- Căn chỉnh văn bản: phải
Cũng hãy thêm một lớp CSS. Lớp CSS này sẽ giúp chúng tôi kích hoạt hành động băng chuyền khi nhấp chuột.
- Lớp CSS: nút quay lại
Cuối cùng, chúng ta cũng sẽ thêm một dòng mã CSS vào phần tử chính của mô-đun để biến con trỏ thành một con trỏ.
cursor: pointer;
Sao chép dòng và đặt nó ở cuối phần
Khi bạn đã hoàn thành mũi tên đầu tiên, bạn có thể sao chép toàn bộ vùng chứa hàng và đặt hàng trùng lặp ở cuối phần blog.
Mở mô-đun Tóm tắt trong hàng trùng lặp và chỉnh sửa tiêu đề.
Sử dụng các biểu tượng: CÓ.
Cũng sửa đổi lớp CSS.
- Lớp CSS: nút tiếp theo
Chuẩn bị mô-đun Blog
kích thước
Với các mũi tên đúng vị trí, đã đến lúc bắt đầu điều chỉnh mô-đun Blog, bắt đầu với hàng mà nó được đặt. Mở cài đặt dòng và thay đổi cài đặt định cỡ cho phù hợp:
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 100%
Sau đó đặt dòng tràn thành 'hidden'. Điều này sẽ giúp đảm bảo rằng băng chuyền sẽ không làm cho thanh cuộn ngang xuất hiện trong trang của chúng tôi.
- Tràn ngang: Ẩn
- Tràn dọc: Ẩn
Ẩn phân trang
Khi cài đặt dòng đã sẵn sàng, hãy mở cài đặt mô-đun Blog. Đảm bảo rằng tính năng phân trang bị tắt trong cài đặt mục.
- Hiển thị phân trang: Không
Tiếp theo, chuyển sang tab Kiểu và thay đổi bố cục thành 'Toàn màn hình'.
- Mô hình: Toàn màn hình
Chúng tôi cũng sẽ thêm một lớp phủ.
- Hình ảnh lớp phủ được hiển thị: ACTIVE
- Màu biểu tượng lớp phủ: #ffffff
- Màu nền lớp phủ: rgba (1,0,66,0.33)
Tiếp theo, chúng tôi sẽ thêm một lớp CSS vào blog của mình, điều này sẽ giúp chúng tôi kích hoạt băng chuyền sau trong hướng dẫn.
- Lớp CSS: blog-module
Và chúng tôi sẽ tạo một số khoảng trống giữa meta bài đăng và đoạn trích bằng cách thêm lề dưới vào phần tử CSS Siêu dữ liệu bài đăng trong tab nâng cao.
Khám phá thêm: Cách tạo menu trượt và đẩy trong DIVI
margin-bottom: 50px;
Thêm chức năng Slick JS
Khi tất cả các cài đặt Divi đã sẵn sàng, đã đến lúc thêm chức năng js mượt mà! Thêm mô-đun Mã ngay bên dưới mô-đun Blog (hoặc bất kỳ nơi nào khác trên trang).
Sau đó thêm thư viện js slick trong thẻ script (như bạn có thể thấy trong màn hình in bên dưới). Bạn cũng có thể tự do thêm chúng vào tiêu đề trang web của mình trong cài đặt của Chủ đề Divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Chúng tôi sẽ sửa đổi một chút từng bài đăng trên blog ở cấp độ cá nhân bằng cách sử dụng mã CSS.
Đọc cũng: Cách tạo trang blog với mô-đun Blog trong DIVI
Hãy chắc chắn để đặt mã giữa các thẻ phong cách như thể hiện trong ảnh chụp màn hình bên dưới.
.slick-slide {
float: left;
margin: 2vw;
}
Và cuối cùng, chúng tôi sẽ thêm một số mã JQuery để cho phép băng chuyền thành hình. Trong đoạn mã bên dưới, chúng tôi cũng thêm các nút mà chúng tôi đã thiết kế cho chức năng băng chuyền.
Hãy chắc chắn để đặt mã trong thẻ script như bạn có thể thấy bên dưới.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
Lưu trang và thoát khỏi Trình tạo trực quan của Divi để hiển thị kết quả
Trong Visual Builder, bạn sẽ không thấy kết quả.
Vì vậy, ngay sau khi bạn hoàn tất, hãy lưu trang của bạn, thoát khỏi Trình tạo trực quan và xem kết quả trên trang web của bạn!
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.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Vì thế ! Đó là nó cho bài viết này. Chúng tôi đã chỉ cho bạn cách đưa thiết kế mô-đun Blog của bạn lên cấp độ tiếp theo. Cụ thể, chúng tôi đã hướng dẫn bạn cách biến mô-đun Blog tích hợp của Divi thành một băng chuyền bằng cách sử dụng thư viện js miễn phí.
Nếu bạn muốn biết thêm về Divi, đừng ngần ngại truy cập danh mục của chúng tôi về Hướng dẫn Divi. Bạn cũng có thể tham khảo Cách tạo trang Blog bằng mô-đun Divi Blog
Xem thêm 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.
...
