Configuring a job search results block

Recruitment Marketing Public

You can configure a jobs search form with options for different filters and results layouts.

This block type is only available for use on a:

  • Job Page
  • Search Page
  • Blog Post Page
  • Candidate Settings Page
  • Not Found Page
  • Forbidden Page

Accessing the Page Editor

To access the Page Editor for these pages:

  1. From the side menu, under Content, click Web Pages.
  2. Click the Careers Website tab.
  3. In the Settings section, click the relevant item, e.g. Search Page.

Adding a job search results block

  1. In the Page Editor, click the Add Row icon to add a row of the relevant dimensions. Alternatively, if a Job Search Results block already exists, navigate to it and click the Edit Block button.
  2. Within that row, click the Add Block button.
  3. Select Job Search Results from the drop-down.
  4. Click the Edit Block button.
  5. In the Job Search Results pop-up, configure as required using the following sections. Refer below for design options.
    1. Filters - The available fields are:
      1. Workplace Types (Remote, Hybrid, On Site)
      2. Department
      3. Category
      4. Category Group
      5. Employment type
      6. Level
      7. City
      8. State
      9. Country
      10. Location
      11. Location Group
      12. Requisition Identifier
      13. Opening at (date/time)
      14. Opening on (date)
      15. Closing at (date/time)
      16. Closing on (date)
      17. Remote (To be removed)
      18. Hybrid (To be removed) 
        Note: The Category Group filter operates independently of the Category filter, and the Location Group filter operates independently of the Location filter.
    2. Configuration options:
      1. Filter values: Choose whether to show all filters or just those currently assigned to posted jobs.
      2. Counts: Choose whether the counts should remain static based on posted jobs or change based on selected filters.
    3. Layout - The available options are:
      1. Filter layout
      2. Results layout
      3. Location format
      4. Sort by
      5. Job results displayed per page
      6. Pagination position: Indicates whether to show results count and pagination controls above or below the search results.
      7. Enable "clear all filters"
      8. Enable "Sort by:" dropdown
      9. Enable active filters: Indicates whether the name of the selected filters is displayed below the keyword search box. Only available when using desktop filter layout.
      10. Display counts
    4. Search form:
      1. Enable "Jobs Near Me"
      2. Search button text?
      3. Advanced with CSS Class settings
  6. Click the Save button to keep the settings.

Design options

Filter Layouts

Side Panel

side panel

Dropdowns

drop-downs

Configuring drop-down filter size

By default, it is configured for 5 filters.

To adjust the drop-down size for 3 filters, add the following to your page's theme CSS:

.job-search-results-dropdown-filter-col {
  flex: 33%;
  max-width: 33%;
}

Configuring drop-down filter size

Results Layout

Table Layout

Table Layout

Card Layout

Card Layout

Card Layout2

Configuring card columns

By default, there are two columns of job cards if the screen width is larger than 576px, below this, it has a single column.

Adding some CSS to your page's theme can change the number of columns. The number of columns is responsive, and you can configure a different number of columns at different screen widths. In this case, it's 4 columns above 992px and 3 columns above 576px.

@media (min-width: 576px) {
  .job-search-results-card-col {
    flex: 0 0 33%;
    max-width: 33%;
  }
}

@media (min-width: 992px) {
  .job-search-results-card-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

The breakpoints you should use for configuring when to change the number of columns are 576px, 768px, 992px & 1200px.

Comments

0 comments

Article is closed for comments.