Editar e Projetar Seções

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

Para editar uma seção:

1. Vá até a seção que você deseja alterar.
2. Clique no ícone de engrenagem na 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 se parece 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 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 plano 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 plano de fundo da seção usando uma cor, padrão, imagem ou vídeo.
Observação: as opções de plano de fundo estão disponíveis apenas em layouts específicos.

Cor de plano de fundo (ícone de pincel)

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

Padrões (ícone de grade)

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

• Cor de fundo do layout
  Altera a cor de fundo por baixo do padrão.
  
  
• Tema de cores
  Define o estilo de cor 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 quão transparentes são os elementos do padrão.
  
  
• Animar + Velocidade da animação
  Ative a animação do padrão e ajuste a velocidade.

Imagem de plano de fundo (ícone de imagem)

Use o ícone de imagem para adicionar uma imagem de plano 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 plano de fundo. Você pode escolher em uma lista de direções, como Para cima, Para baixo, Para cima à esquerda, Para baixo à 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 pelo plano de fundo
  • Contida: posiciona a imagem em 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 legibilidade sobre imagens).

Vídeo de plano 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 as 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

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