How To Use The Search Widget By Atomic Addons

The Search widget by Atomic Addons adds a search form to your page. You can show the field itself, or a search icon that opens the field in a small panel or a full-screen overlay when visitors click it. Searches go to your site's normal search results page and look in the post type you choose. This guide covers adding the widget, the four skins and their settings.

Enable the Search Widget

Search is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Search. You can also open the Content category.

4. 4

   Turn the Search widget on.

5. 5

   Click Save Settings.

Add the Search Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Search. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

It works anywhere, and the icon skins are made for tight spots such as a header built with the Theme Builder.

Search Layout

All the content settings are in Content → Search Layout. Some appear only for certain skins:

1. 1

   Skin: How the form appears. Default shows the search field on the page. Dropbar and Dropdown show an icon that opens the field in a panel beside it when clicked; Dropdown adds a close button (×) to the panel. Modal shows an icon that opens a full-screen search with a large, centered field and a close button in the corner.

2. 2

   Specific Post Type: Which content the search looks in, such as Posts (the default), Pages or Products. The list holds your site's public post types. Results open on your theme's search results page.

3. 3

   Placeholder: The hint text in the empty field: “Search...” by default.

4. 4

   Search Icon: Default and Modal skins: a magnifier icon inside the field. On by default.

5. 5

   Icon Flip: With the search icon on and no search button: moves the icon to the right end of the field.

6. 6

   Choose Toggle Icon: Dropbar, Dropdown and Modal skins: the icon visitors click to open the search. A magnifier by default; pick any icon or upload an SVG.

7. 7

   Alignment: Left, center or right placement of the form or the toggle icon. Use the device icon to set it per screen size.

8. 8

   Dropbar Position: Dropbar and Dropdown skins: where the panel opens relative to the icon, such as Bottom Left (the default), Bottom Justify, Top Right or Left Center; fourteen places in all. If there isn't room on the chosen side, the panel flips to the other side.

9. 9

   Dropbar Offset: Dropbar and Dropdown skins: the gap between the icon and the panel, 0 to 100px. 0 by default.

10. 10

    Search Width: All skins except Modal: the width of the field or the panel, 150 to 1000px, per screen size.

11. 11

    Search Button: Default skin, with Icon Flip off: adds a submit button at the right end of the field. Off by default; the field also submits when visitors press Enter.

12. 12

    Button Text: With the button on: its label, “Submit” by default. Clear it for an icon-only button.

13. 13

    Icon: With the button on: an icon after the label.

14. 14

    Button Position: With the button on: how far the button sits from the right end of the field, 0 to 50px.

15. 15

    Icon Spacing: With the button on: the space between the label and its icon.

With Dropbar and Dropdown the panel opens on click and closes when visitors click elsewhere on the page. The field gets the cursor as soon as it opens, so visitors can type straight away.

Style the Search

Everything below is on the Style tab. Each section appears only for the skins and features it applies to.

• Toggle Icon — the icon of the Dropbar, Dropdown and Modal skins: size, color, background, hover colors, padding, border, radius and shadow.
• Search Container — every skin except Modal: the background, border, padding and radius around the field or panel. With the Dropdown skin it also colors the close button.
• Search Icon — the magnifier inside the field: color, background and size.
• Input — the field itself, with Normal and Focus tabs: text, background, placeholder and border colors, border size, border radius and padding.
• Modal Close Button — Modal skin: color, border radius, padding, margin and size of the close button, with a Hover state.
• Search Button — with the button on: text color, background, border radius, padding and shadow, with a Hover state.