Configurações de miniatura

Sobreposição

Pode diferir ligeiramente da interface real.

Ponto:
Define uma camada de cor sobre o elemento Fundo. Útil para ajustar a legibilidade em fotos e vídeos.

O que essa configuração altera: Pode facilitar a leitura do texto ao igualar a diferença entre o brilho e a escuridão do objeto.

Dica de ajuste:
É menos provável que haja falhas se você decidir primeiro a densidade em uma única cor e expandir para Gradiente somente se necessário.

Configurações

• Colour / Gradient: defina uma única cor ou Gradiente e ajuste a representação Fundo.
• Opacity: defina como Opacidade para ajustar a visibilidade geral do elemento.
• Mix Blend Mode: define o modo de mistura e ajusta a sobreposição com o Fundo.
• Responsivo: ativa as configurações individuais específicas do dispositivo e evita o colapso do exibição.

Observação: O Sobreposição no Miniatura é apenas o aplicar sobreposto ao MiniaturaImagem (independente do Sobreposição no BotãoZFundo).O Sobreposição no estado Hover também pode ser definido separadamente Hover.

Imagem.

Pode diferir ligeiramente da interface real.

Ponto:
Defina o método de vídeo Imagem ou exibição. O ajuste, a posição e a repetição podem alterar significativamente a aparência do vídeo.

O que muda com essa configuração:
O apelo do mesmo material pode mudar drasticamente dependendo da configuração.

Dica de ajuste:
Uma sequência eficiente é decidir primeiro sobre o "Ajuste", depois ajustar a posição e, por fim, finalizar a legibilidade com Opacidade e Sobreposição.

Itens de configuração.

• Tipo de Mídia (Imagem / Vídeo): selecione o tipo de Mídia a ser usado para o Fundo.
• Imagem: Seleção de imagem, Repeat, Fit Method, Rotation (deg), Opacity: ajusta a visibilidade do MiniaturaImagem e corta o ponto de recurso.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Funções PRO (vídeo):
As configurações de vídeo do Miniatura estão disponíveis na versão paga (ZenBlocks PRO). Se você quiser usar o vídeo URL ou o vídeo Posição de exibição, precisará da versão PRO.

Cor do ícone

Pode diferir ligeiramente da interface real.

Ponto:
Definir a base Cor do ícone. Essa é a cor que forma a base da estrutura da camada.

O que muda com essa configuração:
A impressão final é determinada pela relação com Sobreposição e a cor do texto.

Dica de ajuste:
Deve-se dar prioridade a cores que possam ser lidas em combinação com o texto e o Fundo, em vez de cores que pareçam boas por si só.

Itens de configuração.

• Cor base: define a cor base do elemento.
• Opacity: define o Opacidade e ajusta a visibilidade geral do elemento.
• Blend Mode: seleciona o modo de mistura e otimiza a sobreposição entre o Fundo e o texto.
• Responsivo: ativa as configurações individuais específicas do dispositivo e evita o colapso do exibição.

Restrição Cor do íconeTransição na Hover: A Cor do ícone da Miniatura é uma implementação em que a propriedade background é diretamente Transição porque Normal = cor única → Hover = Gradiente*(ou vice-versa), Transição não funciona e muda instantaneamente. Isso ocorre porque background-colour (cor única) e background-image: linear-gradient() (Gradiente) são propriedades diferentes na especificação CSS e o navegador não pode animar entre elas. Se forem necessárias transições suaves, tanto Normal quanto Hover devem ser alinhados entre si em uma única cor ou Gradiente.

Tamanho do ícone

Pode diferir ligeiramente da interface real.

Ponto:
defina largura, altura e outros tamanhos do elemento em Tamanho do ícone. Isso ajuda a otimizar a visibilidade em cada dispositivo.

O que muda com essa configuração:
A mesma quantidade de conteúdo terá visibilidade e impressão diferentes com a configuração Tamanho do ícone.

Dica de ajuste:
Sempre verifique os SPs individualmente após a preparação no PC para ver se há dobras ou margens insuficientes.

Itens de configuração.

• Width: define a largura e ajusta a largura da área exibição.
• Height: define o Altura e ajusta a sensação de densidade e visibilidade do elemento.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Borda

Pode diferir ligeiramente da interface real.

