Muster Betrieb GmbH — Demo-Backend — alles zum Ausprobieren Backend v1.126.0 Website ansehen ↗
🎮 Demo-BackendProbieren Sie alles frei aus: Texte ändern, Bilder tauschen, Erweiterungen an-/ausschalten. Es passiert nichts Echtes; alles wird regelmäßig zurückgesetzt.
Eigene Website anfragen →

❓ Anleitung – so pflegen Sie Ihre Website

Kurz erklärt, was wo geht – mit direkten Sprung-Knöpfen in den jeweiligen Bereich. Am schnellsten geht fast alles über „Live bearbeiten".

🧩 Ihre freigeschalteten Funktionen

Passt sich automatisch an die Funktionen an, die TwoPixels für Sie freigeschaltet hat. Neue Freischaltung = neuer Abschnitt.

Erste Schritte
Willkommen im Backend Ihrer Website. Hier ändern Sie Texte, Bilder und Einstellungen selbst — jede Änderung ist sofort live. Diese Anleitung wächst automatisch mit: für jede freigeschaltete Funktion kommt unten ein passender Abschnitt dazu.
Spam- & Bot-Schutz
Schützt Kontaktformulare vor Spam/Bots: Honeypot, Zeit-/Inhaltsfilter, optional unsichtbares Cloudflare-Turnstile-Captcha.

🖊 Live bearbeiten – der schnellste Weg

Öffnen Sie Ihre Website mit aktivem Stift und ändern Sie direkt auf der Seite: Texte anklicken (Fett/Kursiv, Ausrichtung, Größe, Wörter verlinken, 🎤 Diktieren, Rechtschreib-Markierung), Bilder tauschen, Hintergründe wechseln. Jede Zeile ist frei überschreibbar – auch eine Preiszeile: klicken Sie sie an und schreiben Sie z. B. „Preis auf Anfrage" statt eines Betrags. Ist eine Zeile ausgeblendet, holen Sie sie zuerst über „🚫 Ausgeblendet" zurück und ändern dann den Text. Einen Block/eine Karte löschen Sie mit der 🗑-Taste – mit sofortigem Rückgängig. Klicken Sie dabei ein einzelnes Element in einer Karte an (z. B. eine Preiszeile), fragt der Editor, ob Sie nur diese Zeile oder die ganze Karte ausblenden möchten – so entfernen Sie gezielt einzelne Angaben, ohne die ganze Karte zu verlieren. Versehentlich ausgeblendet und die Rückgängig-Meldung ist schon weg? Über „🚫 Ausgeblendet" in der Bearbeiten-Leiste sehen Sie alle ausgeblendeten Inhalte (auch auf anderen Seiten) und holen jeden mit „Wieder einblenden" zurück – nichts ist je dauerhaft verloren. Ganze Abschnitte verschieben/duplizieren/löschen (⧉ ↑↓ ✕). „💾 Sichern" legt einen Wiederherstellungspunkt an, „🎫 Melden" schickt uns einen Wunsch. Oben sehen Sie stets „✓ Alles gesichert".

🖊 Live-Bearbeitung öffnen

✅ Website-Check & erste Schritte

Auf der Startseite des Backends sehen Sie eine Ampel: Ist Kontakt/Telefon/Logo hinterlegt, Cookie-Banner aktiv, Impressum/Datenschutz vorhanden, bei Google sichtbar? Alles Grüne ist erledigt, Gelbes hat einen „erledigen"-Knopf.

Zur Übersicht

📢 Hinweis-Banner (Aktion / Urlaub)

Blenden Sie oben auf der Website einen Hinweis-Streifen ein – z. B. „Sommer-Special" oder „Vom 1.–14. August im Urlaub". Text und Farbe frei wählbar, mit einem Schalter ein/aus.

Einstellungen → Hinweis-Banner

📄 Seiten & Menü (Untermenüs)

