Visual Editor: Website direkt auf der Seite ändern

#Öffnen

Der Tab Visual Editor steht in einem Workspace mit kostenpflichtigem Plan neben Studio; im Free-Plan wird der Tab nicht angezeigt. Der Editor füllt das Fenster, und der Pfeil oben links führt zurück zum Projekt. Oben finden Sie:

#Auswählen, was geändert wird

• Klicken Sie auf etwas auf der Seite oder suchen Sie es unter Layers. Öffnen Sie den Pfeil einer Zeile, um zu sehen, was darin liegt; wenn Sie auf der Seite auswählen, öffnet sich der Weg dorthin.
• Der Pfad oben im Panel nennt, worin das Element liegt. Klicken Sie auf einen Schritt, um stattdessen diesen zu wählen, oder drücken Sie Escape.
• Mit Umschalt-Klick wählen Sie mehrere aus. Eine Änderung am Aussehen gilt für alle.
• Wiederholt sich dasselbe Element, etwa die Karten einer Liste, leuchten alle auf, und eine Änderung am Aussehen ändert alle. Die Texte jeder Karte gehören ihr allein.
• Klicken Sie mit der rechten Maustaste auf ein beliebiges Element oder drücken Sie Shift+F10, um sein Menü zu öffnen.

Das Rechtsklickmenü

Ein Eintrag, der nicht anwendbar ist, bleibt abgeblendet und nennt den Grund. Während Sie tippen, bietet eine kleine Leiste Bold, Italic, Link und Line break an.

#Wörter und Links

Wörter, die in den Angaben Ihrer Website gespeichert sind, etwa die E-Mail-Adresse oder der Name, ändern sich überall, wo sie erscheinen, und das Panel nennt, an wie vielen Stellen das ist. Der Editor warnt vor einem Gedankenstrich als Satzzeichen und bietet ein Komma an, und vor einer Schaltfläche, deren Text auf zwei Zeilen umbricht. Quick edit im Panel listet alle Wörter und Bilder eines Abschnitts in einem einzigen Formular auf.

#Das Aussehen

Der Bereich hat fünf Tabs: Element, Motion, Quick edit, Site und Check. Unter Element enthält Look die Punkte Layout, Space inside und Space outside, Text, Fill, Stroke und Effects. Ein Wert, der für die gerade angezeigte Breite gesetzt ist, erscheint in voller Farbe; ein Wert, der von einer kleineren Breite übernommen wurde, erscheint grau, und beim Daraufzeigen auf ein Feld wird dessen Löschen-Schaltfläche sichtbar.

Farben sind die eigenen Rollen Ihrer Website, nie eine Farbe für sich, sodass die Website einheitlich bleibt. Klassen, die das Bedienfeld nicht setzt, bleiben unverändert und stehen unter Kept as written.

Der Tab Site legt fest, wonach sich jeder Abschnitt richtet: Colours, Type für Überschriften und Text, Text styles, Buttons, Boxes und unter Page Modus, Ecken, Breite und Rhythmus. Das × neben einer Einstellung setzt sie auf das eigene Design Ihrer Website zurück.

#Hinzufügen und anordnen

• Add bietet Section, Text, Heading, Button, Picture, Video, Icon, Divider, Form und Embed. Klicken Sie eines an, um es an der gewählten Stelle einzufügen, oder ziehen Sie es dorthin, wo es landen soll.
• Ein Embed zeigt eine Seite von einer anderen Website. Karten und Player von Google, YouTube, Vimeo, Spotify, SoundCloud und Calendly funktionieren auf jeder Website; jede andere Website muss zuerst unter Settings, Preferences, Allowed websites hinzugefügt werden.
• + Add section zwischen zwei Abschnitten bietet Designed (kostenlos, die Abschnitte, mit denen Briks baut, in den Farben Ihrer Website), Blank (kostenlos) oder Generate with AI, etwa 5 Credits: Ihre Worte gehen als Änderung an den Builder.
• Picture im Tab Element ersetzt es mit Replace from your media, legt den Alt text fest (oder markiert es als Decorative, nothing to read aloud), schneidet es zu und bestimmt den Punkt, der bei jeder Breite sichtbar bleibt. Section background… legt eine Farbe, einen Verlauf, ein Bild oder ein Video hinter einem Abschnitt fest.
• Bildtausche kommen in den Entwurf und gehen zusammen mit Ihren anderen Änderungen live.
• In Layers verschiebt die Zeile eines Abschnitts auf der Startseite ihn nach oben oder unten, kopiert ihn oder blendet ihn aus. Ausgeblendete Abschnitte stehen unter Hidden from this page, um sie wieder einzublenden. Auf anderen Seiten verschiebt die Zeile eines Abschnitts ihn oder nimmt ihn von der Seite. Rename gibt einer Ebene einen eigenen Namen, der nur für den Editor gilt und nie veröffentlicht wird.

