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

All video Lessons.

You can add the Hyperlink Element from the Quick Access Panel by selecting the Button -> Hyperlink or pressing Alt+H.

add-hyperlink.png

You can add the premade Hyperlink presets to a Block. Use the Button Presets from Quick Access -> Add Panel -> Button -> Hyperlink.

hyperlink-presets.png

You can set the destination link for a Hyperlink by clicking the Link icon on the Context Panel, which opens 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 and Hyperlink Elements.

on-click-button-toolbar.png

Link-To Property

You can also specify the On-Click property in the Property Panel to improve the usability of the Button and Hyperlink Elements' linking.

link-to-property.gif

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

You can modify the Hyperlink Text Color for the three Hyperlink States: Default (Color), Hover, and Active.

hyperlink-states.png

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.

In the Property Panel, you can specify the Width and Height by entering the values. 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 a 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

The Hyperlink Element does not need 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, Underlined, or Uppercase. Select the Color of the text, 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

You can add and modify the Hyperlink's Icon in the Icon section of the Property Panel.

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

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! ### <iframe style="width: 96%; aspect-ratio: 16 / 9;" 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> ### [All 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! ## Link Hyperlink You can set the destination link for a Hyperlink by clicking the Link icon on the Context Panel, which opens 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! ### Link-To Property You can also specify the On-Click property in the Property Panel to improve the usability of the [Button](page:243504) and Hyperlink Elements' linking. !link-to-property.gif! ### 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. In the Property Panel, you can specify the Width and Height by entering the values. 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 a 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 The Hyperlink Element does not need 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, Underlined, or Uppercase. Select the Color of the text, 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. !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! ##