Website logo
⌘K
🔖Taptop Knowledge Base
🇷🇺RU: База знаний на русском языке
🚀Quick Start
Sign up and log in
How to create a website with Taptop
Component Libraries
⚙️Dashboard
Creating a new project
Project settings
Actions with projects
Teams
Profile settings
📝Introduction to Design Editor
Basics of website building
Design Editor Navigation
📰Website structure and layout
Main website blocks
Adding and moving elements
Sizing and spacing
Elements layout settings
Auto Layout (in Flex mode)
Position
🗂️Elements and Widgets
Link Block
Button and Up Button
Text and Text Link
List
Block List
Menu
Tabs
Accordion
Pop-up
Search Bar
Embed
Image
SVG Icon
Form
Map
Components
🖌️Design and Styling
Classes and selectors
States and styles
Typography
Background
Borders and rounded corners
Colors and opacity
Effects
Customization for different devices
🎚️Page settings
General page settings
SEO settings for a page
Custom code for a page
🌐Publishing and export
Publishing a project
Code export
⌨️Shortcuts
📋Guides
Docs powered by Archbee
Website logo
Elements and Widgets

Search Bar

5min



Search Bar is a widget that allows visitors to search for and find necessary information on a website. 

Document image


The widget consists of the following elements:

  • Input Label
  • Search Button



Search Bar settings

Search Bar settings on the Settings tab in the right panel includes: 

Document image


General settings

Type: 

  • Default - The Search Bar has its common structure: the search query input line and the search button.
  • Slide – The search query input line is hidden and it appears when first clicking the search button, the second click sends the search query. 

Slide type has extra settings:

Document image

  • Show input line: On Click or On Hover
  • Display Input line on canvas 

Placeholder:

  • Placeholder – you can enter text in the input line (for example: Site search)
  • Placeholder color – you can select a color and its opacity



Search Bar styles

You can style the Search Bar using the Styles tab in the right panel. 

By selecting the appropriate element of the Search Bar, you can:

  • Style the input line. You can add a border to the input line (in the Borders section), round the corners, change paddings and margins (in the Size section), change the font (in the Text section).
  • Style the search button. You can change the background color (in the Background section), adjust the corner radius (in the Size section), change the font (in the Text section).
Document image




Updated 05 Oct 2023
Did this page help you?
PREVIOUS
Pop-up
NEXT
Embed
Docs powered by Archbee
TABLE OF CONTENTS
Search Bar settings
Search Bar styles
Docs powered by Archbee