ProductX

  1. Home
  2. Docs
  3. ProductX
  4. All Blocks
  5. Button Group Block

Button Group Block

***ProductX is becoming WowStore. If you see the new working interface of WowStore, then you can follow along – the working process for product blocks, starter templates, and features all work the same way as it did for ProductX. So, if you’re working with WowStore, you can follow the doc and use the instructions. Essentially, there’s no difference between WowStore and ProductX when it comes to using the product in general.

Here’s in-depth documentation to help you explore and use all the exciting features ProductX’s button group block has to offer.

Video Tutorial

Here is a full-on explanation video of using ProductX’s Button Group Block.

Adding Button Group Block

First, you need to add the Button Group block to your page.

To add the button group block, click the “+” icon to open the all blocks section. Click or drag and drop the “Button Group” block to your page. You can also use the “/” command and type “Button Group” to add it to your page.

Adding Button Group Block
Adding Button Group Block

You will have two (2) separate customization options for this block—one for the button group and another for the button itself.

We will explore both sets of customization options here.

Customizing Button Group

The button group has a very minimal customization option. But let us check them out!

Adding Multiple Button

Since this is a button group, you can add multiple buttons if you want. Simply click the “+” icon, and a second button will be added.

Adding Multiple Buttons
Adding Multiple Buttons

Note: You can add as many buttons as you want in the button group.

Premade Patterns

Like most other ProductX blocks, the button group blocks also have premade patterns available. 

Button Group Block Explore Patterns
Button Group Block Explore Patterns

Click the “Explore Patterns” button to see all the available patterns for the button group block. And click “Import” to add it to the block.

Button Group Block Importing Patterns
Button Group Block Importing Patterns

Note: You can further customize the premade designs if you want.

Button Gap

A button group can consist of multiple buttons. And you can adjust the gaps between the two buttons.

Button Gap Settings
Button Gap Settings

Use the “Button Gap” slider to adjust the gap between buttons (two or more buttons are needed).

Horizontal Alignment

Horizontal alignment settings let you change the predefined alignments of buttons in a group horizontally

Button Group Horizontal Alignment
Button Group Horizontal Alignment

Note: If you have more than two (2) buttons, the horizontal alignment might not work as desired if you have low spacing.

Vertical Alignment

On the first look, vertical alignment might look like it is not working. But let us tell you, it is there for a specific reason, and you will need it when you see how to use it.

Button Group Vertical Alignment
Button Group Vertical Alignment

Suppose you have multiple (2, 3, or more) buttons in a button group. Some buttons have single-line text, whereas a particular button has double-line text. Then you can use this setting to align all the buttons vertically.

 Vertical View & Horizontal Alignment

This is the option to show the button vertically instead of horizontally. Click the toggle bar to switch the button positions vertically.

Button Group Vertical View Horizontal Alignment
Button Group Vertical View Horizontal Alignment

Also, you will get the option to control the vertical buttons’ alignment. Use the Horizontal alignment section to do that.

And you can also adjust the margin of the button group block. You can separately adjust the margins of the top, bottom, left and right.

Button Animation

Button group block also provides preset animations. Currently, you can select 4 different button animation variations from the dropdown.

Button Animation
Button Animation

Customizing Button

Now, let us show you the customization settings for buttons.

Note: These settings are only for particular buttons, so if you have multiple buttons, you must customize them separately.

Styles

ProductX provides 4 different button styles. You can select any to apply the style to a button.

Here is a preview of four different button styles.

Button Styles
Button Styles

Button Size

You can also select button sizes from the dropdown. You will get the following options:

  • Small
  • Medium
  • Large
  • Extra Large
  • Custom
Button Size
Button Size

If you select custom, you will see another option, “Button Custom Size,” to configure the sizes from the top, bottom, left and right.

Button Link

Adding links to a button is essential for any store. So, we have added a separate section to paste URLs

Button Link
Button Link

Also, you will have the option to specify the following for a linked button:

More Button Link Settings
More Button Link Settings
  • Open in a new tab
  • Same tab/window
  • No follow
  • Sponsored
  • Download

Text

You can customize the text on the button. This includes text typography, text color, and text hover color

Button Text Settings
Button Text Settings

In the text typography option, you can select fonts, adjust font sizes, modify the height and spacing, and select decoration, style, and text cases.

Background

In the background setting, you can adjust margins, background color, border, border radius, and box shadow for both normal and hover.

Button Background Settings
Button Background Settings

Icon

You can add icons for the icon library of this block. Also, you can adjust the icon size and space between icons and texts and choose normal and hover colors.

Button Icon Settings
Button Icon Settings

Responsive Settings

In the “Advanced” tab of the button group block, you can turn responsive options on/off. Currently, you will find the following options:

  • Hide On Extra Large
  • Hide On Desktop
  • Hide On Tablet
  • Hide On Mobile
Button Responsive Settings
Button Responsive Settings

Click the toggle bar to enable each option.

And that is how you can use and customize this fantastic button group block from ProductX. You can also check out the demo of the Button Group block by clicking the link below!

Was this article helpful to you? Yes No