Lesefortschritt:

Slider-Modul des Divi-Themes mit zwei (oder mehr) Buttons darstellen

30. Oktober 2024 | Divi-Theme, HTML

Trick # 399 | Dieser Beitrag beinhaltet 719 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Im Slider-Modul des Divi-Themes lässt sich ein Button – etwa für zusätzliche Information o.ä. – anzeigen. Ab und an bräuchte man aber womöglich einen zweiten oder dritten Button. Ein solcher lässt sich ganz einfach erstellen.

Standardmässig zeigt sich die Divi-Slideshow wie nebenan:

 

Auf der Folie wird ein Button angezeigt, der mehr Infos verspricht und angeklickt werden kann.

Demo-Slide #1

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

Demo-Slide #2

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Benötigt man einen weiteren Button auf der Folie, so ist auch dies machbar. Dafür benötigen Sie nichts weiter als folgenden HTML-Code, den Sie in den Textinhalt Ihrer Sliderfolie(n) einfügen können. Tun Sie dies jedoch in der HTML-, bzw. Text-Ansicht des Editors und nicht in der Visuell-, bzw. Wysiwyg-Ansicht:

<a class="et_pb_more_button et_pb_button" href="#">1. Button</a>
<a class="et_pb_more_button et_pb_button" href="#">2. Button</a>

Ersetzen Sie nun in den beiden Links das «#» im Code mit den Links zur gewünschten Website. Auch die Beschriftung (1./2. Button) müssen Sie natürlich ersetzen.

Achten Sie überdies darauf, dass Sie keinen Text in den normalen Slider-Button einfügen – dies könnte die Darstellung verunstalten.

Der obige Slider zeigt sich nun mit zwei Buttons:

Demo-Slide #1

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

1. Button
2. Button

Demo-Slide #2

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

3. Button
4. Button

Werbung

Werbung

 

Pin It on Pinterest

Share This