Bạn có muốn tùy chỉnh liên kết Đọc thêm của mô-đun Blog của Divi ? Sau đó làm theo hướng dẫn của chúng tôi.
Liên kết "Đọc thêm" của blog có thể là một phần quan trọng trong việc cải thiện trải nghiệm người dùng. Do đó, điều quan trọng là chúng ta phải biết cách tùy chỉnh chúng một cách chính xác.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tùy chỉnh liên kết “Đọc thêm” trong mô-đun Blog. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách:
- Tùy chỉnh liên kết "Đọc thêm" bằng cách sử dụng các tùy chọn tích hợp của Divi
- Căn chỉnh liên kết "Đọc thêm" (trái, giữa, phải)
- Chuyển liên kết "Đọc thêm" thành nút toàn màn hình
- Tạo nút Tùy chỉnh Đọc thêm với Hiệu ứng Di chuột
- Thay thế văn bản "Đọc thêm" bằng văn bản khác (như "Đọc bài bá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.
Tải Mô-đun Blog trên một Trang bằng Trình tạo Chủ đề của Divi
Để bắt đầu tùy chỉnh liên kết Đọc thêm, bạn cần truy cập vào mô-đun Blog.
Bạn có thể tải một bố cục được xác định trước với bất kỳ mô-đun Blog nào bạn chọn hoặc chỉ cần thêm một mô-đun Blog mới vào một trang.
Để bắt đầu quá trình, chúng tôi sẽ sử dụng trang blog từ bố cục được xác định trước Trí tuệ nhân tạo.
Thêm một trang mới từ Bảng điều khiển WordPress
Sau đó, đặt tiêu đề cho trang của bạn rồi nhấp vào " dùng Divi Xây dựng".
Sau đó bấm vào " Chọn bố cục«
Tìm và chọn " Nhân tạo Sự thông minh Trang blog«
Cuối cùng, chọn bố cục Blog và nhấp vào “ Chọn bố cục«
Tùy chỉnh và căn chỉnh Văn bản liên kết Đọc thêm
Mỗi mô-đun Blog cung cấp tùy chọn để hiển thị hoặc ẩn liên kết "Đọc thêm" cho mỗi bài viết trong bố cục. Để hiển thị liên kết “Đọc thêm”, hãy mở cài đặt blog và chuyển đổi “ Hiển thị nút Đọc thêm thành "CÓ" trong danh sách các mục blog bạn muốn hiển thị.
Trong tab Kiểu, bạn có thể tùy chỉnh văn bản Đọc thêm bằng một trong các tùy chọn được tích hợp sẵn. Đối với ví dụ này, hãy cập nhật những điều sau:
- Phông chữ Đọc thêm: Barlow
- Đọc thêm Dim Light: Semi Bold
- Đọc thêm Kiểu sao chép: Viết hoa (TT), Gạch chân (U)
- Màu văn bản Đọc thêm: # db0eb7
- Đọc thêm Văn bản được gạch chân Màu: # 3c5bff
- Khoảng cách giữa các chữ cái Đọc thêm: 1px
Đây là kết quả.
Hiện tại, liên kết "Đọc thêm" được đặt ở bên trái theo mặc định, trừ khi bạn thay đổi căn chỉnh. Để căn chỉnh liên kết vào giữa hoặc bên phải của bài đăng, hãy thêm đoạn mã CSS như sau:
Trong tab nâng cao cài đặt blog, thêm CSS sau vào CSS nút Đọc thêm:
display: block;
text-align: right;
"display:block" sẽ thay đổi liên kết thành một phần tử khối kéo dài toàn bộ chiều rộng của vùng chứa nó (trong trường hợp này là phần thân của phần tử khối). nội dung xuất bản). Sau khi được xác định là phần tử khối, chúng ta có thể căn chỉnh văn bản bằng cách sử dụng “text-align:right”.
Đọc cũng: Cách tạo Tiêu đề Toàn cầu Cố định trong Divi
Đây là kết quả.
Để căn giữa liên kết, chỉ cần thay thế "right" bằng "center" cho giá trị của thuộc tính "text-align" như sau:
Đây là kết quả.
Tùy chỉnh liên kết "Đọc thêm" để trông giống như một nút
Đối với ví dụ này, chúng tôi sẽ tạo kiểu nút toàn chiều rộng đơn giản cho liên kết "Đọc thêm". Trước khi thêm CSS tùy chỉnh, hãy mở cài đặt blog và cập nhật văn bản liên kết "Đọc thêm" như sau:
- Đọc thêm Kiểu sao chép: chữ hoa (TT)
- Màu văn bản Đọc thêm: #ffffff
Trong ví dụ trước, chúng tôi đã sử dụng “display: block” và “text-align: center” để làm cho liên kết kéo dài toàn bộ chiều rộng của vùng chứa và căn giữa văn bản.
Xem thêm: Cách tạo menu trượt và đẩy trong Divi
Để làm cho nó trông giống như một nút, tất cả những gì chúng ta phải làm là thêm một số màu nền và khoảng cách cùng với một số đoạn CSS bổ sung. Để thực hiện việc này, hãy chuyển đến tab Nâng cao và cập nhật CSS của nút "Đọc thêm" như sau:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Kết quả
Đây là kết quả!
Tạo kiểu nút nâng cao với CSS
Nếu bạn muốn nâng kiểu dáng nút lên một cấp độ khác, chúng ta có thể thêm nền và hiệu ứng di chuột.
Để thực hiện việc này, hãy thay thế CSS cho "Nút Đọc thêm" bằng như sau:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Để thay đổi nền khi di chuột, bạn có thể dán CSS sau vào "Nút Tìm hiểu thêm" khi di con trỏ chuột:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Kết quả
Đây là kết quả!
Thay đổi văn bản "Đọc thêm" thành văn bản khác
Để thay đổi văn bản "Đọc thêm" thành văn bản khác, chẳng hạn như "Đọc bài viết", chúng ta sẽ cần một chút jQuery. Nhưng đừng lo lắng, đây chỉ là một vài dòng.
Trước khi thêm mã jQuery của chúng tôi, hãy thêm một lớp CSS tùy chỉnh vào mô-đun Blog như sau:
- Lớp CSS: et-custom-read-more-text
LƯU Ý: Đảm bảo tên lớp chính xác để jQuery hoạt động.
Để thêm jQuery sửa đổi văn bản "Đọc thêm", hãy thêm mô-đun Mã bên dưới mô-đun Blog.
Sau đó, dán mã jQuery sau, đảm bảo bọc mã bằng các thẻ tập lệnh cần thiết:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Về cơ bản, mã này yêu cầu trình duyệt thay đổi văn bản của liên kết "Đọc thêm" thành "Đọc bài viết" sau khi tải trang.
Kết quả
Đây là kết quả!
Kết quả cuối cùng
Đây là một cái nhìn khác về các tùy chỉnh liên kết (hoặc nút) Đọc thêm mà chúng tôi đã thực hiện.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Vì thế ! Đó là nó cho bài viết này. Mô-đun Divi's Blog cho phép bạn tùy chỉnh sáng tạo liên kết "Đọc thêm". Và nếu bạn muốn thử nghiệm với một vài đoạn mã CSS, bạn có thể tự tạo các sửa đổi nâng cao hơn nữa.
Chúng tôi hy vọng hướng dẫn này sẽ giúp bạn đưa các liên kết “Đọc thêm” đó lên cấp độ tiếp theo. 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.
...
