Career Site Builder: Media widgets

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 media 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 media widget types:

Image widget

Use the image widget to insert an image into your site. You can customize images to act as buttons and navigate to other pages or sites, download files, or activate popups. Images are a great way to decorate sites, show off products or storefronts, and create an additional way to communicate with visitors.

The following image file types are supported: png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp

A career site can contain up to 15,000 images. Additional images result in an error message. Image files should not contain spaces or special characters. When uploading photos to use in your site, make sure to get permission to use use photos coming from photographers, business, and other third parties. Note that using the image widget does not change the background picture. Instead, it ass a picture to a row or column.

Content editor

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

• To select an image, click the + Image; to select a different image, click Replace
• Choose between the existing stock photos in the gallery or click + Upload to add your own image; for more image choice options, click Full View; you have the following options:
  • Edit - Change image properties by using the Photo Editor
  • 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
  • Tooltip - Text shown when a visitor hovers over an image
  • Caption - Type a caption for the image

Design editor

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

Theme images

Changing image theme elements changes all image widgets to have a consistent design. Any changes to specific individual image widgets will be saved.

Photo gallery widget

The Photo Gallery widget makes it easy to add multiple images to your site. When images in the Photo Gallery are clicked, they can be opened in a lightbox gallery or linked to a page on your site, a website URL, a popup, an anchor, an email address or more. You can add titles, descriptions and alternative text to each image.

Add images

To add images to the photo gallery widget:

• (Optional) To enable links on gallery images, click the 'Enable links on gallery images' toggle at the top of the editor
• Click Add image
• Select any of the images you have in the image picker and complete the following:
  • Select the folder with images you want to use
  • Click the plus icon (+) to upload your own images
  • Switch to the Full View for more image options
• To edit the position, and add a title, description, and button to your image, click the image and edit the Image Settings
• Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the description box
• You can add links when the buttons are viewable

Photo gallery design editor

To customize the Photo Gallery, open the Design Editor.

• To change the gallery layout, click the 'Layout' tab; you have the following options:
  • Click the existing layout to see more design options for your photo gallery. Layouts are managed per-device and based on the current view in which the layout is selected.
  • Text can be added under images, on the hover, or on the image. Select Text/button under image, Text/button on hover, or Text/button on image, and then select a position for the text/button.
  • Select the Number of columns in the Photo Gallery.
  • To adjust the number of columns automatically to avoid white space, click the 'Auto adjust columns' toggle.
  • Select how many Visible rows you want to display.
• To change the image height and spacing between the images, click the 'Item' tab; you can also add rounded corners, display the full image on the gallery, add shadows, and change the image hover effect and animation; this is only applicable for certain layouts.
• To configure the frame style, add a background color, and customize the border, click the 'Frame' tab
  • To hide the share option, click the Hide share images toggle. This removes the share button users see when clicking an image.
• To change the inner and outer spacing, click the 'Spacing' tab

Add an Instagram feed

Users with a private or public Instagram account (not business accounts) can add an Instagram feed to the photo gallery widget. For more information, refer to the 'Instagram feed' section of our Social widgets help article.

Image slider widget

Add an image slider widget to your site in order to display a set of images one after another in a row or column. You can add multiple images to display as a slideshow. Instead of having multiple image widgets cluttering your rows and columns, use a single image slider widget.

Grouping all of your photos into one widget is useful and saves a lot of space. However, certain cases require single images. For example, you may need a paragraph explaining a single image that cannot be included in a group of images in the image slider. To learn more about the image widget, see the 'Image widget' section above.

Content editor

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

Add images

To add an image to the slider, click Add Image or by click any blank image spot. This opens the image picker. You have the following options:

• Select the folder with images you want to use
• Click the plus icon (+) to upload your own image
• Click Full View for more image choice options

Remove images

In the Content Editor, click the gray X at the top corner of the image thumbnail to delete it.

Image settings

Click to select an existing image in the 'Content' tab of the content editor. This opens the Image Settings.

You have the following additional options in the Image Settings:

• Add Link to Slide - Makes the whole image a button that can be linked
• Slider Title - Adds large text to the slider image
• Slider Caption - Adds smaller text to the slider image below the title text. Use the text editor to add color, emphasis (bold, italics and underline), and bullets to text in the caption box
• Button - Adds a button to the slider image that can be linked like a button widget
• Alt Text - Adds alternate text to display for SEO reasons or when the image cannot be displayed

To edit or replace images:

• To open the image picker and select a different image, click Replace
• To open the built-in image editor to add features and styles to an image, click Edit

Design editor

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

Transition

On the design editor, scroll to transition and configure the following:

• Slider transition - Select Fade or Slide
• Autoplay
• Slideshow speed - Move the slider to select a speed between 1 and 20 seconds
• Pause slideshow on hover
• Content animation - Select an animation from the drop-down list

Display full images

When images are added to the image slider, they will not be displayed in their natural dimensions. These images are displayed to fill the image slider dimensions, so images can become stretched or blurry. To display images in its natural dimensions, on the design editor, click Frame, and then click the 'Display full image' toggle.

Video widget

The Video widget allows you to to upload a video to your site or display YouTube, Vimeo or Dailymotion videos on your site. A short video can be the perfect way to communicate to applicants and show what your business has to offer, and is a great way to boost customer engagement and increase conversions.

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

To access the content editor, right-click the widget, and click Edit Content. You have the following options:

• Click Upload Video and select the video you want to upload
  • You can upload up to 200MB in all formats. You can upload up to 100 videos per site. Upload videos from your device, Facebook, Instagram, Dropbox, Google Drive or record a video using your webcam.
