Hướng dẫn cơ bản về tiêu đề dính yếu tố

Cho dù bạn là một nhà phát triển web đầy tham vọng hay một doanh nhân thương mại điện tử, các trang web của bạn có thể chia sẻ một số yếu tố cần thiết. Ví dụ: mọi trang web cần có tiêu đề rõ ràng để giúp khách truy cập điều hướng giữa các trang khác nhau. Tuy nhiên, nếu bạn sử dụng trình tạo trang như Elementor để cắt mã, bạn có thể tự hỏi liệu vẫn có thể tạo tiêu đề dính Elementor tinh vi nhưng thân thiện với người dùng hay không.

May mắn thay, việc sử dụng tiêu đề Elementor có thể cung cấp cho người dùng một cách hợp lý để khám phá trang web của bạn. Với trình tạo trang phổ biến này, bạn có thể tạo nhiều tiêu đề khác nhau mà không biến mất khi người dùng cuộn xuống một trang web. Tính năng này là thứ khiến chúng trở nên ‘dính’.

Trong bài đăng này, chúng ta sẽ thảo luận về cách hoạt động của tiêu đề cố định và lợi ích của việc sử dụng tiêu đề này. Sau đó, chúng tôi sẽ chỉ cho bạn cách tạo tiêu đề dính Elementor bằng cả phiên bản miễn phí và chuyên nghiệp của công cụ. Cuối cùng, chúng tôi sẽ cung cấp cho bạn các tùy chọn tùy chỉnh bổ sung cho các tiêu đề cố định của bạn bằng cách sử dụng CSS. Bắt đầu nào!

Giới thiệu về Tiêu đề dính Elementor

Không có hai trang web nào giống nhau. Tuy nhiên, có một vài tính năng mà các trang web chất lượng có điểm chung.

Nếu bạn đang chạy một trang nhiều trang, một trong những yếu tố này là tiêu đề. Đây là thanh ngang ở đầu bất kỳ trang nào chứa thông tin hữu ích.

Thông thường, một tiêu đề bao gồm menu điều hướng của bạn với các trang như Giới thiệu hoặc Liên hệ với chúng tôi :

Khi khách truy cập khám phá trang của bạn, họ có thể sẽ mong đợi một tiêu đề có tổ chức để giúp hướng dẫn họ xung quanh trang web của bạn. Vì Trải nghiệm người dùng (UX) là chìa khóa cho sự thành công của một trang web, bạn nên tạo một tiêu đề trực quan và đơn giản. Đó là nơi mà một tiêu đề cố định, được thiết kế bằng Elementor, có thể tạo ra sự khác biệt lớn.

Cách hoạt động của tiêu đề dính

Trước khi tìm hiểu cách hoạt động của tiêu đề cố định Elementor, hãy kiểm tra cách hoạt động của tiêu đề chuẩn khi bạn cuộn xuống một trang:

Như bạn có thể thấy trong ví dụ trên, tiêu đề này chứa một thanh điều hướng phức tạp với các danh mục như Bán hàng , Quần áo , Giày dép , v.v. Những tab này chắc chắn sẽ giúp người mua hàng tìm thấy những gì họ đang tìm kiếm. Tuy nhiên, khi bạn cuộn xuống trang, tiêu đề sẽ biến mất.

Người dùng có thể thấy điều này khó chịu vì nó yêu cầu họ phải cuộn trở lại đầu trang để truy cập menu điều hướng. May mắn thay, một tiêu đề dính cung cấp một giải pháp đơn giản.

Bằng cách giữ nguyên hoặc ‘bám’ ở vị trí đầu trang của bạn, tiêu đề hấp dẫn có thể cải thiện đáng kể trải nghiệm của trang web của bạn:

Khi thiết kế trang web của bạn bao gồm một tiêu đề cố định, người dùng của bạn có thể nhanh chóng chuyển đến các trang mới mà không mất thời gian cuộn trang.

