Divi Modules: Now Build Your Funnel Pages Using Modules from Scratch

Love the flexibility of Divi modules?

You can now use custom Divi modules by FunnelKit (formerly WooFunnels) to also create full-fledged sales funnels from scratch.

The Divi page builder by Elegant Themes 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.

In our last post, we showed you how you could use Divi templates. Today, we will look at creating these pages from scratch using the very versatile Divi modules.

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:

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.

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 is called the 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 FunnelKit (formerly WooFunnels)?

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

Let’s start from scratch.

FunnelKit (formerly 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.

Optin Form Divi module

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

Choose the “WF Optin Form” module.

This is one of the Divi modules we prepared for your form embedded opt-in page.

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.

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 available for Divi modules.

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.

Opt-in Form Popup Divi 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.

Select the "WF Optin Form Popup" module.

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.

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.

Each of these Divi modules is highly customizable.

Go to the "Design" tab to change the appearance of both the call to action button and popup form.

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.

That's it! You have configured both of your Divi modules for opt-in page.

Divi Modules for Checkout Pages

FunnelKit (formerly 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 Divi modules.

Divi Checkout Form Module

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

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

You can customize each of these Divi modules the way you want.

Enable or disable the steps, choose the layout for steps - breadcrumbs or tabs, change the headings or even add subheadings, and much more.

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.

If you want to make changes to the appearance and layout of these Divi modules, 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.

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

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.

FunnelKit (formerly WooFunnels) lets you easily customize all the Divi modules including the Mini cart 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.

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

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.

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

Now, let's proceed with the Divi modules for your offer/upsell page.

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.

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.

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

Here, we’ve imported the Divi Mentor template.

FunnelKit (formerly WooFunnels) has 10 Divi modules to set up your one-click upsell page:

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

Offer Price Divi module for One-Click Upsells

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

Add the Divi module by clicking on “Add New 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.

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

Quantity Selector module for One-Click Upsells

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.

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

You can easily customize all the Divi modules in FunnelKit (formerly WooFunnels).

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.

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

This is how you can create a one-click upsell page using FunnelKit (formerly 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.

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

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

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.

Customer Details Divi Module

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

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

Using the “Design” tab, you can make changes to the appearance of the Divi modules.

Make customizations in the headings, sizing, spacings, borders, box shadows, filters, transformations, animations, and much more.

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

Order Details Divi Module

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

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

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

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 FunnelKit (formerly WooFunnels) Divi modules.

Know more about the FunnelKit (formerly WooFunnels) Funnel Builder plugin here

Ready to Build Sales Funnels using Divi Modules?

With access to a library of Divi templates at your disposal and custom Divi modules, you have everything you need to create beautiful and converting sales funnels.

So what are you waiting for?

Make the most of the flexibility and superior design prowess of the page builder and FunnelKit (formerly WooFunnels)!