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
DIVI Header/Menus
- Better Mobile Menu
- Closed Mobile Menu setup
- Fix Responsive Nature of your Menu
- Change Menu Breaking Point for Mobile
- Overlapping Logo
- Hide the Phone Icon and/or Phone Number
- Customizing Divi’s Secondary Menu Bar with a Call to Action
- Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling
- Fun Header Modifications
- Secondary Menu CTA
- Change Logo on Scroll
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
DIVI Plugins / Hacks
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
- Make Blog Feed Columns Even – must add “bloggrid” to your module CSS Class in the advanced area
- 2,3 and 4 Column Square Blog Layout
Not finding what you’re looking for? Send us a message using this form and we’ll try find you a solution.