Como usar o Squarespace para criar seu primeiro site

Squarespace é um dos construtores de sites fantásticos. É ideal se você estiver usando o seu site sem se preocupar com os problemas de configuração e manutenção de CMSs como o WordPress.


Você ficará surpreso com a rapidez e facilidade em montar um site maravilhoso, com nada além de um nome de domínio e assinatura do Squarespace.

Neste guia do Squarespace para iniciantes, veremos as etapas exatas que você precisa executar para criar e lançar seu primeiro site.

Abordaremos os seguintes componentes do Squarespace:

  1. Design (personalizando a aparência geral do seu site)
  2. Páginas (adicionando conteúdo ao seu site)
  3. Configurações (ajuste fino de SEO e outras configurações comerciais)

Depois de entender esses componentes, você poderá criar qualquer tipo de site usando a plataforma.

Navegação

  • Etapa 1: inscrevendo-se no Squarespace
  • Etapa 2: Entendendo o Squarespace (parte 1): Opções de design
  • Etapa 3: Entendendo o Squarespace (parte 2): como as “páginas” funcionam
  • Etapa # 4: Explorando o Squarespace
  • Embrulhar

Lista de ferramentas 

  • Plataforma – Squarespace
  • Registrador de domínio – Nome Barato
  • (Isso é tudo que você precisa, simples!)

Divulgação da FTC: BuildThis recebe taxas de indicação das ferramentas listadas neste site. Mas, as opiniões são baseadas em nossa experiência e não quanto pagam. Nosso foco é ajudar pequenas empresas e indivíduos a criar sites como empresa. Apoie nosso trabalho e saiba mais em nossa divulgação de ganhos.

Como usar o Squarespace… A preparação antes de começar

Antes de começar a usar o Squarespace para criar seu site, você precisará de algumas coisas:

1. Nome de Domínio

Como uma das etapas de configuração do site, vincularemos seu nome de domínio à sua conta Squarespace.

Então, você precisará de um nome de domínio. Se você ainda não comprou um nome de domínio, compre um agora.

Você também pode comprá-lo na Squarespace, mas eu não recomendo que.

A transferência de domínio entre provedores de hospedagem, criadores de sites ou CMSes é sempre mais fácil quando o domínio é registrado com um registrador de domínio de terceiros.

O NameCheap é um excelente serviço de registro de nomes de domínio que oferece preços competitivos e ótimo serviço. Confira para comprar um nome de domínio para o seu site Squarespace.

Nota: Se você precisar de ajuda para registrar um nome de domínio para o seu site, esses geradores de nome de domínio podem ajudar.

2. Uma ideia aproximada da estrutura de navegação do seu site 

Conhecer a estrutura de navegação do seu site (ou seus itens de menu principais) antes de começar a compilar torna o processo mais rápido.

Portanto, pegue um papel e desenhe a aparência do menu do site. Este exercício ajudará a finalizar as diferentes páginas que você adicionará ao seu site.

Por exemplo, você pode adicionar algumas das seguintes páginas ao seu site:

  • Sobre
  • Começa aqui
  • Portfólio
  • Serviços
  • Contratar
  • Loja
  • Recursos
  • Preços
  • Equipe
  • Contato

3. Cópia e gráficos

A última coisa que você precisa antes de começar a criar seu site é conteúdo. Portanto, escreva rascunhos de todas as páginas que você adicionará.

Além disso, agrupe todas as imagens (ou vídeos) necessárias para criar seu site Squarespace. Se você precisar de imagens, organize-as também. Ter as imagens certas pode tem um enorme impacto em conversões.

Ter todo o conteúdo e mídia à mão demorará muito tempo depois.

Vamos começar com a construção do site.

(Se você já se inscreveu para uma avaliação do Squarespace, vá para a primeira parte do guia.)

Como criar seu primeiro site Squarespace

Etapa 1: inscrevendo-se no site Squarespace

Todos os planos da Squarespace começam com uma avaliação gratuita.

Para se inscrever para uma avaliação gratuita, visite o Squarespace e escolha a opção “CRIAR UM SITE”:

squarespace-começando-iniciadoDuas etapas simples para iniciar um site Squarespace: 1, Configurar um domínio (novo ou mudar); 2, escolha modelos para criar um site ou loja.

