Bạn có muốn tạo một tiêu đề nhỏ hơn khi trang tải không. Ngay cả khi bạn không có kế hoạch sử dụng hiệu ứng này, bạn cũng nên suy nghĩ xem liệu nó có phải là một bổ sung tốt cho trang web của bạn hay không.
Tại đây, chúng tôi sẽ hướng dẫn bạn chính xác cách sử dụng Elementor Pro để thu nhỏ tiêu đề của trang web WordPress của bạn. Với sự trợ giúp của một số CSS tùy chỉnh, chúng tôi sẽ chỉ cho bạn chính xác những gì bạn cần làm để hoàn thành công việc.
Tiêu đề thu nhỏ? là gì
Tiêu đề thu nhỏ là tiêu đề giống hệt như tiêu đề mà bạn nhìn thấy khi một trang web xuất hiện nhưng nó sẽ nhỏ hơn một chút khi bạn bắt đầu cuộn. Để bắt đầu, có một tiêu đề hàng đầu tiêu chuẩn. Tiêu đề sẽ "thu nhỏ" khi người dùng cuộn xuống trang và bạn có thể điều chỉnh mức độ thu nhỏ và độ mờ của nó.
Mặc dù nó nhỏ hơn, nhưng tiêu đề vẫn ở đó khi bạn cuộn trang xuống. Có nhiều tùy chọn khác nhau, chẳng hạn như chôn hoàn toàn tiêu đề và chỉ để lộ nó khi người dùng cuộn lại.
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ờƯu điểm của một tiêu đề thu nhỏ
Nếu bạn sử dụng tiêu đề thu nhỏ, bạn sẽ có nhiều chỗ hơn cho chính nội dung của mình. Có ít cạnh tranh hơn để thu hút sự chú ý từ tiêu đề đầy đủ, có nghĩa là bạn có thể tập trung vào nội dung chính của mình.
Nếu bạn hoàn toàn ẩn tiêu đề khi người dùng cuộn xuống, bạn sẽ không thể cấp cho người dùng quyền truy cập vào toàn bộ menu điều hướng của mình.
Ở một mức độ nào đó, điều này cung cấp cho bạn thêm không gian cho nội dung của mình trong khi vẫn cho phép bạn hiển thị menu hoàn chỉnh của mình. Trên hết, hiệu ứng này rất đẹp mắt về mặt thẩm mỹ và thêm một chút kẹo trực quan cho khách truy cập trang web của bạn khi họ khám phá nó.
Cách tạo tiêu đề thu nhỏ
Khi bạn đã chuẩn bị sẵn công cụ làm đầu của mình, thì bạn đã sẵn sàng. Phần còn lại của bài viết sẽ hướng dẫn bạn thu nhỏ nó. Bạn sẽ được hưởng rất nhiều CSS tùy chỉnh. Tuy nhiên, chúng tôi sẽ cung cấp cho bạn mã bạn cần và hướng dẫn bạn cách thay đổi mã để phù hợp với trang web của bạn.
Chỉnh sửa với Elementor
Để bắt đầu, hãy chỉnh sửa mẫu tiêu đề bằng Trình tạo chủ đề Elementor.
Để chỉnh sửa mẫu tiêu đề của bạn bằng Elementor, hãy chuyển đến Trình tạo chủ đề mẫu trong bảng điều khiển WordPress của bạn và chọn Chỉnh sửa với Elementor.
CSS Housekeeping cơ bản
Bạn sẽ cần phải dọn dẹp tiêu đề của mình một chút trước khi áp dụng mã CSS mà bạn sẽ thấy trong các phần tiếp theo.
Bước đầu tiên là truy cập cài đặt của phần tiêu đề. Đặt trình đơn thả xuống Thẻ HTML thành tiêu đề trên tab Bố cục.
Không được có chiều cao tối thiểu và căn chỉnh theo chiều dọc phải được đặt ở giữa trong tab bố cục.
Chuyển đến tab Nâng cao và thay đổi Lớp CSS của phần tiêu đề thành tiêu đề cố định.
Cuối cùng, mở tiện ích hình ảnh có chứa biểu trưng của bạn và chọn tùy chọn Nâng cao từ trình đơn thả xuống. Sau đó, trong vùng Lớp CSS của hình ảnh biểu trưng của bạn, hãy nhập biểu trưng:
Hiệu ứng chuyển động để tạo thanh tiêu đề cho bạn
Chức năng Hiệu ứng Chuyển động của Elementor có thể được sử dụng để giữ tiêu đề của bạn ở đầu trang trong khi người xem cuộn xuống.
Bạn có thể truy cập cài đặt tiêu đề của phần bằng cách nhấp vào chúng. Sau đó, nhấp vào trang Nâng cao và xem các tùy chọn Hiệu ứng chuyển động
- Giả sử rằng Top được chọn trong Sticky trong menu thả xuống.
- Vui lòng loại bỏ bất kỳ thiết bị nào khác không được liệt kê trong hộp "Sticky On".
- Phần bù Hiệu ứng phải được đặt thành 90 (chiều cao của tiêu đề của bạn).
CSS tùy chỉnh
Bước cuối cùng trước khi chúng ta hoàn thành là thêm mã CSS tùy chỉnh. Đây là mã cơ bản bạn sẽ sử dụng. Chúng ta sẽ xem xét cách tùy chỉnh nó trong các phần tiếp theo:
Mã CSS sau sẽ:
- Để truy cập menu bánh hamburger, hãy chuyển đến góc trên bên trái của giao diện Elementor và nhấp vào nó.
- Kiểu Chủ đề có thể được chọn từ menu thả xuống Kiểu Toàn cục.
- Chọn CSS tùy chỉnh (nó sẽ có màu xanh lam thay vì Element "thông thường" hoặc màu đỏ khi giao diện Kiểu chủ đề đã mở)
/***
* class: .sticky-header
*/
header.sticky-header {
--header-height: 100px;
--shrink-header-to: 0.6;
--transition: .45s cubic-bezier(.4, 0, .2, 1);
background-color: rgba(244, 245, 248, 1);
transition: background-color var(--transition),
backdrop-filter var(--transition),
box-shadow var(--transition);
}
/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8);
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
header.sticky-header {
--header-height: 70px;
}
}
/***
* class: .logo
*/
header.sticky-header .logo img {
transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
transform: scale(.8);
}
Tùy chỉnh CSS
CSS này có thể được tùy chỉnh để đáp ứng các nhu cầu cụ thể của bạn, vì vậy chúng ta hãy xem cách thực hiện điều đó ngay bây giờ. Bạn nên sử dụng trình chỉnh sửa mã như Visual Studio Code hoặc Atom thay vì chỉnh sửa CSS trực tiếp trong giao diện Elementor. Người dùng Windows, Mac và Linux đều có thể hưởng lợi từ các trình chỉnh sửa mã nguồn mở này.
Thuộc tính tùy chỉnh CSS sẽ là công cụ chúng tôi lựa chọn (hoặc Biến CSS). Các điều khiển này cho phép bạn tinh chỉnh hiệu ứng tiêu đề giảm dần. Nếu bạn thực hiện một thay đổi đối với thuộc tính tùy chỉnh, toàn bộ mã CSS sẽ được cập nhật để phản ánh thay đổi đó.
Có tổng cộng năm yếu tố mà bạn có thể điều chỉnh. Bạn thậm chí không cần phải thay đổi chúng nếu bạn không muốn – chỉ cần giữ nguyên chúng nếu bạn thích cách chúng hoạt động!
Để giúp bạn, chúng tôi đã bao gồm năm biến CSS và giá trị mặc định của chúng bên dưới:
- –header-height: 90px;
- Công suất –: 0,90;
- –shrink-header-to: 0,80;
- –sticky-background-color: #0e41e5;
- Truyền –: dễ dàng vào ra 300ms;
Nếu bạn nhìn vào mã mẫu của chúng tôi, bạn sẽ nhận thấy rằng chúng tôi đã bao gồm một vài thuộc tính tùy chỉnh thay cho dấu gạch ngang kép "–". Sau dấu hai chấm và trước dấu chấm phẩy, tất cả những gì còn lại cần làm là thực hiện một chỉnh sửa nhỏ.
Ví dụ: thay đổi chiều cao tiêu đề thành 100px, sẽ xuất hiện như thế này trước và sau:
- Trước : –header-height: 90px;
- Sau : –header-height: 100px;
Chúng ta hãy làm quen với các biến này.
Màu nền dính (--sticky-background-color)
Màu phông nền của tiêu đề "bị thu hẹp", hiển thị khi khách truy cập cuộn xuống, được kiểm soát bởi thuộc tính Màu nền cố định. Thay đổi màu sắc không nhất thiết phải phù hợp với màu tiêu đề của bạn nếu đó không phải là điều bạn muốn.
Ví dụ: trong mẫu Cơ quan kỹ thuật số, nền tiêu đề ban đầu có một gradient. Màu của tiêu đề chuyển sang màu xanh lam đồng nhất khi khách truy cập cuộn xuống và tiêu đề nhỏ hơn (bạn có thể thấy điều này trong video ví dụ ngay từ đầu).
Chiều cao tiêu đề (--header-height)
Trong Elementor, thuộc tính Header Height xác định chiều cao của tiêu đề - nó phải khớp với chiều cao của phần tiêu đề của bạn. Đặt điều này thành 90px là một điểm khởi đầu tốt trong hướng dẫn.
Tuy nhiên, nếu bạn quyết định thay đổi chiều cao, hãy đảm bảo thực hiện điều đó trong thuộc tính CSS cũng như trong cài đặt phần tiêu đề.
Để tránh các vấn đề với hiệu ứng thu nhỏ, chúng tôi không ủng hộ chiều cao tiêu đề lớn hơn 100px.
Độ mờ (--opacity)
Mức độ trong suốt của tiêu đề giảm dần của bạn được kiểm soát bởi thuộc tính Opacity:
- 0 có nghĩa là tiêu đề sẽ ẩn.
- 1 có nghĩa là sẽ không có tiêu đề hiển thị nào cả (không minh bạch)
Độ mờ đục được đặt thành 0,9 trong mã ví dụ của chúng tôi, làm cho nó gần như hoàn toàn mờ đục. Con số này có thể được thay đổi để phù hợp với yêu cầu của bạn. Giảm giá trị xuống 0 để hiển thị rõ ràng hơn.
Thu nhỏ tiêu đề thành (--shrink-header-to)
Khi khách truy cập bắt đầu cuộn xuống, thuộc tính Shrink Me sẽ xác định mức độ thu nhỏ tiêu đề và biểu trưng của bạn. Điều này có nghĩa là tiêu đề và biểu trưng của bạn sẽ giảm xuống 80% kích thước ban đầu của chúng, chẳng hạn.
Chuyển tiếp (--transition)
Nếu thuộc tính Chuyển đổi được đặt thành "đã thu nhỏ", thì tiêu đề sẽ thu nhỏ từ kích thước ban đầu về giá trị đó.
Tốt nhất bạn nên để nguyên một thứ gì đó, nhưng bạn có tùy chọn để thay đổi nó nếu cần.
Vì vậy, CSS được cập nhật cho tiêu đề thu nhỏ sẽ là:
header.sticky-header {
--header-height: 100px; /* Set your own header height */
--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
background-color: rgba(244, 245, 248, 1); /* Set your own background color */
transition: background-color var(--transition-timing),
backdrop-filter var(--transition-timing),
box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
min-height: var(--header-height);
transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc( var(--header-height) * var(--shrink-header-to) );
}
/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
width: auto;
}Suy nghĩ kết thúc
Thật dễ dàng để làm việc với Elementor vì nó đã trở thành một trong những trình xây dựng trang được nhiều nhà phát triển web trên thế giới mong muốn nhất. Có một thiết kế tương tác như vậy sẽ mang lại nhiều khách truy cập hơn vào trang web của bạn. Nếu bạn có bất kỳ câu hỏi nào, hãy hỏi. Chúng tôi có rất nhiều hướng dẫn về Elementor trên trang web của mình, hãy kiểm tra chúng và cho chúng tôi biết chúng tôi nên trình bày những gì tiếp theo.
