Career Site Builder: Basic widgets

Follow
Available for Roles Super Admin, Admin, Team Member, Limited Team Member, Interviewer
Limited to 5 users per Lever instance
Packages Standard 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. Widgets are the building blocks of your site. In this article, you will learn about the different types of basics widgets that you can add to your career site. For guidelines on how to use widgets on your career site, including adding and editing widgets, refer to our widgets overview article. Click below to reveal the full list of basic widget types:

Text editor

Use text tools to change the look of a Text or Title widget. Change the font, color, alignment and style of text using a simple editing interface. This lets you quickly make style changes to specific text on your site to highlight key points and organize information.

To add text to your site, in the left panel, click Widgets, and then click and drag the Text widget into your site and start typing.

To edit text on your site:

  • Click the text you want to edit to open editing mode.

Text formatting toolbar

  • Select the text you want to edit by clicking and dragging over the text.
  • Use the inline editing options in the bar above the text to edit text styles, sizes, fonts, alignment, or add links.

Adding bullet and number lists

Create a bullet or number list using the text tools inside the Text widget. Lists are a good way to group content, features, or products so that visitors can quickly understand and compare information.

To add a bullet or number list:

  • Click the text you want to make into a list
  • Highlight the text, and click the Bullet list or Number list icon on the text toolbar
  • To create nested bullets and lists, press the Tab button on your keyboard; the bullet or number is shown indented to the right
    • You can have multiple nested bullet and number lists

Design editor

To access the design editor, right-click the text widget, and click Edit Design. The default text design is based on the site theme settings. Any changes to specific text overrides the site theme settings. For more information, see our article on theme text. For information about design options that are not specific to this widget (for example, layout, style, or spacing), refer to our our widget overview article.

HTML tags

Due to HTML5 best practices, it is not possible to update the HTML of text with a non-supported tag. To add a specific style to the text, we recommend adding it to the CSS. The following tags are supported via developer mode: <img>, <sub>, <sup>, <blockquote>, <code>

Troubleshooting and limitations

The following may cause the update to the new text editor to fail:

  • Custom code where the HTML is not valid.
  • Maximum site CSS storage capacity has been reached.

When using the text editor, also keep in mind the following limitations:

  • There is no option to add a list with heading text.
  • Bullets of items in a list that have more than one fonts size will use the site theme size.

Title widget

Titles are output as H1-H6 tags and are good for SEO. To add title widgets:

  • In the left panel, click Widgets
  • Click and drag the Large Title widget or Small Title widget into your site content area

Titles vs text

The most common question is which widgets should you use for your site - title or text? The answer depends on exactly what text you are creating.

  • To create a headline or slogan that needs to stand out, use a Title widget. Title widgets can be assigned special styles in the Site Theme section so you can use them to really draw attention to certain parts of your site. You can have 6 assigned styles for titles. Keeping track of these will help you create your site faster by allowing you to make changes globally with the click of a button.
  • To create a block of text, use a Text widget.

The Text widget has normal spacing and is suited to the normal text. Titles have larger spacing. Use titles to draw attention to a part of your site.

Large and Small titles

The large and small title widgets are essentially the same widget, but with different default settings.

  • A large title widget inserts text with H1 styles applied by default
  • A small title widget inserts text with H3 styles applied by default

Text options

Each text widget (text or title) comes with two adjustable options. One set can be adjusted inline while the other one opens a popup menu with additional options.

Inline options

Inline text options diagram with each inline option labelled number 1 through 19.

The inline options for text are:

