Bỏ qua đến nội dung chính

Cách tạo nút menu thả xuống bằng mô-đun menu toàn chiều rộng Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Nút menu thả xuống có thể rất hữu ích khi thiết kế trang web. Ngoài menu chính, một số khu vực của trang web có thể yêu cầu menu thả xuống của các yếu tố phụ. Chúng tôi thấy rằng chúng được sử dụng cho các mục như danh mục bài đăng trên blog, danh sách và mục nhập mẫu. Nhưng chúng thậm chí có thể được sử dụng cho một 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 mô-đun menu toàn chiều rộng 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 Divi để hiển thị menu này với các kiểu tùy chỉnh bằng cách sử dụng hàm tạo Divi và một số CSS tùy chỉnh. Kết quả là một nút menu thả xuống thuận tiện và thanh lị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

Đối với người mới bắt đầu, nếu bạn chưa làm như vậy, hãy cài đặt và kích hoạt chủ đề Divi đã cài đặt (hoặc trình cắm Divi Builder nếu bạn không sử dụng chủ đề Divi). Chúng tôi sẽ sử dụng hàm tạo Divi ở đầu để thiết kế nút menu thả xuống.

Thế thôi!

Tạo một menu trong WordPress

Trước khi chúng tôi bắt đầu tạo menu thả xuống với Divi Builder, trước tiên chúng tôi phải tạo một menu WordPress mà chúng tôi muốn sử dụng cho mô-đun menu toàn chiều rộng. Để thực hiện việc này, hãy truy cập Bảng điều khiển WordPress và đi đến Giao diện> Menu. 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 các liên kết tùy chỉnh với "#" làm trình giữ chỗ cho URL bằng 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 phụ.

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 front-end (hàm tạo trực quan).

Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Tạo nội dung giả mạo

Đầu tiên, thêm một hàng của 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:

<h1> Menu Doul Deroulant </ h1> <p> Nội dung của bạn ở đây. Chỉnh sửa hoặc xóa văn bản này trong cài đặt Nội dung mô-đun. Bạn cũng có thể định kiểu bất kỳ khía cạnh nào của nội dung này trong mô-đun Cài đặt nâng cao. </ P>

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 toàn chiều rộng. Điều này sẽ cho phép chúng ta 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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Trong cửa sổ bật lên cài đặt menu đầy đủ 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 xem. Đây phải là cùng một menu chúng ta đã tạo trước đây được đặt tên là "menu 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 toàn băng thông, hãy lưu cài đặt. Chúng tôi sẽ trở lại mô-đun này một chút để hoàn thành thiết kế. Nhưng bây giờ, chúng ta sẽ thêm một nền vào phần toàn chiều rộng.

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 tối đa của phần thành 240 px, vì đây là chiều rộng của chiều rộng menu thả xuống mặc định trong Divi. Đó 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, tràn 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. Phần tràn phải được đặt thành hiển thị để chúng ta có thể thấy menu thả xuống. Và chỉ số Z sẽ giúp bạn giữ danh sách thả xuống bên trên bất kỳ nội dung nào 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 Ful thong. Mở cài đặt cho mô-đun menu toàn chiều rộng và cập nhật các thông tin 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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

  • Ký quỹ: -40.5px cao

Như bạn có thể thấy, không gian di chuột chưa chiếm toàn bộ khu vực nút và menu kéo 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).

Không có ID CSS, 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 .and_pb_fullference_menu .full thong-menu-nav> ul {padding-top: 0px! quan trọng; } .dropdown-button .full thong-menu li> a {padding-bottom: 0px; chiều cao dòng: 81px; } .dropdown-button .full thong-menu li li a {padding: 6px 0px; chiều cao dòng: 1.6em; } .dropdown-button .and_mobile_menu li: hover, .nav ul li a: hover, nút .dropdown } .dropdown-button .et_pb_fullference_menu_fullference .et_pb_row {padding: 1 0! quan trọng; } .dropdown-button .full thong-menu li {display: block; } .dropdown-button .full thong-menu .menu-item-has-children> a: First-child: after {right: 0px; }

Đâ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 mô-đun menu toàn chiều rộng của Divi bao gồm một số bước chính. Đầ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. Tiếp theo, chúng tôi sử dụng hàm tạo Divi cho và kiểu mô-đun menu chiều rộng đầy đủ theo sở thích của chúng tôi. Sau đó, chúng tôi thêm CSS tùy chỉnh để điều chỉnh thiết kế trên cả máy tính để bàn và thiết bị di động. Kết quả là một menu thả xuống đẹp (và hữu ích) được đưa ra cho máy tính để bàn và nhấp cho điện thoại di động. Tôi hy vọng bạn sẽ thấy rằng đây là một bổ sung hữu ích cho hộp công cụ thiết kế của bạn.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer