Willkommen beim neuen Brandguide Erlebnis! Dieser Artikel sowie Erste Schritte mit Brandguide und Brandguide Anpassung mit CSS führen Sie durch die Migration Ihrer Inhalte in das neue Erlebnis. Am 1. September 2023 werden die Bearbeitungsmöglichkeiten für Ihren bestehenden Brandguide beendet. Am 1. Dezember 2023 wird der veraltete Brandguide Editor nicht mehr verfügbar sein.
Dieser Artikel wird Sie durch den Aufbau Ihres Brandguide mit Seiten, Abschnitten und Blöcken führen.
Seiten
Die höchste Organisationsebene eines Brandguide. So funktioniert es:
Seiten hinzufügen
- Navigieren Sie zur Seitenoption in der Seitenleiste.
- Wählen Sie die Schaltfläche Seite hinzufügen.
- Benennen Sie die Seite und setzen Sie den Slug.
- Klicken Sie auf Einladungen senden.
Seiten löschen
Auf den Seiten und Abschnitten flyout, wählen Sie das Papierkorbsymbol neben der Seite, die Sie löschen möchten. Wenn eine Seite gelöscht wurde, kann die Aktion nicht rückgängig gemacht werden und Blöcke und Abschnitte auf der Seite können nicht wiederhergestellt werden.
Kategorien
Kategorien sind eine organisatorische Ebene eines Brandguide der innerhalb von Seiten verschachtelt ist und aus Blöcken besteht.
Blöcke
Blöcke sind innerhalb von Kategorien verschachtelt. Sie können Blöcke im Block-Flyout auf der linken Seite finden. Blöcke sind Brandguide Komponenten wie Bilder, Text, Farbe und Code, die im Leinenbereich als Inhalt leben.
Hinzufügen eines Blocks
- Navigieren Sie zur linken Seitenleiste und wählen Sie die Blockoption.
- Dies erzeugt einen Flyout mit Blockoptionen für Bilder, Text, Code und Farbe. Inhalte, die Sie hinzufügen können, werden eine gestrichelte Linie um sie herum haben.
- Wählen Sie Block aus und ziehen Sie ihn in den Leinwand Bereich. Violette Linien auf der Leinwand zeigen eine genehmigte Drop-Zone.
- Lassen Sie den Klick los, um den Block in die Leinwand zu werfen.
Blöcke löschen
- Wählen Sie das-Papierkorbsymbol im Block. Beachten Sie, dass ein Block nicht wiederhergestellt werden kann, wenn Sie einen Block löschen.
Blöcke neu anordnen
Sie haben zwei Möglichkeiten:
- Ziehen und Ablegen des Blocks woanders auf der Seite.
- Benutzen Sie den-Pfeil rechts neben dem Blockinhalt, um den Block nach oben und unten zu verschieben.
Bildblock
Bildblöcke erlauben es Ihnen, nahtlos Bibliotheksinhalte zu Ihrem Brandguide hinzuzufügen. Das bedeutet, dass, wenn ein Asset in der Bibliothek aktualisiert wird, das Asset auch automatisch im Brandguide aktualisiert wird. Dies wird mit CDN betrieben. Um die Markenkonsistenz zu fördern, können Sie keine Bilder von außen direkt an Brandguide hochladen. Sie müssen aus Ihrer Bibliothek kommen.
Unterstützte Bildtypen
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
Seiten hinzufügen
- Wählen Sie das-Bildsymbol auf der linken Seite.
- Ein weiteres Flyout erscheint mit einer Bibliothekserfahrung. Die Bibliothek oder die Kollektion, die Ihrem Brandguide zugeordnet ist, wird als Standard erscheinen.
- Um eine andere Bibliothek oder Kollektion auszuwählen, wählen Sie den schwarzen Pfeil oben auf dem Flyout.
- Suchen Sie das Bild, das Sie verwenden möchten, und fügen Sie es auf eine der folgenden Arten hinzu:
- Ziehen und ziehen Sie das Bild auf die Leine.
- Fahren Sie über das Bild und wählen Sie das Ellipsen-Menü und wählen Sie [+] Ort.
- Fahren Sie über das Bild und wählen Sie das Ellipsen-Menü und wählen Sie [+] Ort.
- Fahren Sie über das Bild und wählen Sie das Ellipsen-Menü und wählen Sie [+] Ort.
Bildgröße ändern
- Schweben über dem Bild und wählen Sie die Ellipse aus.
- Ansichtsdetails auswählen.
- Öffnen Sie die Platzierungsoptionen.
- Ändern Sie die Breite und Höhe des Bildes.
- Ort auswählen.
Anmerkung: dies ist momentan die einzige Möglichkeit, die Bildgröße zu manipulieren.
Textblock
Das Hinzufügen von Text zu Ihrem Brandguide kann durch Ziehen und Ablegen eines Textblocks auf die Leinwand erfolgen.
Textstile ändern
Wenn Textstile auf der globalen Einstellungsebene geändert werden, werden sie alles auf Brandguide Ebene beeinflussen. Wenn sie auf der Blockebene geändert werden, werden sie nur den bestimmten Block beeinflussen.
Standardtext
- Navigieren Sie zu Einstellungen.
- Geben Sie Ihren Hex-Code in das Textfarbfeld ein.
Dies wirkt sich auf jeden Text auf der Seite aus, einschließlich Textblöcke.
Block-Level-Text
- Schweben Sie über den Textblock.
- Ein WYSIWYG-Editor wird angezeigt, um Schriftarten, Größen, Textfarben und Formatierungen zu verändern, wie z. B. das Hinzufügen von Stichpunkten oder Links zum Text.
- Änderungen, die hier vorgenommen werden, wirken sich nur auf den ausgewählten Block aus.
Typografie
Momentan sind Benutzer nicht in der Lage, Schriftarten mit einer Bibliothek hochzuladen oder zu synchronisieren. Die im Dropdown-Menü verfügbaren Schriften stammen von Google Webfonts. Erweiterte Benutzer können Fonts von Drittanbietern mittels CSS hinzufügen. Weitere Informationen finden Sie imBrandguide Customization Using CSS article. Das Bibliotheks-Support-Team wird dir beim Erstellen Ihren eigenen Codes nicht helfen können.
Code-Blöcke
Der Code Block funktioniert mit Standard HTML / CSS. Die Verwendung dieses Blocks wird nur empfohlen, wenn Sie fortgeschrittene CSS-Kenntnisse besitzen. Der Kundendienst kann Ihnen nicht helfen, wenn Sie Ihren eigenen Code in Brandguide implementieren. Code wird gereinigt, um XSS-Angriffe zu verhindern.
Code-Blöcke bearbeiten
Wenn ein HTML/CSS-Block zur Seite hinzugefügt wird, können Sie dem Brandguide benutzerdefinierten Code hinzufügen. HTML wird dem jeweiligen Standort der Seite hinzugefügt und CSS wird auf alle Bereiche der zu beeinflussenden Leinwand angewendet. Sobald der Code fertig ist, wählen Sie das Augensymbol um die Änderungen anzuzeigen.
CSS kann auch auf globaler Ebene in den Einstellungen bearbeitet werden, da es die beste Praxis ist, diese Stile auf der obersten Ebene und Kaskade nach unten zu setzen.
Video mit HTML hinzufügen
Der Flyout-Bildblock unterstützt nicht das Hinzufügen von Videoinhaltsblöcken. Mit Hilfe des Video-Einbettungscodes können Videos jedoch mittels benutzerdefinierter HTML- und Video-Assets aus der Bibliothek hinzugefügt werden. Der Kundendienst kann Ihnen nicht helfen, wenn Sie Ihren eigenen Code in Brandguide implementieren.
- Öffnen Sie das Asset Modal für das Video.
- Navigieren Sie zur Medienbibliothek.
- Suchen Sie den Video Embed Code und wählen Sie Link kopieren.
- Fügen Sie den Code in den HTML-Block ein.
Code-Blöcke bearbeiten
Einige Code und Elemente in ihm werden zu Sicherheitszwecken gegen XSS-Angriffe bereinigt.
Blöcke löschen
Das Löschen von Code-Blöcken wird den Block und den gesamten Code innerhalb des Blocks löschen. Auf globaler Ebene geschriebene CSS bleibt erhalten, sofern sie nicht in den Einstellungen bearbeitet wird.
Blöcke bewegen
Das Verschieben des Codeblocks nach dem Schreiben von HTML und CSS kann den Block oder die beabsichtigten Effekte des Codes stören. Für beste Ergebnisse schreiben Sie den Code, nachdem die Position der Blöcke festgelegt wurde.
Das Hinzufügen von Text zu Ihrem Brandguide kann durch Ziehen und Ablegen eines Textblocks auf die Leinwand erfolgen.
Farbquelle
Der Farbblock stammt aus der Bibliothek oder der Kollektion, die mit dem Brandguide verknüpft ist. Wenn im Brandguide keine Farben erscheinen, bedeutet dies, dass der Bibliothek oder der Kollektion keine Farben hinzugefügt wurden. Um Farben hinzuzufügen, fügen Sie sie als Asset in die Bibliothek ein.
Farben synchronisieren
Wenn eine Änderung an den Farben auf der Bibliotheksebene vorgenommen wird, wird die Änderung auch automatisch innerhalb des Brandguide reflektiert. Wenn eine Änderung in der Bibliothek vorgenommen wird und die Änderung nicht in Brandguide, Sie könnenmanuell synchronisieren, indem Sie den kreisförmigen Sync-Button oben rechts in der Farbflyout auswählen.
Farbmodus
Sie können ändern, welche Farbmodi sowohl im Flyout als auch in der Leinwand angezeigt werden.
- Wählen Sie das Einstellungssymbol in der oberen rechten Ecke der Farbflyout.
- Wählen Sie die Kontrollkästchen aus, um HEX, RGB und CMYK anzuzeigen und wählen Sie Speichern.
- Ein Kopiersymbol wird neben dem Farbwert angezeigt.