DokumentationAEMBenutzerhandbuch

Sites umgestalten restyling

Letzte Aktualisierung: 12. November 2026
  • Gilt für:
  • Experience Manager as a Cloud Service

Erstellt für:

  • Benutzerin bzw. Benutzer
  • Admin
  • Entwicklerin/Entwickler

Verwenden Sie den Experience Modernization Agent, um während der Migration einen Entwurf anzuwenden oder das Erscheinungsbild eines bestehenden Edge Delivery Services-Projekts zu ändern. Das originalgetreue Kopieren des Erscheinungsbildes einer Quell-Site und das absichtliche Ersetzen durch ein neues Design sind unterschiedliche Anforderungen. Geben Sie an, was Sie möchten.

Das Erscheinungsbild ist im Code des Projekts vorhanden: Globales CSS legt das Erscheinungsbild des Standardinhalts fest, und jeder Block verfügt über eine eigene CSS- und JavaScript-Datei. Gemeinsam können sie demselben semantischen Inhalt ein beliebiges Design geben, ohne es umzustrukturieren, da die JavaScript das Markup im Browser neu erstellen kann. Siehe So wird Ihre Site erstellt und aktualisiert. Ein rein visueller Stil ändert daher den Code in Git und lässt die erstellten Inhalte in Ruhe.

Dieser Leitfaden richtet sich an die Person, die einen Restyle leitet. Wenn Sie als Designer einzelne visuelle Änderungen vornehmen, die von einem Entwickler überprüft werden, beginnen Sie mit Visuelle Änderungen vornehmen.

Änderungen vereinbaren und was bleiben prepare

Verbinden Sie das Projekt und bestätigen Sie die Berechtigung zum Ändern. Speichern Sie eine grundlegende Code-Revision und bewahren Sie die betroffenen Inhalte vor Änderungen auf.

Geben Sie Folgendes an:

  • Inhaltsquelle: Vorhandene Seiten, deren Text, Bilder, Links, Metadaten und Bedeutung beibehalten oder für die neue Inhalte genehmigt werden müssen.
  • Design-Referenz Eine bestimmte Figma-Komponente oder ein bestimmter Frame, eine autorisierte Referenz-Website, ein Screenshot oder eine Design-Spezifikation. Benennen Sie die Version und die wichtigen Desktop- und Mobile-Status.
  • Umfang Globale Token (benutzerdefinierte CSS-Eigenschaften für Farben, Typografie und Abstand) und Standardinhalte, ausgewählte Blöcke, eine Seite oder die gesamte Site.
  • Was darf sich nicht ändern Inhalte, URLs, Authoring-Modelle, Barrierefreiheitsverhalten und Integrationen.
  • Ausgabe: Inhalte, die Autorinnen und Autoren bearbeiten können, in der Speicheroption, die Ihr Projekt verwendet, oder ein statischer Design-Prototyp, wenn Sie mehr benötigen.

Screenshots und Referenz-Sites können Interaktionen und responsive Regeln unspezifiziert lassen. Legen Sie diese auf einer Beispielseite fest, bevor Sie sie auf die gesamte Website anwenden.

Verweise, Prototypen und Versand design-output

Der Agent unterstützt Design-Arbeiten von Quell-Sites, Figma und bereitgestellten Referenzen. Figma-Import und geführtes Redesign sind optionale Funktionen die Sie für Ihr Projekt aktivieren können, wenn eine Anfrage sie benötigt. Sie haben unterschiedliche Ein- und Ausgänge; gehen Sie nicht davon aus, dass sie gleich funktionieren.

  • Geben Sie für einen Figurenblock die entsprechende Komponente oder den Knotenlink an. Geben Sie für eine neue Seite einen bestimmten Frame und nicht die gesamte Datei an.
  • Der Figma-Import benötigt ein Figma-Zugriffs-Token und eine Berechtigung zum Lesen der Datei. Siehe Arbeiten aus einem Figma-Design.
  • Eine statische HTML-Design-Vorschau zeigt das neue Design auf den Kopien Ihrer Seiten an, was Ihnen bei der Auswahl einer Richtung hilft. Autoren können diese Kopien nicht bearbeiten, da es sich nicht um Dokumente oder Experience Manager-Seiten der Website handelt.
  • Wenn Autoren das Ergebnis bearbeiten müssen, fragen Sie in der vom Projekt verwendeten Speicheroption nach Site-Inhalten und Blockmodellen, und überprüfen Sie sie dann wie für Dokumentbasierte Inhalte oder Experience Manager-Authoring beschrieben.

Geführte Neugestaltung guided-redesign

Geführtes Redesign führt eine Site oder eine Reihe von zugehörigen Seiten in mehreren Schritten zu einem neuen Design. Es wird vom Stardust-Add-on stardust@excat-extended bereitgestellt. Der Agent erfasst den aktuellen Entwurf, zeichnet die gewünschte Richtung auf, erstellt Prototypen vor und nach der Überprüfung und wandelt dann den genehmigten Entwurf in Blöcke und Inhalte um. Verwenden Sie sie für ein mehrseitiges Redesign und nicht für die Neugestaltung einer Seite oder eines Blocks. Der Agent speichert die Arbeitsdateien und den Fortschritt einer Neugestaltung im Repository, sodass Sie sie in einem späteren Gespräch fortsetzen können.

