Benvenuto nella nuova esperienza di Brandguide! Questo articolo, così come Per iniziare con Brandguide e Brandguide Customization Utilizzando CSS ti guiderà attraverso come migrare i tuoi contenuti alla nuova esperienza. Le funzionalità di modifica sulla tua Brandguide esistente andranno via il 1 settembre 2023. Il 1 dicembre 2023 l'editore di Brandguide ereditato non sarà più disponibile.
Questo articolo ti guiderà attraverso come costruire la tua Brandguide utilizzando pagine, sezioni e blocchi.
Pagine
Il più alto livello organizzativo di una Brandguide. Le pagine aggiungono per fare Brandguide.
Aggiunta Di Pagine
- Vai all'opzione Pagine nella barra laterale.
- Selezionare il pulsante Aggiungi pagina.
- Nome della pagina, e impostare il Slug.
- Seleziona, Salva e crea la pagina.
Eliminazione Pagine
Nel Flyout pagine e sezioni, selezionare l'icona del cestino accanto alla pagina che si desidera eliminare. Se una pagina viene eliminata, l'azione non può essere annullatae i blocchi e le sezioni all'interno della pagina non possono essere recuperati.
Sezioni
Le sezioni sono un livello organizzativo di una Brandguide che è annidato all'interno delle pagine e consiste di blocchi.
Blocchi
I blocchi sono annidati all'interno delle sezioni. È possibile individuare blocchi nel blocco flyout sul lato sinistro. I blocchi sono componenti Brandguide come immagini, testo, colore e codice che vivono nell'area tela come contenuto.
Aggiunta Di Blocchi
- Vai alla barra lateralesinistrae seleziona l'opzioneblocco.
- Questo produrrà un flyout con opzioni di blocco per immagini, testo, codice e colore. Il contenuto che è possibile aggiungere avrà una linea tratteggiata intorno ad esso.
- Seleziona il blocco e trascinalo nell'area della superficie. Le linee violasulla tela indicano una zona di goccia approvata.
- Rilascia il clicper far cadere il blocco nella tela.
Eliminazione Blocchi
- Seleziona l'icona del cestinosul blocco. Notareche quando si elimina un blocco, non può essere recuperato.
Riorganizzare I Blocchi
Hai due opzioni:
- Trascinail blocco da qualche altra parte sulla pagina.
- Usa la frecciaa destra del contenuto del blocco per spostare il blocco su e giù per la pagina.
Blocchi Immagine
I blocchi di immagini consentono di aggiungere senza soluzione di continuità il contenuto della Libreria alla tua Brandguide. Ciò significa che se un asset viene aggiornato in Biblioteca, l'asset verrà automaticamente aggiornato anche nella Brandguide. Questa esperienza è alimentata da CDN. Per promuovere la coerenza del marchio non è possibile caricare immagini esterne direttamente su Brandguide. Devono venire dalla vostra biblioteca.
Tipi Di Immagine Supportati
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
Aggiunta Di Immagini
- Seleziona l'icona dell'immagine nel flyout a sinistra.
- Un altro flyout apparirà con un'esperienza di biblioteca. La Libreria o la Collezione che è associata alla tua Brandguide appariranno come predefinito.
- Per scegliere un'altra libreria o collezione selezionare la freccia nera nella parte superiore del flyout.
- Individuare l'immagine che si desidera utilizzare e aggiungerla in uno dei seguenti modi:
- Trascina l'immagine sulla tela.
- Passa sopra l'immagine e seleziona il menu ellissi e scegli [+] Posiziona.
- Passa sopra l'immagine e seleziona l'ellissi, scegli i dettagli della vista, quindi scegli [+] Posiziona.
- Passa sopra l'immagine e seleziona l'ellissi, scegli i dettagli di visualizzazione, quindi trascina e rilascia l'immagine.
Modifica Dimensione Immagine
- Passa sopra l'immagine e seleziona l'ellissi.
- Scegli i dettagli della visualizzazione.
- Aprire le opzioni di posizionamento.
- Modifica la larghezza e l'altezza dell'immagine.
- Select Place.
Nota: questo è attualmente l'unico modo per manipolare le dimensioni dell'immagine.
Blocchi Di Testo
Aggiungere del testo alla tua Brandguide può essere fatto trascinando e rilasciando un blocco di testo sulla tela.
Modifica degli stili di testo
Quando gli stili di testo vengono modificati a livello globale le impostazioni influiranno su tutto a livello di Brandguide. Quando modificato al livello del blocco, influenzeranno solo quel blocco specifico.
Testo preimpostato
- Vai alle impostazioni.
- Inserisci il tuo codice esadecimale nella casella di colore del testo.
Questo influirà su qualsiasi testo della pagina, compresi i blocchi di testo.
Testo a livello di blocco
- Passa sopra il blocco di testo.
- Un editor WYSIWYG apparirà per modificare i caratteri, le dimensioni, i colori del testo e la formattazione come l'aggiunta di proiettili o collegamenti al testo.
- Le modifiche apportate qui influenzeranno solo il blocco selezionato.
Tipografia
In questo momento gli utenti non sono in grado di caricare o sincronizzare i caratteri con una Libreria in Brandguide.I caratteri disponibili nel menu a tendina provengono da Google Webfonts. Gli utenti avanzati possono aggiungere caratteri di terze parti utilizzando CSS. Per ulteriori informazioni visita ilBrandguide Customization Using CSS article. Il team di supporto Library non sarà in grado di aiutarti nella costruzione del tuo codice.
Blocchi Di Codice
Il blocco di codice funziona con lo standard HTML / CSS. L'utilizzo di questo blocco è raccomandato solo se hai una conoscenza avanzata del CSS. Il supporto clienti non sarà in grado di aiutarti quando stai implementando il tuo codice in Brandguide. Il codice sarà igienizzato nel tentativo di prevenire gli attacchi XSS.
Modifica Blocchi Codice
Quando un blocco HTML/CSS viene aggiunto alla pagina è possibile aggiungere un codice personalizzato alla guida di marca. L'HTML verrà aggiunto alla posizione particolare della pagina e il CSS si applicherà a qualsiasi area della superficie specificata per influenzare. Una volta finito con il codice, seleziona l'icona occhio per visualizzare le modifiche.
I CSS possono anche essere modificati a livello globale in base alle impostazioni, dal momento che è la migliore pratica per avere quegli stili impostati al livello superiore e a cascata giù.
Aggiunta Video Usando HTML
Il blocco di immagini flyout non supporta l'aggiunta di blocchi di contenuti video. Tuttavia, utilizzando il codice incorporato del video, il video può essere aggiunto tramite risorse HTML e video personalizzate dalla Libreria. Il supporto clienti non sarà in grado di aiutarti quando stai implementando il tuo codice in Brandguide.
- Aprire la modalità asset per il video.
- Vai alla schedaIncorpora.
- Individuare il codice di inserimento video e selezionare Copia collegamento.
- Incolla il codice nel blocco HTML.
Blocchi Di Codice Sanitizzanti
Alcuni codici e elementi al suo interno saranno igienizzati per scopi di sicurezza contro attacchi XSS.
Eliminazione Blocchi Di Codice
L'eliminazione dei blocchi di codice rimuoverà il blocco e tutto il codice scritto all'interno del blocco. I CSS scritti a livello globale rimarranno a meno che non vengano modificati nelle impostazioni flyout.
Blocchi Di Codice In Movimento
Spostare il blocco di codice dopo che HTML e CSS sono stati scritti ha il potenziale di rompere il blocco o gli effetti previsti del codice. Per ottenere i migliori risultati, scrivere il codice dopo che la posizione dei blocchi è stata impostata.
Aggiungere blocchi di colore alla tua Brandguide può essere fatto trascinando e rilasciando il colore sulla tela.
Sorgenti Colore
Il blocco di colori proviene dalla Libreria o dalla Collezione associata alla Brandguide. Se nella Brandguide non vengono visualizzati colori, ciò significa che nessuno è stato aggiunto alla Libreria o alla Collezione. Per aggiungere colori, aggiungerli come asset nella Libreria.
Sincronizzazione Colori
Quando viene apportata una modifica ai colori a livello della Libreria, la modifica si rifletterà automaticamente anche all'interno della guida di marca. Se un cambiamento è fatto in Biblioteca e la modifica non si riflette in Brandguide, puoi sincronizzare manualmente selezionando il pulsante di sincronizzazione circolare in alto a destra del flyout colore.
Modalità Colore
È possibile modificare quali modalità di colore appaiono sia nel flyout che nella tela.
- Selezionare l'icona impostazioni nell'angolo in alto a destra del flyout colore.
- Selezionare le caselle di controllo per visualizzare HEX, RGB e CMYK es elezionare Salva.
- Un'icona di copia apparirà accanto al valore del colore.