This tutorial covers all the major features of the DBP Funnel Pages block.
The DBP Funnel Pages block is a powerful Gutenberg block that displays your funnel pages in an organized grid layout with customizable styling and interactive elements. 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 Funnel Pages” or find it in the Widgets category
- Click to add the block to your post or page
Initial Setup
Important: The funnel pages block will display your configured funnel pages immediately after adding it. Make sure you have funnel pages set up in your DBP plugin settings for the block to show content.
Core Settings
Layout Settings Panel
Columns
- Purpose: Control how many columns your funnel pages display in
- Default: 3 columns
- Options: 1, 2, 3, or 4 columns
- Mobile: Automatically stacks to 1 column on mobile devices
Button Settings Panel
Button Text
- Purpose: Text displayed on funnel page preview buttons
- Default: “Preview”
- Examples: “View Page”, “Visit”, “Learn More”, “Get Started”
Button Full Width
- Purpose: Makes buttons span the full width of their container
- Default: Disabled (buttons size to content)
- Use Case: Better for mobile viewing and emphasis
Display Options Panel
| Option | Purpose | Use Case | Notes |
|---|---|---|---|
| Show Counters | Displays visitor and conversion counters for each page | Analytics and social proof | Requires counter data to be available |
| Show Page Title | Displays the page title above each funnel page | Better page identification | Disabled by default for cleaner look |
| Filter Tags | Only show funnel pages with specific tags | Category filtering and organization | Enter comma-separated tag names |
| Item Shadow | Adds subtle shadow effect to each funnel page item | Enhanced visual depth | Enabled by default |
Styling Your Funnel Pages
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 style panels you want to customize
Use Custom Style Toggle
- Enabled: Allows full customization of funnel page appearance
- Disabled: Uses default theme styling
- Recommendation: Enable for consistent branding and control
Item Container Styling
Item Colors
- Background: Background color for each funnel page item
- Border: Border color around each item
- Default: White background with light gray border
Item Borders
- Border Width: Thickness of item borders
- Border Style: Solid, dashed, or dotted
- Border Radius: Corner rounding for items
Item Spacing
- Padding: Internal spacing inside each funnel page item
- Margin: External spacing between items
- Tip: Consistent spacing creates a professional grid layout
Button Styling
Button Colors
- Background: Button background color
- Text: Button text color
- Default: WordPress blue background, white text
Button Dimensions
- Full Width: Toggle to make buttons span full width
- Padding: Internal spacing that affects button size
- Margin: External spacing around buttons
Button 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
Input Field Styling
Input Colors & Borders
- Background: Input field background color
- Border: Input field border color and style
- Border Radius: Corner rounding for input fields
Input Spacing
- Padding: Internal spacing inside input fields
- Margin: External spacing around input fields
- Note: Input fields automatically span full width
Typography
Button Typography
- Font Size: Button text size (16px recommended minimum)
- Font Weight: Normal, Bold, Light, Semi-Bold
- Accessibility: Ensure text is readable against background
Practical Examples
Example 1: Simple Grid Display
- Add DBP Funnel Pages block
- Set columns to 3 for balanced layout
- Keep button text as “Preview”
- Enable item shadows for depth
- Use default styling for quick setup
Example 2: Analytics Dashboard
- Add DBP Funnel Pages block
- Enable “Show Counters” for analytics
- Enable “Show Page Title” for clarity
- Set columns to 2 for more detailed view
- Change button text to “View Analytics”
Example 3: Filtered Display
- Add DBP Funnel Pages block
- Set filter tags: “sales,promotion”
- Use 4 columns for more items
- Enable custom styling for brand colors
- Change button text to “Get Started”
Example 4: Mobile-Optimized
- Add DBP Funnel Pages block
- Set columns to 1 for single column layout
- Enable “Button Full Width”
- Increase item padding for better touch targets
- Use larger button text for readability
Best Practices
Layout
- Column Choice: 3 columns work well for most screen sizes
- Mobile Responsive: Block automatically stacks on mobile
- Spacing: Use consistent padding and margins
- Visual Hierarchy: Use shadows and borders for depth
Content
- Button Text: Use action-oriented, clear language
- Filtering: Use tags to organize content logically
- Analytics: Show counters when data adds value
- Page Titles: Show when helpful for identification
Troubleshooting
| Problem | Solution Steps |
|---|---|
| No Funnel Pages Showing | • Check: Funnel pages are configured in DBP settings • Check: Pages are published and active • Check: Filter tags aren’t excluding all pages |
| Layout Issues on Mobile | • Check: Block automatically stacks on mobile • Check: Item padding allows for touch interaction • Check: Button full width is enabled if needed |
| Styling Not Applied | • Check: “Use Custom Style” is enabled • Check: Clear caching plugins after changes • Check: Theme CSS conflicts |
| Counters Not Showing | • Check: “Show Counters” is enabled • Check: Counter data is available in DBP • Check: Sufficient activity on funnel pages |
| Images Not Displaying | • Check: Funnel pages have featured images set • Check: Image file paths are correct • Check: Media library images exist |
Integration Setup
Prerequisites
- DBP Plugin: Ensure the plugin is installed and activated
- Funnel Pages: Create and configure funnel pages in DBP settings
- Featured Images: Add images to funnel pages for visual appeal
- Tags (Optional): Tag pages for filtering functionality
Advanced Features
Filter Tags Usage
Examples of effective tag filtering:
- Category Filtering: “sales,marketing,support”
- Product Lines: “premium,basic,enterprise”
- Funnel Stage: “top,middle,bottom”
- Target Audience: “beginners,advanced,experts”
Performance Analytics
When counters are enabled, you can track:
- Page Views: How many times each page has been visited
- Conversion Rates: Success rates for each funnel page
- Popular Pages: Which pages perform best
- Traffic Patterns: Usage trends over time
Final Tips for Success
Remember These Key Points
- Setup First: Configure funnel pages in DBP before using the block
- Mobile Friendly: Block automatically adapts to mobile screens
- Visual Appeal: Use shadows and proper spacing for professional look
- Clear Actions: Use descriptive button text for better user experience
- Filter Wisely: Use tags to show relevant content to users
The DBP Funnel Pages block provides a powerful way to showcase your funnel pages in an organized, professional grid layout. Use the filtering and styling options to create the perfect display for your audience and goals!