Learn how to use the Before and After and Audio widgets in Booking Website Pro to create visual comparisons and add audio content to your website.
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.
To access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.
- Click + Image to add the before and after images.
-
(Optional) Customize the labels for the images. To hide the labels, click the eye (
) icon.
- 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 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.
- 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.
Widgets: Audio
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 is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.
Click Select Audio to select an existing file or to upload one or paste the Soundcloud or Mixcloud URL in the field provided.
Design Editor
To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.
Some of the available design options are dependent on the audio's source:
- Mixcloud: Layout, thumbnail display, light/dark color scheme, and sizing options (width only) are available (options vary depending on layout).
- Soundcloud: Layout, play icon color, and sizing options (width only) are available.
- Uploaded to the site (site files): With uploaded audio, the design is not editable; only the width can be adjusted.
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.