Cách sử dụng hiệu ứng cuộn và tiêu đề cố định với Elementor

Tiêu đề thường là thứ đầu tiên một người nhìn thấy khi họ truy cập trang web của bạn và nó đóng vai trò là nền tảng cho cách họ khám phá nó.

Cho dù bạn có trang web Thương mại điện tử, trang web cá nhân, trang web dành cho giáo dục, diễn đàn cộng đồng hay trang web dành cho phương tiện truyền thông, thì tiêu đề là thứ giúp bạn dễ dàng duyệt và sử dụng.

Tiêu đề dính ngày càng trở nên phổ biến trong giới thiết kế web để tổ chức và cấu trúc trang web nhằm cải thiện khả năng điều hướng của người dùng.

Chúng tôi sẽ chỉ cho bạn cách tạo tiêu đề cố định bằng Elementor trong hướng dẫn này.

Tiêu đề cố định cho phép người dùng xem phần đầu trang và phần menu của trang bất kể họ cuộn xuống bao xa.

• Bước 1: Tạo thực đơn
• Bước 2: Tạo Header của bạn trong Elementor
• Bước 3: Sử dụng Elementor để tạo mẫu tiêu đề
• BƯỚC 4: Làm thế nào để làm cho tiêu đề Elementor của bạn trở nên dính
• Bước 5: Tùy chỉnh CSS của chúng tôi
• Phần kết luận

Bước 1: Tạo thực đơn

Để thêm tiêu đề hấp dẫn vào trang web của bạn, hãy chuyển đến wp-admin> Appearance> Menus và tạo Menu chính. Trong tiêu đề, hãy nhập phần bạn muốn hiển thị.

Bước 2: Tạo Header của bạn trong Elementor

Chuyển đến Elementor Templates> Theme Builder khi bạn đã hoàn thành việc xây dựng menu chính. Chọn khu vực Tiêu đề trên trang trình tạo chủ đề và nhấp vào “ Thêm tiêu đề mới ”.

Đặt tên cho mẫu tiêu đề và nhấp vào “ Tạo mẫu ” trên màn hình bật lên.

Sau đó, bạn sẽ được đưa đến trang chỉnh sửa Elementor. Bạn có thể sử dụng một trong các mẫu tiêu đề được tạo sẵn hoặc tự thiết kế từ đầu.

Chúng tôi sẽ bắt đầu lại từ đầu với tiêu đề dính Elementor của chúng tôi trong hướng dẫn này.

Bạn có thể xem các widget tiêu đề khác nhau trong trình soạn thảo Elementor trước khi chúng tôi bắt đầu thiết kế một mẫu. Chúng tôi có thể nhanh chóng và dễ dàng thiết kế tiêu đề bằng cách sử dụng các phần này.

Bước 3: Sử dụng Elementor để tạo mẫu tiêu đề

Tạo bố cục hai cột. Đảm bảo rằng chiều rộng nội dung của phần được đặt thành “ Đóng hộp ”.

Trong cài đặt Chiều rộng nội dung trong Phần Chỉnh sửa Phần tử, Đặt chiều rộng cột đầu tiên thành 20% trong Chỉnh sửa ”.

Đặt Biểu trưng Trang web của bạn vào cột đầu tiên và căn chỉnh nó ở bên trái.

Thêm Menu điều hướng vào cột thứ hai và chọn menu chính mà bạn đã tạo ở bước 1. Căn chỉnh menu điều hướng ở bên phải.

Chúng tôi sẽ giữ cho tiêu đề đơn giản cho hướng dẫn này. Bạn có thể làm cho tiêu đề của mình chi tiết hơn bằng cách thêm màu nền, hiệu ứng hoạt ảnh di chuột, các nút và các yếu tố khác.

BƯỚC 4: Làm thế nào để làm cho tiêu đề Elementor của bạn trở nên dính

Bây giờ chúng ta đã tạo tiêu đề Elementor cơ bản, đã đến lúc biến nó thành tiêu đề Sticky.

Để làm như vậy, hãy chuyển đến phần Chỉnh sửa (Toàn bộ phần tiêu đề). Chọn Nâng cao> Hiệu ứng Chuyển động từ menu thả xuống.

Chọn “ dính lên đầu ” trong hiệu ứng chuyển động, sau đó chọn “ thiết bị ” nơi bạn muốn tiêu đề dính xuất hiện.

Tiêu đề dính hầu như luôn không được mong muốn trên các thiết bị có kích thước máy tính bảng và hầu như luôn không được mong muốn trên màn hình di động. Do đó, hãy nhấp vào “x” bên cạnh cả hai tùy chọn trong Sticky On, chỉ chọn “Desktop”.

Khi bạn hài lòng với công việc của mình, hãy nhấp vào “ Xuất bản ”; điều này sẽ kích hoạt tiêu đề cố định, nhưng nó sẽ không thay thế tiêu đề chủ đề hiện tại của bạn vào lúc này.

