How to Tag The WordPress Menu Widget for Figma to Elementor?

Table of Contents

If you are showing a menu in your site design in Figma, whether it’s horizontal, vertical, or a dropdown, then you can tag those elements as the WordPress Menu widget from Elementor Pro using the UiChemy plugin.

So, when you export the design as an Elementor template, that particular section will use the WordPress Menu widget.

What Can be Tagged?

A frame containing an icon, a title text, a description text, and an icon for the close button can be tagged as a WordPress Menu widget.

How to Tag?

Select the top-level frame of your layout, then select the Optimize option and click the Optimize button.

Now select the frame or container containing the message box in your design and click on the Widget Tags tab in the UiChemy panel.

Then search for the message and click on the WordPress Menu widget from Elementor Pro Widgets.

On the next screen, you’ll get the information on which element you are tagging as what widget.

Then you’ll see widget-specific tagging options.

  1. In the Menu Direction dropdown, you have to select the menu direction.
  2. Once done, click on the Save button to complete the tagging.

uichmey to tag wordpress menu widget

Now, if you export the design, that element will use the WordPress Menu widget from Elementor Pro with your selected texts and style.

Note: When you export a WordPress Menu from Figma to Elementor, the menu style and content will be as per the settings of your website.

uichmey to tag wordpress menu widget demo

Note: Make sure Elementor Pro plugin is installed and activated and the widget is activated as well. You might have to make some minor adjustments in the widget settings to match the design, especially those elements that are not tagged.