Adicione conteúdo às páginas do seu site com este sistema de edição de arrastar e soltar totalmente personalizável.

O Editor Intuitivo é o principal editor de conteúdo para sites da versão 7.1 do Squarespace. As seções de bloco em todos os tipos de páginas, subpáginas do portfólio e rodapé do site utilizam o Editor Intuitivo.

O Editor Intuitivo está disponível para todas as seções de blocos nos sites 7.1. Atualmente, o Editor Intuitivo não é compatível com:

• Áreas de blocos que não usam seções, como publicações do blog, descrições de eventos e outras informações sobre produtos
• Seções que não usam blocos, como Layouts Automáticos, seções de coleções e seções de galeria.
• Sites da versão 7.0

No momento, não é possível adicionar ou editar blocos nas seções de Motores Fluidos no app do Squarespace.

Assista a este vídeo

Editor Intuitivo - início rápido

Exclusivo dos sites da versão 7.1, o Editor Intuitivo é a ferramenta de edição das seções de páginas que utilizam blocos. Se o site é da versão 7.1, você pode começar a usar o Editor Intuitivo a qualquer momento; basta adicionar uma página de layout; adicionar uma seção de bloco a uma página existente; ou editar o rodapé. Se o seu site tiver seções de bloco feitas antes do lançamento do Editor Intuitivo, você pode fazer upgrade delas.

Com a grade flexível do Editor Intuitivo, coloque os blocos em qualquer lugar, mesmo sobrepondo outros blocos, e ajuste o tamanho deles diretamente na página. Você criará dois projetos de layout: um para os visitantes do site no computador e outro para a versão móvel. Clique nos ícones do aparelho (canto superior direito) para definir os diferentes layouts.

Saiba mais no restante deste guia.

Estou usando o Editor Intuitivo?

O Editor Intuitivo funciona nos sites da versão 7.1 em:

• Seções de blocos em qualquer página
• Rodapé
• Subpáginas de Portfólio

Quando você clica em Editar na página, as seções do Editor Intuitivo têm um botão Adicionar bloco no canto superior esquerdo. Ao se clicar e arrastar um bloco, uma grade deve aparecer em segundo plano.

Dica: para que a grade permaneça visível, pressione a tecla G. Pressione novamente a tecla G para ocultar a grade.

Se nenhum botão ou grade aparecer, é porque essa área do bloco usa o editor clássico.

Editor clássico

Na versão 7.0, todas as áreas de bloco usam o editor clássico. Nos sites da versão 7.1, algumas áreas de blocos ainda utilizam nosso editor clássico, incluindo:

• Postagens de blog
• Descrições de eventos
• Informações adicionais do produto
• Seções de bloco adicionadas antes do lançamento do Editor Intuitivo

Saiba mais sobre as diferenças entre o Editor Intuitivo e o editor clássico em Editor Intuitivo x editor clássico. 

Adicione uma seção do Editor Intuitivo

Para adicionar uma seção do Editor Intuitivo a uma página:

1. Clique em Editar na página.
2. Clique em Adicionar seção.
3. Clique em Adicionar seção vazia para adicionar uma seção vazia do Editor Intuitivo; ou clique numa categoria para conferir as seções pré-criadas. Seções com o ícone i no canto superior direito têm layout automático e não usam o Editor Intuitivo.

Para mudar a altura da grade da seção, clique e arraste o ícone de seta azul no canto inferior direito. A quantidade e a posição dos blocos podem impedir que você diminua a altura. No Editor Intuitivo, cada seção pode ter até mil linhas.

Faça upgrade de uma seção com editor clássico

Atenção: após fazer upgrade e salvar a página, não é possível reverter uma seção para o editor clássico. Se você sabe se quer usar o Editor Intuitivo em uma seção, recomendamos duplicar a seção antes de fazer o upgrade, por precaução.

Se você adicionou uma seção de blocos que usa o editor clássico antes do lançamento do Editor Intuitivo, é possível convertê-la para o Editor Intuitivo:

1. Clique em Editar na página.
2. Clique em Fazer upgrade no canto superior esquerdo de uma seção do editor clássico.
3. A seção clássica do editor vira uma seção do Editor Intuitivo. Se a altura do editor clássico exceder o limite de mil linhas na grade, ela será dividida em várias seções do Editor Intuitivo.

