ConvertedU Marketing Library Webinar Blog

Need help? You've come to the right place

What's New Getting Started Drag and Drop Standard Builder Integrations

How do I add a Leadbox to the WordPress Navigation Bar?

These instructions are based on the Twenty Fourteen theme and WordPress version 4.0. The images may look different in future versions of WordPress or with other themes, and the Leadbox may open in a new window rather than as an overlay.

Step by step guide:

Step 1: Create your Leadbox.

Once your Leadbox is set up the way you want it, save it, then click Publish to get the code.

Step 2: Grab your Leadbox code.

Copy your Leadbox code to a text editor so you can easily grab the URL from the block of code. 

Step 3: Edit your WordPress menu.

Inside your WordPress Dashboard, go to Appearance  Menus.

Edit your WordPress menu

Step 4: Select your Menu.

If you don't already have a navigation menu set up, create one. For the purposes of this tutorial, we are going to use the Main Menu, which already exists.

Select your Menu

Step 5: Get your URL from the Leadbox code.

In your text editor, copy the URL for your Leadbox. Do not copy all the code, just the URL as shown here.

Get your URL from the Leadbox Code

Step 6: Create your link.

6a. Add a Custom Link to your Menu and paste the URL from the previous step into the URL field. 

6b. Give your new link a name and click “Add to Menu.”

6c. Then click “Save Menu.”

Create Your Link
Step 7: Include the rest of your code to take care of the overlay effect.

As you may have noticed, we didn’t include the entire embed code in the Navigation Menu. Here's what you can do instead:

7a. Create a text widget.

Create a text widget

7b. Copy this bit of your Leadbox embed code:

You will need the bit there that starts with <script... and ends with </script>.

7c. Paste it in your new text widget and save it in one of your widget areas.

You do not need to add a Title to the widget, otherwise that title will show up in your widget area. 

Step 8: Check out your new navigation bar.

You now see the custom link you created in the WordPress navigation bar.

Your New Navigation Bar

When your new custom link is clicked, it opens your Leadbox.


How it looks


(Updated 07/05/16)

Please let us know if you have additional questions.

You can always file a support ticket if you have additional questions by clicking the Support button in your dashboard shown here or clicking here to file a support ticket.

You may also be interested in:

What are Leadboxes and How Do They Work

How Do I Use a Leadbox With an Image

Was this article helpful?
Powered by Zendesk