Mega menu là một yếu tố thiết kế phổ biến có thể mang lại cho bạn Website một sự bùng nổ của sự sang trọng trong khi cung cấp khách một lớp điều hướng bổ sung. Có một số cách để thêm mega-menu vào Divi. Một trong những phương pháp đơn giản nhất mà tôi đã sử dụng làmột plugin của bên thứ ba có tên Divi Mega Pro .

Divi Mega Pro giúp bạn dễ dàng tạo các menu lớn bằng Divi Builder. Mỗi menu có thể được thêm vào bất kỳ phần tử nào bằng cách sử dụng lớp CSS. Điều này có nghĩa là bạn có thể thêm bố cục Divi vào bất kỳ liên kết nào trong menu, nhưng bạn có thể đi xa hơn và thêm chúng vào bất kỳ thành phần nào của bố cục Divi chỉ bằng cách thêm một lớp CSS.

Nó lý tưởng để tạo menu và cửa sổ bật lên với mô-đun cửa hàng, hình ảnh, thanh trượt, danh mục đầu tư, biểu tượng, blurb, video, blog, v.v. Nó cũng hoạt động với Extra.

Tạo một menu Mega Pro Mega

tạo một menu divi mega với divi mega.png

Menu Divi Mega Pro được thêm vào menu bảng điều khiển. Tại đây, bạn có thể nhập khóa cấp phép của mình, xem các menu bạn đã tạo và tạo menu mới. Khi bạn nhấp để thêm menu mới, bạn sẽ thấy một trình chỉnh sửa cho loại bài đăng trên menu. Màn hình đơn giản, nhưng có rất nhiều thứ đang diễn ra ở đây.

thiết kế menu Mega Pro.png

Nhà phát hành - bạn có thể tạo mega-menu hoặc một chú giải công cụ bằng Divi Builder.

thay đổi nền của mega menu.png

Nền tảng Mega Pro - bạn có thể chọn màu nền và phông chữ.

chọn vị trí của menu.png

Xem địa điểm - chọn tất cả các trang hoặc đặt tên cho các trang cụ thể, sau đó nhập ngoại lệ.

chọn hình ảnh động của menu.png

Hoạt hình Mega Pro - chọn một hình ảnh động. Chọn từ độ lệch, độ lệch, phối cảnh, mờ dần hoặc tỷ lệ.

chọn kích hoạt css.png

Kích hoạt Mega Pro - thêm trình kích hoạt làm bộ chọn CSS. Sau khi lưu nó, bạn sẽ thấy lớp CSS mà bạn sẽ dán vào trường lớp CSS của một mục menu, mô-đun, hàng hoặc phần. Đây là những gì được nhấp hoặc di chuột qua để hiển thị menu. Mọi thứ đều có thể được sử dụng như một trình kích hoạt và không chỉ là một mục menu. Điều này có nghĩa là bạn cũng có thể sử dụng Divi Mega Pro để tạo cửa sổ bật lên hoặc chú giải công cụ.

kiểu cấu hình menu divi.png

Cài đặt màn hình Mega Pro : Chọn hướng hiển thị (lên hoặc xuống), nhập lề trên và dưới theo pixel, chọn phần trăm chiều rộng và kích hoạt một mũi tên. Kích hoạt mũi tên sẽ hiển thị nhiều tùy chỉnh hơn, nơi bạn có thể chọn loại mũi tên (tam giác hoặc tròn), chọn màu, đặt chiều rộng và chiều cao và xem trước mũi tên.

tùy chỉnh các nút divi.png

tùy chỉnh nút đóng: kích hoạt nút đóng trên máy tính để bàn hoặc trên điện thoại di động và tùy chỉnh nút đóng. Nếu bạn bật tính năng này, các tùy chỉnh cho màu văn bản, màu nền, cỡ chữ, bán kính đường viền, tô màu và hiển thị sẽ được xem trước.

cấu hình bổ sung divi mega pro.png

Thông số bổ sung Mega Pro - chọn loại trình kích hoạt (được di chuột qua hoặc được nhấp), loại đầu ra (được di chuột qua hoặc được nhấp) và nhập độ trễ thoát.

Mô hình Divi Mega Pro

các mẫu khác nhau có sẵn divi mega pro.png

Nhà phát triển đã cung cấp một số mô hình cho Divi Mega Pro. Khi bạn mua plugin, các mẫu này có sẵn trong tài khoản của bạn, trong tab Mẫu bố cục plugin. Đây là những điều tuyệt vời để giúp bạn bắt đầu thiết kế các menu lớn của mình. Tôi sẽ sử dụng một vài trong các ví dụ của tôi.

Menu Divi Mega Pro

menu divi mega pro.png

Sau khi bạn tạo một menu lớn, nó sẽ xuất hiện trong danh sách. Tại đây bạn có thể chỉnh sửa, chỉnh sửa hoặc xóa nhanh các menu. Bạn cũng có thể tìm kiếm, lọc theo ngày, xem theo trạng thái, v.v. Nó cũng cung cấp lớp Mega Pro duy nhất để bạn có thể sao chép chúng từ đây thay vì mở từng lớp để lấy lớp.

