Elemente

Auf dieser Seite sind alle Elemente aufgelistet, die das Theme bereits mitbringt.

Folgende Elemente werden auf dieser Seite erklärt:

Content-Box

Für die Content-Box muss der Elementtyp Content-Box ausgewählt werden. Die Hintergrundfarbe kann geändert werden, indem man dem Element Klassen vergibt (z. B. “grey lighten-3”, für mehr Informationen siehe Abschnitt Farben oder man das CSS (custom.scss) anpasst. Erläuterungen, wie Elemente nebeneinander dargestellt werden können, finden Sie im Abschnitt Grid.

Content-Box

CountTo

In der Version 2.1.0 des Mate Theme ist das CountTo Feature hinzugekommen. Damit können Zahlen hochgezählt werden, wenn Sie in das Sichtfenster gelangen. Ein Beispiel finden Sie in der Mate Theme Demo.

Sollen die Elemente wie im Beispiel nebeneinander dargestellt werden, platzieren Sie Textelemente innerhalb eines Elementes vom Typ Grid (Grid-Start) und Grid (Grid-Stop). Im Textelement können Sie unter Erweiterte CSS-Klassen die Spaltenbreiten festlegen, siehe Bild. Im Abschnitt Grid wird dies nochmal genauer beschrieben.

Dem Grid-Start-Element müssen Sie unter den Experten-Einstellungen die Klasse count-to-container geben, ansonsten wird es nicht wie im Beispiel gestylt.

Nutzen Sie unseren Material Icons Inserttag um ein Icon zu setzen, z. B. {{mi::place}}. place wäre in diesem Fall der Name des Icons und kann beliebig getauscht werden. Eine Liste mit den Material Icons und deren Namen finden Sie ebenfalls in unserer Dokumentation.

Das Label haben wir in unserem Beispiel als h6-Überschrift im Text gesetzt.

Für die Zahl nutzen Sie ebenfalls unseren CountTo Inserttag, z. B. {{countTo::929::founded}}. An zweiter Stelle steht immer die Zahl, an dritter Stelle können Sie eine ID vergeben. Wenn Sie mehrere Inserttags auf einer Seite einbinden, müssen Sie jeweils eine eindeutige ID vergeben.

Beispiel:

Beispielhafte Platzierung der Elemente im Artikel:

Textelement:

Spaltenbreiten setzen im Textelement:

Einfache Inhaltsbox

Man kann einem Element vom Elementtyp Text einen weißen Hintergrund mit etwas Abstand geben, indem man dem Element das individuelle Template ce_text_simplebox_mate vergibt.

Einfache Inhaltsbox

Headerbild

Für das Headerbild muss der Elementtyp Bild sowie das Template ce_image_mate_headerimage ausgewählt werden. Der Bildausschnitt kann über das Festlegen des wichtigen Bereiches im Bild ausgewählt werden.

Eine Beispielintegration für ein normales Headerbild finden Sie in der Demo-Seite auf den Layout-Seiten. Eine Beispielintegration für ein schmales Headerbild finden Sie auf der Seite Kontakt.

Normales Headerbild: Normales Headerbild

Schmales Headerbild:

Für ein schmaleres Headerbild muss dem Element die Klasse smaller gegeben werden.
Schmales Headerbild

Links ausgerichtetes Headerbild:

Für ein links ausgerichtetes Headerbild geben Sie dem Element einfach die Klasse left.

Links ausgerichtetes Headerbild

Rechts ausgerichtetes Headerbild:

Für ein rechts ausgerichtetes Headerbild geben Sie dem Element einfach die Klasse right.

Rechts ausgerichtetes Headerbild

Kundenstimmen-Slider

In der Version 2.1.0 des Mate Theme ist ein Kundenstimmen-Slider hinzugekommen. Beispiele finden Sie in der Mate Theme Demo.

Platzieren Sie zuerst jeweils ein Element vom Typ Content Slider (Umschlag Anfang) und Content Slider (Umschlag Ende). In dem Umschlags-Element können Sie beliebig viele Elemente vom Typ Text-Element mit Hintergrundbild platzieren. Dort haben Sie die Möglichkeit einen Text einzugeben sowie ein Bild (Profilbild) und ein Hintergrundbild zu setzen.

Soll der Slider schmal dargestellt werden (siehe Dokumentation), dann geben Sie dem Element Content Slider (Umschlag Anfang) unter den Experten-Einstellungen (das zweite Eingabefeld) die Klasse smaller.

Beispiel eines Kundenstimmen-Sliders:

Platzierung der Elemente im Artikel:

Elementtyp auswählen und Eingabe des Textes:

Bild (Profilbild) auswählen:

Hintergrundbild auswählen:

Unschärfe beim Hintergrundbild entfernen:

Die Unschärfe des Hintergrundbildes können Sie durch folgendes CSS, das in die custom.scss unter files/mate/sass eingefügt werden muss, entfernen:

.ce_mateTextBackgroundElement .bg-image {
    filter: none;
}

News-Slider

Im News-Slider ist es möglich Newsbeiträge in einem Slider darzustellen. Der Slider ist auf der Startseite der Demo-Seite eingebunden. Im Theme ist der Slider im Artikel Start in der Kopfzeile über den Insert-Tag {{theme::content::MATE02/01}} eingebunden.

Sie benötigen dafür keine Content-Slider Umschlag-Elemente, sondern müssen lediglich ein Modul vom Typ Nachrichtenliste einbinden. Beim Nachrichtentemplate muss news_mate_slider sowie beim individuellen Template mod_newslist_mate_slider ausgewählt werden. Die Gesamtanzahl der Beiträge ist variabel auswählbar.

Das Bild sowie die Teasertexte können Sie jeweils in den Beitragseinstellungen des Newsbeitrages auswählen.

News-Slider

Wenn Sie die Position des Text und Bildes vertauschen wollen, bearbeiten Sie die Beitragseinstellungen der News und fügen unter Experten-Einstellungen die CSS-Klasse image-right ein.

News-Slider

Ab der Version 2.8.0 können die Slider-Einstellungen (Höhe, Intervall, Übergangsgeschwindigkeit und Navigation) im Modul Nachrichtenliste angepasst werden.

News-Slider

Newsletter-Box

Im Footer ist es möglich einen Bereich für die Newsletter-Anmeldung zu integrieren. Die Newsletter-Box ist im Modul Footer über den Insert-Tag {{theme::content::MATE02/01}} eingebunden. Das Modul dazu ist in einem Artikel unter MATE Elements - Moduls - 02/02 newsletter eingebunden. Damit das CSS geladen wird, muss der Artikel die ID newsletter besitzen.

Newsletter-Box

Parallax-Element

In der Version 2.1.0 des Mate Theme ist das Parallax-Element hinzugekommen. Platzieren Sie dafür im Artikel ein Element vom Typ Parallax-Element. Dort haben Sie die Möglichkeit eine Überschrift, den Text, die Höhe, einen Link sowie ein Bild zu setzen. In der Mate Theme Demo finden Sie Beispiele für Parallax-Elemente.

Teaser-Box

Für die Teaser-Box muss der Elementtyp Teaserbox ausgewählt werden. Die Breite der Boxen kann durch das Vergeben von CSS-Klassen angepasst werden. Wenn ein Bild hinzugefügt wird, muss die Bildgröße Teaser-Box (450x270) ausgewählt werden.

Teaser-Box

Content-Slider

Contao-eigener Content-Slider

Bei dem Element Content-Slider (Umschlag Anfang) muss das Template ce_sliderStart_mate ausgewählt werden. Bei dem abschließenden Element Content-Slider (Umschlag Ende) muss das Template ce_sliderStop_mate ausgewählt werden. Der Slider wird wie im folgenden Beispiel gestylt, wenn die Textelemente die Klasse slidebox1 bekommen.

Wenn dem Umschlag-Anfang-Element die Klasse smaller vergeben wird, wird der Content Slider nur mit einer Höhe von 250px dargestellt.

Content-Slider mit Bild und Text darunter

Um einen Content Slider wie im folgenden Beispiel anzulegen, platzieren Sie Textelemente innerhalb der Elemente Content-Slider (Umschlag Anfang) und Content-Slider (Umschlag Ende).

Dem Element vom Typ Umschlag Anfang müssen Sie unter den Experten-Einstellungen beim zweiten Eingabefeld die Klassen slider slider-text-below-image geben sowie bei den Template-Einstellungen das Template ce_sliderStart_mate auswählen.

Beim Element vom Typ Umschlag Ende wählen Sie noch das Template ce_sliderStop_mate aus.

Ein Beispiel finden Sie in der MATE Theme Demo auf der Seite Content Slider.

So sollte der Content Slider aussehen:

Platzierung der Elemente:

Auswahl des Templates und Vergeben der Klassen im Umschlag-Start-Element:

Wenn ein Link wie ein Button (weiße Schrift auf grünen Hintergrund) aussehen soll, müssen Sie dem Link die Klasse btn geben.

Media-Elemente

Galerie

Je nachdem wie viele Vorschaubilder pro Reihe angezeigt werden sollen, passt sich die Anordnung der Bilder automatisch an und nimmt den kompletten Platz, der zur Verfügung steht, ein.

YouTube-Video

Für ein YouTube-Video muss das Template ce_youtube_mate ausgewählt werden.

Überschriften

Wenn ein Inhaltselement mit einer Überschrift die Klasse bordered-left oder bordered-right bekommt, wird die Überschrift mit einem Rahmen unten links bzw. unten rechts dargestellt.

Überschrift mit einem Rahmen auf der linken Seite:

Überschrift mit einem Rahmen auf der rechten Seite: