Crie um site no Squarespace do zero: sem modelo, sem código e sem medo

1. Apresentação: Oi. Meu nome é Isbel e administro minha pequena empresa criativa há mais de 15 anos e adoro criar sites no Squarespace Nesta aula, mostrarei passo a passo o processo de criação de um site no Squarespace 7.1 usando o editor dragon drop fluid engine Esta é a versão mais recente deles, e vamos fazer isso completamente do zero. Isso significa que não há modelos, nem codificação. Vamos superar o medo de uma página em branco. Esta aula é perfeita para proprietários de empresas individuais, criativos, freelancers, profissionais paralelos DI que estão impressionados com Também é uma ótima opção para você se você já tem um site do Squarespace 7.1 e deseja adicionar algumas páginas adicionais a ele, mas não tem certeza de como fazer isso sem usar Isso vai ser perfeito para você. Projeto de classe, vamos construir um site de uma página. Você pode então usá-lo como um site independente para lançar seu negócio e ficar on-line rapidamente, ou pode ser usado como página inicial de um site de várias Meu exemplo de site será para um assistente virtual criativo e todos os recursos, a marca, as cores, as fontes e o texto estarão disponíveis nos recursos da aula se você quiser baixar e acompanhar Como alternativa, você pode criar o seu próprio ou, se estiver pronto, pode começar a lançar seu negócio. Depende apenas de suas metas para fazer este curso. Vou explicar tudo para você de uma forma objetiva e direta Ao final da aula, você terá um lindo site pronto para ser lançado no mundo. Você também terá uma excelente compreensão de como o fluidendron de sete pontos um do SquareSpace funciona, permitindo que você prossiga e crie mais sites e mais páginas 2. Modelo em branco x Squarespace: Antes de começarmos a criar nosso site, quero falar rapidamente sobre por que prefiro usar um modelo em branco em vez de um dos modelos do Squarespace Porque quando você olha os modelos de espaço quadrado, eles são lindos, de várias maneiras, por que você não usaria um? Mas o problema é o seguinte. Uma das coisas que eu acho que torna o modelo de espaço quadrado tão incrivelmente bonito é a fotografia e, muitas vezes, quando você a troca por suas próprias fotos, você pode descobrir que seu site parece um pouco plano e desanimador e não tem exatamente o mesmo impacto visual que você pensava que teria quando escolheu o modelo pela primeira vez Isso me leva à estratégia. Quando você está tentando inserir suas informações na estratégia e no modelo de outra pessoa, você não está realmente pensando no que realmente quer dizer e no que deseja do seu site Por fim, há o medo de quebrar um modelo. Muitas vezes, com modelos, você encontra seções que não são realmente relevantes para você e se pergunta: posso excluí-las? Se eu deletar, vou quebrá-lo, da da da da. Isso apenas leva a essa espiral avassaladora de indecisão e faz você duvidar de si mesmo Você não quebrará seu modelo se excluir coisas. É assim que eles são projetados. Mas eu entendo. Páginas em branco podem ser muito assustadoras. Mas minha esperança é que, ao final desta aula, você veja que construir sua rosa do zero não é tão assustador, é realmente factível Na verdade, é mais fácil do que calçar em um dos modelos de espaço quadrado 3. Criando um modelo em branco: Neste vídeo, mostrarei como criar um modelo em branco e configurar uma conta criar um modelo em branco e configurar uma no Squarespace Se você já sabe como fazer isso , pode ir em frente e pular para o próximo vídeo Se não, fique por aqui. Eu vou te mostrar isso passo a passo. Ok. Quero que você acesse squarespace.com e clique aqui em Ele vai tentar te fazer algumas perguntas. É porque ele quer configurar um modelo para você, mas não estamos usando um, basta clicar aqui em Estou apenas navegando. No entanto, não há opção para selecionar um modelo em branco. O que você precisa fazer é selecionar qualquer um desses modelos e , em seguida, excluir as páginas. Se clicarmos aqui em uma página, vou selecionar essa aqui e começar com esse design. Se você tiver uma conta, você pode fazer o login aqui no canto superior direito. Caso contrário, continue com o e-mail. Vou preencher meus dados aqui e você pode seguir em frente e fazer o mesmo. Quando isso for carregado, você terá uma página parecida com esta. Você pode ver na parte inferior aqui que você tem um teste gratuito de 14 dias com o Squarespace Existe uma maneira de estender isso e vou mostrar como fazer isso mais tarde na aula, mas saiba, por enquanto, que você não precisa pagar pela sua conta do Squarespace até que esteja pronto para lançá-la e lançá-la no Agora, vamos clicar no site e depois nas páginas. A primeira coisa que queremos fazer é excluir a página inicial. Mas se você tentar excluí-lo, verá que não é possível , porque você precisa ter pelo menos uma página ativa em seu site. Vamos adicionar uma página em branco. Clique no sinal de mais, adicione em branco e vamos chamá-lo de home two. Em seguida, precisamos apenas atribuir isso como a página inicial principal. Clique aqui no COG. Desça até aqui, página inicial do Setters, confirme e feche, e agora você pode prosseguir e excluir a página inicial original A última coisa que quero que façamos é clicar no COG aqui e vamos renomeá-lo de volta para home no título da página, no título da navegação e também no log do URL Clique aqui em Salvar. E lá vamos nós. É você com um modelo completamente em branco pronto para começar. No próximo vídeo, mostrarei como configurar o cabeçalho e o rodapé Ok, te vejo lá. 4. Configurando o cabeçalho + rodapé: Neste vídeo, vamos configurar cabeçalho e o rodapé do nosso site Eu apenas forneço uma estrutura muito boa para o site logo no início. É um pouco como quando você está montando um quebra-cabeça e sempre começa primeiro com a moldura externa A menos que você seja uma pessoa louca que começa no meio de um quebra-cabeça, sem julgamento, mas uau. Ok, vamos começar. A primeira coisa que eu quero que você faça é clicar aqui em Editar, e agora você está oficialmente no modo de edição em seu site. Passe o mouse sobre o topo aqui para editar o cabeçalho do site. A primeira coisa que vamos fazer é colocar nosso logotipo. Então, se clicarmos aqui, você deve clicar no ícone do lápis e inserir o título do seu site, que será o nome da sua empresa. Então, o nosso é o VA criativo. Em seguida, vamos adicionar nosso logotipo. Faça upload do arquivo e selecione seu logotipo. Aí está. Fácil assim. É um pouco pequeno, podemos ajustar o tamanho do logotipo aqui com a barra deslizante ou, se você souber exatamente o tamanho que deseja, pode colocá-lo aqui. Basicamente, com seu logotipo, você quer que ele seja o menor possível, mas não tão pequeno que não seja legível. A próxima coisa que eu quero fazer é excluir esse login. Se você clicar nele e clicar em Excluir, é só para o caso de você querer ter um site em que os clientes possam fazer login, o que nós não fazemos. No entanto, quero manter nossos ícones de mídia social, vamos clicar neles e adicionaremos mais alguns links. Clique aqui no lápis. Você pode ir em frente e simplesmente adicionar seu link aqui, adicionar link. Aí está. Você pode ver que ele criou automaticamente os ícones para nós. Você pode ajustá-los no design para que você possa tê-los com um círculo ou um quadrado, contornado ou sólido Eu quero manter o meu simples assim, e você pode aumentar o tamanho aqui também. Ok, clique para sair daí. A próxima coisa que eu quero fazer é adicionar um botão. Vamos pular aqui para adicionar elementos e simplesmente alternar essa opção aqui para um E aí está, vamos mudar o texto, clicar nele, clicar no ícone do lápis e eu quero dizer entre em contato comigo. Vamos anexar um link para ele. No momento, não há nenhum lugar para vinculá-lo. Vamos criar uma seção de contexto dentro desse site de uma página. Mais tarde, mostrarei como inserir o link que descerá para essa seção. Última coisa, só quero te mostrar essa seta azul acesa aqui. É aqui que você pode dimensionar a altura do seu cabeçalho. Isso é o menor que pode ser. Isso está encostado na parte superior e inferior da seção Você quer dar a tudo um pouco de espaço para respirar, arraste-o para baixo para que tenha um pouco de espaço. Aí está. Parece bom. Em seguida, vamos pular até o rodapé e clicar em Adicionar seção. Você tem muitos rodapés embutidos aqui que o Squarespace oferece, então você pode usar um deles Mas para esta lição, vou mostrar como fazer isso em uma seção em branco, clique aqui e , se você passar o mouse para cima, poderá ver essa opção para adicionar bloco Clique nisso. Esses são todos os blocos que você pode adicionar em qualquer uma das seções do seu site. A primeira coisa que vamos fazer é adicionar um formulário de inscrição no boletim informativo Esse é o formulário de inscrição padrão que o Squarespace Podemos personalizá-lo aqui se você clicar no ícone do lápis. Você pode alterar o texto para que possamos alterar o texto , digamos, inscreva-se. Eu também vou mudar o texto aqui e lá vamos. Também podemos alterar o alinhamento do boletim informativo. No momento, está se alinhando no centro. Vou colocá-lo à esquerda, que fica bem no rodapé Se você quiser recarregar um plano de fundo ou um traçado nele, você pode fazer isso aqui. No entanto, vou seguir em frente e deixar as coisas como estão. Lá vamos nós. E você pode dimensionar o tamanho um pouco para que fique um pouco menor. Agora, quero falar rapidamente sobre marketing por e-mail por um segundo, porque mesmo que você esteja no início de sua jornada comercial e não esteja pronto para começar a enviar e-mails regularmente, ainda é uma ótima ideia inserir um formulário de inscrição em seu site e começar a coletar esses endereços de e-mail. Nunca é muito cedo e é uma ótima maneira de começar a criar seu público. Quando você adiciona um dos formulários de inscrição por e-mail do Squares ao seu site, por padrão, todos os inscritos serão salvos em seus contatos do Squarespace e você poderá enviá-los por e-mail usando a própria plataforma de marketing por e-mail integrada do Squarespace a alternativa é Em vez disso, a alternativa é conectar uma plataforma de terceiros, e a forma de conectar uma plataforma de marketing por e-mail de terceiros variará dependendo de qual plataforma você usa. Não é realmente possível para mim abordar isso nesta aula. No entanto, se você precisar de algum conselho sobre como fazer isso, entre em contato comigo nos comentários entre em contato comigo nos comentários e ficarei feliz em ajudar. Vamos voltar a construir nosso rodapé. A próxima coisa que queremos fazer é adicionar um bloco de imagem. Novamente, adicione o bloco. É hora de selecionar a imagem e vamos colocar nosso logotipo novamente. Ao clicar no ícone de adição, agora você pode selecionar da biblioteca porque já fizemos o upload. Clique no seu logotipo e adicione, vamos arrastá-lo para o outro lado da tela. Vou apenas reduzi-lo porque é um pouco grande, arrastar esses pontos de ancoragem e reduzir a escala. A próxima coisa que eu quero é um bloco de texto embaixo disso. Adicionar bloco. É hora de selecionar o texto e arrastá-lo para ficar embaixo do seu logotipo Vou seguir em frente e copiar e colar nosso slogan aqui. Agora, eu também vou colocar um e-mail no rodapé. Não sei sobre você, mas acho muito frustrante quando estou em um site e não consigo encontrar um endereço de e-mail e só quero entrar em contato com eles. Acho que um rodapé é um ótimo lugar para colocar seus dados de contato. Lá vamos nós. Eu só quero alinhar isso centralmente, destacar o texto e clicar aqui para alinhar centralmente. E lá vamos nós. Vamos arrastar esse logotipo um pouco para que ele fique diretamente no meio do texto. A última coisa que quero fazer com meu rodapé é adicionar alguns links sociais clicar novamente em Adicionar bloco Em vez de navegar, você pode simplesmente digitar coisas Pronto, links sociais. Você pode ver que já está lembrado, então estão salvos os mesmos links que colocamos no cabeçalho. Vamos arrastá-lo para baixo para que não fique muito perto desse texto. Ok, está parecendo bom. Podemos simplesmente clicar para sair daí. Vou fechar essa janela. Ele está pedindo que verifiquemos nossa visualização móvel. Faremos isso mais tarde na aula. Além disso, não se esqueça de economizar. E sim, está com boa aparência. Agora temos um site em branco com um bom cabeçalho e um bom rodapé, então ele só precisa preencher o meio Mas antes de fazermos isso, vamos configurar o estilo do nosso site Essas são nossas fontes, nossas cores e nossos botões, e é isso que vamos fazer no próximo vídeo. Nos vemos lá. 5. Estilo: Neste vídeo, vamos configurar o estilo do nosso site, ou seja, nossas cores, nossas fontes e nossos botões Vamos ver como fazer isso. Quando estou trabalhando no estilo, gosto de ter meu guia de estilo aberto, meu documento de identidade visual. Você pode fazer o mesmo se quiser acompanhar ou, claro, criar o seu próprio, se preferir. Para acessar o estilo, você pode clicar aqui nos estilos à esquerda Como alternativa, você pode clicar nesse pequeno ícone de pincel no canto direito Ambos o levarão ao mesmo lugar, que é esta seção aqui à direita da tela. Vamos dar uma olhada em nossas fontes primeiro. Primeiro, vou configurar a fonte do meu título. Clique em Cabeçalhos e você pode selecionar a fonte que deseja usar nesse menu suspenso. Você pode percorrer todas as opções de fonte. Squarespace tem literalmente centenas e centenas e centenas de fontes para você usar Eles extraem muitos deles das fontes do Google e das fontes da Adobe. Elas serão a maioria das fontes que você reconhece lá e você deve conseguir encontrar algo de que goste. Eu sei que quero usar para meus cabeçalhos, então vou pesquisar isso E selecione-o. Aí está. Mudou a fonte que já estava no meu e-mail, cadastre-se aqui. Há algumas outras configurações que você também pode ajustar. Você pode alterar o peso da fonte. Se você quisesse que fosse muito pesado ou muito leve, você poderia. Eu vou escolher um peso de 400 no meio termo. Você também pode brincar com a altura da linha determinar a distância entre cada linha. Vou definir isso para 1,4 e seu espaçamento entre letras, que é a distância entre as letras Apenas tome cuidado com esta, você não quer fazer nada louco, tenha grandes lacunas entre sua carta. Isso só faz com que os textos se tornem completamente ilegíveis. Vou manter este em zero e transformar o texto aqui. Se você gosta disso, é se quiser ter todos os títulos em maiúsculas ou minúsculas Vou mantê-lo como nenhum, que significa que posso decidir enquanto estou digitando minhas fontes A última coisa é o tamanho da fonte. Temos quatro tamanhos de cabeçalho diferentes, começando com o cabeçalho um que é sempre o maior até o título quatro, que será o menor . Você pode ajustar o tamanho deles aqui usando esta barra deslizante ou pode digitar os tamanhos se souber exatamente o que você quer eles sejam, que é o que eu vou fazer Isso parece bom para nossos títulos. Vamos passar para nossos parágrafos e fazer o mesmo. Vou selecionar minha fonte. Quero que sejam apresentadas mais algumas configurações que você possa alterar em Novamente, você pode alterar o peso da fonte, vou fazer isso com 400 e você também pode ajustar a altura da linha no espaçamento entre letras Vou manter isso em 1,6. Você não quer muito espaço entre as linhas, mas também não quer que elas fiquem todas agrupadas Você só quer ter certeza de que seu texto é bom e legível Novamente, com o espaçamento entre letras, tenha cuidado, pois se você arrastá-lo para fora, você deixará muito espaço, o texto ficará realmente ilegível e muitas pessoas terão dificuldades com isso, o que terá um impacto negativo na usabilidade do seu Vou apenas manter este em zero e você pode alterar o tamanho das suas fontes aqui. Na verdade, estou muito feliz com os tamanhos padrão. Eles trabalham para mim. Agora vamos voltar e dar uma olhada nas fontes em nossos botões. Portanto, você tem três opções de botões aqui e pode alterar os detalhes da fonte de cada um individualmente. Eu recomendaria manter as mesmas fontes em todos os botões, apenas para manter a consistência em todo o site. Também vou mudar isso para a fonte do parágrafo. Lá vamos nós. Estou muito feliz em manter essas configurações. Os pesos são um pouco mais pesados do que a fonte do nosso parágrafo, 500, mas tudo Isso dá um pouco mais de impacto no botão. Então, basta clicar fora daqui. A última coisa que você deseja configurar em suas fontes é essa fonte diversa, que vou selecionar mesma forma que nosso parágrafo Seus artigos diversos abrangem apenas tudo que o título e as Serei coisas como a categoria do seu blog, os títulos, acho que são diversos Não estamos usando nenhum neste exemplo de site hoje, mas é uma boa prática certificar-se de alterá-lo para o mesmo que seus parágrafos A última coisa que quero fazer nesta seção está aqui nos estilos atribuídos. O que me interessa particularmente é esse botão de cabeçalho. Vamos clicar nele, que está relacionado a esse botão aqui, que temos Você deve ter notado que a fonte não mudou nesse botão enquanto atualizávamos os outros, e isso porque ele tem seu próprio estilo No momento, está configurado como personalizado. Vou clicar nesse menu suspenso. Quero que meus botões tenham a mesma fonte de todos os meus outros botões. Vou apenas mudar para um parágrafo. Pronto, você pode ver que mudou imediatamente para a mesma configuração de estilo de Mas eu quero torná-lo um pouco maior. Vamos para 1.1, só para que tenha um pouco mais impacto na cabeça de lá. Você pode sair das fontes e agora vamos ver nossas cores. Clique aqui nas cores. Edite a paleta Você pode ver que tem cinco opções de cores. Squarespace sempre os configura da cor clara para a escura Essa é uma prática muito boa a ser seguida. Significa apenas que você tem uma boa variedade de opções de cores diferentes. Mude as cores, você pode fazer freestyle. Você pode simplesmente arrastar esse pequeno seletor de cores por toda parte e encontrar sua cor dessa maneira No entanto, eu sei exatamente quais cores eu quero que este site tenha. Vou copiá-los e colá-los usando os códigos hexadecimais Basta alterar esse menu suspenso aqui para hexadecimal, se ainda não estiver, e depois acessar seu guia de marca e eu copiarei e colarei todos os códigos Vamos inserir isso. Você pode ver que agora mudou para essa cor de pêssego rosa pálido que eu quero Vou mudar o resto dessas cores e você pode fazer o mesmo com a sua. Pronto, agora temos todas as nossas cores para que possamos sair daqui. A última coisa que veremos é a configuração do nosso botão. Vamos clicar aqui e entrar nos pacotes de botões. Agora você pode ver que, ao passar o mouse sobre todas as opções, você obtém três botões diferentes É uma boa ideia ter um sólido, um esboço. Pelo menos, se você rolar para baixo alguns desses outros, eles são apenas um esboço Acho que você quer misturar tudo, mas você quer manter a mesma forma, ter todos os botões da mesma forma em todo o site. Isso apenas cria uma sensação agradável e consistente em seu site. Vou prosseguir e selecionar este aqui, você pode ver que agora mudei meu botão em tempo real. Se você quiser alterar qualquer uma das configurações dos botões individuais, é aqui que você pode fazer isso. Nossas fontes já estão configuradas. Fizemos isso na seção de fontes. Você também pode ajustá-los aqui, mas eu quero mantê-los iguais Como eu disse, quero manter os botões com aparência consistente. Não quero tocar nas fontes. Não quero tocar na forma porque fico feliz que todas tenham a mesma forma. A única coisa que você pode ver é o acolchoamento. Se você clicar no seu preenchimento, verá que agora criou mais espaço ao redor das palavras Para mim, gosto de manter meus botões bem apertados e não ter muito acolchoamento. Vou seguir em frente e ficar com o pequeno. Lá vamos nós. Podemos sair desta seção. Feche os estilos do nosso site e a última coisa a fazer é clicar aqui em Salvar e isso salvará todos os seus créditos Ao longo da construção do seu site, você sempre pode voltar ao estilo Se algo não parecer certo, talvez uma de suas fontes seja um pouco maior ou menor do que você pensava que queria. Então você sempre pode ir até lá e mudar as coisas à medida que avança. Mas, por enquanto, nossos sites estão ótimos. Temos nosso cabeçalho, temos nosso rodapé, temos toda a nossa marca pronta A única coisa que resta a fazer é criar o meio do site, que começaremos a fazer no próximo vídeo. Nos vemos lá. 6. Seção herói: Neste vídeo, vamos começar a criar o corpo do nosso site, começando com a seção de heróis. Essa é a primeira seção que alguém verá quando chegar ao seu site, então é muito importante. Ele quer declarar claramente quem você é, o que sua empresa faz e como você pode ajudar alguém. Então, se olharmos aqui no nosso exemplo, temos uma foto grande, meia tela, à esquerda. Em seguida, temos um pouco de texto, grande pedaço de texto, corpo do texto e, em seguida, um botão. Vamos ver como fazer isso. Você deseja navegar até as páginas e depois editar, e estamos de volta ao modo de edição em nosso site. Clique aqui em AdSection e adicionaremos uma seção em branco Você tem muitas seções de espaço quadrado pré-construídas aqui. Se você quiser escolher uma, essa é absolutamente uma ótima opção. Mas para esta aula, vamos fazer isso a partir de uma seção em branco. A primeira coisa que quero fazer é adicionar a imagem. Então vá em frente e clique em Ad Block. Imagem e, em seguida, o ícone de adição, carregue o arquivo e selecione sua foto. Então vamos. Agora, quando você tenta escalá-la com esses pontos de ancoragem azuis, você pode ver que ela está ficando maior, mas está permanecendo na mesma proporção do original. O que queremos é que essa imagem realmente preencha essa caixa de texto azul Se você clicar no ícone do lápis e entrar no design, no momento, ele está configurado para caber, o que significa que sempre permanecerá do jeito que está. Se você clicar aqui em preencher, você pode ver que agora vamos preencher a caixa azul. Vamos arrastar os pontos de ancoragem até a borda e eu também vou puxá-los para baixo No entanto, se você ver ao puxá-la para baixo, é aí que está a seção mais escura Esse é o fim da nossa seção. Mas temos essa grande lacuna por baixo. Se você ver quando você a puxa para baixo, a grade continua crescendo, mas essa seção em branco permanece a mesma, porque há um preenchimento automático definido em uma nova seção quando você a adiciona Só queremos nos livrar disso. Ele automaticamente te dá esse espaço na parte superior e inferior. Isso é o que quero dizer com preenchimento. Vamos nos livrar disso. Clique aqui, na seção Editar onde diz, tela cheia, basta desativá-la e agora nossa imagem está encostada na parte superior e inferior da seção, que é o que queremos Uma coisa pequena: não está exatamente no centro. Essa linha pontilhada azul é o ponto central do seu site Eu quero que essa imagem fique bem ali no meio. Mas, no momento, isso não porque o Squarespace funciona com um sistema de grade e todos os elementos se encaixam Você pode ver que quando eu arrasto isso, ele se encaixará automaticamente, mesmo que eu o solte no meio de uma grade, ele sempre se encaixará na borda da mais próxima , em vez de no Pressione a letra G no teclado, que abrirá a grade para que você possa sempre vê-la. O que precisamos fazer é remover essa lacuna entre esses pequenos blocos. Se você clicar novamente na seção Editar e entrar em Gap, poderá escalar a largura e a altura dessa lacuna para cima e para baixo. Se você levar direto para zero, agora poderá ver que a imagem está diretamente no meio, que é o que queremos. OK. A próxima coisa que eu quero fazer é adicionar um bloco de texto, adicionar texto em bloco. Eu só vou arrastar isso para onde eu quiser. Quero que fique aqui de forma que fique a cerca de duas dessas grades de espaço da imagem e da parte superior do cabeçalho Agora eu posso simplesmente ir em frente e digitar meu texto. Agora, quando você copia, cola ou digita texto, o padrão é automaticamente esse tamanho de parágrafo dois, mas eu quero que essa parte seja um título, então será uma parte maior de Se você colocar o cursor logo no início da frase, clique no menu suspenso e vamos selecionar Título um. Isso agora o tornou bonito e grande e manteve esse texto pequeno. Vou apenas arrastá-lo um pouco para que ele se espalhe pelas três linhas Vou escalar essa caixa de texto o mais curta possível, para que fique exatamente de acordo com este texto aqui Agora só precisamos adicionar outra caixa de texto possamos adicionar aquele pequeno subtítulo Vou continuar, adicionar texto em bloco. Arraste este para que fique no topo e copie meu pequeno slogan. Vou arrastar tudo isso para baixo apenas para manter esse espaço na parte superior, as duas grades de espaço na parte superior, que parecem boas A próxima coisa que eu quero acrescentar. A última coisa é um botão, clique aqui em Adicionar bloco, selecione seu botão e vamos arrastá-lo para que fique embaixo do nosso texto Eu só vou mudar o texto para dizer, vamos conversar. Anexaremos o link mais tarde. Isso será vinculado à nossa seção de contatos, mas não podemos vinculá-la até que a tenhamos criado. Você notará na tela que, ao digitar o texto, a caixa encolheu um pouco, porque ela também está definida como preenchida Eu digo, por exemplo, que você deveria arrastar o botão para baixo, você pode ver que o botão está preenchendo totalmente essa caixa azul e o texto sempre ficará lá no meio. Eu prefiro ajustar meus botões. Vou mostrar como isso funciona apenas para mantê-los consistentes em todo o site. Clique em Desenhar e depois em ajustar. Pronto, você pode ver que o botão agora está configurado para ter o preenchimento que selecionamos quando configuramos nosso estilo, em vez de preencher a caixa azul, essa é minha preferência por Eu apenas me certifico de que todos permaneçam agradáveis e consistentes em todo o seu site. Agora eu quero que fique alinhado com este texto à esquerda, então você pode simplesmente clicar aqui depois da linha. Lá vamos nós. Está parecendo bom. Vou pressionar G novamente no meu teclado para me livrar dessa grade. A grade é muito boa para ajudá-lo a alinhar as coisas. No entanto, às vezes pode ser um pouco perturbador quando você quer ver a aparência dos sites Muitas vezes, alterno entre a grade G ativada e a grade G desligada só para ver como as coisas estão e verificar se estou feliz com o espaçamento Eu posso ver que essa imagem precisa ser reduzida um pouco. Está bem na parte inferior. Talvez haja uma grande lacuna entre esse trecho de texto e esse trecho de texto. No entanto, não consigo arrastar isso mais para baixo porque ele se encaixa na grade Em vez disso, o que posso fazer é ver se você clica na caixa de texto e é essa pequena que alinhará o texto na parte superior, no meio ou na parte inferior do bloco de texto Se levarmos para o centro ou para baixo, acho que o centro provavelmente fica melhor. Essa é apenas outra maneira de ajudar a alinhar seu texto. Isso parece bom para mim. Vamos continuar e clicar em Salvar. A próxima coisa que quero fazer antes de terminarmos este vídeo é ver como isso está acontecendo agora no celular. Atualmente, estamos na visualização para desktop. Se você passar o mouse aqui à direita da tela, verá que estamos na visualização para desktop Mas vamos dar uma olhada em nossa aparência na visualização móvel. Clique nessa opção. Lá vamos nós. Você pode ver que, no geral, não parece terrível, mas há alguns problemas de espaçamento com este texto e, na parte inferior, e também na nossa imagem, temos uma pequena lacuna na lateral Para corrigir isso, basta arrastar as alças da imagem. Na verdade, eu também quero que a imagem seja um pouco maior na altura, basta arrastá-la para baixo. Vou selecionar todo o meu texto e meu botão juntos e puxar tudo isso para baixo. O. Vamos alinhar isso na parte inferior do bloco de texto Vou arrastá-lo um pouco para cima, para que fique lá. Vamos publicar esse texto desse jeito. Eu botão. Vamos apenas reduzir o tamanho do bloco de texto lá. O botão bloqueia e o abre. Geralmente, gosto de cerca de uma grade de espaço entre meu texto e meu botão Vamos colocá-lo lá. Isso parece bom. Vou apenas arrastar outra grade de espaço para baixo Sim, estou feliz com a aparência. Também poderíamos dar uma olhada rápida no rodapé, pois estamos aqui, e ver como isso foi afetado na visualização móvel Quero que o logotipo e o texto fiquem acima do formulário de inscrição por e-mail. Vou apenas selecionar meu formulário de inscrição com essas setas aqui, você pode simplesmente clicar nelas para movê-las para baixo Ele descerá cada um dos elementos até ficar na parte inferior. E esse logotipo parece um pouco grande demais. Eu só vou encolhê-lo com as flechas lá. Mova esse texto um pouco para cima para que tudo fique bem Vamos arrastar isso até Agora, também podemos encurtar a altura do rodapé Isso está parecendo bom por enquanto. Ainda há muito espaço aqui, mas isso mudará à medida que adicionarmos mais conteúdo à página. Por enquanto, acho que o celular está com boa aparência. Vamos alternar entre nossa visualização de desktop e nossa visualização móvel ao longo da aula da classe É uma boa ideia continuar verificando seu celular enquanto cria seu site em vez de deixá-lo para o final. É uma forma um pouco mais eficiente de fazer as coisas. Mas, por enquanto, vamos continuar e clicar aqui em Salvar. Vamos voltar à visualização para desktop, que é onde vou te encontrar no próximo vídeo, onde veremos como criar a próxima seção do nosso site. Ok, te vejo lá. 7. Sobre + Serviços: Neste vídeo, vamos seguir em frente e criar as próximas duas seções do nosso site. Essa é a nossa seção Sobre e a seção de serviços. Se dermos uma olhada aqui na maquete, você pode ver que temos corpo de texto, duas imagens nesse divertido formato de arco e, em seguida, temos uma linha ondulada Em nossa próxima seção, temos um pouco de texto e essa seção suspensa para nossos serviços e, novamente, uma linha ondulada na parte inferior Você clicou novamente no Modo de Edição e, abaixo desta seção aqui, clique em Adicionar seção. Você deseja prosseguir e selecionar a seção em branco. A primeira coisa que eu quero fazer é realmente mudar a cor. Clique aqui na seção Editar, cores e você terá todas essas opções diferentes. Squarespace cria paletas de cores diferentes com base nas cinco cores que você selecionou, o que é um Você pode ver que poderia tê-lo com fundo cinza e fundo escuro. Queremos continuar com este aqui, que é de cor pêssego brilhante. Então eu quero adicionar meu texto. Clique aqui no texto do Ad Block e, em seguida, digitaremos nosso texto para que você possa digitar como qualquer outro editor de palavras. Você? E vai automaticamente para o parágrafo dois. Eu quero fazer deste um parágrafo, desculpe, um título dois, ou talvez, na verdade, vamos tentar o título três. Não quero fazer outro título porque já tenho um título aqui em cima. Vou tornar esse texto um pouco menor. Agora vou copiar e colar texto do meu parágrafo, que você pode ver que, ao entrar lá embaixo, ele saltou automaticamente do título três para o parágrafo dois Então você pode ir em frente e copiar seu texto para o F. Então vamos Vou arrastá-lo um pouco. Estou mantendo esse espaçamento de duas grades, valendo duas grades e você pode ver que, ao clicar e arrastar, sua grade aparecerá e, quando eu soltar, ela desaparecerá Novamente, se você quiser ver a grade permanentemente, basta pressionar G no teclado e isso continuará funcionando, não importa o que você faça, e G novamente, desligue-a. Vamos adicionar nossas imagens. Adicionar imagem de bloco. Eu arrasto isso para o outro lado da tela. Clique no meu ícone de adição Carregar arquivo. E parece que esta aqui é sobre uma. Então, para adicionar nossa segunda imagem, você pode fazer o mesmo. Adicione um bloco ou você pode simplesmente copiar e colar uma imagem existente. Se você executar o Comando C e depois o Comando V, ele fará uma duplicata do bloco que você acabou de criar Vamos mudar a imagem desta vez. Clique no ícone de lápis, substitua desta vez e faça o upload do arquivo e podemos selecionar nossa imagem. Ah. Como antes, as imagens sempre usam como padrão um ajuste em vez de um preenchimento. Ele está assumindo a proporção em que foi carregado. Mas essa imagem aqui, eu realmente quero que tenha esse belo formato de arco. O que vou fazer é clicar no ícone do lápis e ir até o design. Em vez de preencher, vamos clicar na forma. Agora, coloque a imagem em um círculo. Eu quero mudar essa forma para essa forma de arco aqui, mas você tem muitas opções de formas com as quais você pode jogar. Vamos lá, somos nós agora em um arco. Eu quero arrastá-lo para este lado da tela. E vamos torná-lo um pouco maior também. Lá vamos nós. Essa outra imagem, agora, você pode ver que temos um pequeno problema porque ela está atrás dessa imagem, mas na verdade queremos que ela esteja no topo. Se você clicar na imagem e passar o mouse sobre aqui, seguir em frente, você pode trazer essa imagem para a frente e eu também quero que esta seja um preenchimento em vez de um ajuste, design, preenchimento e isso preenche a caixa de texto para design, preenchimento e isso preenche a caixa de texto Vou apenas mover as duas imagens um pouco para a esquerda. Vamos manter essa distância de duas grades e eu quero simplesmente arrastar essa alça azul para cima desse jeito. Temos uma boa quantidade de acolchoamento por baixo. A última coisa a fazer nesta seção é criar linha ondulada que tínhamos na maquete e, para fazer isso, clique aqui na seção Editar e deseja adicionar um divisor. Ative isso Esse é o divisor padrão que sempre aparece. É uma curva com um traço nela. Você poderia manter o derrame se quisesse ou simplesmente retirá-lo de lá. Então, se você clicar na forma, poderá alterar a forma da sua divisória Você poderia ter um estilo mais angular. Vou manter essa onda suave e você pode variar a altura e a largura da onda. Dependendo das configurações que você escolher, optarei por uma boa onda suave e suave. Ok, clique para sair daí. Vamos adicionar nossa próxima seção. Adicionar seção, adicionar seção em branco. Vou mantê-lo dessa cor e quero primeiro adicionar nosso livro didático Vou retirar esse bloco de texto novamente, está na mesma posição que o desta seção, então eles se sentam ordenadamente e depois copiam e colam meu texto Novamente, quero fazer com que eu possa ajudar um título três, para que ele corresponda à seção acima. Agora eu quero adicionar esse bloco suspenso. Adicione um bloco e é esse aqui, acordeão. E lá vamos nós. Basta arrastar isso para o outro lado da tela e começar a preencher nossos detalhes. A forma como adicionamos o texto para um bloco de acordeão é um pouco diferente Quero clicar aqui em Editar e você pode ver todos os seus itens aqui. Você pode adicionar mais se tiver mais e quiser adicionar. Vou fazer os três para este exemplo, clicar nele e, em seguida, você coloca seu título aqui, que é Caixa de entrada e administrador Então você quer digitar sua descrição aqui. Aí está. Você pode ver que agora está preenchido no menu suspenso Vou preencher isso para os próximos dois e você pode fazer o mesmo. Depois de colocar todo o seu conteúdo em acordeão, eu só quero pular e mostrar como isso fica na prévia ao vivo do site Vá em frente e clique em Salvar e você deseja sair e ver essa seta no canto superior. Se você clicar nele, ele exibirá uma prévia do seu site e mostrará como ele está. Então, vamos rolar até o bloco Acordeão e você poderá ver como ele funciona em Se você clicar no ícone de adição, ele exibirá uma lista suspensa do texto e, quando você clicar no próximo, esse fechará e este será aberto, e assim por diante Algumas coisas que merecem ser destacadas são o comprimento, a largura do texto. Para mim, isso é um pouco curto. Eu preferiria que o texto saísse aqui e isso fosse algo que pudéssemos fazer. Vamos dar uma olhada em como fazemos isso. Clique na seta novamente e volte para Editar. Clique no seu bloco de acordeão e é o ícone do lápis e desta vez você quer clicar aqui em Design É aqui que você pode fazer muitas edições. Você pode alterar o tamanho do título e da descrição. No momento, está definido como um título quatro em um parágrafo dois, o que funciona muito bem para mim. Se você clicar aqui no parágrafo do texto, poderá ver a largura aqui no momento em que é uma largura média. Vamos continuar e mudar isso por muito tempo. Se você sair daqui, terá algumas outras opções que você pode personalizar aqui. Você pode fazer com que ele expanda o primeiro item. Isso significaria que este está sempre aberto quando alguém rola para baixo até ele Você também pode alterá-lo para que as pessoas possam ter todas essas opções abertas ao mesmo tempo. Vou continuar e manter isso desativado e você pode mudar seu ícone para uma seta em vez do sinal de mais Altere também o tamanho do ícone e a espessura, se quiser, bem como o posicionamento, para que você possa colocá-lo no início da linha e não no final. Se você rolar um pouco mais para baixo, também poderá optar por ter um plano de fundo e um traçado no seu bloco, se quiser. Vou seguir em frente e deixar em branco. Ok, está parecendo bom. Há muito espaço entre nosso texto e nosso bloco de acordeão Vou arrastar isso um pouco para que ocupe mais da tela e quero encurtar a altura, clicar nas minhas setas azuis e rolar para A última coisa a fazer é simplesmente adicionar nosso divisor. Temos a linha ondulada, que está nesta seção aqui Quero colocar uma linha ondulada nesta seção aqui, clicar em Editar seção e depois em Ativar divisor Você não pode vê-la no momento porque esta seção tem a mesma cor do rodapé, mas você a verá na próxima seção que adicionarmos, que é o que faremos no próximo vídeo Clique aqui em Salvar e nos vemos no próximo vídeo. 8. Depoimentos: Neste vídeo, veremos como adicionar esse bom recurso de depoimento deslizante Vamos fazer um pouco diferente com este e usar uma das seções de espaço quadrado embutidas Eu sei, eu sei. Eu disse que estávamos fazendo tudo do zero e praticamente estamos, mas essa é a maneira mais eficiente de adicionar esse recurso deslizante. Vamos ver como fazer isso. Você deseja clicar novamente no modo de edição e, em seguida, rolar até a parte inferior da tela e adicionar uma nova seção. Desta vez, vamos selecionar uma das seções embutidas Se você clicar aqui nos depoimentos, o que você está procurando é qualquer deles que tenha esse olhinho, essa pequena opção de informação Qualquer um com o I, você pode editar da mesma forma. Você pode criar qualquer um desses layouts a partir de qualquer um com o I. Vou prosseguir e selecionar este Parece bem diferente do que queremos, mas quero mostrar como você pode editá-los porque eles são realmente úteis para muitas coisas diferentes em sites, esses blocos. Esses blocos funcionam de forma um pouco diferente. Você notará que, ao passar o mouse, não tem a opção de adicionar blocos diferentes a ele Em vez disso, você deseja clicar aqui em Editar conteúdo. Vou apenas ativar todas essas opções para que você possa ver o que elas fazem Você tem seu título, que é esse aqui no começo. Também temos um botão de seção, que é esse aqui. Então, cada bloco individual aqui tem uma imagem, um título, um corpo e um botão. Mas você pode optar por ter o que quiser ligado e desligado. Não precisamos de nenhum botão. Queremos manter nosso título, mas não queremos a imagem. Então, queremos o título e o corpo dos blocos. Em seguida, você só quer ir para o conteúdo. Antes de tudo, vamos mudar nosso título. Essa é para dizer uma palavra. Agora você pode continuar e editar os blocos de conteúdo individuais. Você só quer copiar e colar seu depoimento no título aqui, e então você pode colocar o nome da pessoa aqui Aí está. Você pode ver que agora está preenchido neste Então, agora vou preencher os outros dois e você pode fazer o mesmo. Você pode simplesmente excluir qualquer coisa que não seja necessária. Da mesma forma, se quiser adicionar mais, você pode adicioná-los lá. Vamos dar uma olhada no design e no layout disso agora. Clique aqui na parte inferior do design. A primeira coisa é que queremos apenas um depoimento em uma página por vez Vamos rolar isso para baixo até um. Vou manter a rolagem infinita ativada. Isso significa apenas que as pessoas podem continuar navegando, rolando e navegando para que não haja um endpoint e ele apenas alterne cada um apenas alterne Agora, clique aqui para estilizar A primeira coisa que eu quero fazer é me livrar do cartão, a caixa do cartão desligar a caixa do cartão e você também pode alterar o tamanho do texto Vamos torná-lo um pouco menor ou você pode alterá-lo manualmente aqui. Vou manter o nome do mesmo tamanho. Em seguida, algumas outras configurações que você pode ajustar aqui. Você pode mudar a posição das setas para colocá-las nas laterais ou na parte inferior Você também pode alterar o espaço acima da navegação aqui. Veja como esses botões se movem. Esse é o espaço entre a navegação e o conteúdo. Se você simplesmente desistir, veremos a seguir essa opção de tamanho e espaço. A primeira coisa que quero fazer é alterar a largura, essa é a largura desse texto. No momento, é muito longo e eu quero trazer esse texto um pouco mais adiante. Você pode torná-lo pequeno ou médio ou, novamente, você pode usar o estilo livre da largura aqui se quiser ir para algum lugar intermediário Algumas outras configurações, só para ver aqui, poderíamos observar o espaço entre os elementos. Se você mudar isso, verá que essa é a lacuna entre cada elemento. Vou manter isso pequeno. Você também pode ver seu preenchimento. Esse é o preenchimento da seção, a altura da parte superior e inferior da seção real como um todo Novamente, você pode reestilizá-lo se quiser defini-lo de forma diferente na parte superior e inferior Mas vou seguir em frente e manter isso tão pequeno quanto possível. Está parecendo bom. Você pode simplesmente ir em frente e clicar para sair daqui. A próxima coisa que eu quero fazer é mudar a cor desta seção. Clique aqui na seção Editar, cores, e então eu vou torná-la com essa cor pêssego brilhante novamente. Aí está. Você pode ver agora aquela onda adorável que colocamos no último vídeo, que agora está aparecendo lá. Ok, então eu só quero salvar minhas alterações e, em seguida, vamos acessar a visualização móvel e ver como está tudo lá Agora, a seção de depoimentos parece boa. Você pode ver como está passando por lá. Vamos verificar as outras seções porque não as fizemos no último vídeo. Então, tudo isso fica bem com o texto. A única coisa aqui com as imagens é que elas agora estão sentadas uma em cima da outra, em vez de sobrepostas Podemos apenas fazer alguns ajustes lá. Antes de tudo, vamos derrubar este , torná-lo um pouco maior. Parece bom e queremos que fique atrás da outra imagem. Então, basta clicar aqui em mover para trás e talvez eu abaixe um pouco essa só para mostrar um pouco mais dessa foto E esta seção aqui parece boa. Talvez queiramos um pouco mais de espaço entre esse bloco de texto e esse bloco de acordeão, então vou puxar o bloco de acordeão para Lá vamos nós. Isso parece bom. Ok, vou salvar essas alterações. No próximo vídeo, adicionaremos a seção de contato ao nosso site e também criaremos os links para os botões que criamos anteriormente. Nos vemos lá. 9. Contato: Neste vídeo, vamos criar a seção final do nosso site, que é nossa seção de contato. Em seguida, configuraremos os botões para que eles sejam vinculados à seção de contatos. Vamos apenas fazer algumas verificações finais. Verifique se estamos satisfeitos com a aparência do site no desktop, também no celular, e veja se há algum ajuste final que queremos fazer antes de concluirmos o site Ok, vamos fazer isso. Então, volte para o modo de edição. Role para a direita até a parte inferior e você deseja adicionar uma seção abaixo do seu bloco de depoimentos, adicionar uma seção em branco e vamos mudar a cor desta para torná-la o Clique nas cores e vamos ver essa aqui. A próxima coisa que você quer fazer é adicionar nosso bloco de texto, adicionar texto e depois copiar e colar suas informações de contato. Lá vamos nós. Novamente, queremos mudar a parte “fale comigo” para o título três. Vou arrastar isso novamente para que fique alinhado com o resto do site, para que tenhamos duas grades de espaço ao lado Estamos prestes a adicionar um formulário de contato, mas também vou adicionar um endereço de e-mail. Eu sempre coloco o formulário de contato e um endereço de e-mail porque as pessoas têm preferências. Algumas pessoas acharão mais fácil simplesmente preencher o formulário. Então, as pessoas preferem enviar um e-mail diretamente para você. Em última análise, você quer dar às pessoas a melhor oportunidade, a melhor chance de enviar e-mails para você. Você não quer que nada os afaste. Eu sempre envio e-mail e formulário de contato, mas é uma preferência totalmente pessoal. Então, para adicionar nosso formulário de contato, vamos clicar aqui, Adicionar bloco e, desta vez, você deseja selecionar o formulário. Lá vamos nós. Analise isso e você verá que esse é o formulário padrão fornecido com essas seções Você pode torná-lo maior se quiser. Vamos arrastar isso para baixo para que fique alinhado com o formulário. Na verdade, vamos arrastar os dois até o topo e, em seguida, teremos a quantidade certa de preenchimento acima Vou ampliar a parte inferior do formulário para que fique bonito e curto. Somos nós. Se você quiser adicionar outros campos ao formulário, você pode. Você clica aqui no ícone do lápis. E você pode ver que, no momento, temos aqui os campos de edição do formulário. Você tem nome, e-mail, assunto da mensagem. Isso é bom e simples. É assim que eu guardaria maioria dos meus formulários de contato, para ser honesto. Mas você pode adicionar campos extras se quiser. Se você quiser que eles lhe enviem um link, por exemplo, desculpe, um arquivo, você pode pedir que eles enviem um arquivo e, sim, isso depende apenas do que você quer das pessoas quando elas entrarem em contato. Para mim, gosto de simplificar porque, novamente, não quero dar às pessoas motivos para não entrarem em contato comigo. Acho que quanto mais simples for o formulário, menos eles precisarão responder a muitas perguntas, que pode impedir que algumas pessoas entrem em contato Você pode alterar a forma como o botão diz Se quiser mudar isso para me enviar uma mensagem, por exemplo, você também pode alterar o que a mensagem diz depois que eles se inscreverem. No momento, o padrão é sempre obrigado, mas você pode mudar isso para outra coisa ou o que quiser dizer. Isso é feito por nós com nosso formulário de contato. Basta arrastar essas setas para cima para que tenhamos um pouco do preenchimento correto E a próxima coisa que quero fazer é criar um link para este formulário de contato. Os botões que configuramos em nosso cabeçalho e na seção de heróis, é aqui que queremos que eles sejam vinculados. E o que precisamos fazer é adicionar o que é chamado de ponto de ancoragem Clique aqui na seção Editar. Se você rolar até a parte inferior, verá aqui o link âncora e vamos ligar para esse contato Agora, se pularmos até nossos botões, vamos fazer isso primeiro. Clique no ícone do botão e do lápis, e aqui você pode anexar Link. O que você deseja digitar é hashtag contact OK. E esse é o link que acabamos de criar. Agora, quando alguém clica nesse botão, ele desce para a seção de contato e queremos fazer o mesmo no botão de cabeçalho Edite o cabeçalho do site. Clique no botão para editar e anexar o link e é a mesma coisa com a hashtag contact Vamos verificar se isso está funcionando. Clique aqui em Salvar saída e clique na seta aqui para obter um modo de visualização do seu site, e vamos ver o que acontece quando clicamos no botão. Aí está. Isso se resume à nossa seção de contatos, que é o que queremos Enquanto estamos no modo de pré-visualização, vamos dar uma olhada em nosso site e ver se há algo que queremos ajustar Basta verificar se o espaçamento está correto. Se houver algo que esteja fora do lugar, é hora de testá-lo e verificar se tudo funciona. Acho que está tudo bem. A única coisa que eu gostaria de ajustar é que temos bastante preenchimento no Vamos voltar ao modo de edição e ajustar isso Então, vou editar o rodapé do site, editar a seção e, em seguida, você pode remover completamente o preenchimento e adicioná-lo manualmente ou pode simplesmente alterar a altura dessa seção de média para pequena Isso parece bom. A última coisa que quero fazer no meu rodapé é adicionar uma pequena seção de direitos autorais Você pode adicionar isso apenas no rodapé principal e colocar um pequeno bloco de texto aqui na parte inferior Vou fazer isso em outra seção porque quero que seja em uma cor diferente. Clique aqui, adicione seção, adicione seção em branco, vou mudar a cor desta seção para escura, essa brilhante. Vamos torná-lo o mais pequeno possível. Na verdade, vou me livrar do preenchimento tela de preenchimento para que agora valha apenas uma grade Então, vamos clicar aqui em Adicionar bloco e adicionar bloco de texto pode prosseguir e digitar nossos direitos autorais aqui. Direitos autorais. Então é Alt g se você estiver em um Mac para usar seu símbolo de direitos autorais. 2025, o VA criativo. Quero alinhar centralmente esse texto e vou arrastar esse bloco de texto para que fique bem no meio do meu Eu quero que ele se alinhe na parte inferior desse bloco de texto para que ele tenha um pouco de espaço em relação ao mindinho acima Lá vamos nós. Por fim, vamos verificar como estamos no celular Começando pelo rodapé, acabamos de adicionar essa redação Vamos alinhar centralmente esse texto. O resto da foto parece bom. Página de contato, vamos adicionar um pouco de espaço entre o texto e o bloco ali. E todo o resto, acho que já verificamos. A única coisa que eu talvez possa ajustar aqui é que esse logotipo é um pouco pequeno, clique aqui em Editar cabeçalho do site Clique no logotipo do seu site e no ícone do lápis e agora você pode alterar a altura do logotipo do seu celular. Isso não afetará a visualização da área de trabalho. Isso é só para o seu celular. Então vá em frente e faça 60. Lá vamos nós. Parece bom. Vá, clique aqui em Salvar para salvar suas edições, volte para a visualização na área e volte para o modo de visualização Só para que possamos fazer uma última verificação final do nosso site e de sua aparência. Bem feito. Você acabou de criar um site a partir de um modelo em branco. Como você se sente? É uma sensação boa? Espero que sim. Mais algumas coisas que vou te mostrar. No próximo vídeo, mostrarei como adicionar um favicon Esse é o pequeno ícone que fica na barra do navegador e, em seguida, estamos prontos para lançar nosso site no mundo. OK. Te vejo no próximo vídeo. 10. Vamos adicionar um favicon (um favorito, o quê?!!): Antes de concluirmos nosso site e lançá-lo para o mundo, primeiro adicionaremos um favicon Agora, o que diabos é um favicon e por que é tão importante? Deixe-me te mostrar. Favicon é basicamente esse pequeno ícone que você vê nas guias do Ele fica no navegador da web e também fica ao lado do seu site quando aparece nos resultados da pesquisa. É uma coisa pequena, mas faz uma grande diferença na forma como as pessoas vão perceber sua empresa. Isso ajuda a criar reconhecimento de marca e também significa para os usuários do seu site que você é uma empresa confiável Além disso, se você é como eu e tem 1 milhão de guias abertas ao mesmo tempo em seu navegador, isso ajuda você a encontrar um site novamente em navegadores ocupados e desordenados Se o favicon é minúsculo, simplicidade é fundamental aqui Ele quer ser reconhecível em uma escala muito pequena, então acho que a câmera do Instagram, Nike swsh ou o Apple da Apple No entanto, se você não tiver uma marca de logotipo, não se preocupe. Basta olhar para sua marca, ver se há símbolos recorrentes ou formas significativas e usar isso para tentar criar algo Uma ótima opção à prova de falhas, porém, é usar apenas uma inicial, pegar a primeira inicial do nome da sua empresa e colocá-la em um fundo colorido. Essa é uma ótima opção para um favicon. Se você está ouvindo isso e não tem a menor ideia de como criar um favicon, não se preocupe Eu vou te mostrar uma maneira super simples de fazer isso agora. Vamos usar um software gratuito chamado Canva, vamos direto ao assunto Você quer ir para canva.com. Se você tiver uma conta, você pode fazer o login. Caso contrário, você pode clicar neste botão de inscrição no canto superior direito e ele apenas o orientará no processo de criação de uma conta. Agora, há uma versão gratuita do Canva. É grátis. Sempre será gratuito. Não há pegadinhas lá Existem apenas alguns recursos que você não pode usar, mas você pode absolutamente usar a versão gratuita para criar seu favagon Eu vou trabalhar na versão pro neste tutorial, que é a versão paga. Acho que custa cerca de dez ou 12 dólares por mês. você terá a opção Ao criar sua conta, você terá a opção de obter um teste gratuito de 30 dias do P. Então, se você quiser fazer isso, vá em frente, cancele imediatamente e você não será cobrado após os 30 dias. Falarei sobre as diferenças entre o Pro e o gratuito à medida que avançamos neste tutorial. Ok, então, depois de fazer login, você terá uma tela parecida com esta Você deseja clicar aqui no ícone Create plus e queremos criar um tamanho personalizado de 100 por 100 pixels. Isso é bem pequeno, mas nosso favicon é absolutamente pequeno, então não precisamos que seja maior Esta é a nossa prancheta e podemos adicionar alguns elementos a ela Quero clicar aqui à esquerda no elemento. E o tecido que eu quero criar é esse formato de flor. Eu só vou procurar o que eu quero, que é a flor dos anos 60. Você tem todos esses elementos diferentes aqui. Se você clicar em C all para ver gráficos, agora, qualquer um com esse ícone de coroa, esses são elementos profissionais, então você só pode usá-los se tiver a versão paga do Canva Mas você verá que há muitas coisas aqui que você pode usar para a versão gratuita. Portanto, ainda há muita coisa que você pode fazer com a versão gratuita do Canva se não quiser optar pela versão paga Agora, vou selecionar esse aqui. A primeira coisa que quero fazer é escalá-lo usando esses pontos de ancoragem nos cantos e posicioná-lo no meio Agora você pode ver quando eu a arrasto, essas guias aparecem, as guias centrais. Isso está me mostrando o meio da página, que é onde eu quero colocá-la. Eu só quero mudar a cor. Vou manter essa laranja porque combina com a flor no logotipo criativo da VA. Mas vamos mudar essa cor central para esse verde limão brilhante. Aí está, sem mais nem menos. Super fácil. Este é o fabricon que vou usar em nosso site Mas eu só quero te mostrar outra opção que é usar uma inicial inicial do nome da sua empresa. Clique aqui na página do anúncio, então a primeira coisa que eu quero fazer é mudar essa cor de fundo. Se você clicar aqui na cor e depois pesquisar o código hexadecimal, vou usar a cor pêssego que estamos usando em nosso site, compilação que agora mudou essa cor de A próxima coisa que quero fazer é clicar em um bloco de texto. Clique em Texto, adicione um bloco de texto e eu terei um V para assistente virtual. Avance e torne isso maior. Vamos fazer com que seja 42, talvez maior que isso, talvez 72. Lá vamos nós. Vou apenas arrastá-lo até o centro da página. Vou alterá-la para torná-la da mesma fonte do cabeçalho do nosso site. Aí está. Agora você tem duas opções de favicon que você pode usar. Esta é apenas uma demonstração muito rápida de como você pode criar Fabacons no Mas sim, vá em frente, experimente e veja o que funciona melhor para o seu site. Agora, queremos baixá-los. Vamos clicar aqui em Compartilhar e fazer o download. Quero baixá-los como PNG e depois selecionar um fundo transparente. Essa é a razão pela qual eu sugiro obter a conta Pro porque você só pode fazer isso com a versão paga. Agora, para a nossa farinha, isso significa que ela será cortada. Essa forma será recortada e não haverá fundo branco. No entanto, se você quiser optar pela versão gratuita, esta aqui funciona muito bem como opção porque não há fundo a ser recortado, então será apenas uma forma quadrada em vez de uma forma recortada. Mas aqui no download. Aí está . É tão simples quanto isso. Agora que baixamos nossos favicons, vamos pular para o espaço quadrado e vou mostrar como fazer o upload do Então clique no Squarespace e você quer rolar para baixo desta vez até as configurações, esta engrenagem Aqui vamos nós. É essa opção aqui, favicon Adicione um arquivo FabaConuLoad. Selecione o PNG que acabamos de criar ou você pode usar o dos downloads do curso. É simples assim: clique em Salvar, feche e vamos verificar se está funcionando. Vamos dar uma olhada no modo de visualização. No momento, ele ainda mostra a caixa preta quadrada espacial. Vamos apenas atualizar a página. E aí está. Quão fácil foi isso? Nosso site está pronto. Temos nosso favicon pronto. E no próximo vídeo, lançaremos nosso site no mundo. OK. Nos vemos lá. 11. Transmita ao vivo!!!: Ok, estamos quase lá. Nosso site está ótimo. Estamos prontos para compartilhá-lo com o mundo. Neste vídeo, veremos como adicionar uma assinatura baseada em quadrados e conectar nosso domínio Agora, você não pode conectar seu domínio até que tenha a assinatura em vigor, então você precisa fazer isso primeiro. No entanto, eu não faria isso até que você estivesse 100% pronto para lançar seu site. Não adianta pagar pela assinatura se você não estiver pronto para se conectar ao domínio. Você obtém um teste gratuito de 14 dias com espaço quadrado como padrão. Quando isso terminar, eles enviarão um e-mail perguntando se você deseja estender o teste Basta clicar e estender o teste por mais sete dias. Se isso ainda não for longo o suficiente, existe uma maneira de você realmente continuar estendendo seu teste indefinidamente Vou colocar isso como um pequeno vídeo bônus depois deste. Então, por enquanto, vamos dar uma olhada nas opções de assinatura e domínio. Ok, então primeiro você deve clicar aqui no COG nas configurações E então você quer entrar na disponibilidade do site, onde você pode ver que seu site está privado no momento e você precisa fazer o upgrade para publicar antes de se conectar ao domínio. Você pode ver aqui todos os diferentes planos. Agora, os preços sempre mudam com o espaço quadrado. Isso é atual em agosto de 2025, que é quando estou filmando isso Seus preços dependerão do país em que você está, então você pode vê-los nas diferentes moedas aqui. Vou ficar com libras por causa desta demonstração. E a assinatura que você deseja dependerá muito dos recursos que você deseja. Se você está apenas começando, provavelmente analisará esses dois planos, o básico e o básico. Mas se você precisar de mais recursos, talvez precise começar a analisar o positivo e o avançado se quiser fazer coisas com comércio eletrônico em particular Role para baixo, você pode dar uma olhada e ver o que está incluído e o que não está incluído nos diferentes planos. A diferença entre esses dois aqui é que você pode ver que não receberia sua barra de anúncios e não conseguirá usar nenhum código no plano básico. Acho que também há uma pequena diferença entre a integração de e-mail aqui embaixo, há uma diferença entre algumas das configurações de e-mail que você pode fazer Dê uma olhada e escolha um. Depende se você quer um site mais avançado ou mais básico. Além disso, lembre-se de que você sempre pode atualizar no futuro. Portanto, se você não tiver certeza, selecione o básico e se houver algo que você não possa fazer e queira fazer posteriormente, basta fazer o upgrade para um dos planos mais caros. O preço mudará dependendo se você deseja pagar mensalmente ou anualmente. É sempre mais barato pagar anualmente, clique no plano que você deseja. E escolha suas opções. Você poderia ganhar 24 libras por mês, mas resultaria em 17 libras por mês se você pagasse uma taxa única. Confirme sua seleção e você poderá ver o preço mais o V que deseja pagar Ele solicitará que você preencha todos os seus dados. Vou seguir em frente e encerrar isso nesta fase. Eu já tenho uma conta do Squarespace com uma assinatura. Esta é apenas uma conta demo na qual estou lhe mostrando isso. Você simplesmente preencheria todos os seus dados e, em seguida, obteria uma assinatura da Square Space. Eu vou encerrar isso. Isso mostrará que você tem uma assinatura e deseja passar aqui para domínios e e-mail, e é aqui que você configurará seu domínio Clique aqui em Domínios. Você pode ver que este é o domínio que você tem. Cada site do Squarespace receberá um domínio criado de forma diferente, mas queremos ter um que soe mais profissional Você pode escolher aqui para obter um domínio. E você pode realmente comprar seu domínio pelo Squarespace, se quiser Ele oferece automaticamente várias opções com base no nome da empresa e no título do site , ou seja, mostrarei quais estão disponíveis e quais não estão. Mas se você sabe exatamente o que quer, pode ir em frente e pesquisar nesta barra aqui. Vamos ver o criativo VA Glasgow, talvez ele esteja disponível Lá vamos nós. Poderíamos prosseguir e obter o código do ponto no Reino Unido ou no domínio.com Você pode colocar isso aqui e isso mostra o quanto custa. Encontre seu domínio, coloque-o no carrinho e clique em Finalizar compra. Você ganha seu primeiro ano grátis se adquirir seu domínio com o Squarespace Esse é o preço aqui, esse é o preço total por três anos. Você pode mudar isso aqui. Você pode tê-lo por dez anos, um ano dependendo do que você quiser. Mas sim, super fácil se você fizer o domínio pelo Squarespace, depois de clicar em Salvar, continuar e pagar, ele será conectado automaticamente Você não precisa fazer mais nada, é uma opção muito fácil. Novamente, vou encerrar isso porque não quero conectar um domínio. Agora, a outra opção é que talvez você já tenha um domínio. Então, talvez você tenha comprado seu domínio com outra pessoa. Nesse caso, em vez de clicar neste, você clicaria em usar um domínio próprio, colocaria seu domínio lá e clicaria na seta, e isso o guiaria pelo processo de conexão desse domínio. A opção escolhida depende muito de onde você está com o domínio, se você já possui um ou se precisa comprar um. Se você está tendo dificuldades para conectar seu domínio, porque às vezes pode ser um pouco complicado ou se você não gosta muito de tecnologia, pode parecer um pouco cansativo Basta entrar em contato, me mandar uma mensagem nos comentários e ficarei feliz em ajudar. Se você está pronto para o lançamento e tudo funciona, seu site agora estará vivo no mundo. No entanto, se você não estiver pronto para lançar seu site, mas ainda quiser compartilhá-lo com amigos ou talvez ainda o esteja criando e queira um pouco de feedback de um de seus amigos, existe uma maneira de compartilhar esse site que você criou sem conectar um domínio e também sem conectar uma assinatura Eu vou te mostrar como fazer isso agora. Você deseja voltar ao site e à disponibilidade do site. Atualmente, está definido como privado. E se você clicar aqui em Protegido por Senha, você pode inserir uma senha e clicar em Salvar. Feche isso. Não quero atualizar minha senha no Google porque isso é para a senha da minha conta, que é diferente da senha do site. Depois de fazer isso, você pode copiar esse domínio neste URL, desculpe. Destaque-o e, em seguida, Command C ou Control C. Vou abri-lo em outra guia porque só quero verificar se está funcionando. Clique em uma guia anônima. Cole o domínio e você verá que ele está solicitando uma senha. Digite a senha que você acabou de criar. Novamente, não é a senha da sua conta. Essa é a senha que você acabou de criar para o site e pronto. Agora é uma prévia ao vivo do seu site e você pode compartilhá-la com os amigos se quiser receber o feedback deles, ou talvez tenha feito essa aula por diversão e só queria ver como foi o processo. De qualquer forma, essa é uma ótima maneira de compartilhar seu site e também permite que você o verifique. Se você quiser verificar o site em um telefone celular, iPad ou dispositivos diferentes, essa é uma maneira brilhante de fazer isso. Quem? Você acabou de lançar um site. Quão legal é? Mal posso esperar para ver o que você fez. Por favor, compartilhe seus projetos de aula comigo e alguma dúvida? Basta entrar em contato. Sim, estou ansioso para ver o que você criou. Ok. Tchau. 12. Uma última coisa…: Bem feito. Você acabou de criar um site do Squarespace do zero Quão legal é isso? Nós cobrimos muitas coisas nesta aula. Você aprendeu como criar um modelo em branco, como adicionar seu logotipo e um favicon e configurar o rodapé da sala principal Você aprendeu como configurar o estilo do seu site e também como criar cada seção individual da página usando o editor Squarespace Fluid Finalmente, você aprendeu como compartilhar seu site com pessoas, conectar um domínio e lançá-lo no mundo Falamos de muita coisa, e eu realmente espero que tenha sido divertido. Compartilhe seus projetos comigo no projeto de classe Upload bit. Mal posso esperar para ver o que você fez. E se você puder, eu adoraria se você me deixasse um comentário. Isso significa muito e também é muito útil outras pessoas vejam se essa aula é adequada para elas. Agora, não havia muito que eu pudesse mostrar a você nesta aula de 1 hora, e eu já tenho planos em andamento para fazer mais aulas e ensinar mais coisas sobre sites. Se houver algo em particular que você gostaria de aprender ou algo com o qual esteja tendo dificuldades , envie-me um comentário nos comentários ou você também pode me enviar um e-mail. Mas agora, acho que você deveria ir comemorar. Você acabou de fazer uma coisa incrível, e tenho certeza que isso significa que você merece um pouco de bolo. Ok, te vejo em breve. 13. Bônus: estenda a avaliação do Squarespace indefinidamente: Olá, conforme prometido, um pequeno vídeo bônus mostrando como estender indefinidamente seu teste do Squarespace Só para enfatizar novamente, não pague pelo Squarespace até que esteja pronto para lançar seu site Não há necessidade de pagar quando você estiver pronto para o lançamento. Por padrão, você terá duas semanas de teste ao se inscrever no Squarespace Quando essas duas semanas terminarem, o Squarespace enviará um e-mail perguntando se você precisa de mais Basta clicar no botão e você receberá automaticamente mais uma semana. Se você ainda precisar de mais tempo depois disso, você tem algumas opções. A primeira opção é enviar um e-mail para o Squarespace. Eu costumava fazer isso dessa maneira. vez que eles sempre disserem que sim, eles sempre estenderão o teste para você. Em última análise, eles querem que você conclua seu site para começar a pagar por uma assinatura. Opção 1, mande um e-mail para eles. Mas a maneira como eu faço isso agora e a maneira que eu recomendaria é esse pequeno truque de URL que estou prestes a mostrar a vocês. É super simples, leva cerca de um minuto para fazer. Vamos fazer isso. Aqui estamos em nosso site. Você pode ver na parte inferior aqui que o teste expirou. Está solicitando que você se inscreva. O que não queremos fazer ainda. Você também notará esse cadeado aqui, então ele não permitiria mais que você edite o site porque o teste foi estendido. Você quer ir até a barra de endereço. Não importa em qual página você está, então qualquer página. Você só quer ver se tem seu domínio aqui e, em seguida, ele dirá config, exclua qualquer coisa depois disso, para que você tenha apenas barra de configuração e, em seguida, digite extend trial Clique em Enter. E aí está. Seu teste foi estendido com sucesso. Aí está. É literalmente tão simples quanto isso. Você pode fazer esse processo quantas vezes precisar. Se você precisar de mais quatro ou cinco semanas, basta fazer isso quatro ou cinco vezes. Cada vez que você clicar em Estender o Teste, você terá uma semana extra. Se precisar de mais tempo, faça isso várias vezes até que esteja pronto para lançar seu site e pagar pela assinatura. Então, sim, isso é tudo para mim, de verdade desta vez. Se você achou isso útil, acompanhe-me aqui no Skillshare E você também pode se inscrever na minha lista de e-mail, se quiser. Eu compartilho dicas úteis semelhantes sobre como administrar um site do Squarespace e também o tipo de realidade de administrar uma Mas, por enquanto, muito obrigado. Eu vou ver você adivinhar