Khi bạn sao chép lớp, hãy chắc chắn để dán nó mà không có khoảng trắng bổ sung. Nếu không, tất cả các menu lớn trên trang sẽ không hoạt động nữa.

Tôi chắc rằng nó sẽ không dễ dàng để thêm, nhưng một tính năng sao chép và chỉnh sửa sẽ rất hữu ích. Bạn có thể lưu bố cục Divi vào thư viện của mình để sử dụng lại, nhưng điều đó không bao gồm các cài đặt xung quanh.

Thêm một trình kích hoạt

chọn bộ chọn divi.png

Trong trường Mega Pro Trigger, bạn sẽ thấy một lớp Mega Pro duy nhất. Sao chép và dán nó vào trường Lớp CSS của phần tử bạn muốn sử dụng làm trình kích hoạt.

lớp css.jpg

Để thêm trường Lớp CSS vào một mục menu, bạn phải bật các lớp CSS. Từ màn hình menu, chọn Tùy chọn màn hình và kích hoạt các lớp CSS.

thêm một menu css lớp divi.png

Dán lớp CSS vào trường menu. Bây giờ mục menu này sẽ hiển thị menu lớn khi di chuột và đưa bạn đến trang khi nhấp chuột.

thiết kế menu divi mega pro.png

Bạn sẽ nhận thấy rằng Divi Mega Pro cũng là một tùy chọn trong các tùy chọn liên kết menu. Chúng rất tốt để thêm một mục menu vào menu mà thực sự không đi đến đâu. Thêm lớp CSS giống như bất kỳ mục menu nào khác.

Phần liên hệ trên menu mega

phần liên hệ menu lớn pro.png

Menu sẽ mở khi di chuột. Tôi luôn có thể nhấp vào liên kết Liên hệ để mở trang liên hệ nếu tôi muốn. Nếu tôi chỉ muốn menu lớn hiển thị, tôi chỉ có thể sử dụng liên kết menu chính Liên hệ và đổi tên nó (như trong ví dụ ở trên).

Trong phần này, tôi đã thay đổi màu sắc một chút bằng cách sử dụng cài đặt nền và hiển thị thay vì sử dụng Divi Builder. Nó thêm một thanh ở cuối menu.

Lời gọi hành động đơn giản với các cột menu

phần liên hệ thiết kế divi mega pro.png

Đây là một trong những mô hình thêm nhiều cột. Tôi điều chỉnh màu nền và phông chữ. Tôi cũng đã thêm một mũi tên và làm cho chiều rộng 75%.

thay đổi màu nền divi mega pro.png

Tùy chọn màu nền và phông chữ thêm một chút nữa để làm cho nó nổi bật. Tôi để căn chỉnh mặc định, đặt menu ở bên phải màn hình. Bạn có thể điều chỉnh vị trí trong cài đặt.

tab

thiết kế menu với các tab menu lớn divi.png

Mẫu tab bao gồm một mô-đun mã với jQuery để tạo hiệu ứng di chuột.

menu demo với tab divi mega pro.png

Tôi đã thêm nội dung vào các tab và điều chỉnh chúng cho phù hợp với trang web. Mỗi liên kết ở bên trái hiển thị một tab khác nhau trong hầu hết menu.

Cấu hình bong bóng thông tin

bản giới thiệu infobulles divi.png

Đối với cái này, tôi đã thêm lớp CSS vào một số blurb để nó mở một cửa sổ bật lên nhỏ khi di chuột. Cửa sổ bật lên chỉ là một hình ảnh với bóng bên dưới.

Trong hình trên, con chuột của tôi đang di chuột qua dòng chữ WEBSITE TRỰC TIẾP. Tôi chưa điều chỉnh vị trí, nhưng thật dễ dàng để làm cho nó xuất hiện ở bất kỳ đâu bạn muốn.

thông tin thiết kế bull divi mega pro.png

Đối với cái này, tôi đã tạo một cửa sổ bật lên để hiển thị một hình ảnh với một số văn bản. Tôi đã đặt hướng hiển thị thành Thấp và để làm cho nó xuất hiện bên cạnh hình ảnh tôi muốn thêm vào, tôi đã thêm biên độ -300.

thông tin kết quả bong bóng divi.png

Cửa sổ bật lên hiện xuất hiện ở bên trái và trên cùng của hình ảnh khi tôi di chuột qua nó. Tôi đã thêm màu nền trong suốt, màu đường viền, màu tô và đường viền tròn.

Giấy phép và tài liệu

giấy phép và trình diễn.png

Bạn có thể lựa chọn giữa bốn giấy phép:

  • Trang web đơn - $ 15 mỗi năm
  • Ba trang web - $ 29 mỗi năm
  • Trang web không giới hạn - $ 59 mỗi năm
  • Thời gian tồn tại không giới hạn - 129 đô la một lần

Tài liệu được cung cấp bởi một trình diễn video và một bài viết trên trang web giải thích các tính năng và giải thích, từng bước, cách sử dụng plugin.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Hướng dẫn Divi khác