You can get search results for sites published on Nicepage hosting and exported as HTML in WordPress and Joomla.

Add Search Element

To use this feature for your HTML or published Site, add the Search Element to the Header or Footer. In WordPress and Joomla, this Element will use pre-built CMS Search features. Publish the Site with the added Search Element to the Header.

Test Search Results

After publishing, open the Site, enter the search keyword, and get results.

Search Properties

You can set the properties of the Search Element added to the Header.

Search Placeholder

Modify the Placeholder in the Search properties.

Element Layouts

You can add the Search Element to the Header and choose the Layout in the Property Panel: Field With Icon, Field, or Icon.

On-Click Actions

When a user clicks the Search Field, you can also choose the On-Click Actions that animate the Search Element on your site: Expand Element's Width, Overlay Over Header, or Overlay Over Screen.

Expand Element Width

With the Expand option, the Search Element expands its Width on click. The direction of the expansion depends on its position in the Header. Positioning the Element right will expand it to the left, and vice versa.

If you align the Search Element in the center, it will expand both sides, as shown below.

Overlay Over Header

If you choose the Overlay Header option, the box with the expanded Search Element will overlap the Header when you click.

Overlay Over Screen

By choosing the Overlay Screen option, you can also Overlay the whole Screen with the shading and center-expanded Search Element.

Expand Width

You can change the Width in percent relative to the Sheet Width and fixed sizes, which the Search Element expands on click.

Overlay Color

You can choose the Color for the boxes with the Search Element overlapping on click. Please note that for transparent overlapping, you need to add a Custom Color with Transparency for now.

You can get search results for sites published on Nicepage hosting and exported as HTML in WordPress and Joomla. ## Add Search Element To use this feature for your HTML or published Site, add the Search Element to the Header or Footer. In WordPress and Joomla, this Element will use pre-built CMS Search features. Publish the Site with the added Search Element to the Header. !add-search-element.png! ## Test Search Results After publishing, open the Site, enter the search keyword, and get results. !serach-results-improved.png! ## Search Properties You can set the properties of the Search Element added to the Header. !search-properties.png! ## Search Placeholder Modify the Placeholder in the Search properties. !search-placeholder.png! ## Element Layouts You can add the Search Element to the Header and choose the Layout in the Property Panel: Field With Icon, Field, or Icon. !search-layouts.gif! ## On-Click Actions When a user clicks the Search Field, you can also choose the On-Click Actions that animate the Search Element on your site: Expand Element's Width, Overlay Over Header, or Overlay Over Screen. !search-action.png! ### Expand Element Width With the Expand option, the Search Element expands its Width on click. The direction of the expansion depends on its position in the Header. Positioning the Element right will expand it to the left, and vice versa. !expand-width-left.gif! If you align the Search Element in the center, it will expand both sides, as shown below. !search-expand-width.gif! ### Overlay Over Header If you choose the Overlay Header option, the box with the expanded Search Element will overlap the Header when you click. !search-overlap-header.gif! ### Overlay Over Screen By choosing the Overlay Screen option, you can also Overlay the whole Screen with the shading and center-expanded Search Element. !search-overlap-screen.gif! ## Expand Width You can change the Width in percent relative to the Sheet Width and fixed sizes, which the Search Element expands on click. !search-expand-width-property.png! ## Overlay Color You can choose the Color for the boxes with the Search Element overlapping on click. Please note that for transparent overlapping, you need to add a Custom Color with Transparency for now. !search-overlay-color.png! ##