Ngoài ra, với yếu tố cố định này, bạn có thể bao gồm cả mặt trước và trung tâm biểu trưng của mình mọi lúc. Tính năng này có thể giúp người dùng nhớ lại thương hiệu của bạn dễ dàng hơn và khuyến khích họ ở lại trang web của bạn lâu hơn.

Khi nào bạn nên cân nhắc sử dụng tiêu đề dính

Khách truy cập sẽ ít bị lạc hơn khi khám phá các trang web lớn hơn với tiêu đề hấp dẫn. Do đó, bạn có thể muốn tận dụng tính năng này nếu trang web của bạn có nhiều trang. Đó là lý do tại sao bạn sẽ thường thấy các tiêu đề dính trên các trang web thương mại điện tử.

Tiêu đề cố định có thể đặc biệt hữu ích nếu bạn muốn đưa tính năng tìm kiếm vào tiêu đề của mình. Bằng cách đó, khi người dùng đang cuộn và nhận ra rằng họ không thể tìm thấy những gì họ đang tìm kiếm, họ có thể nhanh chóng nhập một truy vấn vào thanh tìm kiếm.

Ngoài ra, một tiêu đề cố định có thể thay đổi cuộc chơi nếu bạn chạy một blog kiếm tiền hiển thị tất cả các bài đăng của bạn trên trang chủ. Nói chung, tiêu đề này có thể đảm bảo trang web của bạn có thể bảo trì và mở rộng được.

Tuy nhiên, nếu trang web của bạn chỉ có một trang duy nhất, thì việc chuyển đổi tiêu đề của bạn theo cách này không có ý nghĩa gì nhiều. Ngoài ra, nếu bạn có một lượng lớn trang trên trang web của mình, nhưng mỗi trang tương đối ngắn, bạn có thể không cần một tiêu đề hấp dẫn.

Nhìn chung, tiêu đề cố định làm giảm thời gian cuộn và tăng khả năng sử dụng và điều hướng của trang web. Nếu bạn không chắc liệu tính năng này có mang lại lợi ích cho trang web của mình hay không, bạn có thể muốn kiểm tra nhanh độ dài trang của mình và sau đó quyết định.

Cách tạo một tiêu đề dính phần tử

Đối với hướng dẫn này, chúng tôi sẽ hướng dẫn bạn các bước để tạo một tiêu đề dính Elementor. Chúng tôi sẽ giả định rằng bạn đã cài đặt và kích hoạt plugin Elementor trên trang web của mình.

Chúng tôi sẽ giới thiệu cách bạn có thể tạo tiêu đề này với cả phiên bản miễn phí và Elementor Pro. Bạn có thể sẽ rất vui khi biết rằng bạn sẽ không cần học HTML hoặc chỉnh sửa mã đáng kể để làm điều này!

Cách tạo tiêu đề hấp dẫn bằng Elementor (Miễn phí)

Phiên bản miễn phí của Elementor cung cấp một số tính năng mạnh mẽ để xây dựng trang. Tuy nhiên, nếu bạn muốn thực hiện các thay đổi đối với đầu trang và chân trang của mình, bạn sẽ cần một số công cụ bổ sung (cũng miễn phí).

Với ý nghĩ đó, hãy xem cách bạn có thể tạo tiêu đề hấp dẫn bằng Elementor!

Bước 1: Cài đặt và kích hoạt các plugin cần thiết của bạn

May mắn thay, một vài công cụ đáng tin cậy có thể dễ dàng mở rộng chức năng của phiên bản miễn phí của Elementor.

Điều hướng đến bảng điều khiển WordPress của bạn để tìm công cụ đầu tiên của bạn. Đi tới Plugins> Add New và tìm kiếm các addon ElementsKit Elementor bằng chức năng tìm kiếm:

Cài đặt và kích hoạt plugin này như bạn thường làm. Khi hoàn tất quá trình này, bạn sẽ được đưa đến trang plugin chính của mình:

