Layout automático

Apresente sua equipe ou os diferentes projetos com conjuntos de imagens, texto e botões em um layout personalizável.

Ultima atualização 24 de Dezembro de 2024

Use layouts automáticos para apresentar conjuntos de conteúdo em colunas e linhas, carrosséis ou slideshows. Quando você adiciona novo conteúdo a um layout automático, ele é reorganizado automaticamente com base nas configurações escolhidas. Isso torna os layouts automáticos ótimos para o conteúdo que você atualiza regularmente, como imagens de produtos em destaque, projetos recentes, membros atuais da equipe ou clientes anteriores.

Este guia aborda os layouts automáticos que combinam texto e imagem. Para um layout parecido que mostre principalmente imagens, use uma seção de galeria. Para criar layouts parecidos manualmente, use uma seção de blocos.

Acessando o recurso

Este guia é para a versão 7.1. Para um efeito semelhante na versão 7.0, crie colunas e linhas com blocos.

Assista ao vídeo

Adicionar uma seção de layout automático

Para adicionar uma seção de layout automático que inclui texto e imagens:

  1. Clique em Editar na página e depois em Adicionar seção.
  2. Clique em Pessoas, Serviços ou Depoimentos.
  3. Procure layouts com um ícone i no canto superior direito e clique no desejado.

Lembre-se:

  • Para adicionar um layout automático que exiba imagens, siga nossas etapas para adicionar seções de galeria.
  • Ao clicar numa seção sem o ícone i no canto superior direito, você adiciona uma seção de blocos; nesse caso, os passos restantes neste guia não valerão. As seções de blocos podem ter layouts parecidos, mas precisam ser organizadas manualmente.
  • Os layouts automáticos aparecem em outras categorias, mas Pessoas, Serviços e Depoimentos têm mais opções. Mesmo que o tópico não corresponda ao que do site, você pode trocar todo o conteúdo da demonstração pelo seu.

Defina quais elementos são exibidos

Para escolher como sua seção e itens são exibidos:

  1. Passe o cursor do mouse sobre a seção e clique em Editar conteúdo.
  2. Na aba "Elementos", ative ou desative cada opção.

Para a seção como um todo, use estas opções:

  • Título – Exibe um título de texto na parte superior da seção
  • Botão – Exibe um link de botão na parte inferior da seção

Para alterar a forma como os itens são exibidos, use estas opções:

  • Mostrar imagem – Exibe uma imagem com cada item
  • Mostrar título – Exibe o texto do título com cada item
  • Mostrar corpo – Exibe o corpo do texto com cada item
  • Mostrar botão – Exibe um link de botão com cada item

Lembre-se:

  • As opções se aplicam a todos os itens dessa seção. Não é possível ter configurações diferentes para itens individuais em uma seção.
  • Desativar um botão oculta sua opção correspondente na guia de conteúdo. Por exemplo, se você desativar a opção Mostrar título, o campo Título não aparecerá no editor de itens.

Adicionar ou editar itens

Cada layout automático inclui itens de demonstração. Você pode substituir o conteúdo desses itens pelo seu próprio ou excluí-los e adicionar novos itens para começar do zero.

Para adicionar ou editar itens:

  1. Passe o cursor do mouse sobre a seção e clique em Editar conteúdo e clique em Conteúdo.
  2. Na lista Itens, clique em um item para editar seu conteúdo ou clique em Adicionar para adicionar um novo.
  3. Para reorganizar um item, clique e arraste o ícone à direita do título do item.
  4. Para excluir um item, clique no ícone da lixeira à direita do item.

Cada item pode ter uma imagem, um título, uma descrição e um botão. Se alguma dessas opções não aparecer quando você clicar no item, veja se elas estão ativadas na aba "Elementos".

Se você não der nenhum título a um item, aparecerá é título padrão no editor com base na ordem no layout automático, como "Item 1" ou "Item 2". Os títulos padrão não aparecem para os visitantes. Para dar um título ao item, clique no item e inclua o título no campo Título.

Dica

você adicionará todos os itens e seus elementos a um layout automático manualmente. Se quiser exibir itens de coleção de uma coleção existente em seu site, use Blocos de Sumário.

Editar o título e o botão da seção

Na aba "Conteúdo", também é possível editar o título e o botão da seção como um todo. O título aparece no topo da seção, e o botão aparece embaixo. Para adicioná-los e editá-los: 

  1. Na guia elemento, certifique-se de que as alternâncias Título e Botão estejam ativadas.
  2. Na aba "Conteúdo", clique em Título para adicionar um texto e alterar o alinhamento.
  3. Clique em Botão para editar o texto do botão, configurar um link e alterar o tamanho e o alinhamento do botão.

Para ocultar qualquer um desses elementos, desative-o na aba Elementos.

Alterar o design do layout automático

Para alterar o layout da seção:

  1. Passe o cursor do mouse sobre a seção e clique em Editar conteúdo e depois em Design.
  2. Clique no menu suspenso na parte superior para alterar o layout.

É possível escolher entre três layouts:

  • Lista simples – Exibe itens e seus elementos em uma linha da esquerda para a direita. Dependendo das configurações e do número de itens, o layout pode criar mais linhas abaixo da primeira.
  • Slideshow de banners – Exibe um item de cada vez com elementos que sobrepõem a imagem, que atua como plano de fundo para a seção. Os visitantes clicam em controles para percorrer os itens.
  • Carrossel – Exibe itens e seus elementos em uma linha da esquerda para a direita em um carrossel rotativo. Os visitantes clicam em controles para percorrer mais itens.