Number Option Description
1 Move Move the bar for easier editing (Changes UI only)
2 Bold Apply a bold style
3 Underline Apply an underline style
4 Italics Apply an italicized style
5 Font color Change the font color
6 Font size Change the font size
7 Font family Change the font family
8 H styling Title widget only, switch from H1 - H6
9 Font weight Similar to "bold", change the font weight or thickness
10 Alignment Change the text alignment (left, right, center)
11 Line spacing Change the line spacing or space between each line
12 Link Add or change a link
13 Bullet list Create a bullet list
14 Numbered list Create a numbered list
15 Direction Change left to right or right to left
16 Remove formatting Reset text to default layout (defined by site theme styles)
17 Undo Undo edit
18 Redo Redo edit
19 Done Save changes

 

Popup options

Popup options modal with arrows pointing to different options labelled 1 through 4.

Number Option Description
1 Color Open the color settings
2 (Color tab) Background color Change the background color
3 (Color tab) Border style Change the border style
4 Spacing Change the spacing for the element

 

Popup options modal with arrows pointing to different options labelled 1 through 3.

Number Option Description
1 Image Open the image settings
2 (Image tab) Background image Set a background image
3 (Image tab) Border style Change the border style

 

Button widget

Buttons are the easiest way to get site visitors to take action. Buttons can lead visitors to another page on your site or to a page on a different website. Buttons can also open a popup, contact form, online reservation, email address, and more.

Content editor

To access the content editor, right-click the widget, and click Edit Content:

  • Type the text you want to display on the button in the field provided
  • Select from the following options where the button links to:
    • Existing Page - Send the visitor to an existing page on your site
    • Website URL - Send the visitor to a specific URL
    • Popup - Open a popup; choose from popups located in Pages & Popups or create a new popup
    • Anchor - Send the visitor to an anchor on any page on the site.Store link; prompt the visitor's device to open the store login, shopping cart or product page
    • Email address - Prompt the visitor's device to open an email client with a specific email address
    • Click to call - Prompt the visitor's device to call a specific phone number
    • File for download - Prompt the visitor's device to download a specific file

Design editor

To access the design editor, right-click the widget, and click Edit Design. Use the design editor to choose between the different button layouts, make edits to the button style (width, height) and button text (font, text size), and adjust the inner and outer spacing.

Floating buttons

To make a button visible at all times, even when a visitor scrolls down the page, click the Floating toggle.

Add a button background

You can add a background color or image to a button. Adding a background using the theme button design menu changes the background of all buttons. Adding the background to an individual button will change the background for that single button.

To add a background to a specific button, on the design editor, click the Style tab, and then scroll to the background section.

Add button icons

Choose from our font-icon collection to decorate your buttons or navigation menu. Icons make it easier for visitors to identify buttons without needing to read their labels. Icons can be colored and combined with text to make unique buttons that will attract visitors' attention. Note that only some button or navigation layouts support icons. Try various button styles to achieve your desired look.

To select icons for your buttons:

  • Right-click the button widget, and click Edit Design
  • In the Layout section, click the button to open the 'Select Layout' menu and select a layout style that supports an icon
  • Scroll down to the Style section. Ensure the 'Show Icon' option is enabled.
  • Click Choose to open the Icon Picker.
  • Click an icon to add it to your button or navigation. To more easily find an icon, type a subject or name in the search field, or use the drop-down.

Breadcrumbs widget

The Breadcrumbs widget can be added to a site so the site visitor can easily understand their location and explore the site effectively, and as a result improve the site's SEO. The Breadcrumbs widget displays the site hierarchy on a trail based on the user's current location. Breadcrumbs should not be used on sites with flat hierarchies (only 1 or 2 levels deep). In this case, the navigation bar can clearly indicates what section a page lives within.

 

The Breadcrumbs widget cannot be used in fixed headers. For other header types, the header must be converted to a row before you can add the Breadcrumbs widget.

Breadcrumbs displays the names of the following:

  • Pages and sub-pages
  • Folders
  • Dynamic pages

For the Breadcrumbs widget to display dynamic pages, you need to enable the 'Show on all' setting:

  • In the left panel, click Widgets
  • Click and drag the Breadcrumbs widget into your site
    • If you are working in Flex mode, point to the container, and click the plus icon (+) to select the Breadcrumbs widget.

