Configuração de anúncios nativos

Creating a Native Ad zone is simple and yet powerfully customizable. You are able to use slightly different processes for setting up a native ad zone depending on your needs:

• Cenário A: Pretende simplesmente configurar uma zona de anúncios, escolher o rácio de aspeto das imagens da zona de anúncios nativa e, em seguida, definir o tamanho da zona de anúncios no seu site para corresponder.
• Cenário B: Pretende configurar a zona de anúncios para corresponder a um tamanho ou rácio de imagem personalizado, de modo a que a zona de anúncios tenha o mesmo aspeto do seu site e se adapte perfeitamente.
• Cenário C: Tem uma zona no seu sítio com um tamanho específico e pretende criar uma zona de anúncios que caiba nela e tenha bom aspeto.

Seja qual for o cenário escolhido, a primeira coisa a fazer é criar uma zona de anúncios nativos.

Criar uma zona de anúncios nativos

Quando tiver sessão iniciada como Editor, clique em Sites e zonas, Nova zona e expanda a secção Nativo, selecione o formato de anúncio nativo Recomendação de widget e clique em Próximo.

Preencha os dados da zona e clique em Próximo.

Cenário A: Layout rápido: Definir rácio de aspeto

Neste cenário, define o rácio de aspeto das imagens no Painel de administração e não é necessário definir o tamanho total da zona de anúncios. Ao utilizar o Quick Layout, a zona de anúncios que criar adaptar-se-á automaticamente ao tamanho do contentor em que a colocar.

Passo 1:

Selecione o separador Disposição rápida. Na secção Desenho do ambiente de trabalho, defina o número de colunas e linhas de anúncios que pretende no ambiente de trabalho.

Passo 2:

Em seguida, escolha o rácio de aspeto das suas imagens no menu pendente Configurações de imagem. Pode escolher entre 1:1, 4:3 ou 16:9, para corresponder às miniaturas no seu site.

Passo 3:

• Depois de ter escolhido a relação de aspeto, utilize a caixa de verificação para escolher se pretende mostrar o texto ou não e, em seguida, decida onde é mostrado.
• Este texto é composto por um Título e uma Descrição. Pode ligá-los e desligá-los individualmente nas secções Título e Descrição, se assim o desejar.
• Verifique a pré-visualização à direita para ver o aspeto da sua zona de anúncios e, se necessário, ajuste novamente as definições.

Passo 4:

• Repita os passos 1-3 acima na secção Layout para telemóvel para configurar a sua zona de anúncios para telemóvel.

Passo 5:

• Verifique a pré-visualização para Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de rutura entre a vista de ambiente de trabalho e a vista móvel no menu pendente Ponto de rutura móvel das Opções avançadas.
• O ponto de interrupção pode ser definido para 800px para iPad, 450px para telemóvel e Não responsivo. Quando alteramos o ponto de rutura, isso muda se as nossas definições na secção Apresentação do ambiente de trabalho afectam o ambiente de trabalho e o iPad, ou apenas o ambiente de trabalho.
• Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.

Passo 6:

• Copie a Etiqueta HTML da zona e adicione-a ao seu sítio.
• A zona de anúncios ajusta-se automaticamente a 100% do contentor em que colocou a etiqueta. Ou seja, quanto maior for o contentor, maior será a zona e os anúncios.

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

Neste cenário, pretende poder alterar o tamanho da imagem e o espaçamento do anúncio para corresponder ao seu sítio. Isto é feito se quiser realmente que os anúncios nativos pareçam fazer parte do conteúdo editorial do seu sítio.

Passo 1:

• Selecione o separador Disposição rápida. Na secção Desenho do ambiente de trabalho, defina o número de colunas e linhas de anúncios que pretende no ambiente de trabalho.

Passo 2:

• No menu pendente Configurações de imagem, selecione Tamanho personalizado e defina a largura e a altura das imagens para corresponderem ao seu sítio. Se o site contiver uma meta tag e for responsivo, quando o site for visualizado, as imagens também responderão à medida que o tamanho do ecrã diminui. As informações sobre o Tamanho do widget e o Tamanho da imagem serão apresentadas no canto superior direito, por cima da pré-visualização.

Passo 3:

• Depois de definir o tamanho da imagem, escolha se pretende mostrar o texto ou não, utilizando a caixa de verificação Texto, e escolha o local onde é mostrado.
• Verifique a pré-visualização à direita para ver o aspeto da sua zona de anúncios e, se necessário, ajuste novamente as definições.

Passo 4:

• Repita os passos 1-3 na secção Layout para telemóvel para configurar a sua zona de anúncios para telemóvel.

Passo 5:

• Na secção Opções avançadas, pode definir quantos pixels de Espaçamento vertical e Espaçamento horizontal pretende à volta de cada anúncio.

---

Nota: A alteração destas definições irá alterar o tamanho total da zona de anúncios.

---

Passo 6:

• Verifique a pré-visualização para Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de rutura entre a vista de ambiente de trabalho e a vista móvel no menu pendente Ponto de rutura móvel das Opções avançadas.
• O ponto de interrupção pode ser definido para 800px para iPad, 450px para telemóvel e Não responsivo. Quando alteramos o ponto de rutura, isso muda se as nossas definições na secção Apresentação do ambiente de trabalho afectam o ambiente de trabalho e o iPad, ou apenas o ambiente de trabalho.
• Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.

