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à 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 giáo dục, diễn đàn cộng đồng hay trang web dành cho phương tiện truyền thông, tiêu đề là thứ giúp bạn duyệt đơn giản và thú vị khi 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 tiêu đề và menu của trang bất kể họ cuộn xuống bao xa.

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

Bước 1: Lập thực đơn

Để thêm tiêu đề cố định vào trang web của bạn, hãy truy cập wp-admin > Giao diện > Menu và tạo Menu chính. Trong tiêu đề, nhập phần bạn muốn hiển thị.

Bước 2: Tạo tiêu đề của bạn trong Elementor

Đi tới Mẫu phần tử > Trình tạo chủ đề 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 ta sẽ bắt đầu lại từ đầu với tiêu đề cố định Elementor trong hướng dẫn này.

Bạn có thể thấy nhiều tiện ích tiêu đề khác nhau trong trình chỉnh sửa Elementor trước khi chúng tôi bắt đầu thiết kế mẫu. Chúng ta có thể thiết kế tiêu đề một cách nhanh chóng và dễ dàng 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 chiều rộng nội dung của phần được đặt thành “ Đóng hộp .”

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

Đặt Logo trang web của bạn vào cột đầu tiên và căn chỉnh nó sang bên trái.

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

Chúng tôi sẽ giữ 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, nút và các thành phần khác.

BƯỚC 4: Cách làm cho tiêu đề phần tử của bạn trở nên hấp dẫn

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

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

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

Tiêu đề dính hầu như luôn không mong muốn trên các thiết bị có kích thước máy tính bảng và nó hầu như luôn không 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 tác phẩm 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 bạn 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 đ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 đề cố định trên Elementor của bạn trông đẹp hơn rất nhiều bằng cách sử dụng CSS tùy chỉnh Elementor cho phép bạn tùy chỉnh tiêu đề cố định bằng cách thêm một lớp CSS để làm cho nó phong cách hơn.

Bạn có thể tùy chỉnh chiều cao, màu nền, chuyển tiếp và hiệu ứng cố định của tiêu đề cố định tại đây.

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

Đặt “ Effects Offset ” 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 nơi 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 sử dụng CSS tùy chỉnh. 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 ý thêm điều kiện vào tiêu đề cố định cuối cùng. Một ví dụ amp điều kiện tiêu đề cố định là nơi bạn muốn hiển thị tiêu đề cố định. Ví dụ amp bạn có thể chọn tiêu chí “ toàn bộ trang web ”.

Bây giờ bạn sẽ muốn đưa một số CSS tùy chỉnh vào 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 cứ 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 ta chuyển sang phần 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ả kỹ thuật cơ bản và nâng cao để có được hiệu ứng tiêu đề cố đị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.

Hãy làm 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 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ẽ chuyển sang màu xanh lam từ màu đỏ di truyền trước đó).

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

header.sticky-header { --header-height: 90px; --độ mờ: 0,90; --shrink-me: 0,80; --sticky-background-color: #0e41e5; --transition: .3s dễ dàng ra vào; quá trình chuyển đổi: var màu nền(--transition), var hình nền(--transition), var bộ lọc phông nền(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effect { màu nền: var(--sticky-background-color) !important; hình nền: không có gì! quan trọng; độ mờ: var(--opacity) !important; -webkit-backdrop-filter: Blur(10px); bộ lọc phông nền: mờ (10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effect > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; chiều cao: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: đệm var(--transition); } header.sticky-header.elementor-sticky--effect .elementor-nav-menu .elementor-item { đệm-bottom: 10px!important; phần đệm-top: 10px!quan trọng; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effect .logo img { max-width: calc(100% * var(--shrink-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 trong 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ó trở nên dính hơn hoặc ít 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, điều này sẽ hỗ trợ bạn ghép mã nhanh chóng và thu được 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 biểu định kiểu CSS. Nếu bạn chỉ thực hiện một thay đổi đối với thuộc tính tùy chỉnh, thuộc tính đó 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 theo tổng cộng 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 các biến đó và giữ nguyên các tham số còn lại.

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 dính là #0e41e5 và chiều cao tiêu đề là 90px. Các tùy chọn kiểu dáng khác bao gồm: độ mờ 0,90, độ thu nhỏ 0,80, độ mờ 0,90 và chuyển đổi dễ dàng vào/ra dễ dàng là 300 mili giây.

Thuộc tính tùy chỉnh là các thành phần xuất hiện sau dấu gạch ngang kép “–” trong mã amp dụ của chúng tôi và bạn có thể tìm thấy chúng được liệt kê ở đầu mã amp le của chúng tôi. Tất cả những gì cần làm 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.

Ví amp : nếu bạn muốn tăng chiều cao của tiêu đề lên 100px, đây là giao diện của tiêu đề 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 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 đó. Bạn có thể nhận hướng dẫn chi tiết về cách tạo tiêu đề Elementor giảm dần bằng cách sử dụng Elementor và điều chỉnh CSS của bạn bằng 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 cái đều khác biệt, 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. Ví amp : bạn có thể đặt logo của trang web ở 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 amp 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

Việc bao gồm tiêu đề cố định trên trang web của bạn có thể giúp khách truy cập dễ dàng duyệt qua trang web của bạn và tăng số lần 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 bằng Javascript và CSS, những điều trước đây được yêu cầu. Tạo tiêu đề cố định cho trang web của bạn chưa bao giờ đơn giản hơn bây giờ nhờ các tiêu đề cố định của Elementor.