Table of Contents
Display search icon in header section with Search block
1. How to add Search Block? #
To add the Search Block in your Gutenberg editor first click on (+) icon then in the search box type “Search” and you will see the “Search” block.
After inserting the “Search” block you will get the default look like below. Now you need to change the settings.
2. General Settings #
The General settings tab has the preset option and search box settings option. The General settings panel properties are as follows.
- Preset: From our pre-defined presets you can select which style you like.
- Search Box Settings: You can set box with, change placeholder text, show/hide search icon and alignment.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- Input Field: You can style input field with typography, color, background, border and shadow.
- Submit Button: You can style submit button with normal and hover color, background, button size, and icon size.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
