Career Site Builder: Widgets overview

Available for	Roles	Super Admin, Admin, Team Member, Limited Team Member, Interviewer Limited to 5 users per Lever instance
	Packages	Standard Career Site Builder

---

Adding widgets

To add widgets to a site, drag and drop them from the left panel or from the context menu.

Adding widgets from the widgets panel

To add widgets from the left panel:

1. In the left panel, click Widgets to open the widgets panel; search for widgets by browsing through the list or using the widget search bar
2. Click and drag the widget to the location you want in the site; a blue placement indicator appears
3. The widget appears in the location shown by the blue placement indicator

Adding widgets with the context menu

To add widgets using the context menu:

1. Right-click any widget and select Add widget below in the context menu to add widgets immediately below the current widget
2. If you are right-clicking on a column, click + Add, and select Add widget below
3. Select from the four most popular widgets or click More widgets to open the full menu; after adding the widget, you can edit it as usual

When dragging-and-dropping a widget to your site, note the text in the blue placement indicator:

• Insert here - The widget will be added to an existing row or column
• Insert in new row - A new row will be added and the widget will be placed inside of it
• Insert in new column - A new column will be added and the widget will be placed inside of it

Editing widgets

Editing widgets allows you greater control over what features your site has and how these features behave. To edit a widget, hover over the widget, and right-click the widget to see the context menu. Every widget has different options, but the following are common to almost every widget:

Edit design

You can change the style of the widget, including color, text, images and more, as well as change the blank space surrounding the widget. Click a widget, and click the Design tab.

Edit HTML/CSS

Allows you to make changes to the widget's HTML or CSS. We only recommend this option if you are comfortable with these languages. Right-click the widget, and then click Edit HTML/CSS.

Entrance animation

Allows you to customize how the element appears on the screen; for example, fading in, bouncing in, or zooming in. Right-click the widget, click Entrance Animation, and select an animation.

Select container

Selects the column or row this widget is contained in, allowing you to easily find and edit it. Right-click the widget, click Select Container, and select Column or Row.

Copy and paste

Copying a widget saves it so that you can paste it later in another location. The paste option only appears if you have a widget that has been copied. Right-click the widget, and click Copy or Paste.

Hide on device

Use the hide on device feature to change your content depending on the device your visitor uses to access your website. For example, show a click-to-call widget for mobile users or a contact form for desktop users. Widgets hidden by the Hide On Device feature are not deleted; you can see all of the hidden elements on a page by clicking Unhide Elements at the bottom of the left panel. Right-click the widget, click Hide On Device, and select a device.

Set as anchor

Anchor links let you send visitors to a specific section 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 want to reference. For more information about anchors, see Anchor Tags and Links. Right-click the widget, and click Set As Anchor. For more information, refer to the 'Anchor Tags and Links' section in our widget types article.

Delete

To delete a widget, removing it from all devices, right-click the widget, and click Delete.

Alignment

Set whether the widget is aligned to the left, right, or center of its area. Some widgets behave very differently in different views. Check the way your widget displays in each view after adding it to make sure it displays correctly. To set the alignment, right-click the widget, and click the Align Left, Align Center, or Align Right icon.

Widget design

Most widgets in the editor have design options that enable you to customize the widget's appearance for your site. These options can help you create a widget that perfectly matches the style of your site, or one that stands out and attracts visitor's attention. Not all widgets have the same options. For example, some widgets do not allow you to edit inner spacing, others do not let you change outer spacing.

To open the Design Editor of a widget on your site, right-click on the widget to open the context menu and then click Edit Design. You can also open the Design Editor by clicking on the widget and then clicking Design at the top of the widget window.

Layout

Layout options are usually specific to certain widgets. To select from the set of layout options available for that widget, click the layout that appears in the Design Editor (or click the small arrow beside it) to open the Select Layout menu. To change the selected layout, click the layout you want to use instead and it will be updated in the widget.

Style

• Color - Click the round color icon to the right of the section name to open the color picker and change the color
• Border Style - Change the width of the border using the slider or text box
• Background Style - Use a background image or video for this widget using the Choose and Place
• Images dialog or a video URLWidth and Height- Use the slider or text box to change the number of pixels
• Rounded Corners- Increase or decrease the rounded the corners on a widget
• Shadows - Toggle on or off a shadow for this widget

Spacing

Change the inner spacing (spacing inside the widget edges) and outer spacing (spacing outside the widget edges). Each number in the outer box sets the outer spacing for its own side (top, bottom, left, or right), and each number in the inner box sets the inner spacing for its own side (top, bottom, left, or right).

Inner and outer spacing

Inner spacing and outer spacing are the space around a widget. Inner spacing is also known as padding, and is the space inside these borders. Outer spacing is also know as margin, and is the space outside of the element's borders. When you adjust the inner spacing and outer spacing of a widget, you change its placement and appearance. This can make your site look more customized and professional.

To adjust the inner and outer spacing around a widget:

