This tutorial shows you how to add and configure a Button component in TopBuddy so visitors can click through to a target page. Call-to-action buttons are essential for converting visitors into customers, driving sign-ups, or directing traffic to important pages on your website.
What You Will Learn
- How to add the Button component to a notification bar.
- How to configure Button Text, Button URL, and Open in new tab.
- How to style the button with size and color controls.
- Best practices for CTA button placement and design.
Prerequisites
- WordPress site with TopBuddy active.
- Access to TopBuddy in wp-admin.
- At least one notification bar you can edit.
- Basic familiarity with the TopBuddy interface.
Step 1: Open a Notification Bar Editor
In wp-admin, go to Settings > TopBuddy. Open an existing notification bar or create a new one, then open the editor screen. The editor provides a visual interface where you can drag, drop, and configure various components for your notification bar.
If you are creating a new bar, give it a descriptive name that helps you identify its purpose, such as “Summer Sale CTA” or “Newsletter Signup Bar.”
Step 2: Add the Button Component
In the Components panel, add Button if it is not already present. Then select the Button component to open its settings. The button component allows visitors to take immediate action by clicking through to a specific page.
Configure Content Settings
- Button Text: the text users click (for example, Shop Now, Get Started, or Learn More). Keep it short and action-oriented.
- Button URL: the destination URL where visitors will land after clicking. This can be an internal page or an external website.
- Open in new tab: enable this option when linking to external pages to keep visitors on your site.
Configure Style Settings
- Style: choose Button for a prominent CTA or Link for a subtler approach.
- Size: Small, Medium, Large, or Extra Large. Consider your bar height when choosing.
- Text Color and Background Color: choose colors that contrast well and match your brand.
- Hover Text Color and Hover Background Color: provide visual feedback when users hover over the button.
Step 3: Save and Publish
Save your bar, publish it, and load a front-end page where the bar is visible. Test the button on both desktop and mobile devices to ensure it works correctly and looks good on all screen sizes.
Next Steps
- Combine the button with a Title and Message component for stronger CTA context.
- Test two CTA text variants and compare click-through performance.
- A/B test different button colors to optimize conversion rates.
- Consider adding urgency with countdown timers or limited-time offers.