Em seguida, escolha um modelo.

Para facilitar essa etapa, o Squarespace agrupa seus temas nas seguintes categorias:

  • Empresas
  • Portfólios
  • Blogs
  • Músicos
  • Restaurantes
  • Casamentos
  • Pessoal

Squarespace Themes Samples

Aqui estão alguns designs que você pode encontrar em temas do Squarespace. Clique nas miniaturas a seguir para ter uma visão mais clara.

Nome do tema: Five

Nome do tema: Jasper

Nome do tema: Tudor

Nome do tema: Letreiro

Nome do tema: Pacífico

Nome do tema: Alturas

Nome do tema: Shift

Nome do tema: Forte

Nome do tema: Rover

Passo a passo Squarespace a inscrição processo

Para os fins desta explicação passo a passo, configurei-a usando minha conta Squarespace.

Vou para a categoria de negócios e estou escolhendo o modelo, Montauk.

To use Montauk for your site, go to Business data-lazy-src=

Depois de escolher um modelo, o Squarespace mostrará um breve formulário de inscrição:

inscrever-seInscreva-se e crie com o Squarespace.

Ao concluir a inscrição, você será direcionado para um processo de personalização de conteúdo do site Squarespace em quatro etapas.

1. Escolhendo para quem é o site

passo 1# 1- Escolhendo quem é o site – estou selecionando a opção “Minha empresa / organização”.

2. Sobre o que é este site?

passo 2# 2 – Sobre o que é este site? Várias opções aqui. Estou selecionando os ‘Serviços profissionais’.

3. Quais são seus objetivos para este site?

etapa 3# 3- Quais são seus objetivos para este site? Esta pergunta também suporta várias respostas. Estou escolhendo Mostrar ou criar um portfólio do meu trabalho, Ser contratado, criar um blog ou publicar conteúdo e Vender produtos ou serviços on-line.

4. Nomeando o site

Passo 4# 4- Nomeando o site. Estou ligando para o meu site ‘Meu primeiro site Squarespace’ por enquanto.

Ao preencher o questionário de personalização de conteúdo do site, vejo a seguinte tela.

Como você pode ver na captura de tela, à esquerda, há um painel com várias configurações e preferências de design. E à direita, há uma prévia do meu site.

Visualização do meu primeiro site Squarespace.Visualização do meu primeiro site Squarespace.

Saiba mais sobre o Squarespace

Etapa 2: Usando o Squarespace (parte 1): opções de design

O Squarespace possui 10 itens nas configurações de design:

  1. Logotipo & Título
  2. Modelo
  3. Editor de estilo
  4. Editor de estilos de página do Google Checkout
  5. Tela de bloqueio
  6. Barra de anúncios
  7. Barra de informações móveis
  8. Emblema do Squarespace
  9. CSS customizado
  10. Avançado

Vamos dar uma olhada detalhada em cada um desses elementos.

1. Logo & Título

Já demos um nome ao nosso site e, nesta etapa, adicionarei um slogan. Vamos definir o slogan como “Um recurso para iniciantes do Squarespace”.

logo-11. A próxima opção nessa configuração é adicionar um logotipo. Se você tiver um logotipo, faça o upload. 2. Como não tenho logotipo, e porque o Squarespace oferece a seus usuários uma ferramenta de criação de logotipo gratuita e extremamente elegante, estou escolhendo a opção “CRIAR UM NOVO LOGO”.

Depois de clicar no botão, sou direcionado para a ferramenta de criação de logotipo da Squarespace.

logo-2Squarespace Logo Maker

Essa ferramenta de criação de logotipo permite:

  • Escolha entre vários ícones de logotipo
  • Crie apenas um logotipo baseado em texto
  • Ir para um logotipo de imagem
  • Alterar a fonte e a cor do texto do logotipo
  • Visualizar a aparência do logotipo em cartões de visita e outros materiais de marca

No geral, a ferramenta de criação de logotipo da Squarespace é bastante intuitiva. Possui vários elementos de design ou ícones no painel do lado esquerdo.

logo-3Você pode usar a opção de pesquisa para encontrar ícones relevantes ao seu site.

