Mixing and adding some widgets together to get impressive designs may cause some conflicts between them. In this article, we will show you how to resolve the issue when including Elementor Media Grid widget into Premium Tabs widget for Elementor.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Typically, Media Grid widget in the first tab will be loaded fine.
But switching to the second tab, you will notice that the media will not be loaded successfully.
To solve this conflict, you need to insert custom JavaScript code into the page that contains the Tabs widget.
So, you can follow these steps to solve this problem in one minute.
Step 1: You should insert HTML widget from Elementor below the tab widget.
Step 2: Copy and paste the following JS code to HTML widget:
<script>
window.addEventListener('DOMContentLoaded', function() {
const $ = jQuery;
var $premiumTabs = $('.premium-tabs-container');
$premiumTabs.on('click', '.premium-tabs-nav-list-item', function() {
window.dispatchEvent(new Event('resize'));
});
});
</script>
Once you pasted Javascript code to HTML widget, Media Grid widget will be refreshed once a tab is clicked.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
