---
title: "Visual Editor: Website direkt auf der Seite ändern | Briks"
url: https://briks.dev/de/docs/visual-editor
description: "Klicken Sie auf Ihrer Seite alles an und ändern Sie Texte, Links, Bilder, Look, Bereiche und Seiten. Im Team arbeiten, ohne Credits veröffentlichen."
last_updated: 2026-10-08
---

# Visual Editor: Website direkt auf der Seite ändern

Der Visual Editor öffnet die eigene Seite Ihrer Website neben einem Bereich, so wie ein Design-Tool arbeitet. Klicken Sie etwas an, um seine Texte, sein Ziel, sein Bild oder sein Aussehen für Smartphones, Tablets und Desktops zu ändern; fügen Sie Elemente, Abschnitte und Seiten hinzu, verschieben, kopieren oder verbergen Sie sie; und legen Sie die Farben und Schriften der ganzen Website fest. Ihre Änderungen warten in einem Entwurf, den Ihr Team teilt, und gehen mit der Veröffentlichung live, ohne Credits zu verbrauchen. Er gehört zu den kostenpflichtigen Plänen.

10 Minuten Lesezeit Am 8. Oktober 2026 mit dem Studio abgeglichen

## Öffnen

Wo

1. Projects
2. Your project
3. Visual Editor

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:

| In der Leiste | Was es tut |
| --- | --- |
| **Open layers** | Öffnet und schließt **Layers**, die Seite Abschnitt für Abschnitt. |
| **Pages** | Wählt die Seite zum Bearbeiten und fügt Seiten hinzu, benennt sie um, verschiebt und löscht sie. |
| **Add** | Fügt ein Element oder einen Abschnitt hinzu. Die Taste A tut dasselbe. |
| Pfeile für Rückgängig und Wiederholen | Gehen Sie in Ihren Änderungen zurück und vor. ⌘Z und ⇧⌘Z tun dasselbe. |
| **Changes** | Listet jede Änderung auf, die auf die Veröffentlichung wartet, jeweils mit **Drop this change**. |
| **Comments** | Kommentare, die an Elemente auf der Seite angeheftet sind. |
| **History** | Die Versionen der Website, um eine anzusehen oder wiederherzustellen. |
| **Publish** | Zeigt zum Beispiel **Publish 3 changes**. Schaltet den Entwurf live. |
| **Desktop**, **Tablet**, **Phone** | Die Breite, in der Sie die Seite sehen: 1440, 834 oder 390 Pixel. |
| **Use the page** | Lässt Klicks die Website erreichen, um ihr Menü oder ein Pop-up zu öffnen und darin zu wählen. Drücken Sie P, um zum Bearbeiten zurückzukehren. |
| Das ⋯-Menü | **Keyboard shortcuts** und **Discard draft**. |
| **Open the page** | Öffnet die Live-Seite in einem neuen Tab. |

Gut zu wissen

Eine Website, die vor dem Visual Editor veröffentlicht wurde, muss einmal neu veröffentlicht werden, bevor der Editor sie lesen kann. Wenn die Seite „This page has not answered the editor. Publish the site once, then open the editor again.“ anzeigt, veröffentlichen Sie einmal aus dem Studio und öffnen Sie den Editor erneut.

## 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ü

| Eintrag | Was es tut |
| --- | --- |
| **Edit text** | Tippen Sie direkt über die Texte auf der Seite. |
| **Rewrite with AI** | **Rewrite**, **Shorter**, **Longer**, **Friendlier tone**, **More formal tone** oder **Bolder tone**, jeweils bis zu 0.20 Credits. Sehen Sie sich die neuen Worte an, dann **Keep**, **Try again** oder **Discard**. |
| **Replace picture** oder **Replace video** | Wählen Sie ein anderes aus Ihrer Medienbibliothek. |
| **Alt text…**, **Link…**, **Style…** | Diesen Teil des Panels öffnen. |
| **Ask AI** | **New design for this section**, **Fix the layout** oder **Ask about this…**. Siehe Ask AI und der Builder. |
| **Move up**, **Move down**, **Move out of its container**, **Move into the next container** | Verschieben Sie es zwischen das, was daneben liegt, oder aus einer Box heraus oder in eine hinein. |
| **Select parent**, **Select section** | Wählen Sie, worin es steht, oder den gesamten Abschnitt. |
| **Lock** | Verhindert, dass es versehentlich auf der Seite ausgewählt wird. Derselbe Eintrag gibt es wieder frei. |
| **Duplicate**, **Copy style**, **Paste style** | Kopieren Sie es oder übertragen Sie sein Aussehen auf ein anderes Element. |
| **Show** | **Hide on phone**, **Hide on tablet** oder **Hide everywhere**. |
| **Section** | **Quick edit section…**, **Add section above…**, **Add section below…**, **Move section up**, **Move section down**, **Duplicate section** und **Section background…**. |
| **Comment**, **Check the page…** | Heften Sie einen Kommentar daran oder prüfen Sie die Seite auf Probleme. |
| **Delete** | Entfernt es. Bei einem ganzen Abschnitt steht dort **Remove from page**. |

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

1. Doppelklicken Sie auf die Wörter

   Wo: Page

   Tippen Sie direkt auf der Seite darüber. Enter übernimmt sie, Escape stellt sie wieder her. Oder tippen Sie sie im Panel unter **Content** ein.

