Override empty state illustrations with custom images
Modify or override the default empty state illustrations with your own custom images to promote visual elements that reflect your company's branding.
Antes de Iniciar
Role required: ui_builder_admin
For information on granular roles, see Granular admin roles.
Verify that your custom images use the desired colors and meet your branding requirements before uploading to Theme Builder.
Role required: admin
Por Que e Quando Desempenhar Esta Tarefa
Importante:
Custom images apply to Workspaces and aren’t supported in the Core UI.
Procedimento
-
Use the Page drop-down list to select the Editor page view.
Figura 1. Editor page view -
Select the Image styles tab from the general styles panel.
The empty state illustrations are displayed on the main stage and grouped by type.
Figura 2. Image styles tab selected -
Use one of the following options to select the empty state illustration that you want to override.
- Select the Filter icon
icon and expand the empty states category to select the specific empty state illustration that you want to override. - Scroll through the list of empty state illustrations within the main stage.
The property panel opens automatically. - Select the Filter icon
-
From the property panel, select the Images tab.
Figura 3. Property panel Images tab -
Select either the large, medium, or small image file of the illustration you want to override.
Nota:You can only override one image size at a time.The upload images modal appears.
Figura 4. Upload images modal -
Use one of the following options to upload your custom image:
- Select Browse, choose your custom image file from your computer's file browser, and select Open.
- Drag your custom image file from your computer's file browser and drop the image directly into the modal.
Refer to the upload image modal for size and format limitations. If your custom image doesn’t meet the required size and format, your image isn’t saved.Figura 5. Upload image modal with size and format limitations -
Select Save.
Your custom image appears on the main stage within the empty state category that you have chosen.
Figura 6. Add data empty state category with custom image displayed - Opcional:
Select the Remove override symbol if you want to restore the default empty state illustration.
Figura 7. Image Remove override - Opcional:
Preview your edits before publishing your theme to your instance.
-
Select the Open in new tab icon
to open the experience in a new tab.
Figura 8. Experience preview
-
Select the Open in new tab icon
Resultado
If your theme is published, your custom images are visible to users who have your theme applied on refresh. For more information about publishing themes, see Publish your themes with Theme Builder.