ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

A guia Design lhe dá controle total sobre como seu popup parece e se sente na frente da loja. Desde modelos e tipografia até animações, cores, botões, estilo de cupom e até CSS personalizados — quase todos os elementos visuais podem ser personalizados para corresponder à sua identidade de marca.

Este guia explica todas as opções de design disponíveis para que você possa criar com confiança popups polidos e de alta conversão.

⚠️ Antes de começar

Para configurar as configurações do Design:

→ Abra uma janela existente
→ Ou criar um novo popup primeiro

Em seguida, mude para o Desenho aba dentro do editor de contexto.

ℹ️ Algumas seções de design só aparecem para tipos de popup específicos ou recursos habilitados.

Exemplos

• O estilo do temporizador de contagem regressiva só aparece para o Countdown PopUps
• O estilo de cupons só aparece quando a exibição do cupom está habilitada
• Styling fatia só aparece para Spin Wheel PopUps

🎨 Modelo

Os modelos permitem que você aplique instantaneamente estilos visuais pré-projetados ao seu popup. Isso ajuda os comerciantes a lançar popups de estilo profissional rapidamente sem configurar manualmente cada configuração de design individual.

Isto é útil quando você quer um popup com estilo profissional sem personalizar manualmente cada configuração.

Exemplos disponíveis

• Dawn
• Black Friday
• Beleza
• Festivo
• Floresta
• Oceano
• Aqua
• Electricidade
• Festa

Você pode personalizar ainda mais o modelo selecionado depois.

👀 Visibilidade

Controles em que dispositivos o popup deve aparecer. Isso ajuda a criar experiências popup mais direcionadas, dependendo se os clientes estão navegando de desktop ou dispositivos móveis.

Opções Disponíveis

• Área de trabalho e móvel — visível em todo o lado
• Apenas área de trabalho — escondidos em dispositivos móveis
• Apenas Móvel — escondidos nos dispositivos de secretária

Isso é útil ao criar campanhas específicas do dispositivo.

🖼️ Fundo do Popup

Esta seção controla o estilo de fundo da janela popup. Estilo de fundo desempenha um papel importante em como visualmente atraente e atenção-agarrando o popup sente na frente da loja.

Fundo de uma única cor

Usa uma cor de fundo sólida para o popup.

Você pode:

• Escolha uma cor visualmente
• Ou cole um código de cor HEX manualmente

Fundo do Gradiente

Cria um efeito gradiente de duas cores.

Quando habilitado, aparecem configurações adicionais:

• Grau de ângulo de gradiente
• Cor do gradiente inicial
• Cor do gradiente final

ℹ️ Os controles de gradiente só se tornam ativos após ativar o Fundo de Gradiente.

🌫️ Sobrepor o Fundo

Controla a sobreposição da frente da loja mostrada atrás da popup. A sobreposição ajuda a mudar o foco do cliente para o popup, separando-o visualmente do resto do conteúdo da loja.

Por exemplo, quando um popup se abre, o resto da frente da loja pode parecer escurecido com uma sobreposição escura transparente para chamar a atenção para o popup.

Opções Disponíveis

• Sem Fundo — O popup aparece sem sobreposição
• Fundo do Dim — acrescenta uma sobreposição semitransparente atrás do popup

📐 Disposição do Popup & Contorno

Essas configurações controlam a estrutura e forma do popup geral. Ajustar o espaçamento, bordas e dimensionamento corretamente ajuda o popup a se sentir mais limpo, mais equilibrado e visualmente polido.

📏 Tamanho do Popup

Controla as dimensões globais do popup.

Opções Disponíveis

• Pequeno
• Médio
• Grande
• Página Completa

Tamanhos de popup maiores oferecem mais espaço para imagens, produtos e conteúdo adicional.

🎨 Cor de fundo da janela popup

Define a cor de fundo do recipiente em si.

Você pode:

• Usar o seletor de cores
• Ou insira manualmente um código de cor HEX

🟦 Raio de Canto

Controla como os cantos popup arredondados aparecem.

Exemplos

• Valores mais baixos → cantos mais afiados
• Valores mais elevados → cantos arredondados mais suaves

🧱 Tamanho do Contorno

Controla a espessura da borda popup.

O valor é medido em pixels.

🎨 Cor do Contorno

Define a cor da borda de contexto.

✨ Animação Popup