• After you upload the video, you have the following options:
  • Select a video thumbnail to be showed before the video plays
  • Show video controls
  • Auto play (video must be muted)
  • Play video in loop
  • Mute video - Enter the YouTube, Vimeo, or DailyMotion URL in the field provided

Design editor

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

Troubleshooting issues with the video widget

Video is not working
The Video widget simply embeds the video on the site. If the video is not working, it may be because the video has been removed or its share settings prevent it from being played. Make sure the video has the right sharing settings.

Video will not upload
Typically, this is a caching issue. However, we recommend you check that your video does not exceed 200MB. The maximum number of videos you can add to your site is 100.

Wrong thumbnail is showing
The thumbnail image is pulled from the YouTube, Vimeo, or DailyMotion settings. Try using the embed code that the video host provides and place that in using the HTML widget to see if the issue persists.

How do I choose the streaming quality?
The streaming quality depends on the limits that are available on YouTube, Vimeo, or DailyMotion. The user will be able to adjust the quality as they see fit using the settings icon.

Video loads too slow
Video load speed depends on the connection speed of the viewer.

How do I adjust the video dimensions?
The video widget does not automatically detect the dimensions of the original video. To adjust the widget to the video dimensions, click and drag the bottom right corner of the widget to resize it until it matches the video dimensions. We also recommend turning off the Full Width setting on the design tab of the widget to ensure the dimensions are not changed.

Video is not autoplaying on the live published site
The autoplay feature only works if the audio is muted. This is due to specific browser restrictions and is not exclusive to Website Builder sites. To mute the audio and enable autoplay, click the video widget to open the Content and Design menu. On the Content tab, click Customize Video then enable the 'Mute video' and 'Autoplay video' toggles.

Lottie animation widget

The Lottie Animation widget enables you to add vector quality animations to your site. Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them on mobile and the web.

Browse for animation through LottieFiles, or create your own animation in After Effects, exported with the Bodymovin plugin.

Content editor

To access the content editor:

• Right-click the widget, and click Edit Content
• Copy the Lottie Animation URL in the box provided
• To locate the URL for the animation, open the animation in LottieFiles, and click <html>; alternatively, you can paste the URL of any JSON file hosted outside of LottieFiles
• Select Loop Animation to continuously play the animation or select Animate on click
• (Optional) To add a link to the animation, click Link, and select the link type
• If you use a free LottieFile animation, you must include the credential information of the animation creator; the animation creator information is located at the bottom of the animation pop up
  • For more information, see the LottieFile creative common license information.

Design editor

To access the design editor, right-click the widget, and click Edit Design. To resize the widget, move the width and height sliders. To maintain the proportions between the width and height, select Keep proportion.

Before & after widget

The Before & after widget enables you to show two images, side by side, for an eye-catching and engaging visual comparison. The widget includes a customizable slider to move between the two images.

Content editor

To access the content editor:

• Right-click the widget, and click Edit Content
• Click + Image to add the before and after images
• Type labels for the images; to hide the labels, click the eye icon
• Type Alt text for the images

Design editor

To access the design editor:

• Right-click the widget, and click Edit Design
• To customize the images and slider, click Images & Slider
• To customize the label style and text, click Labels

Make sure the design settings you define are correct per device. Settings such as spacing, image size and more are defined per device.

Examples

Shape widget

The Shape widget is a design tool that can be used to highlight important messages. Create buttons and banners, call out awards, and highlight sale prices. You can add an image, color background and text, control the size, and add shadows. The widget can be placed on any location for complete flexibility.

Content editor

To access the content editor:

• Right-click the widget, and click Edit Content
• Select a shape
• To add a link to the shape, click Add Link
• Type a title and description for the shape; to hide the title and description, click the eye icon
• Type Alt text and a Tooltip for the shape

Design editor

To access the design editor:

• Right-click the widget, and click Edit Design
• Click Layout to select a different layout for the shape
• To place the widget on top of or overlapping an image or another widget, click the 'Spacing' tab, and configure the margins to be a negative number (for example, -50px)
• 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

Make sure the design settings you define are correct per device. Settings such as spacing (of the whole widget and individual items), width and more are defined per device.

Examples

Create a shape on the header

To create a shape on the header:

• Create a row with two columns
• Choose an amorphic shape and add it to the right-side column
• Make the shape as big as the column
• In the Design Editor, select the layout with the background image and replace the image with the one you want

Use a shape as a button

To use a shape as a button by adding a link and hover effect:

• Select the circle shape and add a title and description
• Select colors for the shape and texts
• To position the shape on the corner of an image, use a negative margin on the left side of the shape (spacing > margin > -50px left & top margin)

Create a scroll button

To use a shape to create a scroll button:

• Choose the diamond shape and add a title
• Toggle off 'Keep proportion' so you can adjust only the width
• Select colors for the shape and texts
• To position the shape on top of an image, use a negative top margin (spacing > margin > -50px top margin)

Audio widget

Share songs, podcasts, concerts, audio tutorials and other audio files on your site with the audio widget, which enables you to embed any SoundCloud or Mixcloud audio file or playlist directly to your site. Upload your audio file to one of these services, or use an existing public file, copy the link, and add it to your site via the audio widget.

Content editor

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

• Select an existing file or upload your own file to SoundCloud and Mixcloud and copy its link
• Paste the Soundcloud or Mixcloud URL in the field provided

Design editor

To access the design editor:

• Right-click the widget, and click Edit Design
  • If you are using Mixcloud, you have layout, thumbnail display, light/dark color scheme, and sizing options.
  • If you are using SoundCloud, you have layout, play icon color, and sizing options.

Layout options are different for SoundCloud and Mixcloud files. If you want to keep the designs consistent between all instances of audio widgets on your site, make sure to load all audio files on the same platform.