The Search Module can be styled locally or globally. The advantage of global styling is that it automatically styles all the Search Modules on your website at the same time, offering extra styling options and saving your time. It is possible to find the Search Global Styling under the Module Design section of the Global Styling tab of the editor.
In this section you can define the icon placement - to the left, centered or to the right.
Define the size of the area surrounding the search icon. You can define the size in terms of width and height.
In this section you can define the icon color, both in normal and hover state, as well as the icon size.
Choose a background color for the area surrounding the icon - again, it is possible to define a different color for normal and hovering state.
In this section you can define the border of the area surrounding the icon in terms of color, width, style and radius.
When styling the spacing you can define the margin - which adjusts the space outside of an element.
3. Apply Global Styling
As soon as you save your Global Styling, all the Search Modules will inherit that design. However, if later you choose to style a search module locally, it will overwrite the global styling but only for that specific module. Click here to read more about the Search Module local styling!