Baixe nosso manual gratuito para criar o seu site com confiança.
O e-mail informado é inválido.
Obrigado por se cadastrar.
Ao informar seu e-mail, você indica que leu e entendeu nossa Política de Privacidade e concorda em receber marketing do Squarespace.
Quer renovar o site e fazer alguns ajustes no design, mas acha que já esgotou todas as opções, todos os ajustes no estilo, todos os tipos de bloco, todos os recursos?
O Squarespace está sempre se atualizando e aumentando o conjunto de ferramentas para dar novas opções de personalização do seu site. Este artigo destaca algumas opções que talvez você ainda não conheça, mas que podem ser as ferramentas que você procura para o visual do seu site.
Elas também são um ótimo ponto de partida para explorar os recursos mais específicos da plataforma e abrir um novo caminho criativo.
Altere as seções da página
Seções de página são as diferentes partes que compõem o conteúdo de uma página do site. Podem ser, por exemplo, a introdução ou a lista dos seus serviços. Vamos olhar algumas das opções de design disponíveis para atualizar as seções das suas páginas.
1. Divisores de seção
O divisor de seções adiciona um intervalo mais visível entre as seções da página. É possível adicionar uma linha real em diferentes estilos, como uma onda ou diagonal; ou cortar um fundo de seção ou uma imagem de fundo para marcar a quebra.
O divisor separa visualmente o conteúdo, de modo que cada seção tenha um espaço próprio, sem a necessidade de criar uma nova página. O resultado é um design mais dinâmico. O divisor de seções pode ser usado para dividir os layouts da página de várias formas:
Criando um intervalo entre as seções "Sobre" e "Nossa equipe" em uma página, consolidando duas páginas em uma
Criando um site de uma página mais organizado
Separando o conteúdo da página principal e o rodapé do site
2. Imagem e vídeo no fundo da seção
Adicione um fundo exclusivo às seções da página para chamar a atenção dos visitantes que chegam ao seu site. Use-o como alternativa a um vídeo de fundo, a fim de diferenciar as seções ou para apresentar uma página do site.
É possível, por exemplo, adicionar um vídeo de fundo à primeira seção da página inicial do site para apresentar a visão geral de um produto, serviço ou trabalho. Também é possível usar imagens no fundo da seção para dar um visual exclusivo a seções específicas da página.
Dica: dependendo da velocidade da conexão e da versão do browser, os vídeos em segundo plano não carregam para todos os visitantes. É bom adicionar uma imagem de contingência na versão móvel para aparecer quando o vídeo não carregar.
Adicione arte ao fundo da seção
3. Layouts Automáticos
Se precisar de ajuda para criar uma seção de página; ou para ter um template para trabalhar, o layout automático é um ótimo ponto de partida. Ele apresenta um conjunto de conteúdos em designs selecionados e inclui layouts para diferentes finalidades, como colunas e linhas, carrossel e slideshow.
O layout automático é perfeito para criar uma página simples, cujo conteúdo precisa ser atualizado regularmente — é o caso das imagens dos produtos em destaque, projetos recentes e membros da equipe. O conteúdo começa em um layout pré-criado, mas você pode criar outras seções para deixar o design com a sua cara.
Use layouts automáticos no seu site
4. Arte de fundo
As imagens no fundo de seção são ótimas para chamar a atenção dos visitantes, mas também é possível adicionar uma arte ao fundo a uma seção de página para aumentar a personalização. A arte de fundo cria um visual exclusivo com cores, padrões e formas gerados na plataforma Squarespace.
É uma ótima opção para criar seções temáticas em uma página — como dividir o site de uma escola em turmas ou suavizar uma seção de perguntas frequentes com muito texto.
Bloco
O bloco é um elemento do design que pode ser colocado nas seções de página do Squarespace, como bloco de texto, bloco de formulário e bloco de imagens. Confira a seguir alguns tipos de bloco e recursos que talvez você ainda não tenha conhecido.
5. Bloco de rolagem
O bloco de rolagem é um tipo exclusivo de bloco para textos que rola na horizontal pela página. A função dele é semelhante à do letreiro de cinema ou de notícias. É possível pode controlar a velocidade e a forma da rolagem.
Ele é uma ótima opção para dar mais vida ao design do site e atrair o foco dos visitantes para as principais informações.
Use o bloco de rolagem para:
Destacar promoções, lançamentos e produtos
Criar um letreiro com os eventos anunciados
Expor avaliações e depoimentos dos clientes
Adicione um bloco de rolagem ao site
6. Bloco de forma
O bloco de forma adiciona diferentes formas com preenchimento sólido às seções da página. Assim, você pode variar os layouts da página e diversificar os designs.
Também é possível sobrepor o bloco de forma com outros tipos de bloco para criar um layout ainda mais interessante. As formas podem ser colocadas atrás das imagens no site para se destacarem na página ou se destacarem de outros conteúdos em uma galeria.
Use o bloco de forma:
Como um bloco em forma de estrela atrás do depoimento de um cliente para enfatizar experiência 5 estrelas dele
Com cores variadas ao redor de uma seção de página que detalhe os serviços de uma confeitaria, dando um toque mais festivo
Saiba mais sobre o uso do bloco de forma
7. Bloco de acordeão
O bloco em acordeão mostra o texto em seções dobráveis e clicáveis, de modo a manter o comprimento da página no mínimo e reduzir a rolagem para os visitantes. Esse bloco cria um design mais estruturado em páginas com muito texto, como a de perguntas frequentes e os anúncios dos produtos.
É possível usar um bloco em acordeão, por exemplo, para disponibilizar informações importantes sobre um serviço que sua empresa oferece, com seções claramente divididas, nas quais os clientes podem clicar para lerem mais. Um fotógrafo de casamento pode usar o bloco em acordeão para dividir os processos do trabalho em seções como: Apresentação, Escolha um pacote, Seção de fotos, Pré-cerimônia, Dia da cerimônia, O dia seguinte.
Adicione um bloco de acordeão ao seu site
8. Afixação de blocos
É possível fixar qualquer tipo de bloco em uma seção de página, para que os visitantes percorram o restante do conteúdo na mesma seção.
Isso também garante que as informações e o conteúdo importantes fiquem visíveis, independentemente de onde o usuário estiver na tela. Você pode, por exemplo:
Fixar o local e o horário de funcionamento da sua empresa enquanto os visitantes olham os produtos
Destacar uma imagem enquanto apresenta suas conquistas ou serviços
Destacar uma isenção de responsabilização quando necessário
Deixar o formulário para contato ou o cadastro da newsletter sempre à vista
Formatação do texto
O estilo do texto no site influencia no que os visitantes prestam atenção e do que eles lembram. Confira algumas opções e recursos de formatação de texto para você tirar o máximo do que escreve.
9. Realces no texto
Para destacar um texto, use o recurso de realce do texto. Isso acentua as principais informações na página ou facilita a leitura quando necessário.
O realce do texto tem as seguintes opções de estilo:
Animação: anime a forma do realce para dar movimento e chamar mais atenção para o texto.
Deixar na frente: o realce se sobrepõe ao texto, para se parecer mais com um realce real.
Cor: altere a cor do realce para ele se destacar ou combinar melhor com o design do site.
Cantos: ajuste o formato das pontas do realce para arredondado ou quadrado.
Espessura: ajuste a espessura do realce.
Essa é uma ótima opção para:
Destacar as avaliações dos clientes
Acentuar as partes principais de um artigo no blog
Chamar a atenção para determinados elementos da página "Sobre"
Mais sobre como realçar o texto
10. Ajuste o tamanho do texto
A escala do texto ajusta o texto à largura do bloco. É um jeito rápido de ajustar o tamanho do texto sem quebras de linha, independentemente do tamanho do browser. Recomendamos dar um título curto e:
Usar títulos para dividir o conteúdo em seções
Criar uma lista concisa
Apresentar citações importantes de um texto
Aprenda a ajustar o tamanho do texto
Formatação da imagem
O modo de ajustar o estilo e formatar as imagens também pode dar mais personalidade ao design do site.
11. Animações e efeitos no bloco de imagens
É possível adicionar efeitos ao bloco de imagens para deixar as imagens com um visual mais estilizado. Para enfatizar o estilo visual do site, algumas opções adicionam uma animação, como uma onda sutil; ou um efeito estático. Outros efeitos só aparecem quando o visitante percorre a seção do site.
Use esse efeito para:
Dar mais vida a uma área estática do site
Dar movimento a imagens estáticas sem usar vídeo
Que as imagens principais sempre chamem a atenção
Adicionar animação e efeitos ao bloco de imagens
12. Formas e máscaras de imagem
O bloco de imagens também pode ser moldados para alterar o visual de cada imagem na página. As opções disponíveis são:
Usar as configurações de raio de canto para arredondar os cantos da imagem
Criar uma forma sólida, como círculo ou triângulo
A forma sólida aparece sobre a imagem, como uma máscara, dando-lhe uma nova forma. Para realmente chamar a atenção, transforme uma galeria de fotos em uma série de formas interessantes; ou vá além das imagens básicas nos anúncios dos produtos.