Lassen Sie mit diesen einfachen Mitteln auch den Link im “Vollbreiten Slider” (Fullwidth Slider) in einem eigenen Tab bzw. eigenen Fenster öffnen.

Schritt 1 – Fullwidth-Slider vorbereiten

Legen Sie dazu wie gewohnt Ihren Slider an.
Gehen Sie dann in die allgemeinen Moduleinstellungen des Sliders (1) und
öffnen dann das Tab “Benutzerdefiniertes CSS” (oder Custom CSS) (2).
Vergeben Sie für dieses Modul eine eigene CSS-Klasse (3) – den Namen können Sie selbst wählen.
Speichern Sie wie gewohnt am Ende Ihre Einstellungen.

Custom CSS Klasse Divi Link in neuem Tab

Schritt 2: Funktion zum Öffnen einfügen

Definieren Sie jetzt die Funktion für die CSS-Klasse.
In diesem Fall ergänzen Sie jedoch kein CSS, sondern etwas Javascript im Head-Bereich Ihrer Seite.

Gehen Sie dazu in die Divi-Theme-Optionen (1) und dort zu Integration (2).
Fügen Sie jetzt den folgenden Code in den Head-Bereich (3 – Code dem <head> Ihres Blogs hinzufügen):

<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(“.slider-link .et_pb_more_button.et_pb_button”).attr(“target”,”new”);
});
</script>

Damit ganz spezifisch Ihr Slider angesprochen wird, fügen Sie hier jetzt Ihren zuvor vergebenen Wert der CSS-Klasse ein(4), in meinem Beispiel “.slider-link” (der “.” vor Ihrem Wert ist hierbei noch zu ergänzen).

Prüfen Sie zum Schluss noch einmal kurz, ob der Header-Code entsprechend aktiviert ist (5).

Speichern Sie auch hier alle Ihre Änderungen.

Script Code Head Divi Link in neuem Tab oeffnen

Schritt 3: Testen Sie Ihren Slider

Gehen Sie nun zurück zu Ihrem Slider, öffnen Ihre Seite oder Ihren Beitrag und klicken Sie auf den Button in Ihrem Slider.

Der Link öffnet sich nun in einem neuen Fenster bzw. neuem Tab. Ein Beispiel finden Sie direkt darunter 🙂

Beitragsbild Header: @Pure Solutions Adobe Stock 77868987