Time for another Divi 5 freebie! This time around, we’re providing you with 6 Off Canvas Menus, each available in two versions. Default (inherits your global styles) and Prestyled (ready-made look). Import them to your Divi 5 Library, assign them in the Theme Builder, and customize them to your needs.
Preview
Let’s take a look at all 6 Off Canvas Menus in this pack. The download is further down the post.
Get all 6 Off Canvas Menus for free in both Default and Prestyled versions. Each Layout is ready to import into your Divi Library and can be used within your Global Header template.
What’s Included (14 Exports)
After you download and unzip the folder, you’ll find all 14 layout exports neatly organized into Default and Prestyled versions as individual menus and as full “All Menus” packs.
Default – Individual Menus (6) → Uses your global styles.
Default – All Menus (1) → Full pack using your global styles.
Prestyled – Individual Menus (6) → Includes inline styling for an instant, ready-made look.
Prestyled – All Menus (1) → Full pack with inline styling applied.
How To Install The Layouts
Keep your download folder nearby to import the files to your Divi website.
1. Import Layouts Into The Divi Library
Go to Divi → Divi Library.
Click the Import & Export button and select the JSON files you want to install.
For a quick start, look for the Off Canvas Menus (All) file and import it.
2. Create Or Edit Your Global Header
Go to Divi → Theme Builder.
Create a new Global Header template or open an existing one.
Inside the header canvas, click the Add Layout button in the top left and choose Saved Layout .
Select one of the Off Canvas Menu layouts from your Library.
Click Use This Layout to load it, then save your header and Theme Builder changes.
Default vs Prestyled: Which Should You Pick?
When you open the download folder, you’ll see two versions of every menu: Default and Prestyled. The structure is identical; the difference lies in how styling is applied.
Default menus inherit your global styles. Your brand colors, fonts, and button styles are applied automatically. If your variables are set, Default gives you a seamless match with minimal edits.
Prestyled menus include inline styles for colors, fonts, and buttons, so they look exactly like the previews out of the box. Great for demos, rapid prototypes, or when you want the showcased look immediately.
In short, pick Default to blend with your site instantly. Choose Prestyled to get the exact preview design.
These menus utilize Divi 5’s Flexbox controls, Interactions, and responsive settings, allowing you to fine-tune behavior across breakpoints. By default, each of these Off Canvas Header layouts comes with Interactions and Visibility settings in place, so we’ll concentrate on customizing the headers to meet your needs.
When using one of these templates, the first step should be to ensure the correct menu is selected in the Menu module. Start by opening Divi 5’s Layers View.
While in Layers view, any greyed-out module or row has Visibility settings in place. If you need to make changes to one of these areas, click on it, navigate to the Visibility tab, and adjust the settings accordingly. This will make it easy to edit icons, replace images, or make any other design changes you wish.
Expand the Header section and look for the Menu module. In the Content tab, select your menu from the available options.
Once selected, the Menu module will update with the menu items located in the menu.
If you haven’t specified a Logo for your menu, you can expand the Logo menu and either select an image from the Media Library or upload one. In this example, the Logo is in an Image module, set as the Site Logo dynamically.
2. Adjust Styles
For Default menus, your global styles (colors, fonts, and button styles) are automatically applied. When using a prestyled menu, there may be situations where you want to change it to match your brand. Use Divi’s Inspector feature to easily change colors, fonts, and numerical values to match your branding.
You can change the entire look and feel of the Layout with a few clicks.
3. Fine-Tune Responsive Behavior
You can tweak how the menu behaves on different devices. This can be done using Divi’s Customizable Responsive Breakpoints, the Responsive Editor, or at the module level with a quick dropdown menu.
4. Preview And Save Changes.
Once you are satisfied with all adjustments, save the changes to your Global Header by clicking the Save button located at the top right of the Theme Builder.
Exit the Theme Builder and be sure to save the Layout by clicking the Save Changes button.
Try Divi 5’s Interactions Today
These 6 Off Canvas Menus are a fast way to modernize your site’s navigation in Divi 5. Import the JSON files, load a layout in your Global Header, and tailor the behavior with Interactions. These layouts are a great way for you to start getting familiar with Divi 5’s new features as well!
Leave A Reply