Configurações de faixa

Sobreposição

Pode diferir ligeiramente da interface real.

Ponto:
Define uma camada de cor sobre o elemento Fundo. Isso é ú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 quando necessário.

Configurações

• Cor / Gradiente: defina uma única cor ou Gradiente e ajuste a representação Fundo.
• Opacidade: defina como Opacidade para ajustar a visibilidade geral do elemento.
• Modo de mesclagem: 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.

Padrão

Pode diferir ligeiramente da interface real.

Ponto:
Define o tipo e a intensidade do Padrão de fundo. Isso aumenta a quantidade de informações e evita a monotonia.

O que essa configuração altera: Adiciona uma sensação de textura e dá mais expressão do que cores simples.

Dica de ajuste:
Como o personagem principal é o texto, um baixo contraste de Padrão será mais estável na operação real.

Opções de configuração.

• Tipo de padrão: seleciona o tipo Padrão e determina a textura do Fundo.
• Cor do padrão: define a cor do Padrão e ajusta o contraste com o Fundo.
• Tamanho do padrão: define o tamanho do Padrão e ajusta sua densidade.
• Opacidade do padrão: define o grau do PadrãoTransparente e ajusta a pretensão de decoração.
• Modo de mesclagem: seleciona o modo composto 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.

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: Repetição, Método de ajuste, Rotação (graus), Opacidade: ajusta o ImagemExibição do Fundo e controla a intensidade da decoração.
• Responsivo: permite 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 para o cinto 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.
• Opacidade: ajusta a visibilidade geral do elemento.
• Modo de mesclagem: otimiza a sobreposição entre fundo e texto.
• Responsivo: ativa as configurações individuais específicas do dispositivo e evita o colapso do exibição.

Cor do íconeTransição em Hover: A transição Hover da banda Cor do ícone é implementada internamente usando o método crossfade (estado Normal e estado Hover em camadas separadas e alternados por opacidade). O estado Normal e o estado Hover são sobrepostos em camadas separadas e alternados por opacidade. Portanto, o Transição funciona sem problemas, mesmo ao alternar Normal = monocromático → Hover = Gradiente (ou vice-versa).

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 configuração Tamanho do ícone altera a visibilidade e a impressão da mesma quantidade de conteúdo.

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

Itens de configuração.

• Largura: define a largura e ajusta a largura da área exibição.
• Altura: 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 torna reconhecível como um elemento clicável.

O que muda com essa configuração:
Ela faz com que a borda pareça 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.

• Borda (ON/DESLIGADO): ativa/desativa a borda e determina se o contorno é enfatizado ou não.
• Cor: define a cor e ajusta a visibilidade e a conformidade do design do elemento.
• Largura: define a largura e ajusta a extensão da área exibição.
• Estilo: seleciona Estilo e ajusta a visibilidade das 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 obter 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 arredondamento dos cantos e ajusta a impressão visual 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.

Ponto:
Define a posição de posicionamento do elemento. Você pode 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 de composição como 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 alterada significativamente por Opacidade e Modo de mesclagem.

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.

• Opacidade: defina Opacidade para ajustar a visibilidade geral do elemento.
• Modo de mesclagem: 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.

Transformação

Pode diferir ligeiramente da interface real.

Ponto:
Define deformações como rotação e inclinação. Pode ser usado para guiar o olho e decorar o Acento.

O que essa configuração altera: Mesmo pequenas deformações podem causar uma grande impressão, e deformações excessivas podem prejudicar a legibilidade.

Dica de ajuste:
É seguro começar com ajustes finos em torno de 0 graus e evitar deformações fortes na operação real.

Itens de configuração.

• Skew X: Define a inclinação na direção do eixo X e adiciona a decoração Acento.
• Skew Y: define a inclinação ao longo do eixo Y e ajusta a aparência do elemento.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Nota: Saídas como transform: skew() para CSS; Transformação no estado Hover também pode ser definido individualmente. Verifique junto com o status da configuração overflow: hidden, pois quanto maior o ângulo de inclinação, mais ele pode se projetar do Botã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 Duração de 200-350ms como referência e adicione atrasos ou easing personalizado somente onde a direção for necessária.

Itens de configuração.

• Duração (ms): define a duração da alteração e ajusta a velocidade da direção.
• Atraso (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.
• Valor personalizado: 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.

Nota: A transição da banda se aplica às mudanças em hover de Sobreposição, Padrão, Imagem, Cor, Opacidade e Transformação. Ela funciona de forma independente da transição do botão.

A banda tem o maior número de opções de configuração das três camadas visuais (Fundo, Miniatura e banda).*Transformação (Skew) está disponível somente para a banda. Além disso, Padrão está disponível para Fundo e bandas, mas não para Miniatura; Configurações de fundo não tem Tamanho do ícone, Borda, Raio da borda, Posição ou Transformação e, portanto, não é possível controlar a posição e a forma individualmente. Use faixas ou Miniatura para camadas de decoração em que você deseja controlar a posição e a forma individualmente.