Bạn có muốn tạo một thanh điều hướng giữa các bài đăng hấp dẫn trong Divi không?
Thanh điều hướng bài đăng cố định là một cách hiệu quả để nâng cao trải nghiệm người dùng của bất kỳ Website của blog. Ngoài điều hướng chính của trang web của bạn, các liên kết điều hướng bài đăng cho phép người dùng dễ dàng chuyển đến bài đăng trước hoặc bài đăng tiếp theo trên blog của bạn. Và nếu bạn thêm các liên kết điều hướng bài đăng này vào một thanh cố định, các liên kết này vẫn hiển thị và dễ truy cập hơn.
Trong hướng dẫn này, chúng tôi sẽ tạo một thanh điều hướng giữa bài đăng dính trong Divi. Để thực hiện việc này, chúng tôi sẽ sử dụng các tùy chọn tích hợp của Divi để chuyển đổi một hàng thành thanh cố định. Tiếp theo, chúng ta sẽ sử dụng mô-đun điều hướng bài viết để thiết kế liên kết “bài viết trước” và “bài viết tiếp theo”.
Ngoài ra, chúng tôi sẽ thêm tiêu đề bài đăng dưới dạng nội dung động ở giữa thanh nhắc nhở người dùng về bài đăng mà họ hiện đang xem, tạo cho thanh điều hướng một phần tử "quá khứ, hiện tại và tương lai" tốt đẹp.
Hãy bắt đầu nào!
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ẽ tạo trong hướng dẫn này.
Những gì bạn cần để bắt đầu
Mặc dù bạn có thể thêm thanh điều hướng bài đăng cố định này vào bất kỳ bố cục hoặc mẫu bài đăng blog nào trong Divi, chúng tôi sẽ sử dụng mẫu bài đăng blog được tạo sẵn để tăng tốc quá trình và bắt đầu thiết kế một cách nhanh chóng.
Nhập mẫu bài đăng trên blog "Bộ công cụ ăn uống" vào Trình tạo chủ đề Divi
Để bắt đầu, hãy tải xuống mẫu bài đăng trên blog miễn phí cho Gói bố cục bộ đồ ăn của Divi . Để làm điều này, hãy truy cập bài đăng trên blog .
Sau đó, nhập email của bạn để tải xuống tệp zip.
Sau đó, giải nén tệp để sẵn sàng nhập.
Để nhập tệp vào trình chỉnh sửa chủ đề, hãy làm theo các bước sau:
- Đi tới Divi> Theme Builder.
- Nhấp vào biểu tượng khả năng di động.
- Trong cửa sổ bật lên Khả năng di động, hãy chọn tab nhập.
- Chọn tệp đã giải nén đã tải xuống trước đó để nhập.
- Bấm vào « Nhập Trình tạo chủ đề Divi Templates ».
- Nhấp vào biểu tượng chỉnh sửa để chỉnh sửa mô hình đã nhập.
Tạo một thanh điều hướng cố định trong Divi
Phần 1: Tạo đường dính
Để tạo thanh điều hướng cố định, chúng tôi sẽ sử dụng hàng ba cột làm vùng chứa cố định cho các liên kết điều hướng giữa bài đăng và tiêu đề bài đăng.
Đọc cũng: Divi: Cách sử dụng tùy chọn "Lặp lại Gradient" để tạo các mẫu nền tùy chỉnh
Trong phần thứ hai của bố cục mẫu, hãy thêm một hàng mới bên dưới hàng chứa nội dung bài đăng.
Cài đặt dòng
Mở cài đặt dòng.
Đầu tiên, chúng ta cần thêm vị trí dính vào dòng để có thể cập nhật các tùy chọn thiết kế khác ở trạng thái dính.
Dưới tab Nâng cao, cập nhật những điều sau:
- Vị trí cố định: Dính lên trên và dưới
- Giới hạn cố định hàng đầu: Phần
- Giới hạn dính dưới cùng: Diện tích cơ thể
Để đảm bảo các cột không xếp chồng lên nhau trên thiết bị di động, hãy thêm CSS tùy chỉnh sau vào Yếu tố chính :
display:flex;
flex-wrap:nowrap;
align-items:center;
Dưới tab Nội dung, thêm màu nền trắng vào dòng ở trạng thái dính như sau:
- nền: không có
- Bakground: #ffffff (Bám dính)
Trong cài đặt Thiết kế, cập nhật những điều sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
- Padding: 0px (Trên và dưới)
Ẩn cột giữa trên máy tính bảng và điện thoại
Để ẩn cột trên thiết bị di động, hãy mở cài đặt cho cột 2 (cột giữa) và cập nhật các tùy chọn hiển thị như sau:
- Tắt trên: Điện thoại, Máy tính bảng
Phần 2: Tạo liên kết điều hướng bài viết
Để tăng tính linh hoạt trong thiết kế cho điều hướng bài đăng, chúng tôi sẽ sử dụng hai mô-đun Điều hướng bài đăng riêng biệt. Ở cột bên trái, chúng tôi sẽ thêm một mô-đun Điều hướng bài viết chỉ hiển thị liên kết của bài viết trước. Ở cột bên phải, chúng tôi sẽ thêm mô-đun Điều hướng bài đăng chỉ hiển thị liên kết bài đăng tiếp theo.
Liên kết đến bài viết trước
Trong cột 1, thêm một mô-đun Điều hướng bài đăng mới.
Mở cài đặt mô-đun, cập nhật tab tùy chọn của Nội dung như sau :
- Liên kết trước (Văn bản): Bài đăng trước
- Hiển thị liên kết bài viết trước: CÓ
- Hiển thị liên kết bài tiếp theo: KHÔNG
- Nền: # 000000
Dưới tab Thiết kế, cập nhật những điều sau:
- Liên kết Phông chữ: Kumbh Sans
- Liên kết Trọng lượng phông chữ: In đậm
- Kiểu phông chữ: TT
- Màu văn bản liên kết: #ffffff
- Kích thước văn bản liên kết: 26px (Máy tính để bàn), 16px (Máy tính bảng và điện thoại)
- Chiều cao dòng: 1,3 em
- Lớp đệm: 0,9em (Trên), 0,7em (Dưới), 2em (Trái và Phải)
Vì chúng tôi đang ẩn cột giữa trên thiết bị di động, hai cột còn lại sẽ chứa các liên kết điều hướng giờ đây, mỗi cột có thể chiếm 50% chiều rộng trình duyệt trên máy tính bảng và điện thoại.
Xem thêm: Divi: Cách thay đổi kiểu của một số phần tử khi di chuột hoặc sau khi nhấp chuột
Để đảm bảo rằng liên kết điều hướng kéo dài 50% chế độ xem, hãy thêm CSS tùy chỉnh sau vào hộp CSS Liên kết để xem trên máy tính bảng:
display:block;
width:50vw;
text-align:center;
float:none;
Tạo liên kết Bài tiếp theo
Để tạo liên kết cho bài tiếp theo, bạn hãy copy module Post Navigation (có link bài trước) chúng ta vừa thiết kế và dán vào cột 3 (cột bên phải).
Tiếp theo, mở cài đặt điều hướng bài đăng cho mô-đun trùng lặp trong cột bên phải và cập nhật các tùy chọn tab nội dung sau:
- Liên kết tiếp theo: Bài tiếp theo
- Hiển thị liên kết bài viết trước: KHÔNG
- Hiển thị liên kết bài viết tiếp theo: CÓ
- Nền: # ffb100
Dưới tab Thiết kế, cập nhật màu văn bản liên kết:
- Màu văn bản liên kết: # 000000
Phần 3: Tạo tiêu đề bài đăng động
Với cả hai liên kết điều hướng tại chỗ, chúng tôi đã sẵn sàng thêm tiêu đề bài đăng dưới dạng nội dung động vào cột giữa.
Ý tưởng là cung cấp cho người dùng một lời nhắc nhở tốt đẹp về thông điệp mà họ đang đọc với khả năng điều hướng đến tin nhắn trước và tin nhắn tiếp theo.
Trong cột giữa, hãy thêm một mô-đun Văn bản mới.
Dưới tab Nội dung, nhấp vào biểu tượng “Sử dụng nội dung động” trong vùng cơ thể, sau đó chọn Tiêu đề Đăng / Lưu trữ.
Khi tiêu đề bài đăng động đã được thêm, hãy mở cài đặt của Tiêu đề Đăng / Lưu trữ và cập nhật nội dung trước:
- Trước khi đọc
Sau đó, lưu các thay đổi.
Dưới tab Thiết kế, cập nhật những điều sau:
- Phông chữ văn bản: Kumbh Sans
- Độ đậm phông chữ của văn bản: Bold
- Kiểu phông chữ: TT
- Màu Văn bản Văn bản: trong suốt (Máy tính để bàn), # 000000 (Dính)
- Kích thước văn bản: 16px
- Khoảng cách chữ: 1px
- Chiều cao dòng: 1,3 em
- Căn chỉnh văn bản: căn giữa
- Chiều rộng tối đa: 96%
- Mô-đun căn chỉnh: trung tâm
- Lớp đệm: 0,5em (Trên và dưới)
Kết quả cuối cùng
Tải DIVI ngay bây giờ !!!
Kết luận
Trong hướng dẫn này, chúng tôi đã chỉ ra cách dễ dàng tạo thanh điều hướng bài đăng cố định cho mẫu bài đăng blog trong Divi.
Chức năng dán thanh / dòng cũng có thể dễ dàng điều chỉnh với các tùy chọn tích hợp của Divi. Ví dụ: bạn có thể giới hạn trạng thái dính cho một phần hoặc chọn chỉ làm cho nó dính ở đầu hoặc cuối khung nhìn trình duyệt.
Hy vọng điều này sẽ hữu ích cho trang blog 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 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.
...
