Seiten-Elemente
Seiten-Elemente im Layout richtig einsetzen und bearbeiten
Deine Seitenlayouts können sehr einfach oder komplex gestaltet sein. Das hängt ganz von deinen Inhalten und dem gewünschten Design ab. Smarda stellt dafür eine Reihe an Elementen zur Verfügung für die Ausgestaltung von Seiten.
Du kannst frei bestimmen, mit welchen Elementen dein Layout 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. Dennoch können die eingestellten Stile Einfluss auf das Layout der Elemente haben. Weiter führende Informationen findest du bei Styling.
Text Element
Das Text-Element besteht nur aus Text und einem 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!
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)
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 Smarda-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)
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 Smarda-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)
Die Layout-Einstellungen sind identisch mit den Banner Layout-Einstellungen (siehe oben). 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 Smarda-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)
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 Smarda-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)
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:
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.
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
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ü:
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)
Das Styling der Logoplatzierung wird über den Button "Element stylen" definiert. Die Logos werden Smarda 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).
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
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.
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 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: