Este artigo irá orientá-lo através dos diferentes tipos de blocos disponíveis em um Brandguide.
USM Content
Páginas
O nível organizacional mais alto de um Brandguide. As páginas se somam para criar guias de marca.
Adicionar páginas
- Navegue até a opção Páginas na barra lateral.
- Selecione o botão Adicionar página.
- Dê um nome à página e defina o Slug.
- Selecione, salve e crie a página.
Excluir páginas
Selecione o ícone da lixeira ao lado da página que você deseja excluir no submenu Páginas e Seções. Se uma página for excluída, a ação não poderá ser desfeita e os blocos e seções alojados na página não poderão ser recuperados.
Seções
As seções são um nível organizacional de um Brandguide que está aninhado em páginas e consiste em blocos.
As opções Sticky Navigation Bar e Collapse Page Sections são ativadas automaticamente para seu Brandguide. Você pode ajustá-los nas configurações de Páginas e Seções na parte inferior.
Blocos
Os blocos estão aninhados nas seções. Você pode localizar os blocos no submenu de blocos no lado esquerdo. Os blocos são componentes do Brandguide, como imagens, texto, cor e código, que ficam na área da tela como conteúdo.
Adicionar blocos
- Navegue até a barra lateral esquerda e selecione a opção de bloqueio.
- Isso produzirá um submenu com imagens, texto, código e opções de blocos de cores. O conteúdo que você pode adicionar terá uma linha pontilhada ao redor.
- Selecione o bloco e arraste-o para a área da tela. Linhas roxas na tela indicam uma zona de lançamento aprovada.
- Solte o clique para soltar o bloco na tela.
Excluir blocos
Selecione o ícone da lixeira no bloco. Quando você exclui um bloco, ele não pode ser recuperado.
Reorganizar blocos
Você tem duas opções:
- Arraste e solte o bloco em outro lugar da página.
- Use a seta à direita do conteúdo do bloco para mover o bloco para cima e para baixo na página.
Blocos de imagem
Os blocos de imagem permitem que você adicione conteúdo do Brandfolder ao seu Brandguide sem problemas. Isso significa que, se um ativo for atualizado no Brandfolder, ele também será atualizado automaticamente no Brandguide. A CDN potencializa essa experiência. Para promover a consistência da marca, você não pode enviar imagens externas diretamente para o Brandguide.
Tipos de imagem compatíveis
- DOR
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
- MP4
- Documentos do Microsoft Word
- Microsoft PowerPoints
- Arquivos Microsoft Excel
Adicionar imagens
- Selecione o ícone da imagem no menu desdobrável à esquerda.
- Outro menu desdobrável aparecerá com a experiência Brandfolder. A pasta de marca ou coleção associada ao seu Brandguide aparecerá como padrão.
- Para escolher outra Brandfolder ou Coleção, selecione a seta preta na parte superior do submenu.
- Localize a imagem que você deseja usar e adicione-a de uma das seguintes maneiras:
- Arraste e solte a imagem na tela.
- Passe o mouse sobre a imagem, selecione o menu de elipses e escolha [+] Colocar.
- Passe o mouse sobre a imagem, selecione as reticências, escolha Exibir detalhes e, em seguida, escolha [+] Colocar.
- Passe o mouse sobre a imagem, selecione as reticências, escolha exibir detalhes e, em seguida, arraste e solte a imagem.
Alterar tamanho da imagem
- Passe o mouse sobre a imagem e selecione as reticências.
- Escolha ver detalhes.
- Abra as opções de posicionamento.
- Altere a largura e a altura da imagem.
- Selecione Local.
Atualmente, essa é a única maneira de manipular o tamanho da imagem.
Blocos de texto
A adição de texto ao Brandguide pode ser feita arrastando e soltando um bloco de texto na tela.
Alterar estilos de texto
Quando os estilos de texto são modificados no nível das configurações globais, eles afetam tudo no nível do Brandguide. Quando modificados no nível do bloco, eles afetarão apenas esse bloco específico.
Texto padrão
- Navegue até as configurações.
- Insira seu código hexadecimal na caixa de cores do texto.
Isso afetará qualquer texto na página, incluindo blocos de texto.
Texto em nível de bloco
- Passe o mouse sobre o bloco de texto.
- Um editor WYSIWYG aparecerá para alterar fontes, tamanhos, cores e formatação do texto, como adicionar marcadores ou links ao texto.
- As alterações feitas aqui afetarão somente o bloco selecionado.
Tipografia
Atualmente, os usuários não podem carregar ou sincronizar fontes com uma Brandfolder para o Brandguide. As fontes disponíveis no menu suspenso são provenientes do Google Webfonts. Usuários avançados podem adicionar fontes de terceiros usando CSS. Para obter mais informações, visite o artigo Personalização do Brandguide usando CSS. A equipe de suporte da Brandfolder não poderá ajudá-lo a criar seu código.
Blocos de código
O bloco de código funciona com HTML/CSS padrão. O uso desse bloco só é recomendado se você tiver conhecimento avançado de CSS. O suporte ao cliente não pode ajudá-lo a implementar seu código no Brandguide. Qualquer código será limpo para evitar ataques de XSS. Esteja ciente de que nossos desenvolvedores podem fazer alterações em nosso código Brandguide a qualquer momento que tenham o potencial de afetar seu CSS e HTML.
Editar blocos de código
Quando um bloco HTML/CSS é adicionado à página, você pode adicionar um código personalizado ao Brandguide. O HTML será adicionado ao local específico na página e o CSS será aplicado a quaisquer áreas da tela que ele seja especificado para afetar. Depois de terminar o código, selecione o ícone do olho para ver as alterações.
O CSS também pode ser editado globalmente nas configurações, pois é uma prática recomendada definir esses estilos no nível superior e descer em cascata.
Adicionar vídeo usando HTML
O bloco de imagem desdobrável não suporta a adição de blocos de conteúdo de vídeo. No entanto, usando o código de incorporação de vídeo, o vídeo pode ser adicionado por meio de recursos de HTML e vídeo personalizados do Brandfolder. O suporte ao cliente não pode ajudá-lo ao implementar seu código no Brandguide.
- Abra o modal de ativos para o vídeo.
- Navegue até a guia Incorporar.
- Localize o código de incorporação de vídeo e selecione Copiar link.
- Cole o código no bloco HTML.
Limpe os blocos de código
Alguns códigos e elementos contidos nele serão higienizados para fins de segurança contra ataques XSS.
Javascript não é permitido.
Excluir blocos de código
A exclusão de blocos de código removerá o bloco e todo o código escrito dentro do bloco. O CSS escrito no nível das configurações globais permanecerá, a menos que seja editado no submenu de configurações.
Mova blocos de código
Mover o bloco de código após a escrita de HTML e CSS tem o potencial de quebrar o bloco ou os efeitos pretendidos do código. Para obter melhores resultados, escreva o código após a posição dos blocos ter sido definida.
Blocos de cores
A adição de blocos de cores ao seu Brandguide pode ser feita arrastando e soltando a cor na tela.
Fontes de cores
O bloco de cores é originário da Brandfolder ou da Coleção associada ao Brandguide. Se nenhuma cor aparecer no Brandguide, nenhuma foi adicionada à Brandfolder ou à Coleção. Para adicionar cores, adicione-as como um ativo na pasta Brandfolder.
Sincronizar cores
Quando uma alteração é feita nas cores no nível Brandfolder, a alteração também será refletida automaticamente no Brandguide. Se uma alteração for feita no Brandfolder e a diferença não for refletida no Brandguide, você poderá sincronizar manualmente selecionando o botão circular de sincronização no canto superior direito do menu desdobrável colorido.
Modos de cor
Você pode alterar quais modos de cores aparecem no menu desdobrável e na tela.
- Selecione o ícone de configurações no canto superior direito do menu desdobrável colorido.
- Marque as caixas de seleção para exibir HEX, RGB e CMYK e selecione Salvar.
- Um ícone de cópia aparecerá ao lado do valor da cor.