Quando pesquisei a palavra-chave “site”, recebi muitos ótimos ícones. Eu escolhi o que você pode ver à sua direita e fiz um logotipo de imagem.

logo-4

Tentei fazer o download de uma versão em alta resolução do logotipo, mas o editor me solicitou a inscrição em uma conta do Squarespace para poder fazer isso.

Mas ainda assim, uma versão de baixa resolução também pode ser baixada neste momento. Isso vai fazer por enquanto.

Quando o teste do Squarespace terminar e você atualizar para um plano premium, você poderá fazer o download da versão de alta resolução sem problemas. Quando você obtém o arquivo de alta resolução, pode enviá-lo para o site Squarespace.

As próximas duas opções neste item de design são definir o ícone favorito e o logotipo de compartilhamento social. Se você tiver isso, ótimo. Caso contrário, passe para a próxima configuração.

Para salvar as alterações feitas até o momento, clique no botão “SALVAR” na parte superior do painel.

Nota: Se você deseja criar um favicon incrível para o seu site, aqui está uma lista de geradores de favicon gratuitos, você pode dar uma olhada.

2. Modelo

A seção “Modelo” mostra todos os modelos baixados em um site do Squarespace.

No momento, como você pode ver, minha lista de modelos inclui apenas o modelo Montauk, porque este é o modelo com o qual me inscrevi ao definir minha avaliação.

modeloMontauk, instalado há 39 minutos.

Se você estiver satisfeito com o modelo escolhido, vá para a próxima etapa. Ou você pode baixar mais modelos.

Gorjeta

  • Não gaste tempo baixando e alternando modelos neste momento, porque não será útil.
  • Somente depois de criar seu site e fazer upload de conteúdo, você poderá entender como os diferentes modelos estão mostrando seu conteúdo.
  • Você não conseguirá descobrir muito com o conteúdo e as imagens da demonstração.

Como descobrir qual modelo Squarespace um site está usando

Se você vir um modelo do Squarespace de que você gosta e se perguntar qual é o tema usado, veja como descobrir,

  1. Clique com o botão direito na página > Exibir fonte / fonte da página
  2. Vais aperceber-te  próximo ao topo do código para indicar que é um site da Squarespace
  3. Pressione Ctrl + F para pesquisar na página: templateid e copie o código

O modelo, Montauk, que estou usando está tendo o ID do modelo: 50521cf884aeb45fa5cfdb80. Tente você mesmo

Depois de encontrar o ID do modelo, você pode consultar o Família de modelos Squarespace para levá-lo ao site de demonstração oficial do Squarespace.

3. Editor de estilo

O Editor de estilos é usado para personalizar as configurações de um modelo, como fontes, cor do título, posição do logotipo, conteúdo do rodapé, entre vários outros.

Cada modelo oferecerá diferentes opções de personalização no Editor de estilos..

Mas como todos os modelos do Squarespace foram criados com perfeição, recomendo ficar longe desta seção, a menos que você seja um designer!

4. Editor de estilos de página do Google Checkout

O Editor de estilos da página de checkout ajuda a personalizar as configurações da página de checkout. Essa configuração é útil principalmente para sites do Squarespace que possuem lojas ou sites de lojas.

5. Tela de bloqueio

O Squarespace permite bloquear páginas com senhas. Todas essas páginas não exibem o conteúdo, mas mostram uma tela de bloqueio.

Se você não personalizar a tela de bloqueio, veja como ela ficará.

tela de bloqueioSe desejar, você pode personalizar a aparência desta página com as opções de personalização da Tela de bloqueio.

5. Barra de Anúncio

A barra de anúncios permite adicionar uma notificação adesiva na parte superior do seu site. Este é um excelente recurso para chamar a atenção de seus leitores para alguns dos seus conteúdos importantes.

Depois de ativar a Barra de anúncios, você pode adicionar sua mensagem e o link em que os usuários devem clicar.

Como você pode ver na captura de tela acima, você pode abrir o link em uma nova janela.

barra de anúncioAs configurações da barra de anúncios (esquerda) e a visualização (direita).

6. Barra de Informações Móveis

