This tutorial shows how to add an Image component in TopBuddy and control its display size for balanced notification bar layouts. Images can significantly enhance the visual appeal of your notification bars and help convey your message more effectively.
What You Will Learn
- How to upload or select an image in the Image component.
- How to use the Image Size control.
- How to avoid layout issues with overly large assets.
- Best practices for image optimization in notification bars.
Prerequisites
- TopBuddy installed and active.
- Media Library access to upload/select images.
- An editable notification bar.
- Basic understanding of WordPress media management.
Step 1: Open the Notification Bar Editor
Go to Settings > TopBuddy and open a bar for editing. If you do not have an existing bar, create a new one and give it a descriptive name that reflects its purpose.
The editor interface provides a visual representation of your notification bar with drag-and-drop functionality for arranging components.
Step 2: Add and Configure the Image Component
Select the Image component and choose an image from your Media Library. You can either upload a new image or select an existing one from your library.
- Image: upload or select the asset. Choose images that are relevant to your message.
- Size: Auto, Small, Medium, Large, or Extra Large. The size setting controls how large the image appears in the bar.
Caution: Use compressed images to keep page load times low. Large images can slow down your site and negatively impact user experience.
When selecting images, consider the dimensions carefully. Notification bars typically have limited vertical space, so choose images with appropriate aspect ratios that will not dominate the bar or push other components out of view.
Step 3: Save and Preview
Save the bar and preview it on the front end. Confirm the image scale fits the bar height and does not crowd text or buttons. Test on multiple devices to ensure the image displays properly on both desktop and mobile viewports.
Next Steps
- Combine images with icons and CTA buttons for richer campaign bars.
- Create image variants for seasonal promotions and switch by campaign period.
- Optimize images using compression tools before uploading to reduce file size.
- Use responsive images when possible to serve appropriately sized versions on different devices.