Bạn có muốn tạo menu trượt và đẩy trong DIVI cái nào không ẩn các phần tử của trang của bạn?
Tiêu đề lớn với nhiều liên kết điều hướng có thể chiếm không gian có giá trị trên Website. Đây là lý do tại sao các menu ngữ cảnh và slide-out ngày càng trở nên phổ biến. Hầu hết thời gian, các menu trượt để hiển thị vẫn ở phía trên nội dung của trang, ẩn các phần tử nhất định.
Tuy nhiên, menu đẩy trượt hoạt động hơi khác một chút. Hiệu ứng đẩy trượt độc đáo ở chỗ menu trượt từ đầu trang đồng thời đẩy nút nội dung từ trang xuống cuối để không có gì bị ẩn khỏi chế độ xem.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo menu đẩy trượt từ đầu bằng Divi Theme Builder.
Chúng ta hãy đi!
khảo sát
Dưới đây là một cái nhìn nhanh về menu đẩy trượt mà chúng tôi sẽ tạo trong hướng dẫn này.
Xây dựng menu đẩy trượt với trình tạo chủ đề Divi
Tạo menu chung mới
Để tạo menu, chúng tôi sẽ tạo một tiêu đề chung mới trong Trình tạo chủ đề Divi.
Đi tới Divi> Theme Builder.
Đọc cũng: Cách tạo tiêu đề chung với biểu mẫu đăng nhập trong DIVI
Sau đó nhấp vào khu vực "Thêm tiêu đề chung" trong mẫu trang web theo mặc định. Từ danh sách thả xuống, chọn "Build Global Header".
Tạo menu đẩy
Yếu tố đầu tiên chúng ta sẽ cùng nhau xây dựng là phần menu đẩy. Phần này sẽ chứa các mục menu sẽ chuyển đổi lên và xuống khi bạn nhấp vào nút chuyển đổi menu.
Cài đặt phần
Mở cài đặt phần mặc định và cập nhật cài đặt như sau:
Tiểu sử
- Nền: # 1a1e36
Lề nội bộ
- Lề nội bộ: 0px Trên, 0px Dưới
Lớp CSS
Trong tab nâng cao, thêm lớp CSS sau sẽ được sử dụng sau này trong mã JS của chúng tôi.
- Lớp CSS: et-push-menu
Thêm dòng 1
Sau khi các thông số phần được xác định, hãy tạo một hàng một cột trong phần.
Thông số dòng 1
Tiếp theo, cập nhật các thông số dòng như sau:
kích thước
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Khoảng cách cột: 1
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 1 pixel
khoảng cách
- Biên: 3vh trên, 3vh dưới
Biên giới
- Chiều rộng đường viền dưới: 1px
- Màu đường viền dưới: rgba (255,255,255,0.2)
CSS tùy chỉnh
Trong tab nâng cao, thêm CSS tùy chỉnh sau vào phần tử chính:
display:flex;
justify-content:center;
align-items:center;
Thông số cột
Khi cài đặt hàng được xác định, hãy mở cài đặt cột và thêm đoạn mã CSS tùy chỉnh vào phần tử chính:
display:flex;
align-items:center;
justify-content:center;Điều này sẽ tập trung vào nội dung của cột theo cả chiều dọc và chiều ngang.
Thêm một nút
Bây giờ chúng tôi đã sẵn sàng để bắt đầu thêm các mục menu của chúng tôi bằng cách sử dụng mô-đun Nút. Bắt đầu bằng cách thêm một nút mới vào cột.
Xem thêm hướng dẫn của chúng tôi về: Cách tạo menu điều hướng dọc trong DIVI
Cài đặt nút
Tiếp theo, cập nhật cài đặt nút như sau:
Nội dung
- Văn bản nút: Thiết kế
- URL liên kết nút: # (thay thế sau bằng URL tùy chỉnh của riêng bạn)
Phong cách
- Sử dụng các kiểu tùy chỉnh cho Nút: CÓ
- Màu văn bản của nút: #ffffff
- Chiều rộng đường viền nút: 0 pixel
- Phông chữ nút: Montserrat
- Nút nhẹ nhẹ: Nặng
- Nút biểu tượng: CÓ
- Nút biểu tượng: [Lựa chọn của bạn]
- Chỉ hiển thị biểu tượng trên nút di chuột: KHÔNG
- Vị trí biểu tượng nút: Trái
Cột trùng lặp
Bây giờ, để tạo các nút bổ sung cho menu, chúng ta có thể sao chép cột. Đối với thiết kế này, hãy nhân đôi cột 4 lần để có tổng cộng 5 mục / nút menu trong một hàng năm cột.
Thêm dòng 2
Khi hàng đầu tiên hoàn tất, chúng tôi đã sẵn sàng thêm một hàng nút khác có thể được sử dụng cho một nhóm các mục menu khác.
Đọc cũng: Cách thêm biểu mẫu liên hệ vào tiêu đề chung trong DIVI
Để tạo dòng tiếp theo, hãy sao chép dòng 1.
Xóa tất cả các cột ngoại trừ một
Sau đó, xóa tất cả trừ một cột trong hàng trùng lặp.
Thông số dòng 2
Cập nhật thông số dòng 2 như sau:
- Chiều rộng tối đa: 1 pixel
- Chiều rộng đường viền dưới: 0px
Thông số cột
Sau đó, thêm đường viền vào cột như sau:
- Chiều rộng đường viền bên phải: 1px
- Màu viền phải: rgba (255,255,255,0.2)
Cập nhật cài đặt nút
Khi cột có đường viền bên phải, hãy mở cài đặt nút và cập nhật những điều sau:
- Kích thước văn bản nút: 14px
- Nút Soft Light: chữ in đậm
- Khoảng cách giữa các chữ cái nút: 2 px
- Kiểu sao chép nút: TT
- Nút biểu tượng: KHÔNG
Cột trùng lặp
Như chúng ta đã làm trước đây, hãy sao chép cột để tạo thêm các nút và cột. Đối với thiết kế này, hãy nhân đôi cột 3 lần để có tổng cộng 4 nút trong một hàng 4 cột.
Xóa đường viền khỏi cột cuối cùng
Vì chúng tôi không muốn cột cuối cùng có đường viền bên phải, hãy mở cài đặt cho cột 4 và cập nhật chiều rộng đường viền:
- Chiều rộng đường viền bên phải: 0px
Tạo thanh tiêu đề chính
Tiếp theo, chúng ta sẽ tạo phần thanh tiêu đề chính. Thanh tiêu đề này sẽ luôn hiển thị và sẽ là thứ chứa biểu trưng trang web của chúng tôi, lời kêu gọi hành động và nút bật tắt menu của chúng tôi.
Thêm một phần
Trước khi thêm phần mới, bạn nên cập nhật nhãn của phần trước đó để đọc "Phần Menu Đẩy".
Xem thêm: Cách tạo Tiêu đề chung với Trình tạo chủ đề trong DIVI
Sau đó, tạo một phần mới bên dưới phần đầu tiên.
Cài đặt phần
Bây giờ hãy cập nhật nhãn của phần mới để đọc "Phần tiêu đề". Sau đó, mở cài đặt phần và cập nhật những điều sau:
khoảng cách
- Lề nội bộ: 0px Trên, 0px Dưới
Thêm một hàng
Sau khi phần đệm phần được đặt, hãy thêm một hàng ba cột vào phần.
Cài đặt dòng
Mở thông số hàng và cập nhật thông tin sau:
kích thước
- Chiều rộng máng xối: 1
- Chiều rộng: 90%
- Chiều cao: 70px
khoảng cách
- Lề nội bộ: 0px Trên, 0px Dưới
CSS tùy chỉnh
Trong tab nâng cao, thêm CSS tùy chỉnh sau vào phần tử chính:
display:flex;
align-items:center;Thao tác này sẽ căn giữa các cột trong hàng theo chiều dọc.
Thêm một nút
Để tạo CTA chính trên phần tiêu đề, chúng ta có thể sử dụng nút hàng thứ hai ở phần trên cùng. Sao chép nút từ cột 1 của hàng 2 của phần trên cùng và dán vào cột 1 của hàng của phần tiêu đề.
Cập nhật cài đặt nút
Sau đó, mở cài đặt nút trùng lặp và cập nhật những thứ sau:
- Văn bản nút: Đăng ký
- Kích thước văn bản nút: 14px
- Màu văn bản của nút: # 1a1e36
- Nút biểu tượng: CÓ
- Nút biểu tượng: Mũi tên phải (xem ảnh chụp màn hình)
Thêm logo
Ở cột giữa, hãy thêm mô-đun Hình ảnh. Đây sẽ là cách chúng tôi thêm động biểu trưng của trang web.
Di chuột qua vùng hình ảnh và nhấp vào biểu tượng "Sử dụng nội dung động". Từ trình đơn thả xuống, hãy chọn "Biểu trưng trang web".
Cài đặt Hình ảnh
Sau đó, trong tab Kiểu, hãy cập nhật thông tin sau:
- Căn chỉnh hình ảnh: căn giữa
- Chiều cao tối đa: 55 pixel
Thêm biểu tượng bánh hamburger tùy chỉnh
Chúng ta có thể sử dụng một biểu tượng thông thường thông qua một mô-đun bố cục làm nút chuyển đổi menu, nhưng đối với hướng dẫn này, tôi nghĩ chúng ta sẽ thêm một nút chuyển đổi menu tùy chỉnh với hiệu ứng chuyển đổi thú vị.
Thêm một mô-đun văn bản
Để tạo biểu tượng menu, chúng tôi sẽ sử dụng mô-đun văn bản với mã HTML tùy chỉnh sẽ được tạo kiểu bằng CSS bên ngoài.
Tiếp tục và thêm một mô-đun văn bản vào cột 3.
Thêm mã HTML vào mô-đun văn bản
Sau đó, thêm mã HTML sau vào nội dung của mô-đun văn bản:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Tiểu sử
Đặt màu nền cho mô-đun văn bản:
- Màu nền: # 1a1e36
Định dạng văn bản
Tiếp theo, cập nhật cài đặt Kiểu như sau:
- Chiều rộng: 70 pixel
- Căn chỉnh mô-đun: phải
- Chiều cao: 70px
- Lề trong: 20px trên, 20px dưới, 16px trái, 16px phải
Lớp CSS
Trong tab nâng cao, thêm lớp CSS sau:
- Lớp CSS: et-push-menu-toggle
Thêm mã
Để mang về nhà chức năng mà chúng tôi cần để làm cho menu đẩy trượt này hoạt động, chúng tôi sẽ thêm CSS và jQuery tùy chỉnh của chúng tôi vào mô-đun Mã.
Hãy tiếp tục và thêm mô-đun Mã vào cột 3 trong mô-đun Văn bản.
Sau đó, dán mã sau (NB: bọc mã này trong thẻ phong cách để nó hoạt động chính xác):
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
Sau đó, sao chép và dán mã này ngay bên dưới (quan trọng: bọc mã này trong các thẻ tập lệnh để nó hoạt động bình thường):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Cập nhật văn bản và liên kết của nút
Cuối cùng, chúng tôi có thể cập nhật tất cả các nút với văn bản nút và URL liên kết cần thiết.
Nó được thực hiện!
Lưu cài đặt
Đừng quên lưu bố cục và cài đặt của Theme Builder.
Kết quả cuối cùng
Để xem kết quả cuối cùng, hãy kiểm tra trang trên website.
Tạo dính
Nếu bạn muốn có phiên bản menu "cố định", chỉ cần thêm đoạn mã CSS sau vào mô-đun mã (giữa các thẻ kiểu):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Đây là kết quả.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Chúng tôi hy vọng bạn thích menu đẩy trượt này. Hiệu ứng này là duy nhất và mở ra cánh cửa cho nhiều tiêu đề sáng tạo hơn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
