Buttons Block

Simple group of buttons

Different styles per button

Simple Button
Another Button
Buy Now

Different alignment options per button group

Simple Button
Another Button
Buy Now

The Buttons block consists of the Button Group block which groups multiple buttons and offers options for the general appearance of the group and the Button block which controls the functionality and appearance of the individual button.

Let’s take a look at the Button Group first.

Button Group Settings

Here you can control the alignment of the entire button group and choose to display your buttons aligned to the left, right or center.

Notice that the Button Alignment has three icons next to its label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the button group alignment for each device.


Block Appearance

Under Block Appearance you can customize the look of the block. The available options are:

  1. Background Color: This option controls the background color of the button group.
  2. Padding: With this option you can individually control the padding on each side of the block.
  3. Margin: With this option you can individually control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.


Now let’s move on to the Button block.

Button Settings

Here you can set the button’s URL, select if you wish for it to open in a new tab and set the relation between the current and the linked document via the rel attribute. If you wish to add more than one attributes separate them with a space.


Block Appearance

Under the block appearance tab you can control how each button looks. Let’s take a look at the options.

  1. Font Size: This option allows you to set the font size either via a drop down of preset values or by setting an exact pixel value in the input.
  2. Text Color: This option allows you to set the color for the button’s text.
  3. Background Color: This option controls the button’s background color.
  4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
  5. Border Radius: This option allows you to round the button’s corners.
  6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  7. Padding: With this option you can individually control the padding on each side of the block.
  8. Margin: With this option you can individually control the margin on each side of the block.

Notice that the Font Size, Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.