Divi Modules: How to Design Your Funnel Pages Using Modules

Tavleen Kaur
May 3, 2021

Want to build beautiful sales funnels using Divi?

Divi gives you a range of modules for creating your pages and blog posts. But none for building different components of a sales funnel such as opt-in pages, checkouts, one-click upsells, and more.

Here's a piece of good news for you!

WooFunnels now deeply integrates with the very versatile Divi page builder. For you it means, you now have access to a library of Divi templates and custom Divi modules to customize your pages.

In this post, we will look at how you can use Divi modules and templates to create pages your visitors will love! Let's dive right in.

Customize your Checkout Pages with Divi Modules

What are Divi Modules?

Divi modules are content building blocks that help you create a webpage without coding.

Take a look at the Divi modules library:

Insert Divi module

You can add these modules to your page with a single click. Using simple drag and drop, these modules can be used anywhere within sections, rows, and columns.

Each Divi module comes with individual settings that can be fully customized. You can set the colors, add a border, margin, padding, change content typography, and more.

The modules can be customized further with CSS using the "Advanced" option.

Module settings

Furthermore, you can save your settings and use the custom Divi modules on the page or any other page.

Meet the Divi Modules Built for Creating Sales Funnel

A sales funnel defines a journey that your potential customers go through to make a purchase.

You can get your users to sign up for a free offer using an opt-in page. Then you nurture and direct them to a sales page to buy your product.

Moving from one page to another are called steps of a sales funnel. Here are the five major steps in a sales funnel:

  • Opt-in page
  • Sales page
  • Checkout page
  • One-click upsell page
  • Thank you page

With our Funnel Builder’s deep integration with Divi, you can now create appealing components within your sales funnels. And that too, without writing any complicated codes on your site.

Want to know how?

Let’s take a look at each of our Divi modules for every step of the sales funnel.

How to Create Opt-In Pages with Custom Divi Modules by WooFunnels?

You can either choose a pre-designed Divi template or start from scratch.

Let’s start from scratch.

Divi template for opt-in page

WooFunnels has two Divi modules ready to be used for creating or customizing the opt-in page.

  • WF Optin Form - Add and customize a page-embedded opt-in form and button.
  • WF Optin Form Popup - Add and customize a pop-up opt-in form such that when the user hits the CTA button, the form opens up in a pop-up.

Here, we’ll show how you can create opt-in pages with our custom Divi modules.

Divi WF Optin Form module

Go to the section where you want to embed your opt-in form. Click on “Add New Module”.

Click on Add new module

Choose “WF Optin Form” Divi module

Click on WF Optin Form

Go to “Form” under the Content tab and customize it as per your requirements. You can make changes to the Form by adjusting the form field width from one-half, one-third, and full in the module settings.

Similarly, you can configure the content settings of the Submit button below.

Content settings for Divi WF Optin Form module

Once you’re done, go to the “Design” tab.

You can customize the form design by changing font size, style, weight, line height, font color, etc.

You can even change the border type, radius, spacing, columns, background color, and much more.

Customize the button design by going to the Submit button component.

Set spacing, alignment, padding, margins for WF Optin Form

Under the "Advanced" tab, you can write custom CSS codes to modify the appearance of this Divi module as per your brand.

Also, you can enable the scrolling effects by making changes to transform effects, position, motion effect trigger, and much more.

Advanced settings for Divi WF Optin Form module

This is how you can make changes to your Divi WF Optin Form module.

Divi WF Optin Form Popup Module

Now as we discussed before, you need to add the WF Optin Form popup module to a specific section by clicking on the “Add New Module” icon.

Here we’ll be adding the Divi WF Optin Form Popup module on the same page.

Add a new divi module

Select the "WF Optin Form Popup" module

Divi module - WF Optin Form Popup

The Call to Action button will become active. Let’s start by making a few changes to the CTA and how the popup form will look like.

You can configure the content settings for “Call to Action Button” and “Popup Form” by changing the title, subtitle, button, and text alignment, icons to be added on the button along with popup effect, progress bar, heading/subheadings, form labels, submit button text, etc.

