DBP Custom Link Block :: Downline Builder Plugin

This tutorial covers all the major features of the DBP Custom Link block.

The DBP Custom Link block is a powerful Gutenberg block that creates affiliate links with automatic referral ID integration. This comprehensive tutorial will guide you through all its features and capabilities.

Getting Started

Adding the Block

In the WordPress editor, click the “+” button to add a new block
Search for “DBP Custom Link” or find it in the Widgets category
Click to add the block to your post or page

Initial Setup

Important: When you first add the block, you’ll see a dropdown to select an affiliate program. You must select a program before the block becomes fully functional.

Core Settings

Link Settings Panel

Affiliate Program

Purpose: Select which affiliate program this link will use
Required: Yes – you must select a program for the block to work
Location: First dropdown in the Link Settings panel

Button Text

Purpose: The text displayed on your button or link
Default: “Click Here”
Tip: Use action-oriented text like “Get Started,” “Learn More,” or “Buy Now”

Use Custom Link

Purpose: Override the default program URL while keeping the affiliate ID
When to use: When you want to link to a specific product page or landing page
Requirements: Your custom URL must include DBP_AFFUID as a placeholder for the affiliate ID
Example: https://example.com/product?ref=DBP_AFFUID

Link Target

New Window (_blank): Opens link in a new tab (recommended for affiliate links)
Same Window (_self): Opens link in the current tab

Display Options Panel

Option	Purpose	Use Case	Notes
Display URL Only	Shows just the URL text instead of a clickable button	When you want to display the affiliate link for copying	Automatically disables Auto Redirect
Auto Redirect	Automatically redirects visitors when the page loads	For dedicated landing pages that should immediately redirect	Use sparingly – can impact UX negatively
Button Alignment	Controls button position	Visual layout preferences	Left \| Center (default) \| Right

Referral Options Panel

Add Referrer ID to Link

Purpose: Appends the visitor’s referrer affiliate ID to your link
Use case: For multi-level marketing or referral programs
Result: Adds referrer tracking parameters to your affiliate link

Use Current User

Purpose: Uses the logged-in user’s username instead of visitor referrer
Use case: When you want to credit the current user rather than who referred them
Note: Only works for logged-in users

Styling Your Button

Accessing Style Settings

With the block selected, look for the Settings Panel on the right
Click the “Styles” tab (next to the “Block” tab)
Open the “Button Style Settings” panel

Use Custom Styling Toggle

Enabled: Allows full customization of button appearance
Disabled: Uses default theme button styling
Recommendation: Enable for consistent branding

Colors

Background Color

Set the button’s background color
Tip: Use your brand colors for consistency

Text Color

Set the color of the button text
Tip: Ensure good contrast with background color for accessibility

Border Color

Set the color of the button border
Only visible when border width is greater than 0

Background Style

Gradient Background

Enable: Creates a gradient background instead of solid color
Start Color: The beginning color of the gradient
End Color: The ending color of the gradient
Gradient Angle: Direction of the gradient (0-360 degrees)
- 0° = Left to right
- 90° = Top to bottom
- 180° = Right to left
- 270° = Bottom to top

Typography

Font Weight

Normal: Standard text weight
Bold: Thicker, more prominent text
Light (300): Thinner text
Semi-Bold (600): Between normal and bold

Border & Spacing

Border

Border Width: Controls thickness of the button border (set to 0 for no border)

Border Radius: Controls corner roundness
• Higher values = more rounded
• 0 for sharp corners
• 50% for pill-shaped buttons

Spacing

Padding: Inner spacing between button text and button edge
• Top/Bottom: Affects button height
• Left/Right: Affects button width

Margin: Outer spacing around the button
• Use to add space between button and surrounding content

Button Width

Auto: Button width adjusts to content
100%: Button takes full width of container
Custom: Set specific width (e.g., 200px, 50%)

Practical Examples

Example 1: Basic Affiliate Button

Add DBP Custom Link block
Select your affiliate program
Change button text to “Get 20% Off Today”
Set target to "_blank"
Customize colors to match your brand

Example 2: Product-Specific Link

Add DBP Custom Link block
Select affiliate program
Enable “Use Custom Link”
Enter: https://store.com/product/amazing-widget?affiliate=DBP_AFFUID
Set button text to “Buy Amazing Widget”

Example 3: Gradient Call-to-Action

Add DBP Custom Link block
Enable “Use Custom Styling”
Go to Background Style section
Enable “Use Gradient Background”
Set start color to your primary brand color
Set end color to a slightly darker shade
Adjust gradient angle as desired

Example 4: Full-Width Button

Add DBP Custom Link block
In Button Style Settings, set Button Width to “100%”
Increase padding for a more prominent appearance
Center-align the text

Best Practices

Design

Contrast: Ensure text color contrasts well with background
Consistency: Use the same button styles across your site
Size: Make buttons large enough to be easily clickable (minimum 44px height)
Spacing: Add adequate margin to separate buttons from other content

Content

Clear Text: Use action-oriented, descriptive button text
Honest Disclosure: Follow FTC guidelines for affiliate link disclosure
Testing: Test your links to ensure they work correctly

Performance

Limit Auto Redirect: Use sparingly to avoid poor user experience
Mobile Responsive: Test buttons on mobile devices
Loading Speed: Avoid overly complex styling that might slow page loading

Troubleshooting

Common Issues

Problem	Solution Steps
Button Not Appearing	• Check: Ensure an affiliate program is selected • Check: Verify the program is properly configured in your plugin settings
Custom Link Not Working	• Check: Ensure `DBP_AFFUID` placeholder is included in your custom URL • Check: Verify the custom URL is properly formatted
Styling Not Applied	• Check: Ensure “Use Custom Styling” is enabled • Check: Clear any caching plugins to see changes
Referral IDs Not Working	• Check: Verify referral tracking is properly set up in your plugin • Check: Test with different user scenarios

Getting Help

If you encounter issues not covered in this tutorial:

Check your affiliate program configuration
Verify your plugin is up to date
Test in a staging environment
Contact plugin support with specific error details

Advanced Tips

CSS Customization

For advanced users, you can add custom CSS classes to further customize appearance:

.wp-block-downline-builder-plugin-custom-link a.my-custom-button {
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	transform: translateY(-2px);
	transition: all 0.3s ease;
}

.wp-block-downline-builder-plugin-custom-link a.my-custom-button:hover {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

A/B Testing

Test different button styles, text, and placements to optimize conversion rates:

Try different colors and contrast levels
Test various button text options
Experiment with button sizes and positioning
Monitor click-through rates and conversions

Experiment with different settings to find what works best for your audience and brand!

DBP Custom Link Block