Octibiz
Demo

Durchsucht Website und Dokumentation gemeinsam. Enter zeigt alle Treffer, Esc schließt.

Webbaukasten

Ansicht Webbaukasten in Octibiz

Überblick

Der Baukasten baut Flächen aus Bausteinen: Seiten, wiederverwendbare Vorlagen (Kopf, Fuß, Seitentypen) und Popups. Der Aufbau ist dabei nicht Markup, sondern ein Baum aus Daten — das Markup entsteht daraus. Deshalb sehen dieselben Inhalte in der Vorschau und auf der Seite gleich aus, und ein Baustein lässt sich umbauen, ohne dass Text verloren geht.

Der Editor trennt zwei Arbeiten, die oft verwechselt werden: Inhalt (Text und Bilder in bestehenden Bausteinen) und Stil & Struktur (Bausteine hinzufügen, verschieben, gestalten). Beide haben eigene Rechte — so kann jemand Texte pflegen, ohne das Layout ändern zu können.

Kernaufgaben

Eine Fläche anlegen und bearbeiten. Aus der Übersicht heraus legen Sie eine Seite an und öffnen den Editor. Bausteine werden im Baum links ausgewählt, rechts eingestellt.

Vorlagen nutzen. Kopf und Fuß sind Vorlagen; wer sie ändert, ändert sie überall. Anzeige- Bedingungen steuern, wo eine Vorlage greift.

Stil-Klassen statt Einzelfälle. Eine Stil-Klasse fasst Gestaltung zusammen und wirkt auf jede Fläche, die sie nutzt. Das ist der Unterschied zwischen einer wartbaren Site und hundert Einzelfällen.

Aus der Bibliothek arbeiten. Die Bibliothek hält wiederverwendbare Vorlagen und globale Elemente, samt Export und Import.

Veröffentlichen. Veröffentlichen kann sofort geschehen oder geplant werden; ein Zurückrollen auf einen früheren Stand ist möglich.

In weitere Sprachen übersetzen. Eine Seite trägt eine Standardsprache und weitere Sprachen; jeder Text hat je Sprache eine eigene Fassung, ohne sie zeigt die Seite die Standardsprache. Steht der Editor auf einer weiteren Sprache, schlägt Übersetzung vorschlagen (KI) (Funken-Symbol neben der Sprachauswahl) für alle Texte, die dort noch fehlen, eine Übersetzung vor — Text- und Mehrzeiler-Felder, Listen-Einträge und Fließtext. Sie sehen je Text Ausgangstext und Vorschlag, können den Vorschlag ändern und haken ab, was übernommen wird. Bereits gepflegte Übersetzungen bleiben unberührt — vorgeschlagen und geschrieben wird nur, wo die Sprache noch leer ist. Kennungen wie Icon-Namen oder Adressen gehen nicht an die KI. Ein Lauf umfasst höchstens 150 Texte; der Rest folgt im nächsten. Die Funktion braucht die eingeschaltete KI (Einstellungen → KI) und das Recht builder.page.update; neuen Fließtext übernimmt nur, wer auch builder.style.edit hat, gesperrte Bausteine nur mit builder.lock.override.

Werkzeuge im Editor

Mit einer Start-Vorlage beginnen. In der Bibliothek stehen unter Start-Vorlagen fertige Seiten (Produkt-Landingpage, Über uns), Abschnitte (Kopfbereich, Vorteile, Häufige Fragen, Kundenstimme, Handlungsaufruf) und Erscheinungsbilder (Klar & hell, Warm & freundlich, Dunkel & elegant). Übernehmen legt eine neue Seite oder eine neue Gestaltung an, die Sie danach frei ändern — die Vorlage selbst bleibt unberührt. Die Abschnitte finden Sie im Editor auch in der Baustein-Leiste unter Start-Abschnitte; ein Klick fügt sie an der gewählten Stelle ein. Seiten anlegen braucht builder.page.create, Gestaltungen builder.theme.manage, Abschnitte einfügen builder.style.edit.

Stil von einem Baustein auf einen anderen übertragen. Im Kontextmenü eines Bausteins (rechte Maustaste) stehen Stil kopieren und Stil einfügen, über die Tastatur Strg+Alt+C und Strg+Alt+V (am Mac ⌘+Alt+C/V). Übertragen werden Gestaltung und Stil-Klassen, nie der Inhalt. Ein gesperrter Baustein nimmt einen Stil nur mit builder.lock.override an. Beide Kürzel stehen in der Kürzel-Übersicht (Taste ?); während Sie in einem Eingabefeld oder einer Auswahlliste schreiben, lösen sie nicht aus.