Controla como o popup entra na tela. Animações de entrada ajudam o popup a se sentir mais suave e interativo, tornando-o mais perceptível para os visitantes.

Opções Disponíveis

• Desvanecer
• Deslizar
• Salto

Animações ajudam a fazer o popup se sentir mais suave e mais interativo.

🔘 Botão Flutuante

ℹ️ Esta secção só aparece quando Botão de ação flutuante está habilitado na Conteúdo tab.

As configurações do Botão Flutuante permitem personalizar a aparência do botão que os visitantes clicam para abrir seu popup. Estas opções ajudam-no a combinar o botão com a marca da sua loja, mantendo-o visível e fácil de interagir.

Configurações Disponíveis

🔷 Forma

Escolha a forma geral do botão flutuante.

Opções Disponíveis

• Arredondado
• Quadrado
• Comprimido
• Círculo

🎨 Cor do Botão

Controla a cor do ícone ou texto exibido no botão flutuante.

Você pode:

• Escolha uma cor usando o seletor de cores
• Digite um código de cores HEX manualmente

🖌️ Tamanho da Fonte

Controla o tamanho do ícone ou texto exibido dentro do botão flutuante.

O valor é medido em pixels.

🟫 Cor de Fundo

Define a cor de fundo do botão flutuante.

Você pode:

• Escolha uma cor usando o seletor de cores
• Digite um código de cores HEX manualmente

🌑 Sombra

Adiciona um efeito de sombra opcional em torno do botão flutuante.

Opções Disponíveis

• Nenhum
• Pequeno
• Médio
• Grande

🧱 Cor do Contorno

Controla a cor da borda do botão flutuante.

📐 Raio de Canto

Controla como os cantos arredondados do botão flutuante aparecem.

Valores mais elevados criam uma aparência mais suave e arredondada.

🔤 Tipografia

As configurações de tipografia controlam como todos os elementos de texto aparecem dentro do popup. Essas configurações ajudam a manter a consistência visual entre cabeçalhos, descrições, botões e mensagens de validação para que o popup se sinta profissionalmente projetado e mais fácil de ler.

O aplicativo suporta fontes integradas, juntamente com fontes temáticas.

🏷️ Tipografia de Títulos

Controla o estilo de título popup.

Configurações Disponíveis

• Fonte de Título
• Tamanho do Título
• Cor do Título

📝 Descrição Tipografia

Controla o estilo de descrição popup.

Configurações Disponíveis

• Fonte da Descrição
• Tamanho da Descrição
• Cor da Descrição

⚠️ Tipografia de Mensagem de Erro

Controla as mensagens de erro de validação mostradas para ambos:

• Campos de e- mail
• Campos de números de telefone

Configurações Disponíveis

• Fonte de Erro
• Tamanho da Mensagem de Erro
• Cor da Mensagem de Erro

📝 Styling de Campo de Entrada

Esta seção controla a aparência dos campos de entrada de email e número de telefone. O estilo de entrada adequado melhora a legibilidade e ajuda as formas a se sentirem mais confiáveis e visualmente alinhadas com sua marca storefront.

Configurações Disponíveis

• Cor do Texto de Entrada
• Cor de fundo da entrada
• Cor da borda de entrada

Essas configurações ajudam seus campos de formulário a combinar com sua marca storefront.

🔘 Botão Styling

Controla o design do botão chamada de ação popup. Uma vez que o botão é geralmente o principal elemento de conversão dentro do popup, styling-lo corretamente pode melhorar significativamente clique-através e taxas de engajamento.

🔤 Fonte do Botão

Escolha a família de fontes usada dentro do botão.

Você pode usar:

• Fontes de tema
• Fontes incorporadas

🎨 Cor do Botão

Controla a cor de fundo do botão.

🔠 Tamanho e cor do texto do botão

Esta configuração controla:

• Tamanho do texto (campo esquerdo)
• Selector de cores de texto (campo médio)
• Valor de cor HEX (campo direito)

Exemplo

• Texto branco grande no botão escuro
• Texto preto pequeno no botão brilhante

Raio de Canto

Controla como os cantos arredondados do botão aparecem.

Valores mais elevados criam botões mais suaves.

🎟️ Coupon Styling

ℹ️ Esta seção só aparece quando a exibição de cupom está habilitada dentro da aba Conteúdo.