Bây giờ, hãy nhấp lại vào Thêm mới để tìm plugin Sticky Header Effects cho Elementor bằng thanh tìm kiếm:

Lặp lại quá trình cài đặt và kích hoạt cho công cụ này và bạn đã sẵn sàng cho bước tiếp theo!

Bước 2: Tạo Menu của bạn

Trước khi có thể tạo bất kỳ loại tiêu đề nào, bạn sẽ cần một menu điều hướng. Chúng ta sẽ tạo một menu đơn giản với các yếu tố phổ biến nhất. Nó sẽ bao gồm logo, các trang và Kêu gọi hành động (CTA).

Để tạo menu của riêng bạn trong bảng điều khiển WordPress, hãy chuyển đến Appearance> Menus . Bên cạnh trường Tên thực đơn , hãy đặt tên mô tả của bạn. Chúng tôi sẽ gọi là “Menu tiêu đề hấp dẫn”:

Đảm bảo chọn Header làm vị trí Hiển thị . Bạn cũng có thể muốn chọn hộp để tự động thêm các trang mới vào menu của mình.

Tiếp theo, bạn sẽ cần thêm một số trang vào menu của mình. Trong phần Trang ở bên trái, đánh dấu vào các hộp cho bất kỳ trang nào bạn muốn đưa vào, sau đó nhấp vào Thêm vào Trình đơn :

Sau đó, bạn sẽ thấy các trang của mình được chuyển sang menu của bạn ở bên phải. Hãy tiếp tục và nhấp vào Menu Lưu ở dưới cùng bên phải màn hình của bạn:

Như bạn có thể thấy, chúng tôi đã thêm một số trang cơ bản, bao gồm Liên hệ với chúng tôi , Giới thiệu và Trang mẫu . Bạn có thể muốn sắp xếp lại các trang của mình để trình tự tạo cảm giác trực quan cho khách truy cập.

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

Bây giờ menu điều hướng của bạn đã tồn tại, nhưng bạn không thể truy cập nó ở bất kỳ đâu. Đó là bởi vì bạn cần tạo tiêu đề cho nó.

Để thực hiện việc này, hãy chuyển đến tab ElementsKit trong menu bên trái của bạn. Nếu bạn chưa có, bạn sẽ cần phải nhấp qua một vài trang ‘bắt đầu’ tại thời điểm này.

Mọi người có thể sẽ có các sở thích khác nhau, vì vậy hãy dành thời gian chọn các tính năng bạn muốn kích hoạt. Tuy nhiên, hãy đảm bảo rằng mô-đun Chân trang đầu trang được chuyển sang BẬT :

Bây giờ, đi tới ElementsKit> Header Footer :

Trang này sẽ trống vì bạn chưa có bất kỳ mẫu đầu trang hoặc chân trang nào. Nhấp vào Thêm mới ở đầu màn hình của bạn để tạo mẫu tiêu đề đầu tiên của bạn:

Trên màn hình trên, hãy nhập tên mô tả và đảm bảo Tiêu đề được chọn làm Loại . Vì bạn đang sử dụng phiên bản miễn phí, tiêu đề này sẽ xuất hiện trên Toàn bộ Trang web .

Đảm bảo rằng bạn chuyển công tắc Kích hoạt / Hủy kích hoạt thành BẬT và nhấp vào LƯU THAY ĐỔI . Bây giờ, bạn sẽ được đưa trở lại trang mẫu của mình, nơi bạn có thể thấy mẫu tiêu đề mới của mình được liệt kê:

Bạn cũng có thể nhận thấy biểu tượng Hoạt động màu xanh lục bên cạnh tiêu đề này. Tuy nhiên, nó vẫn chưa hoạt động.

Để hoàn thành tiêu đề của bạn, hãy di chuột qua nó trong danh sách mẫu và nhấp vào Chỉnh sửa trong Elementor , ngay bên dưới tên của nó. Thao tác này sẽ đưa bạn đến màn hình Trình tạo phần tử.