Como o nome sugere, a barra de informações do celular é exibida antes dos usuários do celular e pode ser usada para exibir seu email, número de telefone, local e horário comercial.

A Squarespace busca essas informações na seção “Informações comerciais”, que veremos mais adiante.  

barra de informações para celularBarra de informações móveis.

7. Crachá Squarespace

A Squarespace adiciona sua marca (emblema) a todos os sites criados com ela.

As configurações do emblema do Squarespace permitem ativar ou desativar o emblema do Squarespace, ajustar sua posição e ajustar as configurações de exibição.

8. CSS personalizado

Se você deseja personalizar seu modelo além da fonte, cores e outras opções de personalização padrão, precisará da ajuda do CSS personalizado.

Lembre-se de que adicionar CSS customizado pode quebrar o design de um modelo – não recomendado.

9. Avançado

A opção Avançado permite adicionar mais fontes de Typekit para o seu site Squarespace. As configurações avançadas também possuem configurações avançadas de modelo.

Então isso envolve a parte de design do seu site Squarespace.

A seguir, veremos as páginas do Squarespace e como você pode usá-las para fazer upload de conteúdo para seu site recém-criado.

Etapa 3: Usando o Squarespace (parte 2): como as “páginas” funcionam no Squarespace

Depois de escolher um modelo, personalizá-lo e adicionar o título e o logotipo do seu site, é hora de começar a adicionar conteúdo.

As páginas do Squarespace permitem:

  • Adicione páginas (e conteúdo) ao seu site (por exemplo: Sobre, Contato e mais)
  • Adicione um blog ao seu site
  • Adicione uma loja ao seu site
  • Crie o menu principal do seu site

Vamos começar com o menu principal.

Ao acessar as configurações da página pela primeira vez, você perceberá que a “TOP NAVEGAÇÃO” mostra os itens de menu da demonstração.

Por enquanto, gostaria que você esquecesse as páginas da demonstração e comece a adicionar suas próprias páginas.

Para cada página que um site normalmente precisa, a Squarespace forneceu modelos pré-fabricados.

Por exemplo, para páginas como Sobre, Recursos, Loja, Contato e muito mais – você já possui layouts de página prontos para uso que podem ser carregados no seu site.

1. Como adicionar uma página a um modelo pré-fabricado

Vamos ver como você pode adicionar uma página a um modelo pré-criado.

Como você pode ver na captura de tela a seguir, existem dois sinais de “+” nos quais você pode clicar para adicionar uma página ao seu site.

Ao clicar na primeira opção, você não apenas adiciona uma página, mas também ao menu principal do seu site..

E quando você clica na segunda opção, basta adicionar uma página.

1. Existem dois sinais de 1. Existem dois sinais de “+” nos quais você pode clicar para adicionar uma página ao seu site; 2. Clique em “Página” para criar uma nova página.

Sugiro que você comece a adicionar uma página com a segunda opção. Depois de terminar de criar as páginas, exclua todas as páginas de demonstração, arraste todas as suas páginas recém-geradas e solte-as sob a NAVEGAÇÃO SUPERIOR.

Vamos adicionar uma página “Sobre”. Depois de clicar no item “Página”, você verá as seguintes opções no painel do lado esquerdo:

Agora, neste exemplo, estou nomeando minha página 'Sobre mim' e para o layout inicial, estou escolhendo um modelo de página 'Sobre' pré-fabricado. Depois de clicar em 1. Agora, neste exemplo, estou nomeando minha página “Sobre mim”. 2. Para o layout inicial, estou escolhendo um modelo de página pré-fabricado “Sobre”.

Quando clico em “INICIAR EDIÇÃO”, o layout da página selecionado sobre mim é carregado no editor de páginas da Squarespace. Para editar os elementos da página, passe o mouse na parte superior da página (logo abaixo da navegação) e você verá o seguinte painel de opções:

about-page-2Mova o mouse e passe o mouse na parte superior da página (que fica logo abaixo da navegação) e você verá o painel de opções destacado sendo aberto.

Clique em “EDITAR”.

Nesse ponto, você pode começar a editar o conteúdo da página ou clicar no sinal ‘+’ na parte superior da página para adicionar mais elementos de design a ela.

sobre-página-3Clique no sinal “+” na parte superior da página para adicionar mais elementos de design à página.
Alguns dos elementos de design que você pode adicionar à sua página no Squarespace.Alguns dos elementos de design que você pode adicionar à sua página no Squarespace.

Depois de adicionar um elemento ao seu site, é fácil reorganizar sua posição com a funcionalidade simples de arrastar e soltar.

Nota:

Se você personalizar os layouts padrão e adicionar elementos diferentes, incluindo o elemento espaçador, às vezes a visualização do seu celular pode parecer engraçada – mais ainda, o espaçamento entre os diferentes elementos pode parecer um pouco diferente.

(Os layouts padrão são lindamente renderizados.)

Adicionar outras páginas é semelhante a adicionar a página sobre.

Por enquanto, é melhor usar os layouts padrão, se você deseja colocar o site em funcionamento super rápido.

No final desta etapa, você deve ter todas as páginas do seu site prontas para serem movidas para o menu principal.

Mas antes de fazer a mudança, exclua as páginas de demonstração.

Em seguida, arraste e solte suas páginas recém-criadas na “TOP NAVEGAÇÃO”.

excluir a página de demonstraçãoO botão Excluir para clicar quando você deseja remover uma página.

Depois de limpar sua navegação, é hora de trabalhar nas páginas.

2. Como adicionar conteúdo às páginas do Squarespace:

Para adicionar conteúdo (ou personalizar o design de uma página), basta clicar no nome da página.

Depois de clicar, o editor da página será carregado e você poderá substituir o conteúdo do modelo pelo conteúdo que você escreveu nas etapas de preparação.Clique no nome da página para carregar o editor de páginas do Squarespace.

Depois de clicar, o editor da página será carregado e você poderá substituir o conteúdo do modelo pelo conteúdo que você escreveu nas etapas de preparação.

3. Como definir algumas configurações de página de alto nível

As configurações de página de alto nível podem ajudar nas páginas de uma página:

  • Título da navegação
  • Título
  • Descrição (frequentemente usada para SEO)
  • Lesma de URL
  • Imagem de cabeçalho
  • Código de rastreamento

página de alto nívelConfigurações da página a serem configuradas.

Para fazer alterações de nível superior em uma página ou excluí-la, clique no ícone de configurações ao lado do nome da página.

Além disso, para definir uma página como a página inicial, é necessário abrir essas configurações para a página selecionada e escolher a opção “Definir como página inicial”.

Uma página importante do Squarespace: o blog

Embora você possa adicionar um blog como uma página simples no Squarespace, pode ser necessário fazer algumas configurações adicionais para ele..

Para acessar essas configurações, clique na engrenagem de configurações no item de menu do blog em 1. Clique na engrenagem de configurações no item de menu do blog em “TOP NAVEGAÇÃO”; 2. Depois disso, o painel de configurações do blog será aberto; 3. Painel de configuração do blog – Depois de configurar essas preferências no nível do blog, você estará pronto para adicionar postagens ao seu site.

Para adicionar uma postagem, clique no sinal “+” nas opções do item de menu do blog.

O editor de postagem é bastante intuitivo.

Na parte inferior, você verá configurações para adicionar uma categoria e tags à sua postagem.

publique-blogpostVocê também pode salvar sua postagem como rascunho ou publicá-la imediatamente.
opção de edição pósDepois de escrever uma postagem, clique em “Opções” no menu do blog na parte superior.

As configurações de opções permitem:

  • Adicionar uma imagem em destaque a uma postagem
  • Atribuir um autor à postagem
  • Escreva um trecho
  • Marcar uma postagem como uma postagem em destaque

Felizmente, com a seção acima, você terá um site atraente com seu conteúdo e até um blog.

Vamos agora ver as configurações do Squarespace.

Etapa 4: Usando o Squarespace: Explorando as configurações

Usar as configurações do Squarespace é fácil. Eles estão agrupados em 3 categorias:

  1. Geral
  2. Local na rede Internet
  3. Comércio

Dessas, a categoria “Geral” permite adicionar informações comerciais, como nome, endereço, ID fiscal e muito mais..