Cada layout tem suas próprias configurações de design para maior personalização. Por exemplo, com layouts simples de lista e carrossel, você pode cortar as imagens em círculos. Clique em Estilo para obter mais configurações, como alterar o tamanho do texto ou adicionar um plano de fundo de cartão para cada item. Clique em Tamanho e espaço para configurações de preenchimento e espaçamento, como definir a largura do conteúdo, alterar o espaço entre os elementos ou ajustar o posicionamento da imagem. Suas opções nas guias Estilo e Tamanho e espaço dependem do layout.

Se você alterar o layout, a seção salvará suas configurações no layout selecionado anteriormente, para que você possa voltar a ele sempre que desejar.

Anotação

não é possível mudar dessas opções para um layout de galeria. Em vez disso, crie uma seção de galeria.

Tamanho do texto

Após selecionar o layout da seção de listas, role na aba "Design" e clique em Estilo para escolher um tamanho de fonte. Você pode selecionar um tamanho predefinido que altera o título e a descrição juntos; ou clicar em ... para definir separadamente um tamanho personalizado para o título e a descrição dos itens. Dependendo do layout e das configurações atuais, aparecerão outras opções.

Altura da seção

A altura da seção de layout automático é fixada pelo item com mais texto. Por isso, talvez apareça um espaçamento extra acima ou abaixo dos itens com menos texto nos banner com slideshow e no layout de carrossel. No layout simples de listas, pode acontecer o mesmo com a altura da linha.

Recomendamos manter uma quantidade semelhante de texto em cada item para garantir o máximo controle sobre a altura e o espaçamento da seção.

Divisor de seção

Para adicionar um indicador visual entre a parte inferior do layout automático e a seção seguinte, ative um divisor de seção:

  1. Passe o cursor sobre o layout automático e clique em Editar seção.
  2. Em Formatar, ative a opção Divisor.
  3. Ajuste a forma, o traçado, a cor e a espessura do divisor.

Saiba mais sobre o divisor de seção em Seção de página.

Design de layout automático em dispositivos móveis

Algumas opções de design variam no computador e no celular. Os slideshow do banner e o layout em carrossel, por exemplo, podem mostrar setas de navegação para que os visitantes mudem os itens. Ao desativar essas setas, os visitantes no computador precisarão clicar e arrastar para trocar os itens; na versão móvel, porém, as setas sempre aparecem para que os visitantes vejam todos os itens.

Alterar as cores do layout automático

Para alterar as cores da seção de layout automático, abra Estilos do Site e clique em Cores. Selecione o esquema de cores da seção e, em seguida, use os ajustes no tipo de seção de lista relevante: Simples, Carrossel ou Banner.

Ajuste o estilo da donte e do botão de layout automático

O layout automático segue as configurações gerais de fonte e de estilo do botão nos estilos do site.

Fonte

O texto do layout automático segue as configurações de fonte gerais do site no painel "Fontes" dos estilos do site. O título dos itens segue os Títulos, e o texto do corpo do item segue os Parágrafos. Ao usar um título de seção no layout automático, você pode ajustar o estilo dele independentemente das outras configurações de fonte: clique em Atribuir estilos e depois em Título na Seção de listas.

O tamanho do texto é ajustado nas configurações do layout automático.

Botões

Ajuste a fonte, a cor e a forma do botão no painel "Botões" dos estilos do site. Tanto os botões de item quanto os botões de seção seguem as configurações do estilo Principal. Para garantir um visual uniforme, essas configurações aferam a maioria dos botões em todo o site.

Para definir o tamanho dos botões do layout automático:

  1. Passe o cursor sobre a seção e clique em Editar conteúdo
  2. Em Design, escolha Estilo.
  3. Em Tamanho do texto, clique em ....
  4. Use o controle de "Botão do item" para alterar o tamanho.

Layouts automáticos vs. seções de galeria

Os layouts automáticos e as seções de galeria organizam automaticamente seu conteúdo em layouts personalizáveis, mas os recursos entre eles variam. Não é possível alterar um layout automático para uma seção de galeria ou vice-versa. Aqui estão as diferenças básicas:

  • Os layouts automáticos podem exibir diferentes combinações de imagens, quantidades maiores de texto e links de botão. Eles são ideais para mostrar membros da equipe, clientes anteriores ou projetos recentes.
  • As seções da galeria destacam as imagens sozinhas, tornando-as mais adequadas para portfólios de artistas ou sites de fotografia. É possível adicionar texto às imagens da seção da galeria, mas apenas legendas breves.

Para saber mais sobre as diferenças entre as duas seções e decidir qual é a melhor para suas necessidades, consulte a tabela abaixo.

Recurso Layout automático Seções de galeria:
Imagens de corte automático
  • Layout de lista simples
  • Layout de carrossel
  • Não
Slideshow de reprodução automática
  • Não
  • Apresentação de slides: layout simples
  • Apresentação de slides: layout completo
Botões
  • Sim
  • Não
Exibir apenas texto
  • Sim
  • Não
Links de URL de imagens
  • Não
  • Sim
Layout
  • Lista simples
  • Slideshow de banner
  • Carrossel
  • Grade: simples, tiras, tijolos
  • Slideshow: simples, tela cheia, rolo de filme
Lightbox
  • Não
  • Layouts de grade
Sobrepor texto na imagem
  • Layout de slideshow de banner
  • Não
Título da seção
  • Sim
  • Não
Vídeos
  • Não
  • Não
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.