Neue Seiten anlegen, Seiten löschen und Ihr Menü frei gestalten: Reihenfolge per Ziehen ⠿, Menü-Namen ändern, Punkte ausblenden. Untermenüs/Kategorien: oben eine Kategorie anlegen (z. B. „Über uns") und in der Spalte „Untermenü" Seiten zuordnen – im Menü klappt dann ein Untermenü auf.

☰ Menü & Untermenüs➕ Neue Seite

🧱 Eigene Bausteine hinzufügen

An jede Seite können Sie zusätzliche Bausteine anhängen – Überschrift, Text, Preistabelle, Spalten/Grid, Bild, Galerie, Karten, Akkordeon, Produkt-Katalog, Kontaktformular, Kontakt-Kanäle u. v. m. In der Seiten-Liste bei der gewünschten Seite auf „➕ Bausteine".

Zu den Seiten

📝 Blog – Beiträge mit Vorschau

Schreiben Sie Beiträge, die automatisch als Übersicht mit Vorschau-Karten erscheinen (Titelbild, Datum, Kategorie, Anriss) – inklusive Kategorie-Filter. Jeder Artikel bekommt automatisch ein Inhaltsverzeichnis und die Lesezeit. Über „➕ Neuer Artikel" legen Sie einen Beitrag an und schreiben ihn wie eine normale Seite. Die Reihenfolge der Beiträge auf der Übersicht bestimmen Sie selbst: in der Artikel-Liste mit den Pfeilen ↑ ↓ jeden Beitrag nach oben oder unten schieben (ohne eigene Reihenfolge = neueste zuerst). Beim Titelbild wählen Sie mit dem 🎯 Fokuspunkt den Bildausschnitt für die Vorschau – ziehen Sie den Punkt auf das Wichtigste (z. B. das Gesicht), dann wird das Bild auf Übersicht und im Artikel passend zugeschnitten. Der Banner der Blog-Übersicht sieht jetzt aus wie die anderen Seitenbanner: die kleine goldene Überschrift bekommt automatisch die Zierstriche links und rechts. Unter „Einstellungen" das Feld „Kleine Überschrift im Banner" füllen (z. B. „Blog"). Dort lässt sich mit einem Haken auch die Brotkrümel-Navigation „Home / Blog" unten im Banner einschalten – der Home-Link und der Text sind danach direkt im Live-Editor änderbar. Banner-Titel und -Text sind ebenfalls im Live-Editor anpassbar.

📝 Zum Blog

🧩 Abschnitte & Bausteine im Live-Editor

Direkt auf der Seite bauen Sie ganze Abschnitte: „➕ Abschnitt" öffnet eine Vorlagen-Galerie (Text, 2/3/4 Spalten, Banner, Kundenstimme, Text+Bild, Galerie, Bild-Karten, Zahlen/Statistik, Ablauf-Schritte, Vorteile mit Icons, Häufige Fragen, Aufruf-Band) – einfach auswählen und nur noch füllen. „🔀 Umformen" wandelt einen bestehenden Abschnitt in ein anderes Layout um (Texte bleiben erhalten). „📋 Zwischenablage" sichert einen Abschnitt (z. B. vor dem Löschen) zum späteren Wieder-Einsetzen. In Karten-Reihen fügen Sie mit „➕ Text" bzw. „➕ Bild" einzelne Karten hinzu, stellen Spalten (2/3/4/6), Handy-Spalten, Ausrichtung und Abstand ein und ziehen Karten per an ihren Platz. Welches Symbol was macht, steht unten in der Werkzeug-Legende.

🖊 Live-Bearbeitung öffnen

✍️ Texte ändern (im Backend)

