{"id":85066,"date":"2023-04-04T10:45:40","date_gmt":"2023-04-04T10:45:40","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=85066"},"modified":"2025-12-28T06:30:58","modified_gmt":"2025-12-28T04:30:58","slug":"new-mega-menu-loop-alternate-template-and-more","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/new-mega-menu-loop-alternate-template-and-more\/","title":{"rendered":"Introducing Elementor 3.12 – Design Beautiful and Sophisticated Mega Menus"},"content":{"rendered":"\n

Elementor 3.12 includes a number of exciting features, including a new Menu widget, which will empower you to visually create sophisticated Mega Menus in Elementor. This version also includes a new feature that empowers you to further customize your website listings and create an alternate template<\/a> in the Loop Grid widget. Lastly, this version also broadens existing capabilities and provides you with additional design, and customization options. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

[Pro] Introducing the Mega Menu in Elementor With the New Menu Widget<\/h2>\n\n\n\n

This version introduces one of the most requested features \u2013 the Mega Menu, available with the new Menu widget. Using the new Menu widget, you can create an expandable menu that allows you to display more content. This improves the visitor experience by making it easier for site visitors to find certain categories and subcategories, and enables you to create website designs that are unique and stand out. To use the new menu widget, be sure to enable the Menu, Flexbox Containers, and Nested Elements features by going to your WordPress Dashboard \u2192 Elementor \u2192 Features.<\/p>\n\n\n\n

Setting up Your Website\u2019s Navigation<\/h3>\n\n\n\n

With the new Menu widget, you can create as many menu items as you\u2019d like, from scratch – without having to necessarily create any menus in the WordPress Menus screen. Each menu item can be linked to any page, giving you more flexibility to structure your website\u2019s navigation. For best-practice navigation, it is recommended that you use the dynamic Internal URL<\/a> tag to ensure your menu items always link to the page you intended. <\/p>\n\n\n\n

For each menu item, you can decide if the menu item includes dropdown content where you can add subcategories, or not, and choose an icon for the dropdown indicator. If you choose to add dropdown content, you can set a dropdown effect to set the menu item to open upon hover or click, and choose if you want the dropdown content to fade in with an animation effect. <\/p>\n\n\n\n

Create a Mega Menu with Dropdown Content<\/h3>\n\n\n\n

By enabling the Dropdown content, per menu item, and leveraging the power of Containers and Nested Elements, you can create beautiful and sophisticated Mega Menus. When you enable the dropdown content on a menu item, a new container will be added to the menu item, where you can drag in any widget, style the content area and design any layout you want, leading to a better visitor experience, and improving their engagement. Learn how to create a Mega Menu here<\/a>.<\/p>\n\n\n\n

Responsive Settings<\/h2>\n\n\n\n

To adjust the visitor experience to each device, you can choose the breakpoint at which the menu becomes a toggle menu, and adjust the way dropdown content areas are designed to match the screen they are being viewed on. <\/p>\n\n\n\n

Please Note:<\/strong> As part of this update, the Nav Menu widget has been renamed WordPress Menu, and you can still use it anytime, even within your Menu widget to create Menus based on the Menus screen in WordPress. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

[Pro] Diversify Your Design with a Loop Alternate Template<\/strong><\/h2>\n\n\n\n

Loop Alternate Template, a new feature in the Loop Grid widget, allows you to achieve a higher level of design flexibility by applying a different template on specific items within a loop grid. <\/p>\n\n\n\n

Add an Alternate Template To Make Items Stand Out<\/h3>\n\n\n\n

To add another template in your loop grid, switch the \u2018Apply an alternate template\u2019 toggle on. Clicking Create a Template will take you to the Theme Builder<\/a>, where you can design a new Loop Item, alternatively, you can choose any of the Loop Item Templates you\u2019ve previously created as your alternate template. You can create up to 20 different templates for each Loop Grid on your website. <\/p>\n\n\n\n

Once you\u2019ve chosen the template you want to use, you can determine what item position in the grid you want it to apply to, and whether you want it to repeat or not. For example, you can apply an alternate template to the item in the 2nd position in the grid, and then determine whether you only want it to appear on the 2nd item, or repeat on every 2nd item. <\/p>\n\n\n\n

Please Note: <\/strong>As part of this version, applying an alternate template overrides the design of specific items in your loop grid, based on the query you selected for the entire grid. It is not possible to inject an item that\u2019s external to the query yet.<\/p>\n\n\n\n

Take Up More Space with Column Span<\/h3>\n\n\n\n

Set a column span to the alternate template to make specific loop items stand out even more. This will enable you to design a template that takes up more space within your loop grid. For example, if you have a loop grid with 3 columns, you can make an alternate template that covers 2 columns. This means that if you apply the alternate template to the 2nd item and set it to span 2 columns, the 2nd item will take up 2 columns in the first row.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

[Pro] Kickstart your Workflow with Predesigned Loop Templates<\/strong><\/h2>\n\n\n\n

Accelerate your workflow and get inspired by 10 new loop templates available in the library. This version includes 6 templates for posts, and 4 for WooCommerce<\/a> products. You can find the templates by clicking the template library icon in the canvas when you create a new loop template. The template library will show you posts or products templates based on the \u2018template type\u2019 you choose in the content tab of the loop grid.<\/p>\n\n\n\n

Once you\u2019ve chosen the template you want to use, you can customize it further and choose the content and query that you want to display. <\/p>\n\n\n\n

Please note<\/strong>: Loop Templates are container-based and are only available to websites that have Containers enabled on them. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Elementor Interface Revamp<\/strong><\/h2>\n\n\n\n

Elementor has been around for nearly 7 years, which is also when the Editor\u2019s interface was first designed. Over the years, countless new features and widgets have been added, making it important for Elementor to make changes to the User Interface (UI) and User Experience (UX), to facilitate future product growth. <\/p>\n\n\n\n

Over the upcoming releases, Elementor’s interface will undergo a gradual revamp, that will be built in REACT. The changes to the interface encourage best practices in website creation with Elementor, enhance accessibility, streamline workflows, and enable the introduction of new features in the future.<\/p>\n\n\n\n

A New color scheme for Elementor <\/strong><\/h3>\n\n\n\n

In Elementor 3.12, the Editor’s interface has undergone its first update to align with the new color scheme<\/a>. As part of this update, the colors in the Editor have been simplified. The new colors are optimized for Dark and Light mode, have better accessibility, and allow you to focus on your website\u2019s content, without affecting any of the product’s functionalities.<\/p>\n\n\n\n

Experiment: New Top Bar<\/strong><\/h3>\n\n\n\n

In Elementor 3.12,  the new Top Bar is introduced as an experiment that you can enable (from WordPress Dashboard \u2192 Elementor \u2192 Features). This version showcases the initial stage of the new Top Bar in the Editor, which has been built using REACT to enhance performance and enable future capabilities. The Top Bar brings together all the essential actions required for website creation in a centralized, and easily accessible location.<\/p>\n\n\n\n

As part of this version, the Top Bar includes the following items and capabilities: <\/p>\n\n\n\n