Begin by selecting a template to create the header.

Provide a name for the header and choose the “Header” type from the available options. Afterward, proceed to publish and customize it using bricks for editing purposes.

Next, incorporate your header and menu, and include a button that you wish to assign to your search functionality.

Create a new template specifically for the search field. To do this, navigate to the template options and select “Add new.” Provide a name for the template and choose “Popup” as the template type. Once done, publish the template and proceed to edit it using the designated template editor.

Next, in the editor, locate the “Template Settings” section and click on the “Popup” option.

From the “Popup” option, proceed to design your Popup page based on your desired layout. In our specific design, we will align the template to the top, set its width to 100%, and incorporate a background color.

Next, we selected three elements – a heading, a close icon, and our search field – and customized their design. You can create and design your search section based on your own design preferences.

In the close icon, we utilized interactions to enhance its functionality.

Within the settings of the interactions, create a new interaction and choose “Click” as the trigger for the interaction.

Next, select “Hide Element” as the action for the interaction. Choose “Popup” as the target, and then select your specific popup from the available options. In our case, we named our popup “Search,” so we selected “Search” as the target.

Now, navigate to the settings and choose “Template Settings” from the available options.

Open the conditions section and add a condition by selecting “Entire website” from the available options.

Now, incorporate interactions into the search button.

Next, add an interaction to the search button. Choose “Click” as the trigger, “Show element” as the action, “Popup” as the target, and select your specific popup from the popup field.

Now, our search button is ready. Whenever we click the search button, the popup containing the search field will appear on our screen.

Next, we will proceed with the creation of a Search Result template. We will design a specific template dedicated to Search Results.

Within the confines of the template, we will establish a structured framework that aligns with our intended design.

From Query Loop, you can choose what kind of post types you want to show on your Search result page.

Now, navigate to the “Template settings” section within the settings menu.

Next, proceed to the “Condition” tab, click on “Add Condition,” and choose the option “Search Result” from the available selections.

Once you have finalized the template, save it and proceed to review your Search results. You should now observe that the search results are displayed in accordance with the design you have defined.