Lesefortschritt:

    Slideshow mit wechselnden Bildern – aber statischer Texteinblendung

    21. April 2024 | CSS-Stylesheet, Divi-Theme

    Trick # 337 | Dieser Beitrag beinhaltet 889 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.

    Heute ein echter Quicktipp: Eine einzige Codezeile wird benötigt, um im Slider-Modul des Divi-Themes den Hintergrund zwar zu wechseln, den Text aber statisch beizubehalten.

    Normalerweise sehen Slideshows im Divi-Theme mit ein- und demselben Text aber wechselnden Hintergründen so aus wie nebenan:

     

    Bei jedem Slidewechsel wird die Textanzeige ausgeblendet und neu aufgebaut. Selbst dann, wenn die Folien denselben Text enthalten.

    Titel-Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Titel-Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Titel-Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Wenn Sie allerdings den Hintergrund wechseln möchten und den einzigen Textblock ruckelfrei darstellen wollen, dann geht auch das: Bearbeiten Sie das Slider-Modul (nicht die einzelnen Slides) und klicken Sie auf den Tab «Erweitert». Öffnen Sie nun «Benutzdefiniertes CSS» und suchen Sie das Textfeld «Folienbeschreibung». Dort fügen Sie die folgende Zeile ein:

    animation-name: none;

    Nun sieht die Slideshow so aus:

     

    Der Text bleibt stehen und ruckelt nicht mehr – bloss der Hintergrund wechselt.

    Titel-Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Titel-Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Titel-Text

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Werbung

    Header-Menu des Divi-Themes anpassen

    Das Headermenu (auch «Primary Menu» genannt) lässt sich im Customizer des Divi Themes optisch verändern. Es geht aber noch viel besser: Mit CSS haben Sie weitaus mehr Möglichkeiten, das Styling anzupassen. Wir zeigen Ihnen wie.
    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This