Content editor

To access the content editor:

  • Right-click the widget, and click Edit Content
  • Select the items you want visible on the breadcrumbs; you have the following options:
    • Home Page - Always show the home page in the breadcrumbs
    • Current Page - Show the current page in the breadcrumbs
    • Hide the breadcrumbs when there isn't a parent page - Enables breadcrumbs for all pages except the homepage or pages on the first level of navigation

Design editor

To access the design editor:

  • Right-click the widget, and click Edit Design
  • In the Links section, select the font and text options
  • Select a Divider style for the divider between each page in the breadcrumbs
  • In the Current Page, Hover, and Folder sections, select a font color and font format

Icon widget

Select from a library of more than 1000 ready-made icons, or upload your own SVG file. You can change icon color, hover, background, border and more. Use icons to emphasize your text and balance the layout of your site.

Content editor

To access the content editor, right-click the widget, and click Edit Content:

  • Click Choose Icon to select a ready-made icon, or click Upload SVG File
    • SVGs are image files that contain HTML code, meaning when you add an SVG icon to your site you are also adding lines of code. Multiple complex SVGs can add thousands of lines of code and cause your site to load slowly. If you need to use multiple SVG icons on the same page, we recommend turning some of them into regular images (.png, .jpeg, etc) to avoid loading or functionality issues. SVG files can be resized without losing resolution.
  • To link the icon, click Link Icon, and select the page you want to link the icon to
  • Type alt text for the icon
    • Alt text enables search engines to recognize image content. Use text that clearly describes the image.
  • Type a tooltip for the icon. The tooltip text displays when a user hovers over the image.

Design editor

To access the design editor, right-click the widget, and click Edit Design. In the design editor, you can make changes to the layout of your icon, adjust the icon size and color, and make changes to the spacing of the widget.

To make the icon a floating widget, enable the 'Floating' toggle, and select a position for the widget. To display the floating button on the current page only, enable the 'Show on this page only' toggle.

Table widget

The Table widget allows you to display text data in a table layout with rows and columns. Content can be added to the table by copying and pasting an existing table, using the editor, or uploading a CSV. The table can include up to 30 rows and columns. You can upload a CSV exported and copied from Google Sheets or Excel (non-RTL languages only). The table can only include text and links. Use rows and columns or List widgets to create a table with images, buttons, or other widgets.

Content editor

You can add data to your table three ways:

  1. Typing in the editor
  2. Copying and pasting an existing table
  3. Uploading a CSV

Live image of data being added to a table through the content editor

Use Clear All to clear all data from your table.

Design editor

With the design editor you can customize the table border, title bar, first column, background color, and text style. The first column can be customized to have its own background color, font type, size, and color. Even and odd row colors can also be customized to make data easier to read. Column width can be set as equal or based on the width of the title, in which case the columns may not be equal.

On mobile you can select one of the following displays:

  • Squish - This is best to use if you have 2-3 columns, fitting your content to the screen width
  • Scroll - This is best to use if you have many columns; you can also resize the widget and show a vertical scroll if your table is too long
  • Collapse - Another detailed way to present your data; recommend not to choose this layout if you have too many rows

Add connected data

You can display data from a collection in a Table widget. The Table widget can connect any collection type: internal, external, Google Sheets, Airtable, or images. Using connected tables allows you to create sites faster when using connected templates. You can also easily edit data directly in Google Sheets or Airtable, instead of using the Table widget content editor.

If there is a dynamic page that is connected to the same collection as the table, the dynamic page will automatically be linked to the table. Clicking the row navigates you to the dynamic page item.

Connected tables support the following field types:

  • Rich text
  • Plain text
  • Image
  • Link
  • Number
  • Date and time
  • Email
  • Multi-select
  • Phone