2. Ändern, wohin es führt

   Wo: Link

   Ein Link oder eine Schaltfläche führt zu einer **Page** der Website, einer **Section**, einer **Web address**, einer **Email**, einer **Phone**-Nummer oder einer **File** und kann **Open in a new tab**.

3. Prüfen Sie es bei jeder Breite

   Wo: Bar

   Wechseln Sie zwischen **Desktop**, **Tablet** und **Phone**, um zu sehen, wie der Text umbricht.

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.

| Sie möchten | So geht's |
| --- | --- |
| Eine kleinere Überschrift nur auf Smartphones | Wechseln Sie zu **Phone** und wählen Sie dann unter **Text** eine kleinere **Size**. Tablets und Desktops behalten ihre. |
| Etwas, das auf Smartphones ausgeblendet ist | Klicken Sie mit der rechten Maustaste darauf und wählen Sie **Show**, dann **Hide on phone**. |
| Eine eigene Farbe der Website | Klicken Sie unter **Fill** auf ein Farbfeld. Jedes wird so dargestellt, wie Ihre Website es darstellt, und das Bedienfeld zeigt, wie gut sich der Text auf dem Hintergrund lesen lässt. |
| Mehr Innenabstand | Ziehen Sie auf der Seite an einem grünen Griff oder stellen Sie es unter **Space inside** ein; die Rahmen-Schaltfläche dort öffnet jede Seite einzeln. |
| Eine Änderung bei Hover | Wählen Sie oben im Look **On hover** und stellen Sie ihn dann ein. Zeigen Sie auf der Seite darauf, um ihn zu sehen. |
| Etwas, das sich bewegt | Wählen Sie unter **Motion** einen **Entrance** wie **Fade**, **Rise** oder **Slide from the left**, dazu **Time** und **Wait**, und drücken Sie **Play**, um ihn einmal zu sehen. |

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](https://briks.dev/de/docs/versions).

## Tastenkürzel

| Schlüssel | Was sie tun |
| --- | --- |
| Escape | Wählen Sie, worin das Element sitzt, oder setzen Sie getippten Text wieder ein. |
| Pfeil nach unten, links und rechts | Wählen Sie das erste Element darin oder das daneben. |
| Eingabetaste oder Doppelklick | Geben Sie den Text des Elements ein. |
| ⌘B, ⌘I, ⌘K | Fett, kursiv oder ein Link, beim Tippen. |
| Alt mit Pfeil nach oben oder unten | Verschieben Sie es oder seinen Listeneintrag. |
| ⌘D, Backspace | Duplizieren oder löschen Sie sie. |
| ⌘Alt+C, ⌘Alt+V | Den Stil kopieren oder den Stil einfügen. |
| A, C, P | Hinzufügen, kommentieren oder die Seite nutzen. |
| ? | Alle Tastenkürzel anzeigen. |

Unter Windows steht Strg anstelle von ⌘.

### Verbraucht der Visual Editor Credits?

Änderungen darin und deren Veröffentlichung kosten nichts. Nur die KI-Funktionen kosten: Texte umschreiben (bis zu 0.20 Credits), Alternativtext schreiben, der noch nicht gespeichert ist (bis zu 0.10 Credits), und alles, was an den Builder geschickt wird und als Änderung berechnet wird.

### Wer kann ihn nutzen?

Alle in einem Workspace mit einem kostenpflichtigen Tarif. Owners, Admins und Editors ändern und veröffentlichen; Viewers sehen sich um und kommentieren.

### Warum kann ich manche Wörter nicht eintippen?

Ihre Wörter werden im Code der Website errechnet oder stehen zwischen anderen Elementen. Wählen Sie jeden Teil einzeln aus oder fragen Sie den Builder.

### Können zwei von uns gleichzeitig bearbeiten?

Ja. Sie teilen einen Entwurf, sehen einander in der Leiste, und der Editor bittet Sie, neu zu laden, wenn jemand den Entwurf geändert hat, seit Sie ihn geöffnet haben.

## Als Nächstes lesen

- [An einem Projekt arbeiten **Änderungen vornehmen** Website per Nachricht an Briks ändern: was Sie sagen, Bilder hinzufügen, Inhalt und Kosten einer Änderung, Unterseiten, wartende Anfragen, Fehler beheben.](https://briks.dev/de/docs/making-changes)
- [An einem Projekt arbeiten **Versionen, Rückgängig und Wiederholen** Jeder Build und jede Änderung ist eine Version. Rückgängig, wiederholen oder jede frühere Version unverändert live setzen, ohne reservierte Credits.](https://briks.dev/de/docs/versions)
- [Die Funktionen Ihrer Website **Medienbibliothek** Eigene Bilder und Videos einmal in die Workspace-Mediathek laden, im Eingabefeld in jedem Projekt platzieren und Bilder einer Website gratis tauschen.](https://briks.dev/de/docs/media-library)
- [Erste Schritte **Credits und Pläne** Briks Credits erklärt: Reservierungen von 50 und 5, Abrechnung erledigter Arbeit, Schätzungen, wartende Builds, was bei null passiert, was jeder Plan bietet.](https://briks.dev/de/docs/credits-and-plans)

Noch nicht weitergekommen?

Schreiben Sie an [hello@briks.dev](mailto:hello@briks.dev) mit dem Namen Ihres Projekts und dem, was Sie erwartet haben. Ein Screenshot hilft.