Tại đây, nhấp vào biểu tượng ElementsKit :

Trên màn hình sau, chọn tab Phần :

Cuộn xuống một chút để tìm phần tiêu đề bạn thích, sau đó nhấp vào Chèn . Chúng tôi đã chọn Tiêu đề – Phần 5 :

Như bạn có thể thấy, menu điều hướng của chúng tôi không hiển thị. Vì vậy, hãy tiếp tục và thêm nó vào mẫu tiêu đề của chúng tôi. Để thực hiện việc này, hãy di chuột qua phần menu điều hướng của tiêu đề. Trong trường hợp này, nó nằm ngay trung tâm:

Nhấp vào khu vực này và Cài đặt Menu của bạn sẽ xuất hiện trong bảng điều khiển bên trái. Bây giờ, hãy tìm trường Menu Chọn . Trong menu thả xuống, chọn menu bạn đã tạo trước đó:

Tại thời điểm này, bạn sẽ thấy menu nằm trong mẫu tiêu đề của mình. Nhấp vào CẬP NHẬT ở góc dưới cùng bên trái của màn hình và tiêu đề tiêu chuẩn của bạn đã hoàn tất.

Hãy kiểm tra cách nó hoạt động trong thực tế:

Như bạn có thể thấy, tiêu đề của chúng tôi trông rất tuyệt. Tuy nhiên, nó sẽ biến mất khi chúng ta cuộn xuống. Hãy xem làm thế nào chúng ta có thể làm cho nó dính.

Bước 4: Làm cho tiêu đề của bạn trở nên dính

Đối với bước cuối cùng của chúng tôi, hãy điều hướng đến ElementsKit> Header Footer> Edit with Elementor . Sau đó, chọn tiêu đề của bạn và nhấp vào biểu tượng ở giữa có sáu dấu chấm:

Khi bạn di chuột qua nó, bạn sẽ thấy điều này cho phép bạn Chỉnh sửa Phần . Khi bạn nhấp vào nó, các tùy chọn chỉnh sửa của bạn sẽ xuất hiện trong bảng điều khiển bên trái.

Nhấp vào tab Nâng cao và cuộn xuống Hiệu ứng tiêu đề dính . Sẽ có một thông báo cảnh báo cho biết plugin không kiểm soát tiêu đề dính, nhưng bạn có thể bỏ qua điều đó. Vì chúng tôi cũng đã thêm plugin Sticky Header Effects cho Elementor nên nó sẽ hoạt động tốt.

Bây giờ hãy bật tiêu đề dính Elementor bằng cách chuyển nút gạt sang BẬT :

Tùy thuộc vào chủ đề của bạn, tiêu đề dính của bạn có thể trông trong suốt. Nếu đúng như vậy, bạn có thể muốn thực hiện một thay đổi về phong cách.

Trong bảng Chỉnh sửa Phần của bạn, bên dưới Kiểu , đi tới Nền> Màu và đảm bảo bạn đã chọn một bóng râm nổi bật so với nền bình thường của bạn:

Sau đó bấm vào CẬP NHẬT . Bây giờ bạn có thể xem trước trang web của mình để kiểm tra kết quả cuối cùng:

Đó là nó! Đây là một tiêu đề dính Elementor đơn giản, nhưng nó có thể dễ dàng đưa trang web của bạn lên cấp độ tiếp theo.

Cách tạo tiêu đề dính bằng Elementor Pro

Khi sử dụng Elementor Pro, việc tạo tiêu đề dính sẽ đơn giản hơn một chút. Bạn có thể thêm tính năng này vào trang web của mình chỉ trong ba bước đơn giản.

Bước 1: Tạo Menu của bạn

Để tạo menu của bạn, hãy điều hướng đến Giao diện> Menu trong bảng điều khiển WordPress của bạn:

