Do you want to add a call to action button to the navigation header menu in Elementor? A CTA button in the header gives visitors a clear next step on every page, making it more likely they convert.
What It Does
The Header Meta Content widget in The Plus Addons for Elementor lets you add a call to action button to the navigation header menu directly in the Elementor editor, with no separate button widget or custom code needed.
To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, click here.
Why It Matters
A CTA button placed in a nav menu item can get lost among the other links, and a separate button widget in the header takes up its own space in the layout. Placing the button inside the same Header Meta Content widget that already holds the search icon, cart, or language switcher keeps the whole header meta row consistent and gives the CTA equal visual weight to the rest of the header on every page.
What You Get
- Up to two independent call-to-action buttons (Call to Action 1 and Call to Action 2) inside one Header Meta Content item
- Full control over button text, destination link, icon or custom image, icon spacing and size
- Per-device visibility so the CTA can be shown or hidden on desktop, tablet, or mobile independently
Benefits
- SaaS and software sites where a “Start Free Trial” or “Get Demo” button drives sign-ups from every page
- eCommerce and WooCommerce stores where a persistent “Shop Now” button keeps conversion visible sitewide
- Service business sites where a “Book a Call” CTA in the header generates consistent lead inquiries
Capabilities
- Select Options dropdown in the Meta Content repeater assigns a Call to Action slot to any header meta item
- Display Call To Action toggle per slot, with dedicated Button Text, Link, Icon Font, Icon Spacing, Icon Size, and Button ID fields
- A second, fully independent Call to Action 2 slot for a two-button header
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
How It Works
Each item in the Header Meta Content repeater renders whatever you assign it from the Select Options dropdown. Assigning Call to Action 1 (or 2) to an item turns that item into a styled button once its own Display Call To Action toggle is enabled in the matching tab, independent of the search, cart, or language switcher items sitting next to it in the same header row.
How to Use It
To do this, add the Header Meta Content widget to the header template and follow the steps –
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. In the Meta Content tab, open the item and select Call to Action 1 from the Select Options dropdown. Adjust the icon spacing from the Icon Left Space and Icon Right Space sections. From the Responsive Device section, control the visibility of the button on different devices.
2. Go to the Call To Action 1 tab and enable the Display Call To Action toggle.
Also Read: how to change button text on hover in Elementor.
In the Button Text field, add the label for the CTA button. In the Link field, add the destination URL. From the Icon Font dropdown, add an icon or custom image to the button, or remove them if not needed. Use the Icon Spacing and Icon Size sliders to adjust the spacing and size of the icon. In the Button ID field, add an ID to target the button with custom JavaScript or CSS.
Note: With the Call to Action 2 option you can add a second call to action button as well.
The call to action button will now appear in the header on every page of the site.
Use Cases
- SaaS and software sites where a “Start Free Trial” or “Get Demo” button drives sign-ups from every page
- eCommerce and WooCommerce stores where a persistent “Shop Now” button keeps conversion visible sitewide
- Service business sites where a “Book a Call” CTA in the header generates consistent lead inquiries
Limitations
- Each Header Meta Content item can only carry one role at a time, a CTA slot and, say, the search bar cannot share the same item; each button needs its own item in the repeater
- Only two Call to Action slots exist per widget instance (Call to Action 1 and 2); a third button needs a second Header Meta Content widget or an Elementor button widget placed separately
- Icon Spacing and Responsive Device visibility are set per item, so a CTA shown on desktop but hidden on mobile needs its own visibility rule checked after every header layout change
Troubleshooting
- CTA button not appearing after enabling Display Call To Action – confirm the Meta Content repeater item is actually set to Call to Action 1 (or 2) in Select Options; a mismatched item selection is the most common reason the toggle appears on but nothing renders.
- Button text changes on hover looking off – if a hover text-swap effect was added separately, verify it targets the correct Button ID set in this widget rather than a generic button class that could also match other buttons on the page.
- Button visible on desktop but missing on mobile – check the Responsive Device section on the item; it is a common point where a device was unintentionally excluded when the header was last edited.
Also, read how to add Elementor menu toggle button in header.
