Nút menu thả xuống có thể rất hữu ích khi thiết kế Website. Ngoài menu chính, một số khu vực nhất định của trang web có thể yêu cầu menu thả xuống được tạo thành từ các mục phụ. Chúng tôi thấy chúng được sử dụng cho những thứ như danh mục bài đăng blog, danh sách và mục blog. hình thức. Nhưng chúng thậm chí có thể được sử dụng cho lời kêu gọi hành động.

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.

Menu thả xuống tổng quan

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".

Tạo menu trên wordpress

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.

Tổ chức menu Wordpress

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

Phần divi lợi nhuận thấp

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

Cấu hình phần mô-đun Divi

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.

Tạo phần trình tạo divi có chiều rộng đầy đủ

Sau đó thêm một mô-đun menu chiều rộng đầy đủ vào dòng.

Menu divi toàn màn hình

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.

Cấu hình màu nền menu toàn màn hìnhKhi 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

Phần nền Divi

  • 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ài đặt phần Divi

  • Các góc được làm tròn: 5px

Cấu hình cài đặt đường viền Divi

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.

Thông số phần cài đặt diviThiế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

Cài đặt thông số kiểu mô-đun menu toàn màn hình

  • 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

Phông chữ toàn màn hình menu mô-đun divi

Đị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

Cài đặt phần menu toàn chiều rộng divi

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).

Mô-đun điều chỉnh hạng mục diviNế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; }

Css tùy chỉnh trang divi

Đây là kết quả cuối cùng

Hoạt ảnh menu thả xuống Divi

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.