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
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.
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.
Nền tảng Mega Pro - bạn có thể chọn màu nền và phông chữ.
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ệ.
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ệ.
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ụ.
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 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.
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
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
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
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.
Để 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.
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.
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
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
Đâ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%.
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
Mẫu tab bao gồm một mô-đun mã với jQuery để tạo hiệu ứng di chuột.
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
Đố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.
Đố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.
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
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
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin
Xin chào:
Tôi có thể thấy cửa sổ bật lên được tạo ở đâu?
Tôi không có cách nào để lấy nó. Tôi chỉ có thể tạo một menu lớn, nhưng các cửa sổ bật lên tôi đã liên kết không mở được.
Tôi đã xem qua một vài email với Divi Life nhưng chúng không làm rõ điều gì với tôi.
Merci beaucoup.
Quái vật Optin: https://optinmonster.com