Separadores de forma: crie transições elegantes entre suas seções

Empilhe duas seções de cores diferentes e você obterá uma borda nítida: uma linha horizontal perfeitamente reta. Fica limpo, mas é também o que todos os sites fazem. Para dar um pouco de relevo e personalidade às suas páginas, o WebAcappella Fusion oferece os separadores de forma — os famosos shape dividers que vemos em sites modernos: uma onda, uma curva ou um triângulo que suaviza a transição de uma seção para outra.

Boa notícia: não é preciso codificar nada, nem desenhar nada. Tudo é configurado no inspetor da sua seção, com apenas alguns cliques. Neste tutorial, vamos ver onde isso fica, como adicionar seu primeiro separador e, principalmente, a dica de cor que faz toda a diferença.

O que é um separador de forma?

Um separador de forma é um recorte decorativo colocado na borda superior ou inferior de uma seção. Em vez de uma transição reta entre sua faixa azul e a seção branca seguinte, você obtém, por exemplo, uma onda: a cor de uma seção parece “transbordar” para a outra, seguindo uma forma suave.

Cada seção possui dois separadores independentes: um na parte superior e outro na parte inferior. Você pode ativar apenas um, os dois, e atribuir a eles formas ou cores diferentes. É isso que permite criar sequências variadas ao longo de uma página.

Onde encontrá-lo no WebAcappella Fusion

O separador de forma é uma configuração da seção (a “caixa” que contém seus blocos de conteúdo). Para acessá-la:

1. Selecione a seção cuja borda você deseja decorar (clique em uma área vazia da seção, não em um elemento dentro dela).
2. Abra o inspetor da seção na lateral.
3. Clique na guia Separador de forma (o ícone em forma de onda).
4. Lá você encontrará dois grupos de configurações: Separador superior e Separador inferior.

Adicione seu primeiro separador, passo a passo

Vamos considerar o caso mais comum: você deseja uma onda entre uma seção colorida e a seção branca localizada logo abaixo dela.

1. Selecione a seção superior e abra a aba Separador de forma.
2. Em Separador inferior, ative a opção Ativado.
3. Escolha uma forma na lista (comece por “Onda” ou “Onda suave”).
4. Defina a cor do separador para a cor de fundo da seção seguinte — esse é o segredo, voltaremos a isso em seguida.
5. Ajuste a altura para dar mais ou menos amplitude à onda.

E pronto: a seção branca de baixo parece subir para dentro da seção colorida, seguindo o contorno de uma onda. Sem imagens, sem exportação, sem código.

A dica que faz toda a diferença: a cor

Esse é o erro de principiante mais comum, então é melhor corrigir isso logo de cara. Para obter o efeito de “duas seções que se encaixam”, a cor do separador deve corresponder ao fundo da seção vizinha, e não ao da seção que o contém.

Se suas seções utilizam as cores dinâmicas do tema, lembre-se de usar o mesmo tom: assim, quando você alterar a paleta do seu site, o separador permanecerá coerente com o restante.

As formas disponíveis

O WebAcappella Fusion oferece onze formas, desde as mais sóbrias até as mais marcantes. Escolha de acordo com o tom do seu site:

• Ondas: Onda e Onda suave — a opção versátil, ideal para um efeito fluido e orgânico.
• Curvas: Curva e Curva assimétrica — uma transição arredondada, elegante e discreta.
• Ângulos: Triângulo, Triângulo assimétrico, Inclinação e Ziguezague — para um estilo mais gráfico, dinâmico ou “tech”.
• Decorativas: Montanhas, Gotas e Nuvens — formas mais temáticas, a serem usadas com moderação.

Aprofundando: as configurações avançadas

Depois de definir a forma e a cor, várias opções permitem refinar o resultado:

• Altura: a amplitude vertical da forma. Quanto maior for, mais pronunciado será o efeito.
• Largura (%) e posição horizontal: amplie o motivo para além de 100% para mostrar apenas uma parte da forma e, em seguida, escolha qual parte fica visível (esquerda, centro, direita).
• Camadas: sobreponha até três cópias da forma, com opacidade decrescente, para obter um belo efeito de profundidade.
• Inversão horizontal/vertical: inverta a orientação da forma para variar de uma seção para outra.
• Sobreposição do conteúdo: quando ativada, o separador fica sobre o conteúdo sem aumentar a altura da seção; quando desativada, a seção se expande para dar espaço a ele.

Três dicas para não exagerar

• Mantenha a coerência: uma ou duas famílias de formas em todo o site são suficientes. Alternar entre ondas, ziguezagues e nuvens na mesma página confunde a mensagem.
• A simplicidade compensa: um separador deve acompanhar a leitura, não roubar a atenção. Em caso de dúvida, diminua a altura.
• Sempre verifique no celular: visualize suas páginas no tamanho de um celular antes de publicar e oculte os separadores que ocupam muito espaço, se necessário.

Resumo

• Os separadores de forma são configurados na aba dedicada do inspetor da seção, na parte superior e/ou inferior.
• A cor do separador deve corresponder ao fundo da seção vizinha para criar o efeito de recorte.
• Onze formas disponíveis, desde a onda discreta até o zigue-zague gráfico, além de ajustes de altura, largura, camadas e inversão.
• Lembre-se da exibição em dispositivos móveis: um separador pode ser ocultado em telas pequenas.
• Tudo é visual, sem nenhuma linha de código.

Os separadores de forma são um daqueles pequenos detalhes que fazem um site parecer “profissional” sem esforço extra. Uma onda bem posicionada, a cor certa, e suas páginas ganham imediatamente mais estilo.