I am working on a new site for a client and we are using the tab modules.

Used sparingly, I like the tabs.  It allows you to organize content and breaks up the endless scrolling you see with some websites.

You may recall a tutorial I wrote a while back on Styling the Divi Tabs with Icons  I love that look.  I don’t think I have seen many people use the effect, but I am going to ask the Divi United guys to create it as a section for inclusion in the Dvi Cloud.

Today I wanted to share with you how to add columns inside of those tabs.  I am not going to bore you to death with a lot of code, I am going to share this very simple $14 plugin, VRYN Library Shortcodes.  This plugin allows you to turn anything in your Divi Library into a short code, then you can place that short code anywhere on your site (including inside of modules).

In my clients example he wanted three book covers  inside of a tab on the page called Downloads.  I was playing around with alignment, testing the dreaded div codes, and I hit upon the plugin.

Steps to follow:

  • Create a page or post on your site, which you will not publish.
  • Build your layout, section or module.  In my case I created a section with three columns, I added an image to each column, centered it and styled it.  (If you need rows, go ahead and add them, you can have whatever you want, even a complete layout!)
  • Save this section to the Divi Library.
  • Then navigate into the Divi Library and retrieved the shortcode.

short code to put columns into a tab module of the divi theme

  • Then paste the shortcode into the content area of the appropriate tab.

columns within tab module

If you need to edit the content, you can easily do this by going into the Divi Library, editing there.  After you hit update, your changes will automagically appear where ever the short code was placed.

The plugin comes with bonus materials, which you can preview here.  There are ten different Team Layouts, my favorite effect from the bonus library is the content that is displayed when you hover over an image.

hover over image effect

I hope this plugin helps you.  I would like to gift a copy to a reader.  Please leave a comment below and in about 24 hours I will randomly select a winner and add a copy of the VRYN Library Shortcode plugin to your Elegant Marketplace account.  If you don’t have an account, we will get you one.

Happy creating.

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This