Por causa das diferenças entre o editor clássico e o Editor Intuitivo, o layout pode mudar ligeiramente ou os blocos podem ficar desalinhados após o upgrade. No editor clássico, nem todos os layouts têm um equivalente exato no Editor Intuitivo. No entanto, o upgrade é uma ótima oportunidade para você reformular o layout dos blocos com as novas opções e com a flexibilidade do Editor Intuitivo.

Se você decidir não usar o Editor Intuitivo com essa seção, clique em Desfazer antes de salvar.

Adicione um bloco

Para adicionar um bloco a uma seção do Editor Intuitivo:

1. Clique em Editar na página.
2. Clique em Adicionar bloco no canto superior esquerdo.
3. Selecione o bloco a ser adicionado. Saiba mais sobre os diferentes tipos de blocos em Adição de conteúdo com blocos.

Não há um limite fixo para o número de blocos que você pode adicionar; recomendamos um máximo de 60 blocos por página, pois o excesso de conteúdo pode prejudicar o carregamento do site. Browsers de aparelhos móveis, em particular, podem ter problemas para baixar páginas com excesso de conteúdo.

Após adicionar os blocos, você pode:

• Afixe um bloco
• Duplicar os blocos já na seção
• Copiar e colar blocos para e de outras seções do Editor Intuitivo
• Clicar e arrastar para mover e ajustar o tamanho dos blocos
• Edite o layout para versão móvel para definir como ele aparece nos aparelhos móveis
• Confira as melhores práticas para deixar acessíveis as seções do Editor Intuitivo, principalmente ao sobrepor blocos

Atenção: o bloco de espaçamento não aceita o Editor Intuitivo. No editor clássico, o bloco de espaçamento adiciona espaço entre os blocos; para fazer isso no Editor Intuitivo, clique e arraste os blocos para as novas posições na seção.

Afixe um bloco

Afixe um ou mais blocos nas seções do Editor Intuitivo para mantê-los fixos enquanto os visitantes rolam a tela em outros conteúdos da seção. Essa é uma ótima forma de destacar um conteúdo específico e dar à página um design exclusivo.

Para afixar um bloco:

1. Clique no bloco e depois no ícone de alfinete na barra de ferramentas do bloco. É possível afixar qualquer tipo de bloco.
2. Como padrão, os blocos afixados se alinham ao topo da seção. Você pode clicar nos ícones correspondentes para alinhar ao centro ou alinhar ao pé da tela.
3. Use o controle  Deslocamento para ajustar a distância entre o bloco afixado e a margem do browser (entre 0 px e 50 px). Um bloco com 0 px afixado ao topo, por exemplo, permanecerá na borda do browser quando o visitante rolar a tela.

Recomendamos testar diferentes configurações até chegar ao efeito desejado.

Tenha em mente:

• Os blocos afixados só ficam fixos na seção correspondente. Se a seção não tiver conteúdo suficiente ou for curta demais, o efeito talvez não apareça.
• No layout para computador, os blocos afixados não ficam fixos no layout da versão móvel e vice-versa.
• Os blocos afixados não funcionam no editor clássico nem em outros tipos de seção de página.
• É possível afixar quantos blocos você quiser, mas o excesso de blocos pode deixar as seções mais lentas para carregar. Recomendamos adicionar até 60 blocos por página (afixados ou não). Saiba mais em "Meu site está lento para carregar".

Adicione a cor do fundo do bloco

Se um bloco com muito texto se sobrepor a outro conteúdo, adicione uma cor de fundo ao bloco para deixar o texto mais legível. Saiba mais sobre como as paletas de cores e os temas funcionam em Alteração das cores.

Ajuste ou preencha um bloco

Para definir o espaçamento um bloco de imagens e um bloco de botões, deixe-os como "ajustar" ou "preencher". Se o bloco estiver configurado para "preencher", a imagem ou o botão ocupará todo o espaço do bloco, e as bordas da imagem ou do botão ficarão alinhadas com os blocos adjacentes. No bloco configurado para se "ajustar", espaço extra envolve a imagem ou o botão.

Para definir o bloco de imagens ou de botões como "ajustar" ou "preencher":

1. Clique num bloco de imagens ou de botões, clique no ícone de lápis e, em seguida, clique na aba Design.
2. Clique em Ajustar ou Preencher. Como padrão, o bloco de imagens se "ajusta", e o bloco de botões "preenche".
3. Ao selecionar Ajustar, as opções de alinhamento aparecerão abaixo ou na barra de ferramentas do bloco.
4. Feitas as alterações, clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.

Editor Intuitivo e design responsivo

Todos os sites do Squarespace usam design responsivo para garantir que seu site tenha uma ótima aparência em diversos tamanhos de navegadores e dispositivos. A grade flexível do Editor Intuitivo, em particular, é construída para que, quando os blocos são reorganizados, redimensionados ou editados, outros blocos na página possam ser movidos ou redimensionados para preservar layouts mais complexos.

Por exemplo, se você colocar um bloco de texto sobre um bloco de imagem e adicionar mais texto ao bloco de texto, o bloco de imagem poderá ser ampliado para acomodar o texto adicionado.

Se os blocos se moverem ou redimensionarem de maneira indesejada, desfaça as alterações mais recentes e tente mover os blocos antes de fazer as alterações novamente. No exemplo acima, se você quiser adicionar texto sem alterar o tamanho do bloco de imagem, poderá mover o bloco de texto para fora do bloco de imagem, adicionar o texto e fazer a sobreposição novamente ao bloco de imagem.

Layout para versão móvel

Nas seções do Editor Intuitivo, os layouts da versão móvel mostram o mesmo conteúdo, mas você pode organizar esses layouts e ajustar o tamanho dos blocos de forma independente ao layout para computador. Para definir o layout da sua seção para versão móvel:

1. Clique em Editar na página e, em seguida, clique no ícone Tela na versão móvel no canto superior direito.
2. Organize e ajuste o tamanho dos blocos conforme desejado.Para mover automaticamente um bloco acima ou abaixo de um bloco adjacente, clique no bloco, depois clique em ↑ ou ↓. Essa é uma ótima maneira de reorganizar rapidamente os blocos no layout para versão móvel sem ter que clicar e arrastar.
3. Feitas as alterações, clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.

As alterações no posicionamento ou no tamanho do bloco não afetam o layout para computador - isso inclui o uso do ícone da seta azul para aumentar ou diminuir a altura da grade. Quaisquer alterações no conteúdo do bloco ou nos estilos de seção são gerais; ou seja, elas afetam os layouts tanto na versão móvel quanto para computador. Por exemplo:

• Se você mover um bloco de texto para ele se sobrepor a um bloco de imagens no layout para versão móvel, o layout para computador não será afetado.
• Se você alterar o conteúdo a cor do texto, essas alterações aparecerão nos dois layouts.

Se você adicionar novos blocos ao site após editar o layout móvel, nosso sistema organizará os novos blocos no layout móvel da maneira mais semelhante possível ao do computador. Sugerimos revisar o layout móvel conforme você faz alterações no site.

Ajuste o estilo das seções do Editor Intuitivo

Para ajustar o estilo das seções do Editor Intuitivo:

1. Clique em Editar na página e, em seguida, clique em Editar seção no canto superior direito da seção desejada. Se não aparecer a opção Editar seção, você talvez já tenha um bloco selecionado. Clique no fundo da seção para que apareça Editar seção.
2. Na aba Formatar, faça as alterações no estilo do espaçamento e da margem da seção. Recomendamos testar diferentes configurações para se ter uma ideia de como elas afetam o visual do site. Saiba mais sobre as opções abaixo.
3. Clique em Fundo para alterar as configurações do fundo. Saiba mais em Imagens de fundo da seção, Adição de vídeos ao fundo e Arte de fundo da seção.
4. Clique em Cores para alterar o tema de cores da seção. Saiba mais em Alterando as cores.
5. Clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.

Opções de formato

Altere as seguintes configurações de estilo na aba Formato:

