Editar e Projetar Seções

Você pode personalizar qualquer seção do seu site para combinar com o seu estilo — ajustar a forma como ela é exibida, alterar o plano de fundo (cor, padrões, imagens ou vídeo), adicionar efeitos visuais e criar transições suaves entre seções usando divisores de forma.

Para editar uma seção:

1. Vá até a seção que deseja alterar.
2. Clique no ícone de engrenagem da seção.
3. Escolha uma das abas disponíveis: Configurações, Plano de fundo ou Divisores de forma (as opções variam conforme o layout).

Configurações da seção

A aba Configurações controla como a seção aparece e se comporta. 
Observação: As configurações disponíveis dependem do tipo de página e do layout selecionado.

Configurações comuns

• Mostrar/ocultar o título da seção
  Mostre ou oculte o título da seção.
  
  
• Número de itens em uma linha
  Escolha quantos itens aparecem por linha.
  Disponível apenas em páginas com itens internos e em determinados layouts.
  
  
• Cor da caixa do layout
  Defina a cor de fundo da caixa de texto.
  Disponível apenas em layouts que incluem uma caixa de texto.
  
  
• Exibição no celular
  Controle como a seção aparece no celular.
  Disponível apenas em páginas com itens internos e em determinados layouts.

Configurações da Página inicial e da página Promo

A Página inicial e as páginas Promo incluem opções adicionais específicas da seção:

• Posição do texto
  Escolha onde o texto aparece (direção/alinhamento).
  
  
• Altura mínima
  Defina a altura da seção (30%–100%).
  
  
• Largura da imagem
  Controle como uma imagem é exibida.
  Disponível apenas em determinados layouts.
  
  
• Animação da imagem (Parallax)
  Adicione uma animação de rolagem à imagem de fundo.
  Disponível apenas em determinados layouts.
  
  
• Estilo da caixa
  Adicione uma borda à caixa de texto.
  Disponível apenas em layouts com caixas de texto.

Plano de fundo da seção

A aba Plano de fundo permite estilizar o fundo da seção usando uma cor, um padrão, uma imagem ou um vídeo.
Observação: As opções de plano de fundo estão disponíveis apenas em layouts específicos.

Cor de fundo (ícone do pincel)

Use o ícone do pincel para escolher uma cor de fundo para a seção.

Padrões (ícone de grade)

Use o ícone de grade para adicionar um padrão e, em seguida, personalizá-lo:

• Cor de fundo do layout
  Altera a cor de fundo abaixo do padrão.
  
  
• Tema de cores
  Define o estilo de cores do padrão:
  • Primário: variações das cores primárias do seu site
  • Contraste: uma variação contrastante da cor primária
  • Mono: um padrão de cor única
    
    
• Opacidade da forma
  Controla o nível de transparência dos elementos do padrão.
  
  
• Animar + Velocidade da animação
  Ative a animação do padrão e ajuste a velocidade.

Imagem de fundo (ícone de imagem)

Use o ícone de imagem para adicionar uma imagem de fundo da biblioteca ou enviar a sua própria, e depois ajuste:

• Opacidade
  Controla a transparência da imagem.
  
  
• Efeito
  Escolha como a imagem aparece: Regular, Desfocado ou Preto e branco artístico.
  
  
• Parallax
  Adiciona uma animação de rolagem à imagem de fundo. Você pode escolher em uma lista de direções, como Para cima, Para baixo, Para cima à esquerda, Para baixo à direita e outras.
  Disponível apenas ao usar o estilo de imagem Capa.
• Estilo
  Escolha como a imagem preenche a seção:
  • Capa: preenche a seção
  • Duplicar: repete a imagem por todo o plano de fundo
  • Contida: posiciona a imagem dentro de uma área específica
    
    
• Posição
  Define onde a imagem aparece.
  Disponível apenas para os estilos Duplicar e Contida.
  
  
• Cor do texto
  Define a cor do texto dessa seção (útil para melhorar a leitura sobre imagens).

Vídeo de fundo (ícone de câmera de vídeo)

Use o ícone de câmera de vídeo para adicionar um vídeo da biblioteca ou enviar o seu próprio, e depois ajuste:

• Opacidade
• Efeito: Regular, Desfocado ou Preto e branco artístico
• Cor do texto

Divisores de forma entre seções

Use Divisores de forma para criar uma transição suave e estilizada entre seções.

1. Abra o menu do ícone de engrenagem da seção.
2. Vá para Divisores de forma.
3. Escolha um estilo de divisor.
4. Use o controle deslizante Altura para ajustar o tamanho.

O divisor é adicionado à parte inferior da seção selecionada. Para um fluxo visual mais completo, você também pode adicionar um divisor à seção acima.

Observação

No momento, as configurações de seção, o design do plano de fundo e os divisores de forma não estão disponíveis para a Loja de e-commerce.