Saltar para o conteúdo principal

Configuração de anúncios nativos

A criação de uma zona Anúncio nativo é simples, mas extremamente personalizável. É possível utilizar processos ligeiramente diferentes para configurar uma zona de anúncio nativo, consoante as suas necessidades:

  • 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.

Create Zone Native

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:

Native Step 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:

Native Step 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:

Native Step 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:

Native Step 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:

Native Step 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:

Native Step 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:

Native Step 7

  • 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:

Native Step 8

  • 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:

Native Step 9

  • 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:

Native Step 10

  • 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:

Native Step 11

  • 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:

Native Step 12

  • 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:

Native Step 13

  • 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:

Native Step 13

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:

Native Step 14

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:

Native Step 15

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:

Native Step 15

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:

Native Step 16

  • 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:

Native Step 17

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ã.

Unresponsive2

Unresponsive3

  • 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

banner

Na secção Custom CSS, pode adicionar CSS personalizadas para garantir que a zona de anúncios é apresentada 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 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:

native ad CSS

ClasseAção
.exo-native-widget-outer-containerEstiliza todo o contentor do widget.
.exo-native-widget-itemEstiliza os contentores dos artigos individuais.
.exo-native-widget-item-imageEstiliza a imagem.
.exo-native-widget-item-titleEstiliza o texto do título.
.exo-native-widget-item-textEstiliza o texto da descrição

Classes CSS adicionais

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

ClasseAção
.exo-native-widgetEnvolve todo o widget.
.exo-native-widget-headerEnvolve os elementos do cabeçalho.
.exo-native-widget-outer-containerEnvolve todos os anúncios.
.exo-native-widget-item-containerEnvolve a caixa de anúncios.
.exo-native-widget-item-image-wrapperEnvolve a imagem na caixa de anúncio.
.exo-native-widget-item-image-ratioDefine o rácio de aspeto da imagem do anúncio.
.exo-native-widget-item-contentEnvolve todo o texto da caixa de anúncio.
.exo-native-widget-item-content-boxIsto inclui o título, a descrição e a marca do invólucro do anúncio.
.exo-native-widget-item-brandEstilos 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.

native ad CSS example


.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.

native ad CSS example


.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.

native ad CSS example


.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.

native ad CSS example


.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.

native ad CSS example


.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.

native ad CSS example


.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.

native ad CSS example


.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.

native ad CSS example


.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
}