configure popup form settings in divi wf optin form popup module

If we go to the "Design" tab, we'll be able to change the appearance of both the call to action button and popup form.

You can change the CTA button or pop-up's width, background/text color, font size, style, weight, set up padding, border spacings, margins, and more.

Furthermore, you can configure the progress bar, headings, design settings for the close button, form, and submit button from here.

Design settings for Divi WF Optin Form Popup module

Now, this is how you can create your opt-in page using the Divi WF Optin Form popup module.

Divi Modules for Checkout Pages

WooFunnels offers two Divi modules for checkout pages:

  • Checkout form module
  • Mini cart module

Let’s see how you can create your checkout pages using these modules.

Divi Checkout Form Module

Here we’ve chosen the two-step process and imported the “Minimalist” template.

Divi Checkout page templates in the Funnel Builder

Once the checkout page gets imported, click on the checkout form settings.

Checkout Form settings

You can start customizing the steps under the Content tab. You can enable or disable the steps, choose the layout for steps - breadcrumbs or tabs, change the headings or even add subheadings, and much more.

Content settings for Divi WF Checkout Form module

Now, you can edit the sections on the checkout form. You can change the size of the fields for email, first name, last name, address, etc.

Furthermore, you have the option to turn on or off the collapsible order summary for devices individually. Customize the coupon option, quantity switcher, allow deletion, and much more.

Your information - Content settings for Divi WF Checkout Form module

If you want to make changes to the appearance and layout, go to the “Design” tab.

Here you can start customizing the design by styling the fonts, letter spacings, alignment, colors, border color, radius, margins, etc.

Design settings for Divi WF Checkout Form module

This Divi module lets you customize the fields section as per your requirements.

You get an additional "Advanced" setting along with custom CSS code and scroll effects. Here you can configure the field classes for each section.

Advanced settings for Divi WF Checkout Form module

Read this post if you're looking for any inspiration to design your checkout page.

Divi Mini Cart Module

The mini cart module gives you an option to make quick changes to your cart on the checkout page itself. This allows you to suppress the additional movement of going back and forth to cart/checkout.

WooFunnels lets you easily customize the Divi mini cart module based on the Content, Design, and Advanced settings.

You can modify the heading title by changing its text, enable/disable the product image, quantity switcher and allow the deletion option in the Product menu.

Content settings for Divi WF Mini Cart module

Furthermore, you can also enable/disable the coupon options or make them appear in the collapsible format.

Coupon - content settings for Divi WF Mini Cart module

If you move to the Design tab, you’ll be able to style the appearance of your Divi mini cart modules.

Modify the font size, letter spacing, alignment, color, etc. from here.

Design settings for Divi WF Mini Cart module

You can further add CSS ID/classes to add custom code, configuring the visibility and scrolling effects by going to the “Advanced” tab.

Advanced settings for Divi WF Mini Cart module

This is how you can configure the WooFunnels Divi mini cart module and set up a checkout page for your store.

One-Click Upsell Page Divi Modules

Using the Funnel Builder, you can create compelling offers to increase the average order value (AOV) of your cart.

All you have to do is head over to your sales funnel and add a new step - One-Click Upsell.

Also read: How to Create Post-Purchase Offers that Boost AOV

Now once you’ve named your one-click upsell page, add some product.

Here, we’ve added the “Social media growth course” at a 10% discount as our offer.

Add product as an offer

Now, move to “Design” and choose any template or start from scratch. 

Here, we’ve imported the Divi Mentor template.

Divi one-click upsell template in WooFunnels Funnel Builder plugin

WooFunnels provide 10 Divi modules to set up your one-click upsell page:

  • Module-1: WF Accept Button
  • Module-2: WF Accept Link
  • Module-3: WF Offer Price
  • Module-4: WF Product Images
  • Module-5: WF Short Description
  • Module-6: WF Product Title
  • Module-7: WF Quantity Selector
  • Module-8: WF Reject Button
  • Module-9: WF Reject Link
  • Module-10: WF Variation Selector

Let’s look at some of these modules below.

