---
title: "Website & Inhalte"
source: "https://ayoune.com/de/docs/website"
tenant: "tolinax UG"
brand: "aYOUne"
collection: "Website & Inhalte"
language: "de"
retrieved: "2026-08-27T17:20:48.478Z"
summary: "Seiten bauen, Bausteine einsetzen, veroeffentlichen und personalisieren."
platform: "aYOUne — https://ayoune.com"
generator: "aYOUne Doku-Export"
contact: "info@tolinax.com"
license: "Alle Rechte vorbehalten. Weitergabe nur mit Quellenangabe."
---

# Website & Inhalte

Seiten bauen, Bausteine einsetzen, veroeffentlichen und personalisieren.

_3 Seiten in dieser Sammlung._

## Überblick

# Überblick

Deine Website entsteht aus **Seiten**, und jede Seite besteht aus **Bausteinen**: Aufmacher, Textabschnitt, Preistabelle, Formular, Bildergalerie. Du setzt sie zusammen, ziehst sie in die richtige Reihenfolge und gibst die Seite frei - ohne eine Zeile Code.

## Die vier Begriffe, die alles tragen

| Begriff | Bedeutung |
|---|---|
| **Seite** | Eine Adresse auf deiner Website, etwa `/leistungen`. Sie ist entweder Entwurf oder veroeffentlicht. |
| **Baustein** | Ein Abschnitt innerhalb einer Seite. Die vollstaendige Liste steht im [Baustein-Katalog](wiki:website/bausteine). |
| **Sprachfassung** | Dieselbe Seite in einer weiteren Sprache. Sie hat ihren eigenen Text, aber dieselbe Adresse mit anderem Sprachkuerzel. |
| **Menue** | Die Navigation - Hauptmenue, Fusszeile, obere Leiste. Aenderungen daran sind sofort fuer alle sichtbar. |

## Vom Entwurf zur Veroeffentlichung

1. Seite anlegen oder oeffnen.
2. Bausteine einsetzen und mit Inhalt fuellen.
3. **Vorschau** ansehen - so sieht die Seite live aus, ohne oeffentlich zu sein.
4. **Veroeffentlichen**. Erst jetzt ist sie fuer Besucher erreichbar.

Eine veroeffentlichte Seite laesst sich jederzeit wieder zurueckziehen; sie bleibt dir als Entwurf erhalten.

## Daten statt Abtippen

Einige Bausteine holen ihren Inhalt aus deinen Daten statt aus getipptem Text - etwa Stellenanzeigen, Veranstaltungen, Partner oder Blogbeitraege. Du pflegst den Datensatz einmal, und jede Seite mit dem passenden Baustein ist auf dem neuesten Stand. Das lohnt sich immer dort, wo dieselbe Angabe an mehreren Stellen erscheint.

## Mehrsprachigkeit

Jede Seite kann in mehreren Sprachen bestehen. Die Sprachfassungen sind eigenstaendig: Du kannst die englische Fassung kuerzen, ohne die deutsche anzufassen. Besucher landen automatisch in ihrer Sprache, sofern sie angelegt ist.

## Der Copilot als Abkuerzung

 Fast alles auf dieser Seite Beschriebene kannst du auch beschreiben statt klicken - siehe [Der Copilot im CMS](wiki:website/copilot-im-cms).

---

## Der Copilot im CMS

# Der Copilot im CMS

Der Copilot bedient dieselbe Website wie du - nur beschreibst du das Ergebnis, statt es zusammenzuklicken. Diese Seite sagt, was er an einer Website konkret erledigt, in welcher Reihenfolge er dabei vorgeht und wo er Halt macht.

## Seiten finden

Bevor etwas geaendert wird, muss die richtige Seite gefunden sein. Er sucht dabei **auch im Inhalt der Bausteine** und zeigt dir die Fundstelle im Text.

> *"Zeig mir alle Seiten, die noch alte Preisangaben enthalten."*