#Seiten

Pages listet die Seiten der Website auf. Add page legt eine Blank page oder eine Copy of a page an, mit Title und Address. Das Menü jeder Seite enthält Search and share (mit Search title, Search description, Hide from search engines und Share picture), Rename, Duplicate, Move up, Move down, Hide from menu und Delete. Beim Löschen einer Seite werden Sie gefragt, wohin Links auf sie stattdessen führen sollen. Änderungen an Seiten warten wie alle anderen im Entwurf.

#Gemeinsam daran arbeiten

• Ein gemeinsamer Entwurf. Ihre Änderungen werden kurz nach jeder Änderung im Entwurf des Projekts gespeichert, sodass sie ein Neuladen, einen geschlossenen Tab oder ein anderes Gerät überstehen, und alle, die den Editor öffnen, sehen sie. Die Leiste zeigt Draft saved · not live yet, mit Zeitpunkt und Person. Hat jemand anderes den Entwurf geändert, seit Sie ihn geöffnet haben, bittet Sie eine Leiste, vor dem Weitermachen auf Reload zu klicken.
• Wer sonst noch hier ist. Die Gesichter anderer, die den Editor geöffnet haben, erscheinen in der Leiste. Fahren Sie mit der Maus über eines, um die Seite und das Element zu sehen, bei dem die Person ist; das gewählte Element ist in ihrer Farbe umrandet. Nichts wird gesperrt.
• Kommentare. Wählen Sie ein Element und drücken Sie C, oder klicken Sie mit der rechten Maustaste und wählen Sie Comment. Tippen Sie @, um jemanden zu nennen. Ein Kommentar umfasst bis zu 2.000 Zeichen, ist am Element angeheftet und bietet Reply, Resolve und Open again. Alle im Workspace können kommentieren, auch Viewer; nur Editor, Admin und Owner können Kommentare auflösen. Die Glocke benachrichtigt alle, und genannte Personen erfahren es auch in ihren Chats mit dem Briks-Bot.

Viewer können den Editor öffnen, um die Website durchzusehen und zu kommentieren. Die Seite sagt: “You can look through this site here. Your role in this workspace can't change it.”

#Ask AI und der Builder

Für etwas, das das Panel nicht kann, etwa ein neues Element oder ein anderes Layout, sendet Ask AI im Rechtsklickmenü oder Ask the builder am Ende des Tabs Element Ihre Worte als normale Änderung, die Credits verbraucht, an den Builder, bezogen auf das gewählte Element:

• New design for this section und Fix the layout zeigen vor dem Senden, was die Arbeit üblicherweise kostet, im Vergleich zu Ihrem Guthaben, zum Beispiel Design it for about 5 credits. Die Änderung wird gebaut und veröffentlicht wie bei einer Nachricht im Studio, und mit Versions machen Sie sie rückgängig.
• Ask about this… beantwortet kostenlos eine Frage zum Element hier, ohne etwas zu bauen.
• Veröffentlichen oder verwerfen Sie zuerst den Entwurf: Der Builder arbeitet mit der veröffentlichten Website, deshalb bittet der Editor Sie darum, bevor er sendet.
• Write alt text in Picture ist kostenlos, wenn bereits eine Beschreibung des Bildes gespeichert ist, sonst kostet es bis zu 0.10 Credits. Use this übernimmt sie.

Der Tab Check prüft die Seite in der Breite, in der Sie gerade arbeiten, auf Bilder ohne Alt-Text, schwer lesbare Wörter, Überschriften in falscher Reihenfolge, Lesereihenfolge sowie Links und Schaltflächen ohne Namen. Das Prüfen ist kostenlos; eine Korrektur mit Uses credits geht an den Builder.

#Veröffentlichen oder es sich anders überlegen

• Nichts geht live, bis Sie veröffentlichen. Ein Entwurf fasst bis zu 300 Änderungen.
• Publish schreibt die Änderungen in den Code Ihrer Website und veröffentlicht sie als neue Version, meist in etwa einer halben Minute und ohne Credits zu verbrauchen. Mit dem Veröffentlichen wird der Entwurf geleert.
• Kann eine Änderung nicht vorgenommen werden, wird nichts veröffentlicht, und der Editor sagt, welche und warum.
• Drop this change in Changes entfernt eine. Discard draft im Menü ⋯ verwirft alle, für alle, die die Website bearbeiten, und fragt vorher nach.
• History listet die Versionen der Website auf. Preview zeigt eine Version so, wie sie veröffentlicht war, und Restore stellt sie wieder live; Ihr Entwurf bleibt erhalten. Siehe Versionen, Rückgängig und Wiederholen.

#Tastenkürzel