Astra theme tutorial: how to add a search bar on the Astra theme, making the site content search faster!

utilization Astra ThemeWhen it comes to adding a search bar near the header to provide content filtering capabilities for web pages, this tutorial will show you step-by-step how to add andCustomize the search barThe

Why should I add a search bar to my website?

The search bar helps visitors quickly find the content they want to see, improving the efficiency of browsing throughout the site. It is also effective in reducing the bounce rate for sites with more content, theEnhancing the user experienceThe

• Enhancing the user experience: Users can quickly find the article or product they want to see by keyword, instead of flipping page after page to find it.
• Save browsing time: The search bar helps visitors find targeted content within seconds, and is especially suited to informative blogs, e-commerce, teaching or company websites.
• Reduce bounce rate: If users can't find content, they are likely to leave the site immediately. With a search bar, more potential customers or readers are retained.
• Increase Conversion Rate: For e-commerce or course websites, precise search allows users to find the product they want to buy or the course they want to enroll in faster, thus increasing the turnover rate.
• Enhanced Content Discovery: Visitors may find content they otherwise wouldn't have noticed while searching, increasing page views.

Operation Tutorial

Step 1: Login and enter the customization interface

• Log in to the backend of your WordPress site.
• Click the "Customize" button at the top to enter the theme's customization settings.

Step 2: Open the header builder

• In the left menu click on HeaderThe

• Make sure to use the Primary Menu, so that the search bar can be added properly.

Step 3: Add the search bar component

• In the header build area, locate the position where you want to add it and click next to the existing component "+" iconThe
• In the module selection box that pops up, select the SearchThe

• The search bar will then automatically appear in the header.

Step 4: Add a search bar for mobile

• Click the device icon at the bottom of the customization screen to switch to the mobile View.

• Click the "+" icon in the header builder to add the SearchThe

take note of: Tablet settings are usually synchronized with mobile, but can be adjusted individually.

Step 5: Customize the appearance of the search bar

After clicking on the added search field, you can set it:

• color: Modify the search box in thecolor, which is generally the default transparent color.
• Spacing: The spacing of the search box.
• Margin: The margins of the search box in PX, EM and percentage.

Step 6: Set the scope of search content (optional)

You can also set the scope of the search bar:

• Search articles only (Post)
• Or include Pages and Downloads.

It is recommended that only article searches are generally enabled to avoid interference.

Step 7: Save and preview the effect

• Click on the upper right corner of the Publish button to save the settings.

• Open the site and test that the search function works.

summarize

Adding a search bar to your website using Astra theme not only improves the overall browsing experience, but also helps visitors find targeted content more efficiently. Hope this tutorial can help you, if you want to know more WordPess related tutorials and information, please pay attention to thePhoton fluctuation networkIt contains the most complete WordPress tutorials with the best ambiance!WordPress Exchange CommunityThe

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off