Propósito:

Alterar as configs gerais da marca.

 

Como referência, utilize o ZeroHeight para realizar o cadastro.

 

Passo a Passo:

 

1. Entre no CMS que deseja fazer o cadastro das configs do Style Guide. Vá em Gerenciar > Aparência > Configurações > Core BR - White Label (/admin/appearance/settings/corebr_whitelabel);

 

 

2. Nos campos de ABInBev - Style Guide, clique na seta para abrir um dropdown de opções. Selecione para editar "ABInBev - Menu";

 

3. Edite as seguintes informações:

 

General Settings

 

1. ZeroHeight

 

Na documentação da sua marca, vá em Componentes > Header > Clique para inspecionar a imagem de Header_Desktop.

 

Para pegar especificações de cada item do componente acima, na lista do ZeroHeight clique no componente que deseja visualizar.

 

Ao entrar na imagem do componente, para pegar informações do texto (Exemplo: cor), clique no texto que deseja analisar. Irá apresentar no menu na direita os specs do item selecionado.

 

E para pegar imagens, no menu da direita clique no icon de faca.

 

2. Cadastro

 

Social Media

 

Social Media 1-5:

Icon: Escolha o ícone desejado. Na busca digite o nome da rede social;

Link to Social Media: Informe a URL da rede social selecionada.

 

Para alterar entre 1-5, clique no botão de "..." e clique na rede social que deseja editar.

 

 

Age Gate

 

1. ZeroHeight

 

Na documentação da sua marca, vá em Componentes > Age Gate.

 

Para pegar especificações de cada item do componente acima, na lista do ZeroHeight clique no componente que deseja visualizar.

 

Ao entrar na imagem do componente, para pegar informações do texto (Exemplo: cor), clique no texto que deseja analisar. Irá apresentar no menu na direita os specs do item selecionado.

 

E para pegar imagens, no menu da direita clique no icon de faca.Para pegar especificações de cada item do componente acima, na lista do ZeroHeight clique no componente que deseja visualizar.

 

Ao entrar na imagem do componente, para pegar informações do texto (Exemplo: cor), clique no texto que deseja analisar. Irá apresentar no menu na direita os specs do item selecionado.

 

E para pegar imagens, no menu da direita clique no icon de faca.

 

2. Cadastro

 

Age Gate Texts

 

Age Gate Global Text:

Deixar esse campo em branco, pois se trata de uma configuração do Budweiser Global.

 

Age Gate Ask Text:

Informar o texto principal do Age Gate. Estamos utilizando "Você tem mais de 18 anos?"

 

Age Gate No Choice Link

Informar a URL de redirecionamento caso o usuário informe "Não". Estamos utilizando https://www.ambev.com.br/consumo-responsavel-aviso/, porém, confirme qual link usará antes de inserir.

 

Base Style

Age Gate Logo:

Adicione o logo da marca.

Primary Color:

Informe a cor da fonte do texto base.

 

Background

 

 

Background Desktop:

 

Insira a imagem de fundo dos devices Desktop.

 

Background Mobile:

 

Insira a imagem de fundo dos devices Mobile

 

Footer

1. ZeroHeight

Na documentação da sua marca, vá em Componentes > Footer > Clique para inspecionar a imagem de Footer_Desktop

 

Para pegar especificações de cada item do componente acima, na lista do ZeroHeight clique no componente que deseja visualizar.

 

Ao entrar na imagem do componente, para pegar informações do texto (Exemplo: cor), clique no texto que deseja analisar. Irá apresentar no menu na direita os specs do item selecionado.

 

E para pegar imagens, no menu da direita clique no icon de faca.

 

Cadastro

 

Back to Top (Botão do Footer com a seta para cima, que leva o usuário para o topo ao clicar)

 

Back to Top - Image

 

Insira a imagem do icon de seta para cima. Pegue no ZeroHeight e faça o download do icon em .SVG.

 

• Back to Top - Background Color
  • Selecione a cor de fundo do botão da seta.
• Back to Top - Font Color
  • Selecione a cor da seta.
