Configurações do pop-up da web

Use o painel Configurações do pop-up para definir a aparência de um pop-up e onde ele aparece. O painel está disponível tanto no conteúdo web quanto nos formulários web.

O painel tem duas partes:

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

As abas de página e + Adicionar página ficam na parte superior do painel. Consulte Várias páginas.

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

Use estas configurações para escolher as imagens e o vídeo do pop-up e para ajustá-los e suavizá-los.

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

Um pop-up com tema escuro pode mostrar uma imagem diferente no modo escuro, por exemplo, um logotipo com tinta escura.

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

Use um vídeo em vez de uma imagem em um bloco de mídia.

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 adicionam uma seção de Variáveis de modelo com configurações de posicionamento para o bloco de mídia. A seção só aparece quando o layout atual tem configurações como estas.

Quando o layout tiver mídia ao lado do texto, defina:

• Largura da imagem: a parte da largura do pop-up, como uma porcentagem.
• Posição da imagem: Esquerda ou Direita.

Em um layout de barra inferior, a seção oferece Largura dos botões em vez de controles de imagem.

Tamanho e estilo do pop-up

Defina o tamanho do pop-up, o arredondamento dos cantos, a sombra e como ele aparece.

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. Uma sombra ajustada para uma página clara geralmente é invisível em uma escura, então as duas geralmente precisam de valores diferentes.

Para editar a sombra da paleta escura separadamente da clara:

1. Defina o seletor sol/lua como Escuro.
2. Edite a Sombra.

Se você deixar a sombra escura intacta, o valor da Sombra clara será usado em ambos os esquemas.

Cores

Defina as cores do pop-up: o plano de fundo, o destaque dos botões e o texto.

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. Um formulário web não tem essa cor.

Modo escuro

O modo escuro dá ao pop-up uma segunda paleta para visitantes cujo dispositivo está configurado para um esquema de cores escuras.

1. Em Cores, ative Ativar tema escuro. 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

Escolha onde o pop-up aparece na página e se a página atrás dele fica escurecida.

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