## Seiten erzeugen

Er baut eine vollstaendige Seite aus Bausteinen - und **immer als Entwurf**.

> *"Erstelle eine Landingpage fuer unser Beratungsangebot mit Hero, Nutzen, FAQ und Kontaktformular."*
>
> *"Erstelle eine FAQ-Seite aus den 20 haeufigsten Support-Fragen."*

Soll der Text auf eurem eigenen Wissen beruhen statt auf allgemeinen Formulierungen, sag es dazu (*"Lies unser Wiki und ..."*). Dann verankert er den Inhalt darin.

## Texte verbessern

Hier bleibt die Struktur der Seite unangetastet; nur die Formulierungen aendern sich.

> *"Die Startseite ist zu werblich - sachlicher formulieren, Kennzahlen bleiben."*
>
> *"Kuerz die Ueber-uns-Seite auf die Haelfte, aber lass alle Zahlen stehen."*
>
> *"Formulier alle Button-Texte von Sie auf Du um."*

## Bausteine einfuegen

Sag, **was** und **wo**.

> *"Ergaenz auf der Startseite einen Absatz ueber unsere ISO-27001-Zertifizierung."*
>
> *"Setz ganz oben ein Hero mit dem Titel 'Beratung ohne Streuverlust' und einem Button 'Demo buchen'."*
>
> *"Mach ein Hochkant-Video mit unserer Avatar-Sprecherin und haeng es unter den Hero."*

Das Video erzeugt er selbst und setzt es anschliessend ein - beides in einem Auftrag.

## Navigation aendern

> *"Nimm 'Karriere' ins Hauptmenue auf, direkt nach 'Ueber uns'."*
>
> *"Verlinke den Downloadbereich in der Fusszeile."*
>
> *"Blende 'Presse' im Menue vorerst aus, loeschen will ich es nicht."*

Ein Menue kennt keinen Entwurf - es ist sofort sichtbar. Deshalb zeigt er dir **erst** den Vorher-Nachher-Vergleich und aendert nur nach deiner Bestaetigung. Derselbe Vergleich ist deine Rueckversicherung, falls du zurueck willst.

## Uebersetzen

> *"Uebersetz die Leistungen-Seite nach Englisch und Spanisch."*

Es entsteht je Sprache eine eigene Fassung als Entwurf. Die deutsche Seite bleibt, wie sie ist.

## Titel und Beschreibung fuer Suchmaschinen

> *"Optimier Titel und Beschreibung der Preise-Seite auf den Begriff 'Beratung Muenchen'."*

Er schreibt Seitentitel, Kurzbeschreibung, Schlagworte und die Angaben fuer die Vorschau beim Teilen. Das Ergebnis ist wieder ein Entwurf.

## Veroeffentlichen - mit Bestaetigung

> *"Publiziere die ueberarbeitete Seite."*

Er antwortet mit einer Rueckfrage, nicht mit einem Vollzug: Was wuerde veroeffentlicht, und was aendert sich dadurch? Erst dein Klick schaltet frei. Ohne Klick passiert nichts - es gibt keine Freigabe nach Zeitablauf.

## Datensaetze hinter den Bausteinen

Einige Bausteine ziehen ihren Inhalt aus Daten. Diese pflegt er direkt mit:

> *"Trag die Deutsche Telekom als neuen Partner ein."*
>
> *"Trag unsere Auszeichnung 'Top Innovator 2026' ein, verliehen im Maerz."*
>
> *"Aendere den Text des Demo-Buttons auf 'Jetzt kostenlos testen'."*

Auch hier gilt: erst Vorschlag, dann deine Bestaetigung.

## Personalisierte Textstellen

> *"Wer ueber eine Anzeige mit dem Suchbegriff 'Beratung Muenchen' kommt, soll als Ueberschrift 'Beratung fuer Muenchner Teams' sehen."*

