Configurações do pop-up da web

Use o painel Configurações do pop-up para estilizar e posicionar um layout de conteúdo de pop-up da web. As abas de página e + Adicionar página ficam na parte superior do painel. Consulte Trabalhar com várias páginas.

As Configurações gerais abrangem a aparência e o posicionamento de todo o pop-up. A Página atual abrange a mídia e o tamanho da página que você está editando.

Nota

Essas configurações controlam apenas o design do pop-up. As configurações de público, segmentação de página, atraso, frequência e lançamento são configuradas na campanha de pop-up da web.

Imagens e vídeo

Se o layout incluir um ou mais blocos de mídia, abra a Página atual. Cada bloco de mídia tem uma pré-visualização e controles.

1. Clique em Alterar imagem para escolher um arquivo do Armazenamento de mídia do seu projeto, ou cole ou edite o URL da imagem diretamente.
2. Defina como a imagem preenche seu quadro com Ajuste (Natural, Cobrir ou Conter). Ajuste não é exibido para uma imagem de fundo, que sempre cobre sua área.
3. Opcionalmente, suavize a imagem com Desfoque (0 a 20 px).
4. Apenas para mídia de fundo, use Escurecer (0 a 100%) para adicionar uma camada escura para que o texto sobre a imagem permaneça legível.

Imagem do tema escuro

Com o tema escuro ativado, cada bloco de imagem adiciona uma linha de Imagem do tema escuro.

1. Clique em Alterar imagem ou defina o URL da imagem (tema escuro) para escolher uma imagem diferente para o modo escuro (por exemplo, um logotipo com tinta escura).
2. Deixe em branco para continuar mostrando o URL da imagem claro em ambos os esquemas.

A imagem do tema escuro se aplica em todos os lugares onde a imagem desse bloco é exibida, incluindo uma imagem de fundo ou um pôster de vídeo.

Vídeo

1. Defina Mídia como Vídeo.
2. Insira um URL do vídeo: um link direto para o arquivo de vídeo. O vídeo aceita apenas um URL externo. Você não pode enviar um vídeo para o Armazenamento de mídia. Exporte-o como MP4 (vídeo H.264, áudio AAC) com “início rápido” ativado (às vezes chamado de “otimizado para web”), para que o navegador possa começar a reproduzir antes que o arquivo inteiro seja baixado. Se o URL não carregar, os visitantes verão apenas o pôster.
3. Loop está ativado por padrão, então o vídeo é reproduzido continuamente. Desative-o para parar após uma reprodução.
4. Ative Mostrar controles para exibir os controles de reprodução, pausa e volume integrados do navegador. Os vídeos sempre começam sem som. Sem essa opção, os visitantes não têm como ligar o som.
5. Opcionalmente, defina um URL do pôster: a imagem exibida enquanto o vídeo carrega. Recomendado. Em um script de pop-up mais antigo que não suporta vídeo, o pôster é a única coisa exibida. Deixe-o em branco, e esse visitante não verá nada onde o vídeo estaria.

Layout de mídia

Alguns layouts também adicionam uma seção de Variáveis de modelo com configurações de posicionamento para o bloco de mídia. Defina a Largura da imagem (parte da largura do pop-up, como uma porcentagem) e a Posição da imagem (Esquerda ou Direita) quando o layout tiver mídia ao lado do texto.

A seção Variáveis de modelo só aparece quando o layout atual tem configurações como estas. Em um layout de barra inferior, ela oferece Largura dos botões em vez de controles de imagem.

Tamanho e estilo do pop-up

1. Em Página atual → TAMANHO, deixe Largura e Altura em branco para um pop-up que se ajusta ao seu conteúdo, ou defina um tamanho fixo em pixels. Em um pop-up com várias páginas, cada página tem seu próprio tamanho.
2. Ative Altura total quando a página deve preencher a altura disponível.
3. Em Configurações gerais, defina o Raio do canto e a Sombra para o arredondamento dos cantos e a sombra projetada do pop-up.
4. Escolha a Animação: como o pop-up aparece (Padrão, Nenhuma, Esmaecer ou Deslizar).

Com o tema escuro ativado, a Sombra segue o seletor de esquema sol/lua. Defina o seletor como Escuro para editar a sombra da paleta escura separadamente da clara. Uma sombra ajustada para uma página clara geralmente é invisível em uma escura, então as duas geralmente precisam de valores diferentes. Deixe a sombra escura intacta para continuar usando o valor da Sombra clara em ambos os esquemas.

Cores

1. Clique em Cores para expandir a paleta de cores do pop-up.
2. Defina o Plano de fundo e o Destaque (botões) para o fundo do pop-up e a cor de destaque aplicada aos botões.
3. Defina o Texto e o Texto secundário para o corpo do texto e para textos secundários, como legendas e títulos.
4. Se o layout tiver texto sobre uma imagem de fundo, defina o Texto sobre a imagem para esse texto.

Modo escuro

1. Em Cores, ative Ativar tema escuro para dar ao pop-up uma segunda paleta para visitantes cujo dispositivo está configurado para um esquema de cores escuras. Com ele desativado, o pop-up sempre renderiza com a paleta clara acima, para todos os visitantes.
2. Use o seletor sol/lua acima dos campos de cor para escolher qual paleta você está editando. A tela é redesenhada nesse esquema.
3. Clique em Automático a partir do claro para (re)gerar a paleta escura a partir das cores claras atuais. Fundos e superfícies ficam escuros, e o texto fica claro. Destaque e Texto sobre a imagem são mantidos inalterados. Edite qualquer um dos cinco campos depois para ajustar.

Desativar Ativar tema escuro novamente mantém a paleta escura. Ativá-lo novamente restaura suas edições em vez de regenerar do zero.

O mesmo seletor sol/lua aparece ao lado de Fechar pré-visualização (Esc) quando você abre a Pré-visualização em um pop-up com o tema escuro ativado. Você também pode verificar ambas as paletas na pré-visualização em tamanho real.

O navegador de um visitante decide qual paleta ele vê, com base na configuração do modo escuro no nível do sistema operacional. Não há um seletor claro/escuro no próprio pop-up. Um site pode forçar um esquema para todos, independentemente da configuração do SO. Consulte webPopups.colorScheme na documentação do SDK da Web.

O tema escuro também afeta imagens, sombra e sobreposição neste painel. Cada um segue o mesmo seletor de esquema sol/lua uma vez ativado.

Posicionamento e sobreposição

1. Em POSICIONAMENTO, escolha onde o pop-up se ancora na página usando a grade 3×3 de Posição.
2. Defina o Deslocamento da borda para a distância em pixels da borda selecionada.
3. Em SOBREPOSIÇÃO, ative Escurecer a página atrás para escurecer o resto da página enquanto o pop-up é exibido, em ambos os esquemas. Desativá-lo remove completamente o escurecimento, incluindo quaisquer valores de esquema escuro definidos abaixo.
4. Defina a Cor e a Opacidade para a sobreposição (opacidade de 0 a 1).

Com o tema escuro ativado, a Cor e a Opacidade também seguem o seletor de esquema sol/lua. Defina o seletor como Escuro para dar ao escurecimento sua própria cor e intensidade para a paleta escura. Até que você os edite lá, o esquema escuro mostra a mesma Cor e Opacidade do esquema claro.

Dark

Light