Ihr sucht nach coolen Divi Theme Hacks? Ihr habt sie gefunden. Nachdem wir bei Great2Gether nun schon seit Jahren ausschließlich das Divi Theme verwenden haben wir ein paar besonders hilfreiche Divi Theme Hacks für euch gesammelt. Dieser Beitrag wird ständig erweitert und aktualisiert.
Ihr kennt selber auch ein paar gute Divi Theme Hacks? Wenn ja, schreibt uns den Link zu (eurem?) Beitrag in die Kommentare und wir klauen euren Code um diese Liste damit zu erweitern 😉 Also los geht`s!
Inhalt – DIVI Theme Hacks:
Das Accordeon Modul
Social Icon Links
Divi Theme Hacks – Hack #1: Das Akkordeon Modul
Das gute alte Akkordeon Modul kennt jeder. Wenn man es einbaut ist der erste Reiter immer gleich geöffnet und schließt sich auch nur wenn man einen anderen Reiter öffnet. Das ist irgendwie ziemlich uncool. Viel cooler wäre es doch, wenn der erste Reiter im Standard geschlossen bleibt und sich auf Wunsch auch schließen läßt ohne dafür extra einen anderen Tab / Reiter öffnen zu müssen.
Zu diesem Zweck kann man 2 Code Schnipsel einbauen. Zum einen benötigen wir ein bißchen CSS und zum anderen einen Bund Javascript Code. Wer weiß wie man das ganze einbindet ist klar im Vorteil und allen anderen möchte ich zur Implementierung ein Plugin vorschlagen mit dem sich das ganze relativ einfach und dazu sehr übersichtlich anlegen lässt.
Installiert euch also wenn ihr mit den Codes nicht so vertraut seid erst einmal das WordPress Plugin Custom CSS and JS, es ist kostenlos und erfreut sich großer Beliebtheit und bester Bewertungen.
Ist das Plugin installiert legt ihr als erstes einen neuen CSS Code an, indem ihr auf dem ADD CSS Button klickt, dem Code einen Namen gebt und im Inhalt folgenden Code einfügt und im Anschluss speichert:
/* MODULE - Akkordeon - Schließen Buttons für Akkordeon-Tabs */
.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
content: "\e04f";
}
Als nächstes legt ihr ein neues Javascript Element an, indem ihr folgenden Code einbindet:
/* Akkordeon Reiter im Standard geschlossen lassen */
jQuery(function($){
$('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
$('.et_pb_accordion .et_pb_toggle').click(function() {
$this = $(this);
setTimeout(function(){
$this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
},700);
});
});
/* Akkordeon Reiter schließbar machen (in Kombination mit CSS Code) */
jQuery(function($){
$('.et_pb_toggle_title').click(function(){
var $toggle = $(this).closest('.et_pb_toggle');
if (!$toggle.hasClass('et_pb_accordion_toggling')) {
var $accordion = $toggle.closest('.et_pb_accordion');
if ($toggle.hasClass('et_pb_toggle_open')) {
$accordion.addClass('et_pb_accordion_toggling');
$toggle.find('.et_pb_toggle_content').slideToggle(700, function() {
$toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
});
}
setTimeout(function(){
$accordion.removeClass('et_pb_accordion_toggling');
}, 750);
}
});
});
Divi Theme Hacks – Hack #2: Social Icon Links
Die Links / Icons zu den Social Media Channels eurer Webseite befinden sich bei Aktivierung entweder unten rechts im Footer oder oben links im sekundären Header. Das Problem bei diesen Links: Wenn man darauf klickt öffnet sich kein neuer Tab sondern das Social Media Profil wird im gleichen Tab geöffnet und der Nutzer wird somit unglücklicherweise von der eigentliche Seite komplett weggelenkt.
Um dieses Problem zu beheben bedarf es des oben erwähnten Custom CSS and JS Plugins, optional kann man es aber auch in den Divi Einstellungen einfügen, was jedoch gerade bei viel Code zu wenig Übersicht führen. Wenn das Plugin installiert wurden legen Sie einen frischen JS Code an, vergeben einen sprechenden Namen und fügen dort folgenden Code ein um danach das Speichern nicht zu vergessen:
jQuery(document).ready(function($){
$('.et-social-icon .icon').each(function(){
$(this).attr('target', 'blank');
});
});
Wer das DIVI Theme noch nicht verwendet kann es auf der Seite elegantthemes.com nachholen. Wir verwenden seit Jahren nur noch Divi und haben das Theme über die Jahre auch selber ständig weiter optimiert.
P.S.: Der Link zu Elegantthemes ist ein Partner-Link bzw. ein sogenannter Affiliate Link. Wenn du selber auch Divi nutzt und öffentlich weiterempfiehlst nutze die Möglichkeit und melde dich auch im Partner-Programm an.