Bạn có muốn thêm biểu tượng bánh hamburger vào mô-đun Menu của Divi ?
Nếu bạn xây dựng tiêu đề của mình trong Divi, có nhiều hướng khác nhau để làm điều đó.
Chúng tôi sẽ hướng dẫn bạn cách thêm biểu tượng bánh hamburger vào mô-đun Menu của Divi. Biểu tượng bánh hamburger này đã xuất hiện theo mặc định trên màn hình nhỏ hơn. Nhưng trong hướng dẫn này, chúng tôi sẽ đảm bảo rằng biểu tượng bánh hamburger cũng xuất hiện trên màn hình.
Điều này mang lại một cái nhìn tối giản cho tiêu đề của bạn đồng thời tăng thêm sự tương tác.
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem nhanh kết quả.
Tải xuống DIVI ngay bây giờ !!!
Tạo một mẫu tiêu đề toàn cầu mới với Trình tạo Divi
Đi tới Trình tạo chủ đề Divi
Từ bảng điều khiển WordPress, đi tới 'Divi> Trình tạo chủ đề' sau đó nhấp vào 'Thêm tiêu đề chung'
Thêm tiêu đề chung mới
Một menu thả xuống sẽ xuất hiện. Để bắt đầu xây dựng từ đầu, hãy tiếp tục bằng cách chọn “Xây dựng tiêu đề toàn cầu”.
Thiết kế thiết kế tiêu đề toàn cầu
Cài đặt phần
Màu nền
Khi đã ở trong trình chỉnh sửa mẫu, đã đến lúc bắt đầu thiết kế tiêu đề. Bạn sẽ nhận thấy rằng đã có một phần. Mở cài đặt phần và thêm màu nền.
- Màu nền: # f6f9fb
khoảng cách
Chuyển tab mới Thiết kế của phần và sửa đổi các thông số sau.
- Đệm (Trên và Dưới): 0px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
kích thước
Mở cài đặt dòng, chuyển đến tab Thiết kế và thay đổi chiều rộng tối đa trong cài đặt định cỡ.
- Chiều rộng tối đa: 1px
khoảng cách
Sau đó, thay đổi phần đệm trên cùng và dưới cùng trong cài đặt khoảng cách.
- Đệm (Trên và Dưới): 5px
Thêm mô-đun Menu vào cột
Chọn menu để thêm
Tiếp theo, thêm mô-đun Menu vào cột hàng và chọn menu động bạn chọn.
Tải logo
Tải xuống Logo.
Xóa màu nền
Tiếp theo, xóa màu nền trắng mặc định khỏi mô-đun.
Menu cài đặt văn bản
Chuyển tab mới Thiết kế của mô-đun và sửa đổi các thông số văn bản của menu cho phù hợp:
- Menu phông chữ: Poppins
- Độ đậm phông chữ của menu: Bán đậm
- Màu văn bản: # 003e51
- Kích thước văn bản trên menu: 16px
- Căn chỉnh văn bản: Phải
Cài đặt menu thả xuống
Sau đó, thay đổi cài đặt từ menu thả xuống.
- Màu dòng menu thả xuống: # 7159c8
Cài đặt biểu tượng
Thay đổi cả cài đặt biểu tượng.
- Màu biểu tượng giỏ hàng: # 670fff
- Màu biểu tượng tìm kiếm: # 670fff
- Màu biểu tượng menu bánh hamburger: # 670fff
kích thước
Sau đó, chuyển đến cài đặt kích thước và chỉ định chiều rộng tối đa là Logo.
- Logo Chiều rộng tối đa: 280px
khoảng cách
Đồng thời loại bỏ lề dưới mặc định khỏi mô-đun.
- Lề (Dưới cùng): 0px
Làm cho phần dính
Bây giờ menu của chúng tôi đã có sẵn, chúng tôi cũng sẽ làm cho phần này trở nên hấp dẫn. Mở cài đặt phần, chuyển đến tab Nâng cao và áp dụng các cài đặt sau:
- Vị trí cố định: Dính lên đầu
- Bù đắp từ các yếu tố dính xung quanh: CÓ
- Chuyển đổi mặc định và kiểu cố định: CÓ
Màu nền ở trạng thái dính
Sau đó, thay đổi màu nền của phần thành trạng thái dính.
- Màu nền: #ffffff
Bóng hộp trạng thái dính
Cũng áp dụng một bóng hộp cho phần.
- Màu bóng (Máy tính để bàn): rgba (0,0,0,0)
- Màu bóng (dính): rgba (0,0,0,0.04)
Đã thêm biểu tượng bánh hamburger vào mô-đun Menu
Thêm CSS ID vào mô-đun menu
Đầu tiên, mở cài đặt mô-đun Menu, chuyển đến tab Nâng cao và gán một ID CSS.
- ID CSS: divi-menu
Thêm mô-đun Mã trong mô-đun Trình đơn
Tiếp theo, thêm một mô-đun Mã bên dưới mô-đun Menu.
Thêm thẻ tập lệnh và thẻ kiểu
Chúng tôi sẽ sử dụng mã CSS và JQuery. Để chuẩn bị cho việc này, chúng tôi sẽ thêm các thẻ style và script.
Thêm mã CSS
Chúng tôi sẽ dán các dòng mã CSS sau vào giữa các thẻ kiểu:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
Thêm JQuery
Thêm dòng mở mã JQuery
Tiếp theo chúng ta sẽ có mã JQuery. Thêm các dòng mã JQuery sau giữa các thẻ script:
jQuery(function($){
$(document).ready(function(){
});
});
Tạo biến
Tạo một số biến tiếp theo.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Đặt biểu tượng bật tắt trong mô-đun Menu
Tiếp theo, đặt biến biểu tượng bật tắt trong mô-đun Trình đơn bằng cách sử dụng dòng mã sau:
toggleIcon.insertAfter(desktopMenu);
Thêm một chức năng nhấp chuột
Chúng tôi cũng đang thêm một chức năng nhấp chuột.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Lưu các thay đổi của Trình tạo chủ đề Divi
Bây giờ mọi thứ đã sẵn sàng, tất cả những gì bạn phải làm là lưu tất cả các thay đổi vào Divi Theme Builder và xem kết quả!
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem lại kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách sáng tạo với tiêu đề chung của bạn trong Trình tạo chủ đề Divi.
Cụ thể, chúng tôi đã chỉ cho bạn cách thêm biểu tượng menu bánh hamburger trên máy tính để bàn. Theo mặc định, biểu tượng bánh hamburger được hiển thị trên máy tính bảng và thiết bị di động.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạ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ó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để hoàn thành các dự án tạo trang web của mình. Hoặc xem thêm 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.
...
