Bạn có muốn nổi các bài đăng trên blog trong Divi không?
Hôm nay chúng tôi sẽ chỉ cho bạn một cách sáng tạo để trình bày các bài đăng trên blog dưới dạng thẻ nổi trong Divi. Mỗi blog hoặc Website nên đặt mục tiêu có một thành tích xuất sắc nội dung hấp dẫn và có lẽ không kém phần quan trọng hoặc dễ tiếp cận.
Một cách để đảm bảo rằng nội dung vẫn có thể truy cập được đối với người dùng là làm cho nó nổi trên trang.
Và đối với các blogger, chúng tôi sẽ hướng dẫn bạn cách trình bày các bài viết từ blog của bạn dưới dạng thẻ nổi để chúng vẫn hiển thị khi cuộn trang.
Đi thôi.
khảo sát
Dưới đây là tổng quan ngắn gọn về kết quả mà chúng tôi sẽ có được ở cuối hướng dẫn này.
Những gì bạn cần để bắt đầu
Trước khi bắt đầu tạo thiết kế này trong Divi, bạn cần thực hiện những việc sau:
- Tạo một trang mới, đặt tên phù hợp và nhấp vào 'Sử dụng Divi Builder'
- Chọn tùy chọn Chọn bố cục".
- Tìm và chọn bố cục 'trang đích blogger'.
- Bấm vào nút Chọn bố cục để tải nó lên trang.
Sau đó, bạn sẽ có bố cục được tạo sẵn để sử dụng cho hướng dẫn này.
Cách tạo thẻ nổi cho bài đăng trên blog bằng mô-đun blog của Divi
Bây giờ bố cục đã được tải trên trang, chúng tôi đã sẵn sàng tạo thẻ nổi cho bài đăng trên blog của mình.
Đọc cũng: Cách tạo Tiêu đề Toàn cầu Cố định trong Divi
Tạo một phần mới ở cuối bố cục.
Sau đó, thêm một hàng một cột mới vào phần.
Thêm mô-đun Blog và tiêu đề vào hàng / cột
Thay vì tạo mô-đun Blog mới ở đây, hãy cuộn lên và tìm mô-đun Blog hiện có hiển thị ba bài đăng trên blog (nó nằm trong phần thứ ba gần giữa trang). Mở " Các thông số mô-đun khác »Và chọn« Bản sao mô-đun".
Sau đó, dán mô-đun vào hàng một cột mới mà chúng tôi đã tạo ở cuối trang bằng cách nhấp chuột phải vào biểu tượng dấu cộng màu xám và chọn “ Dán mô-đun".
Tiếp theo, chúng tôi sẽ thêm một tiêu đề phía trên các bài đăng trên blog của chúng tôi, tiêu đề này cũng sẽ nổi trên các thẻ blog. Để thực hiện việc này, hãy sao chép mô-đun Văn bản hiện có với văn bản tiêu đề nhỏ " Phong cách sống".
Sau đó dán mô-đun ngay trên mô-đun Blog mới mà chúng tôi vừa thêm vào.
Tiếp theo, chỉnh sửa văn bản tiêu đề để mô tả loại bài đăng trên blog mà bạn muốn làm nổi bật. Trong ví dụ này, chúng tôi sẽ chỉ sử dụng " Lên trên câu chuyện".
Tùy chỉnh đường với vị trí cố định và chiều rộng tùy chỉnh
Chúng tôi muốn giảm kích thước của các bài đăng trên blog nổi để chúng không chiếm quá nhiều không gian trên trang khi chúng có một vị trí cố định. Nó sẽ rất thú vị. Để thực hiện việc này, hãy mở cài đặt dòng và cập nhật những điều sau:
Để làm cho các mục nổi, chúng ta cần cung cấp cho dòng một vị trí cố định. Trong tab Nâng cao, hãy cập nhật những điều sau:
- Chức vụ: Cố định
- Vị trí: Dưới cùng bên phải
- Chênh lệch dọc: 20px
- Chênh lệch ngang: 20px
- Chỉ số Z: 12
Đã cập nhật mô-đun Blog với nội dung tối thiểu và hình hộp
Nói chung, mô-đun Blog đã có bố cục lưới ba cột và một phong cách đẹp đi kèm với gói bố cục mà chúng tôi đã chọn. Nhưng có một số điều chúng ta cần làm.
Xem thêm: Cách tạo tiêu đề chung với biểu mẫu đăng nhập trong Divi
Trước hết, chúng ta cần giảm kích thước của bản đồ (theo chiều dọc) và xóa một số thành phần khỏi nội dung.
Để thực hiện việc này, hãy mở cài đặt blog và ẩn tất cả các yếu tố ngoại trừ hình ảnh nổi bật. Điều này sẽ làm cho bài đăng chỉ hiển thị hình ảnh nổi bật và tiêu đề.
Trong tab Kiểu, hãy định cấu hình bóng hộp như sau:
- Hộp bóng: Xem ảnh chụp màn hình
- Độ mạnh của Box Shadow Blur: 28px
- Màu phông chữ phụ đề: rgba (0,0,0,0.19)
khảo sát
Đây là bản xem trước kết quả mà chúng tôi có cho đến nay.
Làm cho dòng bài viết xuất hiện khi di chuột
Cuối cùng, chúng ta có thể thêm hiệu ứng di chuột đẹp mắt để khuyến khích người dùng tương tác với các bài viết nổi.
Đọc cũng: Cách tạo trang blog bằng mô-đun Blog trong Divi
Mở cài đặt dòng và cập nhật các tùy chọn:
Đối với văn phòng
- Biến đổi: 50%
Đối với trạng thái di chuột
- Chuyển đổi: 0%
Điều này ban đầu sẽ đưa toàn bộ dòng bên ngoài khung nhìn của trình duyệt thêm 50%. Khi người dùng di chuột qua dòng, dòng này sẽ hoàn toàn hiển thị trở lại.
Ẩn hàng trên thiết bị di động
Trừ khi bạn muốn xuất bản một bài đăng trên blog, nếu không sẽ không có ý nghĩa gì khi thả nổi những bài đăng trên blog đó trên thiết bị di động. Nó có thể sẽ chiếm quá nhiều dung lượng và gây ra sự cố khi cố gắng cuộn.
Xem thêm: Cách thêm biểu mẫu liên hệ vào tiêu đề chung trong Divi
Để ẩn bản đồ trên thiết bị di động, hãy mở cài đặt phần và tắt chế độ hiển thị phần trên điện thoại và máy tính bảng.
Kết quả cuối cùng
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Vì thế ! Chúng tôi đã chỉ cho bạn trong hướng dẫn này một cách sáng tạo và độc đáo để trình bày các bài đăng trên blog mà bạn muốn làm nổi bật.
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ó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến 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.
...
