# Button

# Basic Content - Button

Drag and drop the More Column Content element from the Website Editor Sidebar into the column space where you want to add the Button.

img

This will open the Choose Content window.

img

Clicking the Button element will now drop it into the column space you selected.

img

When the Button element is highlighted it will also be seen in the "Selected Elements" section of the Website Editor Sidebar. Clicking on "Button" will open its settings.


# Edit Button

There are several properties available for the Button element within content blocks.

Buttons are often "clickable". Use the Add Behavior settings to assign a "Click" action.

# Label

This is the text that appears on the button face. Click on the Label property to open its text field for editing. Click on the Label property again to close. Changes are automatically saved. Click on the x beside the Label property to clear the text field.

img

# Color and Style

Clicking on the Configure button will open the Select Button Style window where you can adjust the look of your button and also see a preview of your changes.

img

# Type of Styling

img

There is the Default Styling option and the Custom Styling option available in a drop-down selector. Default Styling uses colors based on the current theme. Changing to the Custom Styling option opens a selection of Color Picker panels to adjust the colors of the button.

img

Custom Styling only works with the Normal "shape" button (see Appearance). Also, no other style options are available when using Custom Styling.

# Appearance

img

The Appearance drop-down selection allows you to change the shape of the button. The options are Normal (default), Link, Pill, or Squared.

Some Appearance options may limit other available style options for your button.

  • Link will make the button appear as text only.
    img

  • Pill will make the button appear with rounded ends.
    img

  • Squared will make the button appear as a block.
    img

# Outline

The Outline toggle will switch the color of the text with the button color and show the button outline.

img
img
img

# Variant

The Variant option allows you to choose from the current theme color options with the default as Secondary.

img


# Full Width

A toggle to use the full width of the content block (default is disabled).

# Size

Uses a drop-down selector to choose from predefined font Size options.

  • Default - uses the default font size.
  • Large - uses a larger font size and adjusts the button as needed.
  • Small - uses a smaller font size and adjusts the button as needed.

img

# Alignment

By default the button Alignment will be "centered". Alignment can be set to Center, Right, and Left.

img

The Alignment option is only applied when the Full Width option is toggled off.


# Video: Website Editor Add Button


Also see Common Element Actions and Add Behavior for more details and information on managing the Button element.

Last Updated: 10/21/2020, 5:54:58 PM