O Skin Ads é um recurso avançado que transforma o visual do portal logo no primeiro scroll, aplicando um background imersivo com imagens de alta qualidade e cores personalizadas. Essa solução é ideal para dar destaque a campanhas publicitárias, editoriais especiais ou datas comemorativas, elevando a experiência do usuário com um layout impactante e totalmente integrado ao conteúdo.
A tecnologia desenvolvida pela Seox permite aplicar o Site Skin em páginas específicas, como a home, páginas de editorias ou matérias individuais, com total liberdade criativa. O sistema conta com filtros inteligentes e controles visuais que garantem harmonia entre o background e os elementos do site, respeitando a identidade da marca e mantendo a legibilidade. É a união perfeita entre design, performance e estratégia comercial, pronta para valorizar sua entrega publicitária.
Configurações
1 Seox Store
Acesse o menu “Seox Store” e ative o card “Anúncios Skin”.
2 Aba Anúncios Skin
Um novo menu chamado “Anúncios Skin” será adicionado ao painel do WordPress. Nele, você poderá acessar a lista completa de campanhas ativas e anteriores, ou clicar em “Adicionar Anúncio Skin” para criar uma nova campanha.
No início do processo de criação, você deve atribuir um nome à campanha, esse nome é apenas para fins de organização interna, e escolher se deseja configurar o anúncio por meio do Google Ad Manager ou utilizar uma imagem estática personalizada.
3 Campos de integração com o Google Ad Manager
Nos primeiros campos do bloco, você deverá inserir o ID do bloco de anúncio previamente configurado na sua conta do Google Ad Manager. Há um campo específico para o bloco desktop, outro para o bloco mobile, além de um terceiro campo destinado ao ID do cliente.
Este tutorial não aborda em profundidade o processo de criação de campanhas no Ad Manager. Portanto, para utilizar essa configuração corretamente, é fundamental que você já tenha familiaridade com o funcionamento e a estrutura de campanhas dentro da plataforma.
4 Configurando imagem estática
Ao clicar na aba “Imagem”, você poderá configurar duas versões da arte para o envelopamento do portal: uma para desktop e outra para mobile. Para garantir que o Site Skin funcione corretamente e mantenha uma boa experiência visual em diferentes resoluções, é essencial seguir o gabarito abaixo.
Gabarito Desktop:
A imagem deve ter um tamanho total de 1920×1000 pixels. No entanto, a área segura para inserção de textos e elementos principais, ou seja, aquela que será exibida integralmente na maioria das telas, corresponde a 1320×320 pixels, posicionada centralmente (representada pela área verde no exemplo acima).
As laterais da imagem, onde há a indicação “Destinada para grafismos de preenchimento de layout”, podem conter fundos, texturas e grafismos complementares. No entanto, esses espaços são variáveis conforme a resolução e tamanho da tela do usuário, e por isso não é recomendado inserir textos ou elementos importantes nas extremidades, pois eles podem ser cortados ou distorcidos em determinadas visualizações.
Gabarito Mobile:
Para a versão mobile, a arte deve ter o formato quadrado, com dimensões de 620×620 pixels. Essa imagem será exibida logo no primeiro scroll da tela, deslocando o conteúdo da página para baixo. Por se tratar de um formato mais direto, ele possui menos restrições em relação à composição visual, oferecendo mais liberdade criativa no desenvolvimento da peça.
Atenção:
Para garantir a performance ideal do portal, é fundamental utilizar imagens no formato .svg. Por se tratar de um formato vetorial, o SVG é extremamente leve e escalável, o que o torna ideal para aplicações web.
Para garantir que o arquivo .svg esteja configurado corretamente, clique com o botão direito sobre ele e abra em um editor de texto, como o Bloco de Notas. Verifique se o código inicia com a seguinte linha:
<svg width=”1920″ height=”100″
Se as informações de width e height não estiverem presente, adicione manualmente o código acima no início da marcação SVG e salve o arquivo. Isso garante que o navegador interprete corretamente as dimensões da arte ao carregá-la no portal.
5 Adicione link, selecione a cor de fundo e o comportamento da arte
Agora é o momento de definir o link de destino da campanha, ou seja, para onde o usuário será direcionado ao interagir com o banner. Para isso, basta inserir a URL desejada no campo “Link da Campanha”.
Em seguida, configure o campo cor de fundo da tela. Se sua arte possui, por exemplo, um fundo preto, você pode selecionar a mesma cor no campo “Seletor de Cor de Fundo”. Isso cria um efeito visual de continuidade, dando a impressão de uma arte infinita, que se estende além da imagem principal.
O campo “Comportamento Fixo” permite que a arte fique fixada no fundo da tela, sem se mover durante o scroll. Dessa forma, o banner permanece visível o tempo todo, reforçando a presença da marca independentemente da rolagem do conteúdo.
Essas configurações se aplicam exclusivamente à versão desktop e foram pensadas para ampliar o impacto visual das campanhas sem comprometer a navegação.
6 Definindo Regras e Filtros
A primeira etapa das configurações de regras diz respeito ao período de exibição da campanha. Você pode optar por deixá-la ativa por tempo indeterminado, mantendo-a no ar até que seja desativada manualmente. Alternativamente, é possível definir uma data de início e término, permitindo que o sistema ative e encerre a campanha automaticamente, com base nos prazos configurados nos campos de seleção.
7 Locais de Aplicação
Na etapa final, você definirá onde o Skin Ads será exibido no portal. É possível configurar a campanha para aparecer exclusivamente na home, em uma categoria específica, em uma tag, em uma notícia individual ou, se preferir, em todo o portal. Essa flexibilidade permite adaptar a entrega de acordo com o público da campanha e os objetivos do anunciante.
Configurações:
Página Inicial: exibe o Skin Ads na home do portal.
Páginas de Editorias e Tags: exibe o anúncio em todas as categorias e em todas as páginas de tags.
Páginas de Matérias: exibe em todas as notícias publicadas no portal.
Página de Última Notícia: exibe especificamente na página de última notícia.
8 Seleção Avançada
Nesta seção, você poderá definir exceções ou inclusões específicas para a exibição do Skin Ads. Enquanto a configuração anterior aplica regras gerais para todas as páginas de uma categoria, tag ou conteúdo, aqui é possível personalizar a exibição em nível individual, escolhendo quais matérias, categorias ou tags devem ou não receber o anúncio. É uma forma prática de adaptar a campanha a casos específicos, oferecendo mais controle e flexibilidade na estratégia de veiculação.
Primeira Regra:
Na aba Seleção Avançada, você encontrará três campos de segmentação: um para matérias específicas, outro para editorias (categorias) e um terceiro para tags. Esses campos permitem definir com mais precisão onde o Skin Ads será exibido.
Antes de configurar os filtros, é importante entender como o sistema irá interpretar as regras. Você poderá escolher entre dois modos de comportamento:
- Qualquer condição verdadeira (OR): o anúncio será exibido se pelo menos uma das condições for atendida.
- Todas as condições verdadeiras (AND): o anúncio será exibido somente se todas as condições forem atendidas ao mesmo tempo.
Exemplos práticos:
- Modo “Todas as condições verdadeiras (AND)”
Se você selecionar a categoria Esporte e a tag Futebol, o Skin Ads será exibido somente nas matérias que pertencem à categoria Esporte e que também estejam marcadas com a tag Futebol ao mesmo tempo. - Modo “Qualquer condição verdadeira (OR)”
Com a mesma seleção — categoria Esporte e tag Futebol — o Skin Ads será exibido em todas as matérias da categoria Esporte e também em todas as matérias que tenham a tag Futebol, mesmo que não pertençam à mesma notícia.
Segunda Regra: Configurações de Matérias
Aqui, você poderá definir se o Skin Ads deve ser exibido em uma matéria específica ou, ao contrário, se ele deve aparecer em todas as matérias do portal, exceto naquelas que você escolher para ocultar.
Terceira Regra: Configurações de Editoria
Aqui, você poderá definir se o Skin Ads deve ser exibido em uma editoria específica ou, ao contrário, se ele deve aparecer em todas as editorias do portal, exceto naquelas que você escolher para ocultar.
Quarta Regra: Configurações de Tags
Aqui, você poderá definir se o Skin Ads deve ser exibido em uma tag específica ou, ao contrário, se ele deve aparecer em todas as tags do portal, exceto naquelas que você escolher para ocultar.
9 Publicar e limpar o cache
Para finalizar, clique no botão “Publicar” localizado na sidebar direita da tela. Com isso, o Skin Ads será ativado e passará a ser exibido no portal conforme as configurações definidas.
Atenção:
Após publicar o Skin Ads, é essencial limpar o cache geral do portal para que a campanha seja exibida corretamente aos usuários.
Para isso, vá até a aba “Controlar Cache” > “Limpar Cache” e clique no botão “Limpar todo o Cache”.
Essa ação deve ser realizada por um usuário com perfil de Administrador, pois apenas esse nível de acesso permite a execução da limpeza completa do cache.
