URL

The URL option adds a specialized link input field to your custom widget. It provides a structured way for users to add hyperlinks, complete with options for how the link should behave (like opening in a new tab) and SEO attributes.

Why would someone use it in a custom widget? #

Use this control whenever an element in your widget needs to be clickable. This is essential for buttons, image links, text links, or any call-to-action component. It encapsulates best practices for link creation in a single, user-friendly interface.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as a standard Elementor URL field. Users can paste a link, search for existing content on the site, or use dynamic tags to populate it.

Available Settings #

Here are the configurable settings for the URL control:

Basic Settings #

• Label: The name of the control (e.g., “Button Link”, “Read More URL”).
• Name: The unique machine-readable ID (like button_link) for the dynamic shortcode.
• Description: Optional guiding text.
• Placeholder: Example text shown in the empty URL field.
• URL Options: A set of checkboxes to enable advanced link features in the editor:
  • URL Input: The core field for entering the link. This is always enabled.
  • Open in new window: Adds a checkbox to make the link open in a new browser tab.
  • Add nofollow: Adds a checkbox to apply the rel="nofollow" attribute for SEO purposes.
  • Custom Attributes: Adds a field for entering additional HTML attributes (e.g., aria-label="Description").
• Default Value: A default URL to pre-populate the field.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard visibility options.
• Dynamic Support: A powerful feature. When enabled, the URL can be populated dynamically from sources like the current post’s URL, an author’s archive page, or a custom field.
• Frontend Available: When enabled, the link data (URL, target, etc.) is passed to your widget’s JavaScript.
• Separator, Conditions, Control Classes, Selector: Standard advanced options.

Generated Shortcode #

When you add a URL control with the Name cta_link, Widget Builder generates the shortcode: {{cta_link}}.

• What it represents: This shortcode outputs a structured object or a specifically formatted string containing the URL and its related attributes (like target and rel), not just the raw URL.
• Where to use it:Primarily in the HTML Panel within the href attribute of an anchor (<a>) tag.
  • HTML Panel: <a href="{{cta_link}}">Click Here</a>
  • The builder’s logic will correctly insert the URL and any additional attributes (like target="_blank") based on the user’s selections.

How to Use It: A Practical Example #

Let’s create a “Call to Action Button” widget.

1. In Widget Builder’s Content tab, add a URL control.
2. Set the Label to Button Link.
3. In URL Options, enable URL Input, Open in new window, and Add nofollow to give users full control.
4. Set a Default Value like https://yourwebsite.com/learn-more.
5. In your HTML panel, create the button structure:

<a href="{{button_link}}" class="custom-button">
    {{button_text}} <!-- Assuming you have a Text control for the label -->
</a>

Now, in Elementor, users can set the link, choose to open it in a new tab, and apply nofollow—all from the intuitive URL field they already know from other widgets.

Common Use Cases #

• Button & CTA Links: The most frequent use case for any button widget.
• Image & Card Links: Make entire 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 automatically link to the current post, or author bio links.

Helpful Tips #

• Enable Useful Options: For external links, enabling Open in new window and Add nofollow is a common SEO and usability practice. Provide these options to users.
• Leverage Dynamic Tags: The Dynamic Support feature transforms this from a simple field into a powerful connector. Encourage its use for intelligent, context-aware linking.
• It Outputs an Object: Remember, {{your_url}} in an href attribute is handled specially by the builder to include attributes. Don’t try to concatenate it with other strings in the HTML panel.
• For Advanced Use: If you need to use the URL value in your JS Panel (e.g., for tracking), ensure Frontend Available is enabled and consult the specific documentation on how to access the URL object in JavaScript.

The URL control is a fundamental building block for creating interactive, connected widgets that integrate seamlessly with the rest of a website’s content and navigation.