A ferramenta avançada de personalização de cores do Pixpa permite que você melhore o apelo visual do seu site aplicando cores sólidas, gradientes lineares e gradientes radiais às suas seções e textos.
Isso lhe proporciona um alto nível de controle criativo ao projetar o plano de fundo, os títulos e o texto dos parágrafos do seu site.
Neste artigo:
- Acessando o Painel de Cores
- Opções de tipo de cor
- Paradas de gradiente
- Controle deslizante de rotação
- Opções de forma de gradiente radial
- Seletor de cores e entrada de código hexadecimal
- Controle deslizante de opacidade
- Onde você pode usar as opções de cores
Acessando o Painel de Cores
- Passe o cursor sobre a seção que deseja editar e clique em Editar seção (1) opção.
- Sob o Cor Na aba, você verá a opção para alterar a cor de fundo, a cor do texto do título e a cor do texto do parágrafo.
- Clique no Cor Personalizada (2) opção ao lado do elemento que você deseja editar.
- Um novo pop-up será aberto de onde você pode personalizar a cor do elemento selecionado.
Opções de tipo de cor
Na parte superior do painel de cores, você verá três opções:
- Sólido: Aplique uma única cor uniforme à área selecionada. Esta é uma opção simples e limpa para usuários que desejam um bloco de cores consistente.
- Gradiente linear: Cria uma mistura gradual entre duas ou mais cores ao longo de uma linha reta. Você pode controlar a direção desse gradiente usando o controle deslizante de rotação.
- Gradiente radial: Produz uma transição de cores circular que irradia de um ponto central. Ideal para efeitos de holofote ou para chamar a atenção para uma área específica.
Paradas de gradiente
Quando você seleciona qualquer um Linear or Gradiente Radial, você verá uma barra de cores horizontal onde poderá gerenciar suas paradas de gradiente:
- Cada parada de gradiente (representado por um ícone de gota) marca um ponto de cor no gradiente.
- Clique em uma parada para alterar sua cor usando o seletor de cores ou inserindo um código hexadecimal.
- Você pode adicionar várias paradas para criar transições suaves e multicoloridas.
- Clique na pequeno ícone “x” abaixo de uma parada para removê-lo.
Controle deslizante de rotação (somente gradiente linear)
Para gradientes lineares, use o controle deslizante de rotação para alterar o ângulo do gradiente. Isso permite girar a direção da cor da horizontal (0°) para a vertical (90°) ou qualquer ângulo personalizado de até 360°.
- Uma pré-visualização do gradiente será ajustada em tempo real conforme você move o controle deslizante.
- O ângulo atual é mostrado em um campo numérico ao lado do controle deslizante (por exemplo, 270°).
Opções de forma de gradiente radial
Quando você seleciona Gradiente Radial (1), duas opções de forma aparecerão abaixo da pré-visualização do gradiente:
- Elipse: Produz um gradiente radial alongado com estiramento horizontal ou vertical. Útil para coberturas de gradiente mais amplas ou designs assimétricos.
- Círculo: Isso cria um gradiente perfeitamente redondo que irradia do centro (ou ponto focal selecionado). Ideal para fundos com holofotes ou para atrair o olhar para um elemento central.
Seletor de cores e entrada de código hexadecimal
Não importa se você está trabalhando com uma cor sólida ou com paradas de gradiente individuais:
- Use o seletor de cores para escolher uma cor visualmente.
- Alternativamente, insira um código de cor hexadecimal manualmente (por exemplo, #c14dff) para controle preciso de cores.
Se você estiver usando um gradiente, selecionar uma parada permitirá que você defina sua cor específica usando esta ferramenta.
Controle deslizante de opacidade
Na parte inferior do painel, você encontrará um controle deslizante para controlar a opacidade:
- Defina o nível de transparência da cor selecionada ou do gradiente.
- Um valor de 1 significa totalmente opaco, enquanto 0 é totalmente transparente.
Isso é útil para criar efeitos visuais em camadas ou sobreposições de fundo suaves.
Onde você pode usar essas opções de cores
Essas ferramentas avançadas de cores estão disponíveis nas seguintes áreas:
- Plano de fundo da seção
- Título de texto
- parágrafo Texto
Cada área tem sua própria aba de cores, para que você possa estilizar diferentes componentes de forma independente para maior flexibilidade visual.