• Footer Top (Parte superior do footer, onde fica o logo, newsletter, sobre nós e acessibilidade)
  • Site Logo for Footer
    • Insira a imagem da logo que ficará no footer.
  • Footer Top Background Color
    • Insira a cor de fundo do footer superior.
  • Footer Top Font Color
    • Insira a cor da fonte dos links do footer superior.
• Footer Bottom (Parte inferior do footer, onde fica o copyright, SAC, termos de uso, política de privacidade, entre outros)
  • Footer Bottom Background Color
    • Insira a cor de fundo do footer inferior.
  • Footer Bottom Font Color
    • Insira a cor da fonte dos links do footer inferior.
  • Copyright
    • Informe o texto do Copyright. Estamos utilizando: "© 2021 Ambev S.A. Todos os direitos reservados".
  • Additional Information
    • Informe o texto que fica abaixo do Copyright. Estamos utilizando "Beba com moderação. Não compartilhe este conteúdo com menores de idade.".
  •  
  • Buttons
  • 1. ZeroHeight
• Na documentação da sua marca, vá em Componentes > Buttons > Aplcações > Clique para inspecionar a imagem de Mouse Interactions.

Para pegar especificações de cada item do componente acima, na lista do ZeroHeight clique no componente que deseja visualizar.

 

Ao entrar na imagem do componente, para pegar informações do texto (Exemplo: cor), clique no texto que deseja analisar. Irá apresentar no menu na direita os specs do item selecionado.

 

E para pegar imagens, no menu da direita clique no icon de faca

 

2. Cadastro

 

Primary Button

• Light: Fazer cadastro das cores do botão Primário Claro (Os botões que estão no fundo branco).
  • Default Behavior: Estado Normal
  • Hover Behavior: Estado ao Mouse Hover (Quando o usuário coloca o mouse em cima do botão)
  • Pressed Behavior: Estado Pressionado
  • Disabled Behavior: Estado Desativado
    • Background Color: Insira a cor de fundo do botão.
    • Font Color: Insira a cor da fonte.
    • Box Shadow: Insira a cor do sombreamento do botão. Caso não tenha, selecione a cor Transparente.
•  
• • Dark: Fazer cadastro das cores do botão Primário Escuro (Os botões que estão no fundo escuro).
    • Default Behavior: Estado Normal
    • Hover Behavior: Estado ao Mouse Hover (Quando o usuário coloca o mouse em cima do botão)
    • Pressed Behavior: Estado Pressionado
    • Disabled Behavior: Estado Desativado
      • Background Color: Insira a cor de fundo do botão.
      • Font Color: Insira a cor da fonte.
      • Box Shadow: Insira a cor do sombreamento do botão. Caso não tenha, selecione a cor Transparente.

 

 

 

• Border Radius: Selecione o tipo de borda do botão.
  • Border radius none: Selecione essa opção caso os botões da marca sejam quadrados/retangulares;
  • Border radius circle: Selecione essa opção caso os botões da marca sejam arredondados.

 

 

• Secondary Button

  • Light: Fazer cadastro das cores do botão Secundário Claro (Os botões que estão no fundo branco).
    • Default Behavior: Estado Normal (❗O background desse estado sempre será transparente).
    • Hover Behavior: Estado ao Mouse Hover (Quando o usuário coloca o mouse em cima do botão).
    • Pressed Behavior: Estado Pressionado.
    • Disabled Behavior: Estado Desativado (❗O background desse estado sempre será transparente).
      • Background Color: Insira a cor de fundo do botão.
      • Font Color: Insira a cor da fonte.
      • Box Shadow: Insira a cor do sombreamento do botão. Caso não tenha, selecione a cor Transparente.

  

  • Dark: Fazer cadastro das cores do botão Secundário Escuro (Os botões que estão no fundo escuro)
    • Default Behavior: Estado Normal (❗O background desse estado sempre será transparente).
    • Hover Behavior: Estado ao Mouse Hover (Quando o usuário coloca o mouse em cima do botão).
    • Pressed Behavior: Estado Pressionado.
    • Disabled Behavior: Estado Desativado (❗O background desse estado sempre será transparente).
      • Background Color: Insira a cor de fundo do botão.
      • Font Color: Insira a cor da fonte.
      • Box Shadow: Insira a cor do sombreamento do botão. Caso não tenha, selecione a cor Transparente.

  

  • Border Radius: Selecione o tipo de borda do botão.
    • Border radius none: Selecione essa opção caso os botões da marca sejam quadrados/retangulares;
    • Border radius circle: Selecione essa opção caso os botões da marca sejam arredondados.

  

 

 

 