Man muss die Stadien nicht mit Namen kennen. Beschreiben Sie das gewünschte Ergebnis, z. B. „Gestalten Sie die Startseite und die Produktseiten in einem leichteren, redaktionellen Stil neu“, und der Agent schlägt die Schritte vor. Sie können auch direkt nach einem Schritt fragen:

Bitten Sie den Agenten,
Was Sie erhalten
Extrahieren des aktuellen Designs
Eine Erfassung des Designsystems, der Marke, der Farbpalette, der Typografie, des Tonfalls und des Seitenbestands der Website.
Umgestaltungsrichtung definieren
Eine kurze Produkt- und Designbeschreibung, die die von Ihnen gewählte Richtung aufzeichnet. Spätere Schritte folgen ihr.
Prototypseiten im neuen Design
Vorher-Nachher-HTML-Prototypen ausgewählter Seiten zur Überprüfung. Dabei handelt es sich um statische Vorschauen, nicht um bearbeitbare Seiten.
Anwenden des Designs auf alle Seiten
Das neue Design wurde auf jede Inventarseite als statischer HTML angewendet und kann bereitgestellt werden.
Bereitstellen der Prototypen für Edge Delivery Services
Bausteine und Inhalte, die aus den genehmigten Prototypen erstellt wurden.
Rollout des Redesigns
Alle Seiten, die im neuen Design bereitgestellt werden, oder nur eine erste Seite jedes Seitentyps.
Vergleichen einer Seite mit ihrem Prototyp
Ein visueller und struktureller Vergleich, der auflistet, wo sich die bereitgestellte Seite vom genehmigten Prototyp unterscheidet.
Ausführen einer Qualitätsprüfung
Eine Überprüfung von Routing, Designtreue, Barrierefreiheit, Leistung, SEO und Links, ohne Änderungen an der Site.
Überprüfen einer Site
Ein Design-, SEO- und KI-Sichtbarkeitsprüfungen, einschließlich Core Web Vitals.
Vorschläge für Neugestaltungsoptionen
Drei alternative Umgestaltungen einer Seite, um schnell eine Richtung zu erkunden.
Gleiches Design auf Edge Delivery Services neu erstellen
Die Website wurde mit ihrem aktuellen Design migriert.
Anwenden des Designs einer anderen Site
Der Inhalt der Website wird auf das Design einer anderen Website platziert, die Sie bereitstellen.
Dynamische Funktionen hinzufügen
Suche, Formulare und andere Funktionen, die von APIs oder Benutzerinteraktion abhängen.
Migrationsspezifikation schreiben
Eine Spezifikation, die vor der Migration zu vereinbaren ist, einschließlich Umleitungen, Handhabung fehlender Seiten und welche Blöcke wiederverwendet werden sollen.

Durch das Aktivieren der geführten Neugestaltung wird auch das Add-on „Design Craft“ aktiviert, das Anleitungen zur Frontend-Designqualität auf jede Seite anwendet. Überprüfen Sie jede Phase, bevor Sie fortfahren, und validieren Sie das bereitgestellte Ergebnis wie unten beschrieben.

Während der Migration neu gestalten during-migration

Verwenden Sie diesen Pfad, wenn Inhalte von einer vorhandenen Website stammen, das Zieldesign jedoch unterschiedlich ist.

  1. Vollständiger Projekt- und Migrationsumfang einschließlich des Speicherorts für Inhalte.
  2. Definieren Sie das Zielentwurfssystem: Typografie, Farben, Abstände, Standardinhalte und wiederverwendbare Blöcke. Bestehende Projektkonventionen dort wiederverwenden, wo sie passen.
  3. Richten Sie für Figma Zugriff ein und erstellen Sie dann die Blöcke oder Varianten, die Sie für bestimmte Komponentenknoten benötigen. Siehe Redesign mit Blöcken aus Figma und Erstellen eines Blocks aus Figma.
  4. Migrieren Sie für jede Vorlage eine Beispielseite in diese Blocksammlung. Live-Site als Inhaltsquelle und Figma oder genehmigte Referenz als Design-Quelle beibehalten.
  5. Inhalte mit der Quell-Website und Erscheinungsbild mit dem Ziel-Design vergleichen. Beurteilen Sie die neu gestaltete Seite nicht anhand des Erscheinungsbildes der alten Website.
  6. Vergewissern Sie sich, dass Autorinnen und Autoren das Ergebnis bearbeiten können und dass es in jeder Bildschirmbreite funktioniert. Korrigieren Sie bei Bedarf Inhaltszuordnungen oder Modelle und fahren Sie in Batches fort.

Beispiel:

Wenden Sie bei der Migration von https://www.example.com/products/tents den genehmigten Entwurf unter https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345 an. Die Live-Seiten sind die Inhaltsquelle. Die Referenz definiert das neue Erscheinungsbild. Bewahren Sie Text, Links, Metadaten und aussagekräftige Bilder auf. Zuerst eine Beispielseite überprüfen. Erstellen Sie Inhalte, die Autoren in Experience Workspace bearbeiten können. Nicht hochladen, pushen oder veröffentlichen.

