Contao Dozent Marvin Kellermann

|

Content Slider mit mehr Elementen

Erstellst du eine Website, sind vor allem Bilder und Bewegung essenziell für die User Experience. Die Seite wirkt sofort lebendiger und ein Content Slider sorgt dazu noch dafür, dass mehrere Inhalte auf wenig Pixel dargestellt werden können. Einige Themes bringen ein vorgefertigtes Slider-Inhaltsmodul mit, welches umfangreiche Einstellungsmöglichkeiten bietet. In diesem Tutorial erkläre ich dir, wie du mit dem Standard Contao Content-Slider mehrere Inhaltselemente oder Module auf einen Slide bekommen kannst.

Kostenloses Tutorial zum Content Slider auf YouTube ansehen

Falls du keine Lust hast dir die Schritt-für-Schritt-Anleitung durchzulesen, kannst du dir auch mein YouTube-Video zur Erweiterung des Content Sliders anschauen - viel Spaß!

1. Content Slider mit Inhaltselementen anlegen

Im ersten Schritt legst du ein Inhaltselement vom Elementtyp "Umschlang Anfang" aus der Gruppe Content Slider an und fügst einen beliebigen Inhalt ein. Nach dem letzten Element fügst du - du kannst es dir bereits denken - ein "Umschlang Ende", ebenfalls aus der Gruppe Content Slider, ein. Du kannst dazu bereits jetzt so viele Texte und Bilder einfügen, wie es dir beliebt. Logischerweise werden die Elemente nun aktuell noch Slide für Slide angezeigt. Um diesen Umstand zu ändern, werden wir nun Module erstellen, mit denen wir selbst definieren, wann ein Slide endet und ein neuer anfängt.

2. Ein Modul erstellen, dass ein Div Container erzeugt

Was wir nun tun, könnte simpler nicht sein. Navigiere zum Punkt Layout » Themes, wähle beim entsprechenden Theme den Punkt "Frontend-Module des Themes" (die beiden Zahnrädchen) und klicke danach oben rechts auf "Neu". Bei Modultyp wählst du "Eigener HTML-Code" aus und in dem Feld, das dann nun erscheint, trägst du <div> ein. Den Namen des Moduls kannst du frei wählen, ich würde dir aber empfehlen, dieses ebenfalls <div> zu nennen. Du wiederholst den Vorgang und erstellst ein neues Modul mit dem Typ "Eigener HTML-Code" - dieses Mal trägst du allerdings in beiden Eingabeflächen </div> ein.

Was ist ein Div?

Im HTML-Konstrukt wird ein Div als ein Container verwendet. Es ist sozusagen eine Box, in welcher sich Inhalt befindet. Umschließt ein Div Inhalt, der sich inmitten des Containers befindet, kann dieser als ein großes Element behandelt werden, gemeinsam durch CSS gestylt werden und mehr!

3. Div in den Slider einfügen

Wie du sicherlich schon verstanden hast, müssen wir nun nur noch die Inhalte in einem Div einschließen, welche von dem Content Slider als ein Slide verwendet werden soll. Dafür navigierst du über Inhalte » Artikel zu deinem Slider-Element zurück und fügst vor und nach dem Inhalt, welcher zusammen gepackt werden soll, ein neues Inhaltselement vom Elementtyp "Modul" ein. Zu beginn fügst du das Modul "<div>" und danach "</div>" ein.

Das dürfte in etwa so aussehen:

Damit werden nun alle Elemente innerhalb des Divs zusammen auf einem Slide angezeigt.

Ich hoffe dir mit diesem Contao Tutorial weiterhelfen zu können!

Zurück

Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.

Du benötigst Unterstützung bei deiner Contao-Instanz?