On The Third Day Of Divi, We Unlock The Simple Power Of The Text Module

Hopefully you have had a chance to download our latest theme, Divi. As mentioned in the Theme Launch Post, we will be writing a Divi-related post on our blog every day for the next 12 Days of Divi. Be sure to tune in each day for the next twelve days to get your hands on tons of Divi-related tips and resources! If you haven’t checked out Divi yet, then click the link below to view the release post with all the juicy details, and for your chance to win a free Lifetime Membership!

Text Modules Aren’t Just Text Modules

In today’s post, I will be going over the most basic of all the Divi modules: The Text Module. In going over this module in more detail, I can answer many questions and concerns from our customers about how the Divi builder interacts with third party plugins (which is to say, it interacts very well!).

It’s best not to think of the text module as a way to add text, but instead, as the most basic way to enable the the standard WordPress Post Editor and all of the features that it provides. When you edit a text module, you can do everything you have ever been able to do with a page or post. In addition, you can move the element around your page and place it in various column layouts using the Divi builder. Let’s go over how the Text module might be used in ways you never thought possible.

Adding A Custom Contact Form

The Text Module is the key to integrating any plugin that supports shortcodes. For example, adding a custom contact form anywhere on your page using the Contact Form 7 plugin is a breeze with Divi. As with many plugins, whenever you create a new contact form in Contact Form 7, you are given a shortcode that can be placed on any of your pages to order to display the form. By placing this shortcode alone in a text module, we have created a custom contact form module that can be moved around within the Divi builder with ease.

After placing our new text module to the right of an Image Module, we get the following result for my newly created About Me page. This same concept can be applied to thousands of other plugins as well. Let’s take a look at some more examples.

Creating Custom WooCommerce Pages

WooCommerce also provides you with a plethora of shortcodes that you can use throughout your page. These shortcodes can be used in Text Modules, expanding your commerce toolkit within the builder beyond the Shop Module already provided. A list of all the WooCommerce Shortcodes can be found here, or you can use the visual shortcode interface within the post editor.

For example, we can use the [woocommerce_cart] shortcode to create a custom Checkout page within the Divi builder. This allows us to integrate the shopping cart into a page surrounded by other Divi modules. In this example, I place the WooCommerce cart under a Fullwidth Header module, and above a series of Toggle Modules that have frequently asked questions my buyers might find useful during checkout.

As seen in the screenshot, I add a section between the two I have already created to house my WooCommerce cart. Inside this section I add a 1 column row, and inside that row I add a Text Module. Within the content area of the Text Module, I input the WooCommerce shortcode. Next I choose this new page as my “Cart” page within the WooCommerce settings so that WooCommerce knows that this is the page that should be used during checkout.

The result is a beautiful checkout page that serves my customers much better than before. Using this same technique, you can build custom pages for all of your WooCommerce areas using the Divi builder.

Embedding Videos

You don’t need a Video module to embed videos anywhere on your page with Divi. Using the Text Module and WordPress’s native video embedding feature, you can add videos quickly and easily. For example, here is a a screenshot from our demo where we have an Image Module next to a Text Module/Animated Counters Module. What if instead of having an image on the left, I would like to display a video instead?

First things first, we replace that Image Module with a Text Module. Next, in the content field of the module settings, we type the URL to our desired youtube video. Fortunately for us, WordPress does the rest of the work, and turns that URL into a standard WordPress video embed. Because we haven’t added anything else to the content field, this “Text Module” just became a Video Module!

When we view our page now, a standard Youtube video is displayed full width inside our 2/3 column to the left of our text. You can also upload your own videos and add them to your Text Module using the WordPress media editor within the post editor to display native video files.

Using NextGEN Galley To Create Dynamic Galleries Anywhere

Text modules make it easy to support the very popular NextGEN Gallery plugin as well. Add a NextGEN Gallery to one of your Divi Text Modules, and all of a sudden you have a custom gallery module that can be moved around your page with ease using the Divi builder. For example, here is one of our pages in the Divi demo. I would like to add a gallery below my header section to showcase my agency’s latest designs. To do this, I added a new row to the bottom section, and within it I added a text module.

Next I used the NextGEN Gallery’s visual composer to create a new gallery and add it to the post editor. You can also create your own galleries manually using the NextGEN shortcodes.

In this example I created a very standard gallery, however the same technique could be applied to create other gallery types as well, such as Slideshows and Image Clouds.

The Possibilities Are Countless

These are just a few examples of how the Text Module can be used to integrate plugins into your page. The Divi Builder was built to be very versatile, and to be compatible with standard WordPress functions. Behind the scenes, the builder is editing your actual post content, which means the way your page interacts with plugins has not been compromised. I hope that everyone is enjoying building truly dynamic pages with the Divi builder. If you haven’t downloaded Divi yet, then you are missing out on lots of fun!