How To Put A Divi Module Inside The Divi Tab Layout

Putting a Divi module inside the tab menu is not available by default in Divi but in this blog, I will reveal the trick for you.

Add a tab module

add tab module in Divi

 

Create a sample post. As an example, I would like to put a blurb module inside the tab module. Let’s do the magic!

Configure your blurb and finalize the elements. Once done, it’s time to get the shortcode.

1. Hover the Builder button > right click to inspect the elements and remove the et_pb_hidden inside the class name.
trick to get the divi shortcode

2.
step 2 in getting the divi module shortcode

As an example, here’s the final shortcode for your blurb.

module

 

Result:

w

Menu 1

 

Now, you can put that shortcode on your tab module. Feel free to add classes to style your tab module or tab container e.g using grid classes inside the blurb module

 

 

Grid CSS – Divi

To have this kind of design, we will need to use custom classes and grid.

Please declare the grid-image custom class in the menu and add a class in the row called grid-container then duplicate the container two times to have 3 column image. Here’s the quick screen recording.

Please go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:  Feel fre to change the font-size according to your liking.

.grid-container {
display: grid;
grid-template-columns: repeat(3,33%);
}

.grid-image p {
margin-top: -7em;
padding: 2%;
color: white;
font-size: .9em;
line-height: 1em;
}

 

How To Create Mansory Design In Divi Using Custom CSS Grid | WP

If you think the Divi columns features doesn’t support what you want in creating a mansonry grid layout either for your gallery, portfolio, images. This CSS grid will do the trick for you.

 

 

Basically, we will need to use 1 column and push all the elements vertically or horizontally depending of the design you wanted to create. In this example, we will create this kind of layout.

 

1.Open your page or post and create a one column row

divi column

 

2.Open the Row Settings by clicking the gear icon > Advanced tab > add a class name. As an example I use mygrid_column

divi row settings

 

3.Add a class on your inner module, As an example, I use lender_img

module settings advanced tab

 

Go to WordPress dashboard > Divi > Theme Customizer > Custom CSS and add the following code

div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(4,1fr);
align-self: center;
}

If you want to change the number of grids in mobile version, simply add this media query. Let’s say if viewed in mobile, images will turn into columns so that will be

@media (max-width: 414px) {div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(3,1fr);
align-self: center;
}}

Preview:mansory grid css sample divi

2019’s Complete Guide To Fix Loading Issue With Divi Builder or Visual Builder

In this guide, Bookworm Head will walk you through the most common troubleshoot you can do to fix the loading issue with Divi.


1.Plugin Conflicts

Some of the plugins can trigger the loading issue. Mostly, these are poor plugins that haven’t updated for years or it’s just not compatible with Divi. In this case, try to disable the plugins temporary to isolate what’s causing the issue.

 

how to deactivate plugins

If the problem solved after that, then you will need to find which plugin is conflicting, simply enable it one by one. If the problem occurs again when activating a specific plugin, then you need to keep that disable.

If you have WordFence and you confirmed that this causing the issue then simply set the Firewall to Learning Mode instead of Enabled and Protected

how to change the wordfence firewall to learning mode

 

2. CSS File Generation

Also, don’t forget to clear your css file generation. Simply go to WordPress dashboard > Divi> Theme Options > Builder > Advanced > Clear or disable the css file generation.

4. PHP Directive Limit and Outdated PHP version

Old version of PHP is unsecured and since Elegant Themes keeps their theme up to date to WordPress best practices, you need to keep your site as well.

 

How to update my PHP

As an example, I will use Siteground since this is my hosting site.

 

How to change the php directive values. The effective ways I recommend so far is putting the recommended values below to your .httaccess.  This is a hidden file so make sure that you’ve enabled your FTP client to view hidden files, then open up the file labeled “.htaccess” to edit. At the bottom of the file, paste in this code:

how to edit the .httaccess divi

php_value upload_max_filesize 264M
php_value post_max_size 264M
php_value max_execution_time 600
php_value max_input_time 600

For the complete reference, Elegant themes wrote this guide you can check

 

5. Harmful custom jQuery on the <head> section or CSS on the Theme Customizer

To access the <head> section, go to Divi > Theme Options > Integration 

 

To access the <head> section, go to Divi > Theme Customizer > Custom CSS

 

 

 

Outdated WordPress/Theme version or Poor child theme

switching the child theme to divi

If you still haven’t fixed the error after the above recommended, open your WordPress dashboard in Incognito > right click and inspect the elements, if you found any error in the console then there might be something wrong in the WordPress or Theme installation. If that happens, you will need to reinstall your WordPress or Theme.

 

How to reinstall your Divi website?

Activate any default theme like Twenty Seventeen then delete the current installed Divi theme. Lastly, go to members area > download the Divi.zip and re-upload it to your WordPress dashboard > Themes > Add New

 

Make sure you backup your custom CSS and jQuery if you have some. Simply put it on the notepad++ so you can re-add it after reinstallation is finished. 

 

How to reinstall the core WordPress files? 

1. Go to WordPress.org and download the latest version of Divi. Unzip the file. 

2. Open your root directory using ftp and replace all the files except your wp-content folder and wp-config.php

 

Warning: Always backup your website when doing the reinstallation.

 

Does the above recommendation fix your current issue? I’ll be happy to know your feedback!

Top 5 Signs Of Hiring A PowToonist Expert – Should DIY Or Not?

PowToon is indeed famous with over 10 million users! You will definitely inloved if you tried to use it however despite of PowToon’s user friendly interface, there are some instances that you need to consider in hiring a professional PowToonist.

Checkout out the Top Burning Reasons Why Other Prefer To Hire a PowToonist Expert instead of Doing-it-Yourself.

  • They don’t have enough time to do it.
  • They want to make a better PowToon presentation
  • Plans are too expensive for one time project
  • They want to create a catchy explainer video for their branding
  • They are not creative enough

However, if you have a lot of projects and have enough time to learn PowToon! We’ll definitely encourage to do-it-yourself so you can master the interface. PowToon is not just a tool but it can let your earn money and profession, you can be a PowToonist like us if you’re dedicated to learn how to use it.  Feel free to check the PowToon tutorials for tips and tricks. Happy PowTooning!

Related Post:  PowToon New Library Features

So which one you prefer?

Create a PowToon yourself or hire PowToonist experts like us? The decision is still yours!