Alle Texte jeder Seite als reine Textfelder ändern – praktisch für längere Texte. Formatierung, Ausrichtung und Größe bleiben erhalten. Über die Seiten-Liste („✎ Texte") springen Sie direkt zur passenden Seite.

Texte bearbeiten

🖼 Bilder & Medien

Bilder hochladen – sie werden automatisch verkleinert, in WebP umgewandelt und von Metadaten befreit (kleiner & schneller). Danach überall in der Bibliothek verfügbar. Auch das Logo tauschen Sie hier (JPG/PNG/SVG).

Medien-Bibliothek

🎨 Kopf (Header), Logo & Design

Kopf-Layout wählen (Logo links / oben mittig / gestapelt / mittig in einer Zeile), Logo-Größe einstellen, Logo-Farbe bei SVG-Logos, sowie den Hell-/Dunkel-Umschalter aktivieren.

Einstellungen → Logo & Design

🌍 Sprachen (mehrsprachige Website)

Weitere Sprachen fügen Sie selbst hinzu: Einstellungen → „🌐 Sprachen". Die erste Sprache ist die Hauptsprache. Aktivieren Sie z. B. Englisch, erscheint oben im Menü ein Umschalter – Sie wählen dessen Darstellung (Kürzel DE/EN, Sprachname Deutsch/English, Flagge 🇩🇪 🇬🇧 oder eine Kombination) – und alle Seiten werden als Kopie unter /en/ angelegt. Diese übersetzen Sie dann Feld für Feld selbst; noch nicht Übersetztes zeigt vorerst den deutschen Text. (Automatisch übersetzen kommt als buchbares Zusatz-Plugin.)

Einstellungen → Sprachen

📇 Kontakt-Kanäle & Kontaktformular

Zwei fertige Bausteine für Ihre Kontaktseite: das Kontaktformular (echter E-Mail-Versand, eigene Betreff-Themen) und die Kontakt-Kanäle (WhatsApp, E-Mail, Telefon und Ihre Social-Profile als Karten, plus optionale Standort-/Hinweis-Karte). Beide ziehen Nummer/E-Mail/Social automatisch aus den Einstellungen. Am Handy erscheint zusätzlich unten eine Kontakt-Leiste (per Erweiterungen aktivierbar). Auswahlmenü selbst pflegen: Klicken Sie im Live-Editor direkt auf die Auswahlliste im Kontaktformular (z. B. „Anliegen/Leistung") – dann öffnet sich ein kleiner Editor, in dem Sie die Punkte (einen pro Zeile) hinzufügen, umbenennen, sortieren oder entfernen.

Zu den SeitenEinstellungen

🕘 Versionen & Sicherungen

Jederzeit einen Zwischenstand sichern und per Klick wiederherstellen. Vor dem Löschen/Verschieben/Duplizieren von Blöcken oder Abschnitten wird automatisch gesichert – so geht nichts verloren.

Versionen

✉️ Kontaktformular & Nachrichten

Anfragen aus dem Kontaktformular landen hier (zusätzlich zur E-Mail). Empfänger-Adresse und E-Mail-Versand stellen Sie in den Einstellungen ein.

NachrichtenE-Mail-Einstellungen

🍪 Cookies & Google

DSGVO-Cookie-Banner, Google Analytics & Search Console vorbereiten und die Sichtbarkeit bei Google (noindex) schalten.

Einstellungen → Cookies & Statistik

🎫 Wünsche & Probleme melden

Einen Wunsch, Defekt, ein Problem oder eine Frage direkt an TwoPixels senden – optional mit Screenshot, auf dem Sie markieren können. Wir bekommen sofort eine Nachricht und kümmern uns.

Wünsche & Probleme

🎛 Werkzeug-Legende – welches Symbol macht was

Jedes Symbol aus der Bearbeiten-Leiste im Live-Editor, kurz erklärt. Die Erklärung steht hier im Backend – die Bearbeiten-Leiste selbst bleibt aufgeräumt.

✍️ Text bearbeiten (Text anklicken)

F Fett
Markierten Text fett machen.
K Kursiv
Markierten Text kursiv (schräg) machen.
U Unterstrichen
Markierten Text unterstreichen.
⬅ ⬛ ➡ Ausrichtung
Text linksbündig, zentriert oder rechtsbündig.
A− A+ Schriftgröße
Text kleiner bzw. größer machen.
Schriftart ▾ Schriftart
Eine andere Schriftart für diesen Text wählen.
„ Zitat Zitat-Stil (Kundenstimme)
Diesen Textblock wie eine Kundenstimme darstellen: elegante Serifenschrift, kursiv, mit einem großen Anführungszeichen davor – passend zum Kundenstimmen-Block. Nochmal klicken schaltet den Zitat-Stil wieder aus.
🖌 Format-Pinsel
Die Formatierung eines Textes „aufnehmen" und auf einen anderen Text übertragen.
🔗 Verlinken
Markierte Wörter zu einem anklickbaren Link machen.
🎯 Link-/Button-Ziel
Das Ziel eines Buttons/Links ändern (interne Seite oder externe Adresse, optional neuer Tab).
🎤 Diktieren
Text einsprechen statt tippen (Mikrofon).
🗑 Block löschen
Diesen Block/diese Karte entfernen – mit sofortigem „Rückgängig".

🧩 Abschnitts-Leiste (oben an jedem Abschnitt)

↑ ↓ Verschieben
Den ganzen Abschnitt nach oben bzw. unten schieben.
+ (zwischen Abschnitten) Hier einfügen
Die dünne „+ Abschnitt hier einfügen"-Leiste erscheint zwischen den Abschnitten (auch ganz oben) – damit fügen Sie einen neuen Abschnitt genau an dieser Stelle ein.
➕ Abschnitt Abschnitt einfügen
Einen fertigen Abschnitt aus der Vorlagen-Galerie einfügen (Text, Spalten, Banner, Kundenstimme, Text+Bild, Galerie, Bild-Karten, Zahlen/Statistik, Ablauf-Schritte, Vorteile mit Icons, Häufige Fragen, Aufruf-Band) – danach nur noch füllen.
🔀 Umformen Layout wandeln
Diesen Abschnitt in ein anderes Layout umwandeln. Vorhandene Texte werden übernommen.
Duplizieren
Eine Kopie dieses Abschnitts anlegen (inkl. Inhalt und Übersetzung). Die <b>Bilder werden eigenständig kopiert</b> – tauschen Sie im Duplikat ein Bild, ändert sich <b>nur das Duplikat</b>, nicht das Original oder weitere Kopien.
📋 Zwischenablage
Den Abschnitt sichern/parken (z. B. bevor Sie ihn löschen) und an anderer Stelle wieder einsetzen.
🎨 Abschnitt gestalten
Alles rund um einen Abschnitt: Hintergrund (Farbe oder Bild), Textfarbe (Automatisch/Hell/Dunkel/eigene), Abstand oben/unten (Enger/Standard/Weiter), Inhaltsbreite (Schmal/Normal/Breit/Vollbreit) und ein sanftes Einblenden beim Scrollen (Effekt an/aus). „Ohne" setzt den Hintergrund zurück.
Abschnitt löschen
Diesen Abschnitt entfernen (vorher wird automatisch gesichert).

🃏 Karten-/Block-Leiste (an einer Karte oder einem Bild in einer Reihe)

Ziehen
Die Karte mit gedrückter Maus/Fingern an eine andere Position ziehen.
↑ ↓ Vor/zurück
Die Karte innerhalb der Reihe nach vorne bzw. hinten schieben.
Breite 1 · 2 · 3 Kachelbreite
Wie viele Spalten diese Karte breit ist.
Karte löschen
Nur diese eine Karte entfernen (die Reihe bleibt).

▦ Reihen-Steuerung (oben rechts an einer Karten-Reihe)

Spalten 2·3·4·6 Spalten (Desktop)
Wie viele Karten am Computer nebeneinander stehen.
Mobil 1·2 Spalten (Handy)
Wie viele Karten auf dem Handy nebeneinander stehen.
⬅ ⬛ ➡ Ausrichtung
Die Karten links, mittig oder rechts ausrichten.
− + Abstand
Den Abstand zwischen den Karten enger bzw. weiter stellen.
➕ Text Text-Karte
Der Reihe eine neue Karte mit Überschrift und Text hinzufügen.
➕ Bild Bild-Karte
Der Reihe eine neue Karte mit Bild (Platzhalter) hinzufügen – Bild danach per Klick tauschen.

🖼 Bilder

Bild anklicken Tauschen/Hochladen
Ein Bild austauschen – aus der Bibliothek wählen oder neu hochladen (mit Prozent-Anzeige beim Hochladen).
Text neben einem Bild Text bearbeiten (Bild+Text)
In Abschnitten mit Bild und Text (z. B. Bild links, Text rechts) klicken Sie den Text direkt an, um ihn zu ändern – nur ein Klick auf das Bild selbst öffnet den Bild-Tausch. So lässt sich die Textspalte immer bearbeiten.
🖼 Vorschaubild (Blog) Titelbild je Beitrag
Auf der Blog-Übersicht das Vorschaubild eines Beitrags anklicken und ein Titelbild wählen/hochladen – das geht jetzt auch für Beiträge, die noch gar kein Titelbild haben.
✏️ Bild bearbeiten Zuschneiden & Anpassen
Im Fenster „Bild ändern" auf „✏️ Bild bearbeiten": Bild zuschneiden (Rahmen ziehen), drehen, spiegeln sowie Helligkeit, Kontrast und Farbe anpassen – dann speichern.
🎯 Ausschnitt Bildausschnitt (Fokuspunkt)
Im Fenster „Bild ändern" auf „🎯 Ausschnitt": den Punkt auf das Wichtigste ziehen (z. B. das Gesicht). Legt für JEDES Bild fest, welcher Teil sichtbar bleibt, wenn es zugeschnitten angezeigt wird (Vorschau/Kacheln/Banner) – so wie der Fokuspunkt beim Blog-Titelbild.
Bild auf Bild ziehen Tauschen
Zwei Bilder miteinander vertauschen, indem Sie eins auf das andere ziehen.
🎯 Fokuspunkt Bildausschnitt (Blog)
Beim Blog-Titelbild den Punkt auf das Wichtigste ziehen – legt fest, welcher Ausschnitt in der Vorschau gezeigt wird.

🎨 Kopf (Header)

A− A+ Logo-Größe
Das Logo im Kopf kleiner bzw. größer machen.

🛟 Immer sichtbar

↩ Zurück Rückgängig
Die letzte strukturelle Änderung (Löschen/Verschieben/Umsortieren) rückgängig machen.
👁 Vorschau Ansehen
Die Seite ohne Bearbeiten-Werkzeuge ansehen (so, wie Besucher sie sehen). Mit „✎ Weiter bearbeiten" zurück.
📄 Seite wählen Seiten-Umschalter
Oben in der Bearbeiten-Leiste jede andere Seite Ihrer Website direkt zum Bearbeiten öffnen.
🕘 Verlauf Versionen
Einen früheren Stand ansehen und wiederherstellen.
💾 Sichern Wiederherstellungspunkt
Den aktuellen Stand als Sicherung ablegen.
🎫 Melden Wunsch/Problem
Uns direkt einen Wunsch oder ein Problem melden (optional mit Screenshot).
✓ Alles gesichert Status-Anzeige
Oben mittig sehen Sie stets, ob gerade gespeichert/aktualisiert wird oder alles gesichert ist.

Tipp: Vor größeren Änderungen unter „Versionen" einen Stand sichern. Diese Anleitung passt sich an, wenn neue Funktionen dazukommen.