Kubio – the kickstart

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

Search block

The search bar allows website visitors to look for information. Search bars help the overall website navigation, together with the menus. 

Search block: customizations within the block editing panel 

The moment you select any block, a block editing panel will show up on the right-hand side. It always has three options: content, style, and advanced. The possibilities inside vary from block to block.

Content
Search block content

At this level you can:

  • Choose a search layout: input and button or input only,
  • Specify the placeholder text. We recommend the default “Search”,
  • Specify the type of button: text or icon,
  • Select a relevant icon for your button.

Style
Search block button style

Inside style you can make changes to the normal and hover states for the input and the button. 

For both the input and button you can customize the:

  • Text color,
  • Background color,
  • Border,
  • Typography.

Advanced

At the “Advanced” level, here are the most common customizations available across the Kubio blocks: background, spacing, border and shadows, typography, transform, dividers, transition, responsive, and miscellaneous.

In the case of the search Gutenberg block, you can make changes across the container, input, and button. The available customizations can be seen below.

Search block advanced styling options in the Kubio editor