Esta secção controla a aparência do contentor de código de cupão. Uma seção de cupom visualmente estilo faz descontos se destacar mais claramente e incentiva os visitantes a copiar e usar a oferta durante o checkout.

🧾 Estilo de borda do cupom

Escolha o estilo de borda em torno da área de cupom.

Exemplos disponíveis

• Sólido
• Dashed

🎨 Cor do Contorno

Controla a cor da borda do cupom.

🔤 Cor do Texto

Controla a cor do texto mostrada dentro da seção de cupom.

🖼️ Cor de Fundo

Controla a cor de fundo do recipiente de cupom.

❎ Fechar o Styling de Ícones

Controla a aparência do ícone de close popup. Mesmo que seja um elemento pequeno, combinar o estilo do ícone com o design popup global ajuda a manter uma experiência de usuário mais limpa e polida.

Configurações Disponíveis

• Fechar a Cor do Ícone
• Tamanho do Ícone

Opções de tamanho disponíveis

• Pequeno
• Médio
• Grande

Temporizador de contagem regressiva Styling

ℹ️ Esta secção só aparece para o Countdown PopUps.

Controla a aparência visual do temporizador regressivo. Estilo de timer adequado ajuda a criar urgência, garantindo que a contagem regressiva permanece legível e visualmente consistente com o resto do design popup.

Configurações Disponíveis

• Estilo do Temporizador
• Fonte do Temporizador
• Tamanho do Temporizador
• Cor do Temporizador
• Cor de fundo do timer
• Fonte da Legenda
• Tamanho da etiqueta
• Cor do rótulo

Estas configurações ajudam a criar urgência, mantendo o temporizador visualmente alinhado com sua frente de loja.

🎡 Roda de giro — Styling de corte

ℹ️ Esta seção só aparece para Spin Wheel PopUps.

Esta seção controla o estilo visual das fatias da roda de giro e componentes da roda. Ajustar estas configurações com cuidado pode fazer com que a roda se sinta mais vibrante, lúdica e de atenção para os visitantes.

🎨 Cor dos cortes

Controla as cores de fundo alternadas da fatia.

Configurações Disponíveis

• Cortar 1 Cor
• Cortar 2 cores

Estas cores alternam-se por toda a roda.

🔤 Styling de etiqueta de corte

Controla o estilo de texto mostrado em cada fatia de roda.

Configurações Disponíveis

• Cor da etiqueta da fatia
• Tamanho da etiqueta da fatia
• Tipo de Letra de Legendas

💬 Styling de mensagem de corte

Controla o estilo da recompensa fatia ou mensagens vencedoras.

Configurações Disponíveis

• Cortar o Tipo de Letra da Mensagem
• Tamanho da mensagem de corte
• Cor da mensagem de corte

🎯 Cores do Componente da Roda

Controla os restantes elementos de projeto da roda.

Configurações Disponíveis

• Cor da borda da roda
• Cor da Seta
• Cor do Círculo Central

💻 CSS Personalizado

💡 Usuários avançados podem aplicar seu próprio estilo CSS personalizado diretamente dentro do editor popup.

Isso permite que você personalize elementos além dos controles de design padrão. É especialmente útil para comerciantes que querem estilo avançado, ajustes específicos para dispositivos móveis, ou personalização visual mais profunda.

🧩 Selectores comuns

O editor fornece seletores prontos, tais como:

• .futureblink-popup
• .futureblink-popup .title
• .futureblink-popup .description
• .futureblink-popup .cta-button
• .futureblink-popup .close-btn

✅ Aplicando CSS

Depois de adicionar seu CSS:

→ Clique Aplicar para testar os estilos imediatamente.

ℹ️ Se os estilos não se aplicarem corretamente, adicionar !important Recomenda-se a cada declaração.

Exemplo

.futureblink-popup . title {
cor: #000!importante;
}

🚀 Resultado Final

Uma vez configurado com sucesso:

✅ O seu popup corresponde à sua identidade de marca
✅ Tipografia, botões e entradas parecem visualmente consistentes
✅ Seções de cupom e temporizadores parecem polidos
✅ popups roda gira se tornar mais visualmente envolvente
✅ Animações e sobreposições melhoram o foco do cliente
✅ CSS personalizado dá aos usuários avançados um controle mais profundo
✅ Os clientes experimentam um design popup mais limpo e profissional 🎨

Actualizado em: 10/09/2026