Ein Layout definiert die Struktur und das Design aller Seiten in einer Seitengruppe. Es erbt die globalen Stile Ihrer Website, aber Sie können zudem das Design einzelner Abschnitte anpassen – indem Sie Schriftarten, Farben und Inhaltszuordnungen auf Abschnittsebene ändern. Jede Seitengruppe hat ein Layout, das von allen Entitäten in dieser Gruppe verwendet wird.
Hinweis: Sie bearbeiten eine Layoutvorlage. Die von Ihnen vorgenommenen Änderungen gelten für alle Seiten der Seitengruppe, nicht nur für die in der Vorschau angezeigten Seite.
Greifen Sie auf den Layout-Editor zu
Klicken Sie auf dem Bildschirm Seitengruppen auf Layout bearbeiten neben der Seitengruppe, die Sie bearbeiten möchten.
Der Layout-Editor. In diesem Artikel wird durchgehend auf nummerierte Anmerkungen Bezug genommen.
| Anzahl | Gebiet | Wozu es dient |
| 1 | Rechter Bereich | Abschnittseigenschaften bearbeiten – Inhalte auf Entitätsfelder abbilden oder statische Werte setzen, Schriftarten und Farben ändern |
| 2 | Seitenvorschau | Live-Vorschau Ihrer Änderungen; klicken Sie auf einen beliebigen Abschnitt, um ihn auszuwählen |
| 3 | Linker Bereich | Verfügbare Abschnitte und den Layoutplan ansehen; Abschnitte von hier in die Vorschau ziehen |
| 4 | Seitengruppe / Entität umschalten | Wechseln Sie zwischen Seitengruppen, Entitäten und Lokalitäten, um eine Vorschau anzuzeigen |
| 5 | Entitätsfelder umschalten | Hervorheben, wo Knowledge Graph-Felder im Layout verwendet werden |
| 6 | Bereich-Umschalter | Klappen Sie den linken und rechten Bereich ein oder aus, um mehr Arbeitsfläche zu erhalten |
| 7 | Viewport-Steuerung | Zwischen Desktop-, Tablet- und Mobilansichten wechseln; vergrößern und verkleinern |
| 8 | Änderungskontrollen | Änderungen rückgängig machen, wiederherstellen, verwerfen oder veröffentlichen |
| 9 | Vorschau / Live-Verknüpfungen | Öffnen Sie eine teilbare Vorschau oder Ihre Live-Website in einem neuen Tab |
| 10 | Bibliothek aktualisieren | Laden Sie die neuesten Produktaktualisierungen herunter (wird nur angezeigt, wenn Sie im Rückstand sind) |
Änderungen werden während der Bearbeitung automatisch gespeichert, sodass Sie die Seite verlassen und später zurückkehren können, ohne Ihren Fortschritt zu verlieren.
Abschnitte hinzufügen, neu ordnen und entfernen
Abschnitte sind die Bausteine eines Layouts. Der linke Bereich (3) zeigt alle verfügbaren Abschnitte im Abschnittsbereich sowie eine Übersicht über den aktuellen Inhalt des Layouts.
So fügen Sie einen Abschnitt hinzu: Ziehen Sie einen Abschnitt aus dem Abschnittsbereich auf die Vorschau (2) an die gewünschte Position.
So ordnen Sie Abschnitte neu an: Ziehen Sie die Abschnitte entweder in der Vorschau (2) oder in der Gliederung im linken Bereich (3) per Drag & Drop.
So entfernen Sie einen Abschnitt: Klicken Sie in der Vorschau oder in der Gliederung auf den Abschnitt, um ihn auszuwählen, und klicken Sie dann auf das Papierkorbsymbol in der daraufhin angezeigten Aktionsleiste.
Verwenden Sie die Schaltfläche Labels anzeigen, um die Inhaltsquelle – statisch oder Knowledge Graph – für jedes Element in Ihrem aktuellen Layout auf einen Blick zu sehen.
Hinweis: Die verfügbaren Abschnitte im linken Bereich stammen aus der Bibliothek Ihrer Website. Falls Ihnen Abschnitte fehlen, die Sie erwarten, müssen Sie möglicherweise Ihre Bibliothek aktualisieren. Siehe Ihre Bibliothek aktualisieren.
Abschnittseigenschaften bearbeiten
Klicken Sie auf einen beliebigen Abschnitt in der Vorschau (2) oder in der Gliederung (3), um ihn auszuwählen. Seine Eigenschaften werden im rechten Bereich angezeigt (1). Häufige Aktionen sind:
- Inhalt auf ein Knowledge Graph-Entitätsfeld abbilden oder einen statischen Wert festlegen (siehe Abschnittseigenschaften zuordnen)
- Ändern von Schriftarten und Farben auf Abschnittsebene, um globale Stile zu überschreiben
- Elemente innerhalb eines Abschnitts anzeigen oder verbergen
Verwenden Sie den Umschalter für Entitätsfelder (5), um hervorzuheben, welche Felder im Layout aus dem Knowledge Graph abgerufen werden. Dies ist nützlich, um zu überprüfen, ob Ihre Inhaltszuordnungen korrekt eingerichtet sind.
Benutzerdefinierten Code hinzufügen
Mit der Komponente Benutzerdefinierter Code können Sie benutzerdefiniertes HTML, CSS und JavaScript direkt zu einer Seite hinzufügen. Verwenden Sie es, wenn Sie Funktionen benötigen, die in den integrierten Bereichen nicht verfügbar sind.
Um Knowledge Graph-Feldwerte in benutzerdefinierten Code einzubetten, verwenden Sie die Handlebars-Notation:
<div class="custom-banner">
<h2>Willkommen bei {{name}}</h2>
<p>Besuchen Sie uns unter {{address.line1}}, {{address.city}}</p>
<p>Rufen Sie uns an: {{mainPhone}}</p>
</div>Best Practices für benutzerdefinierten Code:
- Bevorzugen Sie nach Möglichkeit HTML und CSS gegenüber JavaScript. Statische Inhalte werden von Suchmaschinen und KI-Crawlern zuverlässiger indexiert. JavaScript-lastige Implementierungen werden möglicherweise nicht ordnungsgemäß indexiert.
- Verwenden Sie zuerst die integrierten Abschnitte. Die von Yext bereitgestellten Abschnitte werden von Yext gepflegt und für Barrierefreiheit und SEO optimiert. Verwenden Sie benutzerdefinierten Code nur für Funktionen, die in den eingebauten Abschnitten nicht abgedeckt werden.
Abschnitte kopieren und einfügen
Wenn Sie mehrere Seitengruppen mit gemeinsamen Abschnitten haben - z. B. eine Kopf- oder Fußzeile, die überall gleich aussehen muss - können Sie einen vollständig konfigurierten Abschnitt aus einem Layout kopieren und in ein anderes einfügen, anstatt ihn von Grund auf neu zu konfigurieren.
Um einen Abschnitt zu kopieren und einzufügen:
- Klicken Sie auf dem Bildschirm Seitengruppen auf Layout bearbeiten neben der Seitengruppe, die den Abschnitt enthält, den Sie kopieren möchten.
- Klicken Sie auf den Abschnitt in der Vorschau oder die Gliederung. Über dem Abschnitt erscheint eine Aktionsleiste.
- Klicken Sie auf das Kopiersymbol (erstes Symbol in der Aktionsleiste).
- Kehren Sie zum Bildschirm Seitengruppen zurück und klicken Sie auf Layout bearbeiten neben der Zielseitengruppe.
- Wenn sich der Abschnitt nicht bereits im Layout befindet, ziehen Sie ihn aus dem linken Fensterbereich hinein. Klicken Sie dann zum Auswählen darauf.
- Klicken Sie auf das Einfügensymbol (zweites Symbol in der Aktionsleiste).
Alle Eigenschaften werden kopiert, einschließlich aller lokalisierten Übersetzungen. Wie gewohnt in der Vorschau anzeigen, bearbeiten und veröffentlichen.
Änderungsvorschau anzeigen
Überprüfen Sie vor der Veröffentlichung Ihre Änderungen über verschiedene Entitäten und Viewports hinweg.
- Seitenvorschau (2) – Änderungen werden live in der Vorschau angezeigt, während Sie sie vornehmen.
- Entitätsumschalter (oben im Editor) – Wechseln Sie zwischen den Entitäten in der Seitengruppe, um zu überprüfen, ob das Layout bei unterschiedlichen Inhalten korrekt aussieht.
- Viewport-Steuerungen (7) – Prüfen Sie Desktop-, Tablet- und Mobilansichten.
- Änderungsvorschau (9) – Erzeugt einen teilbaren, zeitpunktbezogenen Vorschau-Link mit allen lokalen Änderungen. Beachten Sie, dass diese Momentaufnahme nicht aktualisiert wird, um spätere Änderungen widerzuspiegeln – generieren Sie eine neue Vorschau, um spätere Änderungen zu sehen.
Veröffentlichen Sie Ihre Änderungen
Klicken Sie in der Änderungskontrolle (8) auf Veröffentlichen, um Ihre Layout-Aktualisierungen gleichzeitig für alle Seiten in der Seitengruppe live zu schalten. Wenn Ihre Seiten bereits live sind, lautet diese Schaltfläche Aktualisieren # Seiten.
Zur Überprüfung öffnen Sie die Live-Seite (9) und aktualisieren Sie sie, um zu bestätigen, dass die Aktualisierungen sichtbar sind.
Hinweis: Die Schaltfläche Veröffentlichen ist deaktiviert, während eine Bereitstellung im Gange ist oder Ihre Website Fehler aufweist. Sie können weiterhin Änderungen lokal vornehmen und speichern – diese können veröffentlicht werden, sobald die Bereitstellung abgeschlossen ist oder der Fehler behoben wurde. Weitere Details finden Sie unter Seiten anzeigen und Fehler untersuchen.