Seiten-Elemente
Elemente im Seiten-Editor
Deine Seitenlayouts können sehr einfach oder komplex gestaltet sein. Das hängt ganz von deinen Inhalten und dem gewünschten Seiten-Design ab. Der Editor stellt dafür eine Reihe an Elementen zur Verfügung für die Ausgestaltung von Seiten.
Du kannst frei bestimmen, mit welchen Elementen dein Seitenlayout zusammengesetzt werden soll, damit deine Seiteninhalte bei allen Bildschirmformaten optimal dargestellt werden. Mit welchen Elementen du am einfachsten das beste Ergebnis erzielt kannst, hängt von unterschiedlichen Faktoren ab und oft ist es auch Geschmacksache, warum Elemente und Layouts bevorzugt verwendet werden. Im Folgenden stellen wir die Gestaltungsmöglichkeiten der Elemente im Seitenlayout vor.
Hinweis zum Styling
Auf dieser Seite werden nur die inhaltlich gestalterischen Möglichkeiten der Elemente erkärt. Das Styling der Elemente (Farben, Abstände, Formen, Kanten, Schriften usw.) wird an vielen anderen Stellen erklärt. Es ist aber zu berücksichtigen, dass die eingestellten Stylings auch Einfluss auf die Darstellung der Elemente haben können. Weitere Informationen findest du hier:
Elemente kopieren und löschen und Spalten bearbeiten
Alle Elemente werden automatisch in Spalten (Abschnitte innerhalb einer Sektion) eingefügt. Du kannst nicht nur das angelegte Element inhaltlich bearbeiten, sondern auch die Spalte, in der das Element eingefügt ist. Du kannst die Spalte bearbeiten und die in der Spalte befindlichen Elemente kopieren oder löschen. Du gelangst dorthin, wenn du über das Element drüberfährst. Dann erscheint links oben beim Element ein Symbol mit drei Kästchen. Dieses Symbol bietet die Buttons "Element kopieren", "Element löschen" und "Spalte bearbeiten" an.
Element kopieren und einfügen:
Wenn du ein Element kopiert hast, kannst du es an einer anderen Stelle auf einer beliebigen Seite einkopieren, indem du an der gewünschten Stelle auf "Element hinzufügen" klickst. Dann erscheint beim Einfüge-Popup ein graues Kästchen mit dem Kopiersymbol zum Einfügen des kopierten Elements.
Einstellungsmöglichkeiten zur Bearbeitung der Spalten:
- Spalten-Typ (normale Spalte, Akkordeon oder Karussell zum Bestimmen, wie die Elemente innerhalb einer Spalte dargestellt werden sollen)
- Index (eine Zahl eingeben zur Bestimmung, ob diese Spalte auf einer Ebene über oder unter anderen Spaltenebenen liegt – standardmäßig hat jede Ebene 1 eingestellt)
- Sichtbarkeit
- Spaltenbreite (Breitenverhältnis zu den anderen Spalten – standardmäßig haben alle Ebenen 1 eingestellt)
- Elemente innerhalb der Spalte verschieben, kopieren oder löschen
Weiterführende Informationen zu Akkordeon und Karussell findest du hier:
Elemente für Websites
Die folgenden Elemente können zum Seitenaufbau auf allen Seiten eingesetzt werden.
Text Element
Das Text-Element besteht nur aus Text und einem hinzufügbaren Button. Diese Textstruktur findest du bei allen Elementen, die ein Textfeld integriert haben. Der Text besteht aus folgenden Feldern:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
- Text (Textfeld mit klassischen Textgestaltungselementen)
Das Styling von Dachzeile, Überschrift, Untertitel und Text ist direkt in den globalen Einstellungen vordefiniert, kann aber jederzeit in den Basis-Stilen der Elemente oder direkt im Element überschrieben werden.
Dachzeile, Überschrift und Untertitel sind bzgl. Textgestaltung limitiert. Dafür kannst du im Gegensatz zum Textfeld hier sogenannte HTML-Entitäten verwenden, um das Verhalten des Textes im Bezug auf Umbrüche und Leerzeichen zu steuern.
Häufig genutzte Entitäten sind:
- – Geschütztes Leerzeichen (non-breaking space)
- ­ – Bedingter Trennstrich (soft hyphen), wird nur angezeigt, wenn ein Zeilenumbruch erfolgt.
-   – Halbbreites Leerzeichen (en space)
-   – Breites Leerzeichen (em space)
-   – Schmales Leerzeichen (thin space)
In den Layout-Einstellungen kannst du den Erscheineffekt beim Scrollen festlegen (Silde in, Vergrößern, Erscheinen, Einblenden, Drehen).
Textfeld bearbeiten
Du kannst den Lauftext im Textfeld verschiedenen Tools bearbeiten:
- Fett (B), Kursiv (I), Unterstreichen (U)
- Hyperlink setzen (auch relative Links mit "/seitentitel" sind möglich)
- Aufzählung
- Tabellen
Du kannst sämtliche Formatierungen entfernen und mithilfe von "Als Text einfügen" kannst du auch Formatierungen von bestehenden Textdateien einkopieren. Dieses Einkopieren kann allerdings zu falschen Interpretation der Vorformatierungen kommen und sollte daher genau kontrolliert werden.
Weiters kannst du Abkürzungen und Fremdwörter speziell markieren und mit erklärenden Begriffen auszeichnen (für Barrierefreiheit sehr hilfreich).
Wenn du den Quellcode des Textes bearbeiten möchtest, musst du (außerhalb des Textfeldes) die Kurztastenbefehl Strg-Shift-D drucken (bei Mac: Command-Control-Shift-D). Dann erscheint das Symbol "<>" zum Bearbeiten des Quellcodes. Achtung: Eine missbräuchliche Bearbeitung des Quellcodes kann die technische und rechtliche Sicherheit beeinträchtigen!
Button hinzufügen:
Du kannst unter dem Textfeld einen Button hinzufügen. Die Details zu den Einstellungsmöglichkeiten erfährtst du bei: Buttons & Links
Text mit KI bearbeiten:
In jedem Textfeld kannst du KI deine Texte neu generieren, korrigieren oder ausformulieren lassen. Dafür klicke auf das KI-Symbol auf der rechten Seite des Textfeldes.
Bild-Text Element
Das Bild-Text-Element besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
- Text (Textfeld mit klassischen Textgestaltungselementen)
Details dazu findest du beim Text-Element. Beim Bild-Text Element ist der Text kombiniert mit einem Bild. Du kannst du spezifische Layout-Eistellungen treffen:
- Breite Bild-Text-Verhältnis
- Bildposition (rechts, links, oben, unten)
- Inhaltsausrichtung (oben, mitte, unten), wenn das Bild links oder rechts zum Text positioniert ist
- Bild Seitenverhältnis (Breite/Höhe)
- Bild Größenanpassung (füllend, eingepasst) muss immer gemeinsam mit dem Seitenverhältnis eingestellt werden (wenn nicht auf "auto" gestellt)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
Das Bild kannst du im Feld neben dem Textbereich raufladen. Für das Bild kannst du die Bildvergrößerung, einen Bildtext, Alternativtext und eine Verlinkung einstellen. Es gibt viele Layoutsvarianten, für dieses Element geeignet ist.
Alt-Texte automatisch generieren:
In >Einstellungen >KI-Panel kannst du die KI nutzen, um Bild-Alternativ-Texte automatisch zu erstellen. Die KI analysiert das Bild und legt automatisch Beschreibungstexte optimiertt für Barrierefreiheit, Suchmaschinenoptimierung oder Konversion an.
Banner Element
Der Banner besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
- Text (Textfeld mit klassischen Textgestaltungselementen)
Details dazu findest du beim Text-Element. Das Banner-Element wird vorrangig für Header und große Bildabschnitte eingesetzt. Es besteht aus einem Bild im Hintergrund und Textbereich und Button im Vordergrund. Die Text-Gestaltungsmöglichkeiten sind die gleichen wie beim Text-Element (siehe oben). Das Bild wird immer Element-füllend eingesetzt. Das bedeutet, dass das Bild immer so vergrößert oder verkleinert wird, damit es die Element-Innenbereich ausfüllt – außerhalb kann noch ein Außenabstand hinzukommen (siehe Styling von Elementen). Dadurch wird es immer an zwei Seiten angeschnitten, sofern die Bildproportionen nicht exakt mit den Element-Proportionen übereinstimmt. Deshalb ist ein wichtiger Gestaltungsaspekt beim Banner-Element ist die Einstellung der Bannerhöhe, da sie die Proportionen des Banners bestimmt.
Du kannst für den Banner spezifische Layout-Eistellungen treffen:
- Containerausrichtung (bestimmt die Position des Textbereichs im Banner)
- Höhe (bestimmt die Bannerhöhe in Pixel)
- Innencontainer auf volle Breite (bestimmt die Ausdehnung des Textbereichs)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
Das Bild kannst du im Feld neben dem Textbereich raufladen. Der Banner ist als Ganzes verlinkbar oder nur mit einem Button. Dem Bild kann ein Alternativ-Text geschrieben werden, wenn du auf das raufgeladene Bild klickst.
Alt-Texte automatisch generieren:
In >Einstellungen >KI-Panel kannst du die KI nutzen, um Bild-Alternativ-Texte automatisch zu erstellen. Die KI analysiert das Bild und legt automatisch Beschreibungstexte optimiertt für Barrierefreiheit, Suchmaschinenoptimierung oder Konversion an.
Slideshow Element
Die Slideshow besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
- Text (Textfeld mit klassischen Textgestaltungselementen)
Details dazu findest du beim Text-Element. Das Slideshow-Element ermöglicht den animierten Wechsel von Bild-Text-Sujets (Slides) innerhalb des Elementes. Abgesehen von den speziellen Einstellungen für die Slides verhält sich das Element im Bezug auf die Bild- und Text-Einstellungen gleich wie das Banner-Element (siehe oben).
Die speziellen Einstellungen für die Slideshow sind:
- Slide hinzufügen/bearbeiten/verschieben/entfernen
- Slide Animation (Slide oder Überblenden)
- Easing-Effekt (Beschleunigung/Abbremsen der Animation)
- Slide-Anzeigedauer (Angabe in Millisekunde)
- Slide-Animationsdauer (Angabe in Millisekunde)
- Pfeile (Links-Rechts-Schalter) einschalten
- Punkte (Slide-Anzeige am unteren Rand in der Mitte)
- Pause-Taste (zum Anhalten der Slide-Animation)
Du kannst für den Banner spezifische Layout-Eistellungen treffen:
- Containerausrichtung (bestimmt die Position des Textbereichs im Banner)
- Höhe (bestimmt die Bannerhöhe in Pixel)
- Innencontainer auf volle Breite (bestimmt die Ausdehnung des Textbereichs)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
Das Bild kannst du im Feld neben dem Textbereich raufladen. Der Banner ist als Ganzes verlinkbar oder nur mit einem Button. Dem Bild kann ein Alternativ-Text geschrieben werden, wenn du auf das raufgeladene Bild klickst.
Alt-Texte automatisch generieren:
In >Einstellungen >KI-Panel kannst du die KI nutzen, um Bild-Alternativ-Texte automatisch zu erstellen. Die KI analysiert das Bild und legt automatisch Beschreibungstexte optimiertt für Barrierefreiheit, Suchmaschinenoptimierung oder Konversion an.
Trennelement
Das Trennelement ist vorgesehen zum vertikalen Abtrennen von Elementen und Sektionen. Tyischerweise mit Trennlinien oder mit einem Bild. Deshalb beinhaltet das Element nur die Möglichkeit, ein Bild raufzuladen. Trennlinien, Hintergrundfarben, Abstände uä. sind in den Styling-Einstellungen zu treffen.
Das Bild, das raufgeladen werden kann, unterscheidet sich wesentlich von allen anderen Bild-Elementen: Das Bild im Trennelement wird nämlich in der hochgeladenen Originalgröße dargestellt, es sei denn, es ist breiter als die Elementbreite vorsieht, dann wird es proportional auf die Elementbreite verkleinert. Es wird aber nicht auf die Element- oder Spaltengröße aufgedehnt.
Das Bild wird technisch als Hintergrund eingestuft und benötigt keinen Alt-Text.
Bildergalerie Element
Die Bildergalerie besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Die Bildergalerie ermöglicht einen Bilderraster innerhalb des Seitenlayouts mit vergrößerbaren Einzelbildern.
Die speziellen Einstellungen für die Bildergalerie sind:
- Spaltenanzahl (Bilderanzahl innerhalb einer Bilderzeile)
- Horizontaler Spaltenabstand zwischen den Bildern (der verikale Abstand des Bilderrasters wird beim Styling der Bildergalerie eingestellt)
- Bild Seitenverhältnis (Breite/Höhe-Proportion für alle Bilder im Raster)
- Bild Größenanpassung (füllend, eingepasst) muss immer gemeinsam mit dem Seitenverhältnis eingestellt werden (wenn nicht auf "auto" gestellt)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
Das Bild kannst du im Feld neben dem Textbereich raufladen. Für das Bild kannst du die Bildvergrößerung, einen Bildtext, Alternativtext und eine Verlinkung einstellen. Es gibt viele Layoutsvarianten, für dieses Element geeignet ist.
Alt-Texte automatisch generieren:
In >Einstellungen >KI-Panel kannst du die KI nutzen, um Bild-Alternativ-Texte automatisch zu erstellen. Die KI analysiert das Bild und legt automatisch Beschreibungstexte optimiertt für Barrierefreiheit, Suchmaschinenoptimierung oder Konversion an.
Seitengalerie Element
Die Seitengalerie besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Eine Seitengalerie fasst andere Seiten in Form eines Bilderrasters oder einer Liste mit Verlinkung zu diesen Seiten in einer Seitengalerie zusammen. Das Besondere an diesem Element ist, dass die meisten Inhalte der Seitengalerie aus den Inhalten der Seiten gespeist werden, die in der Seitengalerie gelistet werden. Diese Inhalte sind:
- Seitentitel
- Datum (für Anzeige und Reihung der Seitenanrisse)
- Bild
- Teasertext (kurzer Beschreibungstext)
Wenn du diese Inhalte bearbeiten möchtest, musst du zu den verlinkten Seiten gehen. Zusätzlich zu diesen Inhalten kann noch ein Button in der Galerie zur Seite linken, der direkt in der Seitengalerie hinzugefügt werden kann und dessen Button-Text in der Seitengalerie festgelegt werden kann.
Die speziellen Einstellungen:
- Seitenauswahl manuell oder nach Seitentyp
- Seiten oder Seitentyp bestimmen
- Sortierung (nach Titel, nach Datum, nach Position)
- Datum, Teasertext, Bild, Button anzeigen
- Button-Text bearbeiten
- Anrisse pro Seite (zum Weiterblättern)
Die Layout-Einstellungen für die Seitengalerie sind:
- Breiten-Bild-Text-Verhältnis
- Bildposition (rechts, links, oben, unten)
- Inhaltsausrichtung (oben, mitte, unten), wenn das Bild links oder rechts zum Text positioniert ist
- Spaltenanzahl (Bilderanzahl innerhalb einer Bilderzeile)
- Horizontaler Spaltenabstand zwischen den Bildern (der verikale Abstand des Bilderrasters wird beim Styling der Bildergalerie eingestellt)
- Bild Seitenverhältnis (Breite/Höhe)
- Bild Größenanpassung (füllend, eingepasst) muss immer gemeinsam mit dem Seitenverhältnis eingestellt werden (wenn nicht auf "auto" gestellt)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
Durch diese Einstellungsmöglichkeiten kann eine Seitengalerie sehr unterschiedliche Layouts erhalten. Mehr Detail-Informationen über die Zusammensetzung der Seitengalerie durch Seitentypen erfährst du hier:
Formular Element
Das Formular-Element hat keine Gestaltungselemente außer den Überschriften-Bereich::
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Alle anderen Bestandteile des Formulars, werden direkt vom Formular ausgespielt, dass im Editor unter Formuare erstellt und bearbeitet werden kann. Es sind folgende Einstellungen direkt beim Anlegen des Formular zu treffen:
- Formulartyp (Eigenes Formular oder Newsletter-Anmeldung)
- Formular auswählen
- Standardwerte, die im Formular vorausgefüllt sein sollen
Alle weiteren Einstellungsdetails zum Formular erfährst du hier:
Video Element
Das Video besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Das Video-Element wird vom hochgeladenen oder verknüpften Video bestimmt. Das Video wird in die Elementbreite proportional eingapsst. Neben den Überschriften-Elementen (siehe oben: Text Element), kann dem Video ein Transskriptionstext (für Barrierefreiheit wichtig) hinzugefügt werden, der mittels Link unter dem Video ausklappt wird.
Im Video-Element kannst du folgende Funktionen regeln:
- Video hochladen oder YouTube/Vimeo-Link (aus Datenschutzgründen muss diese Verlinkung in den Grundeinstellungen freigegeben werden)
- Vorschaubild einspielen
- Automatisch abspielen
- Ton wiedergeben
- Automatisch wiederholen
- Transskriptionstext einfügen und gestalten
Bei den Layout-Einstellungen kannst du den Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.) festlegen.
Achtung: Deine selbst eingespielten Videos werden nicht automatisch komprimiert. Große Videodateien verlangsam die Seitenladegeschwindigkeit, wenn du das Video automatisch abspielen lässt. Beim Verwenden von YouTube- oder Vimeo-Links achte auf die Plattform-spezifischen Einstellungen, speziell im Bezug auf Werbeeinspielungen und weiterführende Drittanbieterinhalte, die auf deiner Website stören können.
Menü Element
Das Menü-Element besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Das Menü bietet die Möglichkeit, eine vertikal angelegte Linkliste zu erstellen. Typischerweise wird diese für die Footer-Menüs verwendet. Darüber hinaus ist sie auch gut geeignet, um Linklisten anzulegen, zB. eine Liste an Download-Files oder weiterführende Links.
Der Menüpunkt wird gleich angelegt wie beim Hauptmenü, mit Linktext, Link-Art (Seite, Kategorie, Produkt, Datei, Popup, externe Seite usw.), Link und Beifügung (Anker). Vergleiche dazu mit dem Hauptmenü:
Sitemap Element
Die Sitemap besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Das Sitemap-Element ist ein wichtiges Element für Barrierefreiheit, da sie alle Seiten und Shop-Bereiche zu einer Linkliste zusammenfasst. Für die Barrierefreiheit ist es wichtig, dass alle Bereiche mit einem Klick erreichbar sind. Folgende Bereiche können für die Sitemap ausgewählt werden:
- Klassische Seiten
- Seiten von Seitentypen
- Kategorien
- Hersteller
- Tags
- Produkte
Bei den Layout-Einstellungen kannst du den Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.) festlegen.
Nicht zu verwechseln mit der XML-Sitemap!
Diese Sitemap darf nicht mit der XML-Sitemap verwechselt werden, die für deinen Shop automatisch erstellt wird. Die XML-Sitemap wird benötigt, um Suchmaschinen eine strukturierte Übersicht über die Seiten und Dateien einer Website zu geben.
Produktgalerie Element
Die Produktgalerie ist typischerweise auf der Startseite und auf Themen- und Blogseiten sowie Landingpages im Einsatz. Dieses Element besitzt die Gestaltungsbereiche des Überschriften:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Die Produktgalerie ermöglicht ein Produkt-Karussell oder eine Raster-Anordnung innerhalb einer Seite.
Folgende Einstellungen kannst du für das Element setzen:
- Produktauswahl (manuell, aus einer Kategorie, beliebte Produkte)
- Modus (Karussell oder Raster)
Die Layout-Einstellungen für des Elements sind:
- Spaltenanzahl (Bilderanzahl innerhalb einer Bilderzeile)
- Bild Seitenverhältnis (Breite/Höhe-Proportion für alle Bilder im Raster)
- Bild Größenanpassung (füllend, eingepasst) muss immer gemeinsam mit dem Seitenverhältnis eingestellt werden (wenn nicht auf "auto" gestellt)
- Wunschliste Button Abstände (horizontal/vertikal)
- Horizontaler Spaltenabstand zwischen den Bildern (der verikale Abstand des Bilderrasters wird beim Styling der Bildergalerie eingestellt)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
- Ausrichtung unvollständiger Zeilen (links, Mitte, rechts)
Kategoriegalerie Element
Die Kategoriengalerie ist typischerweise auf der Startseite und auf Themen- und Blogseiten sowie Landingpages im Einsatz. Dieses Element besitzt die Gestaltungsbereiche des Überschriften:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Die Kategoriegalerie ermöglicht ein Karussell oder eine Raster-Anordnung innerhalb einer Seite.
Folgende Einstellungen kannst du für das Element setzen:
- Kategorien auswählen
- Modus (Karussell oder Raster)
Die Layout-Einstellungen für des Elements sind:
- Spaltenanzahl (Bilderanzahl innerhalb einer Bilderzeile)
- Bild Seitenverhältnis (Breite/Höhe-Proportion für alle Bilder im Raster)
- Bild Größenanpassung (füllend, eingepasst) muss immer gemeinsam mit dem Seitenverhältnis eingestellt werden (wenn nicht auf "auto" gestellt)
- Kategorie-Titel Position (mittig im Bild/unter dem Bild)
- Horizontaler Spaltenabstand zwischen den Bildern (der verikale Abstand des Bilderrasters wird beim Styling der Bildergalerie eingestellt)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
- Ausrichtung unvollständiger Zeilen (links, Mitte, rechts)
Logoraster Element
Der Logoraster ist speziell den Einsatz bei Online-Shops vorgesehen. Im Footer und bei Zahlungsarten-Seiten werden typischerweise die Logos von Zahlungsarten, Versanddienstleistern usw. angezeigt. Das Element besitzt die Gestaltungselemente des Überschriften-Bereich:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element. Das Logoraster-Element ermöglicht einen Bildraster mit den Logos von Zahlungsanbieter und -arten, Versanddienstleister, Zertifikate uä. Die Logos kannst du dabei direkt auswählen und mit der Maus in die richtige Reihenfolge ziehen.
Die Layout-Einstellungen für den Logoraster sind:
- Spaltenanzahl (Bilderanzahl innerhalb einer Bilderzeile)
- Horizontaler Spaltenabstand zwischen den Bildern (der verikale Abstand des Logorasters wird beim Styling eingestellt)
- Erscheineffekt beim Scrollen (Slide, Einblenden, Vergrößern, Drehen usw.)
Das Styling der Logoplatzierung wird über den Button "Element stylen" definiert. Die Logos werden zur Verfügung gestellt. Wenn du eigene Logos verwenden möchtest, lege am besten eine eigene Bildergalerie an, die du individuell gestalten kannst (siehe Bildergalerie Element).
Einbindungen
Die folgenden Elemente binden Inhalte ein, die aus anderen Quellen gespeist werden.
Websiteneinbindung (iFrame) Element
Die iFrame-Einbindung dient dazu externe Inhalte in der Seite anzuzeigen. Dabei musst du nur die URL (Website-Adresse) der gewünschten Website angeben. Der Seiten-Inhalt, der auf dieser Adresse zu sehen ist, wird dann im Element eingebunden, bzw. angezeigt.
In den Layout-Einstellungen legst du fest, wie hoch das Element sein soll. Dies bestimmt den Ausschnitt, der dann auf deiner Seite angezeigt wird. Du musst also darauf achten, dass der angezeigte Inhalt für dein iFrame-Element geeignet ist. Wenn der Inhalt, der in das iFrame eingebunden ist, zu hoch oder zu breit ist, entsehen Scrollbalken. Wenn dein Element zu hoch oder zu breit angelegt ist, können ungewünschte Leerräume entstehen.
Datenschutz-Hinweis:
Achtung: Das iFrame zeigt jeden Inhalt, den du verlinkst, ungeprüft durch und hat auch keinen Zugriff auf diese Inhalte. Das bedeutet, dass Funktionen, die den Datenschutz betreffen, nicht automatisch in der Cookiebox landen. Falls also in deinem iFrame-Inhalt spezielle Datenschutz-Abfragen passieren, muss die Berechtigung dafür in diesem Inhalt gesondert eingerichtet werden!
Einbindung Element
Mit Einbindungen kannst du Custom HTML Code einfügen oder Cookie-Anbindungen verwalten. Cookies speichern Einstellungen und Präferenzen deiner Kunden, wie z.B. Warenkörbe oder Login-Informationen. Sie helfen dir, das Kundenverhalten zu analysieren, Marketing zu optimieren und den Bestellprozess zu vereinfachen.
Durch das Anlegen des Einbindung-Elements, kannst du festlegen, an welcher Stelle der Seite die Einbindung angezeigt werden soll. Es gibt für dieses Element keine Layout-Einstellungen, Details zu den Einbindungen erfährst du hier:
Rechtstext Element
Mit Einbindungen kannst du Custom HTML Code einfügen oder Cookie-Anbindungen verwalten. Cookies speichern Einstellungen und Präferenzen deiner Kunden, wie z.B. Warenkörbe oder Login-Informationen. Sie helfen dir, das Kundenverhalten zu analysieren, Marketing zu optimieren und den Bestellprozess zu vereinfachen.
Durch das Anlegen des Elements, kannst du festlegen, an welcher Stelle der Seite die Einbindung angezeigt werden soll. Es gibt für dieses Element keine Layout-Einstellungen, Details zu den Einbindungen erfährst du hier:
Akkordeon & Karussell
Eine Besonderheit unter den Elementen stellen Akkordeon und Karussell dar, da diese durch die Zusammenfassung von bestehenden Elementen innerhalb einer Spalte entstehen.
Elemente als Akkordeon oder Karussell zusammenfassen
Um ein Akkordeon (vertikal ausklappbare Inhalte) oder ein Karussell (horizontal blätterbare Inhalte) zu erstellen, müssen mindestens zwei Elemente in einer Spalte eingefügt sein. Dazu musst du in der Spalte beim Element links oben auf das Symbol mit den drei Kästchen klicken, auf "Spalte bearbeiten" klicken und beim Typ Akkordeon" oder "Karussell" auswählen.
Wählst du Akkordeon, dann werden alle Elemente, die du in dieser Spalte hinzufügst, als aufklappbares Akkordeon angezeigt. Wählst du Karussell, dann werden alle Elemente, die du in dieser Spalte hinzufügst als horizontales Karussell von links nach rechts angezeigt, bzw. in einer Animation abgespielt.
Für die Elemente Akkordeon und Karussell kann man jeweils nur einen Basis-Stil festlegen und keine individuellen Stilüberschreibungen vornehmen. Die Stile, die die Elemente innerhalb der Spalte haben, werden in den jeweiligen Stilen der Elemente geregelt.
Akkordeon Element
Wenn du bei "Spalte bearbeiten" mindestens zwei Elemente eingefügt hast, kannst du diese zu einem Akkordeon zusammenfassen. Dabei werden alle Elemente, die du in dieser Spalte hinzufügst, in einem aufklappbaren Akkordeon eingefügt. Von den eingeklappten Elementen ist im Akkordeon dann jeweils nur die Überschrift des Elements sichtbar. Mit Klick auf diese Überschrift wird der Inhalt des gesamten Elements ausgeklappt angezeigt.
Das Akkordeon besitzt die Gestaltungselemente des Überschriften-Bereichs:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element.
Einstellungsmöglichkeiten zur Bearbeitung der Spalten:
- Spalten-Typ (normale Spalte, Akkordeon oder Karussell zum Bestimmen, wie die Elemente innerhalb einer Spalte dargestellt werden sollen)
- Index (eine Zahl eingeben zur Bestimmung, ob diese Spalte auf einer Ebene über oder unter anderen Spaltenebenen liegt – standardmäßig hat jede Ebene 1 eingestellt)
- Sichtbarkeit
- Spaltenbreite (Breitenverhältnis zu den anderen Spalten – standardmäßig haben alle Ebenen 1 eingestellt)
- Elemente innerhalb der Spalte verschieben, kopieren oder löschen
Zusätzlich sind folgende speziellen Einstellungen festlegbar:
- Verhalten (immer nur ein Eintrag geöffnet, mehrere Einträge öffenbar)
- Erster Eintrag geöffnet
Für das Akkordeon kann man jeweils nur einen Basis-Stil festlegen und keine individuellen Stilüberschreibungen vornehmen. Die Stile, die die Elemente innerhalb der Spalte haben, werden in den jeweiligen Stilen der Elemente geregelt.
Karussell Element
Wenn du bei "Spalte bearbeiten" mindestens zwei Elemente eingefügt hast, kannst du diese zu einem Karussell zusammenfassen. Dabei werden alle Elemente, die du in dieser Spalte hinzufügst, in einen nach links blätterbaren oder animierbaren Slider eingefügt. Alle Elemente im Karussell können dann von links nach rechts sliden, entweder automatisch animiert oder per Mausklick.
Das Karussell besitzt die Gestaltungselemente des Überschriften-Bereichs:
- Dachzeile (Textzeile über der Überschrift)
- Überschrift
- Untertitel (Textzeile unter der Überschrift)
Details dazu findest du beim Text-Element.
Einstellungsmöglichkeiten zur Bearbeitung der Spalten:
- Spalten-Typ (normale Spalte, Akkordeon oder Karussell zum Bestimmen, wie die Elemente innerhalb einer Spalte dargestellt werden sollen)
- Index (eine Zahl eingeben zur Bestimmung, ob diese Spalte auf einer Ebene über oder unter anderen Spaltenebenen liegt – standardmäßig hat jede Ebene 1 eingestellt)
- Sichtbarkeit
- Spaltenbreite (Breitenverhältnis zu den anderen Spalten – standardmäßig haben alle Ebenen 1 eingestellt)
- Elemente innerhalb der Spalte verschieben, kopieren oder löschen
Zusätzlich sind folgende speziellen Einstellungen festlegbar:
- Anzahl der Slider-Spalten (mehrere Slides gleichzeitig sichtbar)
- Slide Animation (Slide oder Überblenden)
- Easing-Effekt (Beschleunigung/Abbremsen der Animation)
- Slide-Anzeigedauer (Angabe in Millisekunde)
- Slide-Animationsdauer (Angabe in Millisekunde)
- Automatisch abspielen
- Pfeile (Links-Rechts-Schalter) einschalten
- Punkte (Slide-Anzeige am unteren Rand in der Mitte)
Das Karussell hat sehr ähnliche Eigenschaften wie das Slideshow-Element mit dem wichtigen Unterschied, dass die einzelnen Slides beim Element Karussell komplett verschieden aufgbaute Elemente sein können und auch in der Breite mehrere Slides gleichzeitig zu sehen sein können, während beim Element Slideshow alle Slides die gleiche Struktur haben und immer nur ein Slide nach dem anderen zu sehen ist.
Für das Karussell kann man jeweils nur einen Basis-Stil festlegen und keine individuellen Stilüberschreibungen vornehmen. Die Stile, die die Elemente innerhalb der Spalte haben, werden in den jeweiligen Stilen der Elemente geregelt.