Ir para o conteúdo
Mudar de idioma PT
  1. Ajuda do WebAcappella Tempo
  2. O editor
  3. Seções, separadores e costuras

Seções, separadores e costuras

Como o Separador divide a página em seções, o que acontece com os componentes quando você o insere, move ou exclui, e como a costura desenha a fronteira entre duas seções. Com esquemas para ilustrar.

Uma página se constrói com três peças: as seções, os componentes colocados dentro delas e os separadores, que marcam a fronteira entre duas seções. A costura desenha essa fronteira: uma borda reta, ou então uma onda, uma curva… Esta página explica cada peça com um esquema.

Seções, componentes e separadores

Esquema de uma página com três seções, clara, escura e depois bege, numeradas de 1 a 4: uma seção, um componente, um separador e a barra roxa da seção sob o cursor.
  1. A seção é uma faixa horizontal que atravessa toda a página. É ela que carrega o fundo: claro, escuro, gradiente, imagem ou vídeo.
  2. O componente é um bloco de conteúdo (título, texto, fotos, formulário…) colocado em uma seção. Ele não tem fundo próprio: assume o da sua seção e, sobre um fundo escuro, seus textos passam sozinhos para o claro.
  3. O separador é a fronteira entre duas seções. Tudo o que está abaixo de um separador, até o seguinte, pertence à mesma seção.
  4. A barra da seção aparece no canto superior esquerdo quando você passa o cursor sobre uma seção: Fundo de seção (o círculo mostra o fundo atual), Costura superior, Mover esta seção e Excluir o separador.

Dividir uma seção em duas: o Separador

  1. Clique em Separador, o botão roxo da barra de ferramentas.
    A barra de ferramentas do editor: o botão roxo Separador, ao lado do botão laranja Componente.
  2. Linhas roxas aparecem entre os componentes, e uma última no fim da página: são os lugares onde a fronteira pode ficar. Clique em uma delas. Esc cancela.
  3. Uma nova seção começa nesse ponto. O componente situado logo abaixo da linha, e todos os que vêm depois dele na mesma seção, passam para dentro dela.
Antes: uma seção clara com três componentes e um clique na linha roxa colocada entre o primeiro e o segundo. Depois: duas seções separadas pela fronteira roxa, o primeiro componente acima, os outros dois abaixo.

A nova seção começa com um fundo Claro, margens de 80 pixels em cima e embaixo, e sem costura. Se a seção dividida já era clara, nada muda na tela, e isso é normal: abra Fundo de seção na barra da nova seção para dar a ela seu próprio fundo. Já a linha no fim da página acrescenta uma seção vazia, pronta para receber componentes.

Excluir ou mover um separador

A lixeira da barra, Excluir o separador, não apaga nenhum conteúdo. Ela remove a fronteira: os componentes da seção se juntam à seção de cima e assumem o fundo dela. O fundo e a costura da seção excluída desaparecem com ela.

Antes: uma seção clara com um componente, depois uma seção escura com dois componentes, cuja lixeira está destacada. Depois: uma única seção clara com os três componentes, todos passados para o claro.

As setas da barra, Mover esta seção, movem a fronteira, não o conteúdo. As linhas roxas reaparecem: clique no lugar onde a seção deve agora começar. O fundo e a costura permanecem ligados ao separador. Os componentes, por sua vez, não se movem, mas aqueles que ficam do outro lado da fronteira mudam de seção e, portanto, de fundo.

Antes: uma seção clara com dois componentes, sendo que o segundo tem uma imagem laranja, depois uma seção escura. Uma seta roxa parte do botão Mover da seção escura em direção à linha colocada entre os dois componentes claros. Depois: a fronteira subiu e o componente com a imagem laranja está na seção escura.

Mudar um componente de seção

Para mover um único componente, passe o cursor sobre ele, clique em Mover este componente na sua pequena barra laranja e depois no local desejado, em qualquer seção. Ao chegar à nova seção, ele assume o fundo dela: seus textos escuros sobre fundo claro passam a claros sobre fundo escuro, sem nenhum ajuste da sua parte.

Antes: o componente com a imagem laranja está na seção clara, e uma seta laranja o leva para o fim da seção escura. Depois: ele está na seção escura e seus textos passaram para o claro.

Um componente está sempre inteiro em uma única seção, nunca dividido entre duas. Uma seção da qual você retirou todos os componentes permanece no lugar com o selo Seção vazia: coloque outro componente nela ou exclua seu separador.

A costura: o formato da fronteira

Por padrão, duas seções se tocam por uma borda reta. A costura substitui essa borda por um formato: uma onda, uma curva, montanhas… Ela é configurada sempre na seção de baixo, com o botão Costura superior: é a borda superior dessa seção que ela desenha.

Uma seção escura acima de uma seção clara. Abaixo da fronteira roxa, uma onda da cor da seção escura desce para dentro da seção clara. Na barra roxa da seção clara, o botão Costura superior está destacado: sua pequena imagem reproduz a onda.
  1. O botão Costura superior, na barra da seção de baixo. Sua pequena imagem mostra o formato escolhido; um círculo cortado significa “sem costura”.
  2. O formato, pintado com a cor da seção de cima: essa cor parece escorrer para dentro da seção de baixo.

O botão abre o painel Costura (separador). Ele oferece a borda reta (o círculo cortado) e onze formatos: clique em um deles e a página muda imediatamente, não há nada a confirmar.

As doze opções do painel, numeradas de 1 a 12, cada uma mostrada entre uma seção escura e uma seção clara. Os formatos 2, 3, 5, 10 e 11 têm camadas mais claras, em transparência.

Na ordem: 1 borda reta, 2 onda, 3 onda suave, 4 diagonal, 5 curva, 6 curva assimétrica, 7 triângulo, 8 triângulo assimétrico, 9 ziguezague, 10 montanhas, 11 nuvens, 12 gotas.

A sobreposição: onde o formato é desenhado

O formato tem uma altura. A configuração Sobreposição define onde acomodá-lo em relação à fronteira. Nos esquemas a seguir, a linha roxa marca a fronteira, e as hachuras, as margens das seções: o espaço livre que cada seção mantém acima e abaixo do seu conteúdo.

Sobreposição “nenhum” (a configuração padrão)

O formato ocupa seu próprio espaço, no topo da seção de baixo: a página se alonga na altura do formato e nada é encoberto. É a opção mais segura.

A onda escura ocupa uma faixa acrescentada logo abaixo da fronteira; a margem e o componente da seção clara desceram na mesma medida.

Sobreposição “abaixo”

O formato desce para dentro da seção de baixo, na sua margem superior. A página não se alonga, e o fundo de cima parece escorrer para dentro da seção.

A onda escura desce abaixo da fronteira, na margem hachurada da seção clara, sem tocar seu componente.

Sobreposição “acima”

O formato sobe para dentro da seção de cima, por cima da sua margem inferior, com o fundo da seção de baixo: é ela que parece transbordar para cima.

Uma onda clara sobe acima da fronteira, na margem hachurada da seção escura, sem tocar seu componente.

Sobreposição “centro”

O formato fica a cavalo sobre a fronteira, metade em cada seção.

A onda é cortada em duas pela fronteira: uma metade na margem da seção escura, a outra na da seção clara.

Quando o formato encobre um componente

Com acima, e com centro na sua metade superior, o formato sobe por cima da parte de baixo da seção de cima. Enquanto ele couber na margem, tudo bem. Se for mais alto que a margem, ele encobre a parte de baixo do componente. Com abaixo, o componente fica por cima do formato, mas, se tocar nele, seu texto fica menos legível.

À esquerda, cruz vermelha: a onda clara sobe mais alto que a pequena margem hachurada da seção escura e encobre a parte de baixo do seu componente. À direita, sinal verde: a mesma onda, com uma margem ampliada, já não toca o componente.
  • Amplie a margem: em Fundo de seção, item Margens, o campo Topo da seção de baixo para a sobreposição abaixo, o campo Base da seção de cima para a sobreposição acima, os dois para centro.
  • Reduza a altura da costura.
  • Mude a sobreposição para “nenhum”: o formato passa então a ocupar seu próprio espaço e não encobre mais nada.

Camadas, altura, largura e espelho

Camadas: a onda, a onda suave, a curva, as montanhas e as nuvens são feitas de várias camadas: um formato sólido à frente e, atrás dele, um ou dois formatos da mesma cor, em transparência. A configuração Camadas escolhe quantas manter, a partir da que está à frente: 1 dá um formato simples e nítido, o máximo (3 para a onda, 2 para as demais) dá profundidade. Ela só aparece para esses cinco formatos, e escolher outro formato restaura todas as suas camadas.

A mesma onda com uma, duas e depois três camadas, numeradas de 1 a 3: cada camada acrescentada desenha, em transparência, uma onda mais clara sob as anteriores.

Altura: a altura do formato, em pixels (60 por padrão, até 200). No celular, ela se reduz sozinha, até a metade.

A mesma onda, baixa e depois alta.

Largura %: a 100 %, o motivo cabe exatamente na largura da página. Acima disso (até 300 %), ele se estica: as ondas se alongam e só a parte central do motivo continua visível.

A mesma onda a 100 % e depois a 200 %: esticada, ela fica mais suave.

Espelho horizontal: inverte o formato da esquerda para a direita. Prático com os formatos assimétricos, para alternar o sentido de uma seção para outra.

Uma curva assimétrica e depois a mesma invertida da esquerda para a direita.

Por que minha costura não aparece

O formato desenha a fronteira entre o fundo de uma seção e o da outra. Se as duas seções tiverem o mesmo fundo, ele está lá, mas invisível. O painel avisa: “Costura invisível: esta seção e a anterior têm o mesmo fundo.” Dê um fundo diferente a uma das duas seções.

À esquerda, duas seções claras: a onda, desenhada aqui em pontilhado, não aparece. À direita, a seção de cima é escura: a onda aparece.

Uma onda sob o cabeçalho

O cabeçalho não tem botão Costura superior: nenhuma seção está acima dele. Para desenhar uma onda sob o cabeçalho, configure a costura da primeira seção da página, com a sobreposição abaixo: o formato assume a cor do cabeçalho e cai dentro da página. Se o cabeçalho continua visível durante a rolagem, acima fica desativado: o cabeçalho cobriria o formato.

Um cabeçalho escuro e, em seguida, a primeira seção da página, clara. Uma onda da cor do cabeçalho desce para dentro dessa seção. Na barra da primeira seção, o botão Costura superior está destacado.

Mesma lógica no fim da página: a costura do rodapé é configurada no rodapé e assume o fundo da última seção de cada página. Como esse fundo muda de uma página para outra, o editor do rodapé o substitui por uma faixa quadriculada, “Fim da página”.

Configurar o fundo de uma seção →