Configuração de Anúncio Nativo

Criando uma Anúncio nativo zona é simples e, ainda assim, poderosamente personalizável. Você pode usar processos ligeiramente diferentes para configurar uma zona de anúncio nativo, dependendo das suas necessidades:

• Cenário A: Você simplesmente quer configurar uma zona de anúncio, escolher a proporção das imagens da zona de anúncio nativo e depois definir o tamanho da zona de anúncio no seu site para corresponder.
• Cenário B: Você quer configurar a zona de anúncio para corresponder a um tamanho ou proporção de imagem personalizado, para que a zona de anúncio tenha a mesma aparência do seu site e se encaixe perfeitamente.
• Cenário C: Você tem uma zona no seu site de um tamanho específico e quer criar uma zona de anúncio que se encaixe nela e fique boa.

Seja qual for o cenário que você escolher, a primeira coisa que precisa fazer é criar uma zona de Anúncio Nativo.

Criando uma Zona de Anúncio Nativo

Quando estiver autenticado como Publisher, clique em Sites e Zonas, Nova zona, e expanda a Nativo secção, selecione o formato de Anúncio Nativo Widget de Recomendação e clique em Seguinte.

Criar Zona Nativa

Preencha os detalhes da zona e clique em Seguinte.

Cenário A: Layout Rápido: Definir proporção

Neste cenário, você define a proporção das imagens no Painel de Administração, e não há necessidade de definir o tamanho total da zona de anúncios. Ao usar o Layout Rápido, a zona de anúncio que você criar se ajustará automaticamente ao tamanho do contentor em que a colocar.

1

Passo 1

Passo Nativo 1

Selecione o Layout Rápido separador. Na Layout para Desktop secção, defina o número de colunas e linhas de anúncios que pretende no desktop.

2

Passo 2

Passo Nativo 2

Em seguida, escolha a proporção das suas imagens no menu suspenso de Definições da Imagem . Pode escolher entre 1:1, 4:3 ou 16:9, para corresponder às miniaturas do seu site.

3

Passo 3

Passo Nativo 3

• Depois de escolher a proporção, use a caixa de seleção para escolher se pretende mostrar texto ou não e, em seguida, decida onde ele será exibido.
• Este texto consiste num Título e uma Descrição. Pode ativá-los e desativá-los individualmente nas Título e Descrição secções, se quiser.
• Verifique a pré-visualização à direita para ver como a sua zona de anúncio fica e ajuste as definições novamente, se necessário.

4

Passo 4

Passo Nativo 4

• Repita os passos 1-3 acima na secção de Layout para Mobile para configurar a sua zona de anúncio para mobile.

5

Passo 5

Passo Nativo 5

• Verifique a pré-visualização para ambos Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de quebra entre a vista de desktop e mobile no menu suspenso de Ponto de quebra para mobile de Opções avançadas.
• O ponto de quebra pode ser definido para 800px para iPad, 450px para mobile e Não responsivo. Quando alteramos o ponto de quebra, isso muda se as nossas definições na secção Layout para Desktop afetam o desktop e o iPad, ou apenas o próprio desktop.
• Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.

6

Passo 6

Passo Nativo 6

• Copie o Tag HTML da Zona e adicione-o ao seu site.
• A zona de anúncios ajusta-se automaticamente a 100% do contentor onde coloca a tag. Ou seja, quanto maior o contentor, maiores serão tanto a zona como os anúncios.

Cenário B: Layout Rápido: Definir um tamanho de imagem personalizado

Cenário C: Layout Personalizado: Definir um tamanho fixo da zona

Selecionar Não responsivo no Ponto de quebra para mobile

• Quando o Ponto de quebra para mobile está definido como Não responsivo em Opções avançadas, a modal abaixo aparecerá no ecrã.

Não responsivo2

Não responsivo3

• Ao clicar em CONTINUAR na modal, será apresentado o layout para desktop dos anúncios em todos os dispositivos, incluindo mobile e tablet.
• O layout para mobile deixará de ser editável pelo utilizador quando Não responsivo for selecionado.
• As definições de imagem são atualizadas para o tamanho personalizado predefinido (Largura - 200px e altura - 200px) se não tiverem sido guardadas anteriormente.

Usar CSS Personalizado com Anúncios Nativos

banner

No CSS Personalizado secção, pode adicionar CSS personalizado para garantir que a zona de anúncio é exibida corretamente no seu site. As classes CSS mais importantes são fornecidas como ponto de partida. Saiba mais sobre CSS aqui.

Nota: Tenha em atenção que as alterações ao CSS Personalizado não serão mostradas na pré-visualização: só aparecerão no seu site.

Classes CSS para anúncios nativos

Há cinco classes CSS fornecidas na caixa para começar, e pode colar formatação adicional conforme entender. Estas cinco classes CSS estilizam os elementos mais importantes do anúncio nativo da seguinte forma:

CSS do anúncio nativo

Classe	Ação
.exo-native-widget-outer-container	Estiliza todo o contentor do widget.
.exo-native-widget-item	Estiliza os contentores dos itens individuais.
.exo-native-widget-item-image	Estiliza a imagem.
.exo-native-widget-item-title	Estiliza o texto do título.
.exo-native-widget-item-text	Estiliza o texto da descrição

Classes CSS adicionais

Também pode estilizar o anúncio nativo usando estas classes CSS adicionais:

Classe	Ação
.exo-native-widget	Envolve o widget inteiro.
.exo-native-widget-header	Envolve os elementos do cabeçalho.
.exo-native-widget-outer-container	Envolve todos os anúncios.
.exo-native-widget-item-container	Envolve a caixa de anúncio.
.exo-native-widget-item-image-wrapper	Envolve a imagem na caixa de anúncio.
.exo-native-widget-item-image-ratio	Define a proporção da imagem do anúncio.
.exo-native-widget-item-content	Envolve todo o texto da caixa de anúncio.
.exo-native-widget-item-content-box	Isto envolve o título, a descrição e a marca do contentor do anúncio.
.exo-native-widget-item-brand	Estiliza a marca do anúncio.

Exemplos

• Os exemplos seguintes mostram como os Publishers podem adaptar os estilos CSS na configuração da Zona de Anúncio Nativo de acordo com as suas necessidades.

1

1. Para colocar a caixa de texto sobre a imagem.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

2

2. Para modificar o tamanho da caixa de texto.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-content {
      height: 50px  !important;
   }

3

3. Para colocar a caixa de texto sobre a imagem e adicionar um fundo à caixa de texto com opacidade.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

4

4. Para arredondar as bordas da imagem.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }   

5

5. Para definir um estilo para a fonte. Desta forma, o Publisher pode usar fontes disponíveis no seu site e outras além das disponíveis na configuração da Zona.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

6

6. Para adicionar espaçamento entre a imagem e o texto, para que o texto possa ficar mais perto ou mais longe da imagem. Também pode usar padding-bottom para adicionar espaçamento abaixo do texto.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-content {
    padding: 30px !important;
    }

7

7. Para personalizar a cor de fundo da caixa de texto para que afete apenas a caixa de texto que fica abaixo de cada imagem, deixando o espaço entre imagens e caixas transparente ou com uma cor de fundo diferente.

exemplo de CSS de anúncio nativo

 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

8

8. Para adicionar uma borda que cubra uma imagem e a sua caixa de texto. Isto ajudará a separar cada imagem dentro desse Widget Nativo.

exemplo de CSS de anúncio nativo

.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}