Like a Button, the Hyperlink is the essential call-to-action Element used to transfer visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post. Generally, it is the Button Style Type.
You can add the Hyperlink Element from the Quick Access Panel by selecting the Button -> Hyperlink or pressing Alt+H.
Hyperlink Presets
You can add the premade Hyperlink presets to a Block. Use the Button Presets from Quick Access -> Add Panel -> Button -> Hyperlink.
Convert Hyperlink To Button
You can easily convert a Hyperlink into a Button and vice versa by clicking the Quick Presets in the Property Panel.
You can also make a Button from a Hyperlink by adding the Background and Border properties or changing the Button Styles in the Property Panel.
You can also use the Button element, and its presets from the Add Panel -> Button section.
Link Hyperlink
You can set the destination link for a Hyperlink by clicking the Link icon on the Context Panel to open the Link Settings dialog.
Open the Link Settings dialog from the Property Panel -> Hyperlink section.
On-Click Link Setting
You can set the On-Click parameter in the Options on the Context Toolbar for the Button and Hyperlink Elements.
On-Click Link Property
You can also specify the On-Click property to the Property Panel to improve the linking usability for the Button and Hyperlink Elements.
Link Settings
You can link a Hyperlink to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, and Post.
Page Search in Link Settings
You can search Pages in the Link Settings dialog.
No Follow Link Settings
You check the No Follow checkbox in the Link Settings. The "nofollow" parameter tells the search engines that a link should not be counted in SEO.
Copy And BCC For Email Option
You can also enter values into the Copy and BCC fields for the Email option.
Hyperlink States
You can modify the Hyperlink Text Color for the three Hyperlink States: Default (Color), Hover, and Active.
Edit Hyperlink Properties
You can stylize the Hyperlink by editing the Properties in the Property Panel.
Hyperlink Resize And Position
You can manually resize and move the Hyperlink Element in the Editor by dragging the markers or the Element.
By entering the values, you can specify the Width and Height in the Property Panel. To change the Hyperlink size, enter the Left, Right, Top, and Bottom Padding values.
Hyperlink Styles
You can pick two of the five styles to convert a Button into the Hyperlink Element.
Hyperlink Underline
You can add the Underline to your Hyperlink Element and change its Color, Width, and Type for all states: Color, Hover, and Pressed. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states.
No Color Option
For the Hyperlink Element, there is no need to have a background color, so the No Color option in the Color Picker is set by default.
Hyperlink Text Style
Customize the text of the Hyperlink Element. Select the Font, and make the text Bold, Italic, Underline, or Uppercase. Select the Color of the text Color, Hover, and Pressed Colors. Adjust the Letter Spacing.
Hyperlink Line-Height
You can set the Line Height property for the Hyperlink Element in the Property Panel.
Hyperlink Icon
You can add and modify the Hyperlink's Icon in the Icon section of the Property Panel. However, the Icon willHyperlinkarate element in the case of Hyperlink.
You can also quickly use the Hyperlink With Icon Presets in the Add Panel.
Responsive Modes
You can convert the Hyperlink Element Size and Position for all supported Mobile Devices.
## Summary
- Overview
- Video Lesson
- Add Hyperlink
- Hyperlink Presets
- Convert Hyperlink To Button
- Link Hyperlink
- Hyperlink States
- Edit Hyperlink Properties
- Hyperlink Icon
- Responsive Modes
## Overview
Like a Button, the Hyperlink is the essential call-to-action Element used to transfer visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post. Generally, it is the Button Style Type.
!hyperlink.png!
## Video Lesson
##
<iframe width="600" height="340" src="https://www.youtube.com/embed/GH8Dxo6H4T4" title="Video Lesson: Hyperlink Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### See Also
[More video lessons](page:1318)
## Add Hyperlink
You can add the Hyperlink Element from the Quick Access Panel by selecting the Button -> Hyperlink or pressing Alt+H.
!add-hyperlink.png!
## Hyperlink Presets
You can add the premade Hyperlink presets to a Block. Use the Button Presets from **Quick Access -> Add Panel -> Button -> Hyperlink**.
!hyperlink-presets.png!
## Convert Hyperlink To Button
You can easily convert a Hyperlink into a Button and vice versa by clicking the Quick Presets in the Property Panel.
!convert-hyperlink-button.png!
You can also make a Button from a Hyperlink by adding the Background and Border properties or changing the Button Styles in the Property Panel.
!hyperlink-button-properties.png!
You can also use the Button element, and its presets from the *Add Panel -> Button section*.
## Link Hyperlink
You can set the destination link for a Hyperlink by clicking the Link icon on the Context Panel to open the Link Settings dialog.
!link-hyperlink.png!
Open the Link Settings dialog from the Property Panel -> Hyperlink section.
!link-hyperlink-property.png!
### On-Click Link Setting
You can set the On-Click parameter in the Options on the Context Toolbar for the [Button](page:243504) and Hyperlink Elements.
!on-click-button-toolbar.png!
### On-Click Link Property
You can also specify the On-Click property to the Property Panel to improve the linking usability for the [Button](page:243504) and Hyperlink Elements.
!on-click-property.png!
### Link Settings
You can link a Hyperlink to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, and Post.
!link-settings.png!
### Page Search in Link Settings
You can search Pages in the Link Settings dialog.
!page-search-edit-link.png!
### No Follow Link Settings
You check the No Follow checkbox in the Link Settings. The "nofollow" parameter tells the search engines that a link should not be counted in SEO.
!no-follow-link-settings.png!
### Copy And BCC For Email Option
You can also enter values into the Copy and BCC fields for the Email option.
!copy-bcc-edit-link.png!
## Hyperlink States
You can modify the Hyperlink Text Color for the three Hyperlink States: Default (Color), Hover, and Active.
!hyperlink-states.png!
## Edit Hyperlink Properties
You can stylize the Hyperlink by editing the Properties in the Property Panel.
### Hyperlink Resize And Position
You can manually resize and move the Hyperlink Element in the Editor by dragging the markers or the Element.
By entering the values, you can specify the Width and Height in the Property Panel. To change the Hyperlink size, enter the Left, Right, Top, and Bottom Padding values.
!hyperlink-resize-position.png!
### Hyperlink Styles
You can pick two of the five styles to convert a Button into the Hyperlink Element.
!hyperlink-styles.png!
### Hyperlink Underline
You can add the Underline to your Hyperlink Element and change its Color, Width, and Type for all states: Color, Hover, and Pressed. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states.
!hyperlink-underline.png!
### No Color Option
For the Hyperlink Element, there is no need to have a background color, so the No Color option in the Color Picker is set by default.
!no-color-option-hyperlink.png!
### Hyperlink Text Style
Customize the text of the Hyperlink Element. Select the Font, and make the text Bold, Italic, Underline, or Uppercase. Select the Color of the text Color, Hover, and Pressed Colors. Adjust the Letter Spacing.
!hyperlink-font.png!
### Hyperlink Line-Height
You can set the Line Height property for the Hyperlink Element in the Property Panel.
!line-height-hyperlink.png!
## Hyperlink Icon
You can add and modify the Hyperlink's Icon in the Icon section of the Property Panel. However, the Icon willHyperlinkarate element in the case of Hyperlink.
!hyperlink-icon.png!
You can also quickly use the Hyperlink With Icon Presets in the Add Panel.
## Responsive Modes
You can convert the Hyperlink Element Size and Position for all supported Mobile Devices.
!hyperlink-mobile-views.png!
##