• Contagem de linhas - fixe o número de linhas na grade da seção. Essa é a única opção de estilo de seção em que você pode ter configurações diferentes no layout para computador e para a versão móvel. O número mínimo de linhas, porém, também depende de quantos blocos você adicionou e de como eles estão organizados.
• Lacuna - defina o espaço entre as unidades na grade para controlar quanto espaço haverá entre os blocos. Você pode não deixar lacuna, deixar uma lacuna predefinida ou clicar em... para personalizar lacunas verticais e horizontais.
• Preencher tela - ative esta configuração para ter mais controle sobre a altura e o alinhamento do conteúdo. Se você não quiser deixar espaçamento em volta do conteúdo da seção, deixe-a desativada. As opções a seguir só aparecem com a opção Preencher tela ativada:
  
  • Altura - adicione espaçamento à seção fora da grade da seção. Escolha altura pequena, média ou grande; ou clique em ... para personalizar a altura.
  • Alinhamento - defina onde aparece o espaçamento extra da altura. Para adicionar espaçamento abaixo do conteúdo, alinhe o conteúdo em cima. Para adicionar espaçamento acima e abaixo do conteúdo, alinhe o conteúdo no centro. Para adicionar espaçamento acima do conteúdo, alinhe o conteúdo embaixo.
• Divisor - adicione e ajuste o estilo de um divisor na parte inferior da seção. Saiba mais em Seção de página.

Editor Intuitivo x editor clássico

A tabela a seguir mostra as diferenças entre o Editor Intuitivo e o editor clássico. Embora compartilhem muitas qualidades e características, os possíveis layouts variam, e muitas vezes somente o Editor Intuitivo tem as opções mais atualizadas.

Recurso	Editor Intuitivo	Editor clássico
Layout e arranjo	Grade flexível com recurso "arrastar e soltar" onde você pode colocar blocos em qualquer lugar, mesmo sobrepondo outros blocos.	Grade fixa com recurso "arrastar e soltar" onde os blocos só podem ser colocados ao lado de outros blocos, com algumas exceções (como blocos flutuantes no texto).
Blocos disponíveis	Todos os blocos, exceto os blocos de espaçamento, que não são necessários no Editor Intuitivo. Para criar espaço, clique e arraste os blocos para outro lugar.   O bloco de imagem não vem com layouts, mas você pode recriar esses layouts e muito mais no Editor Intuitivo - use blocos de imagem, blocos de texto e blocos de fundo.	Todos os blocos, exceto os blocos de forma, que são exclusivos do Editor Intuitivo.
Duplicação de blocos	Duplique um ou mais blocos ao mesmo tempo; ou copie e cole blocos em outras seções do Editor Intuitivo.	Não é possível duplicar nem copiar e colar blocos. Você pode duplicar páginas, publicações ou seções.
Blocos móveis	Clique e arraste para mover os blocos na seção Editor Intuitivo. Sobreponha outros blocos; e use as linhas-guia para centralizar os blocos.	Clique e arraste para mover os blocos junto com outros blocos em grades de até 12 colunas. Os blocos não podem se sobrepor a outro, e o espaçamento entre os blocos é fixo.
Redimensionar blocos	Clique no canto de um bloco e arraste o cursor para ajustar o tamanho do bloco. A quantidade e o tipo de conteúdo podem afetar a forma de ajustar o tamanho do bloco.	Use outros blocos no layout para ajustar o tamanho dos blocos. Alguns blocos também têm alças de corte.
Design da versão móvel	Crie um layout para versão móvel independente do layout para computador.	O posicionamento dos blocos no computador define o layout móvel com o design responsivo. Não é possível organizar o layout móvel de forma independente.

Mais ajuda

Este guia cobre os recursos básicos e as opções específicas ao Editor Intuitivo. Os guias a seguir abordam outras configurações de conteúdo e estilo que aparecem nas seções do Editor Intuitivo:

• Para mover, duplicar e apagar seções, confira "Seção de página"
• Saiba mais sobre os diferentes tipos de blocos em "Adição de conteúdo com blocos"
• Para mover blocos e organizar um layout, acesse "Movendo blocos para personalizar o layout"
• Para ajustar o tamanho de um bloco, confira "Ajuste o tamanho do bloco"
• Para definir os estilos globais de seu site, visite Fazendo mudanças de estilo
• Para deixar o design do seu site acessível ao maior público possível, confira Recursos de acessibilidade no Squarespace.