Elementüberblick

Hilfeseite

Übersicht für alle wichtigen Elemente & Klassen

Subline für Überschriften: Am Zahnrad von Inhaltselement im 'CSS - Selektor': "subline headline-center" eintragen

Ankerlink

Am Zauberstab -> 'Fortgeschrittene Elemente' -> 'Dynamische Funktion' -> 'Anker-Ziel': Das Element öffnet man am Zahnrad und gibt dort eine beliebige Bezeichnung an wie man den Anker Link nennen will.

Die Bezeichnung fügt man dann an der entsprechenenden Stelle via Link (Wort markieren, Rechtsklick, Link.., URL) mit einer Raute (#) ein. z.B. unten: #bildergalerie

Bei Buttons macht man das selbe nur, dass man vor dem "#bildergalerie" noch den Seitenpfad mit angeben muss. z.B.:

"/bonn-2021/elementueberblick/#bildergalerie"

Text-, Bild- & Linkelement

Das ist die Überschrift

Das ist der Text

Der erste Punkt "Formatter" gibt an welche Inhalte angezeigt werden. Das heißt wenn Sie nur Text in das Inhaltselement schreiben wählen Sie 'Nur Text' aus. Wenn Sie ein Bild mit einfügen wählen Sie 'Text und Bild' aus usw.
An der Option "Layout" kann die Reihenfolge z.B. Bild - Überschrift - Text, Überschrift - Bild - Text etc. verändert werden.
Zahnrad Einstellungen für die Überschrift "Überschrift-Anzeige": 'H1' nur für die oberste Überschrift. Die weiteren 'H2' & 'H3' je nach Wunsch.
Zahnrad Einstellungen für Bilder: Können an den Optionen "Bildgröße (Desktop)" sowie "Bildformat" z.B. 3:1, 4:3 etc. nach belieben verändert werden.

Buttons

Die Button kann man am Zahnrad an der Option "Link-Anzeige" verändern.

Großer Button

Kleiner Button

Einfacher Text-Link

Boxen

In Zahnradeinstellung "CSS-Selektoren" die gewünschte Anweisung eintragen.

Box transparent

Eintragen: box

Box weiß

Eintragen: box white

Box grau - mit Schatten

Eintragen: box grau

Box grau - ohne Schatten

Eintragen: box grey

Abstände

Am Zahnrad: 'CSS-Selektor' gewünschte Anweisung eintragen.

Die Innenabstände an Element oder Row nach unten in Pixel:

pb-10
pb-20
pb-30
pb-40

Die Innenabstände an Element oder Row nach oben in Pixel:

pt-10
pt-20
pt-30
pt-40

Die Aussenabstände an Element oder Row nach unten in Pixel:

mb-10
mb-20
mb-30
mb-40

Die Aussenabstände an Element oder Row nach oben in Pixel:

mt-10
mt-20
mt-30
mt-40

Akkordeon

Beispiel 1

Zauberstab: 'Fortgeschrittene Elemente'

Am Stift: Gewüschter Text bei 'Bezeichnung' eintragen. Neuer Reiter am Bionade-Button '+' hinzufügen bzw. mit Schere entfernen & Mit den Pfeilen die Position verändern.

NICHT DIE Id VERÄNDERN!

Zahnrad: 'Formatter' umstellen auf "Akkordeon-Darstellung"

Videos einbinden

Zauberstab: "Medien" Element einbinden.

Auf Bionade-Button: Unter 'Medientyp' YouTube oder MaM auswählen und die ID ( YT: z.B. yCJakRq8s3M) eintragen oder sich anmelden (MaM).

Auf Wunsch bzw. wenn möglich noch die Bildqualität (bei "Vorschau") ändern.

Bildergalerie

Zauberstab: Element "Bilderserie" auswählen.

Am Stift: Unter dem Punkt 'Bild' am Bionade-Button auf '+' & die gewünschten Bilder auswählen bzw. hochladen.

Am Zahnrad einstellen ggf. einstellen wie viele Bilder auf einmal angezeigt werden sollen "Bilder pro Seite".

Link Sequenz

Zauberstab 'Link Sequenz': In diesem Element kann man Links (Extern, Intern, PDF etc.) einbinden und diese mit einem Icon kennzeichnen.

Wenn Sie in einer Link Sequenz immer die selbe Link- bzw. Iconart haben klicken Sie auf das Zahnrad und wählen unter dem Punkt 'Icon' das gewünschte aus.

Wollen Sie unterschiedliche Icons müssen Sie den Punkt 'Icon' auf "Kein Icon" setzten und die gewünschten Icons manuell einstellen.
Dazu klicken Sie auf den Bionade-Button und auf den Stift und schreiben unter dem Punkt 'Link' -> 'Text' vor der Bezeichnung des Links folgendes:

Icon:link-external|| oder Icon:file-pdf-o||

Die verschiedenen Bezeichnungen finden Sie, wenn Sie am Zahnrad unter 'Icon' Ihr gewüschtes Icon auswählen und auf den Stift rechts klicken.

Aufzählung "check"

Beispiel 1
Beispiel 1
Beispiel 1

Diese Aufzählungsdarstellung bekommen Sie wenn Sie in einem Inhaltselement eine Aufzählungs erstellen und danach am Zahnrad im 'CSS-Selektor' "check" schreiben.

Rows

Zauberstab -> 'Template-Elemente' -> 'Layout-Zeile': In der Regel benutzen wir die Row mit LG aber das steht Ihnen offen. Wichtig ist, dass Sie immer die selben nehmen, da die Elemente sonst auf kleineren Bildschirmen anders dargestellt werden.

Diese Elemente werden nur IM System dargestellt und sind, wenn leer, von aussen dementsprechend nicht sichtbar.

Die Row 'Einstellbare Breite' können Sie am roten Zahnrad (Strg e) verändern. Setzten Sie dafür die "Zeilen-Breite" auf den gewünschten Wert. Diese Row wird immer zentriert dargestellt.

Bereiche

Zauberstab -> 'Template-Elemente' -> 'Layout-Bereich': Das Elemente "Bereich - Eine Zeile" können sie verwenden um über die volle Bildschirmbreite eine Hintergrundfarbe zu setzten. Dazu klicken Sie auf das Zahnrad und wählen diese unter dem Punkt "Hintergrundfarbe" aus.

Das Element "Bereich - Zeile in voller Bildschirmbreite" kann man für die Maps oder Slider verwenden.

Kacheln auf Übersichtsseiten

Am Zahnrad: An dem Punkt 'Layout' Bild - Überschrift - Text auswählen.

Beratung & Unterstützung

Wir bieten Beratung, Unterstützung und Begleitung bei psychologischen und sozialen Problemen an.

Zur Seite

Am Zahnrad: Bei Formatter: "Bild / Textumdreher" auswählen. Alle weiteren Einstellungen sind optional.

Esperanza Kinderladen

Der Kinder Secondhand-Laden bietet preiswerte (Grund-) Ausstattung für Schwangerschaft, Baby und Kleinkind. Das ideale Ehrenamt für kinderliebe Menschen, die Freude am Verkaufen haben.

Für diese Darstellung muss am roten Zahnrad von dem BEREICH oder der ROW am CSS-Selektor 'lotse' gesetzt werden.

Die Bezeichnung wird in dem Element (auf den Stift) im Bildtitel geschrieben.

Soforthilfen