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.
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!
I am developing dynamic website using Divi as my theme.
I wanted to know that how can we set dynamic value to Number Counter module.
I dag into the theme files and I saw the code in main-modules.php. but couldn’t get the solution.
Please help me out with this issue.
hey there, sort of random and out of context but here is my question.. I am using divi which is amazing by the way. without it I never would have had a grasp on html and css the way I do now as well as an ability to create and edit child themes. My question though, and an issue I have never ran into before using divi is that when I attempt to view my site from a mobile device (approx 4.5inch x 3 inch HTC ONE Android using both internet explorer and chrome) my site displays some graphics and some of the text here and there but mostly it only shows the html and css, even some shortcodes… I cant figure out why. If you can help or if there is a simple fix that I am missing please help me out. I just installed jetpack plugin and was hoping that was the issue..
You guys are all so awesome! I love this. I am not a programmer, and this is a dream come true for me
Please, how to apply Divi styles for Contact Form 7?
Thanks for sharing details. WooCommerce information is really helpful.
I cannot edit the sllder module. It seems to freeze up. No problem with other modules.
It would be interesting to have a text module in the full size width, this way, it would be possible to use plug-ins for instance to use Flickr pics in a slider. Do you plan to do this in a future version?
I is possible to use these elements while creating posts? I saw that only in page builder? For posts saw only shortcodes and other elements.
I am trying to edit a text module in Divi for a one page site, and I cannot find anyway to edit the text module. I can see the text in the revisions and when I view source. But when I go to edit the page there is nothing in the editor. I know this is probably something simple, but I am new to WordPress and having no luck at all here. Help?
Hi Nick, awesome theme! While working with it, I’m wondering if there is a way to show comments on a page designed with the page builder. I would have expected a comments-module of some sort. Is there an easy way to show/add comments?