Lesson 6: Search box
Category: Chapter 5: Navigation
In this lesson we will learn how to put Search box on your website. Search box is a very useful item of every website, especially if your website has a complex structure. With its help it's always easier for visitors to search the items they need.
- Login to your website Administrator Back-End if you haven't done so yet.
- Navigate to Extensions ⇒ Module Manager.
- Click New icon to create a new module.
- Choose Search module type from the list.
- Enter title for this module.
- Click Select Position button, choose default template for your website (beez_20).
- Find module position (position-0) to locate the Search box
- Make sure this module is Published, and its Access level is set to Public.
- Scroll down to Menu Assignment pane.
- Choose Module Assignment for this Search box, let's choose Only on the pages selected.
- Click Toggle Selection to select unselected menu items or remove selection from the selected menu items. As you can see this button inverts selection.
- Let's choose Home menu item only.
- In Basic Options pane you may set these parameters:
- BASIC OPTIONS
Box Label - text that appears near the search box.
Box Width - width of the search box in characters.
Box Text - text that appears inside the search box.
Search Button - choose to show or hide search button.
Button Position - location of the search button in relation to search box itself.
Search Button Image - shows search image instead of a search button. The image must be located in public_html/templates/beez_20/images/ directory and its name set to searchButton.gif. If you use a different template, replace beez_20 with its directory name.
Button Text - text that appears on the search button.
- Advanced Options fall out of scope of this course, they are related to custom design.
- Click on Save & Close icon when you've finished configuring the search box module.
- Click on View Site link to view the search box on your website front-end.
- Notice that Box Label is displayed not by all the templates.
- Look at the customized text for Box Text and Button Text elements.
- Now navigate to another web page on your website.
- You won't see the Search box on another web page, because you've chosen to display it only on Home page.
- Congratulations! You completed this lesson, click Next Lesson button at the bottom of this curriculum page.