Editor
Mit dem Smarda-Editor gestaltest du deine Website oder deinen Shop direkt in der Vorschau. Du baust deine Inhalte aus Elementen auf, gestaltest sie individuell oder über Presets und siehst jede Änderung sofort so, wie sie später auch online aussieht. Neben deinen Seiten passt du hier auch Grundfunktionen an, zum Beispiel Produktseite, Warenkorb oder Login.
Und wenn du mal nicht selbst Hand anlegen willst, hilft dir dein KI-Assistent Smarda weiter. Er steht dir zur Seite und übernimmt auf Wunsch ganze Sektionen oder passt einzelne Elemente an.
Im Folgenden erfährst du, wie der Editor aufgebaut ist und wie du mit ihm arbeitest.
Grundlagen des Editors
Der Editor beinhaltet sechs wichtige Sektionen:
In der Mitte siehst du deine Seite. Hier wählst du Elemente aus, bearbeitest Texte direkt und verschiebst Elemente per Drag & Drop.
Sie enthält alle Elemente, die du deiner Seite hinzufügen kannst. Du kannst sie links oder rechts andocken oder frei über der Vorschau platzieren. Über die Elementleiste kannst du auch auf den Vorlagenkatalog zugreifen.
Hier findest du den KI-Chat, die Struktur deiner Seite und die Seiteneinstellungen. Darunter liegen die Bereiche für dein Design, die für die ganze Website gelten: Farben, Schriften, Variablen, Icons, Presets, Funktionen und Standards.
In diesem Feld kannst du Smarda verschiedene Dinge erledigen lassen. Schreib dazu einfach, was du gebaut oder geändert haben willst und Smarda macht sich an die Arbeit.
Hier wählst du die Bildschirmgrößen (Desktop, Tablet oder Smartphone) für die Vorschau, machst Schritte rückgängig oder stellst sie wieder her und blendest die Hilfslinien ein. Bei mehrsprachigen Shops gelangst du hier zum Übersetzungsmodus.
Unten findest du den Speichern-Button. Er ist nur aktiv, wenn es ungespeicherte Änderungen gibt. Links daneben kannst du deine Seite in einem neuen Tab außerhalb des Editors ansehen. Dafür darf deine Seite keine ungespeicherten Änderungen enthalten.
Seiteneinstellungen
In den Seiteneinstellungen werden die allgemeinen Informationen der aktuellen Seite definiert wie Titel, Slug oder Datum.
Hier kannst du zudem den Status deiner Seite einstellen:
- Öffentlich: Die Seite ist öffentlich zugänglich und wird von Suchmaschinen erfasst.
- Von Suchmaschinen ausgeschlossen: Die Seite ist öffentlich zugänglich, wird aber nicht von Suchmaschinen erfasst.
- Nicht öffentlich: Die Seite ist nicht öffentlich zugänglich und wird nicht von Suchmaschinen erfasst.
In der Suchmaschinenoptimierung kannst du für verbesserte SEO den Meta-Titel und die Meta-Beschreibung zusätzlich anpassen.
Zusätzliche Einstellungen findest du unter Erweitert:
- Schlagwörter: Trage hier Begriffe ein, unter welchen deine Seite in der Suche gefunden werden soll.
- Sichtbar ab - Sichtbar bis: Stelle bei Bedarf ein Datum ein, das die Sichtbarkeit deiner Seite bestimmt.
- Seitentyp: Wenn du verschiedene Seitentypen erstellt hast, kannst du hier die Zugehörigkeit der Seite ändern.
- Referenz-Tags: Trage hier Tags ein, um die Seite extern zu referenzieren.
Um deine Seite für Seitengalerien zu optimieren, kannst du hier Bild und Teasertext hinzufügen. Diese werden dann im Seitengalerie-Element anzeigt.
Struktur und Elemente
Deine Seite wird mit Elementen aufgebaut. Jedes Element ist ein Baustein mit einer bestimmten Aufgabe, zum Beispiel ein Text, ein Bild, ein Button oder ein Formular. Manche Elemente wie Boxen oder Spalten können weitere Elemente enthalten.
In der Struktur findest du den vollständigen Aufbau deiner Seite. Hier siehst du auf einen Blick, wie die einzelnen Elemente verschachtelt und miteinander verbunden sind. Außerdem kannst du die Struktur zur Navigation nutzen, um schnell zu Elementen zu gelangen, die im visuellen Editor schwer erreichbar sind.
Elemente lassen sich hier ganz einfach an die gewünschte Position verschieben oder gezielt an einer bestimmten Stelle hinzufügen. Klicke dazu auf Icon: Add und wähle die gewünschte Position aus. Du kannst ebenfalls Elemente aus der Seiteleiste hier an die passende Stelle per Drag & Drop ablegen.
Über das Bearbeiten-Icon gelangst du zu den Einstellungen für Styling, Layout und Animation des jeweiligen Elements. Über die weiteren Aktionen kannst du Elemente kopieren, löschen oder konfigurieren. Außerdem kannst du ein Element als Quellcode oder Vorlage speichern.
Elemente einfügen
Zieh ein Element aus der Seitenleiste einfach an die gewünschte Stelle in der Vorschau oder in die Struktur im linken Panel.
Mit Icon: Ellipsis-vertical an der Bearbeitungsleiste oder in der Struktur kannst du Elemente kopieren. Kopierte Elemente erscheinen dann ganz oben in der Elementleiste und können wie normale Elemente verwendet werden.
Elemente bearbeiten
Klicke auf ein Element, um es auszuwählen. Texte kannst du direkt mit einem Klick in den Text bearbeiten. Mit Strg- bzw. Cmd-Klick oder Shift-Klick wählst du mehrere Elemente gleichzeitig aus.
Über dem ausgewählten Element erscheint die Bearbeitungsleiste. Sie zeigt immer die passenden Werkzeuge für das jeweilige Element, zum Beispiel Textformatierungen, Tabellenzeilen oder die Ausrichtung von Spalten. Mit den Pfeilen springst du zum übergeordneten oder untergeordneten Element.
Im rechten Teil der Bearbeitungsleiste wählst du das Preset für das Element oder öffnest den Design-Editor. Unter Icon: Ellipsis-vertical findest du weitere Funktionen wie Kopieren, Löschen und mehr.
Mit KI bearbeiten
Mit dem KI-Fokus kannst du ein spezifisches Element auswählen, auf das sich Smarda konzentieren soll, und Anweisungen geben, die dieses Element betreffen. Smarda ändert dann nur das ausgewählte Element.
Elemente ausblenden
Möchtest du ein Element ausblenden ohne es komplett zu löschen, kannst du das über das Menü in der Bearbeitungsleiste mit Element ausblenden.
Um ausgeblendete Elemente wieder anzuzeigen, gehe in die obere Leiste zu dem Icon: Eye-visible-Symbol. Klickst du hier drauf, kannst du entscheiden, ob du ausgeblendete Inhalte anzeigen möchtest. Zusätzlich kannst du wählen, ob Variablen mit ihren Werten aufgelöst oder im Originaltext dargestellt werden.
Design-Grundlagen
Über Editor öffnen in der Bearbeitungsleiste oder Struktur öffnest du den Design-Editor des Elements. Er besteht aus drei Bereichen:
- Styling: Bestimmt, wie ein Element aussieht, zum Beispiel Text, Hintergrund, Rahmen und Innenabstand. Styling, das du öfter verwenden willst, kannst du als Preset speichern.
- Layout: Bestimmt die Position, Anordnung, Größe und die Abstände des Elements auf der Seite. Das Layout gilt immer nur für das jeweilige Element und kann nicht als Preset gespeichert werden.
- Animation: Hier fügst du Animationen hinzu, die abhängig von der Zeit oder vom Scrollen ablaufen.
Über Icon: Add kannst du Eigenschaften hinzufügen. Änderungen werden sofort in der Vorschau sichtbar.
Was sind Presets?
Ein Preset ist ein gespeichertes Styling, das du auf beliebig viele Elemente anwenden kannst. Änderst du ein Preset, ändern sich alle Elemente mit, die es verwenden.
Styling: Preset
- Preset wählen
Oben im Styling wählst du, ob das Element ein Preset verwendet oder individuell gestaltet wird. Zum Auswählen eines Presets, klicke einfach dort hin, um eine Liste deiner verfügbaren Presets zu öffnen. Beim Drüberfahren mit der Maus erhälst du eine Vorschau, wie dein Element mit diesem Preset aussieht. - Preset bearbeiten oder duplizieren
Mit Icon: Pencil kannst du das Preset bearbeiten. Die Änderungen dann gelten überall, wo das Preset verwendet wird.
Du kannst ein Preset auch duplizieren. Mit Icon: Clone erstellst du eine Kopie des Presets und weist sie diesem Element zu. So kannst du eine Variante gestalten, ohne das Original zu verändern. - Preset-Eigenschaften
Hier siehst du die einzelnen Eigenschaften, die für dieses Preset eingestellt sind. - In individuellen Stil umwandeln
Übernimmt die Werte des Presets direkt in das Element. Danach kannst du das Element frei anpassen, es ist aber nicht mehr mit dem Preset verknüpft.
Über Icon: Close kannst du das gesamte Preset inklusive seiner Stylings von diesem Element löschen.
Styling: Individuell
Wählst du statt eines Presets individuelles Styling, gestaltest du das Element ganz für sich allein. Änderungen wirken sich nur auf dieses eine Element aus.
- Bildschirmgrößen und Zustände
Über die Überschreibungen kannst du einzelne Werte für bestimmte Bildschirmgrößen anpassen, zum Beispiel eine kleinere Schrift auf dem Smartphone. Ebenso legst du fest, wie das Element in bestimmten Situationen aussieht, etwa bei Mouseover oder im Fokus. - Eigenschaften bearbeiten
Hier bearbeitest du die einzelnen Eigenschaften im Detail. Trage einfach deinen gewünschten Wert ein und oder wähle eine Einstellung aus. Die Einheit von Werten kann rechts eingestellt werden. Dort findest du ebenfalls besondere CSS-Keywords, wenn welche verfügbar sind. - Als neues Preset speichern
Gefällt dir dein Styling und möchtest du es auch für andere Elemente verwenden, speichere es unten über „Als neues Preset speichern“. Vergib einen Titel, und das Element verwendet ab sofort das neue Preset. Du findest es danach in der Preset-Auswahl jedes passenden Elements.
Bildschirmgrößen und Zustände
Alle Werte in Styling, Layout und Animation gelten zunächst für alle Bildschirmgrößen und in jeder Situation. Über die Überschreibungen kannst du sie gezielt anpassen. Du findest sie in jedem der drei Bereiche.
Layout
- Anzeige wählen
Mit der Anzeige legst du fest, wie das Element und sein Inhalt angeordnet werden. Je nach Anzeige siehst du die passenden Einstellungen. - Bildschirmgröße und Zustände
Über die Überschreibungen kannst du einzelne Werte für bestimmte Bildschirmgrößen anpassen, zum Beispiel eine andere Breite oder kleinere Außenabstände auf dem Smartphone. Über Zustände legst du fest, wie sich das Layout in bestimmten Situationen verändern soll, etwa bei Mouseover oder im Fokus.
Tipp: Den Außenabstand kannst du auch direkt in der Vorschau ändern. Klicke dazu auf das Element und anschließend an den Rand, wo du den Abstand gerne ergänzen möchtest.
Anzeige-Einstellungen bestimmen über das Verhalten des Element und seiner Kind-Element. Über sie entscheidest du, in welche Richtung Kind-Elemente fließen, ob sie mit dem Text mitfließen und welche Layout-Eigenschaften auf das Element Auswirkung haben.
Die wichtigsten Anzeige-Einstellungen findest du hier im Überblick:
Block
Das Element nimmt die ganze Breite ein, die Inhalte stehen untereinander.
Inline
Das Element fließt wie ein Wort im Text mit und nimmt nur so viel Platz ein, wie sein Inhalt braucht. Breite, Höhe und Abstände nach oben und unten lassen sich dabei nicht einstellen. Mit Inline-Block steht das Element ebenfalls in der Textzeile, du kannst ihm aber eine eigene Größe und Abstände geben.
Flexbox
Die Inhalte werden in einer Reihe angeordnet, horizontal oder vertikal. Du bestimmst die Richtung, die Ausrichtung, den Zwischenraum und ob die Inhalte in eine neue Zeile umbrechen dürfen.
Raster
Die Inhalte werden in Spalten und Zeilen angeordnet. Über „Spalte hinzufügen“ und „Zeilenskalierung hinzufügen“ legst du das Raster an.
Ausgeblendet
Das Element wird nicht angezeigt. Das ist besonders praktisch in Kombination mit Bildschirmgrößen, zum Beispiel um ein Element nur auf dem Smartphone auszublenden.
Animation
Mit Animationen lässt du Elemente erscheinen, sich bewegen oder verändern. Animationen werden gespeichert und können bei beliebig vielen Elementen verwendet werden.
- Animation wählen und bearbeiten
Wähle eine bestehende Animation aus oder lege über ＋ Neue Animation eine neue an. Mit Icon: Pencil kannst du die Zeitleiste öffnen und deine Animation bearbeiten. - Bildschirmgrößen und Zustände
Über die Überschreibungen kannst du die Animation für bestimmte Bildschirmgrößen anpassen. Über Zustände legst du fest, wie sich die Animation in bestimmten Situationen verändern soll, etwa bei Mouseover oder im Fokus. - Modus auswählen
Bestimmt, wodurch die Animation abläuft. Bei Dauer läuft sie über eine festgelegte Zeit ab. Bei Scroll folgt sie dem Scrollen, die Animation bewegt sich also vor und zurück, während gescrollt wird.
In der Zeitleiste gestaltest du den Ablauf deiner Animation. Änderungen an einer Animation wirken sich überall aus, wo du sie verwendest.
- Eigenschaft hinzufügen
Über ＋ Eigenschaft wählst du aus, was sich während der Animation verändern soll, zum Beispiel Transparenz, Farbe, Größe oder Position. Jede Eigenschaft bekommt in der Zeitleiste eine eigene Spur. Eigenschaften, die bereits animiert werden, sind ausgegraut. Über das Papierkorb-Symbol entfernst du eine Eigenschaft wieder aus der Animation. - Ausgangswert und Returnwert
Links neben jeder Spur siehst du den Namen der Eigenschaft. Hat das Element für diese Eigenschaft im Styling bereits einen Wert, wird er darunter angezeigt:
Ausgangs- & Returnwert: Das Element hat diesen Wert vor der Animation und kehrt nach der Animation wieder zu ihm zurück.
Ausgangswert: Das Element hat diesen Wert vor der Animation, behält nach der Animation aber den Wert des letzten Keyframes. Das ist der Fall, wenn du beim Endzustand Letztes Bild halten oder Beides halten gewählt hast.
So siehst du auf einen Blick, von welchem Wert deine Animation ausgeht und wo sie endet. Ist kein Wert angegeben, gilt der Standardwert der Eigenschaft. - Keyframes
Keyframes sind die Punkte auf einer Spur, an denen die Eigenschaft einen bestimmten Wert hat. Zwischen zwei Keyframes wird der Wert fließend verändert. Mit einem Doppelklick auf die Spur setzt du einen neuen Keyframe. Klicke auf einen Keyframe, um seinen Wert festzulegen oder ihn zu löschen. Keyframes mit Wert werden hervorgehoben. Per Drag & Drop verschiebst du einen Keyframe zu einem anderen Zeitpunkt. - Zeitleiste und Playhead
Oben über den Spuren läuft die Zeitleiste mit den Sekunden deiner Animation. Klicke auf die Zeitleiste oder zieh den Playhead (die senkrechte Linie mit der Zeitanzeige) an eine beliebige Stelle. Die Vorschau zeigt das Element dann genau so, wie es zu diesem Zeitpunkt aussieht. So kannst du einzelne Momente deiner Animation in Ruhe prüfen. - Abspielen
Von Anfang abspielen: Spielt die Animation ab dem Start in der Vorschau ab.
Ab Playhead abspielen: Spielt die Animation ab der aktuellen Position des Playheads ab. Die Startposition bleibt markiert, und nach dem Stoppen springt der Playhead dorthin zurück.
Stopp: Hält die Wiedergabe an.
Mit der Leertaste startest und stoppst du die Wiedergabe ebenfalls.
Bildschirmgrößen
Über Bildschirmgröße teilst du die Bildschirmbreiten in Bereiche ein. Klicke dazu in der Leiste auf die Breite, an der getrennt werden soll, um einen Breakpoint zu setzen. Alternativ kannst du über Eigene Größe eine genaue Breite eingeben.
Für jeden Bereich kannst du eigene Werte festlegen. Wo kein eigener Wert gesetzt ist, gilt der Wert für Alle Größen. Teilst du einen Bereich, behalten beide Hälften die bisherigen Werte. Löschst du einen Breakpoint, gehen die Werte dieses Bereichs verloren.
Achte darauf, für welche Größe du gerade stylst: Die Größe der Vorschau ist nicht automatisch die Größe, die du bearbeitest. Stelle am besten oben die passende Bildschirmgröße ein, damit du deine Änderungen auch korrekt siehst.
Zustände
Über den Zustand gestaltest du, wie ein Element in bestimmten Situationen aussieht.
Einen Zustand kannst du für alle Größen oder nur für eine bestimmte Bildschirmgröße anlegen.
In der Vorschau simulieren
Über das Augen-Symbol siehst du eine Bildschirmgröße oder einen Zustand direkt in der Vorschau, ohne ihn selbst auslösen zu müssen
| Mouseover | Wenn die Maus über dem Element ist. |
| Fokus | Wenn das Element mit der Tastatur angesteuert oder angeklickt wurde, zum Beispiel ein Eingabefeld. Wichtig für die Barrierefreiheit. |
| Gedrückt | Während das Element angeklickt wird. |
| Deaktiviert | Wenn das Element nicht bedient werden kann. |
| Besuchter Link | Wenn der Link bereits aufgerufen wurde. |
| Erstes Element / Letztes Element | Wenn das Element das erste oder letzte in seinem Container ist. |
| Geöffnet / Geschlossen | Für aufklappbare Elemente wie das Akkordeon. |
| Seite gescrollt | Sobald die Seite gescrollt wurde. |
| Ins Bild gescrollt | Sobald das Element beim Scrollen sichtbar wird. |
| Dekoration | Fügt vor oder nach dem Inhalt eine zusätzliche, rein gestalterische Ebene ein, zum Beispiel für Linien oder Symbole. |
Interaktionsgruppe
Ist diese Option aktiv, gelten Mouseover, Fokus und Gedrückt auch für alle Kinder des Elements. So kann sich zum Beispiel beim Mouseover über eine Karte auch deren Bild und Text verändern.
Übersetzungen
Über Icon: Language Übersetzen in der oberen Leiste wählst du eine Sprache aus. Sprachen hinterlegst du in den Grundeinstellungen deines Shops oder deiner Website.
In der linken Seitenleiste hast du nun den Reiter Übersetzungen. Hier siehst du alle Texte der Seite und einen Hinweis darüber, welche noch nicht übersetzt sind.
Übersetzen kannst du hier oder direkt am Text in der Vorschau. Klicke einfach in den Text und überschreibe den Originaltext mit deiner Übersetzung.
Du verlässt den Übersetzungsmodus wieder in der oberen Leiste. Klicke auf Icon: Exit Übersetzung verlassen.
Zum Übersetzen von Seitentitel, Meta-Beschreibung und anderen Seiteneinstellungen, klicke einfach auf Seite in der linken Leiste während du dich im Übersetzungsmodus befindest.
Funktionen und Blöcke
Nicht alle Inhalte deiner Website gehören nur zu einer einzelnen Seite. Header und Footer sollen zum Beispiel überall gleich aussehen, und Produktseiten oder der Warenkorb folgen einem festen Aufbau. Dafür gibt es Blöcke und Funktionen: Mit Blöcken baust du Inhalte einmal auf und setzt sie an mehreren Stellen oder einmalig ein. Mit Funktionen gestaltest du die festen Bestandteile deines Shops oder deiner Website.
Blöcke
Ein Block ist ein Baustein, den du an bestimmten Stellen deiner Seiten oder Funktionen einfügen kannst. Er kann beliebige Elemente enthalten, zum Beispiel einen Header, einen Footer, einen Hinweis über dem Preis oder ein gezieltes Marketing-Banner im Produkt.
Blöcke fügst du über das blaue Icon: Add-Symbol ein, das an bestimmten Stellen innerhalb von Funktionen erscheint. Der Block wird dann an jener Stelle eingefügt.
Auf jeder beliebigen Seite wird dir außerdem der Icon: Add-Button ganz oben und unten angezeigt, um Header und Footer einzusetzen. Es ist somit auch möglich, auf einzelnen Seiten verschiedene Header- und Footer-Blöcke zu verwenden.
Klickt du auf Icon: Add, siehst du ein Dropdown mit drei Optionen:
Neuer Block
Erstellt einen neuen Block, der nur auf dieser Seite eingesetzt wird. Er kann später auch an anderen Stellen eingefügt werden.
Neuer globaler Block
Erstellt automatisch einen Block, der auf allen Seiten an dieser Stelle eingesetzt wird. Ist es ein Block im Produkt, wird er bei allen Produkten dort als Block eingesetzt. Er kann später individuell entfernt werden oder an anderen Stellen eingefügt werden.
Bestehenden Block verwenden
Fügt einen Block ein, den du bereits angelegt und als wiederverwendbar markiert hast. Blöcke, die nicht als wiederverwendbar markiert sind, können nicht eingesetzt werden.
Hast du einen Block hinzugefügt, wird dir bei Mouseover eine neue Bearbeitungsleiste angezeigt.
Über Icon: Pencil gelangst du zur Bearbeitung des Blocks. Mit Icon: Ellipsis-vertical öffnest du die weiteren Aktionen, je nachdem, um welchen Block es sich handelt:
Priorität festlegen
Stehen mehrere Blöcke im selben Bereich, bestimmt die Priorität die Reihenfolge. Je höher die Priorität, desto weiter oben steht der Block.
Als wiederverwendbar markieren
Gibt dem Block einen Namen, unter dem du ihn an anderen Stellen wieder einfügen kannst.
Verwendung
Zeigt dir, wo der Block überall steht, und lässt dich weitere Stellen hinzufügen.
Entfernen
Nimmt den Block aus dem Bereich. Der Block selbst bleibt erhalten und kann woanders weiterverwendet werden. Entfernst du einen globalen Block, verschwindet er auf allen Seiten.
Löschen
Löscht den Block endgültig. Er verschwindet überall, wo er verwendet wurde.
Verlasse die Bearbeitung des Blocks über Icon: Close Block schließen neben dem Speichern-Button, um zur Bearbeitung der Seite oder Funktion zurückzukehren.
Funktionen
Funktionen sind feste Bestandteile deines Shops oder deiner Website, zum Beispiel Produkt, Kategorie, Suche oder Cookie-Hinweis. Du findest sie in der linken Leiste unter Funktion, gruppiert nach Allgemein, Produkte & Katalog, Warenkorb & Kasse und Kundenkonto.
Aufbau und Inhalt einer Funktion sind fest vorgegeben, da sie automatisch mit den Daten deines Shops befüllt werden. Ihr Aussehen bestimmst du aber selbst.
Gestalten einer Funktion
Wähle die Funktion aus und klicke in der Vorschau auf ihre Elemente. Du kannst sie wie gewohnt über Presets oder individuell stylen. Deine Gestaltung gilt dann für alle Seiten dieser Funktion, also zum Beispiel für alle Produktseiten.
Vorschau
Bei Produkt, Kategorie, Hersteller und Tag wählst du aus, mit welchem Eintrag die Vorschau angezeigt wird. So siehst du, wie die Gestaltung mit echten Inhalten aussieht. Gibt es noch keinen Eintrag, lege zuerst einen an.
Eigene Inhalte ergänzen
An vielen Stellen einer Funktion kannst du über Bereiche zusätzliche Blöcke einfügen. Um einen Block für einen spezifischen Eintrag zu setzen, wähle diesen als Vorschau aus.
Weiteres
Über Icon: Ellipsis-horizontal Mehr unten in der linken Seitenleiste hast du schnellen Zugriff auf die Mediathek und Listenseiten wie Seiten, Formulare und vieles mehr, ohne den Editor verlassen zu müssen.
Den Editor verlässt du erst, wenn du einen Eintrag bearbeiten möchstest. Du wirst dann direkt zur Bearbeitung hingeleitet.
Die Nutzung der Mediathek ist vollständig im Editor möglich, inklusive Bildbearbeitung, Generierung mit KI oder Bildersuche von externen Anbietern.