Passo 7:

• Copie a Etiqueta HTML da zona e adicione-a ao seu sítio.
• Certifique-se de que o tamanho da zona de anúncios no seu sítio corresponde ao tamanho da zona que acabou de criar.

Cenário C: Layout personalizado: Definir um tamanho de zona fixo

Neste cenário, pretende poder definir o tamanho da zona de anúncios de acordo com as necessidades do seu sítio e ajustar as definições para garantir que os anúncios são bem apresentados.

Passo 1:

Selecione o separador Disposição personalizada. Na secção Desktop Layout, defina a Largura e a Altura da zona de anúncios total que pretende criar.

Passo 2:

Em seguida, selecione o número de Colunas e Linhas de anúncios que pretende apresentar na zona de anúncios. Verifique a pré-visualização à direita para ver quais as definições que funcionam para o tamanho que escolheu.

Passo 3:

Depois de escolher o número de colunas e linhas que pretende, escolha se pretende mostrar texto ou não, utilizando a caixa de verificação Texto, e escolha o local onde é mostrado utilizando o menu pendente Posição do texto.

Passo 4:

Repita os passos 1-3 na secção Layout para telemóvel para configurar a sua zona de anúncios para telemóvel.

Passo 5:

• Verifique a pré-visualização para Desktop e Mobile no lado direito do ecrã. Pode definir onde ocorre o ponto de rutura entre a vista de ambiente de trabalho e a vista móvel no menu pendente Ponto de rutura móvel das Opções avançadas.
• O ponto de interrupção pode ser definido para 800px para iPad, 450px para telemóvel e Não responsivo. Quando alteramos o ponto de rutura, isso muda se as nossas definições na secção Apresentação do ambiente de trabalho afectam o ambiente de trabalho e o iPad, ou apenas o ambiente de trabalho.
• Quando estiver satisfeito com o aspeto da pré-visualização, clique em Criar.

Passo 6:

Copie a Etiqueta HTML da zona e adicione-a ao seu sítio.

Selecionar os que não respondem no Mobile Breaking Point

• Quando o ponto de rutura móvel estiver definido como Não responde em Opções avançadas, o modal abaixo aparecerá no ecrã.

• Ao clicar em CONTINUAR no modal, o esquema do ambiente de trabalho para anúncios será apresentado em todos os dispositivos, incluindo telemóveis e tablets.
• O layout móvel deixará de ser editável pelo utilizador quando a opção Não responder for selecionada.
• The image settings are updated to default custom size (Width - 200px and height - 200px) if not saved previously.  

Utilizar CSS personalizado com anúncios nativos

In the Custom CSS section, you can add custom CSS to ensure that the ad zone displays correctly on your site. The most important CSS classes are provided as a starting point. Find out more about CSS here.

---

Nota: Tenha em atenção que as alterações ao CSS personalizado não serão apresentadas na pré-visualização: apenas serão apresentadas no seu próprio site.

---

Classes CSS para anúncios nativos

Existem cinco classes CSS fornecidas na caixa para começar, e pode colar estilos adicionais conforme achar adequado. Estas cinco classes CSS estilizam os elementos mais importantes do anúncio nativo da seguinte forma:

Classe	Ação
.exo-native-widget-outer-container	Estiliza todo o contentor do widget.
.exo-native-widget-item	Estiliza os contentores dos artigos 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 utilizando estas classes CSS adicionais:

Classe	Ação
.exo-native-widget	Envolve todo o widget.
.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úncios.
.exo-native-widget-item-image-wrapper	Envolve a imagem na caixa de anúncio.
.exo-native-widget-item-image-ratio	Define o rácio de aspeto 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 inclui o título, a descrição e a marca do invólucro do anúncio.
.exo-native-widget-item-brand	Estilos da marca do anúncio.

Exemplos

• Os exemplos seguintes mostram como os Editores podem adaptar os estilos CSS na configuração da Zona de anúncios nativa com base nas suas necessidades.

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

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

1. Para modificar o tamanho da caixa de texto.

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

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

 .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: 15px;
    color: white !important
    }
.exo-native-widget-item-text {
  margin-left: 15px;
  color: white !important
}

1. Para curvar os limites da imagem.

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

1. Para definir um estilo para o tipo de letra. Desta forma, o Editor pode utilizar tipos de letra disponíveis no seu sítio Web e outros que não os disponíveis na configuração da Zona.

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

1. Para adicionar preenchimento entre a imagem e o texto, para que o texto possa ficar perto ou longe da imagem. Também pode utilizar padding-bottom para adicionar preenchimento por baixo do texto.

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

1. Para personalizar a cor de fundo da caixa de texto de modo a afetar apenas a caixa de texto que se encontra por baixo de cada imagem, deixando o espaço entre as imagens e as caixas transparente ou com uma cor de fundo diferente.

 .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: 15px;
}

.exo-native-widget-item-text {
margin-left: 15px;
}

1. Para adicionar um contorno que cubra uma imagem e a respectiva caixa de texto. Isto ajudará a separar cada imagem dentro desse Native Widget.

 .exo-native-widget-item-container {
  border: 2px #0073B7 solid !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important
}

.exo-native-widget-outer-container {
  margin-bottom: 10px !important;
  margin-right: 10px !important
}