Table of Contents
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.
|
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
}
}