Scroll

Button

Click HERE for an interactive tutorial. Scroll to the bottom for animated steps.


Detailed Step-by-Step Tutorial

Add Button

  • Go to Format at the top of the page.
  • Drag Button widget to an area of the page where you'd like to add it to.


Manage Button

  • Double-click on button or highlight it and go to Settings pane > APP
  • Button Text: Type the text that will appear on the button.
  • Background: Toggle ON to enable and choose background color for the button.
  • Opacity: Define opacity of the button.

Border:

  • Color: Choose border color.
  • Style: Chose border style.
  • Width: Choose the width of the border.
  • Radius: Choose border corner radius.

Image:

  • Image: Enable to use an image as a background.
  • Size: Choose background size (i.e. auto, 100%, etc.).
  • Position: Set position of the background.
  • Repeat: Choose repeat type for the background.

Typography:

  • Font Family: Select font family for button text (Times New Roman, Arial, etc.).
  • Font size (px): Choose font size for button text (12, 14, 16, etc.).
  • Font Style: Choose font style for button text (normal, italic or oblique).
  • Font Weight: Choose font weight for button text (normal, bold, etc.).
  • Text Color: Choose the color for button text.
  • Text Align: Choose text alignment for button text.

Link

  • Existing Pages: Link the button to an existing page on your site.
  • Online Catalog Pages: Link the button to one of the catalog pages on your site.
  • URL: Link the button to an external web-page.
  • New Window: Toggle ON to have linked content of the button to open in a new window of the web browser.


General Settings

  • Title: Enter the title.
  • Show as Tooltip: Show the title as tooltip (text that appears when your mouse hovers over the button).
  • Top: Set top margin.
  • Left: Set left margin.
  • Width: Set the width.

 

Background:

  • Color: Choose background color.
  • Opacity: Set opacity for the background.
  • Image: Enable to use an image as a background.
  • Size: Choose background size (i.e. auto, 100%, etc.).
  • Position: Set position of the background.
  • Repeat: Choose repeat type for the background.

 

Border:

  • Color: Choose border color.
  • Style: Chose border style.
  • Width: Choose the width of the border.
  • Radius: Choose border corner radius.

 

Box Shadow:

  • Shadow: Toggle ON to create a shadow for the button.
  • H-Shadow: Set horizontal position of the shadow.
  • V-Shadow: Set vertical position of the shadow.
  • Blur: Set blur value for the shadow.
  • Spread: Define how far the shadow spreads.
  • Color: Set the color for the shadow.
  • Style: Select between inset and outset.

 


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments