Summary

  • Overview
  • Video Lesson
  • Add Button
  • Button Presets
  • Convert Button To Hyperlink
  • Link Button
    • On-Click Link Setting
    • On-Click Link Property
  • Button Link Settings
  • Button States
  • Edit Button Properties
    • Button Resize And Position
    • Button Styles
    • Button Background
    • Button Border
    • No Color Option
    • Button Radius
    • Button Text Style
    • Button Shadow
  • Button Icon
  • Link Settings
  • Button In Mobile Views

Overview

The Button is the essential call-to-action Element that takes your site visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post by clicking on it.

button.png

Video Lesson

Add Button

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

add-button.png

Button Presets

To add a button to your web page, you can use the Button Presets from the Quick Access -> Add Panel -> Button.

button-presets.png

Convert Button To Hyperlink

You can quickly convert a Button to a Hyperlink and vice versa by clicking the Quick Presets in the Property Panel.

convert-button-hyperlink.png

You can also convert a Button to a Hyperlink by removing the Fill and Border.

button-property-panel.png

You can also add the Hyperlink element and use its presets in the Add Panel -> Button section.

Link Button

You can set the destination link for a Button by clicking the Link icon on the Context Panel to open the Link Settings dialog.

link-button.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

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.

on-click-property.png

Button Link Settings

You can link a Button to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, and Post.

NOTE: Use the Wed Address option to paste the web page's full URL copied from the browser address bar.

link-settings.png

Button States

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

button-states.png

Edit Button Properties

You can stylize the Button by editing the Properties in the Property Panel.

Button Resize And Position

You can manually resize and move the Button Element in the Editor by dragging the markers or the Element.

move-resize-button.gif

By entering the values, you can specify the Width and Height in the Property Panel. To change the Button size, you can also enter the Left and Right, and Top and Bottom Padding values.

button-size-position.png

Button Styles

You can pick one of the five styles for your Button Element.

button-styles.png

Button Background

You can customize the Background of your Button Element by setting Сolor, Hover, and Pressed Colors. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states.

button-background.png

Button Border

Similarly, you can add the Border to your Button Element, then change its Color and Width 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.

button-border.gif

No Color Option

You can set the No Color option in the Color Picker. Also, now you can remove the Color in the Context Toolbar and the Property Panel for a Button.

no-color-option-button.png

Button Radius

Change the corner sharpness of the Button Element using the Radius property.

button-radius.gif

Button Text Style

Customize the text of the Button 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.

button-text-style.png

Button Shadow

Enable the Shadow by checking the Shadow checkbox in the Property Panel for the selected Button Element. You can choose the Shadow Preset or switch the Settings Tab to adjust the Shadow manually.

button-shadow.png

Button Icon

You can add a Button with an Icon by choosing the Style in the Property Panel. You can also add and modify the Button's Icon in the Icon section of the Property Panel.

button-icon.png

You can also quickly use the Button With Icon Presets in the Add Panel.

Button In Mobile Views

You can modify the Button Element size and position for all available Mobile Views.

button-mobile-views.png

## Summary - Overview - Video Lesson - Add Button - Button Presets - Convert Button To Hyperlink - Link Button - On-Click Link Setting - On-Click Link Property - Button Link Settings - Button States - Edit Button Properties - Button Resize And Position - Button Styles - Button Background - Button Border - No Color Option - Button Radius - Button Text Style - Button Shadow - Button Icon - Link Settings - Button In Mobile Views ## Overview The Button is the essential call-to-action Element that takes your site visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post by clicking on it. !button.png! ## Video Lesson ## <iframe width="600" height="340" src="https://www.youtube.com/embed/tJziN4jH-vs" title="Video Lesson: Button Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Add Button You can add the Button Element from the Quick Access Panel by selecting the Button -> Button or pressing **Alt+B**. !add-button.png! ## Button Presets To add a button to your web page, you can use the Button Presets from the Quick Access -> Add Panel -> Button. !button-presets.png! ## Convert Button To Hyperlink You can quickly convert a Button to a Hyperlink and vice versa by clicking the Quick Presets in the Property Panel. !convert-button-hyperlink.png! You can also convert a Button to a Hyperlink by removing the Fill and Border. !button-property-panel.png! You can also add the Hyperlink element and use its presets in the Add Panel -> Button section. ## Link Button You can set the destination link for a Button by clicking the Link icon on the Context Panel to open the Link Settings dialog. !link-button.png! ### On-Click Link Setting You can set the On-Click parameter in the Options on the Context Toolbar for the Button and [Hyperlink](page:110462) 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 and [Hyperlink](page:110462) Elements. !on-click-property.png! ## Button Link Settings You can link a Button to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, and Post. NOTE: Use the Wed Address option to paste the web page's full URL copied from the browser address bar. !link-settings.png! ## Button States You can modify the Button Fill, Border, and Text Color for the three Button States: Default (Color), Hover, and Active. !button-states.png! ## Edit Button Properties You can stylize the Button by editing the Properties in the Property Panel. ### Button Resize And Position You can manually resize and move the Button Element in the Editor by dragging the markers or the Element. !move-resize-button.gif! By entering the values, you can specify the Width and Height in the Property Panel. To change the Button size, you can also enter the Left and Right, and Top and Bottom Padding values. !button-size-position.png! ### Button Styles You can pick one of the five styles for your Button Element. !button-styles.png! ### Button Background You can customize the Background of your Button Element by setting Сolor, Hover, and Pressed Colors. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states. !button-background.png! ### Button Border Similarly, you can add the Border to your Button Element, then change its Color and Width 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. !button-border.gif! ### No Color Option You can set the No Color option in the Color Picker. Also, now you can remove the Color in the Context Toolbar and the Property Panel for a Button. !no-color-option-button.png! ### Button Radius Change the corner sharpness of the Button Element using the Radius property. !button-radius.gif! ### Button Text Style Customize the text of the Button 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. !button-text-style.png! ### Button Shadow Enable the Shadow by checking the Shadow checkbox in the Property Panel for the selected Button Element. You can choose the Shadow Preset or switch the Settings Tab to adjust the Shadow manually. !button-shadow.png! ## Button Icon You can add a Button with an Icon by choosing the Style in the Property Panel. You can also add and modify the Button's Icon in the Icon section of the Property Panel. !button-icon.png! You can also quickly use the Button With Icon Presets in the Add Panel. ## Button In Mobile Views You can modify the Button Element size and position for all available Mobile Views. !button-mobile-views.png! ##