Đặt tên mô tả cho menu của bạn, chọn Menu chính bên cạnh Vị trí hiển thị và nhấp vào Tạo menu :

Tại thời điểm này, bạn sẽ có một vài trang hiện có trên trang web của mình. Chọn các trang bạn muốn đưa vào menu của mình từ bảng điều khiển bên trái.

Sau đó nhấp vào Thêm vào Trình đơn , tiếp theo là Trình đơn Lưu :

Bây giờ các trang của bạn sẽ được điền ở phía bên tay phải trong Cấu trúc menu .

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

Tiếp theo, chúng ta sẽ cần tạo nền tảng của mình. Hãy tạo một tiêu đề cổ điển.

Để bắt đầu, hãy tìm tab Elementor trong thanh bên trái của bạn. Ngay bên dưới đó, đi tới Mẫu> Trình tạo Chủ đề . Trang sau sẽ như thế này:

Như bạn có thể thấy, với Elementor Pro, bạn có thể dễ dàng bắt đầu thiết kế mọi thành phần trên trang web của mình.

Nhấp vào biểu tượng dấu cộng ( + ) trên phần tử Header . Bây giờ bạn sẽ thấy một cửa sổ bật lên hiển thị nhiều khối tiêu đề mà bạn có thể chọn:

Nếu bạn đã có sẵn mẫu tiêu đề, bạn có thể chọn nó trong tab Mẫu của tôi . Nếu không, bạn có thể muốn sử dụng một trong các khối phần đi kèm với Elementor Pro.

Khi bạn đã chọn xong, chỉ cần di chuột qua khối mong muốn và nhấp vào Chèn :

Tại đây, bạn sẽ thấy rằng khối này đi kèm với biểu trưng của riêng nó, nhưng menu điều hướng của chúng tôi đã tự động điền. Bây giờ, hãy nhấp vào XUẤT BẢN :

Màn hình sau đây sẽ nhắc bạn xác định CÀI ĐẶT XUẤT BẢN . Tại đây, chọn THÊM ĐIỀU KIỆN để quyết định nơi bạn muốn hiển thị tiêu đề của mình:

Bạn có thể sẽ muốn chọn Toàn bộ trang bên cạnh BAO GỒM . Bạn cũng có thể loại trừ các khu vực trang web nhất định bằng cách nhấp vào mũi tên bên cạnh BAO GỒM và chuyển sang phần thay thế. Khi bạn hài lòng với lựa chọn của mình, hãy nhấp vào LƯU & ĐÓNG .

Lúc này, một thông báo bật lên sẽ xuất hiện ở góc dưới cùng bên phải màn hình của bạn. Nếu nó không biến mất trước khi bạn có thể nhấp vào nó, hãy chọn tùy chọn để xem trang web trực tiếp của bạn.

Ngoài ra, hãy quay lại trang tổng quan WordPress của bạn và xem trước trang web của bạn bằng cách nhấp vào biểu tượng ngôi nhà ở góc trên cùng bên trái, sau đó chọn Truy cập trang web :

Như bạn có thể thấy, tiêu đề của chúng tôi hiện đang hoạt động, nhưng khi chúng tôi cuộn xuống trang, nó sẽ biến mất. Hãy xem chúng ta có thể làm gì về điều đó!

Bước 3: Làm cho tiêu đề của bạn trở nên dính

Bây giờ chúng ta hãy xem cách tạo một tiêu đề dính Elementor bằng công cụ chuyên nghiệp!

Đi tới Mẫu> Trình tạo Chủ đề và chọn tiêu đề bạn vừa tạo. Sau đó, nhấp vào Chỉnh sửa bên cạnh biểu tượng bút chì trên màn hình sau. Thao tác này sẽ đưa bạn trở lại trình soạn thảo Elementor.

Di chuột qua mẫu tiêu đề của bạn, sau đó nhấp vào biểu tượng sáu chấm ở giữa. Thao tác này sẽ mở bảng Chỉnh sửa Phần của bạn ở bên trái:

