Tiêu đề cố định là một cách tuyệt vời để giữ cho menu điều hướng trang web của bạn luôn hiển thị, đảm bảo dễ dàng truy cập vào các liên kết và thông tin quan trọng. Tuy nhiên, tiêu đề tĩnh có thể trở nên đơn điệu theo thời gian và bạn có thể muốn thay đổi màu của nó khi cuộn để tạo trải nghiệm người dùng năng động và hấp dẫn hơn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thay đổi màu của tiêu đề cố định khi cuộn trong Elementor , bằng các bước đơn giản và dễ thực hiện. Cho dù bạn là người mới bắt đầu hay người dùng Elementor có kinh nghiệm, bạn đều có thể dễ dàng triển khai hiệu ứng này và mang lại cho trang web của mình một giao diện mới mẻ và hiện đại.
Phương pháp thiết kế
Nếu chưa có, bạn sẽ cần sử dụng trình tạo chủ đề để tạo Mẫu tiêu đề tùy chỉnh. Bắt đầu bằng cách đặt biểu trưng của bạn vào Tiện ích Hình ảnh và Tiện ích Điều hướng trong phần tiêu đề hai cột.
Tab nâng cao
Tab Nâng cao trong Điều khiển Phần sẽ được sử dụng cho các bước sau.
Cài đặt ký quỹ
Cách phổ biến nhất để tạo tiêu đề trong suốt là đặt lề âm cho phần đó bằng chiều cao của nó. Mở khóa các điều khiển lề trên Tab nâng cao và đặt phần dưới cùng thành giá trị âm (ví dụ: -125px). Thao tác này sẽ di chuyển phần bên dưới tiêu đề lên đầu trang.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờChỉ số Z
Bạn cũng sẽ cần tăng chỉ số Z của phần này để đảm bảo phần đó luôn đứng đầu nội dung. Bạn có thể nhập bất kỳ số nào lớn hơn phần nội dung còn lại trên trang web của mình, nhưng nhiều nhà thiết kế sử dụng 1.000.
Cài đặt cố định
Chọn tùy chọn Dính từ đàn xếp Hiệu ứng chuyển động và đặt nó thành Trên cùng.
Thêm hiệu ứng
Bây giờ chúng ta đã tạo phần tiêu đề trong suốt cơ bản, chúng ta sẽ thêm hiệu ứng cuộn.
Tab kiểu
Tab Kiểu trong Điều khiển Phần sẽ được sử dụng cho các bước sau.
Màu cuối cùng
Đặt màu của nền hoặc dải màu cuối cùng trong bộ chọn màu.
Hiệu ứng cuộn
Chuyển đổi bộ chọn Hiệu ứng cuộn trong bảng điều khiển.
Đặt giá trị
Bây giờ chúng ta cần điều chỉnh các giá trị trong thanh trượt khung nhìn để đạt được hiệu quả mong muốn. Cuộn đến vị trí trên trang mà bạn muốn độ mờ hoàn toàn và giảm giá trị Top cho đến khi tiêu đề của bạn hoàn toàn mờ (ví dụ: 25%). Bây giờ bạn có thể tăng giá trị của Đáy. Trong ví dụ trước, chúng tôi muốn hiệu ứng xảy ra nhanh chóng nên chúng tôi đặt các giá trị rất gần nhau (ví dụ: 22%). Điều này sẽ dẫn đến hiệu ứng xảy ra khi cuộn trang 3%.
Kết thúc
Tóm lại, việc thay đổi màu tiêu đề cố định trên cuộn trong Elementor có thể nâng cao sự hấp dẫn trực quan và trải nghiệm người dùng trên trang web của bạn. Đó là một cách đơn giản và hiệu quả để làm cho trang web của bạn nổi bật và tạo ấn tượng đáng nhớ với khách truy cập. Tuy nhiên, hãy nhớ rằng bạn sẽ cần phải điều chỉnh hoặc cho phép các thiết bị di động và máy tính bảng vì hoạt động của tiêu đề có thể khác nhau trên các kích thước màn hình khác nhau. Việc tìm ra điểm phù hợp đó sẽ cần một số thử nghiệm và điều chỉnh, nhưng kết quả cuối cùng sẽ rất xứng đáng với nỗ lực. Vì vậy, hãy tiếp tục và thử kỹ thuật này để mang lại cho trang web của bạn một giao diện mới mẻ và hiện đại.