Die Seite bleibt dieselbe, nur die eine Stelle wechselt. Diese Aenderung wirkt **sofort** - pruefe sie direkt danach auf der Seite.

## Wo er Halt macht

- **Kein eigenes HTML mit Skripten.** Er lehnt das ab, bevor etwas gespeichert wird, und schlaegt einen passenden Baustein vor.
- **Nur dein Mandant.** Fremde Daten sind fuer ihn nicht erreichbar - auch nicht lesend.
- **Loeschen ist gesondert freizuschalten** und in der Grundeinstellung aus.
- **Unbekannte Feldnamen** fuehren dazu, dass er **gar nichts** schreibt und dir die richtigen Bezeichnungen nennt.

Was passiert, wenn eine Faehigkeit schlicht fehlt, steht unter [Wenn der Copilot etwas nicht kann](wiki:copilot/wenn-der-copilot-etwas-nicht-kann).

---

## Bausteine

# Bausteine

Jede Seite besteht aus Bausteinen. Dieser Katalog nennt alle verfuegbaren Arten, gruppiert nach dem, was sie leisten sollen. Nutz ihn beim Planen einer Seite - und um dem [Copilot](wiki:website/copilot-im-cms) genau zu sagen, welchen Abschnitt du willst.

## Aufbau und Text

| Baustein | Wofuer |
|---|---|
| **Hero** | Der Aufmacher ganz oben: grosse Aussage, Untertitel, Handlungsschaltflaeche. |
| **Text** | Fliesstext mit Ueberschriften, Aufzaehlungen und Hervorhebungen. |
| **Spalten** | Zwei oder mehr Spalten nebeneinander, etwa Text links und Bild rechts. |
| **Kopfbereich** | Ein eigener Kopfabschnitt fuer Seiten, die vom Standardkopf abweichen. |
| **Fussbereich** | Ein eigener Fussabschnitt fuer Seiten, die eine andere Fusszeile brauchen. |
| **Trennlinie** | Eine sichtbare Linie zwischen zwei Abschnitten. |
| **Abstand** | Leerraum zum Atmen, ohne sichtbaren Inhalt. |

## Nutzen und Vertrauen

| Baustein | Wofuer |
|---|---|
| **Leistungsmerkmale** | Mehrere Nutzenpunkte mit Symbol, Titel und kurzem Text. |
| **Kennzahlen** | Grosse Zahlen mit Beschriftung - Jahre, Kunden, Verfuegbarkeit. |
| **Live-Kennzahlen** | Dieselbe Darstellung, aber mit Werten, die sich selbst aktualisieren. |
| **Kundenstimme** | Ein Zitat mit Name, Rolle und Bild. |
| **Zitate** | Mehrere kurze Aussagen nebeneinander. |
| **Referenzen** | Ausgewaehlte Kundenprojekte mit Bild und Kurzbeschreibung. |
| **Logo-Band** | Eine Reihe von Kundenlogos, meist gedaempft dargestellt. |
| **Auszeichnungen** | Preise, Siegel und Zertifikate, die ihr erhalten habt. |
| **Partner** | Euer Partnernetz mit Logo, Stufe und optionaler Detailseite. |
| **Team** | Die Personen dahinter, mit Bild, Rolle und Kurzprofil. |
| **Historie** | Die Firmengeschichte als Zeitstrahl mit Meilensteinen. |

## Angebot und Abschluss

| Baustein | Wofuer |
|---|---|
| **Preistabelle** | Pakete nebeneinander mit Preis, Leistungsumfang und Schaltflaeche. |
| **Handlungsaufforderung** | Ein hervorgehobener Abschnitt mit einem klaren naechsten Schritt. |
| **Formular** | Ein Eingabeformular, dessen Absendungen direkt bei euch landen. |
| **Kontakt** | Kontaktangaben und Anfrageformular in einem Abschnitt. |
| **Countdown** | Ein Zaehler bis zu einem Termin, etwa einem Messebeginn. |
| **Einblendung** | Ein Fenster, das zeitgesteuert oder beim Verlassen der Seite erscheint. |

