Skip to main content

Divi Mega Menu: Uploading Free Layouts Guide

Divi Mega Menu offers a variety of free layouts to enhance your website’s navigation with engaging and visually appealing mega menus. This documentation walks you through the process of downloading these free layouts and incorporating them into your Divi site.

Step 1: Download a Layout​

  1. Access Free Layouts: Visit the Divi Mega Menu plugin page. Here, you will find a selection of free layouts tailored for different types of mega menus. Click here to go directly to the layouts section
  2. Download: Scroll through the available layouts and choose one that suits your website’s needs. Click the download link for your selected layout, which will download a zipped folder containing the layout's JSON file.

Step 2: Upload Your Layout​

  1. Navigate to Divi Library: In your WordPress dashboard, go to Divi > Divi Library. The Divi Library is where you can manage all your saved layouts, modules, rows, and sections.
  2. Import Layout: Click on the "Import & Export" button at the top of the page. In the Import tab of the modal that appears, click the “Choose File” button and select the JSON file from the zipped folder you downloaded. Then, click the "Import Divi Builder Layouts" button to start the import process.
  3. Verify Import: After the import completes, you will see the newly added layouts in your Divi Library, identifiable by titles starting with “DMM” - an abbreviation for Divi Mega Menu.

Upload Layout

Step 3: Create A Mega Menu​

  1. Initiate Mega Menu Creation: To utilize your newly imported layout, start by creating a new Mega Menu. Navigate to Divi Engine > Mega Menu in your WordPress dashboard and select "Add New" to create a new mega menu.
  2. Apply Your Layout: While configuring your new Mega Menu, choose to add a layout from the Divi Library. Select one of the imported “DMM” layouts to apply it to your mega menu.
  3. Customize and Save: Customize the layout according to your site’s needs. You can adjust colors, fonts, icons, and other elements to match your website’s design. Once you are satisfied with the customization, save your Mega Menu.

Underline

Additional Information​

  1. Layout Selection: Consider the structure and content of your website when selecting a free layout. Different layouts may cater to different content types and navigation styles.
  2. Testing: After implementing your Mega Menu, thoroughly test it across various devices and browsers to ensure it displays correctly and provides a good user experience.
  3. Documentation Reference: For further customization and features, refer to the rest of the Divi Mega Menu documentation. This will provide you with additional insights and advanced customization options.
Last updated on