Elementor nhắc bạn Thêm Điều kiện cho tiêu đề của mình sau khi bạn đã xuất bản nó. Bạn có thể hiển thị tiêu đề bất cứ nơi nào bạn muốn trên trang web bằng cách thêm các điều kiện.

Chúng tôi muốn tiêu đề này xuất hiện trên toàn bộ trang web, bỏ qua Trang 404. Do đó, chúng tôi đã đưa toàn bộ trang web vào lựa chọn trong khi loại bỏ Trang 404.

Như bạn có thể thấy, việc sử dụng Elementor để tạo tiêu đề Sticky được cá nhân hóa của bạn rất đơn giản và dễ dàng!

Làm cho tiêu đề dính Elementor của bạn trông đẹp hơn rất nhiều Sử dụng CSS Elementor tùy chỉnh cho phép bạn tùy chỉnh tiêu đề dính bằng cách thêm một lớp CSS để làm cho nó trở nên phong cách hơn.

Bạn có thể tùy chỉnh chiều cao, màu nền, hiệu ứng chuyển tiếp và hiệu ứng dính ở đây.

Quay lại khu vực Chỉnh sửa để làm cho tiêu đề cố định của bạn phong cách hơn (Toàn bộ phần tiêu đề). Chọn Nâng cao> Hiệu ứng Chuyển động từ menu thả xuống.

Đặt “ Hiệu ứng bù đắp ” thành 100 trong trường hợp này. Khi khách truy cập sử dụng trang web của bạn, đây là khoảng cách cuộn mà hiệu ứng cuộn xảy ra.

Đặt độ lệch chuyển động thành 100.

Xin lưu ý rằng các tùy chọn Hiệu ứng bù đắp sẽ chỉ hoạt động nếu CSS tùy chỉnh được sử dụng. Do đó, nếu bạn không thêm bất kỳ CSS tùy chỉnh nào của riêng mình, bạn có thể bỏ qua tùy chọn cuối cùng.

Trước khi xuất bản tiêu đề cố định cuối cùng, bạn có thể tùy chọn thêm các điều kiện cho tiêu đề cố định cuối cùng. Một amp của điều kiện tiêu đề cố định là nơi bạn muốn tiêu đề cố định được hiển thị. Với tư cách là một cựu nhân viên amp bạn có thể chọn tiêu chí “ toàn bộ trang web ”.

Bây giờ bạn sẽ muốn bao gồm một số CSS tùy chỉnh trên trang web của mình. CSS tùy chỉnh khá linh hoạt và bạn có thể bao gồm bất kỳ thứ gì bạn muốn nếu bạn đã quen với hoạt động của nó.

Chúng tôi đã hoàn thành việc dọn dẹp; bây giờ chúng tôi chuyển sang các nội dung phức tạp của trang web, bao gồm cả việc bổ sung mã CSS tùy chỉnh. Chúng tôi sẽ trình bày cả các nguyên tắc cơ bản và kỹ thuật nâng cao để có được các hiệu ứng tiêu đề dính miễn phí cho Elementor. Nếu bạn đang sử dụng Elementor 2.9 trở lên, bạn có thể sử dụng Quy tắc kiểu chung để kết hợp CSS này vào trang web của mình.

Thực hiện theo các quy trình được nêu bên dưới để bao gồm CSS tùy chỉnh:

• Để truy cập menu bánh hamburger, hãy tìm nó ở góc trên bên trái của menu Elementor và chọn nó.
• Chọn Chọn kiểu chủ đề từ menu thả xuống bên dưới phần Kiểu chung.
• Chọn CSS tùy chỉnh từ menu thả xuống trong phần đó (màu sẽ thay đổi thành màu xanh lam từ màu đỏ di truyền trước đó của nó).

Sau đó, dán mã CSS bên dưới.