Divi WF Offer Price module

WF Offer Price helps you display your offered price against the original one.

Add the Divi module by clicking on “Add New Module”.

Add Divi "WF Offer Price" module

Start customizing your WP Offer price module by going through the Content, Design, and Advanced settings menu.

You can make changes to typography, font color, size, type, line height, margins, borders, and more.

Design settings for Divi WF Offer Price module

Once done, click on “Save” to permanently save the changes.

WF Quantity Selector

The Divi WF Quantity Selector module allows you to select the quantity of the product you’re offering as a one-click upsell offer.

For this, adding a shippable product will work. Make sure to enable the quantity selector from the “Offers” tab.

Allow buyer to choose the quantity while purchasing this upsell product(s)

Now, add the “WF Quantity Selector” Divi module.

Add Divi "WF Offer Price" module

Now, start configuring the Divi WF Quantity Selector module settings.

Settings for Divi WF Quantity Selector module

Modify the text on quantity selector, set up the text alignment, enable/disable the stacked style, configure the margins, and much more. You can do this by going to the “Content” tab.

Quantity selector content settings for Divi "WF Quantity Selector" module

You’ll be able to customize the appearance of the quantity selector module by heading to the “Design” tab.

Design settings for Divi WF Quantity Selector module

You can add the custom CSS code and scroll effects by going through the Advanced settings. Once you’ve made all the adjustments, click on “Save”.

This is how you can create a one-click upsell page using WooFunnels Divi modules.

Creating Order Confirmation Page with Custom Divi Modules

A thank you page helps to boost your brand as well as increase user retention. To create an order confirmation page, you’ve to add a thank you page in your funnel.

Choose Thank You Page

Funnel Builder’s deep integration with Divi allows you to import impressive thank you page that you can edit as per your brand.

Here, we’ve imported the “Challenger” template.

Divi templates for order confirmation page

Here are the two Divi modules for thank you pages:

  • WF Customer Details
  • WF Order Details

Let’s look at these two modules one-by-one.

WF Customer Details

Customize the “WF customer details” module by clicking on the “Settings” icon.

Go to module settings for Divi "WF Customer Details" module

Using the “Content” tab, you can make changes to the headings, layout and even add background color, gradient, image, or video.

Content settings for Divi "WF Customer Details" module

Using the “Design” tab, you can make changes to the appearance of this module. Make customizations in the headings, sizing, spacings, borders, box shadows, filters, transformations, animations, and much more.

Design settings for Divi "WF Customer Details" module

You can further add custom CSS codes, set up visibility settings, enable transitions, scrolling effects, and much more.

This is how you can create an order confirmation page with the help of the "WF Customer Details" Divi module.

WF Order Details

This module helps you create personalized order details to interact with your customers.

Click on the “WF Order Details” from the module list.

Add Divi "WF Order Details" module

You can make changes to the headings, subscription (if it’s a subscription-based product), download section (if the order is virtual) and background.

Content settings for Divi "WF Order Details" module

Using the “Design” tab, you can style the appearance of the Divi WF Order Details module.

Additionally, you can even write custom CSS codes, configure visibility, transitions, scrolling effects, etc. by going to the “Advanced” tab.

Once, you’re done, click on “Save”

That’s it! You’ve successfully configured your thank you or order confirmation page using WooFunnels Divi modules.

Know more about the WooFunnels Funnel Builder plugin here

Get WooFunnels & Create Sales Pages using our Divi modules today!

We hope this article has served you well. With the WooFunnels deep integration with Divi, you can create high-converting sales funnels using Divi modules.

We have various modules to set up impressive opt-in pages, checkouts, one-click upsells, and thank you pages.

Want to create a sales funnel for your eCommerce business? Create one using Divi modules with the Funnel Builder today!

Author: Tavleen Kaur
Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? Jeff Bezos attributed it to a friction-free & streamlined buying process. At BuildWooFunnels, we're determined to give you the tools you need to do the same in your business. I am Tavleen and I help you get there faster.

Increase your sales, starting today.

Get WooFunnels Now
chevron-down