Bây giờ, điều hướng đến tab Nâng cao và tìm phần Hiệu ứng chuyển động . Tại đây, hãy bật Hiệu ứng cuộn bằng cách chuyển nút gạt sang BẬT :

Sau đó, cuộn xuống phần Hiệu ứng chuyển động để tìm trường Dính . Trong menu thả xuống, chọn Trên cùng :

Bây giờ, hãy nhấp vào CẬP NHẬT . Hãy nhớ rằng tùy thuộc vào cách phối màu của chủ đề, tiêu đề dính Elementor của bạn có thể trông trong suốt:

Nếu đúng như vậy và bạn không thích nó trông như thế nào, bạn luôn có thể thay đổi màu nền của mình. Trong bảng Chỉnh sửa Phần của bạn, đi tới Kiểu> Nền và chọn Cổ điển làm loại nền của bạn.

Bây giờ, hãy chọn màu nền mới cho mẫu tiêu đề của bạn. Bạn sẽ muốn chọn một bóng râm bổ sung cho phần còn lại của trang nhưng cũng tạo ra sự tương phản đẹp mắt:

Vì đây chỉ là một ví dụ, chúng tôi chỉ đơn giản là chọn màu xám để làm cho tiêu đề của chúng tôi bớt trong suốt hơn.

Bây giờ, hãy nhấp vào CẬP NHẬT để lưu các thay đổi của bạn. Hãy tiếp tục và xem trước kết quả cuối cùng của bạn:

Đó là nó! Bạn có thể sẽ muốn điều chỉnh kiểu dáng và màu sắc theo thương hiệu của mình. Chỉ cần đảm bảo luôn lưu các thay đổi của bạn khi hoàn tất.

Cách sử dụng CSS để nâng cao tiêu đề dính yếu tố của bạn

Khi bạn triển khai tiêu đề dính Elementor trên trang web của mình, nó có thể giống như một sự cải tiến đáng kể cho thiết kế trang web của bạn. Tuy nhiên, bạn có thể quan tâm đến các tùy chỉnh sâu hơn hoặc các tính năng năng động hơn.

Bây giờ bạn đã biết cách tạo một tiêu đề cố định cơ bản, hãy xem cách đưa thiết kế của bạn lên một tầm cao mới. Bạn có thể làm điều này bằng cách sử dụng mã Cascading Style Sheets (CSS) trong WordPress.

Nếu bạn là người mới bắt đầu hoặc chưa có kinh nghiệm viết mã, đừng lo lắng. Cải thiện thiết kế của bạn thật dễ dàng với Elementor.

Để thực hiện việc này, hãy đi tới Mẫu> Trình tạo chủ đề> Tiêu đề :

Trong phần Chỉnh sửa> Nâng cao> CSS tùy chỉnh , bạn có thể thêm một đoạn CSS nhỏ để thực hiện các thay đổi về phong cách.

Các loại tiêu đề dính Elementor

Dưới đây là một số cải tiến phổ biến mà bạn có thể muốn xem xét cho tiêu đề dính Elementor của mình!

Tiêu đề dính trong suốt

Một số chủ đề có thể tự động đặt tiêu đề cố định thành trong suốt. Tuy nhiên, nếu bạn muốn làm điều này bằng cách sử dụng CSS, bạn có thể sử dụng một đoạn mã chẳng hạn như đoạn mã sau:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important } selector{ transition: background-color 4s ease !important; } selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; } selector > .elementor-container{ transition: min-height 1s ease !important; }

Chỉ cần sao chép và dán mã này vào trường CSS tùy chỉnh và điều chỉnh các trường theo sở thích của bạn. Đoạn mã này thay đổi màu nền, độ trong suốt và chiều cao của tiêu đề bằng hiệu ứng hoạt ảnh:

Khả năng cho loại này là vô tận.

Thu nhỏ tiêu đề dính

