DIVI Coding

As a member of MySUPPORTsite.ca you have free access to our collection of coding and links to assist in adjusting and customizing your DIVI website. On this page, you will find multiple adjustments and solutions to many DIVI related website questions.

Membership is currently FREE – with no real goal of going to a paid format anytime soon. If we can help our Divi community… let’s do it. 🙂

As a builder Divi is constantly being updated. This will often result in new features being added that may be similar to some hacks/additional code as found on this page. Please let us know if you find any redundant entries here and we’ll be sure to evaluate and remove any antiquated links. 🙂

2021

Tabs - Linking to Individual tabs

This one is a bit of work but VERY worth the effort.

The following 4 steps will allow for setting up links (button or other) from any page in the site to link directly to a specific tab on another page AND open it.
(We needed to use this in conjunction with shortcodes added to tabs on a Contact page so that visitors could be sent directly to the correct form.)

1) Assign CSS ID to the tab module being used – contact-tabs

2) We created 6 tabs with the following titles. You can change the titles or number of tabs as needed but be sure to change the script to the appropriate names and to add/remove each script section needed. (Donations, Marketing, Research, Scholarships, Fundraising, General Questions)

3) Add the following code to Divi > Theme Options > Integration > Add code to the < head > of your blog

<script>
jQuery(function ($) {
//Anchor links for the Tabs module – Contact page
//Donations

$(‘a.open-donations’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_0 a’).click();
});
});
</script>

<script>
jQuery(function ($) {,
//Marketing
$(‘a.open-marketing’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_1 a’).click();
});
});
</script>
<script>
jQuery(function ($) {
//Research
$(‘a.open-research’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_2 a’).click();
});
});
</script>

<script>
jQuery(function ($) {
//Scholarships
$(‘a.open-scholarships’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_3 a’).click();
});
});
</script>

<script>
jQuery(function ($) {
//Fundraising
$(‘a.open-fundraising’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_4 a’).click();
});
});
</script>

<script>
jQuery(function ($) {
//General Questions
$(‘a.open-general-questions’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_5 a’).click();
});
});
</script>

4) Create your links to the tabs using the following (adjusting the areas in red accordingly and the correct tab number at the end)

Link to add: <https://yoursite.com/page/#contact-tabs|5>

That’s it. Save your work and all should work well.

Pre 2020

Dropdown Menu change look/padding

First you need to create a dropdown menu. Then you can add this CSS for the styling. place the CSS code in Theme options > Custom CSS or in your child theme if you are using one. (just cut, paste and save)

————————————–
/* — Dropdown Menu Settigs — */

#top-menu .sub-menu {
background-color: #3c5464; /* Background color dropdown */
border-top: 3px solid #25313a; /* Top border color dropdown */
}

#top-menu .sub-menu li a {
font-size: 14px; /* Font size dropdown */
width: 100%;
color: #fff;
border-bottom: 1px solid #768792; /* Border bottom menu item color */
}

.sub-menu li:hover {
background-color: #25313a; /* Hover color menu item */
}

.sub-menu .current_page_item {
background-color: #25313a; /* Current menu item color dropdown */
}

#top-menu .sub-menu li {
padding-left: 0px;
padding-right: 0px;
width: 100%;
}

#top-menu li li a {
padding-top: 10px;
padding-bottom: 8px;
}

#top-menu .sub-menu {
padding-top: 0px;
padding-bottom: 0px;
}

.nav ul li a:hover {
opacity: 1;
background-color: rgba(0,0,0,0);
}

/* — END – Dropdown Menu Settigs — */

WooCommerce
Coding Compilations
Maps - Force Secure Embedded

Add this sccript to the <head> of the site/page:

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(” .et-social-icons a”).attr(‘target’, ‘_new’);

});
</script>

<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests>

Blog Mods

Not finding what you’re looking for? Send us a message using this form and we’ll try find you a solution.