Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Layout automático

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.

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

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 ListaPessoas ou Títulos.
  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.
  • Se você clicar em uma seção sem Auto no canto superior direito, adicionará uma seção de bloco e o restante das etapas neste guia não se aplicará. As seções de blocos podem ter layouts semelhantes, mas precisam ser organizadas manualmente.

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 uma dessas opções não aparecer, veja se que ela está ativada na aba "Elementos".

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.

Para aumentar a personalização, o design de cada layout tem configurações específicas. Nos layouts "Lista simples" e "Carrossel", por exemplo, é possível cortar a imagem em formato circular. Ao alterar o layout, a seção salva as configurações no layout previamente selecionado, para você sempre poder voltar a ele se quiser.

Atençã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

Depois de selecionar o layout da seção de lista, role para baixo na guia Design e clique em Estilo  para escolher um tamanho de fonte. Você pode selecionar entre tamanhos predefinidos que alteram o título, a descrição e o texto do botão juntos ou clicar em ... para definir tamanhos personalizados para títulos e descrições de itens separadamente. Dependendo do layout e das configurações atuais, você poderá ver outras opções.

Altura da seção

Se você tiver muito conteúdo de texto com seus itens, a altura da seção de layout automático é definida pelo item com o maior contexto de texto. Isso significa que você pode ver preenchimento extra acima ou abaixo de itens com menos conteúdo em layouts de banner e carrossel de apresentação de slides. No layout de lista simples, você pode ver algo semelhante com a altura da linha.

Recomendamos manter os itens em uma quantidade semelhante de conteúdo de texto para garantir maior controle sobre a altura e o espaçamento da seção.

Design de layout automático em dispositivos móveis

Algumas opções de design podem variar no computador e no celular. Os layouts de apresentação de slides e carrossel de banner, por exemplo, podem exibir setas de navegação para que os visitantes possam clicar nos itens. Se você desativar as setas de navegação, os visitantes de um computador clicarão e arrastarão para rolar pelos itens, mas as setas sempre serão exibidas em dispositivos móveis para garantir que os visitantes possam ver todos os itens.

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, alvenaria
  • Slideshow: simples, cheia, bobina
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
Este artigo foi útil?
Utilizadores que acharam útil: 10 de 25