header.sticky-header {--header-height: 90px; - công suất: 0,90; --sắc-me: 0,80; - màu nền-dính: # 0e41e5; --transition: .3s dễ dàng vào ra; chuyển tiếp: background-color var (- chuyển tiếp), background-hình ảnh var (- chuyển tiếp), phông nền-lọc var (- chuyển tiếp), opacity var (- chuyển tiếp); } header.sticky-header.elementor-stick - Effects {background-color: var (- stick-background-color)! important; background-image: none! important; opacity: var (- opacity)! important; -webkit-phông nền-bộ lọc: mờ (10px); phông nền-bộ lọc: mờ (10px); } header.sticky-header> .elementor-container {chuyển đổi: min-height var (- chuyển tiếp); } header.sticky-header.elementor-stick - Effects> .elementor-container {min-height: calc (var (- header-height) * var (- co-me))! important; height: calc (var (- header-height) * var (- co-me)); } header.sticky-header .elementor-nav-menu .elementor-item {chuyển đổi: padding var (- chuyển tiếp); } header.sticky-header.elementor-stick - các hiệu ứng .elementor-nav-menu .elementor-item {padding-bottom: 10px! important; padding-top: 10px! important; } header.sticky-header> .elementor-container .logo img {transfer: max-width var (- transfer); } header.sticky-header.elementor-stick - các hiệu ứng .logo img {max-width: calc (100% * var (- co-me)); } 

Bước 5: Tùy chỉnh CSS của chúng tôi

Các hướng dẫn được liệt kê ở trên sẽ hướng dẫn bạn quá trình tạo tiêu đề cố định giảm dần trong Elementor. Nếu bạn muốn biết thêm chi tiết cụ thể về cách cá nhân hóa tiêu đề hơn nữa, bạn có thể xem mã CSS được cung cấp bên dưới, mã này sẽ cho phép bạn sáng tạo hơn với thiết kế tiêu đề. Tùy thuộc vào nhu cầu của bạn, bạn có thể cá nhân hóa tiêu đề dính Elementor bằng cách thay đổi nhiều cài đặt và làm cho nó ít dính hơn. Chúng tôi khuyên bạn nên sử dụng trình chỉnh sửa mã để kết hợp trực tiếp thay đổi CSS này vào Elementor. Bạn có thể sử dụng Visual Studio Code hoặc Atom, những thứ này sẽ hỗ trợ bạn ghép các mã lại với nhau một cách nhanh chóng và gặt hái được nhiều lợi ích. Các trình chỉnh sửa này được sử dụng miễn phí và có thể được truy cập từ nhiều hệ thống khác nhau, bao gồm Windows, Mac OS X và Linux.

Phần này sẽ trình bày cách bạn có thể điều chỉnh hiệu ứng của tiêu đề thu nhỏ Elementor bằng cách sử dụng CSS style sheet. Nếu bạn chỉ thực hiện một thay đổi đối với thuộc tính tùy chỉnh, nó sẽ được thay đổi ngay lập tức để khớp với phần còn lại của mã CSS.

Các tùy chọn tùy chỉnh cho tiêu đề giảm dần có sẵn trong tổng số năm cách khác nhau. Không phải tất cả các biến đều phải được tùy chỉnh, nhưng bạn có tùy chọn làm như vậy nếu muốn. Ngay sau khi bạn quyết định những biến nào bạn muốn sửa đổi, bạn chỉ có thể sửa đổi những biến đó và giữ nguyên phần còn lại của các tham số.

Dưới đây là năm biến CSS, với các giá trị mặc định cho mỗi biến được hiển thị bằng màu đỏ.

Màu nền cố định là # 0e41e5 và chiều cao tiêu đề là 90px. Các tùy chọn tạo kiểu khác bao gồm: độ mờ 0,90, thu nhỏ 0,80, độ mờ 0,90 và chuyển tiếp dễ dàng / dễ dàng trong 300ms.

Thuộc tính tùy chỉnh là các phần tử xuất hiện sau dấu gạch ngang kép “-” trong mã ex amp le của chúng tôi và bạn có thể tìm thấy chúng được liệt kê ở đầu mã s amp le của chúng tôi. Tất cả những gì được yêu cầu là điều chỉnh giá trị xuất hiện sau dấu hai chấm và trước dấu chấm phẩy trong câu.

Đối với ex amp le, nếu bạn muốn tăng chiều cao của tiêu đề lên 100px, đây là cách nó trông như thế nào trước và sau khi thay đổi chiều cao:

Trước đây, chiều cao tiêu đề là 90 pixel; sau đó, chiều cao tiêu đề là 100 pixel.

Sử dụng Elementor, bạn có thể thiết kế menu tiêu đề cố định theo nhiều cách khác nhau. Bạn không chỉ có thể tạo một tiêu đề dính Elementor miễn phí mà còn có thể cá nhân hóa tiêu đề bằng cách thêm CSS tùy chỉnh vào nó. Có thể nhận được hướng dẫn chi tiết về cách tạo tiêu đề Elementor dính giảm dần bằng cách sử dụng Elementor và chỉnh sửa CSS của bạn với hướng dẫn từng bước này.

Elementor bao gồm nhiều mẫu tiêu đề khác nhau; mỗi thứ đều khác biệt và trang nhã và hỗ trợ người xem điều hướng trang web của bạn.

Với Elementor, bạn có toàn quyền kiểm soát kiểu tiêu đề trang web của mình. Đối với ex amp le, bạn có thể đặt biểu trưng của trang ở giữa trang và menu chính bên dưới nó. Bạn có thể thêm tiêu đề phía trên tiêu đề chính để hiển thị số điện thoại, liên kết mạng xã hội và thông tin khác.

Đây chỉ là một vài ex amp les trong số rất nhiều tùy chọn thiết kế tiêu đề có sẵn cho người dùng Elementor.

Phần kết luận

Bao gồm một tiêu đề cố định trên trang web của bạn có thể giúp khách truy cập dễ dàng xem qua trang web của bạn và tăng số nhấp chuột vào tất cả các khu vực trên trang web của bạn.

Elementor loại bỏ nhu cầu tạo các tiêu đề cố định theo cách thủ công với Javascript và CSS, vốn được yêu cầu trước đây. Việc tạo một tiêu đề cố định cho trang web của bạn chưa bao giờ đơn giản hơn bây giờ, nhờ vào các tiêu đề dính Elementor.