Create Search Page Layout Using Elementor

  • Go to AE Template -> Add new to create a new AE Template, which will be used for search layout.
  • Do the following settings for AE Template.
    • Render Mode: Search Template
    • Enable Canvas: Select this if you want to use the Elementor canvas for the search page.

      Create Search Template

  • Edit it with Elementor
  • To display search keyword and result count, you can use the following shortcode with the text editor widget of Elementor.
    • [AE_SEARCH_KEY]: to show search keyword
    • [AE_SEARCH_COUNT]: to show the search result count

      Sample Use: You have searched for [AE_SEARCH_KEY]

      [AE_SEARCH_COUNT] results found.

      Sample Layout

  • For search results, you will have to use AE - Post Blocks Adv widget with the following configuration.
    • In the Layout, section selects the layout style for the post blocks, choose the Skin as Grid, Carousel, or Accordion. 

      AE-Post Block Adv: Layout Settings

    • Primary Block Layout:  Choose a created Block Layout
    • Do the other configuration settings accordingly.
    • Then, under the Query Section, select Source as Current Archive.

AE-Post Blocks Adv: Query Settings

  • You won't be able to preview the result part, so temporarily switch the Source in AE - Post Blocks Adv to "Posts." This will show you all posts. 

    Configure the rest of the settings of the Post Blocks Adv widget, and once done, switch back source to "Current Archive."

  • DONE!! Now search on your site, and your search page will reflect this design.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us