URL Control - Elementor Developers

Table of Contents

1 Arguments
2 Return Value
3 Usage

Elementor URL control displays a URL input field with the ability to set the target of the link to _blank to open in a new tab and nofollow attribute.

The control is defined in Control_URL class which extends Control_Base_Multiple class.

Note that when using the control, the type should be set using the \Elementor\Controls_Manager::URL constant.

Arguments

Name	Type	Default	Description
`type`	`string`	url	The type of the control.
`label`	`string`		The label that appears above of the field.
`description`	`string`		The description that appears below the field.
`show_label`	`bool`	true	Whether to display the label.
`label_block`	`bool`	true	Whether to display the label in a separate line.
`separator`	`string`	default	Set the position of the control separator. Available values are `default`, `before`, `after` and `none`. `default` will position the separator depending on the control type. `before` / `after` will position the separator before/after the control. `none` will hide the separator.
`placeholder`	`string`		The field placeholder that appears when the field has no values.
`show_external`	`bool`	true	Whether to show ‘Is External’ button.
`default`	`array`		The field default values. $url (`string`) The URL. $is_external (`bool`) Whether to open the url in the same tab or in a new one. $nofollow (`bool`) Whether to add nofollow attribute.

Return Value

(array) An array containing the link data:

$url (string) The URL.
$is_external (bool) Whether to open the url in the same tab or in a new one.
$nofollow (bool) Whether to add nofollow attribute.

[
	'url' => 'https://your-link.com',
	'is_external' => true,
	'nofollow' => true,
]

Usage

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'website_link',
			[
				'label' => __( 'Link', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::URL,
				'placeholder' => __( 'https://your-link.com', 'plugin-domain' ),
				'show_external' => true,
				'default' => [
					'url' => '',
					'is_external' => true,
					'nofollow' => true,
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$target = $settings['website_link']['is_external'] ? ' target="_blank"' : '';
		$nofollow = $settings['website_link']['nofollow'] ? ' rel="nofollow"' : '';
		echo '<a href="' . $settings['website_link']['url'] . '"' . $target . $nofollow . '> ... </a>';
	}

	protected function _content_template() {
		?>
		<#
		var target = settings.website_link.is_external ? ' target="_blank"' : '';
		var nofollow = settings.website_link.nofollow ? ' rel="nofollow"' : '';
		#>
		<a href="{{ settings.website_link.url }}"{{ target }}{{ nofollow }}> ... </a>
		<?php
	}

}