Visueller Editor

Der visuelle Editor gestaltet Bildvorlagen auf einer Arbeitsfläche: Social-Media-Karten, Zitatbilder, Event-Storys, Namensschilder. Sie ordnen Ebenen an, verbinden ihren Text mit Feldern der Daten und gestalten sie; der Editor schreibt dabei HTML und CSS der Vorlage aus den Ebenen. Ein Render sieht die Arbeitsfläche nie, nur dieses HTML und CSS. Ein hier gestaltetes Bild rendert deshalb über dieselbe API, dieselben SDKs und Integrationen wie jede andere Vorlage.

Die Arbeitsfläche ist in der Beta. Sie steht in jedem Plan zur Verfügung.

Ein Design beginnen

Wählen Sie unter Vorlagen Neue Vorlage, stellen Sie Art auf Bild und lassen Sie Ein visuelles Design auf einer Arbeitsfläche gewählt. Wählen Sie eine Vorlage zum Beginnen:

Beginnen mit	Größe	Inhalt
Leer	eine Größenvorgabe Ihrer Wahl	eine leere weiße Arbeitsfläche
Artikelkarte	1200 × 630	Name der Website, ein Titel, der sich seiner Box anpasst, eine Linie und die Autorenzeile
Zitatkarte	1080 × 1080	ein Anführungszeichen, das Zitat, Autorin oder Autor und Rolle
Event-Story	1080 × 1920	Hinweis, Titel, Datum, Ort und ein QR-Code zur Event-Seite

Die Vorlagen bringen Beispieldaten mit, die Arbeitsfläche zeigt also von Anfang an echten Text. Code: HTML und CSS legt eine Bildvorlage an, die Sie wie bisher von Hand schreiben.

Auch eine Bildvorlage aus Code hat das Panel Design. Es bietet dieselben Vorlagen an; eine davon zu wählen ersetzt Body und CSS der Vorlage durch die des Designs. Nichts ändert sich, bevor Sie eine Version speichern, und Änderungen verwerfen holt den Code zurück.

Die Arbeitsfläche

Eine Design-Vorlage öffnet sich im Panel Design: in der Mitte die Arbeitsfläche, die Ebenen in einer Karte über ihrer rechten oberen Ecke, rechts der Inspektor für die Auswahl. Der Pfeil im Kopf der Karte klappt sie ein, wenn eine vergrößerte Arbeitsfläche den Platz braucht. Wie in einem Bildbearbeitungsprogramm messen Lineale am oberen und linken Rand der Ansicht das Bild in Pixeln, wohin Sie auch scrollen; sie markieren die Ausdehnung der Auswahl und folgen dem Mauszeiger. Unter 1100 px wandern die Ebenen in das Panel Design neben der Arbeitsfläche, mit dem Inspektor darunter.