Một lựa chọn phổ biến khác là tiêu đề lớn hơn và nhỏ hơn khi khách truy cập cuộn. Đây là mã bạn sẽ cần cho loại tiêu đề dính Elementor này:

header.sticky-header {    --header-height: 90px;    --opacity: 0.90;    --shrink-me: 0.80;    --sticky-background-color: #0e41e5;    --transition: .3s ease-in-out;    transition: background-color var(--transition),                background-image var(--transition),                backdrop-filter var(--transition),                opacity var(--transition); } header.sticky-header.elementor-sticky--effects {    background-color: var(--sticky-background-color) !important;    background-image: none !important;    opacity: var(--opacity) !important;    -webkit-backdrop-filter: blur(10px);    backdrop-filter: blur(10px); } header.sticky-header > .elementor-container {    transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container {    min-height: calc(var(--header-height) * var(--shrink-me))!important;    height: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {    transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {    padding-bottom: 10px !important;    padding-top: 10px !important; } header.sticky-header > .elementor-container .logo img {    transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img {    max-width: calc(100% * var(--shrink-me)); }

Nếu bạn không cảm thấy thoải mái với một đoạn mã mở rộng như vậy, bạn có thể muốn tham khảo hướng dẫn của Elementor để tạo một tiêu đề hấp dẫn thu nhỏ.

Với thiết kế này, bạn sẽ kết thúc với hiệu ứng này:

Mặc dù tiêu đề này có một nét tinh tế, nhưng sự tinh tế của nó có thể mang lại cho thiết kế của bạn một cảm giác chuyên nghiệp hơn.

Fade-In / Fade-Out

Ngoài các tùy chọn hợp thời trang này, còn có tính năng làm mờ dần / làm mờ dần (còn được gọi là ‘tiết lộ’). Nó trông giống như sau:

Để có hiệu ứng này, bạn sẽ không cần phải chạm vào bất kỳ mã nào. Chỉ cần điều hướng đến tiêu đề của bạn trong trình tạo chủ đề. Sau đó, chuyển đến phần Chỉnh sửa> Nâng cao> Hiệu ứng chuyển động> Hiệu ứng cuộn :

Tại đây, hãy nhấp vào biểu tượng bút chì bên cạnh trường Độ trong suốt và thay đổi Hướng thành Làm mờ dần hoặc Làm mờ dần. Sau đó, điều chỉnh thiết kế của bạn theo sở thích của bạn.

Có nhiều tùy chọn cho các hiệu ứng trong suốt này, vì vậy chúng tôi khuyên bạn nên xem tài liệu của Elementor. Bằng cách đó, bạn sẽ có thể đạt được diện mạo chính xác như mong muốn.

Bản tóm tắt

Làm việc với một nhà xây dựng trang web đáng tin cậy là một giải pháp thay thế tuyệt vời cho việc trả tiền cho một nhà phát triển web kỳ cựu để tạo trang web của bạn. Khi sử dụng một số phần mềm thiết kế trang web tốt nhất, bạn có thể dễ dàng thực hiện các yếu tố cần thiết cho bất kỳ trang web nào. Chúng bao gồm các tiêu đề dính thực tế nhưng đẹp mắt.

Tiêu đề hấp dẫn có thể tạo ra trải nghiệm thú vị hơn cho người dùng của bạn. Bạn có thể chọn từ các kiểu tiêu đề động khác nhau, bao gồm cả trong suốt và thu nhỏ. Tuyệt vời hơn nữa, bạn có thể tạo những thiết kế tiêu đề tuyệt đẹp này với cả Elementor Pro và phiên bản miễn phí của nó.

Thiết kế trang web của bạn là một trong những bước đầu tiên để khởi chạy nó. Tuy nhiên, trước tiên bạn sẽ cần một máy chủ đáng tin cậy. Kiểm tra các kế hoạch lưu trữ được quản lý của Kinsta để xem cách chúng tôi có thể tối ưu hóa hiệu suất trang web của bạn!