Ohne Maus arbeiten. Der Editor läuft im Vollbild: Die Tabulator-Taste bleibt in seinen Werkzeugen, statt durch die verdeckte Navigation der Anwendung zu wandern, und Bildschirmleser lesen nur den Editor vor. Jeder Knopf trägt einen Namen; die Arbeitsfläche ist ein eigener Bereich, den Sie mit der Tastatur ansteuern und rollen können.

Prüfhinweise lesen. Die Leiste Prüfungen meldet während des Bauens, was die fertige Seite schlechter macht — der Klick auf einen Hinweis wählt den betroffenen Baustein. Neben Suchmaschinen- und Barrierefreiheits-Hinweisen stehen dort:

  • Zu viele Elemente im Erzeugnis. Die Seite überschreitet die Höchstzahl an Elementen; Datenlisten

zählen mit ihrer vollen Eintragszahl. Viele Datenlisten auf einer Fläche werden eigens genannt, weil jede Liste bei jedem Aufruf eine eigene Abfrage ist.

  • Abgelöster Baustein. Ein Baustein, den die Leiste nicht mehr anbietet (etwa die frühere

Sammlungs-Liste), wird weiter ausgeliefert; der Hinweis nennt den Nachfolger.

  • Zu wenig Kontrast an einem Baustein. Setzt ein Baustein eigene Schrift- oder Flächenfarbe, wird

der Kontrast zum Text darunter geprüft — im hellen und im dunklen Farbschema. Nötig ist ein Verhältnis von 4,5, bei großen Überschriften (H1, H2) von 3. Verläufe und frei geschriebene Farbangaben lassen sich nicht berechnen und bleiben ungeprüft.

Kein Hinweis verhindert das Veröffentlichen.

