Kubio – the kickstart

Find out how you can use Kubio for designing the website you envision.

Buttons block

This Gutenberg button block allows you to add calls to action to your website sections. Buttons are used to urge website visitors to take a specific website action: to buy, subscribe, download or read something, etc. You can drag the buttons block to the section you want on your page, or add the block from any “+” sign on your canvas.

When you select the buttons block, you will see a toolbar on top of it, with several basic editing options. In the previous chapter, we explained the common editing options for all blocks. In the case of the button block, here are the ones that apply: positioning, duplicate, and remove block.

button block basic edits

Now, here are the specific editing options for the buttons block:

  • Insert link. You can use this option to add a link to the button block. When you add the link, you can toggle the option for opening the link in a new tab. 
  • Add a new button. You can do this from the “+” sign. 

Buttons block: customizations within the block editing panel 

The moment you select any block, the Kubio block editing panel will open up on the right-hand side. It always has three options: content, style, and advanced. The possibilities inside vary from block to block. In the buttons block case you will be able to make edits to the buttons themselves and their text.

Content
button edit content

Here we have two main editing categories:

  • Button properties. Here you can type your text, but you can also do it live, directly on the canvas. You can make your text bold, or italic, and add a link to it. You can also make size adjustments to the button. 
  • Button group. Here you can create more buttons inside a group. You can set up the distance between buttons, as well as their alignment.
Style

The moment you select an individual button, you can style it both in a normal and hover state.

button style

Here’s what you can customize: 

button box shadow
  • Typography. You can set up a different font family, font size, and weight for the button text. You can add decorations to text, set up capitalization, and adjust line height and letter spacing.
button text typography
  • Border. There are several border types that you can choose from. You can change the border color and thickness easily.
  • Radius. From this option you can round the image’s corners. You can also assign different values for top-right, top-left, bottom-left and bottom-right, if you select the link symbol.
Advanced

At this level, you can make edits to the button or icon, across three states: normal, hover, and focus.

button block advanced editings

No matter what you choose to edit, you have the same options both in the normal and the focus state, while the hover states bring an extra edit option for transition. Here you will have to set up the duration of the transition.

button transition in hover state

Here are the available Gutenberg button block edits:

  • Background. Here you can make adjustments to background color and type of the Gutenberg button block.
  • Spacing. Here you can set up the margins and paddings for your buttons block.
  • Border and shadows. Here you can add borders with a different color, radius and thickness to your block. Also, you can add box shadows. You have full control over the position, blur, spread and color of the box shadow.
  • Typography. The same typography edits that can be made under the styling options can be found here. There’s also a shortcut that you can take to manage the theme’s defaults.
  • Responsive. Here you can decide whether the block will show or not on desktop, tablet or mobile.
  • Miscellaneous. At this level you can set up the z-index of your button block (vertically order the elements that overlap), set up if the element overflows or not (displaying the content of the block flowing out of its container into the surrounding area), add HTML anchors and CSS classes.