The search bar allows website visitors to look for information. Search bars help the overall website navigation, together with the menus.
When you click on it, you will notice a toolbar showing up on top, with several options:
- Positioning
When you select the 6 dots, you will have the option to drag and drop the block where you want;
When you select the up and down arrows, you will move the block up and down.
- Options. Inside options, there are several actions that you can take:
Duplicate. This allows you to clone your current block. After this duplication, you can style both blocks independently.
Insert before. This allows you to insert a new block before the current one.
Insert after. This allows you to insert a new block after the current one.
Lock. You can use this feature to block certain attributes in the toolbar. You ca restrict block moving or block removal, or both of them.
Copy style (PRO only) – use this option when you want to copy the style from a block to another. This will copy text color, background color, font size, font family, borders and their styling, to another block. This option is used together with the paste style. You can copy and paste styles across the same type of block, from paragraphs to sliders. Now, you should know that in the case of advanced blocks, they have multiple blocks inside (buttons, images, text, etc), the styling won’t be copied for the elements on the inside as well.
Paste style and link (PRO only) – after copying the style from another block, use this option to paste the style. When the styles are linked it means that any style change happening on a block, it will be reflected to the other one as well.
Paste style (PRO only) – after copying the style from another block, use this option to paste the style. This option won’t link the styles of the blocks, meaning that a styling change done to a block, won’t affect the other.
Remove block. This is how you delete the block you’re currently on.
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
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
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.
