Elegant Themes Blog

Stay up to date with our most recent news and updates

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

Posted on December 13 by in Resources | 57 comments

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!

Divi-Banner

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.

contact-1

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.

contact-2

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.

woocommerce-1

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.

woocommerce-2

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.

woocommerce-3

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?

video-1

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!

video-2

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.

video-3

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.

gallery-1

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.

gallery-2

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.

gallery-3

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!

57 Comments

  1. Great post about the endless possibilities of this new outstanding theme. Thanks so much Nick. You are the best!!

  2. Wow! amazing! Just wondering. How do we adjust the slider size for the homepage?

  3. Divi is awesome guys! Actually I love all the ET Themes. Have a ton of themes I have purchased over the years but I always fall back to my ET Themes. They Rock! Thank you Nick and all of the ET team.
    Merry Christmas!
    Gina

  4. You guys are all so awesome! I love this. I am not a programmer, and this is a dream come true for me.

  5. Very cool and useful, ET really exceed itself and DIVI is showing a new direction as becoming of of the TOP quality themes provider for WP now, expecting more soon!!!!

  6. I don’t know if it is the right place to make the query.
    I am having a problem when wanting to add a Portfolio module.Don’t include categories that are already created and which have posts attached to them appear.
    Hope you can help me, thank you very much!

    • If you need any help, please open a ticket in our support forums so that our team can assist you.

      • Hi Nick!
        I bought elegant themes and I’m trying to use DIVI theme, but I cannot find the instructions to modify the size of the images in the slider, if I use the image like background the image is not totally visible, if I put the image like a slide it is too small and left positioned, how can I build a wide slideshow where the images are shown in all their integrity?

        • If you need help with anything, please open a ticket in our support forums so that our team can assist you.

  7. I become dependent on Divi. Waiting for every evening, when discovering new and new possibilities. Thanks for everything Nick and all of Elegant Themes.

  8. A very good post to consult, you are an amazing team, congratulations and thanks Nick

  9. Do
    intelligent
    visions
    intelligent
    … with Divi !

  10. Nick,

    Thanks for these examples and the excellent tutorial videos that you guys have put together. For the first time we can follow the ET design processes step by step.

    I recently dropped NextGen after it goofed on me with a WP upgrade. I find Jetpack an excellent plugin with good (read: solid but basic) gallery functions and…. the basic contact/survey form builder is also really neat and slots into the Text Module excellently!

    I really enjoyed that piece above on WooCommerce.

    Thanks,

    John.

  11. Really excited to get to grips with Divi… Loving the daily tips too.. 12 days of Divi Rocks!!! Thanks Nick :)

  12. I have been developing my site based on Foxy – but this is really tempting me to jump ship to Divi.

    Such a good theme!

  13. compliments! with Divi you gim us best satsfaction! Thanx, grazie, best work!

  14. I love this new theme and the code blocks. Please please tell these things are possible with the page builder plug in I use that on many client sites for their ease.

  15. I just built a simple great looking site with DIVI. It didn’t take long to understand the building structure. I quickly learned to rename each module to recognize the text and blurb content. The site is newportweddinglimos.com .

    I didn’t see a way to link the text in the blurb, just the title. Maybe I missed something. Overall, DIVI is fantastic. I can duplicate the structure of many attractive sites, and it renders well on a smartphone. ART

    • Hey,

      I just visited your site it looks great. Can you please help me with the set up the image slider on divi? I’m new to blogging and can’t figure it out. It would be really great if you can help.

      Thanks

  16. Cool, I think this ‘Shortcodes in Text Modules’ thing should let me eliminate a plugin!
    Keep up the great work!

  17. Really impressive. I can’t wait to start playing with this.

  18. It seems awesome. I can’t wait to migrate to it.

  19. Thank you Nick, this post is the easiest way to learn how to setup the Divi theme :)

  20. I was wondering about the text module if it function like the text widget but now, you have added +1 value to the great Divi the “Swiss Army Knife”. However, these are some of the modules I’d love to see with Divi;

    Revolution slider (layered slider)
    Option for retina display..ouch, I love the flat design though!
    Option for 1page loader
    Map integration though we have many plugins meowing
    Tiled team/staff page like flexi theme portfolio effect or Usquare plugin
    Some nich modules e.g appointment, events, audio like

    Phew! I know it’s no small thing but I believe you can open the gates of heaven with these modules! Thanks Elegant Team!

  21. Good thing we have a new site to work on next week or I’d have to start rebuilding our old ones in Divi (and I’m still very, very tempted!!!) — so far it looks to be outstanding as a process – much faster to drop in elements and seems that it will be more easily customizable.

  22. hi Nick ! It’s really a good job! Is it possible to build a filterable portfolio (by tag) with Divi? i really need this feature. It would be even better is the portfolio module could display other custom post type and custom taxonomy… Thanks to think about it! But Divi is already a piece of paradise!

  23. Divi is AWESOME…….a dream come true!!!

  24. My first test with DIVI was the integration with plugins of the Toolset from wp-types.com and their shortcodes works great inside Text Module. That is just awesome!
    DIVI + Toolset fit perfect and just make my job so easy and really fast!

    Can’t wait to see the next 10 days of DIVI! Keep the great work guys.

    • Now that sounds powerful. Combining custom codes from Toolset with Divi. Where do you get the actual codes?

  25. The theme support the plugin wysija for the newsletters?

    • Nicolas,

      I installed the wysija plugin on my test site and had no trouble using it.

  26. An impressive theme. This is the most high quality flexible theme I have seen from you guys, surpassing many of your competitions themes.

  27. I am really enjoying these posts! Pushing me even more so to “re-invent” myself using Divi.

    Not sure if I should ask this here but I am going to as I am really not sure where else to ask this. You may move/ remove it :

    Is Divi compatible with any “Event Calendar” Plugins? I used to use these kinds of plugins a lot to show the dates of my events; but always had a problem with the plugins conflicting with my site (eventually leading me to having to re-do my main one).

    Other than that- I have been using Divi for the past few days to get the feel of it. I am usually anti-page builder and refuse to work with themes that use them (due to the fact I have always coded and that is how I feel most comfortable)- however I must say; this page builder is the first one that really made me feel good about using it and is easy to use. Divi and it’s structure is basically what I have been looking for in a theme.

    I also think it’s great how you offer these posts to help users make the most out of their experience.

    Good job! Looking forward to more posts and ET updates.

  28. Hi Nick,

    Just wondering if there will be an update to the shortcodes.

    It would be great if there was some new ones to reflect the style of Divi.

    The old ones just look a little bit dated now.

    Congrats on Divi as well. It rocks.

    Cheers,

    Shane

  29. Have now downloaded the theme. There’s just too many options to chose from!

    Excellent work.

  30. So flexible. Excellent multifunction usagefor the Text Module – instead of cluttering everything up with dozens for single function modules.

    Good planning and foresight. Well done.

  31. Just played with the PageBuilder today, this is great, but am I missing something or I can’t use the PageBuilder on regular posts? Seems I can only use it with pages or projects.

    How does it align with the ElegantBuilder plugin?
    Thanks

  32. Thanks, as always, for being such a solid source of encouragement, wisdom, and resources for your customers. I recommend your themes to anyone who comes to me seeking web design.

  33. How about integrating other Gallery software? like the Revolution Slider?

  34. ahha..again awesome themes..how you always do this…:-)

  35. How to create page templats in Divi? It has been 3 days I am searching. I didt find help..

    • The theme does not come with any page templates. Everything is created using the builder. The idea of page templates have been replaced with premade layouts in the builder.

  36. I have been using Divi for the past few days to get the feel of it. I am usually anti-page builder and refuse to work with themes that use them (due to the fact I have always coded and that is how I feel most comfortable)- however I must say; this page builder is the first one that really made me feel good about using it and is easy to use. Divi and it’s structure is basically what I have been looking for in a theme.

  37. Thank you thank you thank you. the more I look into DIVI the happier I am…I would say that there really is no need for ANY OTHER theme or theme bundle company. you guys are really awesome.

  38. Thank you for the new shortcodes. Is there any newsletter in order to get updated?

  39. Can you change the font size within a lot of these modules… Some of them seem a bit thin..
    Thanks,
    Bob

  40. Is there a membership plugin or module already in divi? if not which would you recommend for use with it?
    Thanks,
    Andrew

  41. is there anyway to add audio files for people to listen to and download if they want?

  42. 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?

  43. 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?

  44. Hi,
    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.

    Cheers
    Regards
    Pawel

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Join 253,319 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today