Ersetzen Sie die Beispiel-URLs durch Ihre eigenen und geben Sie für das Experience Manager-Authoring an, dass der Inhalt im JCR gespeichert ist.

Wenn eine neue Seite keine Quellwebsite hat, siehe Erstellen einer neuen Seite aus Figma: Ein bestimmter Rahmen liefert den Text und die Assets sowie das Design. Dies unterscheidet sich von der Zuordnung vorhandener Website-Inhalte zu einem neuen Design.

Vorhandene Site umgestalten existing-site

Eine neue Migration ist nicht erforderlich.

  1. Verbinden Sie das vorhandene Projekt und die vorgesehene Verzweigung. Bitten Sie den Agenten, die Entwurfskonventionen, Bausteine und Authoring-Modelle des Projekts zu lesen.

  2. Identifizieren Sie Baseline-Seiten, die die betroffenen Vorlagen und Varianten abdecken. Zeichnen Sie ihr aktuelles Erscheinungsbild und wichtige Interaktionen auf.

  3. Geben Sie den Umfang der Änderung an und was bleiben muss. Beispiel:

    Gestalten Sie dieses vorhandene Projekt mit dem genehmigten Design unter https://www.figma.com/design/AbC123/Brand-Refresh neu. Ändern Sie globale Farben und Typografie und die Kartenpräsentation auf / und /products. Beibehalten von Inhalten, URLs, Modellen, Analysen, Tastaturverhalten und Integrationen. Wiederverwenden Sie unsere Token und Blöcke. Den vorgeschlagenen Umfang zuerst anzeigen; keine Inhalte erneut importieren oder hochladen, pushen oder veröffentlichen.

    Ersetzen Sie die Beispiel-URL und -Pfade durch Ihre eigenen.

  4. Aktualisieren Sie freigegebene Token und globale Stile zuerst, wenn die Änderung global ist. Wenden Sie blockspezifische Stile nur an, wenn erforderlich.

  5. Zeigen Sie eine Vorschau aller betroffenen Beispielseiten an, nicht nur der zum Ableiten des Designs verwendeten Seite. Mobilgeräte-Breiten, lange Überschriften, fehlende optionale Inhalte und verschiedene Varianten sind enthalten. Eine globale Token-Änderung kann Seiten außerhalb des ursprünglichen Beispiels betreffen, also schließen Sie diese auch ein.

  6. Wenn für das Design Struktur- oder Modelländerungen erforderlich sind, treffen Sie eine separate, explizite Entscheidung. Planen Sie, wie vorhandene Inhalte in die neue Struktur verschoben werden, anstatt Autoreninhalte im Hintergrund neu zu schreiben.

  7. Überprüfen Sie den Code-Unterschied und die Projektprüfungen und übertragen Sie dann den Workflow des vorhandenen Projekts. Stiländerungen sind Code: Sie erreichen die Live-Site, sobald die Verzweigung in main zusammengeführt wird. Überprüfen Sie daher zuerst die betroffenen Seiten in der Vorschau-URL der Verzweigung. Siehe So werden Änderungen aktiviert.

Validieren und Wiederherstellen validate

Die Umgestaltung erfolgt, wenn der Inhalt korrekt bleibt, das genehmigte Design in jeder Bildschirmbreite funktioniert, Interaktionen weiterhin verwendbar sind und Autoren die Beispielseiten weiterhin bearbeiten, speichern und erneut öffnen können. Überprüfen Sie Kontrast, Fokus, Lesereihenfolge, Bildbedeutung und die Leistungsanforderungen des Projekts. Ein Ähnlichkeitswert entscheidet darüber nicht für Sie.

Wenn ein Ergebnis falsch ist, identifizieren Sie die betroffene Seite oder den betroffenen Block und geben Sie an, ob das Problem ein Token, ein freigegebener Stil, ein Blockstil, eine Struktur oder eine Inhaltszuordnung ist. Korrigieren Sie diese Ebene und überprüfen Sie alle betroffenen Varianten erneut. Überprüfen Sie bei Figma-Zugriffsfehlern den Knotenlink, die Dateiberechtigungen, das Token und ob der Figma-Import für das Projekt aktiviert ist, bevor Sie es erneut versuchen.

Setzen Sie unerwünschten Code über den Git-Workflow des Projekts zurück. Alle geänderten Remote-Inhalte separat wiederherstellen. Eine Code-Wiederherstellung macht Uploads nicht rückgängig. Baseline beibehalten, bis die Neuformatierung abgemeldet wird.

Übergeben Sie die genehmigte Referenz und ihre Version, geänderte Dateien, betroffene Seiten, Modell- und Inhaltsänderungen, überprüfen Sie Ergebnisse, bekannte Lücken und wie Sie Code und Inhalte mithilfe der Projektübergabe wiederherstellen können.

recommendation-more-help
experience-manager-cloud-service-help-main-toc