Configurações de fundo

Overlay

Ponto principal:
Define uma camada de cor sobre o fundo.

O que esta configuracao muda:
Melhora a legibilidade quando ha foto ou video atras do texto.

Dica de ajuste:
Primeiro ajuste em cor solida; use gradiente so quando realmente precisar.

Itens de configuracao

• Color / Gradient: define cor unica ou gradiente para o overlay.
• Opacity: ajusta a intensidade da camada.
• Blend Mode: controla como o overlay se mistura ao fundo.
• Reset: restaura os valores desta secao.
• Responsivo: permite valores diferentes por dispositivo.

Observacao:
O overlay fica na camada superior do fundo do botao. Tambem pode ser configurado separadamente no estado hover.

Padrao

Ponto principal:
Define tipo e intensidade do padrao de fundo.

O que esta configuracao muda:
Adiciona textura e evita um visual muito plano.

Dica de ajuste:
Como o foco e o texto do botao, use contraste moderado no padrao.

Itens de configuracao

• Pattern Type: escolhe o tipo de padrao.
• Pattern Color: define a cor do padrao.
• Pattern Size: ajusta o tamanho/densidade do padrao.
• Pattern Opacity: ajusta a transparencia do padrao.
• Blend Mode: define a forma de mesclagem com o fundo.
• Responsivo: permite valores diferentes por dispositivo.

Observacao:
O padrao e renderizado em SVG, portanto nao perde qualidade em telas de alta resolucao. O padrao no hover tambem pode ser configurado separadamente.

Imagem

Ponto principal:
Define o uso de imagem ou video no fundo.

O que esta configuracao muda:
O mesmo material pode ter resultado visual muito diferente conforme fit, posicao e opacidade.

Dica de ajuste:
Defina primeiro o Fit, depois ajuste posicao e finalize com opacity/overlay.

Itens de configuracao

• Tipo de midia (Image / Video): escolhe a midia do fundo.
• Imagem: Select Image, Repeat, Fit Method, Rotation (deg), Opacity.
• Video: Video URL (MP4 / YouTube / Vimeo), Apply.
• Exibicao de video: Video Fit, Video Position X, Video Position Y.
• Poster: Poster URL, Remove Poster, Poster Fit, Poster Position X/Y.
• Responsivo: permite valores diferentes por dispositivo.

UI de selecao de imagem (Image)

• Quando MEDIA TYPE esta em Image, aparecem as abas de origem da imagem.
• As fontes disponiveis sao: Media Library / Search / Select Image / Image URL.
• Independentemente da origem, o resultado final vai para a mesma camada de fundo.

Image: Search

• Use fornecedor (Openverse / Unsplash / Pexels / Pixabay) e busca por palavra-chave.
• Openverse nao exige API key.
• Unsplash / Pexels / Pixabay exigem configuracao de API de busca; sem isso, nao retornam resultados.
• E possivel usar chips de palavras-chave (ex.: business / people / nature).
• Sempre confira termos de uso e licenca do servico antes de publicar.

Image: Media Library

• Permite filtrar por categorias predefinidas (ex.: all / nature / lifestyle / food).
• A imagem selecionada e aplicada na camada de fundo.
• Imagens grandes podem impactar desempenho; prefira arquivos otimizados.

Image: Image URL

• Informe a URL no formato https://... e clique em Apply.
• URLs indisponiveis (404, CORS etc.) nao sao exibidas.
• URL direta pode quebrar apos migracao/troca de CDN; faca verificacao periodica.

UI de selecao de video (Video)

• Quando MEDIA TYPE esta em Video, aparecem URL/busca de video e configuracoes de poster.
• Busca de video tambem depende da API do fornecedor.
• Video Fit e Video Position X/Y controlam enquadramento e recorte.
• Poster e a imagem de fallback quando o video nao reproduz.

Funcao PRO (Video):
Configuracoes de video de fundo (Video URL / Exibicao de video / Poster) sao recursos da versao paga (ZenBlocks PRO).

Observacao:
A ordem das camadas de fundo e Cor -> Imagem -> Padrao -> Overlay. Cada camada usa z-index proprio (Cor: 0, Imagem: 1, Padrao: 2, Overlay: 3) e pointer-events: none, para nao bloquear clique.

Limitacoes de video no mobile:
Em iOS/Android, autoplay geralmente so funciona com video em modo mudo. O bloco adiciona muted, playsinline, loop e autoplay, mas ainda pode haver bloqueio por navegador/dispositivo. Configure Poster obrigatoriamente como fallback. Fontes suportadas: YouTube (modo de privacidade via youtube-nocookie.com), Vimeo e URL direta (ex.: MP4).

Exclusividade imagem/video:
Ao selecionar Video, a camada de imagem fica oculta (display: none). Imagem e video nao aparecem juntos.

Cor

Ponto principal:
Define a cor-base do fundo.

O que esta configuracao muda:
A impressao final depende do equilibrio entre cor, overlay, padrao e texto.

Dica de ajuste:
Priorize legibilidade da combinacao inteira, nao apenas uma cor isolada.

Itens de configuracao

• Color / Gradient: define cor solida ou gradiente.
• Alpha: ajusta a transparencia da camada.
• Alternancia de gradiente: troca entre cor solida e gradiente.
• Reset: restaura os valores desta secao.
• Responsivo: permite valores diferentes por dispositivo.

Observacao:
A cor no hover pode ser configurada separadamente. A mudanca entre cor solida e gradiente no hover usa crossfade interno, mantendo transicao suave.

Transition

Ponto principal:
Define a velocidade da mudanca entre estado normal e hover.

O que esta configuracao muda:
Controla a sensacao de resposta da interface.

Dica de ajuste:
Comece com Duration 200-350ms; ajuste delay/easing so quando houver necessidade de efeito.

Itens de configuracao

• Duration (ms): tempo total da transicao.
• Delay (ms): espera antes de iniciar a transicao.
• Easing: curva de velocidade da transicao.
• Custom Value: valor personalizado (CSS cubic-bezier).
• Reset: restaura os valores desta secao.

Observacao:
Esta transicao se aplica a overlay, padrao, imagem e cor do fundo. E independente da transicao do painel de estilo.

Diferenca para Thumbnail/Band:
O fundo e a camada mais baixa que cobre o botao inteiro, portanto nao possui configuracoes de tamanho, borda, raio, posicao, skew e painel de opacidade individual como em thumbnail/band. Em compensacao, o fundo possui Pattern e configuracoes de Poster mais detalhadas para video.