Builder: Module & Elemente

Wie der Aufbau funktioniert

Jede Seite steckt in einer festen Schachtelung: Sektion (teal markiert) enthält eine oder mehrere Zeilen (mint), die Zeile teilt sich in Spalten, und in die Spalten kommen die eigentlichen Module (die Elemente). Editor und veröffentlichte Seite rendern aus demselben Datenmodell – was du im Builder siehst, ist also wirklich das, was live geht.

Ein Modul einfügen

Leg zuerst eine Sektion an (Button „Sektion hinzufügen") und wähl beim Zeilen-Dialog ein Spalten-Layout – etwa „1 Spalte", „½ + ½" oder „⅓ + ⅓ + ⅓". Danach öffnet sich das Fenster „Module", und jede leere Spalte zeigt die Ablagefläche „Modul hierher ziehen". Zieh einen Baustein aus dem Fenster an die gewünschte Stelle – oder klick ihn an, dann landet er in der ausgewählten Spalte bzw. unter dem ausgewählten Modul.

Im Panel hast du zwei Wege. Entweder du scrollst durch die Kategorien – Basis (Überschrift, Text, Button, Bild, Icon, Liste, Zitat, Trenner, Abstand), Layout & Aufbau (Navigation, Bild+Text, Karte, Bento, Tabs, Akkordeon, Prozess-Schritte …), Medien (Video, Audio, PDF, Code/HTML, Vorher/Nachher, Logo-Leiste, Laufband, Instagram-Feed, Facebook-Feed), Marketing & Conversion (Call-to-Action, Preis-Tabelle, Testimonial, Google-Bewertungen, Zähler, Countdown …) und Kontakt & Info (Kontaktformular, Termine/Buchung, Newsletter, Team, Map, Öffnungszeiten, Speisekarte …). Oder du tippst oben ins Suchfeld, z. B. „preis", und drückst Enter – das oberste Ergebnis wird eingefügt. Mit den Pfeiltasten springst du durch die Treffer.

Tipp: Es gibt kein fertiges „Hero"-Modul im Picker. Einen Banner baust du aus einzelnen Blöcken – oder du nimmst „Sektion hinzufügen" und wählst eine Hero-Vorlage, deren Überschrift, Text und Buttons danach frei bearbeitbar sind.

Inhalte bearbeiten (Tab „Inhalt")

Klick ein Modul an, dann öffnet sich rechts das Einstellungs-Panel mit drei Tabs. Im ersten, Inhalt, stehen die modul-eigenen Felder. Ein paar Beispiele: Beim Button legst du Beschriftung, Ziel-URL, Stil (Gefüllt / Umrandet / Text) und ein optionales Icon fest. Beim Akkordeon trägst du Frage-Antwort-Paare ein und stellst „Mehrere offen" oder „Nur eins offen" ein. Beim Kontaktformular baust du die Felder selbst zusammen (Text, E-Mail, Telefon, Nachricht, jeweils mit Pflicht-Häkchen und eigenem Fehlertext).

Kürzere Texte gehen auch direkt: Überschriften und Textblöcke kannst du im Canvas doppelklicken und lostippen. Sobald du etwas markierst, erscheint eine schwebende Leiste für Fett, Kursiv, Farbe, Link und Schriftart. Bilder wählst du nie über einen PC-Dialog, sondern immer über den Medienbereich – ein Doppelklick auf ein Bild oder seinen Platzhalter im Canvas öffnet ihn für genau dieses Bild (in allen Modulen mit Bildern, auch bei Hintergrundbildern).

Bei Produkt, Event, Rabattcode und Bewertung füllt ein Auswahl-Fenster das Modul automatisch: Produkt mit Bild, Name, Preis und Beschreibung, Event mit Titelbild, Titel, Datum, Ort und Preis, Rabattcode mit Code, Wert und Gültigkeit, Bewertung mit Text, Name und Sternen. Zur Auswahl stehen nur freigegebene Kundenbewertungen ab 4 Sternen. Google-Bewertungen und Trustpilot zeigen im Editor Musterdaten, bis eine Place-ID (Finder im Tab „Inhalt“) bzw. die Trustpilot-Business-Unit-ID hinterlegt ist; danach erscheinen die echten Bewertungen wie auf der veröffentlichten Seite.

Aussehen anpassen (Tab „Design")

Im Design-Tab steckt die Gestaltung, für jedes Modul gleich aufgebaut: Farben (Hintergrund, Textfarbe), Schrift & Ausrichtung, Abstände (Abstand zu den Nachbarn und Innenabstand, je Feld mit „Auto“ – siehe unten), Rahmen & Schatten (Rahmenstärke und Eckenradius frei in px; unter Kanten wählst du am Quadrat, an welchen Seiten der Rahmen sitzt – oben, rechts, unten, links, die Mitte schaltet alle; Schatten als Vorlage – Kein, Sanft, Mittel, Stark, Schwebend, Innen – oder als Eigener Schatten mit Versatz X/Y, Unschärfe, Ausdehnung und Farbe, je Gerät einstellbar; Bilder bekommen einen Schatten entlang ihrer Kontur) und – bei Karten, Preis-Boxen, Galerien u. Ä. – eine Hover-Animation (Heben, Zoom, Leuchten, Neigen). Unter Einblend-Animation lässt du das Element beim Scrollen sanft erscheinen (von unten, Zoom …), mit Dauer, Verzögerung und Stärke. Ganz wichtig für Handy: Oben im Design-Tab steht die Geräte-Auswahl Desktop / Tablet / Handy. Ist nichts gewählt, gilt eine Änderung für alle Geräte; wählst du ein Gerät, gilt sie nur dort – die anderen bleiben, wie sie sind.

Graue Werte: was ohne eigene Einstellung gilt

Jedes Feld zeigt gleich nach dem Einfügen, was das Modul wirklich hat – auch wenn du noch nichts eingestellt hast. Solche Werte stehen grau im Feld, daneben ein kurzes Etikett, woher sie kommen:

• Standard: fester Wert des Moduls, z. B. die weiße Karte mit 1 px Rahmen in #e5e7eb und 16 px Ecken bei der Kundenstimme oder der Marken-Verlauf beim Call-to-Action.
• Website bzw. Projekt: aus dem Website-Design (Markenfarbe, Schrift, Textfarbe, Button-Ecken) oder der Projektfarbe.
• Seite, Sektion, Zeile, Spalte: geerbt (Textfarbe, Schrift, Ausrichtung) oder der durchscheinende Hintergrund.
• H1 bis H6: Werte der Überschriften-Ebene aus dem Website-Design (Größe, Stärke, Zeilenhöhe, Schrift, Farbe).
• Kopfzeile: die weiße Leiste; Module dort haben keinen Grund-Innenabstand.
• Früher: ein festgehaltener früherer Website-Standard („Nur für neue Elemente").

Bei Auswahl-Knöpfen ist die wirksame Wahl gestrichelt umrandet, eine eigene Wahl ist gefüllt. Graue Werte werden nicht gespeichert – erst wenn du selbst etwas änderst, entsteht ein eigener Wert. Leerst du ein Feld (oder klickst auf das Zurück-Symbol daneben), steht wieder der graue Wert da. Werte, die sich der Spalten- oder Bildschirmbreite anpassen, stehen als Spanne da, z. B. „16–24" (Überschriften werden auf dem Handy fließend kleiner, eine H2 zeigt dort „22–32"). Mit gewähltem Gerät (Tablet, Handy) zeigt jedes Feld den Wert dieses Geräts.

Karten-Module: Hintergrund, Rahmen, Ecken und Schatten gehören der Karte

Karte, Kundenstimme, Preis-Tabelle, Call-to-Action, Ja/Nein-Auswahl, Angebots-Block, Rabattcode, Newsletter, E-Mail-Fang, Statistik-Band, Aktionsband, Hero, Marken-Block, Zitat im Stil „Karte", Datei-Download, Tabelle, PDF, Google-Bewertungen, Countdown (Kacheln), Termine/Buchung, Blog/Beiträge, Login/Mitglieder, Community-Übersicht und Diskussion malen ihre Fläche selbst. Änderst du dort zum ersten Mal Hintergrund, Rahmen, Ecken oder Schatten, gilt das für genau diese Karte – bei Google-Bewertungen, Beiträgen, Community-Übersicht und Diskussion für jede Karte, beim Countdown für jede Kachel. Die übrigen Werte derselben Gruppe werden mit festgehalten: Wer nur die Rahmenfarbe ändert, behält die 1-px-Linie, und ein Verlauf behält seine zweite Farbe und Richtung. Markenfarben bleiben dabei an die Markenfarbe der Website gebunden. Ein Rückgängig nimmt den ganzen Schritt zurück.

Den Abstand innerhalb der Karte stellst du unter Abstände › Innenabstand der Karte ein. Der Innenabstand darüber gilt für die Hülle um die Karte. Bei Team-Mitglied wirken die Ecken auf das Foto, bei Bild + Text auf das Bild – das Etikett neben dem Feld sagt es dazu.

Bei der Hinweisbox sind Hintergrund, Rahmen und Ecken im Design-Reiter dieselben Werte wie unter Inhalt › Aussehen – du kannst sie an beiden Stellen ändern. Beim Blog sind Kartenfläche und Ecken die Werte aus dem Inhalt, bei Termine/Buchung die Kartenfläche. Gilt ein „Ecken-Radius" im Inhalt für Felder und Buttons, steht dahinter, welche Ecken die Karte dadurch hat (z. B. „Karten 16" – die Karten sind 4 px runder). Beim Rabattcode stellst du das Code-Feld unter Inhalt › Code-Feld ein, bei Shop-Rastern die Bildfläche hinter den Produktbildern unter Karten, beim Facebook-Feed den Rahmen der Beitrags-Karten unter Layout.

Auf dem Handy werden viele Schriften kleiner. Mit gewähltem Gerät Handy steht im Schrift-Feld der Handy-Wert; passt sich eine Größe der Breite an, steht die Spanne für übliche Handys da (z. B. Preis „28–35").

Linien, Spuren und Überschriften im Modul

Auch Teile, die früher fest waren, lassen sich jetzt einstellen – leer zeigen sie ihren Standard grau: die Spur von Fortschrittsbalken und Kreis-Diagramm, die Linien von Reitern, Tabelle, Öffnungszeiten, Speisekarte (Punktlinie) und Prozess-Schritten, die Kopfzeile der Tabelle, die Etikett-Fläche bei Vorher/Nachher und die Sterne der Google-Bewertungen. Die Überschrift von Formular, Quiz, Buchung, Community-, Feed- und Shop-Modulen hat unter Design › Schrift › Elemente › Überschrift eigene Größe, Stärke und Farbe. Bei Buttons im Inhalt-Reiter (Call-to-Action, Hero, Bild + Text …) zeigt jedes Farbfeld, was der gewählte Stil ohne eigene Farbe malt, z. B. auf dem Marken-Band die weiße Fläche mit Schrift in Markenfarbe.

Abstände: automatisch passend, frei einstellbar

Fügst du ein Element ein, setzt der Builder die Abstände sofort nach festen Regeln – so, wie es ein Gestalter tun würde. Ein Button unter einem Text bekommt 28 px Luft, ein Text unter einer großen Überschrift 20 px, zwei Absätze 16 px, ein Bild 32 px Abstand nach oben. Das gilt für jeden Weg: Modul auswählen, ziehen und ablegen, einfügen, duplizieren, Zeilen- und Sektions-Vorlagen. Auch der Abstand zum Element darüber wird gleich mit passend gesetzt – ebenso, wenn du ein Element verschiebst oder das Element dazwischen löschst oder ausblendest.

• Zwischen Elementen einer Spalte zählt, was aufeinander folgt: Dachzeile (kurzer Text oder H5/H6) → Überschrift 12 px, Überschrift → Überschrift 12 px, Text, Liste oder Button → große Überschrift (H1/H2) 40 px – so beginnt ein neuer Abschnitt sichtbar, große Überschrift (H1/H2) → Text oder Liste 20 px, kleine Überschrift (H3–H6) → Text oder Liste 12 px, Text → Text oder Liste 16 px, Überschrift/Text/Liste → Button 28 px, Button → Button 12 px, alles → Bild, Video, Galerie, Slider, Karte oder Einbettung 32 px, nach Medien 24 px, nach einer Liste 24 px, Karte → Karte 24 px, vor und nach Karten, Formularen, Preis-Tabellen und anderen Kästen 32 px, rund um Trenner 24 px, sonst 24 px. Ein Abstandhalter ist selbst der Abstand – um ihn herum bleibt 0. Das erste Element einer Spalte hat oben keinen Abstand, das letzte unten keinen.
• Zwischen Zeilen einer Sektion 48 px, zwischen Spalten 32 px. Eine Leerzeile (nur ein Abstandhalter) ist selbst der Abstand – um sie herum bleibt 0. Rund um eine Zeile, die nur eine Trennlinie enthält, sind es 32 px, damit Listen aus Zeilen (Leistungen, Termine, Preise) kompakt bleiben.
• Sektionen haben oben und unten 96 px Innenabstand; mit Hintergrundbild oder -video und als erste Sektion mit H1-Überschrift (Hero) 120 px. Sitzt ein randloses Band (Hero, Call-to-Action) am Rand der Sektion, liegt es dort bündig.
• Kästen mit eigenem Hintergrund oder Rahmen – Spalten, Zeilen und Text-Module – bekommen rundum 32 px Innenabstand. Nimmst du den Hintergrund wieder weg, fällt er automatisch auf 0. Ein durchsichtiger Hintergrund zählt nicht als Kasten.
• Tablet und Handy bekommen etwas weniger: Abstände zwischen Elementen rund 90 % bzw. 80 % (auf das 4-px-Raster gerundet, nie unter 8 px), Sektionen 80/64 px (Hero 96/72 px), Zeilen 40/32 px (an Trennlinien-Zeilen 28/24 px), Spalten 24/16 px, Kästen 28/24 px.

Im Reiter Design → Abstände siehst du jeden Wert für das gerade gewählte Gerät: bei Modulen den Abstand zu den Nachbarn (oben/unten) und den Innenabstand, bei Zeilen Zeilen- und Spaltenabstand, bei Sektionen den Innenabstand oben/unten. Steht an einem Feld eine gefüllte Auto-Pille, kommt der Wert aus den Regeln und passt sich von selbst an, wenn du Elemente einfügst, verschiebst, löschst, ausblendest oder z. B. aus einer H2 eine H3 machst. Tippst du eine eigene Zahl ein, bleibt genau dieser Wert stehen. Die Pille zeigt dann den Regelwert (etwa „Auto 28“); ein Klick darauf – oder ein geleertes Feld – stellt wieder auf automatisch. Setzt du ohne Geräte-Auswahl einen eigenen Wert, folgen Tablet und Handy ihm automatisch etwas kleiner, solange du dort nichts Eigenes einträgst; mit „Desktop“ gewählt bleiben Tablet und Handy, wie sie sind. Mit dem Kettensymbol neben „Innenabstand“ gilt eine Eingabe (oder „Auto“) für alle vier Seiten.

Im Canvas zeigt der Abstand unter einem Element beim Darüberfahren seinen Wert, etwa „↕ 28px“ (mit „Auto“, wenn er aus den Regeln kommt). Zieh die Linie, um ihn zu ändern: Der Wert ändert sich pixelgenau in 1-px-Schritten, Esc bricht ab. In der Tablet- oder Handy-Ansicht gilt das Ziehen nur für dieses Gerät. Ein gezogener Wert ist ein eigener Wert und bleibt stehen.

Neue Websites aus einer Vorlage oder dem Website-Assistenten (auch Trichter-Vorlagen) bringen die Regeln gleich mit: Was die Vorlage bewusst setzt, bleibt stehen, alles andere sitzt nach Regel – Vorlagen-Vorschau, Baukasten und Live-Seite sehen dadurch gleich aus. Bestehende Seiten ändern sich dadurch nicht von selbst. Willst du eine ältere Sektion auf die Regeln bringen, wähle sie aus und klicke in den Abständen auf Abstände automatisch ordnen (steht auch im Rechtsklick-Menü der Sektion). Für die ganze Seite: nichts auswählen und rechts Ganze Seite automatisch ordnen klicken. Dabei werden auch eigene Werte wieder automatisch. Beides nimmst du mit ⌘Z (Windows: Strg+Z) zurück. Kopf- und Fußzeile haben eigene Leisten-Abstände und bleiben davon unberührt. In Popups, Beiträgen, Lektionen und Community-Seiten gelten die Regeln für Elemente und Zeilen; den Rand bringt dort der Rahmen mit (Popup, Beitrag, Portal), darum setzen die Regeln keinen Sektions-Innenabstand.

Minus-Abstände und vertikale Ausrichtung

Der Außenabstand oben und unten darf negativ sein – bei Modulen unter „Abstand zu Nachbarn“, bei Zeilen, Spalten und Sektionen unter „Außenabstand“. Mit -40 rückt das Element 40 px über seinen Nachbarn, etwa eine Karte, die leicht in das Titelbild ragt. Das überlappende Element liegt dabei oben. Erlaubt sind bis −300 px, und wie jeder Design-Wert lässt sich der Minus-Abstand je Gerät setzen (z. B. am Handy kleiner). Seitliche Abstände und Innenabstände bleiben positiv, damit nichts aus der Seite läuft.

Unter Versatz (Module und Spalten) verschiebst du ein Element sichtbar um X und Y Pixel, auch ins Minus – der Platz, den es im Fluss einnimmt, bleibt dabei stehen, die Nachbarn rücken nicht nach. So entstehen Überlappungen zur Seite, etwa ein Foto, das halb vor einer versetzten Farbfläche liegt. Nach vorne legt das Element über überlappende Nachbarn. Eine Spalte mit eigener Fläche wächst sonst auf die Höhe der höchsten Spalte ihrer Zeile – mit Höhe nach Inhalt (Spalte › Layout & Ausrichtung) bleibt sie so hoch wie ihr Inhalt, etwa eine versetzte Farbfläche hinter einem Foto neben einem langen Text. Wie jeder Design-Wert gilt der Versatz je Gerät; am Handy stellst du ihn meist auf 0. Nach rechts reicht ein Versatz höchstens bis an den Rand seiner Spalte – auf schmaleren Bildschirmen rückt das Element dadurch von selbst nach links, statt aus der Seite zu ragen. Ebenso wird ein Element mit Max. Breite und Abstand links auf schmaleren Bildschirmen schmaler, statt rechts hinauszuragen.

Bei der Liste wählst du unter Darstellung als Aufzählungszeichen ein Symbol (z. B. Häkchen) oder einen schlichten Punkt wie in normalen Texten; Größe, Stärke, Zeilenabstand und Farbe der Punkte stellst du unter Schrift → „Text“ ein. Das gilt auch für eine nummerierte Liste: Eine dort eingestellte Schrift zeigen ihre Punkte jetzt auch auf bestehenden Seiten. Ein Abstandhalter mit Farbe wird zur farbigen Fläche; mit Feste Höhe behält er seine Höhe auch in schmalen Spalten und am Handy.

Bei einer Spalte stellst du unter Layout & Ausrichtung → Vertikal ein, ob sie neben einer höheren Spalte oben, mittig oder unten sitzt – zum Beispiel Text mittig neben einem großen Bild. Am Handy stehen die Spalten untereinander, dort spielt das keine Rolle.

Verschieben, duplizieren, Feinschliff

Fährst du über ein Modul, taucht oben eine kleine Werkzeugleiste auf: Ziehen (Verschieben), Nach oben / unten, Duplizieren und Löschen. Ein Rechtsklick öffnet zusätzlich ein Menü zum Kopieren und Einfügen. Der dritte Tab, Erweitert, ist für Feinheiten: eigene CSS-ID/Klasse, eigenes CSS pro Modul, das Ausblenden auf einzelnen Geräten und ein Link auf das ganze Element. Ein Ankerpunkt (z. B. „kontakt“) macht das Element zum Sprungziel: Ein Link auf „#kontakt“ scrollt so, dass seine Oberkante bündig unter der fixierten Kopfzeile steht – in der Vorschau und live. Denk dran, oben rechts zu speichern – und veröffentliche erst, wenn du zufrieden bist.

Spalten nur am Handy umsortieren: In der Handy-Ansicht verschieben die Pfeile einer Spalte („Am Handy nach oben / unten") nur ihre Reihenfolge am Handy – Desktop und Tablet bleiben, wie sie sind. In den Einstellungen der Zeile stellt „Eigene Handy-Reihenfolge zurücksetzen" die normale Reihenfolge wieder her.

Farben eines Bildes umkehren: Beim Bild-Modul legst du unter „Farben umkehren" fest, wie es auf dunklem Hintergrund erscheint. Automatisch kehrt ein einfarbiges Logo um, wenn es auf seinem Hintergrund kaum zu sehen wäre (etwa ein schwarzes Logo auf dunkler Fläche); farbige Bilder und Fotos bleiben unverändert. Umkehren kehrt die Farben immer um, Original nie. In der Kopfzeile ist Automatisch voreingestellt, sonst Original.

Text als Link: Unter „Klick-Aktion“ beim Text-Modul macht Link den ganzen Text klickbar, etwa für eine Kachel „Zum Angebot“. Daneben stehen Warenkorb, Produktsuche und Konto / Login zur Wahl.

Schrift der Elemente in einem Modul

Viele Module bestehen aus mehreren Teilen – etwa Tarifname, Preis und Vorteile beim Preis-Modul oder Name, Rolle und Beschreibung beim Team-Modul. Im Reiter Design › Schrift wählst du unter Elemente den Teil aus und stellst Größe (px), Stärke, Farbe, Schreibweise (Großbuchstaben, Kleinbuchstaben, Wortanfang) und Zeilenabstand ein. Leer bleibt der Standard. Ein eigener Zeilenabstand gilt für den ganzen Text, auch für Stellen mit anderer Größe, und bestimmt allein den Abstand der Zeilen, auch zwischen Absätzen – egal, ob der Text aus Absätzen oder Zeilenumbrüchen besteht. Beim Text-Modul kommt die Laufweite (px) dazu. Beim Überschrift-Modul stellst du unter Überschrift eine eigene Größe, Zeilenabstand, Laufweite, Schreibweise und Kursiv ein – auf „Ebene“ gilt der Wert der Ebene aus dem Marken-Design. Wie alle Design-Werte gilt das je Gerät: Mit der Geräte-Auswahl stellst du zum Beispiel den Preis auf dem Handy kleiner. Das geht bei Preis, Team (inklusive Fotogröße), Zähler, Kennzahlen-Band, Testimonial, Speisekarte, Tabelle, Schritten, Kontaktinfos, Feature-Liste, Reitern, Akkordeon, Karte, Call-to-Action, Auswahl, Angebots-Block, Rabattcode, Newsletter, E-Mail-Fang, Zitat, Portfolio, Bento-Raster, Öffnungszeiten und Countdown.

Weitere Stil-Einstellungen

• Akkordeon: Unter „Auf-/Zu-Symbol" wählst du Pfeil oder Plus, links oder rechts, und die Farbe. Geöffnet dreht sich der Pfeil, das Plus wird zum Kreuz.
• Reiter: Unter „Reiter-Stil" stellst du Unterstrich oder Pillen sowie die Farben für aktive und inaktive Reiter ein.
• Newsletter und E-Mail-Fang: Unter „Eingabefeld" gestaltest du das E-Mail-Feld wie beim Kontaktformular (Hintergrund, Text, Platzhalter, Rahmen, Fokus, Ecken, Innenabstand, Schatten).
• Vorgestellte Kollektion: Der Link „Alle ansehen" lässt sich ein- und ausschalten, mit eigenem Ziel und eigener Beschriftung.
• Trenner: Linienstil (Linie, Strich, Punkte); das senkrechte Trennzeichen in Kopf- und Fußzeile hat zusätzlich Höhe und Deckkraft. Rahmen, Ecken, Schatten und Innenabstand erscheinen erst, wenn der Trenner einen Hintergrund (Band) hat.
• Sektion: Mindesthöhe in px (je Gerät).
• Zeile: „Spalten am Handy umkehren" (Zeilen- und Spaltenabstand stehen unter Abstände) – gestapelt erscheint dann die letzte Spalte oben.