Divi Tutorial: Modul Registerkarte aktiven Tab ändern

Das Divi Modul Registerkarte ist eine praktische Möglichkeit, um viele Inhalte schön aufgeräumt zu präsentieren. Aber manchmal möchte man nicht den 1. Tab als aktives Element haben, sondern vielleicht lieber den 2. oder 3. Tab.

Warum sollte man einen anderen Tab aktiv haben? Eine gute Frage. Nun, die Registerkarten lassen sich in vielerlei Weise nutzen. Und so ergibt sich durchaus die Notwendigkeit, den aktiven Tab flexibel festlegen zu können.

Ein Beispiel für verschiedene, aktive Tabs im Modul Registerkarte

Ich habe einen kleinen Videokurs über 5 Tage. Nun habe ich das Modul Registerkarte genutzt, um pro Tag das Schulungsvideo und ein paar Kommentare unterzubekommen. Während die Idee für Tag 1 noch super funktioniert, scheitert der Plan bereits an Tag 2. Denn wenn ich einen Kunden auf die Seite mit Kursteil 1 und 2 schicke, dann soll der aktuelle Kursteil aktiv sein – also Tag 2.

Über einen kleinen Kniff kann man aber den aktiven Tab vorab festlegen. In diesem Fall lädt das Modul Registerkarte mit Tab 2 (grüner Menüpunkt “Grundlagen”).

Divi Modul Registerkarte

Aktiven Tab ändern:

Wie hab ich dies gemacht? Mit einem ganz kleinen Codeschnipsel. Füge dazu zunächst das Modul CODE oberhalb des Moduls REGISTERKARTE ein.

Divi Modul Registerkarte 02

Öffne das Modul CODE und trage dort den folgenden Code ein:

<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery( ".et_pb_tabs_controls .et_pb_tab_0" ).removeClass( "et_pb_tab_active" );
jQuery( ".et_pb_tabs_controls .et_pb_tab_1" ).addClass( "et_pb_tab_active" );
jQuery( ".et_pb_all_tabs .et_pb_tab_0" ).removeClass( "et_pb_active_content" );
jQuery( ".et_pb_all_tabs .et_pb_tab_1" ).addClass( "et_pb_active_content" ); });
</script>

In diesem Code entfernen wir im ersten Schritt den aktiven Tab (removeClass) und fügen dann den aktiven Tab hinzu (addClass). Dies müssen wir zum einen für den Tab und zum anderen für die Tab-Leiste erledigen.

Was musst du also tun?

Ändere einfach den aktiven Tab, indem du den “.et_pb_tab_1” abänderst. Soll Tab 2 als “aktiv” geladen werden, änderst du die Codezeilen in “.et_pb_tab_2”:

<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery( ".et_pb_tabs_controls .et_pb_tab_0" ).removeClass( "et_pb_tab_active" );
jQuery( ".et_pb_tabs_controls .et_pb_tab_2" ).addClass( "et_pb_tab_active" );
jQuery( ".et_pb_all_tabs .et_pb_tab_0" ).removeClass( "et_pb_active_content" );
jQuery( ".et_pb_all_tabs .et_pb_tab_2" ).addClass( "et_pb_active_content" ); });
</script>

Divi Modul Registerkarte 03

Fertig!

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Divi Performance: Page Speed Insights optimieren

Divi Performance: Page Speed Insights optimieren

In diesem Video zeige ich dir, wie ich die Page Speed Insights für das Theme Divi optimiere. Wir werden dazu die Bilder, den Cache und die Fonts optimieren. Ich nutze dazu folgende Plugins: Cache mit WP Rocket optimieren: https://link.designers-inn.de/wprocket Bilder...

Divi Header Jumping / Moving On Page Load

Divi Header Jumping / Moving On Page Load

Wenn du eine benutzerdefinierte Einstellungen für die Navigation nutzt, sprich im Theme Customizer eine eigene Höhe für deine Navigation angelegt hast, kommt es zu kleinen Sprüngen im Kopfbereich der Website. Dies betrifft den ersten Abschnitt der Seite, Module mit...

WordPress Updates installieren

WordPress Updates installieren

Für viele ist es ein Horrorszenario: "Wir müssen ein WordPress Update installieren". Wie soll man das machen? Geht alles reibungslos? Wo gibt es Probleme? Und das Wichtigste. Wie kann man diese beheben? Wie man WordPress aktualisieren oder Theme- und Plugin-Updates...

Divi Sticky Elemente Tutorial

Divi Sticky Elemente Tutorial

Mit dem aktuellen Divi kann man Sticky Elemente einfügen – und das ist eine prima Angelegenheit, denn wir können jetzt beim Scrollen einzelne Module, Zeilen oder auch Sektionen am Kopf der Seite oder auch am Fuß der Seite festkleben. Und je nachdem wie weit wir...

|

Platz für deinen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Neue Themes

Mehr verkaufen

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download