> ## 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). # 🎨 Barra de Anúncio — Design 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. O separador **Design** dá-lhe controlo total sobre a aparência e a sensação da sua barra de anúncio em toda a loja. Desde cores de fundo e tipografia até animações de botões, estilo de ícones e CSS personalizado — quase todos os detalhes visuais podem ser afinados para corresponder à sua marca. Pode lançar rapidamente com um modelo pré-fabricado ou personalizar cada pixel manualmente. De qualquer forma, a barra parecerá uma parte natural da sua loja 🎨 A maioria das definições relacionadas com a cor inclui: * Um **Color Picker** (Seletor de Cores) para seleção visual * Um **Hex Code Input** (Campo de Código Hexadecimal) para cores de marca exatas --- # **⚠️ Antes de Começar** Para configurar as definições de **Design**: → Abra uma barra de anúncio existente → Ou crie uma nova primeiro Depois, clique no separador **Design** dentro do editor. ℹ️ Algumas opções aparecem apenas para tipos ou configurações específicas de barra. Por exemplo, as animações de deslize só aparecem para barras **Multiple** (Múltipla), e o estilo do cupão aparece apenas quando é utilizado um CTA **Coupon** (Cupão). Estes campos condicionais são assinalados abaixo para que saiba exatamente quando esperá-los. --- # **🎨 Modelo** * **O que faz:** Aplica instantaneamente um estilo visual pré-fabricado à sua barra de anúncio. * **Como utilizar:** Escolha entre mais de 25 modelos para dar um pontapé de saída ao seu design sem ter de preencher manualmente cada campo. Cada modelo preenche previamente: * Tipo de fundo, cor e definições de gradiente * Cores e tamanhos do título e subtítulo * Cores do botão, cor do texto e raio dos cantos * Estilo da borda, do ícone e do cupão **Modelos disponíveis incluem:** Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy ⚠️ **Importante:** Selecionar um modelo substituirá a maioria dos campos de design. As definições de **Visibility** (Visibilidade) e **Position** (Posição) (configuradas no separador **Placement** (Colocação)) são preservadas. 💡 *Os modelos são ótimos para campanhas sazonais. Quer um visual de Black Friday? Selecione o modelo Black Friday e ajuste a partir daí.* --- # **👀 Visibilidade** * **O que faz:** Controla em que dispositivos a sua barra de anúncio aparece. * **Opções:** * *Desktop and Mobile* (Computador e Telemóvel) — Visível em todos os dispositivos * *Only Desktop* (Apenas Computador) * *Only Mobile* (Apenas Telemóvel) Isto é útil quando quer mensagens ou layouts diferentes para compradores em computador versus compradores em dispositivos móveis. --- # **🖼️ Estilo de Fundo** * **O que faz:** Altera a aparência do fundo da barra de anúncio. * **Opções disponíveis:** * **Single Color** (Cor Única) — Uma cor de fundo sólida * **Gradient** (Gradiente) — Duas cores misturadas num ângulo personalizado * **Patterns** (Padrões) — Padrões decorativos de fundo ## **🎨 Cor Única** * Escolha uma cor usando o **Color Picker** (Seletor de Cores) ou introduza manualmente um **Hex Code** (Código Hexadecimal). ## **🌈 Gradiente** * **Gradient Angle Degree** (Ângulo do Gradiente): Controla a direção da mistura (0–360°) * **Initial Color** (Cor Inicial): A cor inicial * **Final Color** (Cor Final): A cor final 💡 *Um gradiente subtil pode adicionar profundidade sem ser distrator. Experimente ângulos de baixo contraste para um visual moderno.* ## **✨ Padrões** Selecionar **Patterns** (Padrões) revela um menu pendente com mais de 35 opções de fundo incluídas: * **Decorativos:** Wavy, Sale, Discount, Balloon, Girly, Party, Fresh * **Festivos e Sazonais:** Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday * **Texturizados:** Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese ℹ️ Os padrões são aplicados como estilos de fundo CSS. Alguns usam CSS puro; outros usam recursos de imagem. --- # **📐 Bordas e Cantos** Esta secção controla a forma e o contorno da barra. * **Bar Corner Radius (px)** (Raio dos Cantos da Barra): Quão arredondados são os cantos da barra * **Bar Padding (px)** (Preenchimento da Barra): Espaço interno entre as bordas da barra e o seu conteúdo * **Border Size (px)** (Espessura da Borda): Espessura da borda exterior * **Border Color** (Cor da Borda): A cor da borda 💡 *Um raio de canto de 0 cria uma barra retangular nítida. Valores mais altos criam formas mais suaves e modernas.* --- # **🔤 Tipografia** Esta secção controla como todo o texto aparece na barra de anúncio. ## **📝 Estilo do Título** * **Title Size (px)** (Tamanho do Título): O tamanho da mensagem principal * **Title Color** (Cor do Título): A cor da mensagem principal ## **📄 Estilo do Subtítulo** * **Subheading Size (px)** (Tamanho do Subtítulo): O tamanho do texto de apoio * **Subheading Color** (Cor do Subtítulo): A cor do texto de apoio ℹ️ O campo de subtítulo fica oculto ao utilizar o tipo de barra **Running** (Em Execução), uma vez que as barras tipo letreiro (marquee) normalmente usam uma linha de texto. ## **🔠 Tipo de Letra** Escolha entre **63 tipos de letra disponíveis**, incluindo: * **Fontes do sistema:** Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, e mais * **Google Fonts:** Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, e muitas mais A primeira opção é **Use your theme font** (Usar a fonte do tema), que corresponde automaticamente à tipografia existente da sua loja. 💡 *Para uma boa legibilidade, mantenha 1–2 tipos de letra por barra. Uma fonte de exibição arrojada para o título e uma sans-serif limpa para o subtítulo costumam funcionar bem.* --- # **🔘 Design do Botão** Esta secção personaliza o botão de chamada à ação. ℹ️ Estas definições estão sempre disponíveis no separador **Design**. Afetam a loja apenas quando o tipo de CTA está definido como **Button** (Botão), **Full Bar** (Barra Completa) ou **Trigger** (Gatilho). ## **🎨 Cor do Botão** * Altera a cor de fundo do botão de CTA. ## **🔤 Tamanho e Cor do Texto do Botão** * **Size (px)** (Tamanho): Controla o tamanho do texto dentro do botão * **Color** (Cor): Altera a cor do texto do botão ## **⭕ Raio dos Cantos e Estilo do Botão** Estes dois campos estão ligados: * **Corner Radius (px)** (Raio dos Cantos): Introduza manualmente um valor para controlar o arredondamento * **Button Style** (Estilo do Botão): Alterne rapidamente entre predefinições: * *Square* (Quadrado) → define o raio para 0 px * *Rounded* (Arredondado) → define o raio para 10 px * *Fully Rounded* (Totalmente Arredondado) → define o raio para 30 px Quando seleciona uma predefinição de estilo, o raio dos cantos atualiza automaticamente. Quando introduz um raio personalizado, a predefinição de estilo atualiza para corresponder: * 0–9 px → Square * 10–29 px → Rounded * 30+ px → Fully Rounded ## **💪 Peso da Fonte** * Controla quão arrojado ou leve o texto do botão aparece * Opções: Normal, Bold, 100–900 ## **✍️ Estilo da Fonte** * Alterne entre: Normal, Italic, Underline ## **✨ Animação do Botão** Adiciona uma animação contínua ao botão para o ajudar a destacar-se. *Animações disponíveis:* None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip 💡 *Animações subtis como Bounce ou Emitting chamam a atenção sem ser agressivas. Utilize Flip ou Tada para campanhas de alta urgência.* --- # **🏷️ Design do Cupão** Esta secção personaliza a aparência da caixa de código do cupão. ℹ️ Esta secção aparece apenas quando: * Qualquer diapositivo de conteúdo utiliza **Coupon** (Cupão) como tipo de CTA, **ou** * O tipo de barra está definido como **Email** (E-mail) ## **Definições Disponíveis** * **Coupon Border Style** (Estilo da Borda do Cupão): Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, ou None * **Coupon Border Color** (Cor da Borda do Cupão): A cor do contorno da caixa do cupão * **Coupon Text Color** (Cor do Texto do Cupão): A cor do texto do código do cupão * **Coupon Background** (Fundo do Cupão): A cor de fundo da caixa do cupão (suporta fundos transparentes) 💡 *Uma borda tracejada com um fundo contrastante é o visual clássico de cupão. Experimente um fundo semi-transparente se quiser que o padrão ou gradiente da barra fique visível.* --- # **🎆 Animações da Barra** ## **Transição de Barra Múltipla** *Disponível apenas quando o tipo de barra está definido como **Multiple** (Múltipla).* Controla como os diapositivos transitam entre si: * **Slide** (Deslize) — Desliza horizontalmente entre anúncios * **Fade In** (Dissolver) — Desvanece suavemente de um diapositivo para o seguinte * **Cube** (Cubo) — Um efeito de rotação 3D em cubo * **Flip** (Virar) — Um efeito de transição tipo carta a virar ℹ️ Esta definição encontra-se no separador **Design**, não no separador **Content** (Conteúdo). --- # **🎨 Definições de Ícones** ## **🚪 Cor do Ícone de Fechar** * Altera a cor do ícone do botão de fechar (dispensar). * Só visível quando a opção **Close Icon** (Ícone de Fechar) está ativada no separador **Content** (Conteúdo). ## **➡️ Cor do Ícone de Seta** * Altera a cor das setas de navegação. * Só visível quando o tipo de barra está definido como **Multiple** (Múltipla), uma vez que as setas são usadas para navegar entre diapositivos. --- # **👥 Ícones do Banner (Ícones Sociais)** Esta secção estiliza os ícones de redes sociais que aparecem dentro da barra. * **Social Icon Size (px)** (Tamanho do Ícone Social): Ajusta o tamanho do ícone * **Social Icon Color** (Cor do Ícone Social): Altera a cor do ícone * **Social Icon Position** (Posição do Ícone Social): Coloca os ícones no lado *Left* (Esquerdo) ou *Right* (Direito) da barra * **Use Original Social Icon Color** (Usar Cor Original do Ícone Social): Quando ativado, cada plataforma mantém a sua cor de marca (azul do Facebook, gradiente do Instagram, etc.) em vez de utilizar a sua cor personalizada ℹ️ Os ícones sociais são configurados no separador **Content** (Conteúdo). O separador **Design** apenas controla a sua aparência. --- # **💻 CSS Personalizado (Para Utilizadores Avançados)** 💡 **Funcionalidade Avançada:** Se precisar de estilos que não estão disponíveis nas definições padrão, pode escrever o seu próprio CSS diretamente no editor. Quando ativado, é fornecido um esqueleto CSS com classes alvo pré-definidas: * Recipiente de toda a barra: `.futureblink-announcement-bar` * Texto do título: `.futureblink-announcement-bar .title` * Texto do subtítulo: `.futureblink-announcement-bar .subheading` * Título móvel: `.futureblink-announcement-bar.mobile .title` * Subtítulo móvel: `.futureblink-announcement-bar.mobile .subheading` * Botão CTA: `.futureblink-announcement-bar .cta-button` * Botão CTA móvel: `.futureblink-announcement-bar.mobile .cta-button` * Botão de fechar: `.futureblink-announcement-bar .close-btn` * Setas de navegação: `.futureblink-announcement-bar .arrow` * Botões Anterior/Seguinte: `.futureblink-announcement-bar .button-prev` e `.button-next` ## **Como funciona o CSS personalizado na loja:** * Todos os seletores são automaticamente delimitados à sua barra de anúncio específica * Cada declaração recebe prioridade `!important` para sobrepor os estilos do tema * Os seletores móveis (`.mobile`) são automaticamente envolvidos numa media query móvel * O CSS é injetado como uma etiqueta `