Um	Tun Sie
eine Ebene zu wählen	Klick auf der Arbeitsfläche oder in der Liste; Umschalt fügt sie der Auswahl hinzu
mehrere zu wählen	einen Rahmen um sie ziehen, beginnend auf einer leeren Stelle
alles oder nichts zu wählen	Strg+A, Escape
zu verschieben	die Ebene ziehen, oder den runden Griff mit den Pfeilen unter ihr; die Pfeiltasten verschieben um 1 px, mit Umschalt um 10 px
die Größe zu ändern	an einem Griff ziehen; Umschalt behält die Proportionen, Alt ändert vom Mittelpunkt aus, Strg (⌘ auf dem Mac) ohne Einrasten
zu drehen	am runden Griff über der Ebene ziehen; Umschalt rastet in 15°-Schritten ein
in einen Text zu tippen	ihn wählen und lostippen, ihn noch einmal anklicken, doppelklicken oder Enter drücken; Enter übernimmt den Text, Escape bricht ab
fett, kursiv, unterstrichen	Strg+B, Strg+I, Strg+U schalten es für den ganzen Text jeder gewählten Text-Ebene um, auch während Sie in eine tippen
zu duplizieren, zu löschen	Strg+D, Entf oder Rücktaste
die Reihenfolge zu ändern	] und [ legen eine Ebene höher oder tiefer, mit Strg ganz nach oben oder unten
rückgängig zu machen, zu wiederholen	Strg+Z, Strg+Umschalt+Z oder Strg+Y
zu zoomen	Strg und Mausrad (um den Mauszeiger), die Zoom-Schaltflächen, Einpassen und 100 %
den Ausschnitt zu verschieben	Leertaste halten und ziehen, oder scrollen

Auf dem Mac funktioniert ⌘ überall, wo die Tabelle Strg nennt.

Beim Verschieben und beim Ändern der Größe rasten die Kanten und die Mitte einer Ebene an den Kanten und der Mitte der Arbeitsfläche, an den Kanten und Mitten der anderen Ebenen und an Ihren Hilfslinien ein; pinkfarbene Linien zeigen, wo. Mit gedrückter Alt-Taste beim Verschieben oder Strg (⌘) beim Ändern der Größe platzieren Sie frei. Eine gedrehte Ebene ändert ihre Größe ohne Einrasten.

Hilfslinien

Ziehen Sie aus dem oberen Lineal eine waagerechte Hilfslinie, aus dem linken eine senkrechte; eine Hilfslinie reicht über die ganze Ansicht. Eine Hilfslinie verschieben Sie durch Ziehen und entfernen sie, indem Sie sie von der Arbeitsfläche ziehen; beim Ziehen rastet sie an der Arbeitsfläche und den Ebenen ein und zeigt ihre Position. Ist nichts gewählt, listet der Inspektor die Hilfslinien mit ihren Positionen für genaue Werte auf und fügt neue in der Mitte der Arbeitsfläche hinzu. Hilfslinien gehören zum Design und erscheinen nie in einem Render.

Eine Bilddatei, die Sie auf die Arbeitsfläche ziehen, oder ein Bild, das Sie mit Strg+V einfügen (ein Screenshot, ein kopiertes Bild, Dateien aus dem Dateimanager), wird in die Dateibibliothek des Workspace hochgeladen und als Bild-Ebene gezeigt. Ein eingefügter Screenshot oder ein kopiertes Bild bekommt einen eigenen Namen (pasted-<Datum>-<Uhrzeit>.png) und ersetzt deshalb nie eine andere Datei. Eine Datei, die Sie aus dem Dateimanager ziehen oder einfügen, behält ihren Namen, und die Bibliothek ersetzt eine Datei gleichen Namens.

Ebenen

Die Leiste über der Liste fügt einen Text, ein Bild, ein Rechteck, eine Ellipse, eine Linie, einen QR-Code oder einen Barcode hinzu. Die Liste zeigt die oberste Ebene zuerst; ziehen Sie eine Zeile, um die Reihenfolge zu ändern. Das Auge blendet eine Ebene aus (eine ausgeblendete Ebene ist gar nicht in der Vorlage), das Schloss verhindert, dass sie auf der Arbeitsfläche gewählt oder verschoben wird. Ein Doppelklick auf den Namen oder F2 benennt sie um.

Text

Ein Text aus der Leiste öffnet sich auf der Arbeitsfläche sofort zum Tippen, sein Platzhalter ist markiert: Was Sie tippen, ersetzt ihn. Auch ein gewählter Text nimmt auf, was Sie tippen, hinter dem, was schon dasteht; ein Klick auf ihn setzt den Cursor an die angeklickte Stelle.

Das Textfeld im Inspektor enthält Text und Felder der Daten. Tippen Sie { oder nutzen Sie die Schaltfläche mit den geschweiften Klammern, um ein Feld einzufügen; es erscheint als Chip und wird als Wert des Felds gerendert. Ein Klick auf einen Chip formatiert ihn: Groß- oder Kleinbuchstaben, Wortanfänge groß, Geldbetrag, Zahl mit oder ohne Nachkommastellen, ein Datum in einem von drei Mustern, auf 40 Zeichen gekürzt oder ein Strich, wenn der Wert leer ist. Die vier Einträge am Ende des Menüs nehmen einen eigenen Wert: ein Datumsmuster (zum Beispiel EEEE, d. MMMM), die Zahl der Nachkommastellen, die Länge, auf die gekürzt wird, oder den Text, der erscheint, wenn das Feld leer ist.

Schrift, Schriftstärke (mit Namen, von Dünn bis Schwarz), Größe, Zeilenabstand, Laufweite, Farbe und Ausrichtung gelten für die ganze Ebene, ebenso fett, kursiv, unterstrichen, durchgestrichen und Großbuchstaben: Eine Ebene hat durchgehend einen Stil, ein Wort in anderer Schrift oder Farbe ist also eine eigene Ebene. Fett wechselt zwischen normal und fett; die Liste der Schriftstärken daneben stellt alles dazwischen ein. Die Schrift stammt aus Ihrer Marke (Überschriften- und Fließtextschrift), aus den eigenen Schriften Ihrer Organisation oder aus einer Liste von Google Fonts, die in der Vorschau und im Render gleich aussehen. Eigene Schriften hochladen unter der Liste fügt Ihrer Organisation Schriftdateien (woff2, woff, ttf, otf) hinzu, ohne den Editor zu verlassen; es sind die Schriften der Seite Schriften, die in den bezahlten Plänen enthalten sind.

Während Sie auf der Arbeitsfläche in einen Text tippen, bleibt der runde Griff mit den Pfeilen unter seiner Box: So lässt sich die Ebene verschieben, ohne den Text zu verlassen.

Langer Text bestimmt, was geschieht, wenn die Daten länger sind als die Box:

• Abschneiden behält die Größe und schneidet ab, was nicht passt; die Liste Probleme nennt die Ebene und den Datensatz, mit dem sie nicht passt.
• Verkleinern macht den Text so groß, wie er passt, zwischen seiner Größe und Kleinste Größe. Das braucht ein Titel wechselnder Länge. Es funktioniert auch in Code-Vorlagen: siehe Text an seine Box anpassen.
• Box wächst mit lässt die Box mit ihrem Text nach unten wachsen.

Höchstens Zeilen schneidet den Text nach so vielen Zeilen mit Auslassungspunkten ab.

Die Arbeitsfläche misst den Datensatz, den sie zeigt. Jeden Datensatz prüfen (die Listen-Schaltfläche über der Arbeitsfläche oder die Befehlspalette) rendert jeden Datensatz der Vorlage im Hintergrund und nennt unter Probleme jede Ebene, deren Text mit einem davon nicht in ihre Box passt: die Frage, die jedes Bild mit einem wechselnden Titel stellt. Dafür braucht die Vorlage mindestens zwei Datensätze; legen Sie sie im Panel Daten an. Das Ergebnis gilt, bis sich Design, Daten oder Einstellungen ändern.

Bilder, Formen und Codes

Eine Bild-Ebene aus der Leiste ist zunächst leer und sagt das auf der Arbeitsfläche: Wählen Sie im Inspektor unter Datei ein Bild, nutzen Sie dort Bild hochladen, ziehen oder fügen Sie ein Bild auf die Ebene ein, oder wählen Sie eine andere Quelle. Bis dahin wird sie als leere Box gerendert, und die Liste Probleme nennt sie. Ein Bild kommt aus der Dateibibliothek, von einer Webadresse, aus einem Feld der Daten (eine URL in den Daten, pro Render ein anderes Bild) oder ist das Markenlogo. Datei öffnet die Bilder der Dateibibliothek des Workspace, die neuesten zuerst, mit einer Suche nach dem Namen; Bild hochladen in der Liste fügt eine Datei hinzu und zeigt sie sofort auf der Ebene. Die PDFs der Bibliothek stehen nicht in der Liste: Eine Bild-Ebene nimmt nur Bilder an. Füllen und zuschneiden bedeckt die Box, Ganz zeigen passt das ganze Bild hinein, Strecken verzerrt es auf die Box.

Rechtecke, Ellipsen und Linien haben eine Füllung; Rechtecke und Bilder haben außerdem einen Eckenradius. Ein QR-Code oder Barcode enthält festen Text oder ein Feld der Daten (Enthält); er wird mit denselben Helfern gezeichnet wie in Code-Vorlagen. Ein QR-Code hat eine Stufe der Fehlerkorrektur (L 7 %, M 15 %, Q 25 %, H 30 %, der Anteil des Codes, der beschädigt sein darf und trotzdem gelesen wird), eine Code-Farbe und einen Hintergrund. Ein Barcode hat einen Typ (Code 128, EAN-13, EAN-8, UPC-A, ITF-14 oder Code 39) und Ziffern anzeigen für den Text unter den Balken.

Was jede Ebene hat

Der Inspektor zeigt für jede Ebene Breite, Höhe, Drehung (°) und Deckkraft (%) sowie die Schaltflächen, um sie nach vorn oder hinten zu legen, zu duplizieren und zu löschen. Sind mehrere Ebenen gewählt, richtet Ausrichten ihre Kanten oder Mitten aus, und Gleiche Abstände waagerecht und Gleiche Abstände senkrecht verteilen sie gleichmäßig.

Schatten, Farben und Bedingungen

Schatten legt einen Schatten hinter die Buchstaben eines Texts und hinter die Box jeder anderen Ebene: wie weit nach rechts und nach unten, wie unscharf, in welcher Farbe und mit welcher Deckkraft.

Farbfelder bieten zuerst Ihre Markenfarben an. Eine Markenfarbe bleibt mit der Marke verbunden: Ändern Sie die Farbe dort, folgt jedes Design, das sie nutzt. Darunter steht der Farbwähler für jede andere Farbe: Wählen Sie in der Farbfläche, stellen Sie Farbton und Transparenz mit den beiden Reglern ein, geben Sie einen Hex-Wert ein oder nehmen Sie mit der Pipette eine Farbe von irgendwo auf Ihrem Bildschirm auf, was Chrome und Edge anbieten. Die zehn zuletzt verwendeten Farben bleiben in Ihrem Browser gespeichert und werden wieder angeboten.

Anzeigen, wenn zeigt eine Ebene nur, wenn ein Feld der Daten einen Wert hat: eine Autorenzeile, die ohne Autor verschwindet, ein Hinweis nur für Angebote.

Die Einstellungen der Arbeitsfläche

Ist nichts gewählt, zeigt der Inspektor die Arbeitsfläche: eine Größenvorgabe oder eigene Breite und Höhe, die Hintergrundfarbe, das Ausgabeformat und einen transparenten Hintergrund für PNG und WebP. Dieselben Werte stehen im Panel Seiteneinrichtung.

Code und Design

Das Design wird mit jeder Version gespeichert, neben dem HTML und CSS, das es geschrieben hat. Solange beide übereinstimmen, gehört der Code dem Design: Die Tabs Vorlage und CSS sind schreibgeschützt, ein Hinweis sagt es. Head bleibt bearbeitbar, für einen zusätzlichen Schrift-Link oder ein Skript.

• Lösen macht die Vorlage zu einer Code-Vorlage: Die nächste Version wird ohne Design gespeichert, und die Tabs sind wieder bearbeitbar. Ältere Versionen behalten ihr Design; eine davon wiederherzustellen bringt es zurück.
• Wurde der Code woanders geändert, etwa mit formfeed templates push nach einer Änderung von Hand an template.html, passt das Design nicht mehr zu ihm. Die Arbeitsfläche zeigt dann den Code, wie er ist, schreibgeschützt, und bietet Vergleichen (was das Design schreiben würde neben dem jetzigen Code), Design erneut anwenden (das Design schreibt den Code neu und ersetzt die Änderungen) und Code behalten (die Vorlage wird zur Code-Vorlage).

Ein Design sind reine Bearbeitungsdaten: Renders beachten es nicht und damit auch kein design in den Einstellungen einer Render-Anfrage.

Über die API und die CLI

Das Design ist settings.design einer Version (Einstellungen): ein JSON-Objekt mit den Ebenen von unten nach oben, dem Hintergrund der Arbeitsfläche, den Hilfslinien und einem Hash des Codes, den es zuletzt geschrieben hat. Behandeln Sie es als Daten des Editors, nicht als Format zum Schreiben von Hand. Geben Sie es unverändert zurück, wenn Sie über die API eine Version anlegen, oder lassen Sie es weg, um die Version zur Code-Vorlage zu machen.

Die API lehnt ein Design über 256 kB mit 400 invalid_request ab. Der Editor öffnet ein Design mit höchstens 200 Ebenen und 5.000 Zeichen Text pro Ebene; ein Design, das er nicht lesen kann, bleibt eine Code-Vorlage, und die Arbeitsfläche meldet Das Design lässt sich nicht öffnen und bietet an, es zu entfernen, was am Code nichts ändert.

formfeed templates pull schreibt es in design.json im Vorlagenordner (Projektstruktur), und push sendet es mit der Version zurück. formfeed validate warnt, wenn template.html oder style.css nicht mehr zu design.json passen.

Vorschau und Render

Die Arbeitsfläche zeigt die Vorlage, gerendert in Ihrem Browser mit dem Datensatz, der gerade gewählt ist. Echtes Rendering rendert sie über dieselbe Pipeline wie die API. Für Text, der sich seiner Box anpasst, wählen Chrome und Edge dieselbe Größe wie der Render und Firefox praktisch dieselbe; Safaris Arbeitsfläche kann einen solchen Titel bis zu etwa 5 % kleiner zeigen. Echtes Rendering zeigt immer das exakte Ergebnis.

Code-Vorlagen: Text in der Vorschau bearbeiten

Vorlagen aus Code, auch PDF-Vorlagen, haben keine Arbeitsfläche, ihren Wortlaut können Sie aber trotzdem ändern, ohne den Code zu lesen: Schalten Sie über der Fluss- oder der Seitenvorschau Text bearbeiten ein und klicken Sie auf einen Text. Die Änderung landet als eine Bearbeitung im Quelltext der Vorlage, die Strg+Z rückgängig macht; Werte aus den Daten bleiben, wie sie sind, und eine getippte {, die Vorlagensyntax beginnen könnte, wird als { geschrieben, sodass getippter Text nie zu Code wird. Das funktioniert nur in der Fluss- und der Seitenvorschau des Editors, nie im echten Rendering, in einer gespeicherten Version oder einem API-Rendering. Die Tour durch den Editor beschreibt es vollständig.