Cần thay đổi tiêu đề trên cuộn trang bằng Elementor ?
Có nhiều hành vi tiêu đề mà bạn có thể đạt được với Elementor Pro. Một trong số đó là thay đổi tiêu đề này bằng tiêu đề khác khi cuộn trang. Bài viết này sẽ chỉ cho bạn cách.
Elementor Pro như bạn biết đi kèm với một tính năng Trình tạo chủ đề để cho phép bạn tạo một tiêu đề tùy chỉnh trên website WordPress. Nhờ tính năng này, bạn không còn cần phải dựa vào những gì được cung cấp bởi theme WordPress khi nói đến việc tùy chỉnh tiêu đề, điều này thường bị hạn chế.
Bạn có thể thêm bất kỳ yếu tố nào bạn muốn, sử dụng bất kỳ cài đặt kiểu chữ nào bạn muốn và đặt bất kỳ hành vi nào bạn thích.
Elementor Pro có tùy chọn điều chỉnh tích hợp để thêm tiêu đề dính. Chúng tôi sẽ sử dụng chức năng này để tạo tiêu đề thay đổi khi trang cuộn. CSS tùy chỉnh cũng sẽ cần thiết cho loại hành vi tiêu đề này.
Đọc cũng: Cách tạo tiêu đề tùy chỉnh trong WordPress với Elementor
Đây là một ví dụ về tiêu đề thay đổi khi trang cuộn.
Bước 1: Tạo tiêu đề tùy chỉnh
Trước khi bắt đầu, hãy đảm bảo rằng bạn đã nâng cấp Elementor của mình lên phiên bản chuyên nghiệp vì Trình tạo chủ đề chỉ khả dụng trên Elementor Pro. Bạn có thể tải phiên bản chuyên nghiệp của Elementor Pro trên Trang web chính thức.
Khi bạn đã sẵn sàng, hãy truy cập Mẫu -> Trình tạo Chủ đề trên bảng điều khiển WordPress chính của bạn. Trong trang tổng quan của trình tạo chủ đề, hãy di con trỏ của bạn qua tab Tiêu đề và nhấp vào biểu tượng thêm để tạo một mẫu tiêu đề mới.
Trong thư viện mẫu xuất hiện, bạn có thể chọn một mẫu tiêu đề được xác định trước mà bạn thích. Hoặc, nếu bạn muốn tạo tiêu đề từ đầu, bạn có thể chỉ cần đóng thư viện mẫu để mở trình chỉnh sửa Elementor.
Khám phá thêm: Cách tạo hình dạng tùy chỉnh trong Elementor
Trong bài viết này, chúng tôi sẽ tạo mẫu tiêu đề từ đầu.
Bắt đầu tạo tiêu đề của bạn bằng cách thêm một phần, sau đó thêm các yếu tố cần thiết và tạo kiểu cho phù hợp.
Khi bạn đã thêm các yếu tố cần thiết và tạo kiểu, hãy chuyển đến tab Nâng cao. Dưới khối Nâng cao, đặt chỉ số Z thành 100 và thêm lớp CSS.header-1
Sau đó nhân bản phần tiêu đề vừa tạo ở trên. Phần được sao chép sẽ là tiêu đề thứ hai của bạn, phần này sẽ xuất hiện khi cuộn trang xuống.
Chỉnh sửa tiêu đề trùng lặp. Bạn có thể thêm các mục khác hoặc xóa các mục hiện có. Bạn cũng có thể thay đổi nền. Tất cả những gì bạn muốn. Sau khi chỉnh sửa xong, hãy chuyển đến tab Nâng cao. Dưới khối Cài đặt nâng cao, đổi tên lớp CSS thành tiêu đề-2.
Sau đó, mở khối Hiệu ứng chuyển động. Trong danh sách thả xuống Dính, đặt thành Áo sơ mi. Bạn có thể xác định độ lệch của các hiệu ứng trong trường Hiệu ứng bù đắp. Giá trị bạn đặt ở đây sẽ xác định độ sâu cuộn trước khi hiệu ứng (dính trong trường hợp này) diễn ra.
Khi bạn đã hoàn tất việc chỉnh sửa cả hai phần tiêu đề, hãy thay đổi thứ tự của chúng.
Chỉnh sửa phần dưới cùng và đặt lề âm ở phía trên phần trên cùng. Để làm điều này, hãy truy cập tab Nâng cao và đặt lợi nhuận trên cùng khoảng -65.
Xuất bản tiêu đề của bạn bằng cách nhấp vào nút PUBLISH ở cuối bảng cài đặt của Elementor. Thêm điều kiện hiển thị bằng cách nhấp vào nút THÊM ĐIỀU KIỆN. Nhấp vào nút LƯU VÀ ĐÓNG khi bạn hoàn tất việc thiết lập điều kiện hiển thị.
Bước 2: Thêm CSS tùy chỉnh
CSS bên dưới được sử dụng để kiểm soát hiệu ứng chuyển tiếp. Bạn có thể thêm CSS trên Theme Customizer. Đi đến Xuất hiện -> Tùy chỉnh trên bảng điều khiển WordPress chính của bạn. Trong bảng điều khiển Công cụ tùy chỉnh chủ đề, hãy mở khối Bổ sung CSS và dán CSS sau đây.
Đoạn mã CSS:
.header-2 {biến đổi: translatey (-80px); -moz-chuyển tiếp: tất cả .3 đều dễ dàng! quan trọng; -webkit-chuyển đổi: tất cả .3s dễ dàng! quan trọng; chuyển tiếp: tất cả .3s dễ dàng! quan trọng; } .elementor-stick - Effects.header-2 {height: auto! important; biến đổi: translatey (0px); } .elementor-stick - Effects.header-1 {display: none! important; }
Nhấp vào nút PUBLISH để áp dụng thay đổi.
trong ngắn
Elementor Pro đi kèm với tính năng Trình tạo chủ đề, nơi bạn có thể tạo các mẫu tùy chỉnh cho các phần của chủ đề, chẳng hạn như tiêu đề. Khi tạo tiêu đề tùy chỉnh bằng Elementor Theme Builder, bạn có thể đặt bất kỳ hành vi nào bạn muốn với khả năng thêm CSS tùy chỉnh. Ngay cả khi không thêm CSS tùy chỉnh, bạn có thể đặt các hiệu ứng là dính và trong suốt.
Đọc cũng: Cách tạo trang 404 trong WordPress với Elementor
Bản thân việc thay đổi tiêu đề trên trang cuộn cũng mang lại một số lợi thế.
Ví dụ: bạn có thể sử dụng tiêu đề phụ (tiêu đề xuất hiện sau khi trang được cuộn xuống) để tăng cơ hội chia sẻ trang của bạn bằng cách chỉ hiển thị các nút chia sẻ trên mạng xã hội.
Tải xuống Elementor Pro ngay!
Kết luận
Cho nên ! Đó là nó cho hướng dẫn này chỉ cho bạn cách thay đổi tiêu đề cuộn trang trên Elementor. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong ý kiế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.
...
