> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.blab.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widgets: Before & After

# Widget Categories: Media

For information on adding widgets, see [Add Widgets](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_45d573b76d).

**Tip**

Fore more information on widgets and the widgets library, see [Widgets: Library and Overview](https://intercom.help/book-like-a-boss/en/articles/10353857-widgets-library-and-overview).

# Content Editor

To access the content editor, right click the widget and select **Edit Content**. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.

1. Click **+ Image** to add the before and after images.
2. *(Optional)* Customize the labels for the images. To hide the labels, click the **eye icon**.
3. Type Alt text for the images. Type your own alt text or click the **Sparkle** **icon** to use the AI Assistant to generate alt text. Repeat for each individual image in the Photo Gallery or click *All Alt Text* to view and manage alt text for all site images. The Sparkle icon will be disabled if an image is not selected.

**Note**

Alt text generated by the AI Assistant is in the same language as the page’s current language. For more information on the AI Assistant, see [AI Assistant Overview and Features](https://intercom.help/book-like-a-boss/en/articles/10353794-ai-assistant-overview-and-features).

# Design Editor

To access the design editor, right-click the element, and click **Edit Design**. Or if you are in flex mode or Editor 2.0, select **Edit Design** from the floating menu to open the design panel.

1. To customize the images and slider, click **Images & Slider**.
2. 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. For more information, see [Screen Sizes and Devices](https://intercom.help/book-like-a-boss/en/articles/10340388-screen-sizes-and-devices).

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see [Widget Design](https://help.booklikeaboss.com/en/articles/10353857-widgets-library-and-overview#h_bd5957206f).

# Examples

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/2/e/5/b2e5ddd5c9c39800/3d8091ff-56ca-4561-865a-9bb93b_n23qw5.jpg)](https://downloads.intercomcdn.com/i/o/h5estzhi/1324316936/8c686203eddd5f71bc1b9741a913/29006337798551?expires=1767713400&signature=10bf5ab9643aedf302350e69b6232a5a3c70d2b82f5b209caefe198ddbcf340c&req=dSMlEsp%2Fm4hcX%2FMW1HO4za%2BcQZkUJsebPlNJhSc1pXSnRVj8SxybK5%2Fn0wpO%0A1y4y7nKjfzt998oi4eI%3D%0A)

[![](https://storage.crisp.chat/users/helpdesk/website/-/a/4/c/0/a4c0c21f30c13000/d99ba9bd-f6d6-4fd1-b3b5-75fc33_1vayo7m.png)](https://downloads.intercomcdn.com/i/o/h5estzhi/1324317242/9a5598e1a599a7d455f2407f6f6c/29006346551831?expires=1767713400&signature=f2c8c61feec327af11bc680aefacaad02e6b909e52958ed481689b5ca1ca4c40&req=dSMlEsp%2FmoNbW%2FMW1HO4zSNFvmlw3AQwj3VgZiBR6L4BRQhDjpZr4EkiidV5%0A%2B0br7kWPbM2AjFNQwiM%3D%0A)