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.
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.
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:
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.
You can either choose a pre-designed Divi template or start from scratch.
Let’s start from scratch.
WooFunnels has two Divi modules ready to be used for creating or customizing the opt-in page.
Here, we’ll show how you can create opt-in pages with our custom Divi modules.
Go to the section where you want to embed your opt-in form. Click on “Add New Module”.
Choose “WF Optin Form” Divi module
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.
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.
This is how you can make changes to your Divi WF Optin Form 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.
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.
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.
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.
Now, this is how you can create your opt-in page using the Divi WF Optin Form popup module.
WooFunnels offers two Divi modules for checkout pages:
Let’s see how you can create your checkout pages using these modules.
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 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.
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, 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.
You get an additional "Advanced" setting along with custom CSS code and scroll effects. Here you can configure the field classes for each section.
Read this post if you're looking for any inspiration to design your checkout page.
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.
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.
This is how you can configure the WooFunnels Divi mini cart module and set up a checkout page for your store.
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.
WooFunnels provide 10 Divi modules to set up your one-click upsell page:
Let’s look at some of these modules below.
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.
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.
Now, start configuring the Divi WF Quantity Selector module settings.
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.
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.
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 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:
Let’s look at these two modules one-by-one.
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 this module. Make customizations in the headings, sizing, spacings, borders, box shadows, filters, transformations, animations, and much more.
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.
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 WooFunnels Divi modules.
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!