Onboarding Day 2: Create the Web Funnel

This article explains how to build and customize a client-getting funnel using a prebuilt 1-on-1 programme template. You will learn how to import the template, apply your branding, replace images and copy, and verify funnel flow and SEO settings.

! Preconditions

Before starting, ensure you have the following assets and access ready.

Required Assets

Logos (transparent background)

• Square logo (512 × 512)

• Landscape logo 4:1 (2000 × 500)

• Landscape logo (700 × 360)

Photos (you or your team)

• Square welcome image (1080 × 1080)

• Vertically oriented image (1800 × 1200)

• Landscape image (900 × 1800)

• Profile image (600 × 600)

Copy & Accounts

• Basic homepage / sales copy for your offer

• A clearly defined offer (ideally a multi-appointment programme)

• Verified Stripe account (required for payments)

TABLE OF CONTENTS

• Step 1: Create a Brand Board (Design Kit)
• Step 2: Import the Funnel Template
• Step 3: Update Typography (Fonts)
• Step 4: Navigate Using Layers
• Step 5: Replace Images
  • Hero Section Background Image
  • Inline Image Elements
  • Section Background Images
• Step 6: Replace Page Copy
• Step 7: Adjust Styling (Optional)
  • Change Colors
  • Sharpen Corners
• Step 8: Replace Footer Logos
• Step 9: Check Mobile Responsiveness
• Step 10: Save and Add SEO Details
• Step 11: Review Funnel Flow
• Verification Checklist
• Troubleshooting
• Support

Step 1: Create a Brand Board (Design Kit)

1. Navigate to Settings.

2. Scroll down the left-hand menu and click Brand Boards.

3. Click Add Design Kit.

4. Upload your logo(s).

   • Choose the most usable version (for example, a wide logo with minimal empty space).

   • Upload additional logo variants as needed.

5. Set your brand colors.

6. Add your brand fonts.

7. Name the brand board (example: [Brand Name] Main).

8. Click Save Board.

Step 2: Import the Funnel Template

1. From the dashboard, click Web Pages in the left-hand menu.

2. In the Funnels section, click Add New Funnel.

3. Select Create new funnel from templates.

4. Search for the template name (example: Blueberry).

5. Choose the 1-on-1 Programme (Application) template.

6. Click Choose Template.

You will now see the main funnel page ready for customization.

Step 3: Update Typography (Fonts)

1. Open the page editor.

2. Click Typography.

3. Assign:

   • One font for headings

   • One font for paragraph/body text

4. Confirm that text updates automatically across the page.

Step 4: Navigate Using Layers

• Use the Layers panel to:

  • See all page sections and elements

  • Quickly jump to specific areas

• Selecting an element in the Layers panel will:

  • Scroll the page to that section

  • Highlight the element border

• You can also click elements directly on the page to edit them.

Step 5: Replace Images

Hero Section Background Image

1. Select the hero section.

2. Identify the column with a background image.

3. In the right-hand pane, click Background → Image.

4. Upload and select your square image.

Inline Image Elements

1. Scroll to the next image section.

2. Click the image element.

3. Replace it with your vertically oriented image.

Section Background Images

1. Hover over the section until the green border appears.

2. Click the section.

3. In the right-hand pane, update the background image.

Repeat until all stock images are replaced.

Step 6: Replace Page Copy

1. Click directly on each text element.

2. Select all text and paste your own copy.

3. Important:

   • Use Ctrl + Shift + V (Windows) or Cmd + Shift + V (Mac)

   • This prevents external formatting from breaking your styles.

4. If formatting breaks, use Undo and re-paste correctly.

Step 7: Adjust Styling (Optional)

Change Colors

• Update section and element colors to match your brand tone.

Sharpen Corners

1. Select an element.

2. Open the Styles tab in the right pane.

3. Set Border Radius to 0 for sharper edges.

Step 8: Replace Footer Logos

1. Scroll to the bottom of the page.

2. Replace logo images using the same method as other images.

Step 9: Check Mobile Responsiveness

1. Switch to Mobile View.

2. Review images and layouts.

3. If an image appears unchanged:

   • Check if the section is device-restricted

   • Replace the mobile-only image separately if needed

This is expected behavior in responsive templates.

Step 10: Save and Add SEO Details

1. Click Save.

2. When prompted, enter:

   • Page title

   • Meta description

   • Social sharing image (recommended: square hero image)

3. Review the preview.

4. Click Update SEO Meta.

5. Click Save again.

6. Use the Back button to return to the funnel overview.

Step 11: Review Funnel Flow

From the funnel overview screen, verify the page sequence:

1. Landing Page

   • User clicks CTA button

2. Discovery Call Booking Page

3. Thank You Page

4. Programme Booking Page (qualified users only)

5. Checkout Page (payment required)

6. Final Thank You / Confirmation Page

Ensure:

• Copy matches your offer on every step

• Images and colors are consistent

• Calls-to-action are clear

Verification Checklist

• Brand board applied correctly

• All stock images replaced

• Copy pasted without formatting issues

• Mobile and desktop views reviewed

• SEO metadata completed

• Funnel steps flow logically

• Stripe checkout connected

Troubleshooting

Images look different on mobile vs desktop

• Check device visibility settings for sections or rows.

Text formatting breaks after paste

• Undo and paste again using Shift-paste (plain text - values only).

What if you got stuck?

Please book a 15-minute troubleshooting session with our tech team using the link from your first onboarding email.

If you can’t find the link, contact us at:
support@wellconnect.freshdesk.com

All done! Now what?

Move to day 3 > > >