Auf dieser Seite sind alle Elemente, die das Theme mitliefert oder anzupassen sind, erklärt und wie Sie diese einsetzen können.
Folgende Elemente werden auf dieser Seite erklärt:
Für einen Button platzieren Sie ein Element vom Typ Hyperlink und wählen das Template ce_hyperlink_button
aus.
Bei Erweiterte CSS-Klassen können Sie noch weitere Klassen definieren um das Aussehen der Buttons zu verändern,
siehe Bulma Dokumentation. Beispiele finden Sie in der
Demo.
Um eine Content-Box hinzuzufügen, platzieren Sie ein Element vom Typ Content Box.
Um mehrere Elemente nebeneinander darzustellen, platzieren Sie diese Elemente wie im Abschnitt Grid beschrieben.
Unter Erweiterte CSS-Klassen können Sie eine Klasse für die Hauptfarbe auswählen, wenn die Content Box in
einer anderen Hintergrundfarbe dargestellt werden soll: .is-primary
, .is-link
, .is-info
, .is-success
,
.is-warning
und .is-danger
. Wird keine Klasse ausgewählt, wird sie wie das erste Element im folgenden Screenshot
dargestellt.
Beispiele finden Sie in der Demo.
Für einen vollflächigen Slider, wie auf der Startseite, platzieren Sie diesen in einem eigenen Artikel. In den
Artikeleinstellungen wählen Sie unter Experteneinstellungen bei CSS-Stil-Auswahl
Artikel mit voller Bildschirmbreite
aus.
Im Artikel platzieren Sie die Elemente Content-Slider (Umschlag Anfang) und Content-Slider (Umschlag Ende). Zwischend den Umschlagselementen platzieren Sie jeweils ein Element vom Typ Slider-Element.
Beim Umschlag-Anfangs-Element müssen Sie bei CSS-Stil Auswahl Slider mit voller Breite und Höhe
auswählen.
Zusätzlich können Sie auch noch Parallax-Slider
auswählen, der für den Parallax-Effekt des Textes, wenn man nach
unten scrollt, sorgt.
Beim Slider-Element haben Sie die Möglichkeit eine Überschrift, Text, Bild, Verlinkung und ein Hintergrundbild- oder Video zu setzen.
Zusätzlich haben Sie bei CSS-Stil Auswahl auch noch die Wahl zwischen einem dunklen Bild/Video und weißen Text. Wenn Sie keine der Klassen auswählen, wird der Text in schwarz dargestellt.
Beispiele finden Sie in der Demo.
Das Theme basiert auf Bulma, womit Sie u. a. Elemente ganz einfach nebeneinander und gleichzeitig für mobile Geräte in einer Spalte darstellen können.
Um beispielsweise zwei Textelemente nebeneinander darzustellen, fügen Sie zuerst jeweils ein Element vom Typ Contao Themes (Inhaltscontainer Anfang) und Contao Themes (Inhaltscontainer Ende) hinzu.
Das Element vom Typ Inhaltscontainer Anfang muss unter Erweiterte CSS-Klassen das Col-Attribut .columns
bekommen.
Zwischen den Umschlagselementen platzieren Sie die Elemente, die Sie nebeneinander darstellen möchten. Dabei müssen
Sie unter Erweiterte CSS-Klassen das Col-Attribut .column
auswählen.
Zusätzlich können Sie auch noch weitere Klassen definieren, u. a. Spaltenbreiten für bestimmte Auflösungen, Spalten-Abstände und die Ausrichtung. Weitere Informationen finden Sie in der Bulma Dokumentation.
Beispiele finden Sie in der Demo.
Platzieren Sie das Headerbild in einem eigenen Artikel in der Kopfzeile. In den Artikeleinstellungen wählen Sie
unter Experteneinstellungen bei CSS-Stil-Auswahl Artikel mit voller Bildschirmbreite
aus.
Um ein Headerbild zu platzieren verwenden Sie den Elementtyp Bild und wählen unter Template-Einstellungen das Template ce_image_headerimage hinzu.
Bei CSS-Stil Auswahl haben Sie optional die Auswahl zwischen einem dunkleren Bild, weißen Text und einem größeren Headerbild.
Beispiele finden Sie in der Demo: Headerbild dunkel, Headerbild hell, großes Headerbild dunkel, großes Headerbild hell.
Dunkel / Normales Headerbild:
Dunkel / Großes Headerbild:
Hell / Normales Headerbild:
Hell / Großes Headerbild:
Um ein Hero-Element (Textelement mit Hintergrund) hinzuzufügen, platzieren Sie ein Element vom Typ Text und wählen
das Template ce_text_cthemes_simplebox_nature
aus.
Unter Erweiterte CSS-Klassen können Sie eine Klasse für die Hauptfarbe auswählen, wenn das Hero-Element in
einer anderen Hintergrundfarbe dargestellt werden soll: .is-primary
, .is-link
, .is-info
, .is-success
,
.is-warning
und .is-danger
. Wird keine Klasse ausgewählt, wird sie wie das erste Element im folgenden Screenshot
dargestellt.
Beispiele finden Sie in der Demo.
Beim Elementtyp Aufzählung haben Sie neben einer nummerierten und unnummerierten Liste noch die Möglichkeit verschiedene Templates auszuwählen:
Beispiele finden Sie in der Demo.
Um eine Preis-Tabelle darzustellen, platzieren Sie ein Element vom Typ Preis-Tabelle.
Um eine Box hervorgehoben darzustellen, füllen Sie das Eingabefeld Bezeichnung für Hervorgehobene Box aus. Um mehrere Elemente nebeneinander darzustellen, platzieren Sie diese Elemente wie im Abschnitt Grid beschrieben.
Beispiele finden Sie in der Demo.
Folgende Klassen können Sie beim Elementtyp Tabelle definieren:
table is-bordered
: mit Rahmentable is-striped
: mit Streifentable is-narrow
: weniger Abstandtable is-hoverable
: mit HoverAlle Klassen können Sie auch miteinander kombinieren, z. B.: table is-bordered is-striped is-narrow is-hoverable
.
Beispiele finden Sie in der Demo.
Platzieren Sie für die einzelnen Reiter zuerst ein Element vom Typ Tabs-Reiter.
Vergeben Sie in den Tabs-Einstellungen immer einen eindeutigen Wert und eine Bezeichnung.
Platzieren Sie nun für jeden Reiter jeweils ein Element vom Typ Tabs-Umschlag (Start) und Tabs-Umschlag (Stop). Innerhalb der Umschlag-Elemente platzieren Sie den Inhalt.
Beim Elementtyp Tabs-Umschlag (Start) müssen Sie den entsprechenden zugehörigen Wert vom Element Tabs-Reiter eintragen.
Beispiel der platzierten Elemente im Backend:
Beispiele finden Sie in der Demo.
Um eine Teaser-Box hinzuzufügen, platzieren Sie ein Element vom Typ Teaser Box.
Beispiele finden Sie in der Demo.
Für eine Teaserbox, wie im folgenden Screenshot, wählen Sie das Template ce_cthemes_teaserbox_fullheight
aus. Wenn Sie unter Experteneinstellungen bei CSS-Stil Auswahl Sticky Teaserbox auswählen, bleiben die Bilder am oberen Bildschirmrand “kleben”, wenn man nach unten scrollt.
Für eine Teaserbox, wie im folgenden Screenshot, wählen Sie das Template ce_cthemes_teaserbox_nature
aus.
Platzieren Sie ein Element vom Typ Text und Icon.
Sie können eine Überschrift, einen Text sowie das Font-Awesome Icon und ggf. einen Link definieren. Eine Liste mit den möglichen Icons finden Sie auf der Seite von Font Awesome. Wenn Sie ein Icon anklicken, sehen Sie oben auch die Klassen, die Sie in das Eingabefeld Font Awesome 5 Icon (Klassen) einfügen müssen.
Wenn das Element einen Hintergrund wie im folgenden Screenshot erhalten soll, wählen Sie unter den Template-Einstellungen ce_cthemes_feature_element_nature
aus.
Beispiele finden Sie in der Demo.