Ponto:
Define a cor, a espessura e o tipo de linha da linha de borda, que define o contorno do Botão e o reconhece como um elemento clicável.

O que essa configuração altera: Tem o efeito de tornar a borda mais clara, mesmo em designs com cores mais claras do Fundo.

Dica de ajuste:
Uma borda muito grossa enfraquece a insistência do texto, portanto, é mais fácil lidar com ela começando com cerca de 1px.

Itens de configuração.

• Border (ON/DESLIGADO): ativa/desativa a borda e determina se o contorno é enfatizado ou não.
• Colour: define a cor e ajusta a visibilidade e a conformidade do design do elemento.
• Width: define a largura e ajusta a extensão da área exibição.
• Style: seleciona Estilo e ajusta a visibilidade de linhas e decorações.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Raio da borda

Pode diferir ligeiramente da interface real.

Ponto:
Define o arredondamento dos cantos do elemento; o tom Marcas (duro/suave) pode ser ajustado no nível de impressão.

O que muda com essa configuração:
o valor de Raio da borda altera a aparência em proporção ao Tamanho do ícone do Botão.

Dica de ajuste:
Procure atingir aproximadamente 20-35% de Altura para obter um equilíbrio que não seja nem muito redondo nem muito duro.

Itens de configuração.

• Raio da borda: define o raio do Raio da borda e ajusta a impressão do elemento.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Posição

Pode diferir ligeiramente da interface real.

Point:
Define a posição de posicionamento do elemento. É possível controlar a sobreposição e a distância dos elementos ao redor.

O que essa configuração altera: A configuração da posição é um item altamente influente, pois pode causar falha no Layout.

Dica de ajuste:
É mais fácil manter se o Relativo for estabelecido primeiro e o Absoluto for limitado apenas às partes necessárias.

Itens de ajuste.

• Direção do Horizontal (Esquerda / Centro / Direita): define a posição de posicionamento na direção do Horizontal e ajusta o centro de gravidade do Layout.
• Direção do Vertical (Superior / Central / Inferior): define a posição de posicionamento na direção do Vertical e otimiza o equilíbrio vertical.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Graus de transparência.

Pode diferir ligeiramente da interface real.

Ponto:
Define o modo composto com Opacidade para todo o elemento; permite ajustar a sobreposição com Fundo em um modo de design.

O que essa configuração altera: A impressão da mesma cor pode ser bastante alterada por Opacity e Blend.

Dica de ajuste:
Se a legibilidade for reduzida, primeiro corrija a cor do texto e o contraste Fundo antes de ajustar a Opacidade.

Opções de configuração.

• Opacity: defina Opacidade e ajuste a visibilidade geral do elemento.
• Mix Blend Mode: define o modo de mistura e ajusta a sobreposição com Fundo.
• Responsivo: ativa as configurações individuais específicas do dispositivo e evita o colapso do exibição.

Transição

Pode diferir ligeiramente da interface real.

Ponto:
Define a velocidade de mudança do estado Normal para o estado Hover. Esse item determina a "sensação" da operação.

O que essa configuração altera: Se for muito rápida, você não perceberá a alteração; se for muito lenta, a reação parecerá lenta.

Dica de ajuste:
Primeiro, use Duration 200-350ms como referência e adicione atrasos ou easing personalizado somente onde a direção for necessária.

Itens de configuração.

• Duration (ms): define a duração da alteração e ajusta a velocidade da direção.
• Delay (ms): define o tempo de atraso e ajusta quando a animação começa.
• Easing: define a curva da mudança de velocidade e, portanto, a impressão do movimento.
• Custom Value: define o valor easing personalizado (formato CSS cubic-bezier) para ajustar a textura da mudança.
• **Reset: retorna as configurações dessa seção ao seu estado inicial.

Observações: Transição de Miniatura é aplicar para Sobreposição, Cor do ícone, Borda, Raio da borda e Graus de transparência todas as transições Hover. Botão corpo e ícone operam independentemente do Transição no ícone.

Diferenças do Fundo e da Band: O Miniatura não tem configurações para Padrão e Transformação (Skew) Se você precisar de uma camada de decoração com o Padrão, use a configuração Band. Por outro lado, o Miniatura tem os graus Tamanho do ícone, Borda, Raio da borda, Posição e Transparente, enquanto o Configurações de fundo não tem nenhum desses graus.