!

Neues Video: Contao Themes: meine Top 4 | Meine Agentur: Digitalagentur mar_ke UG

Theme erstellenMitgliederbereich

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

Etwas nicht klar - Frag mich!

Was ist die Summe aus 3 und 3?