To connect a Table widget to a connection:

  1. Right click the Table widget
  2. From the context menu, click Connect to data
  3. Select a collection from the dropdown menu
  4. Select the required fields from the Fields to display dropdown. The columns will be ordered in the same order they were selected.
  5. Click Done

Navigation and sub-navigation links

Add the Navigation Links widget to your site to generate an all-inclusive navigation menu with links to all pages on the site, or build you own menu with only most useful links. Well-structured navigation guides your site visitors and help them quickly locate the information they are looking for. Navigation can have up to 3 levels. To learn more about the navigation menu and sub-pages, see the following video:

Content editor

To access the content editor:

  • Right-click the widget, and click Edit Content; select one of the following:
    • Site pages - Populate the content of the navigation links with site pages, navigation folders, and anchors. This menu will be generated automatically based on the site pages. This is a quick way to place basic navigation on your site. To edit the pages in your site, click Go to Pages.
    • Custom links - Build your own menu with custom links. This option allows great flexibility in creating quick navigation bars to add inner page navigation, footer navigation with only most useful links, social accounts menu, and more.
  • If you select to create navigation with Custom links, the editor will prompt you to populate the list of links with custom elements. Add folders and items to link them to external pages, internal pages, and anchors.

Design editor

To access the design editor:

  • Right-click the widget, and click Edit Design
  • On the Layout tab, you have the following options:
    • Select an Orientation for the navigation
    • Click the navigation layout to select a layout for your site navigation
    • Click the sub-navigation layout to select a layout for the sub-pages in your navigation
  • On the Pages tab, click All pages; you have the following options:
    • Link Style - Configure the background color, space between items, navigation item direction, and select a divider style
      • When the Quick Navigation option is enabled the header and footer will not be reloaded when you switch between pages.
    • Link Text - Configure the font for the link text
  • On the Pages tab, click Selected Page & Hover; you have the following options:
    • Effect - Select a display effect for the selected page. Some effects including further customizations.
    • Link Text - Configure the font for the link text
  • On the Subpages tab, you can customize the sub-navigation style:
    • Link Style - Configure the background color, shadow, spacing between items, and divider
    • Link Text - Configure the font for the link text

Anchor tags and links

Anchor links let you send visitors to a specific sections of the page, making it easier for them to get from place to place on a longer page or to a specific section that you would like to reference. Anchor links are very useful for letting users skip past content that may not apply to them, keeping them focused on what is important to them. Note, anchors cannot be added to content in the Footer or blog posts.

Add anchors

To add an anchor on your page:

  1. Right-click a widget or row to open the context menu
  2. Click the gear icon (⛭), then select Set As Anchor
  3. Type an Anchor Name; to add the anchor to the site's navigation, select Add to Site Navigation
  4. Click Add

Link to an anchor

To add a link to an existing anchor:

  1. When creating a text or button link, select the Anchor option
  2. Select the page the anchor is on, and select the anchor from the drop-down

Delete or edit an anchor

To delete or edit an existing anchor:

  1. Right-click widget or row with the anchor to open the context menu
  2. Click the gear icon (⛭), then select Edit Anchor
  3. Click Delete anchor or edit the anchor as necessary
  4. If you edited the anchor, click Update to apply the changes

Text & image widget

The Text & image widget allows you to add an image with wrapped text into your site. You can move the image anywhere in the container and the text will automatically wrap around it.

Content editor

To access the content editor:

  • Right-click the widget, and click Edit Content
  • Select Left or Right for the image position
  • Click + Image to select an image from the Image Picker; you have the following options:
    • Link Image - Images can be linked to other pages and URLs, popups, anchors, email addresses and downloadable files. When a visitor clicks on the image, they will be taken to the link.
    • Alt text - Enables search engines to recognize image content. Use this text to describe the image.
  • Type the text you want to display around the image in the Paragraph field

List widget

The List widget allows you to display content in one of several pre-formatted layouts, making it easy to organize information or content for your site visitors.

