This tutorial covers all the major features of the DBP Lead List block.
The DBP Lead List block is a powerful Gutenberg block that displays your leads in an organized list format with customizable pagination and layout options. 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 Lead List” or find it in the Widgets category
- Click to add the block to your post or page
Initial Setup
Important: The lead list will display your captured leads from form submissions. This block is useful for admin areas or member dashboards where authorized users need to view lead data.
Core Settings
Display Settings Panel
Posts Per Page
- Purpose: Controls how many leads are displayed per page
- Default: 10 leads
- Range: 1-100 leads
- Use Case: Lower numbers for detailed views, higher for quick overviews
Accordion Layout
- Purpose: Displays leads in a collapsible accordion format
- Default: Disabled (standard list view)
- Benefits: Saves space, shows summary view first
- Use Case: When displaying detailed lead information in limited space
Styling Settings Panel
Pagination Active Color
- Purpose: Color used for active pagination elements
- Default: #0073aa (WordPress blue)
- Applies To: Current page number, hover states
- Use Case: Match your site’s brand colors
Display Modes
Standard List View
Configuration: Accordion disabled
Features:
- Shows all lead information immediately
- Easy to scan and read
- Better for detailed analysis
- Includes full lead data display
Best For: Admin dashboards, lead review pages, detailed reports
Accordion View
Configuration: Accordion enabled
Features:
- Compact view with collapsible sections
- Click to expand individual leads
- Space-efficient design
- Quick overview with drill-down capability
Best For: Mobile displays, sidebar widgets, quick lead browsing
Pagination System
How Pagination Works
- Automatic: Pagination appears when total leads exceed posts per page setting
- Navigation: Previous/Next buttons plus numbered pages
- Styling: Active page uses custom color from settings
- Responsive: Adapts to mobile screens automatically
Pagination Customization
Color Customization:
- Set active page color to match your brand
- Color applies to hover states automatically
- Ensures consistent visual hierarchy
- Maintains accessibility with proper contrast
Examples
Admin Dashboard Lead List
Configuration:
- Posts per page: 25
- Accordion: Disabled
- Pagination color: #0073aa (default)
Use Case: Full admin dashboard for reviewing all lead details, analyzing patterns, and managing lead data efficiently.
Compact Mobile Lead Browser
Configuration:
- Posts per page: 15
- Accordion: Enabled
- Pagination color: Custom brand color
Use Case: Mobile-friendly lead browsing where space is limited but users need access to full lead details on demand.
Quick Overview Widget
Configuration:
- Posts per page: 5
- Accordion: Enabled
- Pagination color: Matching site theme
Use Case: Sidebar widget or dashboard summary showing recent leads with option to expand for details.
Best Practices
Performance Optimization
- Page Size: Use appropriate posts per page based on device and use case
- Mobile Performance: Consider lower numbers (5-10) for mobile devices
- Desktop Display: 15-25 posts work well for desktop admin interfaces
- Load Time: Monitor page load times with large lead lists
User Experience
- Layout Choice: Use accordion for space-constrained areas
- Color Consistency: Match pagination colors to your site design
- Access Control: Place on protected pages for authorized users only
- Clear Purpose: Provide context about what leads are being displayed
Privacy Considerations
- Data Protection: Ensure lead data is only accessible to authorized personnel
- Page Security: Use password protection or member-only access
- Data Minimization: Only display necessary lead information
- Compliance: Follow GDPR and privacy regulations for lead data display
Troubleshooting
Common Issues
No Leads Displaying:
- Check if any leads have been captured through forms
- Verify lead form submissions are being saved properly
- Check database table for lead data
- Ensure DBP plugin is properly configured
Pagination Not Working:
- Clear browser cache and try again
- Check for JavaScript errors in browser console
- Verify posts per page setting is appropriate
- Test with different pagination color settings
Accordion Not Expanding:
- Ensure accordion setting is enabled in block
- Check for JavaScript conflicts with other plugins
- Verify frontend JavaScript is loading properly
- Test with default theme to isolate theme conflicts
Advanced Customization
For advanced users who need additional styling beyond the block options:
- Use CSS class:
.wp-block-downline-builder-plugin-lead-list - Target pagination:
.dbp-pagination - Style accordion elements:
.dbp-accordion - Customize lead items:
.dbp-lead-item
Add custom CSS to your theme’s style.css or use the WordPress Customizer for advanced styling requirements.