Bạn có muốn tạo chân trang cố định với DIVI hiển thị đầy đủ khi cuộn xuống không?
Thêm chân trang cố định vào Website có thể mang lại thêm chút liên lạc mà bạn đang tìm kiếm cho Website. Hiệu ứng "Reveal", cho phép chân trang được tiết lộ khi cuộn xuống, sẽ tạo ra một thiết kế rất quyến rũ cho các trang web của bạn.
Thông thường, hiệu ứng này yêu cầu CSS tùy chỉnh đang hạn chế và khó sử dụng. Nhưng nhờ có DIVI, bạn có thể dễ dàng đạt được nó.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo hiệu ứng Hiển thị cho chân trang dính của bạn. Tất cả chỉ cần một vài bước đơn giản.
Hãy bắt đầu!
khảo sát
Dưới đây là tổng quan ngắn gọn về chân trang dính với hiệu ứng Reveal mà chúng tôi sẽ tạo trong hướng dẫn này.
Tạo một mẫu chân trang mới
Visit Divi >> Trình tạo chủ đề từ bảng điều khiển WordPress.
Ở đó, nhấp vào "Thêm chân trang toàn cục"
Tiếp đó hãy chọn "Xây dựng chân trang toàn cầu"
Trong hướng dẫn này, chúng tôi sẽ sử dụng bố cục tạo sẵn để tăng tốc quá trình tạo, nhưng bạn cũng có thể làm lại từ đầu. Để làm điều này, hãy nhấp vào "Tải từ Thư viện".
Bên dưới cửa sổ bật lên Tải từ Thư viện, tìm và sử dụng bố cục " Marina Giới thiệu về Trang » từ gói bố trí Marina.
Khi bố cục được tải, hãy xóa tất cả các phần ngoại trừ phần chân trang. Chúng ta sẽ sử dụng phần footer này để thêm hiệu ứng Reveal.
Thêm hiệu ứng Reveal và tạo nếp cho chân trang
Tạo nếp cho chân trang
Đầu tiên, chúng ta cần tạo độ dính cho footer. Để thực hiện việc này, hãy mở cài đặt phần và nhấp vào tab tiên tiến. Dưới “Hiệu ứng cuộn”, thay đổi cài đặt như sau:
- Vị trí cố định: Bám vào dưới cùng
Cập nhật chỉ số Z cho trạng thái dính
Tiếp theo, chúng ta cần cung cấp cho phần footer của chúng tôi chỉ số z bằng 0 khi phần này ở trạng thái dính. Điều này sẽ cho phép phần nằm sau các phần hoặc phần tử khác trên phần nội dung của trang khi cuộn.
Để thực hiện việc này, hãy cập nhật vị trí Z Index bằng cách nhấp vào biểu tượng dính bên cạnh tùy chọn Z Index. Sau đó cập nhật chỉ số Z về 0.
- Chỉ số Z (dính): 0
Cập nhật chỉ mục Z giữ chỗ chân trang cố định
Khi một phần tử được chỉ định một vị trí cố định trong Divi, một phần tử giữ chỗ trùng lặp cũng được tạo tự động. Điều này cung cấp chức năng cần thiết để định vị và thiết kế các phần tử cố định bằng Divi Builder.
Xem thêm: Cách tạo Tiêu đề toàn cầu với Trình tạo chủ đề của Divi
Trong trường hợp này, phần giữ chỗ của phần chân trang được tạo với chỉ mục z mặc định là 1. Chúng tôi không muốn phần chân trang cố định thực tế của chúng tôi (hiện có chỉ số Z là 0) phía sau phần trình giữ chỗ, vì vậy chúng tôi cần cập nhật Chỉ số Z của trình giữ chỗ thành -1.
Để thực hiện việc này, trước tiên hãy thêm một lớp CSS tùy chỉnh vào phần chân trang như sau:
- Lớp CSS: dính-chân trang-hé lộ
Sau đó, mở cài đặt trang bằng menu cài đặt của Trình tạo chủ đề.
Đi tới " Nâng cao " và nhập CSS sau vào hộp Tùy chỉnh CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Điều này sẽ buộc phần giữ chỗ phải ở sau chân trang cố định.
Lưu thay đổi
Sau khi hoàn tất, hãy lưu các thay đổi đã thực hiện đối với mẫu chân trang.
Đồng thời lưu các thay đổi của Trình tạo chủ đề Divi.
Kết quả cuối cùng
Để xem kết quả cuối cùng, hãy xem một trang và cuộn.
Tải DIVI ngay bây giờ !!!
Kết luận
Trong Divi, thêm chân trang cố định vào Website không yêu cầu plugin hoặc CSS tùy chỉnh phức tạp. Sử dụng hàm tạo chủ đề, bạn có thể dễ dàng tạo mẫu chân trang với Tiết lộ hiệu ứng trong vài phút
Hy vọng rằng điều này sẽ mang lại cho thiết kế chân trang của bạn một sự thúc đẩy tinh tế với sự tương tác hấp dẫn mà khách Sẽ đánh giá cao. 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ó.
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.
...
