|Super Admin, Admin, Team Member, Limited Team Member, Interviewer
Limited to 5 users per Lever instance
|Standard Career Site Builder, Premium Career Site Builder
Lever's Career Site Builder allows you to create your own custom career site connected to your Lever environment. You can use the builder to control the look and feel of your career site, ensuring that each candidate's experience aligns with your organization's brand. In this article, you will learn recommend steps for crafting your custom career site.
Step 1: Creating a Backup
As you develop your custom career site, you can save copies of your site called backups. Backups allow you to restore to saved copies at any point in time.
In general, it is a good idea to create a backup prior to making any changes. To create a backup:
- Click SEO & Settings
- Select Backup Site
- Name your backup and click Save
You can restore this backup in the future by navigating to the Backup Site section and selecting the backup you wish to restore.
Step 2: Choosing and Designing Your Header
There are three available header types. Each type of header responds differently as you scroll through your career site. Here is a breakdown of each header type:
- Sticky Header: A sticky header is a static headers that “sticks” in place as you scroll down the page. With this header type, users do not have to scroll up to the top of the page to see your logo, access navigation links, or access other header content – the header stays fixed to the top of the screen. To convert your header into a sticky header, hover over the header, click “Header”, and select “Set As Sticky Header”.
- Shrinking Header: A shrinking header is a special type of sticky header. Shrinking headers display as full-sized headers when a user is at the top of the page but shrink as the user scrolls down the page. This header type is particularly useful for sites with large headers: users can still access useful navigation information without being distracted. To convert a sticky header into a shrinking header, hover over the header, click “Header”, click “Edit Design”, and toggle “Enable shrinking header”. Under the toggle, you can edit the shrinking header background color, logo size, header spacing, and more.
- Flexible Header: A flexible header allows you to add navigation links, social icons, and other widgets to your header. Unlike the previous header types, flexible headers do not move with you as you scroll down the page. To convert your header to a flexible header, hover over the header, click “Header”, and deselect “Set As Sticky Header”. Make sure that the “Enable shrinking header” toggle is deselected.
Responsive Header Design
Our Career Site Builder has built-in tools to help you make your career site responsive to different device types and sizes.
- Header Logo: To update your logo, select the “Acme” logo and use the image picker to replace it. See our article on the Image Picker for more information. The image picker will only update the logo for one device type at a time. To update your header logo for other device types, select a device in the menu bar and update the logo using the image picker.
- Header Menu: By default, your tablet and mobile sites use an expandable header menu to store navigation links and other widgets. The menu button appears as three horizontal lines in the top right corner of the career site. Header menus offer more flexibility for smaller devices by storing links and widgets behind an unobtrusive menu icon. To edit the layout of the expandible menu for tablets and mobile devices, click “Theme” in the left panel, scroll to “Site Layout”, and choose a site layout option for each device size.
For large sites, it may be useful to add navigation links to the header. With navigation links, you can direct users to different pages in your site or to specific sections of your homepage. To add navigation links, click “Widgets” in the left panel and drag the “Navigation Links” widget into the header. After adding the widget to the header, click on the widget to edit its content and design.
Step 3: Site Theme (colors, fonts, buttons & typography)
The Site Theme panel lets you make changes that affect your entire site. You can customize your site's text, buttons, images, background, and navigation widgets from the design panel. This allows you to quickly and efficiently make sweeping visual changes, reducing design time and keeping your site's style consistent across pages.
To open the Site Theme panel, in the side panel, click Theme.
When the Site Theme panel is open, the canvas is automatically minimized to 50% view so that the entire canvas is visible while adjusting the site theme settings. If you want to return to 100% canvas view, click the drop down in the top bar and select 100%. The ability to zoom in or out is also available in preview mode.
Navigate through the subsections to update your site theme for Text, Colors, Buttons, Images, Rows and Columns, Background and Site Layout. See our article on Site Theme for more information on each of these sections.
Step 4: Updating the look and Feel of your Site
Each section of our Career Site Builder has been carefully crafted to provide a starting point. You have the ability to update each section to meet your needs or remove them altogether and replace a section to better highlight your brand and candidate experience.
In general, it is a good idea to review each section, and perform the following tasks if you plan to leverage the template starting point.
Your Career Site Header
- Update your Logo. To update your logo select the “Acme” logo and use the image picker to replace it. See Step 3 for additional information.
Update your copy: You can update the copy on the Hero Image by selecting it and typing your new copy. See our article on Theme Text for more information on making changes to the overall site theme.
Update your iconography: You can update the icons used in the department section by selecting it and choosing a new icon from the provided database or by uploading your own.
- Consider whether the departments section should be modified to highlight a location, project or another area of your organization
We’re committed to Diversity, Equity, and Inclusion
- The DE&I section can be updated with any content you’d like. If you’d like to replace the video, select the video and provide a new link from YouTube, Vimeo or DailyMotion. You can also upload your own content (up to 200MB).
- The team section can be customized by selecting the widget and completing the following steps:
- Update the Image
- Update the team member’s name
- Update the quote
- You can add as many team members as you’d like and they will be displayed in a rotating carousel.
Note: Premium template or above is required for full modification capabilities.
- Update the look and feel of the career opening widget by reviewing and updating the following configuration:
- Update available filters (Content tab)
- Update default layout - card or list (content tab)
- Reset button color (Design tab)
- Job Card Border (Design tab)
- Job Text (Design tab)
- Arrow Color (Design tab)
- More Button (Design tab)
- Animation (Design tab)
- Spacing (Design tab)
Keep in touch (Premium template and above only)
The Keep in touch section allows candidates to provide their contact information and resume if they don’t find a suitable job posting. Upon submission a general opportunity record containing the tag “General Interest Application” will be created in Lever. The copy, font, color and background can be customized.
Step 5: Managing Cookie Consent & Privacy via Usercentrics
Usercentrics is a Consent Management Platform that provides tools to collect and manage user consent to tracking technologies. With Usercentrics, you can ensure that your career site is in compliance with legal privacy requirements, such as the General Data Protection Regulation (GDPR).
Usercentrics is pre-installed for you and can be accessed via the “App Store” in the left bar.
You can click the open button enable the app and to adjust the messaging displayed to users in the Usercentrics privacy banner and preview the banner on your website by clicking the “Preview” button. You can upgrade to the paid Usercentrics app to have more control over the appearance and branding of the privacy banner.
When a user first navigates to your career site, they will see a banner prompting them to deny or accept your site’s tracking technologies. After the user responds to the banner, they will be able to change their consent preferences by clicking on the Usercentrics icon at the bottom of the screen.
Step 6: Editing SEO Settings
Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in a search engine's un-paid search results. Sometimes this is called "natural" or "organic" traffic. The better your site's SEO, the more likely it is to rank well in search results.
To edit your overall site's SEO, click Settings, and then click SEO. You have the following options:
- No index for the entire site. Tell search engines not to crawl your site so it won't appear in search results.
- Site meta title. This is displayed by search engines in their preview of your site. It is important for both SEO and social sharing. Try to limit this to 60 characters.
- Site meta description. Give an overview of the content and information the site provides. Search engines uses this to display as a description for the site. Try to limit to 160 characters.
- Note It is best practice for each page of your site to have a unique title and description. For this reason, we recommend entering your page title and description individually in the Page Settings menu.
- Custom sitemap, robots.txt & other files. While the platform automatically generates a sitemap.xml file as well as a robots.txt file for your site, you can replace them with this option. Other files can also be uploaded, such as an ads.txt file.
- Site Keywords. These are terms related to your site (for example, pizza delivery, for a pizza shop). Separate keywords with a comma.
- Note Search engines no longer use keywords to impact website ratings. All keyword usage should be considered optional.
Step 7: Adding Site Icons
You can customize the appearance of your website through favicons, social network images, and home screen icons. These site icons reinforce your brand identity and make it easy to pick out your site among numerous tabs. To edit your site icons, click the “Settings” icon in the left bar and navigate to “Site Icons.” There are three site icons that you can customize:
- Favicon: Your favicon appears next to the page title in the tab of your browser. Favicons help users recognize and navigate to your website, even when they have multiple tabs open.
- Social Networks Image: This is the image designated to display on social networks when sharing your site.
- Home Screen Icon: This icon appears on mobile and tablet devices when your site is bookmarked on the home screen. Users can save a link to your career site on their device’s home screen and open it as if it were an app.
Step 8: Designing Your Footer
The footer appears at the very bottom of your site and is the same on each page of your site. Footers generally contain useful information like social media links, contact information, and copyright information.
Hiding and Unhiding Your Footer
To hide your footer on a certain page, hover over the footer and click “Footer.” Then, click the “Hide footer on this page” toggle.
To unhide your footer, navigate to the left side panel and click the “Unhide Elements” icon under the Settings icon. Click the “Hide” icon on your footer, and select “Yes” to unhide the footer.
Step 9: Add Powerful Analytics Tools to Your Career Site
Your Career Site Builder comes with several analytics tools to help you better understand how users interact with your career site. There are three main methods of collecting user engagement information: built-in analytics, the Google Analytics integration, and Meta Tracking Pixels.
Your career site has a built-in analytics feature that collects key engagement metrics for all site visitors. From your career site dashboard, navigate to the “Stats” tab at the top of the page. From there, you can see detailed statistics about your visitors – which websites they come from, which browsers they use, which pages they visit, and more.
Your career site also integrates seamlessly with Google Analytics, enabling you to take advantage of Google’s suite of analytics tools. To add Google Analytics to your site, click “Settings” in the left panel and select the “Google Tools” tab. Enter your Google Analytics User ID in the indicated field, and your website will automatically send analytics data to Google, which you can then view from your Google Analytics account.
Meta Tracking Pixels
You can easily embed Meta Pixels into your career site to track important user interactions with your site, such as viewing a specific page, performing a search, or submitting contact information.
After you set up your Meta Pixel in your business’s Meta settings, Meta will provide you with snippets of HTML code to paste into your career site. This code should be appended to the end of each page on your website. You can add this custom code to each page in just one step by navigating “Settings” in the left panel and selecting the “Head HTML” tab. Paste the HTML code provided by Meta into the “Body end HTML” text field and hit “Save” to complete your Meta Pixel setup. (Note: Your code will look different than the code in the example screenshot below.)
Step 10: Publishing your Career Site
Once you have finished modifying your site to meet your needs, you will need to publish your career site so it can be viewed by candidates.
There are two options for publishing your site:
- Publish and use the default domain provided by Career Site Builder
- Publish and connect your site to your domain
Using the default domain
To use the default domain, select Default Domain, modify your site name and click Save.
Connect your domain
To use your own domain, enter the domain url and click Save, then follow the on screen instructions. Note: You’ll need to work with your IT team to create the required entries within your domain host.