Questo articolo ti guiderà attraverso i diversi tipi di blocchi disponibili in una Brandguide.
USM Content
Pagine
Il più alto livello organizzativo di una Brandguide. Le pagine si sommano per creare Brandguides.
Aggiungi pagine
- Vai all'opzione Pagine nella barra laterale.
- Seleziona il pulsante Aggiungi pagina.
- Assegna un nome alla pagina e imposta lo Slug.
- Seleziona, salva e crea pagina.
Eliminare pagine
Seleziona l'icona del cestino accanto alla pagina che desideri eliminare nel riquadro Pagine e sezioni. Se una pagina viene eliminata, l'azione non può essere annullata e i blocchi e le sezioni contenuti nella pagina non possono essere recuperati.
Sezioni
Le sezioni sono un livello organizzativo di una Brandguide che è annidato all'interno di pagine e si compone di blocchi.
Le opzioni Sticky Navigation bar e Comprimi le sezioni della pagina vengono attivate automaticamente per la tua Brandguide. Puoi regolarli all'interno delle impostazioni Pagine e sezioni verso il basso.
Blocchi
I blocchi sono annidati all'interno di sezioni. Puoi individuare i blocchi nel riquadro a comparsa dei blocchi sul lato sinistro. I blocchi sono componenti di Brandguide come immagini, testo, colori e codice che risiedono nell'area della tela come contenuto.
Aggiungere blocchi
- Vai alla barra laterale sinistra e seleziona l'opzione di blocco.
- Questo produrrà un riquadro a comparsa con immagini, testo, codice e opzioni a blocchi di colore. I contenuti che puoi aggiungere saranno circondati da una linea tratteggiata.
- Seleziona il blocco e trascinalo nell'area della tela. Le linee viola sulla tela indicano una zona di lancio approvata.
- Rilascia il clic per rilasciare il blocco nell'area di disegno.
Eliminare blocchi
Seleziona l'icona del cestino sul blocco. Quando elimini un blocco, non può essere recuperato.
Riorganizza i blocchi
Sono disponibili due opzioni:
- Trascina e rilascia il blocco da qualche altra parte della pagina.
- Usa la freccia a destra del contenuto del blocco per spostare il blocco su e giù nella pagina.
Blocchi di immagini
I blocchi di immagini ti consentono di aggiungere contenuti Brandfolder alla tua Brandguide senza problemi. Ciò significa che se una risorsa viene aggiornata in Brandfolder, la risorsa verrà aggiornata automaticamente anche nella Brandguide. Il CDN alimenta questa esperienza. Per promuovere la coerenza del marchio, non puoi caricare immagini esterne direttamente su Brandguide.
Tipi di immagini supportati
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
- MP4
- Documenti Microsoft Word
- Microsoft PowerPoints
- Microsoft Excel Files
Aggiungere immagini
- Seleziona l'icona dell'immagine nel riquadro a sinistra.
- Apparirà un altro riquadro con un'esperienza Brandfolder. La Brandfolder o la Collection associata alla tua Brandguide apparirà come predefinita.
- Per scegliere un'altra Brandfolder o Collection, seleziona la freccia nera nella parte superiore del riquadro a comparsa.
- Individua l'immagine che desideri utilizzare e aggiungila in uno dei seguenti modi:
- Trascina e rilascia l'immagine sulla tela.
- Passa il mouse sull'immagine, seleziona il menu con i puntini di sospensione e scegli [+] Luogo.
- Passa il mouse sull'immagine, seleziona i puntini di sospensione, scegli Visualizza dettagli, quindi scegli [+] Luogo.
- Passa il mouse sull'immagine, seleziona i puntini di sospensione, scegli Visualizza dettagli, quindi trascina e rilascia l'immagine.
Modificare le dimensioni dell'immagine
- Passa il mouse sull'immagine e seleziona i puntini di sospensione.
- Scegli Visualizza dettagli.
- Apri le opzioni di posizionamento.
- Modifica la larghezza e l'altezza dell'immagine.
- Seleziona Luogo.
Questo è attualmente l'unico modo per manipolare le dimensioni dell'immagine.
Blocchi di testo
L'aggiunta di testo alla tua Brandguide può essere effettuata trascinando un blocco di testo sulla tela.
Modificare gli stili di testo
Quando gli stili di testo vengono modificati a livello di impostazioni globali, influiranno su tutto a livello di Brandguide. Se modificati a livello di blocco, influiranno solo su quel blocco specifico.
Testo predefinito
- Vai alle impostazioni.
- Inserisci il tuo codice esadecimale nella casella del colore del testo.
Ciò influirà su qualsiasi testo della pagina, inclusi i blocchi di testo.
Testo a livello di blocco
- Passa il mouse sul blocco di testo.
- Apparirà un editor WYSIWYG per modificare i caratteri, le dimensioni, i colori del testo e la formattazione, ad esempio aggiungendo punti elenco o collegamenti al testo.
- Le modifiche apportate qui influiranno solo sul blocco selezionato.
Caratteri tipografici
Attualmente, gli utenti non possono caricare o sincronizzare i font con una Brandfolder su Brandguide. I caratteri disponibili nel menu a discesa provengono da Google Webfonts. Gli utenti esperti possono aggiungere font di terze parti utilizzando i CSS. Per ulteriori informazioni, consulta l'articolo Brandguide Personalizzazione tramite CSS. Il team di supporto di Brandfolder non sarà in grado di aiutarti a creare il tuo codice.
Blocchi di codice
Il blocco di codice funziona con HTML/CSS standard. L'uso di questo blocco è consigliato solo se hai una conoscenza avanzata dei CSS. L'assistenza clienti non può aiutarti nell'implementazione del tuo codice in Brandguide. Qualsiasi codice verrà disinfettato per prevenire attacchi XSS. Tieni presente che i nostri sviluppatori possono apportare modifiche al nostro codice Brandguide in qualsiasi momento che potrebbero influire sul tuo CSS e HTML.
Modifica blocchi di codice
Quando un blocco HTML/CSS viene aggiunto alla pagina, puoi aggiungere codice personalizzato alla Brandguide. L'HTML verrà aggiunto alla particolare posizione della pagina e il CSS verrà applicato a qualsiasi area dell'area di disegno su cui è specificato di influire. Una volta terminato con il codice, seleziona l'icona a forma di occhio per visualizzare le modifiche.
I CSS possono anche essere modificati globalmente nelle impostazioni poiché è consigliabile che tali stili siano impostati al livello superiore e a cascata verso il basso.
Aggiungi video usando HTML
Il blocco immagine a comparsa non supporta l'aggiunta di blocchi di contenuti video. Tuttavia, utilizzando il codice di incorporamento del video, il video può essere aggiunto tramite HTML personalizzato e risorse video da Brandfolder. L'assistenza clienti non può aiutarti quando implementi il tuo codice in Brandguide.
- Apri la modalità delle risorse per il video.
- Vai alla scheda Incorpora.
- Individua il codice di incorporamento del video e seleziona Copia collegamento.
- Incolla il codice nel blocco HTML.
Disinfetta i blocchi di codice
Alcuni codici ed elementi al suo interno verranno disinfettati per motivi di sicurezza contro gli attacchi XSS.
Javascript non è consentito.
Eliminare 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 di impostazioni globali rimarranno invariati a meno che non vengano modificati nel riquadro delle impostazioni.
Sposta blocchi di codice
Lo spostamento del blocco di codice dopo la scrittura di HTML e CSS può compromettere il blocco o gli effetti previsti del codice. Per ottenere risultati ottimali, scrivi il codice dopo aver impostato la posizione dei blocchi.
Blocchi di colore
L'aggiunta di blocchi di colore alla tua Brandguide può essere effettuata trascinando il colore sulla tela.
Fonti di colore
Il blocco di colore proviene dalla Brandfolder o dalla Collection associata alla Brandguide. Se nella Brandguide non compare alcun colore, non ne è stato aggiunto nessuno alla Brandfolder o alla Collection. Per aggiungere colori, aggiungili come risorsa nella cartella Brand.
Sincronizza colori
Quando viene apportata una modifica ai colori a livello di Brandfolder, la modifica si rifletterà automaticamente anche all'interno della Brandguide. Se viene apportata una modifica in Brandfolder e la differenza non si riflette in Brandguide, puoi eseguire la sincronizzazione manualmente selezionando il pulsante di sincronizzazione circolare in alto a destra nel riquadro a comparsa dei colori.
Modalità colore
È possibile modificare le modalità di colore visualizzate sia nel riquadro a comparsa che nell'area di disegno.
- Seleziona l'icona delle impostazioni nell'angolo in alto a destra del riquadro a colori.
- Seleziona le caselle di controllo per visualizzare HEX, RGB e CMYK e seleziona Salva.
- Un'icona di copia apparirà accanto al valore del colore.