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

Tavleen Kaur
May 4, 2021
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:

Divi Modules

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.

Divi Modules - CTA 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 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.

Optin pages templates in FunnelKit (formerly WooFunnels)

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”.

Optin Form Divi module

Choose the “WF Optin Form” module.

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

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.

WF Optin form - content settings for divi modules

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.

WF Optin form - design settings 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.

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.

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.

WF Optin form popup - content settings for divi modules

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.

WF Optin form popup - design settings for divi modules

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.

Divi templates to build your checkout pages

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.

Checkout form - content settings for divi modules

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.

Set the width of the checkout form fields

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.

Checkout form - design settings for divi modules

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.

Divi Mini Cart Module

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

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.

Mini Cart - design settings for divi modules

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.

Product added as an upsell

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

Here, we’ve imported the Divi Mentor template.

Templates for upsell offer page

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”.

Offer Price Divi module for One-Click Upsells

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.

Offer Price Divi module for One-Click Upsells - customization

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.

Enable the quantity selector

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

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

WF Quantity Selector module for One-Click Upsells

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.

WF Quantity Selector Divi module for One-Click Upsells - customization

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.

Add a thank you page

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.

Import the thank you page 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.

WF Customer Details Divi Module

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

customize WF Customer Details Divi Module

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.

WF Order Details Divi 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.

WF Order Details - Content settings for divi modules

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

WF Order Details - design settings for divi modules

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)!

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 FunnelKit (formerly WooFunnels), 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.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle