What Element makes a website usable? Watch this video to the end to learn how to make your site more attractive and valuable, so your visitors stay and return to your site in the future. Today's video is about the Search Element, which is an essential functionality for any website.

Previous All Lessons Next

Run Nicepage

Run Nicepage. Add a new site. Choose any design. The Search Element is usually located in the Header Block at the top. You can add this Element from the Add Panel.

Select the Header Block. Click on the round blue icon. You see the Header section highlighted in the Add Panel. Select the Search Element.

Align Element

Drag the Search Element and align it with the magnetic guides. Resize the Header.

Search Properties

Search Resize and Position

Click the Search Element to select, and resize the Element by dragging the markers. You can find all available properties of the Search Element in the Property Panel, such as Placeholder, Layout, Spacing, and more. You can also modify the Width, Height, and Position in the Property Panel. Round the corners to stylize the Search Field.

Search Placeholder

Edit the Search Placeholder by entering "What are you looking for"? You can also translate the search input placeholder if needed, for example, in Spanish. (“¿Qué estás buscando?”) We will continue in English.

Search Border

Change the background, remove the border, modify the placeholder color, and font for the Search Element if needed.

Search Icon

You can also modify the Search icon in the Icon properties.

Edit the Width and Size properties to get the Padding effect for the Search Icon. Add the Fill Color to the Icon Shape.

Search Layout

You can show the search in three different layouts: Field With Icon, Field, or Icon.

On-Click Actions

When a user clicks the Search Field, you can choose one of three On-Click Actions that animate the Search Element on your site.
Expand Width. You can expand the Width of the search element by clicking. Preview for testing. Click the Search Icon in the Header to see the effect.

Overlay Over Header

The next option is when the box with the expanded Search Element overlaps the Header on click. Preview to test.

Overlay Over Screen

Finally, you can overlay the whole Screen, and expand the Search Element in the screen center.

Search Results

Search results are shown on a page built with the Search template. Open the Templates Panel by clicking the icon in the Quick Access Pane, select Search Template, and customize the look of your search results page.

Preview or publish your site. After publishing, open the Site, enter the search keyword, and get results. After publishing, open the Site, enter the search keyword, and get results.

Search in WP and Joomla

You can add a Search Element and customize the Search Page template directly in WordPress or Joomla. Alternatively, you can export the Nicepage Theme with content from the Desktop app or Online Builder and install it on your CMS site. In WordPress and Joomla, the Search Element uses the pre-built CMS Search features.

Search Popup