The best WordPress theme we have ever built is officially available now! | Meet Jupiter X
Checking Jupiter X Server Requirements Registering the Jupiter X Theme Installing Jupiter X Theme and Child Theme Installing Plugins Installing a Template How Jupiter X is Compatible With Major Plugins What Will Happen When I Switch From Jupiter to Jupiter X What is Elementor Alert Element Button Element Categories Element Countdown Element Counter Element Divider Element Flex Spacer Element Form Element Heading Element Image Element Icon Element Navigation Menu Element Photo Album Element Photo Roller Element Posts Element Posts Carousel Element Search Form Element Site Logo Element Shopping Cart Element Tabs Element Video Element Customizing the Elements Using Custom CSS How can I Copy/Paste a page section into a new page using Elementor How do I Enable Elementor for Custom Post Type? Upgrading Jupiter Theme to Version X Updating Jupiter X Theme and Child Theme Updating Plugins Clearing the Cache Optimizing to get the Maximum Speed Using Jupiter X SEO Considerations With Jupiter X Margins, Paddings, Borders Customizing Backgrounds Typography Settings Responsive and Alignment Options Display and Image Size Options How to Troubleshoot a Jupiter X Issue Jupiter X Migration Issues Overriding Theme Customizations inside the Pages Page options and templates Adding a New Header Choose Different Headers on Different Pages How to create and assign a sticky header to a page (using Elementor) What is Shop Customizer Checkout and Cart Product List Product Page Using Predefined Sidebars Footer Settings Widget Settings and Styles Translating the Theme Words Customizing the Elements Using Custom CSS How to Convert Pages to Elementor? How to correctly create full width page How to create and assign a sticky header to a page (using Elementor) How to create Header Style 2 from Jupiter in Jupiter X using Elementor How to Enable my Child Theme in Jupiter X? I have unwanted space on top and bottom of my page, what should I do? Will I Lose my Content if I Switch to Jupiter X What is Elementor What Will Happen When I Switch From Jupiter to Jupiter X How can I Copy/Paste a page section into a new page using Elementor How do I Enable Elementor for Custom Post Type? Search Form Element
Last Updated on
Tuesday, October 9, 2018
Search Form element allows you to add a search form anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.
Mostly uses in Header, footer, and sidebars. Creating Header and Footer and block templates. Use in Page templates such as 404, maintenance and search page. Use anywhere you want to show a search form (full screen or inline) In this article Displaying a Search Form Element
To add a
Search Form element to a page:
Add a new page or edit an existing one.
Click on Edit with Elementor button.
From the left dashboard, search for a “Search Form”.
Drag and drop the Search Form element to your page.
A new dashboard on the left will open with the element’s settings. These are explained below. Content
Setting Description Skin Choose between a Classic or Full Screen style search form. Placeholder Add your custom placeholder inside the search form. Choose Icon Add your custom icon for the search form.
To add a search form inside the header:
From the WordPress left menu, click on Elementor.
Next to My Templates title, click on the Add New button.
For the template type select Header and give your header a name.
Click on the Create Template button.
Follow the “ Displaying a Search Form Element” section in this article to simply add the search form to your newly created header.
Simply follow the section above called “
Adding a Search Form Inside Header“, but on step 3, for the template type select Footer. Responsive Options
You can choose to have different settings on different screen sizes for some of the Search Form element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.
At first you’ll see the icon for desktop layout only
But when you click that icon, you’ll get two more layouts: for tablet and phone.
To learn more about it, please check
this article. Was this helpful?
You can vote again after 1 hour
Need custom services? Hire us and have your coffee! PSD 2 WordPress. Content Management. Custom coding.