Content editor

To access the content editor:

  • Right-click the widget, and click Edit Content
  • Select to include an Image element and Link element to be associated with each item on your list
  • Click Build your list to start adding content
  • Click Add Item to add additional items to the list
  • Type a title in the Main list title field provided
  • Click an existing list item to open the List Settings; you have the following options:
    • + Image - Click to add an image
    • Item label - Type the item label; to hide the label, click the eye icon
    • Description - Type a description for the item; to hide the description, click the eye icon
    • Add link - Click and select the type of link you want to add to the item
    • Text on link - Type the text to display on the link; to hide the text on the link, click the eye icon
  • Re-order the list items by clicking and dragging on the 3 dots to the left of each item
  • To return to the first page and set if links and images are displayed, click click here to change elements

Design editor

To access the design editor, right-click the widget, and click Edit Design:

  • Click the Layout tab to select a layouts for the list
  • Click List Title, Item Title, Item Description, or Link to control the text styling for those fields
  • Click Image to modify the images border and give images rounded edges
  • Click Divider to select from several different divider styles

Accordion widget

The accordion widget helps visitors find exactly the information they are looking for easily. Add it to your sites and visitors do not need to scroll through blocks of content they are not interested in. Instead, they can be shown a list of questions or titles and simply choose to open the ones they want to read more about. Create compact and easy-to-read FAQs, product highlights, or upcoming events.

Content editor

Adding the widget opens the content editor. In this menu, you can add or modify the fields of the widget.

  • Items - Click an item to configure the Title, Description, and Title Heading Type. Header tags are available to make your text more easily identifiable by search engines. It is recommended you select H3 for the Title Heading Type.
  • Show first item expanded or Only show one item expanded - The content editor also provides the option to select whether you prefer to hide the content of all items in the accordion or display only the first item when users first open the widget. In addition, you may choose whether visitors can expand only one item at a time or can view several expanded items at the same time.
  • Title icon - Depending on the layout you choose, your accordion widget may have a title icon. The title icon is the icon next to the item title, and may be different across all items. For example, you may want to set add a clock icon next to your event time, or a money icon next to a pricing item.
  • Generate FAQ Schema Markup - Enable this toggle to generate FAQ schema markup once per page. To test if your schema was generated properly and see a preview, use the Rich Results Test.

Design editor

The design editor lets you control the layout and styling of the accordion widget. To access the design editor:

  • Right-click the widget, and click Edit Design
  • Edit the design options of the expandable icon; the expandable icon appears on all items in the widget, and corresponds to the icon you click to expand the item.

Changing the layout of the accordion widget may override some of the settings you have defined (for example, spacing between items). Check all settings after editing the widget and recreate any ones that are missing after you change the layout. When editing the icons, take note of the type of icon you are editing. The title icon is the icon next to the item title on certain layouts. Make sure the design settings you define are correct per device. As usual, settings such as spacing (of the whole widget and individual items), width and more are defined per device.

Tabs widget

The Tabs widget is an excellent way of displaying content efficiently on your site. Visitors can click between tabs (rather than scroll through text) to view related content. Tabs are a great way of showing content in compact, connected sections. Each tab can contain a label, title, description, image and button, and each of these elements can be fully customized.

Content editor

To access the content editor:

  • Right-click the widget, and click Edit Content
  • To add a new tab, click Add Tab
  • To edit the tab label, label heading type, title, description, image, and button, click the tab
    • Header tags are available to make your text more easily identifiable by search engines. It is recommended you select H3 for the Label Heading Type.
  • To display images on the tabs, click the 'Show image' toggle

Design editor

To access the design editor:

  • Right-click the widget, and click Edit Design
  • Click the layout to select a different layout for the tabs
  • Click All Tabs to customize the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile
  • Click Selected Tab & Hover to customize the text style and background; this does not affect the All Tabs design
  • Click to change the Description Style, Button Style, and Image Style

