Skip to main content

Divi Mega Menu: Adding Images to Mega Tabs Module

Enhancing the visual appeal of your Mega Menu can significantly improve user engagement on your site. Adding images to the Mega Tabs module within Divi Mega Menu is a straightforward process that can make your menus more interactive and visually appealing. Follow the steps below to incorporate images into your Mega Tabs effectively.

Step 1: Add the Mega Tabs Module​

  1. Navigate to Mega Menu: In your WordPress dashboard, go to the Divi Mega Menu where you wish to add or edit a menu
  2. Incorporate Mega Tabs Module: Within your Mega Menu settings, add the Mega Tabs module to your menu layout. This module allows for the creation of tabbed content, enhancing navigation within your Mega Menu.

Add Mega Tabs

Step 2: Create Tabs​

Define Tabs: Start creating tabs within the Mega Tabs module. Each tab can contain different content, which will be displayed to the right of the tab name when a user hovers over or clicks on the tab, depending on your settings.

Create Tabs

Step 3: Add Images​

  1. Access Tab Extras: To add images to your tabs, navigate to the Content > Tab Extras section within the Mega Tabs settings.
  2. Upload Images: In the Tab Extras section, you can upload and add images that you want to display within your vertical tabs. The sequence in which you add images is crucial for their alignment with the tab content.
    1. Image Order: Be mindful of the order you add your images. The Mega Tabs module aligns images from left to right, corresponding to the tabs from top to bottom. The first image you add will be associated with the first vertical tab, the second image with the second tab, and so on.

Add Images

Additional Information​

  1. Image Size and Quality: Ensure that the images you upload are optimized for web use. They should be of high quality but also compressed to avoid slowing down your site's loading speed.
  2. Consistency: For a cohesive look, try to maintain a consistent style and size for all images used within the tabs. This uniformity can contribute to a more professional and polished appearance.
  3. Testing: After adding images to your tabs, preview your Mega Menu on the front end of your site. It's important to test how the images appear and ensure they are correctly aligned with their respective tabs across different devices and screen sizes.
Last updated on