• Tertiary Button

  • Light: Fazer cadastro das cores do botão Secundário Claro (Os botões que estão no fundo branco).
    • Default Behavior: Estado Normal
    • Hover Behavior: Estado ao Mouse Hover (Quando o usuário coloca o mouse em cima do botão)
    • Pressed Behavior: Estado Pressionado
    • Disabled Behavior: Estado Desativado
      • Font Color: Insira a cor da fonte.

  

  • Dark: Fazer cadastro das cores do botão Secundário Escuro (Os botões que estão no fundo escuro)
    • Default Behavior: Estado Normal
    • Hover Behavior: Estado ao Mouse Hover (Quando o usuário coloca o mouse em cima do botão)
    • Pressed Behavior: Estado Pressionado
    • Disabled Behavior: Estado Desativado
      • Font Color: Insira a cor da fonte.

  

  • Icon: Ícone que fica após o link do botão terciário
    • Adicionar o ícone angle-right

  

 

 

Slider

 

1. ZeroHeight

 

Na documentação da sua marca, vá em Componentes > Navigation.

 

Para pegar especificações de cada item do componente acima, na lista do ZeroHeight clique no componente que deseja visualizar.

 

Ao entrar na imagem do componente, para pegar informações do texto (Exemplo: cor), clique no texto que deseja analisar. Irá apresentar no menu na direita os specs do item selecionado.

 

E para pegar imagens, no menu da direita clique no icon de faca.

 

2. Cadastro

 

• Pagination Bullets

  • Observe que só é possível cadastrar uma única cor. Escolha a cor que mais prevalece no design.

  • Color: Informe a cor da navegação em bullet points do carrossel.

    

 

 

 

• Navigation Icons
  • Observe que só é possível cadastrar uma única cor. Escolha a cor que mais prevalece no design.
  • Outter Color
    • Informe a cor da parte externa da seta;
    • Todos os botões está sendo a cor branca com transparência 55%.
  • Inner Color
    • Cor interna do botão;
    • Geralmente é a cor primária da monte.
  • Inner Color Shadow
    • Cor do sombreamento da cor interna do botão.
    • Todos os botões utiliza a mesma cor de Inner Shadow, porém, com transparência de 30%.
  • Left Icon
    • Insira o icon chevron-left.
  • Icons Color
    • Selecione a cor dos icons de seta.
  • Right Icon
    • Insira o icon chevron-right.

 

 

Cards

 

1. ZeroHeight

 

Na documentação da sua marca, vá em Componentes > Cards.

 

2. Cadastro

 

Content (Máscara que fica como fundo de texto em Content Card)

 

• Small SVG
  • Adicionar imagem da máscara do Content Card pequeno e mobile.
• Medium SVG
  • Adicionar imagem da máscara do Content Card médio.
• Large SVG
  • Adicionar imagem da máscara do Content Card grande.

• Box Shadow
  • Select the shadow that will be used on the card

    • No ZeroHeight na listagem de cards, tem as especificações abaixo de cada componente. Encontre qual a configuração de $shadow.

      

 

 

 

• Product List
  • Select the color of description in Product List
    • Selecione a cor do título do produto dentro do carrossel de produtos.
  • Type here the text that will appear on buttons in Product List
    • Informe o texto do botão que apresentará abaixo de cada produto. Estamos utilizando "Conheça".
• Product List by Size
  • Select the color of description in Product List
    • Selecione a cor do título do produto dentro do carrossel de produtos.
  • Type here the text that will appear on buttons in Product List
    • Informe o texto do botão que apresentará abaixo de cada produto. Estamos utilizando "Conheça".

Scrollbar

 

ZeroHeight

 

Na documentação da sua marca, vá em Componentes > X.

 

2. Cadastro

• Background Color Scroll
  • Selecione a cor de fundo do scroll.
• Scroll Button Color
  • Selecione a cor da barra do scroll.