5 hacks de programação no Squarespace para aumentar seu seguidores

1. Apresentação e visão geral: Bem-vindo a cinco hacks de programação do Squarespace para aumentar seu público. Se você tem um site de comércio eletrônico, portfólio on-line ou um blog, então você provavelmente sabe que uma lista de e-mail robusta está entre as ferramentas de marketing mais poderosas. Muitos de nós atraem nosso público para se inscrever oferecendo downloads gratuitos, códigos de cupom e ofertas exclusivas para as quais apenas nossa lista de discussão é elegível. sites do Squarespace têm alguns dos modelos mais elegantes e fáceis de usar, e eles são especialmente populares entre freelancers criativos por esse motivo. Às vezes, porém, os widgets e blocos usados para construir os sites exigem soluções alternativas criativas para obter apenas a função e o nível de personalização que você deseja. Nesta aula, vou compartilhar cinco dicas de programação inestimáveis para capturar os endereços de e-mail dos visitantes do seu site e promover materiais gratuitos e ofertas exclusivas. Todas essas técnicas são possíveis com apenas um conhecimento básico de trabalho do Squarespace, e funcionam com todos os modelos do Squarespace. Apenas duas das técnicas exigem código personalizado, mas vou literalmente dar-lhe o código exato que você precisa para copiar e colar para que o processo seja totalmente infalível. As técnicas específicas que eu vou ensinar incluem, como adicionar código ao seu formulário de contato, para redirecionar os visitantes para acostumar página de agradecimento. Pessoas que entram em contato com você através do seu site ou de um público cativo. Você está perdendo a oportunidade perfeita de compartilhar mais com eles sobre seu negócio, se você ficar com o formulário de contato padrão do Squarespace, a janela de confirmação. Também vou mostrar como oferecer conteúdo para download gratuito ao seu público por meio de botões e links de texto. Mostrarei como capturar os endereços de e-mail dos visitantes em troca de downloads e códigos de cupom. Também mostrarei como estilizar o texto nas janelas pop-up do formulário e nos campos de confirmação do boletim informativo, que adicionará uma aparência profissional consistente ao seu site e será coerente com sua marca. Por último, mostrarei como você pode usar uma página de rosto para oferecer downloads gratuitos ou cupons em troca de inscrições por e-mail e, em seguida, redirecionar esses formulários para a página de agradecimento personalizada rastreável que você terá feito na etapa 1. Para acompanhar essa classe, você precisará ter uma conta do Squarespace já e, pelo menos, o início de um site. Pode ser tão simples site embora, mesmo um trabalho em andamento. Você também precisará de conhecimentos básicos de trabalho sobre o back-end do Squarespace. No entanto, você não precisa ser um profissional do Squarespace ou ter qualquer experiência com codificação ou programação. Se você precisa aprender o básico do Squarespace antes de fazer essa aula, recomendo vivamente a classe Skillshare do próprio Squarespace chamada Personal Branding Essentials. Você pode encontrar o link ao vivo para este curso do Squarespace na seção acima desta classe. Esta aula é toda sobre networking. Ao decidir qual deve ser o projeto da turma, pensei, é melhor começar do que com seus colegas. Hoje vou pedir que você crie uma página de agradecimento personalizada , conforme descrito no vídeo da primeira lição. Você vai configurar um redirecionamento para essa página a partir de qualquer formulário em seu site. Em seguida, você publicará uma captura de tela desta nova página de agradecimento personalizada e compartilhará um link para o seu site. Ou a própria página de agradecimento ou o formulário de contato, que os visitantes devem enviar para ver sua nova página. Claro, se o seu site ainda não estiver disponível na Internet, tudo bem. Você não precisa compartilhar um link ao vivo. Mas se você tiver um, seria ótimo compartilhar e interagir com seus colegas. 2. Redirecionar o formulário para sua página personalizada: Por padrão, quando os usuários enviam um formulário de Contato do Squarespace, o próprio formulário se transforma em uma mensagem de agradecimento assim que o botão de envio for pressionado. A razão pela qual eu não gosto disso é que, A, eu quero adicionar chamadas à ação para usuários que me contatam, como pedir para baixar algo, visitar minha loja, seguir meu blog, etc B, quando se trata de SEO e analytics, Não consigo rastrear os usuários que enviam meu formulário de contato, portanto, não consigo capturar esse público. Se o usuário de pixel do Facebook, por exemplo, não conseguir instalar um pixel para rastrear usuários que realmente enviam seus formulários, você só poderá rastrear usuários que visitam a página em que o formulário está. Para muitos de vocês, minha primeira razão de ter uma página de redirecionamento bastante é razão suficiente para fazer isso, mas se SEO é muito importante para você e você faz muita publicidade no Facebook e usar o pixel do Facebook, então esta técnica é uma obrigação. Esta é a minha página atual, que é a página que os visitantes são redirecionados depois de enviarem o formulário na minha página de contato. Você pode ver que eu mantive bem simples. Eu só tenho um gráfico que expressa meus agradecimentos, uma nota confirmando que a mensagem foi enviada, e depois uma série de chamadas à ação. Aqui, por exemplo, compartilho um link para um novo guia de recursos on-line que criei para artistas de letras, links para meu canal Skillshare, meu Instagram, meus livros e uma chamada à ação para se inscrever no boletim informativo do workshop, boletim de notícias. Estas páginas de agradecimento são realmente um ótimo lugar para incorporar um ou mais apelos à ação, porque seu público nesta página será sempre usuários que tiveram interesse suficiente em você ou em seu site para ter entrado em contato com você para começar. Este é um público privilegiado para lembrar sobre todos os recursos legais e coisas que você oferece. Se é um e-shop ou um blog, conteúdo para download, Instagram, página do Facebook, o que você tem, use esta página ao máximo para alcançar as pessoas que já expressaram interesse em você e seu site. Mesmo que eu já tenha essa página de agradecimento, eu vou começar um novo para que eu possa orientá-lo a partir do zero. Então aqui está o backend do meu site. Comece indo para a seção Não vinculado do seu site, clicando no sinal de adição para criar uma nova página. Vou selecionar uma página em branco simples aqui, mas tecnicamente você pode escolher qualquer uma dessas opções. Estou intitulando esta nova página, “Obrigado”. O layout que você pode escolher depende de você, mas eu quero que esta página seja simples, então eu vou selecionar este primeiro design minimalista e, em seguida, clicar em Iniciar edição. Vou rapidamente fazer algumas personalizações aqui. Agora que o Mockup da página de agradecimento está feito, eu preciso incorporá-lo no formulário da página de contato. Então eu estou chegando aqui para a minha página Contato, nós também podemos navegar até ela a partir daqui na barra lateral das minhas páginas. Estou rolando para baixo até o meu formulário, editando a página e editando o formulário em si. Comece indo para a guia Avançado. Esta caixa Pós-Enviar Mensagem é onde você digitaria qualquer tipo de mensagem, como agradecimento, no modo padrão normal do Squarespace. Aqui é onde quando alguém envia o formulário, a própria forma se transformará em uma pequena nota de agradecimento e o que quer que você escreva aqui é o que eles vão ver. Mas, por enquanto, estamos mantendo-o em branco, e estamos rolando para baixo até aqui para Post-Submit HTML. Agora, o objetivo desse hack ou contorno que estou mostrando a vocês acontece aqui mesmo. Em vez de escrever uma mensagem nesta caixa, vamos realmente inserir código que vai forçar o site a redirecionar para uma nova página do seu site quando alguém clicar em “Enviar”. Essa nova página, é claro, vai ser a página de agradecimento que acabamos de fazer. Antes que possamos realmente criar este código, eu vou cancelar isso, descartar minhas alterações porque eu realmente não fiz nenhuma mudança crucial agora. Cancelar fora do modo de edição desta página Contato. Role para baixo até a minha nova página de agradecimentos que acabei e vou clicar neste botão de engrenagem para as configurações. Isto é o que eu preciso ver. Eu preciso olhar para o slug URL desta página. Isto significa que o URL direto para esta página web em particular é o URL do meu site. Se eu vir aqui para uma nova janela do navegador, você pode ver que isso funciona muito bem já. Como criamos esta página e colocamos na seção não vinculada do nosso painel de páginas, isso significa que ela não está diretamente vinculada a qualquer lugar do seu site, mas ainda é uma página ativa na internet. Isso é exatamente o que precisamos para poder redirecionar as pessoas para essa página sem ter um link para ela no site. Lembre-se qual é o seu URL slug e vamos para o próximo passo. De volta aqui na página de Contato. Novamente, estou editando a página, editando o formulário Contato. Vindo até aqui para Avançado, rolando para baixo até Post-Submit HTML. Você não precisa ser capaz de escrever código para fazer isso. Eu fiz isso super fácil para você. Existem sites incríveis lá fora que geram código que é open-source para muitas funções comumente usadas. A função que precisamos hoje é um simples redirecionamento de URL. Eu já encontrei para você um gerador de redirecionamento. Eu tenho o URL aqui na tela para você, mas também o link ao vivo está na seção sobre esta classe. Para o URL para o qual precisamos redirecionar, eu quero que você coloque o endereço web completo para o site que acabamos de fazer. No meu caso, é isso, o pluralbellestudio.com/obrigado. Uma vez que você fizer isso, basta clicar neste botão, “Gerar o código de redirecionamento para mim.” Agora copie este código inteiro e cole-o. Então eu estou copiando aqui e colando aqui no campo HTML Pós-Submissão. Porque este é um código gratuito adorável, os autores incluíram um pouco de publicidade para o seu site. Mas estou bem com isso, dê crédito onde é devido. O crédito não aparecerá em qualquer lugar do lado visível do seu site, então não há absolutamente nada para se preocupar. Se por alguma razão você não pode acessar este código, eu coloquei em um documento do Google Drive, que você pode acessar e copiar, já que este é o código-fonte aberto, sobre o link que eu tenho na tela aqui, ou no link ao vivo que incluí na seção sobre esta classe. O gerador de código bacana incluiu meu URL exclusivo em três pontos diferentes neste código, então quando eu pressionar “Aplicar” e, em seguida, salvar minha página, isso deve funcionar. Agora, isso é super importante. Infelizmente, no backend do Squarespace, você não pode testar campos de envio de formulários como este. Então vamos ter que ir para a frente do meu site. Quero ir para a página de Contato. Não estou no back-end, estou no meu site real. Eu sei disso porque aqui no backend, eu estou no meu pluralbelle.squarespace.com URL, e aqui no meu URL personalizado real, pluralbellestudio.com. Então eu vim aqui para o meu site real e vou colocar uma pequena mensagem falsa e apertar “Enviar”. Como magia, agora eu fui redirecionado para esta nova página de agradecimento que eu criei há um minuto. 3. Crie um link de download: Uma característica de visão muito comum nos dias de hoje é oferecer um download gratuito para os visitantes do seu site. O Squarespace facilita a adição de um link ou botão para baixar um arquivo. No próximo vídeo, mostrarei como criar um link de download em troca da captura de visitantes, endereço de e-mail e outras informações de contato. Mas primeiro, vamos nos certificar de que você saiba como fazer um link que baixe um arquivo da maneira tradicional e fácil no Squarespace. Aqui estou eu em um dos meus sites, calligrafile.com, onde frequentemente ofereço downloads gratuitos aos leitores do blog. Neste post em particular, nós nos unimos com a revista em maiúsculas para dar um arquivo PDF imprimível de seu belo cartaz abecedary. Ao clicar neste botão, os visitantes podem baixar um PDF de qualidade de impressão de alta resolução deste cartaz, que se abre em uma nova janela e permite que as pessoas ampliem, imprimam ou baixem. Como é que eu fiz isto? Bem, é bem simples. Eu vou fazer outro só para que todos possamos dar uma olhada em como eu fiz isso. Vamos começar editando esta página. Vou adicionar este botão de download aqui. Vou clicar para adicionar um novo widget e rolar para baixo para o botão, Vou título este Download gratuito, eo clique através do link. Vou selecionar essa guia muitas vezes ignorada chamada arquivos, e aqui eu sou solicitado a adicionar um novo arquivo ou usar um arquivo existente que eu tenha carregado no passado. Para esta demonstração, vou adicionar um novo, navegando até o meu arquivo PDF. É um arquivo bem grande e isso realmente não importa, e é bom que você pode fazer upload de arquivos grandes para download aqui. Uma vez carregado, ele aparecerá na minha lista de arquivos existentes, e a última etapa é rolar para baixo e clicar em “Abrir em uma nova janela”. Gosto que quase todos os links do meu site sejam abertos em uma nova janela para que os usuários não sejam enviados para fora do meu site. Clicando fora desse mini pop-up, eu desço aqui e seleciono o estilo do botão, se ele vai ser médio, grande, alinhado no centro da página ou à esquerda ou à direita, etc Agora quando eu clicar em” Aplicar” e eu salvar minha postagem no blog, vejo que clicar no botão faz exatamente o que esperávamos. Os mesmos passos podem ser usados para adicionar um link ao texto, não só tem que ser um botão, então aqui eu acabei de adicionar este texto de download gratuito no corpo do texto do blog, e eu vou adicionar um link. Ir para arquivos, arquivo existente o abecedary de escrever que eu acabei de carregar janela aberta, clique direito fora do pop-up e pressione “Salvar”, e eu estou tudo feito. 4. Captura de e-mail: Como você acabou de ver, dar um download no Squarespace é fácil. Mas o que não é fácil é forçar os visitantes a completar uma chamada à ação para obter esse download. O mais comum desses convites à ação é uma captura de endereço de e-mail, significa que os visitantes se inscrevam em sua lista de discussão ou boletim informativo para ter acesso ao seu download. Esta é uma ótima maneira de capturar novos seguidores. Aqui estou eu em uma página do meu próprio site. Eu quero dar aos visitantes um download gratuito de papel de parede se eles se inscreverem no meu boletim informativo. Há duas maneiras de resolver isso. A opção mais básica e mínima usa o widget de newsletter e a opção ligeiramente mais sofisticada usa o widget de formulário. Vou guiar-te pelos dois agora mesmo. Vou começar editando minha página e, em seguida, adicionando um widget de newsletter. Vou pô-lo aqui mesmo na parte inferior da página antes do rodapé. Aqui, vou personalizar o meu texto. Vou optar por clicar em Exigir campo de nome porque também quero capturar os nomes dos meus visitantes, mas isso é opcional. Se você quiser capturar ainda mais detalhes do visitante, você também pode usar um widget de formulário em vez do widget de newsletter, que é a técnica que eu vou mostrar a você em seguida. Então, chegando à aba Avançado, vou editar minha Mensagem Pós-Submissão, então vou vincular ao arquivo para download da maneira que fizemos no vídeo anterior. Vou carregar meu arquivo de papel de parede agora e clicar em Abrir em Nova Janela. Em seguida, irei até a guia Armazenamento e conectarei meu método preferido de captura de e-mail. Uma vez que eu salvar, eu posso testar isso aqui mesmo nesta tela depois de receber a página. Ótimo. Agora eu vejo esta mensagem pop-up e eu posso clicar no link e obter o meu download gratuito. A versão ligeiramente mais sofisticada desta solução alternativa usa o widget de formulários. Então, novamente, eu vou editar minha página e no mesmo lugar como antes, eu vou adicionar um widget de formulários em vez de um widget de boletim informativo. Vou remover o campo de assunto e o campo de mensagem, deixando apenas o nome e o endereço de e-mail. Agora, como antes, você também pode remover o campo de nome e apenas capturar um endereço de e-mail. Você também pode adicionar ainda mais campos para que as pessoas verifiquem. Por exemplo, você pode forçá-los a responder a um questionário adicionando perguntas de caixa de seleção ou botão de opção ou até mesmo um campo de pesquisa em si. Você pode forçá-los a colocar em seu próprio URL do site, qualquer coisa assim, você pode capturar agora. Vou nomear este formulário Free Downloadable, embora possamos mudar isso mais tarde, se você quiser. Em Armazenamento, exalte seu endereço de e-mail, que será o método padrão capturar as informações depois que um visitante acessar Enviar. Mas não queremos enviar-lhe um e-mail, apenas queremos capturar os seus detalhes. Então, novamente, vou me conectar com meu serviço de captura de e-mail preferido. Na guia Avançado, repita as etapas do widget de newsletter, adicionando o texto do link de download na caixa Post-Submit Message. Voltando aqui, vou decidir que quero meu alinhamento de botões no centro da minha forma. Vou mudar o texto do botão Enviar para dizer, vamos ver, Get My Free Wallpaper! Agora, o próximo passo legal, e a maneira em que esta é uma opção mais sofisticada, é que eu vou rolar para baixo aqui e clique em Ativar Modo Lightbox. Isso transforma seu formulário em um botão para que, quando as pessoas clicarem nele, um pop-up solicitará que eles insiram seus detalhes. Então eu vou inserir o texto deste botão agora e, em seguida, clique em Aplicar. Para testar isso, como vimos no vídeo anterior, você vai ter que salvar sua página e então realmente ir para o seu site real, para o seu URL real. Atualize a página em que você tinha isso para que seu novo formulário apareça e, em seguida, teste-o clicando no botão. Tão legal, esse formulário apareceu. Vou colocar as minhas informações e obter o meu papel de parede grátis. Incrível. No meu próximo vídeo, vou compartilhar algumas dicas para estilizar esta janela de confirmação pop-up, bem como como como fazer com que os usuários insiram seus detalhes de contato em troca de um código de cupom. 5. Código de cupom de captação de e-mail: Agora vocês são todas pessoas inteligentes e capazes, então eu tenho certeza que você provavelmente já descobriu como revelar um código de cupom para as pessoas em troca de seus detalhes de contato. Mas neste vídeo, não só vou mostrar isso a vocês, vou estar cobrindo como adicionar alguma personalização estilística e layout à janela pop-up do formulário. Para o exemplo de hoje, eu vou dar às pessoas 25% de desconto nos selos de borracha na minha loja se eles me fornecerem seus detalhes de contato e se inscreverem no meu boletim informativo. Como alguns modelos do Squarespace têm maneiras diferentes de criar códigos de desconto e cupons, use o link na minha tela se precisar de ajuda para configurar um. Eu também tenho o link ao vivo para isso na seção sobre esta classe. Quero colocar um botão para as pessoas conseguirem este código de cupom bem aqui na minha loja. Então eu vou editar minha página e eu acho que vou colocá-la bem aqui com um pouco de espaçador acima dela. Vou colocar um widget de formulário e, como antes, apagar o assunto, apagar a mensagem. Agora, o nome do formulário é o título que aparecerá no primeiro pop-up. Acho que vou ligar para isso, pegar seu cupom. Depois de fazer isso, irei para Armazenamento, desconectarei meu endereço de e-mail e conectarei ao meu método de captura de e-mail. Agora vamos para o Avançado. Quero alterar o rótulo do botão Enviar para Obter seu cupom. Na Mensagem Pós-Submissão, quero ficar um pouco mais elegante do que no meu vídeo anterior. Eu quero que o código de cupom em si seja realmente grande. Então eu vou limpar o Post-Submit Message e, em seguida, descer para Post- Submeter HTML em vez disso. O fato de que podemos usar HTML para estilizar este texto é o que vai torná-lo um pouco mais chique. Vou digitar minha mensagem aqui. Agora, antes de eu realmente digitar o código de cupom nesta próxima linha, eu quero adicionar um pouco de estilo HTML. Eu acho que eu quero que o código em si seja o grande texto H1 ou cabeçalho que eu tenho no meu site. Isso é bem simples. Esta é uma tag HTML muito fácil. Vou colocar um cursor esquerdo, H1, cursor direito. O Squarespace é realmente ótimo porque ele adiciona automaticamente o fechamento de sua codificação. Tudo que você tem que fazer é digitar o que vai entre as duas tags. Atualmente, a maneira como isso vai parecer é que esta mensagem principal vai ser como o texto básico do parágrafo que você vê aqui. Será alinhado à esquerda e selos felizes também alinhados à esquerda, estará na próxima linha. Vai ser grande a forma como meus cabeçalhos H1 parecem, mas eu acho que eu quero que tudo isso seja centralizado. Clicando em Backup aqui no início do meu texto, vou adicionar um código mais simples. Agora, eu adicionei uma div aqui e o Squarespace me deu a tag final para esta div, mas eu não quero que ela esteja lá. Quero-o no final do meu texto. Vou cortá-la e colá-la no final do texto. Agora, é claro, se você está familiarizado com HTML, você sabe que você pode adicionar muito mais aqui, seja uma mudança de fonte, cor, tamanho, o que você tem, há muito mais que pode ser feito aqui, mas ensinar classe de estilo HTML em profundidade é uma coisa ligeiramente diferente. Em seguida, eu vou descer aqui e ativar o modo Lightbox. Vejo que o botão aparece à esquerda, então eu vou subir aqui até o topo e mudar o alinhamento para o centro. Em seguida, venha até a etiqueta do botão Abrir e eu acho que eu vou colocar Get Your Cupom para 25% de desconto em selos de borracha. Em seguida, vou apertar Aplicar e Salvar e lembrar que com um formulário, você precisa voltar ao seu site original. Clique em Atualizar e somente então seu formulário novo e atualizado será exibido. Então eu vou clicar nele. Ótimo, funciona bem até agora. Pegue meu cupom. Ótima. Tudo está centrado e meu código de cupom é realmente grande. 6. Captura de e-mail de Landde: Os truques que acabei de compartilhar com você para dar downloadables e códigos de cupom usando formulários também podem ser facilmente incorporados em espaços quadrados páginas de destino, ou também conhecido como páginas de rosto. Aqui, eu tenho uma página inicial muito básica que eu fiz para esta classe com a configuração padrão. Apenas um único botão, que é o padrão que leva à página inicial do meu site. Aqui no meu back-end onde eu posso editar minha página de destino e quando ele vir para a ação onde eu posso editar botões, links e formulários. Eu posso ver aqui o botão padrão que leva à página inicial. Mas para manter as coisas simples para esta demonstração, eu vou excluir o botão e apenas substituí-lo pelo formulário. Vou rotular o botão, baixar seu papel de parede grátis. Claro, a maioria dos sites que têm uma página de destino não será apenas publicidade livre de papel de parede. Talvez você queira dar um e-book gratuito ou algo um pouco mais substancial. No entanto, isso mostrará como é feito. Vou clicar em Editar formulário agora, e já passamos por isso, mas a janela parece um pouco diferente, eu vou aconselhá-lo que não vai haver uma opção para transformar isso em uma caixa de luz porque o padrão e a única maneira de fazê-lo em uma página de destino é fazer com que o formulário em si seja uma janela pop-up. Lembre-se de que o nome do formulário é o título de uma tela de confirmação. Vou simplesmente dar o título, Enjoy. Vou apagar os campos de assunto e mensagem. Por causa de algo diferente, eu só vou adicionar um campo de site, certificando-se de que não é necessário, mas pedir às pessoas para inserir seu site. No armazenamento, novamente, eu vou me certificar, se você tem seu e-mail aqui como um padrão, desconectá-lo e fazer conexão com um provedor de captura de e-mail padrão. Mais e avançado, vou nomear este botão enviar, baixar meu papel de parede e eu vou preencher a mensagem aqui com o link de download. Lembre-se nos arquivos, eu ainda tenho esse arquivo existente aqui. Vou entrar no arquivo existente, selecioná-lo, abri-lo nova janela e, em seguida, eu posso pressionar Salvar. Mas só para lembrá-lo, bem aqui, tudo o que eu mostrei no vídeo anterior sobre post enviar HTML vai funcionar aqui. Isso inclui estilizar o tipo como centralizá-lo e marcá-lo com uma tag H1 ou H2. Mas também inclui o que eu mostrei no início desta aula, onde você pode redirecionar os usuários para uma nova página em seu site e para isso, isso pode realmente ser uma ótima idéia. Você pode redirecioná-los para uma página que você fez sobre o download. Digamos que você tenha um e-book gratuito ou um pacote de amostras para as pessoas aprenderem caligrafia. Bem, você pode redirecioná-los através deste formulário para aquela página onde você mostra exemplos, você mostrar-lhes como usá-lo, você anunciar o produto, mas esse site só será acessível para as pessoas que passaram por este passo inicial . Agora, eu tenho que apertar Salvar aqui e se eu expandir a tela com esta seta, eu posso realmente testar o formulário nesta página, ao contrário do caso com muitas outras páginas. Ótimo, eu clico, tudo isso aparece e eu clico em baixar meu papel de parede.