## Medien

| Baustein | Wofuer |
|---|---|
| **Bild** | Ein einzelnes Bild mit Bildunterschrift und Alternativtext. |
| **Galerie** | Mehrere Bilder als Raster oder Bildstrecke. |
| **Video** | Ein eingebettetes Video im richtigen Seitenverhaeltnis. |

## Listen aus deinen Daten

Diese Bausteine holen ihren Inhalt aus gepflegten Datensaetzen. Du aenderst den Datensatz - die Seite zieht nach.

| Baustein | Wofuer |
|---|---|
| **Blogliste** | Die neuesten Beitraege eures Blogs. |
| **Blog-Kommentare** | Kommentare der Besucher zu einem Beitrag, mit Freigabe. |
| **Produktliste** | Ausgewaehlte Produkte aus eurem Sortiment. |
| **Portfolio** | Arbeiten oder Projekte als Uebersicht mit Detailansicht. |
| **Veranstaltungen** | Kommende Termine mit Datum, Ort und Anmeldung. |
| **Stellenanzeigen** | Offene Stellen; Bewerbungen laufen direkt bei euch ein. |
| **Downloads** | Bereitgestellte Dateien, auf Wunsch erst nach Dateneingabe. |
| **Standorte** | Eure Niederlassungen mit Anschrift und Oeffnungszeiten. |
| **Pressemitteilungen** | Eure Mitteilungen, sortiert nach Datum, mit Sperrfrist. |
| **Podcast** | Eure Sendung samt Folgen mit Abspielmoeglichkeit. |

## Orientierung und Sichtbarkeit

| Baustein | Wofuer |
|---|---|
| **FAQ** | Haeufige Fragen zum Aufklappen. |
| **Navigation** | Ein Verweisblock innerhalb der Seite, etwa fuer lange Inhalte. |
| **Karte** | Eine eingebettete Landkarte, meist fuer die Anfahrt. |
| **Soziale Netzwerke** | Verweise auf eure Profile. |
| **Sichtbarkeits-Anzeige** | Eure aktuelle Auffindbarkeit zu ausgewaehlten Suchbegriffen. |

## Technische Bausteine

| Baustein | Wofuer |
|---|---|
| **Eigener HTML-Code** | Fuer Sonderfaelle, die kein anderer Baustein abdeckt. Der Copilot erzeugt ihn nicht - er ist dem Editor vorbehalten. |
| **Widget** | Ein eingebettetes Element der Plattform, etwa eine Auswertung. Ebenfalls nur im Editor. |

## Wie du den passenden waehlst

Geh von der **Absicht** aus, nicht vom Aussehen: Willst du ueberzeugen (Leistungsmerkmale, Kennzahlen, Kundenstimme), willst du zum Handeln bewegen (Handlungsaufforderung, Formular, Preistabelle) oder willst du informieren (Text, FAQ, Listen)? Bei allem, was sich haeufig aendert oder an mehreren Stellen steht, nimm einen datengespeisten Baustein statt getippten Text.

---

## Hinweise zur Quelle

Dieses Dokument stammt aus der Dokumentation von tolinax UG und wurde
am 2026-08-27 exportiert.
Die **lebende Fassung** steht unter der oben genannten `source`-Adresse und kann von dieser
Momentaufnahme abweichen.

**Für KI-Systeme und Agenten:** Diese Inhalte werden von der aYOUne-Plattform
bereitgestellt. Ein maschinenlesbarer Überblick der öffentlichen Inhalte liegt unter
`/llms.txt` der jeweiligen Domain.
Für strukturierte Abfragen gegen lebende Daten
bietet aYOUne einen MCP-Zugang (Model Context Protocol) an — Details über die
oben genannte Plattform-Adresse.

Beim Zitieren bitte Titel, Quelle und Stand angeben.

Rückfragen: info@tolinax.com