Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo nút menu thả xuống bằng cách sử dụng mô-đun menu toàn chiều rộng của Divi. Để làm điều này, trước tiên chúng ta sẽ tạo một menu trong WordPress. Sau đó, chúng tôi sẽ sử dụng mô-đun menu toàn chiều rộng của Divi để hiển thị menu này với các kiểu tùy chỉnh bằng trình tạo Divi và một chút CSS tùy chỉnh. Kết quả là một nút menu thả xuống thiết thực và phong cách.
Chúng ta hãy bắt đầu.
khảo sát
Dưới đây là tổng quan về nút menu thả xuống mà chúng tôi sẽ tích hợp vào hướng dẫn này.
Những gì bạn cần để bắt đầu
Để bắt đầu, nếu bạn chưa có, hãy cài đặt và kích hoạt Chủ đề Divi đã cài đặt (hoặc plugin Divi Builder nếu bạn không sử dụng Chủ đề Divi). Chúng tôi sẽ sử dụng trình tạo Divi ngay từ đầu để thiết kế nút menu thả xuống.
Đó là nó !
Tạo một menu trong WordPress
Trước khi bắt đầu tạo menu thả xuống với Divi Builder, trước tiên chúng ta cần tạo một menu WordPress mà chúng ta muốn sử dụng cho mô-đun menu có chiều rộng đầy đủ. Để thực hiện việc này, hãy chuyển đến bảng điều khiển WordPress và đi tới Giao diện> Trình đơn. Sau đó, tạo menu mới bằng cách nhấp vào liên kết tạo menu mới, nhập tên menu và nhấp vào nút "Tạo menu".
Hiện tại, bạn có thể tạo liên kết tùy chỉnh với "#" làm trình giữ chỗ cho URL cùng với văn bản liên kết.
Cấu trúc các mục menu để mục menu cấp cao nhất có liên kết "Tìm hiểu thêm" với ba mục menu con.
Sau đó, hãy chắc chắn để lưu menu.
Cách tạo nút menu thả xuống với mô-đun menu toàn chiều rộng Divi
Khi menu đã được tạo, chúng ta có thể bắt đầu thiết kế nút menu thả xuống với Divi. Để bắt đầu dự án, hãy tạo một trang mới trong WordPress và sử dụng Divi Builder để chỉnh sửa trang trên giao diện người dùng (trình tạo trực quan).
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Tạo nội dung giả mạo
Đầu tiên, hãy thêm một hàng một cột vào phần tiêu chuẩn mặc định.
Thêm một mô-đun văn bản
Sau đó thêm một mô-đun văn bản vào dòng có nội dung sau:
Menu Divi Nội dung của bạn ở đây. Chỉnh sửa hoặc xóa văn bản này trong dòng hoặc trong cài đặt Nội dung mô-đun. Bạn cũng có thể tạo kiểu cho mọi khía cạnh của nội dung này trong cài đặt Thiết kế mô-đun và thậm chí áp dụng CSS tùy chỉnh cho văn bản này trong mô-đun Cài đặt nâng cao.
Sau đó cập nhật các thông số thiết kế như sau:
Phần đệm
Sau đó, cập nhật cài đặt phần với các mục sau:
- Đệm: 0px xuống
Khoảng cách dòng và đường viền
Sau khi phần điền được cập nhật, mở cài đặt dòng và chỉ định phần điền và viền nhẹ.
- Upholstery: 10vw ở phía trên, 10vw ở phía dưới, 5vw ở bên trái, 5vw ở bên phải
- Chiều rộng của đường viền: 1px
Tạo nút menu thả xuống
Để tạo nút menu thả xuống, chúng tôi sẽ sử dụng mô-đun menu có chiều rộng đầy đủ. Điều này sẽ cho phép chúng tôi thêm menu đã tạo trước đó.
Thêm menu chiều rộng đầy đủ
Để tạo mô-đun menu toàn chiều rộng, hãy thêm phần toàn chiều rộng mới trong phần tiêu chuẩn hiện tại.
Sau đó thêm một mô-đun menu chiều rộng đầy đủ vào dòng.
Trong cửa sổ bật lên cài đặt menu toàn chiều rộng (bên dưới Nội dung), sử dụng menu thả xuống để chọn menu bạn muốn hiển thị. Đây phải là cùng một menu mà chúng tôi đã tạo trước đó có tên là “menu nút thả xuống”.
Sau đó, loại bỏ màu nền trắng mặc định cho menu.
Khi bạn đã thêm menu với mô-đun menu đầy đủ băng thông, hãy lưu cài đặt. Chúng tôi sẽ quay lại mô-đun này sau một chút để hoàn thiện thiết kế. Nhưng hiện tại, chúng tôi sẽ thêm nền cho phần chiều rộng đầy đủ.
Cập nhật thiết kế của phần chiều rộng đầy đủ
Mở cài đặt cho phần toàn chiều rộng và cập nhật các thông tin sau:
- Độ dốc nền bên trái: # 0047d6
- Độ dốc nền bên phải Màu: # 45b2ff
- Chiều rộng tối đa: 240px
- Phần sắp xếp: trung tâm
Tôi đặt chiều rộng phần tối đa thành 240px, vì điều này khớp với chiều rộng của chiều rộng menu thả xuống mặc định trong Divi. Nó cũng là một kích thước tốt cho một nút trên máy tính để bàn và thiết bị di động.
- Các góc được làm tròn: 5px
Trên tab Nâng cao, thêm Lớp CSS, Phần bổ sung và Chỉ mục Z sau đây.
- Lớp CSS: nút thả xuống
- Tràn ngang: nhìn thấy
- Tràn dọc: có thể nhìn thấy
- Chỉ số Z: 14
Lớp CSS là cần thiết để chúng ta có thể nhắm mục tiêu CSS bên ngoài của mình vào phần này sau này. Phần bổ sung cần được đặt thành hiển thị để chúng tôi có thể thấy menu thả xuống. Và chỉ mục Z sẽ giúp bạn giữ danh sách thả xuống phía trên tất cả các nội dung khác trên trang.
Thiết kế menu Ful thong
Bây giờ chúng tôi đã sẵn sàng để thiết kế mô-đun menu Fulwidth. Mở cài đặt mô-đun menu đầy đủ băng thông và cập nhật những điều sau:
- Tạo liên kết menu toàn chiều rộng: CÓ
- Màu văn bản thả xuống: #ffffff
- Màu của văn bản trình đơn di động: #ffffff
- Sắp xếp văn bản: trung tâm
- Màu nền của menu thả xuống: # 45b2ff
- Màu của dòng menu thả xuống: #ffffff
- Màu nền của menu: #45b2ff
- Menu Phông chữ: Mã hóa không có bán ngưng
- Trọng lượng Menu Phông chữ: Semi Bold
- Màu văn bản menu: #ffffff
- Kích thước văn bản menu: 16px
- Khoảng cách trình đơn: 2px
- Hoạt ảnh của menu thả xuống: Mở rộng
Định vị nút thả xuống
Để nút chồng lên đường viền dưới cùng, chúng ta cần thêm một lề trên âm chính xác bằng một nửa chiều cao của nút.
- Ký quỹ: -40.5px cao
Như bạn có thể thấy, không gian di chuột vẫn chưa chiếm toàn bộ khu vực nút và menu thả xuống vẫn ở bên phải. Để giải quyết vấn đề này, chúng ta có thể thêm CSS tùy chỉnh.
Thêm CSS tùy chỉnh
Trước khi thêm CSS tùy chỉnh, đảm bảo thêm "thả xuống" ID CSS vào phần chiều rộng đầy đủ (không phải mô-đun).
Nếu không có CSS ID, CSS bên dưới sẽ không hoạt động.
Để thêm CSS tùy chỉnh, hãy mở cài đặt trang và dán đoạn mã sau vào hộp nhập CSS tùy chỉnh.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; line-height: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; chiều cao dòng: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Đây là kết quả cuối cùng
cuối cùng suy nghĩ
Tạo nút menu thả xuống bằng cách sử dụng mô-đun menu toàn chiều rộng của Divi bao gồm một vài bước quan trọng. Đầu tiên, chúng tôi tạo menu trong WordPress mà chúng tôi muốn tích hợp vào mô-đun. Sau đó, chúng tôi sử dụng trình tạo Divi và tạo kiểu cho mô-đun menu chiều rộng đầy đủ theo ý thích của chúng tôi. Sau đó, chúng tôi thêm CSS tùy chỉnh để đánh bóng thiết kế cả trên máy tính để bàn và thiết bị di động. Kết quả là một menu thả xuống đẹp mắt (và hữu ích) được triển khai cho lần nhấp chuột trên máy tính để bàn và thiết bị di động. Hy vọng bạn thấy đây là một bổ sung hữu ích cho bộ công cụ thiết kế của bạn.