E as configurações de “Comércio” são relevantes para alguém que deseja executar uma loja online ou adicionar uma loja ao site.

Destas categorias, a categoria “Site” é sobre a qual gostaria de falar.

As configurações de “site” incluem:

  • Informação básica – Essa configuração ajuda a adicionar um trecho sobre o que é o site. Alguns modelos exibem essas informações, então você deve preenchê-las.
  • Domínio –  Depois de comprar um domínio, você deve retornar essa configuração e apontar o site Squarespace para esse domínio. Integração de domínio de terceiros é uma brisa.
  • E-mails – O próximo item é E-mail. A integração de e-mail comercial do Gmail pode ser feita aqui.
  • Contas conectadas – Você pode conectar suas contas de mídia social ao site da Squarespace aqui. Na próxima vez que você adicionar ícones de perfil de mídia social em qualquer lugar do site Squarespace, o Squarespace usará as informações desta seção e vinculará automaticamente os ícones aos seus perfis.
  • Marketing – Dentro das opções de configuração de marketing, você tem configurações para SEO, mídia social e Google Adwords.
    As configurações de SEO daqui ajudam a adicionar um trecho de SEO para o seu site. Este trecho é visível para um usuário na página de resultados do mecanismo de pesquisa. Você também pode definir os formatos de URL dos diferentes itens do seu site. As configurações de mídia social o ajudarão a decidir quais botões de compartilhamento você deseja exibir no seu site. A configuração de marketing do Google Adwords é para sites que usam os planos de negócios ou comércio da Squarespace.
  • Blogging – As configurações de blog ajudam a definir o formato do URL da postagem do blog.
    Não altere o formato padrão, ele já é de fácil leitura. No entanto, se quiser, você pode remover o ano, o mês e a data dele. Essas configurações também permitem integrar o seu blog ao Disqus, um serviço de comentários. Dessa forma, seus usuários poderão comentar seu conteúdo por meio das contas do Disqus. Também existe um sistema de comentários padrão, se você não deseja Disqus.
    As configurações de blog também ajudam a permitir que os provedores de AMP mostrem a versão AMP de suas postagens. (As páginas otimizadas para AMP são aquelas que mostram páginas da web com versões atenuadas para visitantes em dispositivos móveis – isso ajuda a oferecer uma experiência de navegação em dispositivos móveis extremamente rápida.)
  • SSL – Você pode escolher entre uma versão segura e não segura do seu site em Configuração SSL. Escolha a versão segura, porque o Google prefere sites seguros a sites inseguros.
  • Avançado – As configurações avançadas permitem importar o conteúdo do site de outros criadores de sites ou CMSes. Também permite exportar seu site para WordPress.
    Se você criar uma página 404 personalizada para o seu site, poderá usar as configurações avançadas para mostrar sua página 404 personalizada em vez da página 404 padrão.
    Você também pode adicionar o número da sua conta do Google Analytics por meio dessas configurações. Fazer isso instalará automaticamente o script do Google Analytics no seu site.

É isso aí.

Se você seguiu as instruções deste guia, agora o seu primeiro site Squarespace funcional (se não o perfeito) deve estar pronto.

A primeira coisa a fazer após o lançamento do site Squarespace

Depois de iniciar um novo site, sua primeira tarefa é indexá-lo pelo Google.

Para acelerar o processo de indexação, você deve enviar o mapa do site ao Google Search Console.

O mapa do site de um site da Squarespace pode ser encontrado em:

http://www.seudominio.com/sitemap.xml

Copie o URL do mapa do site do seu site e envie-o via Search Console.

Visite Squarespace.com

Como criar um site Squarespace – Concluindo

Criar um site da Squarespace e aprimorá-lo e personalizá-lo com perfeição não deve demorar mais de uma semana. Depois de concluir, você não precisa se preocupar com atualizações, hackers, hospedagem ou qualquer outra coisa; Squarespace irá gerenciar seu site para você.

Espero que este guia o equipe a criar uma versão aproximada do seu primeiro site da Squarespace em menos de 10 horas (considerando a tempo para comprar o domínio e outras coisas).

Nota: Se você estiver procurando por plataformas alternativas, aqui está uma lista de 16 plataformas para criar seu próprio site.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map