Bem-vindo à nova experiência do Guia de Marcas! Este artigo, bem como Primeiros passos com guia de marca e Personalização de guia de marca usando CSS irá lhe ajudar a migrar seu conteúdo para a nova experiência. As capacidades de edição no seu guia de marca existente desaparecerão em 1 de setembro de 2023. Em 1 de dezembro de 2023, o editor de guia de marcas já não estará disponível.
Este artigo irá ajudá-lo a construir seu Guia de Marcas usando páginas, seções e blocos.
páginas
O mais alto nível organizacional de um guia de Branding. Páginas somadas para fazer marcas guias.
Adicionar páginas
- Navegue até a opção Páginas na barra lateral.
- Selecione o botão Adicionar página.
- Nomeie a página e defina o Slug.
- Selecione, Salvar e criar página.
Excluindo páginas
Nas páginas e seções flyout, selecione o ícone da lixeira ao lado da página que deseja excluir. Se uma página é excluída a ação não pode ser desfeitae os blocos e seções alojadas dentro da página não podem ser recuperadas.
Seções
As seções são um nível organizacional de um guia de marca aninhado nas páginas e consiste em blocos.
blocos
Blocos estão aninhados dentro de seções. Você pode localizar blocos no bloco de mosca do lado esquerdo. Blocos são componentes de guia Brandguide como imagens, texto, cor e código que vivem na área de tela como conteúdo.
Adicionando Blocos
- Navegue até a barra lateral esquerda e selecione a opção de bloco.
- Isto irá produzir um flyout com opções de bloco para imagens, texto, código e cor. Conteúdo que você pode adicionar terá uma linha pontilhada ao seu redor.
- Selecione o bloco e arraste-o para a área de tela. Linhas roxas na tela indicam uma zona de drop aprovada.
- Solte o clique para soltar o bloco na tela.
Excluindo Blocos
- Selecione o ícone de lixono bloco. Note que quando você excluir um bloco, ele não poderá ser recuperado.
Reorganizando Blocos
Há duas opções.
- Arraste e solte o bloco em algum 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
Blocos de imagem permitem que você adicione o conteúdo de biblioteca perfeitamente ao seu guia de marcas. Isso significa que se um ativo for atualizado na biblioteca, o ativo será atualizado automaticamente no guia de marcas também. Esta experiência é fornecida por CDN. Para promover a consistência da marca, você não pode carregar imagens externas diretamente para o Brandguide. Eles devem vir da sua biblioteca.
Tipos de imagem suportados
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
Adicionando imagens
- Selecione o ícone de imagem no fator à esquerda.
- Outro voo aparecerá com uma experiência de biblioteca. A biblioteca ou coleção associada ao seu guia de marcas aparecerá como um padrão.
- Para escolher outra Biblioteca ou Coleção, selecione a seta pretano topo do flyout.
- Localize a imagem que deseja usar e adicione-a de uma das seguintes maneiras:
- Arraste e solte a imagem na tela.
- Passe o mouse sobre a imagem e selecione o menu de elipses e escolha [+] Lugar.
- Passe o mouse sobre a imagem e selecione a elipse, escolha os detalhes de exibição, e então escolha [+] Lugar.
- Passe o mouse sobre a imagem e selecione a elipse, escolha detalhes de exibição, então arraste e solte a imagem.
Alterando tamanho da imagem
- Passe o mouse sobre a imagem e selecione a elipse.
- Escolha detalhes da visualização.
- Abra as opções de posicionamento.
- Altere a largura e a altura da imagem.
- Selecione Colocar.
Note: Atualmente é a única maneira de manipular o tamanho da imagem.
Bloco de Texto
Adicionar texto ao guia da marca pode ser feito arrastando e soltando um bloco de texto na tela.
Alterando estilos de texto
Quando estilos de texto são modificados no nível de configurações globais, eles afetarão tudo no nível do guia de marca. Quando modificados no nível do bloco, eles afetarão apenas esse bloco específico.
Texto predefinido
- Navegue para as configurações.
- Insira seu código hexadecimal na caixa de cor do texto.
Isto afetará qualquer texto na página, incluindo blocos de texto.
Texto de bloco-nível
- Passe o mouse sobre o bloco de texto.
- Um editor WYSIWYG aparecerá para alterar fontes, tamanhos, cores de texto e formatação, como adicionar balas ou links para o texto.
- As alterações feitas aqui só afetarão o bloco selecionado.
Tipografia
No momento, usuários não podem carregar ou sincronizar fontes com uma biblioteca para o Guia de Marca. As fontes disponíveis no menu suspenso são originadas do Google Webfonts. Usuários avançados podem adicionar fontes de terceiros usando CSS. Para mais informações visite aPersonalização de guia de marca usando um artigo CSS. A equipe de suporte da Biblioteca não será capaz de ajudá-lo com a construção do seu próprio código.
Blocos de código
O bloco de código funciona com HTML / CSS padrão. Usar este bloco só é recomendado se você tiver conhecimento avançado sobre CSS. O suporte ao cliente não será capaz de ajudá-lo quando você estiver implementando seu próprio código em um guia de marcas. Código será anitizado em um esforço para evitar ataques XSS.
Editando Blocos de Código
Quando um bloco HTML/CSS é adicionado à página, você pode adicionar código personalizado ao guia Branding. O HTML será adicionado ao local específico da página e o CSS se aplicará a todas as áreas da tela especificada para afetar. Uma vez terminado com o código, selecione o ícone de olho para ver as alterações.
CSS também pode ser editado no nível global sob configurações, uma vez que é uma boa prática ter esses estilos definidos no nível superior e em cascata.
Adicionar vídeo usando HTML
O bloco de imagem de flyout não suporta a adição de blocos de conteúdo de vídeo. No entanto, usando o código incorporado do vídeo, o vídeo pode ser adicionado através de arquivos HTML personalizados e de vídeo da Biblioteca. O suporte ao cliente não será capaz de ajudá-lo quando você estiver implementando seu próprio código em um guia de marcas.
- Abra o modal de ativos para o vídeo.
- Navegue até a aba Embed.
- Localize o código incorporado do vídeo e selecione Copiar o link.
- Cole o código no bloco HTML.
Blocos de Sanitização
Algum código e elementos dentro dele serão anitizados para fins de segurança contra ataques XSS.
Excluindo Blocos de Código
Excluindo blocos de código irá remover o bloco e todo o código escrito dentro do bloco. CSS escrito no nível de configurações globais permanecerá a não ser que seja editado nas configurações do flyout.
Movendo Blocos de Código
Mover o bloco de código após HTML e CSS ter sido escrito tem o potencial de quebrar o bloco ou os efeitos pretendidos do código. Para melhores resultados, escreva o código depois que a posição dos blocos for definida.
Adicionar blocos de cor ao seu guia de marca pode ser feito arrastando e soltando a cor na tela.
Fontes de Cor
O bloco de cor é originário da Biblioteca ou Coleção associada ao Guia de Brandas. Se nenhuma cor aparecer no guia de marca, isso significa que nenhuma foi adicionada à biblioteca ou coleção. Para adicionar cores, adicione-as como um ativo na Biblioteca.
Sincronizando Cores
Quando é feita uma mudança nas cores no nível da Biblioteca, a mudança também irá refletir automaticamente dentro do guia de marca. Se uma alteração for feita na biblioteca e a mudança não for refletida no guia Branding, você pode sincronizar manualmente selecionando o botão de sincronização circular no canto superior direito da cor.
Modos de Cor
Você pode alterar quais modos de cor aparecem tanto no flyout quanto na tela.
- Selecione o ícone de configuraçõesno canto superior direito da cor flyout.
- Selecione as caixas de seleção para exibir HEX, RGB e CMYK e selecione Save.
- Um ícone de cópia aparecerá ao lado do valor da cor.