You can have as many tabs you want, but keep in mind that the space for each label is reduced with each new tab.

Mobile view

There are 2 layout options for mobile display, tabs and accordion. The tabs layout can be controlled by swiping. However, not all mobile browsers support swiping behavior, in which case you can use the accordion view on mobile.

To change the Tabs widget for mobile:

  • In the top navigation bar, click the device view to switch the view to mobile
  • Right-click the widget, and click Edit Design
  • Click All Tabs, and then click the 'Display as Accordion' toggle

Countdown widget

Increase engagement and create a sense of excitement with the Countdown widget that enables you to add a real-time countdown to your site. Use it to keep visitors informed, build interest, and encourage them to take action by letting them know when a sale, event or promotion is going to end, or when a new product, collection or page is going to launch. Note, countdowns can be only be  configured to end on an hour (e.g. 6:00 PM).

Content editor

To access the content editor:

  • Right-click the widget, and click Edit Content
  • Set the date and time the countdown ends; select a timezone.
  • Type a Time's up message that appears after the countdown ends
    • Select to Show counter at 0000 and message beneath it, or to Remove counter and display message only.
  • Type a Title for the countdown; to hide the title, click the eye icon

Design editor

To access the design editor, right-click the widget, and click Edit Design. Click the layout to change the way the countdown displays on your site. Make sure the design settings you define are correct per device. Settings such as spacing, image size and more are defined per device.

Copyright widget

The copyright widget allows you to place a copyright disclaimer with the copyright icon and current year on your site. The year will automatically update to the current year, and by displaying the correct copyright year it shows your visitors that your site is up to date. Almost every site has a copyright notice which gives basic information about the site.

Content editor

To access the content editor:

  • Click the widget to open the editor modal, defaulting to the 'Content' tab
  • Type the text you would like to have displayed in the description field provided
  • Click the 'Reverse icon/year position' toggle to have the year and copyright icon appear to the left or the right of the text; the default is to the left

Design editor

To access the design editor, right-click the widget, and click Edit Design:

  • Select the font and color settings for the text
  • Adjust alignment and text direction
  • Edit the spacing of the widget

Spacer widget

Visually breaking up your content makes it easier to read and improves the overall look of your site. The Spacer widget allows you to quickly add vertical blank space between paragraphs, images, or other widgets. Spread out your information and content to create a professional web page.

Another way to space your widgets and content is using the blank space feature built-in to each widget. For more information, refer to the 'Widget design' section of our widget overview article.

Design editor

To access the design editor, right-click the widget, and click Edit Design. Move the slider to change the height of the spacer.

File widget

To share downloadable content with your visitors, use the File widget to upload a file that your site visitors can download with the click of a button. Share flyers, ebooks, and other documents by having them available for download. Your site visitors can share your download links easily through other sources, such as email and social media. Before offering content to download, make sure that you understand that your content could be spread without your knowledge. For documents that are sensitive or personal, think twice before sharing these documents via download. Only upload media or files that you have created or have permission to use; never violate copyright protections.

 

Any file (text, image, video, and so on) uploaded to the system is publicly available. No personal and/or confidential information should be uploaded. To remove the file completely, delete the file from the picker.

Content editor

File names must use standardized characters (a-z and 1-9), or they will not be recognized by the editor. The following file formats are supported: .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar

To access the content editor:

  1. Right-click the widget, and click Edit Content
  2. Type text to appear on the button
  3. To add files, click + Files
  4. The Uploaded Files window appears; to add files, click Upload New File; you can add multiple files to upload simultaneously
  5. Drag your files or click Choose files to add files or folders; files can also be downloaded from Dropbox, Google Drive, a link, or Gmail
  6. When the files have been selected, click Upload; you will be notified when the upload is complete

Design editor

To access the design editor, right-click the widget, and click Edit Design.

Was this article helpful?
0 out of 0 found this helpful