Design Funnel Steps Easily

Docs
  1. Home
  2. Docs
  3. Design Funnel Steps Easil...
  4. Design Your Funnel Steps ...
  5. How To Design Your Funnel Landing Page – Divi Builder

How To Design Your Funnel Landing Page – Divi Builder

WPFunnels makes it easy to design and customize your funnel landing pages using the Divi Page Builder.

Follow this step-by-step guide to create a compelling landing page for your sales funnel.

So, let’s begin.

Design Your Funnel Landing Page with Divi Page Builder

Follow these steps to design or edit the Landing page of your funnels using Divi Page Builder.

Step 1: Create or Edit a Funnel

  • Start by creating a new sales funnel in WPFunnels or select an existing funnel to edit.
Import any Templates

Step 2: Access the Landing Step

  • Click on the Landing step in your funnel canvas. Four options appear: Settings, Edit, View, A/B Testing, and Configure.
WPF Canvas
  • Click the Edit icon to open the Landing page in a new browser tab with Divi.
Landing Step - edit

Tip: If Divi is set as the default page builder, your Landing page opens automatically in Divi. You can change the default builder in WPFunnels Settings -> Page Builder and choose Divi as a builder.

Step 3: Set the Template

  • From this page, change the Template to WPFunnels Canvas to get the full Canvas.
Choose the Canvas Templates

Step 4: Launch Divi Builder

  • Click Edit With The Divi Builder to start editing your Landing page.
Edit With Divi Builder

Step 5: Build Your Layout

  • You can now edit your page using Divi. Click the “+” button and choose to add a new Row to your layout.
Create a New Section

Step 6: Add Divi Modules

  • Within your Row, click the “+” icon to add a module.
Choose the Module
  • Search for the WPF Next Step Button and add it. Change the button text and adjust styles via the Background and Admin Label sections.
WPF Next Step Button
  • In the Design section, you can adjust the button’s text color, background color, alignment, and more to match your style.
WPF Next Step Button
  • To add an email opt-in, search for WPF Optin Form and add it.
WPF Next Step Button
  • Customize layout, fields, and styles in the Optin Form settings. Customize layout, fields, and styles in the Optin Form settings.
WPF Next Step Button

Note: Only suitable modules (like Next Step Button and Optin Form) will work on the Landing step. Modules for offers, checkout, or orders won’t function here.

Step 7: Finalize and Save

  • After finishing your design, click the Save button at the bottom right corner.
Save Changes

Your landing page is now ready! You can move on to edit the next step in your funnel, such as the Checkout Page.

Additional Tips:

  • Preview your changes to ensure everything appears as expected.
  • Use Divi’s styling options for custom fonts, colors, and layouts to make your landing page unique.
  • Regularly save your progress to avoid losing any changes.

How can we help?

×