1. Right-click on any widget, element, column, or row, and then click Edit Design
2. Click the Spacing tab

Inner spacing

To change the inner spacing (padding), click and edit the numbers in the inner box. You can also click on one of these numbers and use the slider to adjust the size.

Outer spacing

To change the outer spacing (margin), click and edit the numbers in the outer box. You can also click on one of these numbers and use the slider to adjust the size.

Inline editing

The editor allows for inline editing for your site which helps speed up your workflow. You can quickly edit and access the options for any widget, column, or row with the click of a button.

Context menu

Everything in the editor has the option to open up a context menu. To open the context menu, right-click any widget or space in the editor.

Select container

If you are having trouble selecting a container (column or row) in the editor, click a widget and click Select Container to select the column or row.

Alignment

Align elements by clicking the alignment icons. You can align items left, center, or right.

Clear padding

To remove extra space around columns or rows in your site, click Clear Padding. This is useful if you are trying to tighten up the space around your content.

Copy and paste

You can copy any widget or container and paste it anywhere else on your site.

Rearrange columns or rows

To rearrange columns and rows, right-click the column or row, and then click the navigation arrows at the top of the context menu.

Rearrange widgets

To rearrange widgets, click and drag them to another column or row in your site. Once you click to drag, a blue box will indicate where it will be placed after letting go of your mouse.

Snap to align

While resizing elements within the same column, the editor attempts to snap to align them to be the exact same size. You will notice that as you resize, the widget will jump ahead or behind to snap to location. This should make it easier to make elements the exact same size.

Snap to grid

The snap to grid system can help you lay elements in the pages of your site with professional precision. This system allows you to align elements horizontally and vertically within columns and rows. Rulers appear when moving an element in its row or column, or when resizing the element. The aligned elements are marked with a colored border. An element may be aligned to more than one other element, depending on the specific use-case. Note that alignment is supported by the views of the three different devices (desktop, tablet, mobile).

Resize widgets and containers

You can resize most widgets and containers by hovering your mouse over them and interacting with the handles around the widget or container. The white handles add margins, either vertical or horizontal, to move an element. The blue handle, located in the lower right, resizes the element.

Adding animations

Entrance animations let you animate widgets and page widgets when they are first loaded on your site. Motion and interactivity makes your site more memorable and can emphasize the sections you want visitors to focus on, like a phone number or a contact button.

Additionally, you can control where the animation starts and ends on the screen by using the Scroll settings.

When adding animations, keep in mind the following:

• Too many animations can disorient or distract users, so use them sparingly.
• When removing an animation, remember that animations can be applied to rows as well as widgets, so the animation you are seeing might have been added somewhere unexpected.

To add animations:

• Right click any row or widget to open its context menu. Or, if you are in flex mode, right click an element and select Edit design
• Hover over Animation and select one of the following:
  • Entrance - Select an entrance animation from the list that animates widgets when they are first loaded on the site.
  • Scroll - Select an animation from the list to animate widgets when the user scrolls to the widget.
  • Customize - Select the trigger for the animation (either Entrance or Scroll), and select an animation from the list. Customize is not an option when in flex mode.
    • For entrance animations, then select the Duration, Delay, and Intensity for the animation.
    • For scroll animations, then select In or Out, Direction, and Intensity.

To reset the animation, click Default Settings.

If you use a scroll animation, you can click Pause Animation in the side panel to pause all animations while you are in editing mode. The animations will still be active in preview mode and on the live site.

Removing animations

To remove entrance animations:

• Right-click any row or widget to open its context menu
• Hover over Animation, and then hover over Entrance or Scroll, and select None

Blog widgets

The following blog widgets are available: All Posts, Recent Posts and Search Posts. These widgets make your blog accessible from any location on your site. Any blog widget can be added to any post on your site. For example, you can add the All Posts widget for your home page and to your blog.

All Posts widget

The All Posts widget is added by default to a new blog page when you add a blog to your site from the blog menu. By default, it shows a list of every post on your blog. You can customize the All Posts widget by adding other widgets to modify the page. To add other widgets, in the left panel, click Widgets, and click and drag the desired widgets onto your blog. The All Posts widget allows you to display posts from your blog anywhere on your site, boosting blog traffic and engagement. Note that your site must have a blog before you can add this widget.

Customizing the All Posts widget

Content editor
All of the post content can be controlled in the blog settings. In the content editor, you can control what post information to show. You can also manage and add new posts from here.

Design editor
In the design editor you can control image size, background color, text style, number of posts to show, hover effects, and more.

You can also select the number of visible teaser lines. Teasers are short post summaries, taken from the first paragraph of the blog or the blog settings.

If there are more posts than displayed, the More Posts button appears. You can customize the button text, background, and position. You can also hide it.

Search Posts widget

The Search Posts widget allows visitors to search for specific posts or themes in your blog so that they can easily find articles that interest them. The widget only searches for words in blog post titles; it does not search the content of posts.