> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 PopUps — Desenho e Estilo > ℹ️ **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 🎨 ---