Nhìn lén
hôm nay chúng ta sẽ tạo ra thiết kế này, nơi menu điều hướng sẽ được ẩn sau menu hamburger
One section. Toàn bộ tiêu đề mẫu
Chúng ta sẽ bắt đầu bằng cách đi tới trình tạo chủ đề Divi và nhấp vào "Thêm tiêu đề chung". Một trình đơn sẽ bật lên và chọn "Xây dựng tiêu đề chung".
Chọn "Xây dựng từ đầu" và tiếp tục
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 ngay bây giờPhần hai. Toàn bộ tiêu đề thiết kế
Cài đặt. Phần chính
Màu nền
Hiện tại chúng ta sẽ bắt đầu thiết kế tiêu đề. Đầu tiên, thay đổi màu nền của phần đầu cấm.
- Màu nền. #f6f9fb
Distance
Sau đó, chuyển đến cài đặt khoảng cách trong tab thiết kế và đặt khoảng cách đệm trên cùng và dưới cùng bằng cách không
- The same buffers. 0px
- Phần đệm bên dưới cùng. 0px
Họ. Hàng mới
Hãy tiến xa hơn bằng cách thêm một hàng mới vào thiết kế của chúng tôi. Chọn các chủ đề cập nhật trong hình ảnh.
Định cỡ
Trước khi thêm bất kỳ mô-đun nào nữa, hãy thay đổi kích thước hàng
- Maximum width. 1280px
Distance
Điều chỉnh phần đệm trên và dưới
- The same buffers. 5px
- Phần đệm bên dưới cùng. 5px
Họ. Menu mô-đun vào cột
Menu Selection
Bây giờ, hãy thêm một menu mô-đun vào cột của hàng mới và chọn một menu
Add icon
Bây giờ hãy thêm logo vào mô-đun
Xóa màu nền
Sau đó, xóa màu nền mặc định của mô-đun
Cài đặt. Văn bản Menu
Từ tab thiết kế của mô-đun này và thay đổi cài đặt menu văn bản cho phù hợp
- Menu Font chữ. poppin
- Độ đậm chữ của menu. Bán đậm
- Menu color text. #003e51
- Kích thước văn bản trên menu. 16px
- Căn chỉnh văn bản. must
Cài đặt. Menu thả xuống
Thay đổi cài đặt menu thả xuống tiếp theo
- Menu color line drop down. #7159c8
Cài đặt. Icon icon
Thay đổi cả cài đặt biểu tượng
- Màu biểu tượng giỏ hàng. #670ffff
- Color icon search. #670ffff
- Menu menu menu color icon. #670ffff
Định cỡ
Từ cài đặt kích thước, hãy thay đổi chiều rộng tối đa cho logo
- Chiều rộng tối đa của biểu tượng. 60px
Distance
Thực hiện một số điều chỉnh đối với khoảng cách
- Lề dưới cùng. 0px
Rotary section
Manu của chúng tôi bây giờ đã được phân cực. Vì vậy, đã đến lúc làm cho mặt cắt bỏ. Từ cài đặt phần, hãy chuyển đến tab nâng cao và thực hiện cài đặt được đề cập bên dưới.
- Vị trí cố định. Bám sát lên đầu
- Bù đắp từ các yếu tố xung quanh. There
- Move default and type. There
Màu nền. Chế độ hủy
Bây giờ, hãy sửa đổi màu nền của toàn bộ phần trong trạng thái hiện tại
- Màu nền. #ffffff
bóng tối. Chế độ hủy
Áp dụng hộp bóng cho phần này cũng như từ tab thiết kế
- Default color. rgba [0,0,0,0]
- Unknown color. rgba [0,0,0,0. 04]
Phần ba. Chuyển đổi biểu tượng bánh hamburger
ID CSS của menu mô-đun
Tôi sẽ tập trung vào việc tạo biểu tượng bật tắt biểu tượng bánh hamburger trên máy tính để bàn trong phần tiếp theo của hướng dẫn. Đầu tiên, hãy mở cài đặt của Menu Mô-đun, chuyển đến tab nâng cao và chỉ định một ID CSS.
- ID CSS. chia menu
Add module code
Bây giờ hãy thêm mã mô-đun bên dưới menu mô-đun
Mã CSS
Bây giờ, hãy thêm Kiểu thẻ và đặt mã bên trong thẻ
.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__menuMã JQuery
Sau đó, thêm Tập lệnh thẻ và đặt mã bên trong thẻ
jQuery[function[$]{
$[document].ready[function[]{
var toggleIcon = $['>div class="toggle-icon"/divHiện tại, hãy lưu tiến trình và quay lại tùy chọn tạo phân chia bằng cách nhấn vào dấu thập trên cùng bên phải.
Kết quả cuối cùng
Bởi vì chúng tôi đã thành công qua tất cả các bước, đây là thiết kế hôm nay vượt trội của chúng tôi trông như thế nào
Lời kết
Bạn có thể sáng tạo theo nhiều cách với Divi. Nó cho phép bạn hoàn toàn tự làm để thiết kế trang web của mình ngay khi bạn cần. Hôm nay bạn đã thấy thêm một menu điều hướng ở cùng bên trong menu bánh hamburger trên màn hình máy tính để bàn. Tôi hy vọng điều này sẽ giúp bạn tạo ra nhiều chủ đề sáng tạo hơn và nếu bạn thấy hướng dẫn này hữu ích, hãy chia sẻ với bạn bè của bạn sẽ rất TUYỆT VỜI.