> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/pt/sites-e-zonas/configuracao-de-anuncios-nativos.md). # Configuração de Anúncios Nativos Criando uma [Anúncio nativo](/publishers/pt/sites-e-zonas/create-zone.md#recommendation-widget) 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](/files/5aa9bcda920d80e863f4d94cc837bb6c125c651c) Preencha os detalhes da zona e clique em **Seguinte**. {% tabs %} {% tab title="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. {% stepper %} {% step %} ### Passo 1 ![Passo Nativo 1](/files/04d873421b1bbb54d320e3693edd80acc5121625) 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. {% endstep %} {% step %} ### Passo 2 ![Passo Nativo 2](/files/cdfabcf9648af48254931c33a4269057daa1475f) 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. {% endstep %} {% step %} ### Passo 3 ![Passo Nativo 3](/files/cacc026a9cde1ba06d9d20a9d3d75a281e2a4879) * 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. {% endstep %} {% step %} ### Passo 4 ![Passo Nativo 4](/files/3dd0ab8acbed7800f9f637e299a5e8e84785b7f9) * Repita os passos 1-3 acima na secção de **Layout para Mobile** para configurar a sua zona de anúncio para mobile. {% endstep %} {% step %} ### Passo 5 ![Passo Nativo 5](/files/4d68d5ac6f3f0909709ca06406a7ae6c46627b8a) * 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**. {% endstep %} {% step %} ### Passo 6 ![Passo Nativo 6](/files/ba44e1b2f163624002b416e48a0c54cc6295bb39) * 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. {% endstep %} {% endstepper %} {% endtab %} {% tab title="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 site. Faria isto se realmente quiser que os anúncios nativos pareçam fazer parte do conteúdo editorial do seu site. {% stepper %} {% step %} ### Passo 1 ![Passo Nativo 7](/files/3b043d6396b27dc048b1e4838888c0f30bcf0809) * 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. {% endstep %} {% step %} ### Passo 2 ![Passo Nativo 8](/files/b5a5456048c4ed8eaa1601590a67eb2f7a3a2ff5) * No **Definições da Imagem** menu suspenso, selecione **Tamanho Personalizado** e defina a largura e a altura das imagens para corresponder ao seu site. 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. Informações sobre o **Tamanho do Widget** e o **Tamanho da Imagem** serão exibidas no canto superior direito acima da pré-visualização. {% endstep %} {% step %} ### Passo 3 ![Passo Nativo 9](/files/f4467447f5ee9280845da78393cbd2ec3948a7fc) * Depois de definir o tamanho da imagem, escolha se quer mostrar texto ou não, usando a caixa de seleção de **Texto** , e escolha onde ele é exibido. * 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. {% endstep %} {% step %} ### Passo 4 ![Passo Nativo 10](/files/e189edc019bbc35f450c83392592ef959e2d89dd) * Repita os passos 1-3 na **Layout para Mobile** para configurar a sua zona de anúncio para mobile. {% endstep %} {% step %} ### Passo 5 ![Passo Nativo 11](/files/d83b55f400d01b83d5dc2b18bc4b5ef8b257297d) * No **Opções avançadas** secção, pode definir quantos píxeis de **Espaçamento Vertical** e **Espaçamento Horizontal** pretende em torno de cada anúncio. {% hint style="info" %} **Nota**: Alterar estas definições irá alterar o tamanho global da zona de anúncio. {% endhint %} {% endstep %} {% step %} ### Passo 6 ![Passo Nativo 12](/files/4d68d5ac6f3f0909709ca06406a7ae6c46627b8a) * 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**. {% endstep %} {% step %} ### Passo 7 ![Passo Nativo 13](/files/ba44e1b2f163624002b416e48a0c54cc6295bb39) * Copie o **Tag HTML da Zona** e adicione-o ao seu site. * Certifique-se de que o tamanho da zona de anúncio no seu site corresponde ao tamanho da zona que acabou de criar. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Cenário C: Layout Personalizado: Definir um tamanho fixo da zona" %} Neste cenário, pretende poder definir o tamanho da zona de anúncio para corresponder ao que o seu site precisa e ajustar as definições para garantir que os anúncios são exibidos corretamente. {% stepper %} {% step %} ### Passo 1 ![Passo Nativo 13](/files/feabf34cebb3b76ead39e0cdf638cbe4f7387f10) Selecione o **Layout Personalizado** separador. Na **Layout para Desktop** secção, defina a **Largura** e o **Altura** da Zona de Anúncios total que deseja criar. {% endstep %} {% step %} ### Passo 2 ![Passo Nativo 14](/files/7cfb943c2512a9d25b831be3e88cf004e7f87983) Em seguida, escolha quantos **Colunas** e **Linhas** de anúncios pretende exibir na zona de anúncio. Verifique a pré-visualização à direita para ver que definições funcionam para o tamanho que escolheu. {% endstep %} {% step %} ### Passo 3 ![Passo Nativo 15](/files/ac724f5946f3a2bc5275602a5706fb7991bba1df) Depois de escolher quantas colunas e linhas pretende, escolha se quer mostrar texto ou não, usando a caixa de seleção de **Texto** , e escolha onde ele é exibido usando o menu suspenso de **Posição do Texto** . {% endstep %} {% step %} ### Passo 4 ![Passo Nativo 15](/files/fc7c5cc0caf136870d7b4b32c4fa9a7ed59afefb) Repita os passos 1-3 na **Layout para Mobile** para configurar a sua zona de anúncio para mobile. {% endstep %} {% step %} ### Passo 5 ![Passo Nativo 16](/files/4d68d5ac6f3f0909709ca06406a7ae6c46627b8a) * 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**. {% endstep %} {% step %} ### Passo 6 ![Passo Nativo 17](/files/ba44e1b2f163624002b416e48a0c54cc6295bb39) Copie o **Tag HTML da Zona** e adicione-o ao seu site. {% endstep %} {% endstepper %} {% endtab %} {% endtabs %} ## 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](/files/85d9f25993a38f0e884ea992d9daa1c6c4e8f921) ![Não responsivo3](/files/fd3bd1c3915da37f344a8a5d6fa501db7953ba81) * 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](/files/20510ff35cf42c67e80745d474cf735c20536cb1) 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](https://www.w3schools.com/css/default.asp). {% hint style="info" %} **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. {% endhint %} ### 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](/files/310ebc6af61de20459d2fa41271f68a44afc6b67) | 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. {% stepper %} {% step %} #### 1. Para colocar a caixa de texto sobre a imagem. ![exemplo de CSS de anúncio nativo](/files/fcb061b6eb73bc9c1d1a40445bd948de14745d44) ```css .exo-native-widget-item-content { position: absolute !important; bottom: 0px !important; z-index: 3 !important; top: unset !important; height: 50px !important; left: 15px; } ``` {% endstep %} {% step %} #### 2. Para modificar o tamanho da caixa de texto. ![exemplo de CSS de anúncio nativo](/files/439e1e9e1793359d21d9e9bb4a357dff0127f558) ```css .exo-native-widget-item-content { height: 50px !important; } ``` {% endstep %} {% step %} #### 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](/files/1349afa44e90905379fa548f834f93c711c56919) ```css .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; } ``` {% endstep %} {% step %} #### 4. Para arredondar as bordas da imagem. ![exemplo de CSS de anúncio nativo](/files/61c0589c3fc07a133890d878659786e0db0b8ff2) ```css .exo-native-widget-item-image { border-radius: 5% !important; } ``` {% endstep %} {% step %} #### 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](/files/a16c585a076a4bd0d15b1d040aa6989f45e16148) ```css .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand { font-family: fantasy !important; } ``` {% endstep %} {% step %} #### 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](/files/17edd4ea78db4b30c99daf7cd8375852178cb803) ```css .exo-native-widget-item-content { padding: 30px !important; } ``` {% endstep %} {% step %} #### 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](/files/7ca05a332464addd77c0de77b627c55e5f4b3c6f) ```css .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; } ``` {% endstep %} {% step %} #### 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](/files/117b80186f002173800f5116f52f4cb16067e050) ```css .exo-native-widget-item-container { border: 10px #0073B7 solid !important; padding: 10px !important; } .exo-native-widget-outer-container { margin: 10px !important; } ``` {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.exoclick.com/publishers/pt/sites-e-zonas/configuracao-de-anuncios-nativos.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.