URL

The URL control adds a dedicated link input field to your widget, giving users a familiar and structured way to add hyperlinks — including options to open links in a new tab, apply SEO attributes, and even populate the URL dynamically.

Why Use This Control? #

Use this control whenever any element in your widget needs to be clickable — buttons, image links, banners, cards, or any call-to-action. It bundles all best practices for link creation into a single, user-friendly interface that your users already know from native Elementor widgets.

Where It Appears #

• In Widget Builder — Add it from the Content tab of the control panel.
• In the Elementor Editor — Renders as a standard Elementor URL field where users can paste a link, search for existing site content, or connect a dynamic tag.

Available Settings #

Basic Settings #

Setting	Description
Label	Display name shown in the editor (e.g., Button Link, Read More URL)
Name	Unique machine-readable ID used in the shortcode (e.g., button_link)
Description	Optional helper text shown below the field
Placeholder	Example text shown when the field is empty
Default Value	A pre-populated URL when the widget is first added

URL Options #

These checkboxes control which link features are exposed to the user in the editor:

• URL Input — The core link field. Always enabled.
• Open in new window — Adds a toggle to open the link in a new browser tab (target="_blank").
• Add nofollow — Adds a toggle to apply rel="nofollow" for SEO purposes.
• Custom Attributes — Exposes a field for additional HTML attributes (e.g., aria-label="Learn more").

Advanced Settings #

• Show Label / Label Block / Responsive Control — Standard visibility and layout options.
• Dynamic Support — Allows the URL to be populated from dynamic sources like the current post URL, author archive, or a custom field.
• Frontend Available — Passes the full URL data (including target, rel, etc.) to your widget’s JavaScript.
• Separator / Conditions / Control Classes / Selector — Standard advanced control options.

Generated Shortcode #

When you add a URL control with the Name set to button_link, the builder generates the shortcode:

text{{button_link}}

⚠️ Important: This shortcode does not output a plain URL string. It returns a structured array containing the URL and its related attributes (url, is_external, nofollow). This is why it must be used correctly in your HTML panel — see below.

How to Use It in the HTML Panel #

Because {{button_link}} returns an array, you cannot drop it directly into an href attribute like a plain string. The builder provides a special syntax to access the URL value correctly.

✅ Correct usage:

<a href="<?php echo esc_url( $button_link['url'] ); ?>"
   class="hero-btn">
  {{button_text}}
</a>

To also handle “open in new tab” and “nofollow” properly:

<?php
$target   = $button_link['is_external'] ? ' target="_blank"' : '';
$nofollow = $button_link['nofollow']    ? ' rel="nofollow"'  : '';
?>

<a href="<?php echo esc_url( $button_link['url'] ); ?>"
   class="hero-btn"
   <?php echo $target; ?>
   <?php echo $nofollow; ?>>
  {{button_text}}
</a>

❌ Incorrect usage — this will cause an “Array to string conversion” error:

<a href="{{button_link}}">Click Here</a>

Practical Example: CTA Button Widget #

1. In the Content tab, add a URL control.
2. Set Label to Button Link and Name to button_link.
3. Under URL Options, enable Open in new window and Add nofollow.
4. Set a Default Value like https://yourwebsite.com/learn-more.
5. In your HTML panel, use the correct markup:

<?php
$target   = $button_link['is_external'] ? ' target="_blank"' : '';
$nofollow = $button_link['nofollow']    ? ' rel="nofollow"'  : '';
?>

<a href="<?php echo esc_url( $button_link['url'] ); ?>"
   class="custom-button"
   <?php echo $target; ?>
   <?php echo $nofollow; ?>>
  {{button_text}}
</a>

Common Use Cases #

• Button & CTA Links — The most frequent use case; any clickable button in a widget.
• Image & Card Links — Make entire image cards or banners clickable.
• Navigation Elements — Build custom menu items or breadcrumb links.
• Dynamic Linking — Use with Dynamic Support to create “Read More” buttons that auto-link to the current post, or author bio links.

Tips & Best Practices #

• Always use $button_link['url'] — Never echo {{button_link}} directly into an href. Always access the url key from the returned array.
• Sanitize with esc_url() — Always wrap the URL output with esc_url() to prevent XSS vulnerabilities.
• Enable useful options — For external links, enabling Open in new window and Add nofollow is standard SEO and usability practice.
• Leverage Dynamic Tags — Dynamic Support transforms this from a static field into a powerful context-aware connector. Encourage its use for post links, archive links, and custom fields.
• For JavaScript access — If you need the URL value in the JS Panel (e.g., for click tracking), enable Frontend Available so the full link object is passed to your widget’s JavaScript.