Der Builder ist das Herz von BirdBuild: Du baust deine Seite direkt in der echten Vorschau (WYSIWYG) aus vier Bausteinen – Sektion, Zeile, Spalte und Modul. Hier lernst du, wie du Elemente einfügst, per Klick oder Drag&Drop umsortierst, über das Design-Panel gestaltest und Schritte im Verlauf zurücknimmst.
Die Fläche ist die Website
Zwischen den Werkzeugleisten und deiner Seite ist kein leerer Rand mehr: Die Bearbeitungsfläche ist die Website, von Kante zu Kante. Auf breiten Bildschirmen wird die Seite dafür passend vergrößert dargestellt – das Layout bleibt exakt das Desktop-Layout, es wird nur größer gezeichnet. In der Handy- und Tablet-Ansicht bleibt der schmale Rahmen natürlich schmal; nur so siehst du, wie die Seite auf einem Gerät dieser Breite wirkt.
Alles, was über der Seite schwebt, bleibt innerhalb dieses Rahmens: die Text-Formatierungsleiste, die beim Markieren erscheint, und das Menü beim Rechtsklick auf ein Element. Ist über der Markierung kein Platz mehr, klappt die Leiste darunter statt über den Rand hinaus. In der Handy-Ansicht wird sie schmaler und bricht um, damit sie in den Geräte-Rahmen passt. Kurz: Was du siehst, kannst du auch anklicken.
Die vier Bausteine verstehen
Jede Seite steckt in vier verschachtelten Ebenen, die im Builder farblich getrennt sind. Ganz außen liegt die Sektion (teal) – ein waagerechter Streifen über die volle Breite. Darin sitzt mindestens eine Zeile (mint), die du in Spalten (grau) aufteilst. In jede Spalte kommen die Module (dunkelgrau): der eigentliche Inhalt, also Überschrift, Text, Bild, Button und so weiter. Merk dir die Reihenfolge Sektion, Zeile, Spalte, Modul. Fährst du mit der Maus über ein Element, erscheint oben links sein farbiges Namensschild – so weißt du immer, auf welcher Ebene du gerade bist.
Sektion, Zeile und Module einfügen
Bei einer leeren Seite klickst du auf den großen Button Neue Sektion hinzufügen in der Mitte. Jede weitere Sektion fügst du über die Pille Neue Sektion hinzufügen ein: Sie sitzt mittig auf der Grenze zwischen zwei Sektionen (und unter der letzten), wird deutlich, sobald du mit der Maus über eine der beiden Sektionen fährst, und setzt die neue Sektion genau an dieser Stelle ein. In einer leeren Sektion steht der Knopf Zeile einfügen – dort wählst du im Dialog, wie die Zeile aufgeteilt sein soll. Es gibt 8 Vorlagen: 1 Spalte, 1/2 + 1/2, drei gleiche Drittel, viermal 1/4, 1/3 + 2/3, 2/3 + 1/3, 1/4 + 3/4 und 1/4 + 1/2 + 1/4. Sobald die Zeile steht, ist ihre erste Spalte ausgewählt und es öffnet sich das Fenster Module. Weitere Zeilen legst du über das Zeilen-Symbol Zeile darunter einfügen in der Werkzeugleiste einer Zeile an, per Rechtsklick (Zeile darüber/darunter) oder indem du ein Modul unter die letzte Zeile einer Sektion ziehst.
Module holst du über den Knopf Module ganz oben in der linken Leiste: Er öffnet ein großes Fenster mit 47 Bausteinen, nach Kategorien sortiert (Basis, Layout & Aufbau, Medien, Marketing & Conversion, Kontakt & Info, Weitere), mit Suchfeld. Zieh einen Baustein an die gewünschte Stelle – zwischen zwei Module, in eine leere Spalte (Modul hierher ziehen), in eine leere Sektion oder unter die letzte Zeile (Zeile und Spalte entstehen dann von selbst) oder ganz nach unten (neue Sektion). Eine Linie bzw. eine hervorgehobene Fläche zeigt, wo er landet. Liegt die Stelle weiter oben oder unten, zieh an den oberen bzw. unteren Rand der Seite – sie scrollt dann in diese Richtung mit, je näher am Rand, desto schneller (auch beim Verschieben über den Griff); Esc bricht das Ziehen ab, und Cmd/Strg + Z nimmt das Einfügen zurück. Ohne Maus-Ziehen: Baustein anklicken (oder suchen und Enter drücken) – er landet unter dem ausgewählten Modul bzw. in der ausgewählten Spalte, ist nichts ausgewählt, am Ende der letzten Sektion. Runde „+“-Knöpfe an den Elementen gibt es nicht mehr. In der Kopfzeile fügst du Elemente über Element hinzufügen am Reiter „Header“ ein (die Stelle wählst du im Fenster), in einer leeren Zone über deren Knopf Hinzufügen.
Elemente auswählen, verschieben, duplizieren, löschen
Klick ein Element an, dann erscheint oben links seine farbige Werkzeugleiste. Dort findest du (von links): Greifer und Name des Elements (etwa „Text“, „Bild“, „Zeile“ oder „Sektion“ – die ganze Fläche ist zum Ziehen da), Zur Ebene, Nach oben, Nach unten, Duplizieren, In Bibliothek speichern und Löschen. Lange Namen werden gekürzt, die Knöpfe bleiben immer sichtbar. Bei einer Zeile kommen das Symbol Spalten-Layout und Zeile darunter einfügen dazu – damit änderst du das Spalten-Raster nachträglich; bestehende Inhalte werden dabei auf die neuen Spalten verteilt.
Zum Umsortieren per Drag&Drop packst du das Element am Greifer und ziehst es an die neue Stelle. Eine Einfügelinie zeigt dir, wo es landet – funktioniert auch über Spalten- und Sektionsgrenzen hinweg. Spalten selbst ordnest du nicht per Drag, sondern über das Spalten-Layout. Ein Rechtsklick auf jedes Element öffnet zusätzlich ein Menü mit Kopieren, Einfügen, Duplizieren, Sektion darüber/darunter und Löschen.
Anordnung der Bewertungen
Beim Google-Bewertungen-Baustein wählst du zwischen Raster (feste Spaltenzahl), Liste (untereinander) und Reihe. „Reihe“ setzt so viele Karten nebeneinander, wie wirklich hineinpassen – der Rest rückt in die nächste Zeile. Es wird nie eine Karte abgeschnitten, auch nicht in einer schmalen Spalte oder auf dem Handy.
Einstellungen einer Gruppe zurücksetzen
Jede Einstellungs-Gruppe (Hintergrund & Farben, Abstände & Ecken, Rahmen & Schatten, Bilder, Raster …) hat oben rechts drei Punkte. Dahinter liegt Zurücksetzen: Es leert alle Werte dieser einen Gruppe und stellt damit den Standard wieder her, ohne die übrigen Gruppen anzufassen. Weil das mehrere Werte auf einmal verwirft, fragt der Eintrag beim ersten Klick nach (Wirklich zurücksetzen?) – und rückgängig machen kannst du es danach immer noch.
Farben wählen
Überall, wo du eine Farbe einstellst, öffnet dasselbe Fenster. Oben siehst du die aktuelle Farbe, daneben das Eingabefeld für den Farbwert – dort kannst du Hex tippen (#0d9488 oder kurz #0d9) oder ein rgb(…) aus der Zwischenablage einfügen. Rechts daneben liegt in Chrome und Edge die Pipette: damit nimmst du eine Farbe direkt vom Bildschirm auf.
Darunter das Farbfeld und drei Regler: Farbton, Sättigung und Helligkeit. Der Farbton-Regler ändert wirklich nur den Farbton – deine Sättigung und Helligkeit bleiben stehen. Aus einem Grau oder Weiß kommst du über den Sättigungsregler heraus. Alle drei lassen sich mit den Pfeiltasten fein einstellen (mit Umschalt in größeren Schritten).
Ganz unten stehen die Website-Farben (die Farben, die auf deiner Seite schon vorkommen), die zuletzt verwendeten und die feste Palette. Der Knopf Zurück holt die Farbe zurück, die beim Öffnen eingestellt war; Keine Farbe leert das Feld. Escape oder ein Klick daneben schließt das Fenster.
Stil und Einstellungen übertragen
Im Rechtsklick-Menü stehen zwei Paare, die oft verwechselt werden:
- Stil kopieren / einfügen überträgt nur das Aussehen – Farben, Abstände, Ecken, Ausrichtung. Das geht über Bausteinarten hinweg: Du kannst den Stil einer Überschrift auf einen Button legen. Nach dem Einfügen sieht das Ziel genau wie die Quelle aus; Werte, die die Quelle nicht gesetzt hat, werden am Ziel entfernt statt beibehalten.
- Einstellungen kopieren / einfügen überträgt die komplette Konfiguration eines Bausteins – Inhalt, Stil und die Werte aus dem Tab „Erweitert". Das funktioniert nur zwischen Bausteinen derselben Art (Button → Button). Passt die Art nicht, steht der Punkt grau da und nennt dir, was gerade kopiert ist.
Beide Menüpunkte sagen dir, woher der Inhalt stammt („Stil von Überschrift einfügen"). Hat ein Baustein noch gar keine eigenen Stilwerte, ist Stil kopieren ausgegraut – dort gäbe es schlicht nichts zu übertragen. Nach jedem Kopieren blendet der Baukasten unten kurz eine Bestätigung ein.
Text direkt tippen
Überschriften und Textmodule bearbeitest du direkt im Canvas: klick hinein und tipp los. Sobald du Text markierst, klappt oben die schwebende Text-Leiste auf – mit Fett (B), Kursiv (I), Unterstrichen (U), Durchgestrichen, A− / A+ für kleiner/größer, Ausrichtung links/mitte/rechts, Aufzählung, Schriftart (Aa), Textfarbe und Link einfügen. Mit dem Radiergummi entfernst du eine Formatierung wieder.
Gestalten über das Design-Panel
Wenn ein Element ausgewählt ist, zeigt das rechte Panel drei Reiter: Inhalt, Design und Erweitert. Unter Inhalt stellst du die modul-eigenen Felder ein (bei einer Preis-Tabelle etwa Plan, Preis und Vorteile). Unter Design liegen Hintergrund (Farbe, Verlauf oder Bild), Textfarbe, Ausrichtung, Innenabstand und Eckenradius. Der Reiter Erweitert bietet eine eigene CSS-ID und CSS-Klasse sowie „auf diesem Gerät ausblenden“. Für Farben nutzt du überall den BB-Color-Picker mit Hex-Eingabe und Paletten-Swatches, für Bilder wählst du aus dem Medienbereich.
Wichtig fürs Responsive: Oben in der Leiste schaltest du zwischen Desktop, Tablet und Handy um. Der Design-Reiter bearbeitet immer die gerade gewählte Ansicht – ein Hinweis-Banner sagt dir, für welches Gerät. Handy erbt vom Tablet, Tablet vom Desktop, du überschreibst also nur, was abweichen soll.
Die Werkzeugleiste links
Ganz links im Baukasten liegt eine schmale Leiste mit sieben Punkten. Jeder öffnet ein Feld daneben, ein zweiter Klick schließt es wieder.
- Module – öffnet ein großes Fenster mit allen Bausteinen, nach Kategorien sortiert und mit Suchfeld: auf die Seite ziehen (beim Ziehen blendet sich das Fenster aus, die ganze Seite ist frei) oder anklicken (fügt unter dem ausgewählten Element ein). Das ersetzt die früheren „+“-Knöpfe an den Elementen.
- Seiten – alle Seiten der Website, umbenennen, sortieren, Zugriff festlegen.
- Ebenen – der Aufbau der Seite als Baum (Sektion → Zeile → Spalte → Baustein). Ein Klick wählt das Element im Canvas aus – praktisch, wenn etwas hinter einem anderen Element liegt.
- Medien – die Mediathek zum Nachschlagen und Hochladen.
- Gespeicherte Elemente – Bausteine, die du mit In Bibliothek speichern in der Werkzeugleiste eines Elements abgelegt hast. Sie gelten für dein ganzes Konto und lassen sich auf jeder Website wieder einfügen: anklicken oder an die passende Stelle ziehen.
- Popups – welche Einblendungen es gibt und welche Besucher gerade sehen; hier schaltest du sie ein und aus, Bearbeiten öffnet die Popup-Verwaltung in einem neuen Tab (siehe unten).
- Einstellungen – alles, was für die ganze Website gilt: Design, Logo und Tab-Symbol, Ankündigungsleiste, Suchmaschinen-Vorgaben, Statistik & Cookies, Menüs, die aktuelle Seite und der KI-Zugang. Die Bereiche sind zugeklappt; du öffnest nur den, den du brauchst. Änderst du unter Website-Design Schrift, Farben, Buttons oder Globale Gestaltung verwenden, fragt BirdBuild jedes Mal: Nur für neue Elemente oder Auf alle bestehenden Elemente anwenden.
Ein Element, das du per Rechtsklick kopierst, setzt du per Rechtsklick auf ein Element derselben Art wieder ein – etwa mit Sektion einfügen oder Kopiertes Modul einfügen; es landet direkt dahinter.
Popups
Ein Popup blendet etwas ein, das auf der Seite selbst untergehen würde – ein Rabatt, ein Hinweis, eine Frage. Du findest sie unter Websites → Einstellungen → Popups (Abschnitt „Popups“, Knopf „Popups verwalten“); sie gelten für die ganze Website, nicht für eine einzelne Seite. Wie viele du anlegst, ist nicht begrenzt.
Anzeigearten: Fenster (mittig, Seite abgedunkelt), Karte in der Ecke, Schublade (seitlich, volle Höhe), Vollbild, Leiste (schmal oben oder unten, blockiert nichts) und Glücksrad.
Wann es erscheint: nach einigen Sekunden, ab einer Scrolltiefe, beim Verlassen der Seite (auf dem Handy über Hochwischen erkannt), sobald ein bestimmtes Element sichtbar wird, bei Klick auf ein Element, bei Untätigkeit, sofort – oder über ein eigenes JavaScript-Ereignis. Dazu stellst du ein, wie oft jemand dasselbe Popup sehen darf (einmal pro Besuch, pro Tag, alle paar Tage, nur einmal) und wer es überhaupt bekommt (bestimmte Seiten, Geräte, neue oder wiederkehrende Besucher, Herkunft, UTM-Parameter, Zeitraum).
Anmeldungen: Enthält dein Popup ein Formular, wähl oben eine Kontaktliste – das gilt dann für alle Formulare in diesem Popup, du musst es nicht an jedem Baustein einzeln setzen. Wer sich einträgt, landet als Kontakt in dieser Liste und bekommt das Kennzeichen „Newsletter“.
Prüfliste: Über den Reglern erscheinen Hinweise, wenn etwas nicht stimmt – etwa wenn es keinen Weg aus dem Popup heraus gibt, wenn Anmeldungen nirgends landen oder wenn ein Popup sofort und auf jeder Seite erscheint. Wo es sinnvoll ist, steht gleich ein Knopf daneben, der das Problem behebt.
Die Einstellungen sind in Bereiche geteilt, durch die du dich oben durchklickst: Inhalt (was drinsteht), Wann (Auslöser und Häufigkeit), Wem (Seiten, Geräte, Besucher, Zeitraum), Aussehen (Anzeigeart, Farben, Bewegung), Verhalten (Schließen, Scrollen, Zeitlimit) und Experte (eigenes CSS, Webhook). Bei der Anzeigeart Glücksrad kommt ein eigener Bereich Glücksrad dazu. So siehst du immer, was es sonst noch gibt, ohne durch eine lange Liste zu scrollen. Über den Reglern steht ein Satz wie „Nach 5 Sekunden, einmal pro Tag, auf allen Seiten“ – damit erfasst du auf einen Blick, was passieren wird.
Inhalt bearbeiten: Im Bereich „Inhalt“ führt ein Knopf in den Baukasten. Dort gestaltest du das Popup wie eine ganz normale Seite – mit Formular, Countdown, Bild, Video und allem, was du auch sonst verwendest. Brauchst du mehrere Ansichten nacheinander (etwa Willkommen → Formular → Danke), legst du dort weitere Schritte an. Damit Besucher weiterklicken können, stellst du bei einem Knopf im Popup unter „Was tut der Knopf?“ auf Weiter, Zurück oder Schließen.
Glücksrad: Im Bereich „Glücksrad“ legst du die Felder an – Beschriftung, Farbe, Gewinn und Gewicht. Als Gewinn wählst du direkt einen echten Shop-Rabatt aus deiner Rabatt-Liste (oder „Niete“ für ein Feld ohne Gewinn); ein grüner Haken bestätigt, dass der Code an der Kasse gültig ist. Dreht jemand einen Gewinn, wird der Code angezeigt und auf dem Weg zur Kasse automatisch ins Rabattfeld übernommen und angewendet – abtippen muss niemand. Wer lieber einen freien Code vergibt, wählt „Eigener Code“; steht dahinter kein aktiver Shop-Rabatt, warnt BirdBuild rechtzeitig. Das Gewicht bestimmt die Chance; die tatsächliche Wahrscheinlichkeit steht in Prozent daneben, und die Größe eines Feldes auf dem Rad folgt ihr. Mit „Erst nach dem Absenden drehen“ darf erst gedreht werden, wenn das Formular abgeschickt ist – der übliche Tausch E-Mail gegen Gewinnchance.
Es gibt acht Vorlagen (Newsletter mit Rabatt, Angebot beim Verlassen, Hinweisleiste, Glücksrad …). Sie bringen passende Einstellungen gleich mit.
Ein Schalter, mehr nicht: Steht ein Popup auf An, sehen Besucher es – sofort, ohne einen zweiten Schritt. Steht es auf Aus, sieht es niemand und du kannst in Ruhe daran bauen. Gespeichert wird automatisch. (Vorausgesetzt natürlich, die Website selbst ist veröffentlicht – sonst sieht niemand irgendetwas davon.)
Mit Ansehen öffnest du deine Website mit genau diesem Popup – auch wenn es gerade auf Aus steht und auch dann, wenn du es heute schon gesehen hast. Das Ansehen verbraucht die Häufigkeit nicht.
Rückgängig, speichern, veröffentlichen
Verklickt? Oben rechts machst du mit Rückgängig (Cmd/Strg+Z) und Wiederherstellen Schritte rückgängig. Das Uhr-Symbol daneben öffnet den Bearbeitungsverlauf – eine lesbare Liste aller Änderungen mit betroffenem Element und Uhrzeit („Text/Inhalt bearbeitet · Hinweisbox · 14:32“), aus der du per Wiederherstellen rechts neben dem Eintrag gezielt auf einen früheren Stand zurückspringst. Der aktuelle Stand ist markiert, rückgängig gemachte Schritte bleiben bis zur nächsten Änderung in der Liste.
Ein Klick auf Speichern sichert deinen Entwurf – ein Stern (Speichern *) zeigt ungespeicherte Änderungen an. Live geht deine Seite erst mit Veröffentlichen. Der Hinweis „Nicht veröffentlicht“ erinnert dich daran, wenn gespeicherte Änderungen noch nicht online sind. Über das Auge (Vorschau) blendest du alle Bearbeiten-Werkzeuge aus und siehst die Seite genau so wie deine Besucher.
Verlassen mit ungespeicherten Änderungen: Gehst du mit offenen Änderungen aus dem Baukasten – über den Zurück-Knopf oben links, einen Link in einer Leiste oder die Zurück-Taste des Browsers –, fragt ein kleines Fenster nach: Verwerfen, Als Entwurf speichern oder Veröffentlichen. Esc oder das Kreuz bringt dich zurück zum Bearbeiten, Enter speichert als Entwurf. Klappt das Speichern nicht, bleibt das Fenster offen und nennt den Grund. Wurde eine Seite inzwischen woanders gespeichert, steht das gleich im Fenster. Beim Schließen des Tabs oder Neuladen kann kein eigenes Fenster erscheinen – dann sichert BirdBuild deinen Stand als Entwurf und bietet ihn beim nächsten Öffnen an. Im Popup-, Beitrags- und Lektions-Editor heißt die Wahl Verwerfen oder Speichern.
Die rechte Einstellungs-Leiste klappt von selbst auf, sobald du etwas auswählst, und wieder zu, wenn du ins Leere klickst. Mit dem schmalen Griff an ihrer Kante blendest du sie jederzeit selbst ein oder aus.