Editar e Projetar Seções

Você pode personalizar qualquer seção do seu site para combinar com o seu estilo — ajustar como ela é exibida, alterar o 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 na seção.
3. Escolha uma das abas disponíveis: Configurações, Fundo ou Divisores de Forma (as opções variam conforme o layout).

Configurações da Seção

A aba Configurações controla a aparência e o comportamento da seção. 
Observação: As configurações disponíveis dependem do tipo de página e do layout selecionado.

Configurações comuns

• Mostrar/Ocultar Título da Seção
  Mostre ou oculte o título da seção.
  
  
• Número de Itens por 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

As páginas Página inicial e 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.

Fundo da Seção

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

Cor de fundo (ícone de pincel)

Use o ícone de 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 por baixo 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 a transparência dos elementos do padrão.
  
  
• Animar + Velocidade da Animação
  Ative a animação do padrão e ajuste sua 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, em seguida, ajuste:

• Opacidade
  Controla a transparência da imagem.
  
  
• Efeito
  Escolha como a imagem aparece: Regular, Desfocada 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 e à esquerda, Para baixo e à direita, e mais.
  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 no 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 daquela 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, em seguida, 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á até Divisores de Forma.
3. Escolha um estilo de divisor.
4. Use o controle deslizante de 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 de fundo e os divisores de forma não estão disponíveis para a Loja de E-commerce.