Customize style

Customize the style of a search element in a page

Refer to this page to learn about the Search element in pages
  1. Edit your app.
  2. Open the builder of the required page.
  3. Select the required search element. The Search Configuration pane will appear from the right.
  4. Navigate to the Style tab on the right.
  5. Set the Search box shape as required: Rectangular or Rounded.
  6. Set the Font Family as required. Default font is selected by default. This dictates the font in which your user's input will appear in the search bar.
  7. Set Column align as required. Center is selected by default. This dictates the alignment of the search box inside the search element.

  8. Set the required style for the Search button. These options become available when you've selected a search element that contains the "Search" button.
    • Click the B and I buttons to embolden and italicize the "Search" text inside the button
    • Select the required font and background Color. By default, "Search" inside the button is in white, with a blue background.
    • Set the Font size as required. It's set to 2 by default. This is the font size of the "Search" text inside the button.

  9. Set the required style for the Search bar:
    • Click the B and I buttons to embolden and italicize the user's input in the search bar, respectively.
    • Select the required font and background Color. By default, your user's input will appear in black with no fill.
    • Set theFont size as required. It's set to 2 by default. This is the font size for your user's input in the search bar.
  10. Set Padding as required. This dictates the space (in pixels) between the search box and the search element's border.

  11. Set the search element's Background as required. You can set a background color and image.
  12. When you set a background image for the search element, set the Image position, Align, and Overlay as required.

Related topics

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocreator.com