Felder aus verknüpften Einträgen zeigen. Hat eine Sammlung ein Verweis-Feld (etwa „Autor"), bieten dynamische Werte und Datenlisten dessen Felder aufgeklappt an: Autor → Name, Autor → Bild. Die Seite zeigt dann den Wert des verknüpften Eintrags.

Eine Stil-Klasse zurücksetzen. Im Klassen-Verwalter stellt Änderungen zurücksetzen den Stand beim Öffnen der Klasse wieder her — Klassen-Änderungen stehen nicht im Rückgängig-Verlauf.

Festlegen, auf welchen Websites ein Popup erscheint. Unter Auslöser & Regeln wählen Sie bei Nur auf diesen Websites, wo das Popup erscheint. Ohne gewählte Website erscheint es nirgends — der Editor weist dann darauf hin. So taucht ein neues Popup nie unbeabsichtigt auf allen Websites einer Marke auf.

Eine Vorlage nur in einem Zeitraum zeigen. Die Anzeige-Bedingung Zeitraum nimmt Beginn und Ende, eine Seite darf offen bleiben — etwa ein Aktions-Kopfbereich für die Aktionswoche. Im Zeitraum löst die Vorlage die Dauer-Vorlage ab. Zur Grenze wechselt die Website von selbst; zwischengespeicherte Seiten laufen genau dort ab.

Was der Baukasten von sich aus einhält. Elementzahl, Gewicht und Ladezeit des Erzeugnisses sind feste Grenzen für die drei Seitentypen Landingpage, Beitrag und Archiv, und die ausgelieferten Seiten werden regelmäßig gegen WCAG 2.1 AA geprüft. Wird eine Grenze gerissen, fällt das in der Prüfstrecke auf, nicht erst beim Besucher.

Felder im Detail

Der Baum ist die Wahrheit, das Markup ein Erzeugnis. Sie bearbeiten Bausteine, keine Quelltexte; die Seite wird daraus erzeugt.

Seite

FeldPflichtWerte / FormatWas es bewirkt
Name namejaTextWie die Seite intern heißt.
Art kindjaSeite, Vorlage, BausteinWofür sie steht. Eine Vorlage gibt vielen Seiten dieselbe Gestalt; ein Baustein ist ein wiederverwendbares Stück.
Vorlagenart templateKindbei VorlagenAuswahlFür welche Inhaltsart die Vorlage gilt.
Adresse slugjaTextDer Teil der öffentlichen Adresse. Nicht mehr ändern, sobald die Seite verlinkt ist — sonst laufen alle Verweise ins Leere.
Sprache locale / Sprachen localesneinSprachkennungenIn welchen Sprachen die Seite besteht.
Marke brandIdneineine Ihrer MarkenFür welche Marke.
Gestaltung themeUlidneineingerichtete GestaltungFarben, Schriften, Abstände.
Bausteine blocksjaBaum aus BausteinenDer Inhalt der Seite. Jeder Baustein trägt seine eigene Gestaltung; das Markup entsteht daraus und wird nie von Hand geschrieben.
Anzeigebedingungen displayConditionsneinBedingungenWann ein Bereich sichtbar ist — Sprache, Gerät, Zeitraum.
Einblendung popupConfigneinStrukturWann, wie und auf welchen Websites ein Overlay erscheint — nach Zeit, beim Verlassen, einmal je Besucher. Ohne die Begrenzung „einmal je Besucher" wird aus einer Einblendung schnell eine Belästigung.

Suchmaschinen und Vorschau

FeldWerte / FormatWas es bewirkt
Seitentitel metaTitleTextWas im Reiter des Browsers und in Suchergebnissen als Überschrift steht.
Beschreibung metaDescriptionTextDer Text unter dem Treffer. Er entscheidet über den Klick, nicht über die Platzierung.
Kanonische Adresse canonicalUrlAdresseWelche Adresse als die eigentliche gilt, wenn derselbe Inhalt mehrfach erreichbar ist.
Indexieren robotsIndex / Verweisen folgen robotsFollowJa/NeinOb die Seite in Suchergebnisse darf und ob ihren Verweisen gefolgt wird. Ein versehentlich abgeschaltetes Indexieren nimmt die Seite still aus der Suche — und niemand merkt es, bis der Verkehr wegbleibt.
Vorschaubild ogImageFileUlidBilddateiWas beim Teilen in Chats und Netzwerken erscheint.
Vorschaubild als Adresse ogImageUrlAdresseEin frei eingetragenes Teilen-Bild. Es schlägt das hochgeladene ogImageFileUlid — steht hier etwas, wird die gewählte Datei nicht verwendet.
Strukturierte Daten structuredDataType, structuredDataJsonArt und StrukturZusatzangaben für Suchmaschinen — Veranstaltung, Produkt, Anleitung. Sie ermöglichen die erweiterte Darstellung im Suchergebnis.
Übersetzte SEO-Angaben seoI18nje SpracheTitel und Beschreibung in den weiteren Sprachen. Ohne sie erscheint die Ausgangssprache im fremdsprachigen Suchergebnis.

Nur über Schnittstelle und Automation

FeldWerte / FormatWas es bewirkt
versionZahlDer Stand des Entwurfs-Baums. Beim Speichern schicken Sie den Stand mit, den Sie vorgefunden haben; ist er inzwischen weiter, war ein zweiter Bearbeiter schneller — die Änderung wird abgewiesen, statt seine zu überschreiben. Ohne Angabe wird nicht geprüft. Der Stand steigt nur beim Ändern des Baums; Suchmaschinen-Angaben, Veröffentlichen und Fremdcode lassen ihn stehen.
POST …/pages/{ulid}/ai/translation-suggestions · POST …/pages/{ulid}/translationstargetLocale, items [{ref, text}], expectedVersionDer KI-Übersetzungsvorschlag und seine Übernahme als eigene Schritte: der Vorschlag schreibt nichts, die Übernahme schreibt nur bestätigte Texte in leere Sprachen. So kann auch eine Automation oder ein KI-Werkzeug übersetzen, ohne Gepflegtes zu überschreiben.

Einstellungen & Rechte

  • Sehen: builder.page.view · Anlegen: builder.page.create · Inhalte: builder.page.update
  • Stil & Struktur: builder.style.edit · Stil-Klassen: builder.class.view/builder.class.manage
  • Vorlagen: builder.template.manage · Popups: builder.popup.manage
  • Design-Token und Bruchpunkte (Einstellungen → Baukasten-Themes): builder.theme.manage
  • Bibliothek: builder.library.manage · Veröffentlichen: builder.page.publish
  • Gesperrte Bausteine: builder.lock.override

Modul-Flag: module.builder.

FAQ & Fehlerbilder

Ich kann einen Baustein nicht verschieben. Entweder fehlt builder.style.edit, oder der Baustein ist gesperrt — Sperren löst nur builder.lock.override.

Eine Änderung ist auf der Seite nicht sichtbar. Prüfen Sie, ob veröffentlicht wurde. Entwürfe bleiben im Editor.

Eine Stil-Änderung wirkt an mehreren Stellen. Das ist die Absicht einer Stil-Klasse. Für einen Einzelfall setzen Sie die Gestaltung am Element statt an der Klasse.

builder.builder · Gilt ab Version 0.5.6