Crie um site de portfólio com o Squarespace

1. Introdução: Ei, eu sou Maya Favor e sou uma designer de padrões de superfície de Estocolmo, Suécia. Esta é uma classe para criativos que querem criar um site de portfólio simples. Seu site é a base de seu marketing on-line, e ter um site bonito e funcional para apresentar seu trabalho é uma obrigação hoje em dia. Criar um site pode parecer uma tarefa enorme, mas estou aqui para mostrar que não precisa ser assim. Você não precisa gastar meses na criação de um site, você pode realmente levar apenas alguns dias depois que você pegar o jeito dele. Nesta classe, vamos usar o espaço Square como uma plataforma para construir um site de portfólio simples. Ele será baseado em um modelo, mas mostrarei como você pode ajustar e personalizar um modelo se desejar fazê-lo. Você não precisa se inscrever para um plano de pagamento do Square Space para fazer esta aula, pois você terá 14 dias de teste quando você se inscrever, que é tempo de sobra para acompanhar a classe e experimentar o espaço Square como uma plataforma antes de decidir começar pagando pelo serviço. Esta é uma aula para você que quer aprender a criar um site de portfólio simples. Você não precisa ser experiente em tecnologia, não usaremos nenhum código. Você pode ser um iniciante completo e você não precisa de nenhuma experiência anterior na criação de sites para fazer essa aula. 2. O que você vai aprender: Antes de começarmos com as partes práticas desta aula, eu só quero ter um momento para falar sobre o que você vai aprender nesta aula, e o que você não vai aprender. Nesta aula, você aprenderá como criar um website de portfólio simples no Squarespace. Vou ensinar-lhe os passos que você precisa tomar, para criar seu site. Mas não vou mostrar tudo sobre o Squarespace. Esta é uma aula para iniciantes e, portanto, vou manter tudo realmente simples, para que você possa acompanhar, sem qualquer conhecimento prévio sobre a criação de Websites. Se você quiser conhecer recursos e funções mais avançados no Squarespace, eles têm um excelente centro de ajuda com tudo, desde artigos, webinars e até suporte ao cliente, via chat e e-mail que é livre de carga. Não sou um centro de suporte do Squarespace e, portanto, não posso responder a todas as suas perguntas sobre o Squarespace. Estou aqui para mostrar como você pode construir um site de portfólio simples, sem codificação baseada em um modelo no Squarespace. Vou mostrar-lhe um pouco sobre como você pode ajustar e personalizar seu modelo. Mas eu quero mencionar que mesmo que você sinta que você precisa assumir muitos chapéus em seu negócio criativo, você não precisa ser um web designer, para criar um site de portfólio muito simples. Não há problema em criar o site diretamente de um modelo sem ajustá-lo. O objetivo do seu site é mostrar o que você cria, sua fotografia de arte ou o ofício que você está fazendo. O site não é feito para mostrar suas habilidades de design web. Com isso dito, eu acho que é importante ter um site de aparência profissional, que reflete você e seu negócio. É por isso que escolho o espaço quadrado como plataforma para criar meus sites. Você obtém um site de aparência profissional, com tudo incluído em uma fatura. É por isso que sinto que o Squarespace é uma ferramenta tão boa. É fácil de entender, tudo está incluído, e você terá tudo o que precisa dentro de uma plataforma. Vamos criar um website de portfólio simples com apenas algumas páginas. Nós não vamos, no entanto, criar uma loja web e uma assinatura de carta de notícias, ou ir mais longe nesta classe, em seguida, as páginas básicas que você precisa em um site de portfólio. Não faremos nenhuma codificação ou recursos avançados no Squarespace. Esta é uma aula sobre como criar um site de portfólio de forma rápida e fácil. Não é um teste avançado de web design. Uma coisa que parece comum, quando os criativos estão prestes a criar sites, é pensar demais. Talvez você planeje por meses, e como seu site deve parecer e de alguma forma, você simplesmente nunca parece fazer tudo acontecer. Bem, estou aqui para te dizer que não precisa ser assim. Eu realmente exorto você a criar um site de portfólio muito simples, em um processo rápido, publicá-lo, e então você pode ajustá-lo, e fazer mudanças mais adiante no caminho. Com sites de portfólio pessoal, sinto que você precisa experimentá-lo antes de saber o que funciona. Não tente criar um site realmente complexo no início. Vá para um simples, como o que eu vou te ensinar a criar nesta classe. Com o tempo, você pode tornar seu site mais pessoal e mais complexo, se desejar. 3. Seu projeto: Seu projeto nesta classe é criar seu próprio site de portfólio no Squarespace. Você pode compartilhar um link para seus sites publicados, se você publicar seu site quando estiver fazendo essa aula, ou você pode tirar algumas capturas de tela em seu site de avaliação e compartilhar como JPEG. 4. Crie um plano: Então, vamos começar com um plano rápido do que incluir em seu site. Quando um web designer trabalha com um site, eles fazem wire-frames e projetam todo o lado da linha antes de começar a construí-lo. Nós não vamos trabalhar assim nesta classe porque temos modelos pré-fabricados, que vai tornar tudo muito mais fácil e economizar muito tempo. Então, o que vamos planear nesta lição? Vamos planejar o conteúdo. Então vamos dar uma olhada rápida no meu site e no meu conteúdo, para que tenhamos algo com que comparar. Eu tenho um monte de conteúdo no meu site hoje em dia, já que eu trabalho com muitas filiais no meu negócio, mas o primeiro site que eu criei foi mais parecido com o website de portfólio simples que vamos criar nesta classe, então eu adicionei conteúdo para meu site durante os anos à medida que meu negócio se expandiu. Então, para um site de portfólio simples que vamos criar nesta classe, eu acho que você deve ter uma página inicial, que é a página inicial do seu site. Você definitivamente deve ter alguma página de portfólio, esta pode ser uma página inicial ou pode ser uma página separada com o seu portfólio. Você deve ter uma página sobre e uma página de contato. É realmente apenas três ou quatro páginas no total que você precisa em seu site. Nesta classe, nós também adicionaremos um blog ao seu site, como eu estou supondo que muitos de vocês querem ter em algum lugar em seu site, onde você pode publicar como conteúdo digno de notícias. Para poder criar essas páginas, você precisa de texto e imagens. Primeiro, tome um tempo para pensar sobre quem serão os visitantes do seu site. Será, por exemplo, possíveis clientes? Você sempre deve direcionar seu conteúdo para o seu grupo-alvo, portanto, certifique-se de que o texto que você escreve e as imagens que você usa correspondem ao que seu grupo-alvo está interessado. Qualquer outro segredo é que eu nunca fiz um grande plano antes de começar a construir meus sites. Gosto de trabalhar de forma mais intuitiva e escrevo o texto e adiciono imagens à medida que crio um site. Descobri o que combina com uma determinada página e escrevo um texto e adiciono imagens que correspondam a isso. Se você quiser planejar um pouco mais do que eu, você pode apenas escrever um documento de texto simples com manchetes sobre páginas diferentes e escrever o texto que você deseja incluir nessas páginas. Você pode coletar imagens que você deseja usar em seu site, você pode não saber neste momento em que tamanho você precisa das imagens mas você pode simplesmente reunir imagens em uma pasta e ajustá-las mais tarde. Uma coisa importante a mencionar é que suas imagens devem estar no modo de cor RGB para serem visualizadas corretamente online. Para saber mais sobre modos de cores, você pode conferir minhas outras aulas sobre skillshare, preparar seus arquivos para impressão e aprender como alterar seus arquivos para o modo de cor RGB. Para este website portfólio simples, você precisa de algumas imagens de sua arte e eu sugiro que você tenha uma foto retrato de si mesmo para adicionar ao seu site e se você tiver um logotipo, eu prepararia um arquivo de logotipo PNG para adicionar ao seu site. Se você ainda não tem um logotipo, não se preocupe, você sempre pode escrever seu nome ou nome de sua marca como um título de site em seu site. Isso é realmente tudo o que você precisa para planejar para começar com esta classe e começar a construir seu website portfólio simples. 5. Primeiros passos no Squarespace: Vamos começar com o Squarespace. Vá para Squarespace.com e, eventualmente, começaremos com um site com uma avaliação gratuita. Mas primeiro, vamos dar uma olhada em outros recursos incluídos no Squarespace. Se você rolar todo o caminho para baixo, você pode ir para a lista de recursos em produtos. Aqui você pode ler tudo sobre o que está incluído e o que a plataforma Squarespace pode fazer por você. Não mencionarei tudo isso para você. Você pode ler sobre isso você mesmo. Mas basicamente por que eu uso o Squarespace é porque tudo está incluído. Tudo, desde hospedagem na web até a grande qualidade do seu site. Você pode ter uma loja, você pode ter um e-mail conectado ao Gmail. Não há necessidade de codificação. Há um design responsivo, o que significa que seu site funcionará em todos os tipos de dispositivos. Eles oferecem ferramenta de edição de arrastar e soltar muito fácil para criar seus sites. Basicamente, seria apenas dar-lhe um realmente sites de alta qualidade. Você não precisa ser um web designer profissional para criar o site do Squarespace. Pode parecer muito bom se você apenas usar os modelos pré-fabricados e se você quiser, você pode até adicionar código personalizado para torná-los realmente pessoais. Vamos apenas clicar no preço e nos produtos para ver o que tudo isso vai custar para você. Algumas pessoas pensam que o Squarespace é um pouco mais caro do que outras plataformas e ferramentas semelhantes. Mas eu sinto que com tudo o que você ficar incluído e também que você sabe que você recebe um site de alta qualidade ou você não terá quaisquer problemas com o seu site. Eu realmente sinto que vale a pena o dinheiro extra porque é tão simples e é possível criar um pequeno site no início e depois expandi-lo tanto quanto você quiser. Vamos apenas dar uma olhada rápida no custo e qual tipo de plano você deve usar. Mas nesta aula, começaremos um teste gratuito. Você não precisa se inscrever em nada antes de tentar criar seu site e certificar-se de que esta é uma ferramenta que você deseja usar. Você pode até mesmo criar seu site inteiro antes de se inscrever. Vamos rolar para baixo e dar uma olhada. Normalmente, o pagamento anual é um pouco melhor do que o pagamento mensal. Se você pagar anualmente, você economizará 30 por cento. Eu definitivamente recomendaria isso e você poderia começar com um plano pessoal. Especialmente se você ainda não começou com o negócio e talvez você não tenha qualquer entrada no negócio. O plano pessoal pode ser o melhor para você, porque você sempre pode atualizar quando quiser. Mas se você tem um negócio indo ou se você sente que você pode pagar o extra US $4 por mês, então eu definitivamente recomendo o plano de negócios. Você pode ler tudo sobre isso aqui, o que você ganha extra. É tudo, desde um e-mail pessoal com o Google até análises avançadas e comércio eletrônico totalmente integrado. Se você gostaria de começar uma loja no futuro isso é ótimo e tudo está apenas mais disponível no plano de negócios. O plano básico de comércio e comércio avançado é para você que está criando lojas online. Se você está criando um site de portfólio como estamos fazendo nesta classe, e você acha que você pode querer expandir com uma loja no futuro, eu definitivamente recomendo o plano de negócios. Mas você pode ler tudo sobre esses diferentes tipos de planos por conta própria e decidir qual deles você quer se inscrever mais tarde. Porque nesta classe, vamos criar um site de avaliação. Vamos voltar para a página inicial e clicar em “Começar”. Aqui você será levado para uma página, podemos selecionar o modelo e começar com a sua página. Mas vou passar pelo que pensar sobre quando escolher um modelo e um pouco mais sobre modelos na próxima lição. Vamos começar com a criação de uma conta nesta lição. Clique em “Entrar” no canto superior direito e em “Criar Conta”. Se você quiser, você pode clicar em “Não quero receber e-mails sobre novos recursos e produtos”. Em seguida, você pode continuar a criar uma conta com o Google, com a Apple ou com o e-mail. Vamos procurar e-mail, então escreva seu nome e endereço de e-mail e crie a senha. Aperte “Continuar”. Agora criamos uma conta do Squarespace e podemos começar com nossa tentativa gratuita. Vamos passar para a próxima lição onde vamos escolher no modelo para começar. 6. Escolha um template: Então, vamos escolher um modelo para o nosso site. Todos os sites do Squarespace têm um modelo para começar, mas o que é bom saber nesta nova versão do Squarespace, este 7.1, que é o que vamos construir nosso site, é que todos eles são realmente um modelo mestre. Você pode basicamente reconstruir todos os modelos para fazê-los olhar como o outro. Qual template você escolhe hoje em dia na versão 7.1 do Squarespace importa muito menos do que na versão anterior do Squarespace, onde os templates tinham funções diferentes. Porque agora todos os modelos têm a mesma funcionalidade base. Você pode realmente pensar neles como um ponto de partida e escolher um modelo que você gosta. Há tantos para escolher, por isso pode ser difícil escolher um modelo. Nesta classe, vamos criar um site de portfólio básico. Eu acho que é mais importante que você aprenda como o Squarespace funciona. Eu criaria um site básico de portfólio, para que você possa explorar mais tarde com o Squarespace quando aprendesse a base de como construir seu site de portfólio. Vamos apenas selecionar um modelo que gostamos. No menu à esquerda, você pode navegar por designs populares, fotografia de portfólio, lojas online, e tudo isso. Você poderia ir para o portfólio enquanto estamos criando um site de portfólio. Mas para tornar esta classe o mais lógico possível, eu encontrei um modelo que eu acho que funciona muito bem para o nosso propósito. Vou clicar na fotografia e vamos selecionar os modelos TALVA. Você pode clicar em “Visualizar TALVA”, se quiser ver como esse modelo parece. Lembre-se que você pode mudar basicamente tudo com este site, mas você tem um modelo para começar que torna tudo muito mais fácil. Clique em “Iniciar com este design”. Aqui eles perguntam o que chamar seu site. Vamos digitar o nome da sua marca e clicar em “Continuar”. Então você receberá algumas instruções sobre como criar e estilizar suas páginas, mas podemos apenas clicar em pular aqui, porque isso irá mostrar-lhe tudo. Pode desligar o assistente se conseguir um desses. Como você pode ver no fundo, seu julgamento termina em 14 dias. Quando você criou seu site, você pode atualizá-lo para torná-lo público e começar a pagar por um plano no Squarespace, mas nesta classe, construiremos um site com apenas um período de teste. Ok, ótimo. Agora você escolheu um modelo e começou com seu site. Vamos para a próxima lição, onde mostrarei como fazer algumas das configurações gerais do seu site. 7. Visão geral e configurações: Nesta lição, orientarei você por algumas configurações gerais do seu site do Squarespace e como a plataforma funciona, e como você faz algumas configurações diferentes. Se você der uma olhada no seu menu à esquerda, podemos começar no topo do Pages. Páginas é onde vamos adicionar páginas e construir nossos sites, então vou passar por isso muito mais, minuciosamente nas lições onde construímos páginas diferentes. Design é onde você define os estilos de design do seu site. Eu vou passar por muitas dessas opções mais tarde na aula, então eu não vou passar por isso mais agora. Comércio é se você tem uma loja online, então nós não vamos passar por isso em tudo nesta classe. Se você vir este pequeno símbolo, isso significa que é uma característica premium. Então, se você optar por se inscrever para o plano de negócios, você receberá alguns desses recursos. Marketing é onde você faz configurações em tudo, desde Campanhas de E-mail, que na verdade podemos criar dentro do Squarespace. SEO, algumas coisas de promoção. Histórias do Instagram, Produtos no Instagram, e também Pop-up Promocional, que é uma dessas coisas, e Barra de anúncio. Ambos Pop-up Promocional e Barra de Anúncio está disponível no plano de negócios e comércio, e eu não vou passar por isso mais nesta classe, mas estes são realmente ótimos para chamar a atenção do seu visitante em seu site. Isso foi um pouco sobre as coisas de marketing. Você pode explorar isso por conta própria. Agendamento, eu não vou passar nada nesta aula. Isto é, se você tem um negócio onde você agendar uma consulta com seus clientes. Você pode adicionar esta extensão que é alimentada por Acuity, mas eu não vou passar por isso mais nesta classe. O Analytics é onde você obterá suas análises de seu site. Então você pode ver de tudo, desde vendas se você vende produtos, ao tráfego, de onde o seu tráfego vem; de que parte do mundo? Origens de tráfego, palavras-chave de pesquisa , conteúdo popular em seu site e todas essas coisas. O Analytics está incluído no Squarespace e, para mim, essa é toda a análise de que preciso no meu site. Eu não vou passar por isso mais nesta classe porque você precisa publicar seu site e também tê-lo funcionando por um tempo antes de começar a ver as análises. Mas é muito fácil ler essas análises e você pode encontrar mais sobre elas na ajuda do Squarespace. Configurações é onde você pode fazer algumas configurações gerais para o seu site, como a disponibilidade do site. Agora estamos definidos como privado porque estamos em um período de avaliação, mas você também pode configurá-lo como protegido por senha e, ao atualizar seu site, você pode configurá-lo como público. Idioma e Região é onde você define sua hora padrão, seu país, idioma e todas essas coisas. Informações comerciais é onde você coloca seu número de telefone se quiser mostrá-lo em seu site, e-mail de contato e sua localização, se desejar, e se você tiver horário comercial, você pode colocá-los aqui. Eu não vou passar por isso mais nesta aula. Links sociais são os links que estão anexados aos seus símbolos sociais em seu site. Como padrão, o Squarespace digitou seus links sociais, mas aqui você deve adicionar seus próprios links sociais. Então eu vou apenas digitar meu canal Instagram, Facebook e YouTube, e então eu vou remover os links do Squarespace, então eu vou apenas clicar nos links e pressionar Remover. Agora eu tenho três links sociais diferentes com meu Instagram, Facebook e YouTube. Contas conectadas é onde você pode adicionar contas de redes sociais para enviar e extrair dados para o seu site. Se você, por exemplo, quiser mostrar seu feed do Instagram, você pode conectar o Instagram. Clique em Connect Account e Instagram, e eu já estou logado automaticamente no Instagram no meu computador no meu navegador, mas se você não estiver, você apenas digitará seu login e, em seguida, pressione Salvar. Você também pode conectar seu Pinterest, Facebook , Twitter e todas essas contas. Para esta classe, eu só mostrarei como usar a conta conectada ao Instagram. Não usaremos nenhuma extensão nesta classe, mas você pode explorar mais sobre isso aqui. Permissões é se você quiser ter mais colaboradores para o seu site e você pode até mesmo transferir sua propriedade do site para outra pessoa. Também não vou passar por isso nesta aula. Domínios é onde você pode obter um domínio para seu site dentro do Squarespace, ou você pode usar um domínio que você já possui. A melhor coisa é obter um domínio dentro do Squarespace se você ainda não possui um domínio, porque então você tem tudo incluído em sua plataforma Squarespace e você só receberá uma fatura para tudo. Você também pode usar um domínio que você possui, e se esse for o caso para você, você pode clicar em Saiba mais e ler mais sobre isso. Se você quiser obter um domínio dentro do Squarespace, basta digitar um domínio, e aqui você pode ver quais domínios são gratuitos, quanto custam dentro de um Squarespace, e você pode adicionar um domínio ao seu site. Nesta classe mostrarei como construir seu site de portfólio, não mostrarei como transferir domínio ou adicionar um domínio, mas é muito simples e você pode ler mais sobre isso na Central de Ajuda do Squarespace. Então eu sugiro que você faça isso no final quando você tiver construído todo o seu site, e está pronto para obter um domínio ou usar um domínio que você já possui. Mas eu não vou passar por isso mais nesta aula. Email & G Suite é onde você pode conectar um endereço de e-mail ao seu site. Primeiro você obtém um domínio e, em seguida, você pode conectar um endereço de email a esse domínio. Eu não vou passar por isso mais nesta aula também, mas isso é realmente uma grande coisa de ter incluído. Acho que isso foi incluído no plano de negócios. Portanto, se você tiver um plano pessoal, não será capaz de fazer isso, mas se você tiver um plano de negócios, você poderá ter um e-mail que termine com seu nome de domínio. Por exemplo, hello@mayafavorite.com, que é o meu endereço de e-mail. Faturamento e Conta é onde você faz as configurações do seu plano. Aqui diz quantos dias restam do seu julgamento. Você pode ver suas faturas futuras aqui, e você pode até mesmo excluir seu site. Mobile Information Bar é um recurso premium que está disponível no plano de negócios e comércio, e eu não vou passar por isso mais nesta classe. Cookies e dados do visitante é um bom recurso. Você pode ativar um banner de cookies para o seu site, que basicamente diz que ao usar este site, o visitante concorda com o seu uso de cookies. Eu não vou passar pela aula desta segunda-feira, mas se você não sabe mais sobre isso, eu apenas sugiro que você use este texto padrão, para que você informe seus visitantes que você usa cookies. Você pode ler mais sobre isso na Central de Ajuda do Squarespace e também no Google mais sobre cookies. Por enquanto, eu vou apenas incapaz o banner cookie. Blogando, passaremos por mais tarde na aula, onde criamos nossa página de blog. Avançado é basicamente recursos mais avançados que você não precisa usar, na verdade, nunca, quando você cria um site simples no Squarespace. Então isso é se você quiser adicionar código e coisas assim. Então você não precisa se preocupar com isso. Foram todas as configurações. Algumas configurações eu vou passar mais tarde na aula, e algumas eu não vou passar por mais longe porque eu não acho que você precisa saber mais sobre essas configurações para construir seu site. Mas o bom é que você pode encontrar toda a ajuda de que precisa na Central de Ajuda do Squarespace. Haverá uma lição completa mais tarde na aula, onde mostrarei como funciona essa Central de Ajuda porque não sou um suporte ao Squarespace, e há muito que saber sobre o Squarespace e eles têm um bom suporte para você. Então, por enquanto, vou desligar isso e voltar. A última coisa que quero mostrar é que se você clicar em sua conta na parte inferior, você chegará a um painel. Esta é a primeira coisa que você verá quando fizer login no Squarespace. Estes são seus sites e, mais tarde, você poderá ver seus domínios aqui também. Para acessar seu site e ser capaz de editá-lo, clique em Editar site. Isso foi tudo o que eu queria mostrar nesta visão geral das Configurações e Opções no Squarespace, vamos passar para a próxima lição em que começaremos a construir nossa home page. 8. Página: página inicial: Vamos começar com a construção da nossa home page. A primeira coisa que você vai fazer é clicar em Páginas, e é aqui que nós construímos todas as páginas do nosso site. Quando você começar com um modelo, você verá que ele diz Demo, nas páginas. O que você precisa fazer é apenas clicar na Página. Isso fará com que seja uma página que você pode construir em vez de uma página de demonstração. Normalmente, quando começo com um modelo, começo com as páginas básicas que estão incluídas no modelo e, em seguida, se eu quiser mudar algo ou adicionar páginas, eu faço isso a partir daí. Primeiro vou mostrar-lhe como construir a Homepage com base exatamente neste modelo. Vamos apenas adicionar nossas próprias imagens aqui. Eu acho que esta página inicial é realmente bom para um site Portfolio inicial. Você pode criar todos os sites de portfólio. Vou mostrar-lhe como você pode ajustar sua página inicial e todas as outras páginas, mas primeiro vamos começar com o modelo que temos e adicionar nosso próprio conteúdo. Você pode facilmente ver qual página é a página inicial pelo símbolo da casa pequena, à esquerda da sua página. Se você passar o mouse sobre a página, você pode clicar no pequeno símbolo de configurações. Role para baixo, você pode ver que ele diz que, “Isso é definido como sua página inicial”. Você pode facilmente escolher outra página como sua página inicial, se desejar. Você tem algumas configurações que você pode alterar aqui, por exemplo, Eu acho que Início, é um bom título para a página na navegação. O URL Slug deve ser Home também. Você pode adicionar uma senha à sua página. Mostrarei como fazer isso quando criarmos a página do portfólio protegido por senha mais tarde na aula. Você pode até duplicar a página se quiser criar uma cópia exata da página que você criou. Se você clicar em SEO, você verá como seu site será visualizado nos resultados da pesquisa. Eu não vou passar muito SEO nesta classe porque isso seria uma classe inteira em si mesmo. É tanta informação. O espaço quadrado faz algumas configurações automáticas de SEO para o seu site. Como iniciante e em seu primeiro site, vou dizer que SEO é algo que você pode fazer na próxima etapa quando você publicar o site e quer trabalhar mais com o desenvolvimento dele. Imagem social é como seu site é mostrado nas redes sociais. Você pode adicionar uma imagem específica a esta página. Advance está disponível no plano de negócios e comércio e é aí que você pode injetar códigos personalizados, e scripts, e todas essas coisas. Você não precisa fazer isso para um site de portfólio básico. Vamos clicar em Salvar, porque mudamos o título para Início, tanto o título da página, o título da navegação e o URL Slug. O título da página, esqueci de mencionar, que é o título que aparece na parte superior da janela do navegador. Clique em Salvar e agora mudamos o nome para nossa página inicial para Início. A próxima coisa que faremos é editar esta página. Se você olhar para o canto superior esquerdo, você tem um pequeno botão que diz Editar, então nós clicamos sobre isso. Aqui você entrará no modo de edição. Se você passar o mouse sobre as diferentes partes do site, poderá editar todas as barras. Vamos começar adicionando nossas próprias imagens a esta galeria. Clique no pequeno símbolo de imagem, e eu vou apagar todas essas imagens. Mantenha pressionada a tecla Shift e clique para obter todos eles selecionados e, em seguida, pressione Excluir. Em seguida, você clica no pequeno sinal de adição e faz upload de imagens. Eu salvei um monte de imagens de duas de minhas coleções de padrões que usarei como um exemplo neste site. Para este exemplo, estou usando apenas uma coleção nesta página inicial. Mas eu vou sugerir que você mostre uma gama de suas obras ou o que está incluído em seu portfólio para que os visitantes vejam uma variedade de seu portfólio. Mas para este exemplo, como eu disse, vou apenas adicionar uma de minhas coleções, algumas maquetes e alguns padrões. Vou clicar em abrir quando tiver selecionado algumas imagens. Isso pode demorar um pouco para fazer upload de imagens ou acelerar um pouco isso para você. Estou usando imagens quadradas aqui, mas você pode usar qualquer tipo de imagens. Você pode movê-los clicando e arrastando. Às vezes está um pouco fora, então você precisa realmente clicar, manter pressionado e arrastá-lo para a próxima imagem dentro dela. Vou tentar fazer uma boa variedade entre essas maquetes e os padrões, clicando e arrastando-os para novos lugares. Agora adicionamos nossas próprias imagens. Se você quiser, você pode adicionar uma descrição para suas imagens e você pode até adicionar um link para onde você vai se você clicar na imagem. Você pode escolher o endereço da Web, uma página no seu site, não temos muitas páginas ainda. Você pode escolher um link de e-mail, um número de telefone ou um arquivo. Na próxima lição vou mostrar-lhe como criar uma página de portfólio com imagens clicáveis que o leva para outra página em seu site. Por enquanto, fecharei este e fecharei a galeria. Aqui temos nossas imagens adicionadas à galeria. Se você pairar sobre você verá um pequeno símbolo de caneta. Clique nisso, e aqui você tem algumas edições que você pode fazer em sua galeria. Você pode escolher se você quer a largura total, sangramento total que fará com que ele sangre todo o caminho até as bordas de seus sites ou a inserção. Vamos experimentar a inserção por enquanto. Você pode selecionar o espaçamento entre suas imagens Eu acho que 30 parece bom, Row Heights, se você quiser adicionar as legendas, as descrições que colocamos nas imagens, gatos padrão sob as imagens, eu não vou fazer isso para esta página inicial. Se você quiser qualquer animação acontecendo, sem desvanecimento da animação ou dimensionamento, eu acho que a escala parece boa. A animação vai acontecer quando o seu visitante visita a sua página pela primeira vez, porque se você quiser uma caixa de luz, que significa que quando você clica em uma imagem vai ficar maior, de modo que pode ser um bom recurso. Você pode escolher o Tipo de Galeria. Por exemplo, é Strips. Vamos experimentar o Simple Grid. Aqui você tem mais algumas opções que você pode explorar. Por exemplo, o layout, quantas colunas você deseja e todas essas coisas. Vamos tentar outro layout. Você pode optar por ter uma apresentação de slides, a altura da apresentação de slides e todas essas coisas. Vamos para as tiras que temos desde o início e o espaçamento 30. São todos de altura 360. Você pode tentar isso para ver se você quer mudar alguma coisa, mas eu acho que 360 foi bom. Se você quiser um número específico aqui, você pode clicar duas vezes e digitar 360. Sob cores, você pode selecionar um tema. Mostrarei mais tarde na aula como mudar esses temas. Vamos bater, por exemplo, Dark Minimal. Você pode ver que todo o seu plano de fundo muda para uma cor escura. Light Minimal e muda para uma cor mais clara. Então, vamos apenas apertar Branco Minimal por enquanto, e então você clica fora da caixa de configurações, e aqui você fez sua página inicial. Para salvar esse hoover sobre Concluído e clique em Salvar. No canto superior direito, você pode ver como o site ficará sob visualização móvel e, se você clicar na seta, você terá uma visualização em tela cheia. Vamos desclicar na visualização móvel e clicar na exibição de tela cheia. Agora você fez uma página inicial básica para o seu site. 9. Ajuste a página inicial: Agora que fizemos uma página inicial, vou mostrar-lhe como ajustar a página inicial se você quiser, porque como eu disse antes, todos os modelos que você escolher são na verdade um modelo mestre. Assim, você pode fazê-los olhar como o outro e adicionar seções diferentes a todas as páginas do seu site. Nesta parte da turma, não vou ajustar a navegação, que está no topo, ou no rodapé, que está na parte inferior. Serão lições separadas mais tarde. Mas, por enquanto, vamos nos concentrar no meio da página. É assim que a nossa página parece no momento, mas digamos que eu queira adicionar talvez alguns textos acima das minhas imagens. Tudo o que eu preciso fazer então é ir para o modo de edição e clicar no pequeno sinal de mais que aparece, e aqui você pode adicionar seções. Isso torna o novo squarespace 7.1 realmente flexível. Você pode fazer com que todos os modelos olhem uns para os outros, pois tudo faz parte de um modelo mestre. Apenas como exemplo, posso mostrar-lhe como adicionar uma manchete. Vamos apenas adicionar este e isso fará com que sua página pareça completamente diferente. Você pode construir suas páginas realmente a partir do zero com essas seções. Talvez depois do título, você quer ter algum texto e então você pode simplesmente continuar a construir sua página assim. Explorar isso na adição de seções ao seu site é algo que eu vou deixar mais para você. Nesta classe, vamos nos concentrar em construir nosso site com base no modelo que escolhemos. Porque eu sinto que isso é um bom começo quando você está começando a construir seu primeiro site, e quando você é novo no squarespace, caso contrário, seria muito aprender. Vamos deletar esta primeira seção. Clique no pequeno símbolo “Excluir” e remova, e vamos excluir essa seção também, e talvez eu só vou adicionar um título para ajustar esta página um pouco. Aqui eu posso querer dizer algo sobre mim, e eu posso mudar o formato do cabeçalho para diferentes cabeçalhos predefinidos, ou parágrafos, ou o que eu quiser. Mas vamos escolher a ferramenta de cabeçalho, e vamos para a ferramenta de edição, e aqui você pode alterar a altura da sua seção, a largura, vamos para o pequeno, e como seu conteúdo será alinhado, então 'll para o centro, você pode ir para a sangria total e, em vez disso, você pode selecionar para ter um plano de fundo na parte de trás do texto e a cor é a mesma. Altere-os de acordo com os temas predefinidos. Então vamos para branco, mínimo, clique fora da caixa de opções. Esta é uma forma de ajustar esta página, por exemplo. Com todas as configurações de design, como a fonte, e as cores, e tudo isso, eu vou passar por isso mais tarde na aula, então nesta parte da classe eu vou construir as páginas, nós não vamos nos importar com a fonte ou as cores ou qualquer um dos os estilos de design. Vamos apenas colocar o conteúdo. Vamos dar mais um exemplo. Você pode rolar para baixo e clicar no pequeno sinal azul mais abaixo de suas imagens, e vamos dizer que queremos adicionar uma seção social com nosso feed Instagram. Por exemplo, eu gosto deste, vamos tentar isso. Clique na pequena ferramenta “Edição”, altura da seção pequena, você pode ter a largura do conteúdo como desejar, fundo e as cores, e para obter o seu feed do Instagram para esta seção, você precisa clicar na pequena ferramenta “Editar” em nesta seção e selecione sua conta conectada. Aqui você pode escolher quantos itens você deseja visualizar. Clique em “Design”, e talvez você queira ter mais imagens por linha. Você pode selecionar se deseja algum preenchimento ao redor e algumas outras configurações. Vamos apenas fazer seis imagens mostrando e apertar “Aplicar”. Agora adicionamos nosso feed do Instagram na parte inferior desta página. Se você passar o mouse sobre sua seção, você pode ver que ele diz espaçador, então vamos apenas tentar excluir este espaçador, que parece melhor para mim. Se você quiser adicionar um espaçador, você pode clicar no pequeno sinal de soltar, e aqui você pode selecionar para adicionar espaçador, um botão e muitas outras coisas. Você pode adicionar uma linha se quiser. Mas vamos apenas remover esse. Clique em “Salvar”, clique na visualização de tela inteira, e lá você teria adicionado um pouco mais de conteúdo à sua página inicial. Eu vou realmente excluir esta primeira seção porque eu não gosto dessa neste modelo, então eu vou apenas clicar em “Remover”, “Concluído” e “Salvar”. Isso é um pouco sobre como você pode ajustar sua página inicial para torná-la mais pessoal. Mas para esta aula, vou mantê-lo assim. Você pode experimentar mais você mesmo e ver se você deseja fazer algumas outras alterações em sua página inicial. 10. Página: portfólio: Certo, então agora fizemos nossa página inicial e ajustamos. Agora eu queria mostrar a vocês como criar esta página inicial como um portfólio páginas então e o que isso significa é que esta página por enquanto é uma galeria, que significa que você pode clicar nas imagens e como nós escolhemos na configuração da caixa de luz, você pode fazer a imagem é maior. Mas é isso que acontece. Você também pode adicionar um link que o levará a uma página diferente quando você clicar nas imagens. Mas se você quiser ter página portfólio puro onde você tem projetos e você quer que cada projeto seja exibido em uma página separada e ser mostrado como uma miniatura aqui, é assim que você faz isso. Em Navegação principal e em não vinculado, você pode clicar no sinal de adição. Quando você clica no sinal de adição, você pode adicionar páginas, coleções e muito mais. O que faremos é adicionar um portfólio para clicar em Portfólio. Aqui estão alguns modelos de portfólio pré-fabricados que você pode escolher. Vamos adicionar este portfólio também. Vou apenas renomeá-lo para portfólio e aqui você tem todos os projetos. Em Projeto um, vamos clicar em Editar e podemos dizer que esta é uma coleção sobre algo. Então podemos adicionar nossas próprias imagens. Exclua essas imagens na galeria e agora podemos clicar em Pesquisar Imagens e aqui você pode adicionar imagens de Unsplash, que é um ótimo site para imagens livres de royalties. Se você quiser usá-los, provavelmente você quer usar suas próprias imagens enquanto você está criando seu próprio site de portfólio. Vamos adicionar esta imagem e vamos adicionar mais algumas imagens. Ok, então três imagens podem ser suficientes aqui. Aperte Salvar. Agora clique nos pequenos três pontos nas configurações do Projeto um e remova a imagem em Geral e adicione uma imagem que você deseja usar como imagem do carro. Você também pode alterar o título, por exemplo, gatos e cães e a escória URL. Você não precisa mudar nada com SEO ou a imagem social por enquanto. Basta clicar em Salvar e então podemos voltar para a nossa página de portfólio e lá você tem o seu portfólio. Vou apenas ir em frente e criar mais alguns projetos e acelerar isso um pouco para você. Projeto dois, esta página parece um pouco diferente, então eu vou apenas clicar no pequeno símbolo de edição e mudar a imagem de fundo aqui. Quando você tem sua imagem pode mudar qual parte da sua imagem é visualizada ajustando este pequeno círculo. Você pode ajustar a altura da seção. Você pode adicionar alguns textos e, em seguida, adicionar algumas imagens. Quando você carregar as imagens, você pode clicar em Fechar. Você também pode ajustar o tipo de galeria nessas páginas como desejar e todas as outras configurações. Certo, então talvez algo assim. Pressione Salvar, aperte o pequeno símbolo de configurações no Projeto dois e adicione uma nova imagem. Pode alterar o título e a escória URL e clicar em Salvar. Volte para a página do seu portfólio e vamos ver como isso parece. Se você for editar na página do portfólio e no pequeno símbolo de edição, poderá alterar quantas colunas deseja mostrar. Talvez três, e que tipo de layout você quer. Você pode experimentar todas essas configurações. Vamos adicionar um pouco de espaçamento e torná-los quadrados e talvez eu queira quatro colunas. Ok, clique em Salvar, como você pode ver aqui, você pode criar a página do portfólio que parece a mesma da nossa página de galeria regular na página inicial ou onde você quiser em seu site. A diferença entre a página do portfólio e a página regular com a galeria é que na página do portfólio, você poderá clicar nesses projetos e entrar em outra página onde você obtém mais informações sobre o projeto. Dependendo da área criativa com que você trabalha e do tipo de produtos com que você trabalha, esta pode ser uma solução muito boa para você ou você pode ir com a versão mais simples que é apenas a página inicial da galeria. Por enquanto, eu vou apenas arrastar para baixo a página portfólio sob não ligado e para o resto desta classe, vamos usar esta página padrão como a página inicial onde você vai obter imagens de caixa de luz. Mas eu só queria mostrar a vocês como criar essas páginas de portfólio porque para alguns de vocês, isso pode ser uma maneira melhor de fazer sua página inicial e para alguns de vocês, pode ser muita informação tanto para aprender você não ter todas essas informações para colocar em seu portfólio. 11. Página: quem somos: Ok, então vamos criar a página sobre. Você já tem cerca de página no modelo. Vamos clicar nesse, e podemos clicar nas pequenas configurações montadas para ver como tudo parece. Isso parece bom. Vamos ver o que queremos fazer com esta página. Então, basicamente, o que você quer adicionar aqui é uma foto de si mesmo, e algumas informações sobre você. O que você faz? O que você pode oferecer aos clientes, e talvez você por que você está fazendo o que você está fazendo. Então vamos apertar o botão de edição e ver como queremos mudar isso. Primeiro, vamos editar a imagem. Clique no pequeno símbolo de edição, exclua a imagem e carregue uma nova imagem. Guardei um retrato meu que usarei como exemplo aqui na aula. Aí você tem a imagem. Você pode clicar no editor de imagens se quiser alterar o tamanho da imagem ou se quiser ajustá-la de alguma forma. Então você pode mudar tudo de saturação, para tamanho e você pode adicionar filtro e tudo isso. Vamos apenas mudar o tamanho desta imagem de retrato para talvez 3:2, provavelmente ficará bem e pressione salvar para fazer as alterações. Quando você receber a pequena caixa de opções. Então você tem certeza de que deseja fazer essas alterações permanentes, basta pressionar Salvar. Caso Alice possa se divertir, e então podemos mudar o design da imagem se quisermos. Você pode clicar ao redor e ver qual deles você deseja. Eu vou para o original. Você pode escolher se deseja alguma animação, como colidir ou focar em. Foco em parece bom. Então não se importe com as cores e as fontes neste momento. Mudaremos tudo isso mais tarde. Por enquanto vou escrever um pouco sobre mim. Eu posso mudar o título para, talvez título 2 e talvez eu queira usar o parágrafo 1. Então, quando escreveu um pouco sobre si mesmo, isso é bom por enquanto. Vamos ajustar todos os estilos de design aqui, a cor e as fontes e tudo mais tarde. Salve sua página sobre. 12. Página: contato: Vamos seguir em frente com a página de contato. Isso também está incluído nos modelos originais. Clique na página de contato e aqui podemos apenas adicionar nossas próprias informações. Vamos clicar em Editar e você pode apenas escrever algo sobre por que o visitante de sua página gostaria de entrar em contato com você. Aqui temos uma pequena forma que é adicionado. Então, se você clicar no botão de edição, você verá um formulário. Basicamente, você pode adicionar seu próprio formulário se você clicar no sinal de soltar e rolar para baixo até o formulário. A única diferença é que este formulário é visualizado, e se você clicar em Ativar Modo Lightbox, você receberá uma pequena caixa em vez disso que abrirá o formulário. Vamos apenas descartar essas alterações e clicar no pequeno símbolo de exclusão e ajustar o formulário que já está no site. O nome do formulário pode ser e-mail, seu nome e aqui você pode adicionar campos de formulário e você pode editá-los. Então você provavelmente quer um nome, um e-mail, uma linha de assunto é bom e uma mensagem. Você pode adicionar uma descrição e adicionar mais campos de formulário. Então basicamente um formulário de contato, isso é tudo que você precisa. Você também pode adicionar uma caixa de site se quiser que o visitante escreva em seus sites, caixas de seleção, se você quiser fazer perguntas e um monte de coisas diferentes que você pode explorar por si mesmo. Você pode escolher onde deseja que o armazenamento esteja. Por exemplo, você pode conectá-lo ao Mailchimp, Zapier ou ao Google Drive. A coisa normal para conectá-lo é o seu endereço de e-mail. Se você conectá-lo ao seu endereço de e-mail, você receberá um e-mail assim que alguém preencher seu formulário. Na seção avançada, você pode escolher o nome que deseja que o botão seja nomeado, como deseja que o botão seja alinhado e se deseja enviar o visitante para outra página quando ele tiver preenchido o formulário. Você também pode adicionar uma mensagem pós-envio, que mostrará quando alguém preencheu seu formulário e isso é tudo o que há para isso. Então pressione aplicar, e para experimentar isso, você precisa pressionar Salvar e então podemos ir para a exibição em tela cheia e clicar no pequeno botão e você terá o seu formulário. Então, aqui, o visitante pode assinar seu nome, endereço de e-mail, assunto e uma mensagem e enviar. Vamos editar as outras coisas nesta página. Você pode não ter dúvidas de imprensa se este é o seu primeiro site. Então vamos digitar seu endereço de e-mail, e aqui vai um pequeno truque. Se você selecionar seu endereço de e-mail e clicar no pequeno símbolo de link, você pode clicar no pequeno símbolo de configurações, clicar em e-mail e digitar seu e-mail, e isso fará com que este texto seja vinculado ao e-mail para: hello@mayerfaber.com. Então, quando alguém clica neste link, seu software de e-mail será aberto automaticamente e ele pode enviar um e-mail para você. Aqui estão alguns links sociais que podem ser bons de ter aqui. Você pode projetá-los. Talvez queiras torná-las maiores. Você pode até projetar o estilo deles. Vamos apenas fazer o normal. Talvez você queira adicionar algum espaço entre o texto e os links sociais. Nesse caso, clique no pequeno símbolo de queda e espaço lá, e lá você tem algum espaço. Nesta página de contato, eles têm imagem. Vamos adicionar uma imagem diferente, e desta vez, podemos tentar usar as imagens unsplash. Então, clique em Pesquisar Imagens e Grátis, e talvez você queira algo como um telefone. Digite o telefone e role para baixo e veja se você encontrar algo que você gosta e clique em Adicionar imagem. Você pode ajustar onde deseja que o ponto de foco esteja na sua imagem e isso parece muito bom. Então, neste momento, não se importe com as fontes, as cores ou a aparência do botão. Vamos ajustar isso mais tarde na aula. Então, basta clicar em Salvar, clicar na pré-visualização completa e aqui você tem sua página de contato. 13. Página: blog: Vamos criar um blog em sua página, e este modelo já tem um blog, então vamos apenas clicar nele. Você vai entrar para essas opções de blog. Estas são as postagens de blog que você pode editar, e você pode salvar rascunhos, você pode salvar para revisar e agendar suas postagens de blog. Vamos começar com a edição desta página de resumo do blog, então clique em “Editar” e clique na pequena ferramenta de edição. Aqui você pode escolher. Este é o blog de coluna única, onde você tem uma coluna e o blog inteiro não está sendo exibido. Você pode selecionar todos os tipos de configurações aqui, se você quiser que uma publicação completa seja exibida, ou se você quiser apenas o trecho e o título como está aqui. Vamos experimentar outros layouts. Lado a lado, parece assim. Blog de alvenaria, parece que, blog grade básica ou virando blog lado a lado. Eu acho que eu quero ter o blog básico grade, que basicamente significa que todos os posts do blog serão mostrados aqui. Você pode selecionar quantas colunas deseja. Vamos escolher três colunas se você quiser completo ou inserido, e quanto espaçamento e todas essas configurações. Você pode escolher seus posicionamentos de imagem. A proporção, vamos quatro quadrados. Alinhamento de texto, se você quiser mostrar os trechos ou não, Leia Mais link, e há um monte de configurações que você pode explorar aqui, então vamos apenas para este layout, clique em “Salvar”. Se clicarmos nas postagens do blog, podemos simplesmente excluir todas elas e adicionar nossas próprias postagens de blog. Para adicionar postagens, você clica no pequeno sinal de mais, adiciona postagem, e aqui é como construir outra página para que você possa inserir um título de postagem, por exemplo, Novo Padrão, e você pode adicionar o que quiser para postar no blog. Vamos adicionar uma imagem. Vou clicar em “Pesquisar imagem” e adicionar um que importamos. Você pode escolher o design e a animação, mas eu vou apenas clicar em “Aplicar” e talvez eu queira adicionar outra imagem, e então você pode clicar em “Salvar”, “Publicar” ou “Agendar”. Vamos tentar o que acontece quando você aperta “Programação”. Você pode agendar o post para outro dia e hora. Você pode apenas salvar o post, que tornará um rascunho, e você pode publicar o post. Basta clicar em “Concluído”, e lá você tem um novo post. Vamos adicionar mais duas postagens. Agora, vamos acelerar isso para você um pouco. Em suas postagens de blog, você pode, como eu mencionei, adicionar o que quiser, então vamos adicionar uma citação aqui. Faça as configurações da cotação, e você pode até adicionar uma galeria, um botão e tudo o que você deseja adicionar à sua postagem de blog. Agora nós adicionamos três postagens, então ele se parece com o modelo. Para editar ainda mais as postagens, vá para Editar na postagem do blog e, no canto superior direito, vá para o símbolo de configurações. Aqui você tem mais configurações para fazer em sua postagem, então você pode realmente criar mais de suas postagens de blog aqui. Você pode adicionar categorias, se desejar, e tags, e decidir se deseja ter comentários ativados ou desativados, e você tem mais opções. O que é importante aqui é adicionar uma imagem em miniatura, clicar em “Carregar” uma imagem, e eu vou apenas adicionar a mesma imagem que eu tinha no post. Aqui você pode escrever um trecho, que informa aos seus espectadores um pouco sobre sua postagem no blog. Você pode vincular o título do post ao URL de origem se quiser vinculá-lo a outro lugar, você pode escolher o autor. Você não precisa fazer nada com SEO se você não quiser. Esta é a pré-visualização social onde você pode enviar uma imagem se quiser, e você pode compartilhá-la se você tiver conectado sua conta, por exemplo, ao seu Pinterest, você pode compartilhar sua postagem no blog no Pinterest. Você pode digitar sua localização, mas o mais importante é adicionar uma imagem em miniatura, clicar em “Aplicar” e clicar em “Salvar”. Vamos voltar e fazer o mesmo com os outros posts. Clique no pequeno símbolo de configurações, “Opções”, “Carregar” uma imagem e escrever um pequeno trecho. Volte e faça o mesmo com a última postagem do blog. Clique no símbolo de configurações, “Opções” e eu vou apenas fazer o upload do padrão. Clique em “Aplicar” e clique em “Salvar”. Agora, podemos voltar para nossa página do blog e ver como isso parece. Temos três posts de blog visualizando com o título e o trecho e ler mais link. Se clicarmos no link “Leia mais”, você irá para a postagem do blog. Esse é o básico da criação da postagem do blog. Vamos para as configurações do blog. Vá para as configurações de casa e blogs. Aqui estão apenas algumas configurações simples que você pode alterar. Você pode criar a estrutura de URL padrão para postagens de blog, e se você clicar no pequeno ponto de interrogação, você pode ver o que isso significa. A porcentagem e T significam o título da sua postagem, que é as configurações normais. Vá para configurações comuns, e aqui você pode decidir se deseja ativar comentários e se deseja exigir aprovação e todas essas coisas, além de algumas configurações para suas postagens de blog. Você realmente não precisa se importar com essas configurações por enquanto, mas você pode entrar e experimentar com elas mais adiante. Agora criamos nosso blog que se parece com isso, então vamos passar para a próxima lição onde começaremos a mudar os estilos de design do nosso site. 14. Design: fontes: Até agora, na sala de aula, colocamos o conteúdo do nosso site. Nós criamos todas essas páginas. Eles são Casa, Blog, Sobre e Contato. Então temos nosso site de portfólio extra que acabei criar para mostrar como você pode fazer isso. Mas estas são as nossas quatro páginas principais. Esta é a primeira lição onde falaremos sobre os estilos de design. Nesta lição, falaremos sobre as fontes. Vamos clicar em uma página onde temos alguns textos. A página Sobre, por exemplo, voltar para casa, no menu, clique no sinal e clique em fontes. Este é um recurso muito bom na versão 7.1 do Squarespace, que eles já têm combinações de fontes para você, o que torna todo o processo muito rápido para escolher fontes em seu site. Você também pode, é claro, entrar e ajustar e ajustar certas fontes como desejar. Mas vamos mudar a fonte e ver o que acontece. Você pode escolher sans-serif, serif ou misturado. Vamos apenas clicar nesta fonte Poppins e lá você pode ver as diferentes fontes é alterado e até mesmo a navegação é alterada para outra fonte. Este é provavelmente algum bug que o torna um quadrado preto, mas a fonte é alterada. Se eu pressionar “Salvar”, acho que a fonte será alterada. Sim, então não se importe com esse pequeno inseto. Mas vamos experimentar as fontes serif ou a fonte mista. Para este site, vamos para algo clássico. Eu escolherei esse Futura. Aqui você pode alterar o tamanho base se você quiser ter um tamanho menor. Vamos para 14. Se você clicar no pequeno símbolo de configurações, você pode entrar e alterar certas fontes e ajustá-las. Talvez queiras ter mais gordura. Basta clicar em “Salvar” e talvez nos livremos desse inseto. Você pode até mudar os estilos de fonte aqui para outra fonte se quiser e você pode entrar e alterar o peso, o estilo, a altura da linha, o espaçamento entre letras, a transformação do texto. Parece que eu apertei salvar, então você verá o texto e o bug parece desaparecer. Vamos voltar aqui. Você pode alterar o tamanho dos títulos diferentes e clicar em “Salvar”. Agora vamos voltar e entrar nos parágrafos. Essa é a fonte Poppins. Você pode alterar o peso disso, bem como o estilo e a altura da linha, os diferentes parágrafos, o tamanho deles e todas as configurações. Você pode experimentar com isso sozinho. Se você não tem tanto conhecimento sobre tipografia, eu escolheria as combinações de fontes padrão que o Squarespace já fez para você. Basicamente, você pode fazer todas as alterações que quiser, para torná-lo o mais fácil possível. Eu iria apenas para uma combinação de fontes pré-fabricada que o Squarespace já montou. É assim que você muda a fonte do seu conjunto. 15. Design: cores: Vamos mudar as cores do seu site. No menu de design, clique nas cores e aqui podemos alterar a paleta de cores e temas de seção. Clique em “Editar” na palete de cores e você tem pellets de designer que são pré-fabricados, que é muito bom para que você não precisa pensar muito sobre a paleta de cores. Se você usar as paletas pré-fabricadas do designer, Vamos para este rosa. Você também pode, obter um grânulos de uma imagem. Você pode arrastar e soltar de uma cor para começar com uma cor e escolher qual paleta de cores você deseja ir a partir daí e cores personalizadas. Mesmo que você tenha uma paleta de designer, vamos nessa e clique em Editar cores personalizadas. Você pode entrar e mudar as cores para uma paleta mais personalizada que combina com você. O segundo é entrar e fazer isso um pouco mais rosa, por exemplo. Ok, então talvez algo assim e se você clicar em temas de seção, você pode ir em frente e editar todos os outros temas pré-criados em seu site. Aqui você pode ver quais os temas selecionados nesta página. É branco mínimo aqui em cima e branco mínimo neste conteúdo. Vamos para o mínimo branco e ver o que podemos mudar. Esta é uma colagem de imagens. Você pode alterar todas essas configurações no tema de seção mínima branca. Eu só vou rolar para baixo até que eu encontrei o bloco de imagem que diz colagem de bloco de imagem e eu posso ver que o fundo do cartão está definido para esta cor rosa claro. Se eu clicar nisso, eu posso mudar para outra cor na minha paleta ou ir para cor personalizada se eu quiser fazer isso. Eu gosto dos rosa claro, eu vou apenas para isso. Há tantas opções aqui nos temas da seção. Eu não vou passar por todos eles, mas você pode apenas clicar em algo que você quer mudar. Você pode ver que tipo de bloco é e como você pode mudar isso. Por exemplo, aqui você pode ver o cabeçalho e esta é a colagem de blocos de imagem. Estes são os links sociais, que você pode mudar a cor se desejar. Eu vou apenas ir em frente e clique em cancelar aqui porque eu não fiz nenhuma alteração e se você acha que isso é apenas muito para aprender e para muitas configurações, eu simplesmente ignoraria os temas da seção e entrar e alterá-los e apenas mudar a paleta de cores para algo que você gosta. 16. Design: botões: Nesta lição vou falar sobre botões. Como nós não temos nenhum botão para a nossa página realmente, eu não acho que eu iria apenas adicionar um botão. Então, clique em “Editar” na página Sobre. Vou apenas adicionar um botão abaixo deste onde diz Contacte-me. Agora vou adicionar um endereço de e-mail e vamos deixar esse botão grande. Talvez eu queira para a direita ou para a esquerda, vamos colocá-lo para a esquerda. Aperte “Salvar” lá temos um botão que podemos mudar o estilo de design. No menu Estilo Design, clique em “Botões” e você terá essas diferentes opções delineadas ou sólidas, quadradas arredondadas ou pílula. Vamos tomar uma pílula e o preenchimento é o tamanho do botão em torno do texto. Vamos para algo assim, 1.5 RAM, aperte “Salvar”. Para estilizar o botão ainda mais, voltamos para Design, e vamos primeiro para Fontes e você pode clicar no “Pequeno símbolo de configuração” no seu pacote de fontes e clicar em “Botões”. Aqui você pode fazer algumas configurações, vamos fazer as camadas maiúsculas do botão. Talvez queiras mais espaçamento entre letras, assim, talvez pesos mais altos. Você pode alterar o tamanho dos botões diferentes para que eu possa mudar o botão grande, que é o que eu escolhi aqui. O botão médio Eu não tenho isso nesta página e um pequeno botão. Pressione “Salvar” voltar, voltar novamente para o painel de design e, em seguida, você pode alterar as cores do botão. Vá em frente e clique em “Tema da seção” Este é o tema branco mínimo nesta página. Você pode clicar no “Botão” e, em seguida, você pode alterar o fundo do botão se você quiser outra cor. Talvez queira a cor da sua paleta. Eu vou apenas para preto e você pode mudar a cor do texto. Agora você sabe como estilizar seus botões, então vamos passar para a próxima lição. 17. Design: animação: Vamos conferir o estilo de design como animações chamadas, e esta é uma lição muito rápida, porque realmente não há muitas configurações para fazer aqui. Se você se lembrar, quando criamos o conteúdo diferente em nossas páginas, poderíamos ajustar a animação em determinadas seções. Por exemplo, aqui, role para baixo e você pode alterá-lo se desejar; dimensionamento, desvanecimento, sem animação ou padrão do site. Vamos usar o padrão do site e clicar em “Salvar”. Para alterar a animação em todo o seu site, você clica em “Animações” no menu de design e, em seguida, você pode escolher um desses estilos, nenhum, fade, escala slide, clipe. Eu acho que é escala parece bom e você pode decidir a velocidade, lento, médio ou rápido. Médio pode ser bom e salvar. Isso significa que qual página que clicaria terá essa animação se não definirmos uma determinada animação para esse bloco de conteúdo. Essa foi uma pequena lição sobre animação. Eu sinto que ter alguma animação em seu site faz com que pareça realmente profissional. Você pode facilmente alterá-lo aqui, então você pode apenas experimentá-lo e ver o que você gosta. 18. Design: navegação: Agora vamos em frente e ajustar a navegação do seu site. Primeiro, podemos olhar para as fontes dentro disso nas lições anteriores. Quando selecionamos fontes para todo o seu site, você entra no estilo de design de fontes e, em seguida, as configurações. Em seguida, você pode apenas clicar no topo aqui e você vai obter as configurações avançadas, que é o título do site, navegação do site, e o botão de cabeçalho. Vamos em frente e dar uma olhada no Título do Site, modo que é este. Você pode optar por ter um título de site que você digita, ou você pode optar por ter seu logotipo. Vou mostrar-lhe como adicionar um logotipo na próxima lição, mas por enquanto, vamos apenas alterar a fonte deste Título do Site. Podemos experimentar as fontes Poppins, que parece muito bom, que parece muito bom, ou você pode navegar em Todas as fontes e clicar em Salvar, Voltar, e aqui você pode alterar todos os tipos de configurações como o Peso e o Estilo, Altura da Linha, Espaçamento de Letra e tudo isso. Clique em Salvar e, em seguida, Voltar. Em seguida, você pode entrar e alterar a Navegação do Site. As configurações pré-feitas é que você tem o Parágrafo como o estilo. Mas você também pode entrar e mudar isso. Você pode ir em frente e alterá-lo para outra fonte. Vamos pegar Poppins para isso e voltar, ou você pode voltar e escolher Parágrafo. Você pode alterar o tamanho da Navegação. Se você queria um pouco maior, 1.3 parece bom, ou você pode mudar o tamanho para Parágrafo um, Parágrafo dois, Parágrafo três. Aperte Salvar e Voltar. Não temos nenhum Botão de Cabeçalho no momento, mas se tivéssemos um, podemos alterar as configurações aqui. Vamos clicar em Voltar e mostrarei como alterar o layout do cabeçalho. Clique em Editar uma página, Editar cabeçalho do site e, em seguida, layout do cabeçalho. Aqui você pode mudar onde deseja que seu Menu e Título do Site apareçam. Vamos tentar ter o Título do meu Site no meio e Título do Site e Logotipo. Vamos apenas passar por Título do Site por enquanto e eu vou mostrar-lhe como adicionar um logotipo na próxima lição. Elementos que você pode escolher se você quer ter um botão, Links Sociais, se você quiser que eles apareçam em seu Menu, que Tamanho do Ícone Social. Se você tem uma loja, você pode adicionar um carrinho. Vamos clicar em Voltar e Cores. Você pode usar um fundo transparente, ou você pode optar por ter uma cor do seu Menu. Vamos para um fundo transparente. Aperte Estilo e aqui você pode selecionar quanto de preenchimento você quer no seu Menu, quanto espaçamento você quer entre os Elementos e quanto de espaçamento você quer com os Links. Se você quiser que um Menu tenha uma posição fixa para que quando você rolar para baixo o Menu esteja sempre lá, ou se você quiser que ele esteja apenas no topo da página, vamos usar uma posição fixa. Aqui você pode escolher se você deseja corrigir Estilo de Cabeçalho para ser básico ou rolar para trás. Vamos escolher o Basic. Você pode escolher se deseja ter uma largura total ou inserida. Volte e eu acho que vou mudar o layout do cabeçalho para o que eu tinha antes. Porque é melhor assim. Em seguida, basta clicar em “Salvar”. Isso é tudo o que há para mudar o estilo de design da Navegação. 19. Design: adicione um logo: Nesta lição, adicionaremos um logotipo ao seu site em vez do título do site. Ou seja, se você já tiver um logotipo, você pode carregá-lo e adicioná-lo ao seu site. Se você não tem um logotipo, você pode simplesmente usar uma fonte como eu mostrei na lição anterior e adicionar o nome da sua marca ao seu site. Mas vamos adicionar um logotipo. Clique em “Editar” e “Editar cabeçalho do site”, título e logotipo do site. Aqui diz que o logotipo substitui o título do site em todas as páginas. Clique no pequeno botão “Upload”. Guardei o meu logótipo como um P&G. Se quiser ter a certeza de que tem um fundo transparente no seu logótipo, guarde-o como um P&G. Clique para carregar o logótipo. Aqui você pode escolher a Altura do Logotipo, que basicamente significa o tamanho do seu logotipo, e a Altura Máxima do Logotipo Móvel. Vamos apenas experimentar e ir para a visualização móvel e para a área de trabalho novamente. Podemos voltar para a altura do logotipo móvel e aumentar o tamanho para 50 pixels e ver se isso fez alguma alteração. Ok, isso fica melhor na visão móvel. Isso é tudo o que há para adicionar um logotipo ao seu site. Então aperte “Salvar”. Não importa em que página você vai clicar agora, você terá seu logotipo em cima do seu site. 20. Design: rodapé: Nesta lição, vou apenas mostrar-lhe como mudar o rodapé do seu site. O rodapé é o espaço inferior do seu site. Clique em “Editar” e aqui você tem o rodapé de edição na parte inferior da sua página. Quando você alterar o rodapé, você mudará o rodapé em todas as suas páginas, em todo o seu site. Talvez você queira ter feito com base quadrada lá ou talvez você não, então você pode apenas remover essa. Você pode ajustar os links sociais, talvez você os queira maiores e você pode escrever seu nome aqui, ou talvez você queira até adicionar seu logotipo. Se você quiser adicionar o seu logotipo, você pode clicar no pequeno símbolo gotas Adicionar imagem, e procurar por imagem importada e adicionar o logotipo que acabamos de carregar. Nós não queremos nenhuma legenda para o logotipo e basta clicar em “Aplicar”. Se você quiser que a imagem seja menor, adicione um espaçador clicando no símbolo “Adicionar espaçador” e, em seguida, você pode simplesmente adicionar mais espaço ao lado do logotipo. Vamos remover a caixa de texto, e aqui você tem seu logotipo e você tem seus links sociais. Se você quer um menu no rodapé também, eu não acho que é necessário quando você tem este pequeno site com apenas algumas páginas. Mas se você quiser ter isso, você pode adicionar um link de conteúdo, que significa que você vincula suas páginas, ou você pode adicionar uma caixa de texto e escrever suas páginas, e apenas remover os links de conteúdo e então podemos torná-los alinhados à direita. Outro truque, se você quiser ter apenas uma linha para baixo é segurar o turno e clicar em “Enter” para obter uma distância mais próxima. Em seguida, podemos adicionar links para este texto, então clique no texto, clique em “Link”, e você pode adicionar uma página, a página inicial, e clique em “Salvar”. Faça o mesmo no blog, página, blog e clique em “Salvar”. Selecione o texto acima, clique em “Adicionar link, Página e Sobre”. O mesmo com contato, clique em “Link, Página e Contato”. Esqueci de clicar em aplicar naqueles para que eles realmente não obter links, então vamos fazê-lo novamente. Certifique-se de clicar em “Aplicar”, clicar em “Concluído” e salvar. Agora você fez um rodapé que aparece em todas as suas páginas. Se você quiser que o rodapé esteja em uma cor diferente, clique em “Editar rodapé” e clique no pequeno símbolo “Editar”. Você pode ir para o fundo se você quiser ter alguma imagem ou algo como um plano de fundo. Mas, caso contrário, você pode escolher a cor e adicionar uma cor ao seu rodapé. Vamos experimentar o mínimo de luz e ver como isso parece. Vamos para o mínimo branco. No formato, você pode selecionar a altura da seção ou entrar e ajustá-la você mesmo. A largura do conteúdo se você quiser tê-lo no meio da sua página, e também o alinhamento. Mas eu acho que isso parece bom, então aperte “Salvar”, e aqui você tem seu rodapé. Agora, você pode ver ao rolar para baixo que o menu de navegação está rolando para baixo com sua página enquanto você rola para baixo. 21. Design: blocos de imagem: Então, o último estilo de design que eu quero mostrar a vocês como ajustar, que é o básico do que você precisa saber para criar um site de portfólio básico são os blocos de imagem. Então vá para “Design” e “Blocos de imagem”. Este é um bloco de imagem, é uma colagem de blocos de imagem, e há mais alguns blocos de imagem. Então vamos apenas adicionar blocos de imagem a esta página para ver as alterações que podemos fazer. Clique no pequeno símbolo de gota e imagem e vamos apenas adicionar uma imagem e clique em “Design” e estes são os blocos de imagem. Então é cartaz, cartão, sobreposição, colagem e pilha. Então vamos para o cartão, clique em “Aplicar”, agora nós apenas escrevemos um título e uma legenda. Vou mudar o título e mudar o subtítulo para parágrafos e títulos diferentes e apertar “Concluído” e salvar. Assim, nos blocos de imagem, você pode alterar algumas configurações. Este é o cartão de bloqueio de imagem, se você clicar nesse bloco de imagem, o cartão de bloqueio de imagem será exibido. Você pode escolher se deseja que a posição do conteúdo fique no centro lá em cima ou em baixo. Vamos apenas para o centro, o alinhamento do texto, vamos para a largura da imagem esquerda, separação da imagem do texto e separação do título um do outro, o título e o subtítulo. Então essas foram as configurações que você poderia fazer para o cartão de bloqueio de imagem. Então vamos em frente e ver o que você pode fazer na colagem de blocos de imagem, e essa é a posição do conteúdo. Talvez você queira que ele seja centralizado e tenha a largura da imagem de alinhamento, é 70% agora. Então eu gosto que eles se sobreponham, então 70% parece bom. A largura do conteúdo é a largura do texto, vamos para 50 há deslocamento de conteúdo deslocamento e, em seguida, todas e, em seguida, todasessas configurações que você pode experimentar com. Vamos clicar em “Salvar” e “Design” e depois voltar. Carregue em “Editar” e vou apagar este novo bloco de imagem que criei só para mostrar a vocês. Aqui criamos algumas novas configurações para este bloco de imagem que o conteúdo do texto está no centro do conteúdo da imagem. Aperte “Salvar”. Agora, você sabe um pouco como fazer algumas configurações para os diferentes blocos de imagem. 22. Ajustes finais: Ok, então agora nós criamos todo o nosso site, todas as páginas e fizemos todas as suas mudanças de estilo de design. Vamos ver o site inteiro e ver se queremos fazer algumas mudanças. Vamos clicar na exibição de tela cheia e eu vou rolar pelas minhas páginas para ver se eu quero fazer alterações. Esta primeira página parece boa, embora eu não goste da fonte da navegação, então vamos mudar isso imediatamente. Clique em “Fonte” e em “Design”. Clique em “Configurações” e clique em “Fonte de navegação” e aqui você pode alterar qual deles usar. Vamos experimentar Futura em vez disso. Gosto muito mais disso. Clique em “Salvar” e talvez você queira ter mais alguns pesos para 400. Vamos ver se queremos ter em maiúsculas. Dessa forma, queremos ter mais espaçamento entre as letras, talvez. Eu acho que eu gosto da minúscula melhor e remover o espaçamento das letras e talvez aumentar o tamanho um pouco. Ok, então algo assim. Isso parece muito melhor para mim. Vamos voltar e ver tudo de novo. Na verdade, eu não acho que é muito lógico ter o blog primeiro e sobre esse contato. Também posso querer adicionar a página inicial. Esta página para a navegação principal. No momento em que você está em outra página e clicar no logotipo, você vai para casa, o que é padrão para todos os sites. Mas você também pode optar por tê-lo em sua navegação principal. Isso faz mais sentido para mim neste site de portfólio básico, onde você só tem essas quatro páginas diferentes. No menu de navegação principal, você também pode clicar e arrastar para selecionar onde deseja que as páginas apareçam no menu e clicar na exibição de tela cheia novamente. Clique em “Sobre a página" e role para baixo. Aquele parece bom. O blog parece bom também. O contato, talvez eu queira mudar este fundo porque eu realmente não posso ver essa fonte naquele. Caso contrário, acho que fica bem. Saia do modo de tela cheia. Clique em “Fonte” e na parte inferior Botão Texto e estilo. Talvez funcione se eu aumentar os lados do parágrafo. Não, isso não funcionou. Vamos em frente e personalizar o tamanho para um pouco maior e isso parece melhor para mim. Talvez queiramos personalizar o peso também. Isso parece muito melhor para mim com o peso de 500 neste botão. Você pode simplesmente ir e voltar em seu site e certificar-se de que você está satisfeito com todas as configurações. Para mim, estou muito feliz com isso agora, volte para casa e percorra novamente. Se eu clicar nas imagens, obterei um modo de caixa de luz e poderei percorrer as imagens. Clique em “Sobre” e isso é um pouco sobre mim. O blog. Se eu entrar em um blog, como isso parece? Isso parece bom e uma página de contato. Ok, então eu estou realmente feliz com o que isso parece agora. Agora criamos todo o nosso site. 23. BÔNUS: adicione um ícone para o navegador: Eu acho que esta é uma pequena lição bônus sobre como adicionar um favicon ou um ícone de navegador, como eu acredito que é o novo nome para este pequeno ícone que é exibido no topo de sua página. Por exemplo, no meu site, eu tenho uma pequena flor como um favicon ou ícone do navegador. As configurações padrão do Squarespace é ter essa caixa preta e isso não parece tão bom. Você pode criar um favicon em qualquer tipo de software de design, você provavelmente poderia criá-lo em seu iPad ou no Illustrator, Photoshop, mesmo em Canvas se você usar isso. Mas como isso seria uma outra classe sobre como criar um favicon de todas essas maneiras diferentes, eu vou apenas passar por como realmente rapidamente criar um favicon on-line. Vou apenas fazer o Google favicon. Encontrei este site, favicon.io, onde você pode criar um favicon a partir de texto, um arquivo PNG para ICO, se você quiser esse formato e de um emoji. Vamos apenas criar um a partir do texto que é a maneira mais simples. Talvez eu queira ter um M e um F ou apenas um M, Maja Faber como meu favicon. Posso selecionar o fundo. Eu gosto de círculo e o tamanho da fonte um pouco menor para que ele vai vagar neste neste círculo, você pode mudar a fonte para qualquer tipo de fonte que você quiser. Vamos usar essa literalmente uma fonte. Eu acho que eu faria é usar um M em vez de um M e um F Ajustar o tamanho dele para talvez 70. A cor da fonte que eu quero luz e a cor de fundo pode ser, talvez rosa. Então eu apertei “Baixar”. Isso fará o download de um arquivo zip que eu abri. Aqui você tem todos os favicons diferentes que você pode carregar para o seu site. Vamos voltar ao nosso site do Squarespace, clicar em “Início”, projetar e ícone do navegador e adicionar favicon. Aqui diz, usando o campo abaixo, você pode carregar um ícone de URL do navegador para uso com seu site. Este ícone pode estar no formato PNG ou ICO e será redimensionado pelo navegador para exibição na barra de URL. Note, ou seja, não suporta o formato PNG. Talvez devêssemos escolher o formato ICO, basta clicar e arrastar isso, clicar em “Salvar” e ver como isso parece. Talvez você precise recarregar o site. Lá você tem o favicon ICO. Na verdade, eu sinto que isso não parece tão bom. Eu vou voltar e nós vamos realmente selecionar o favicon PNG de qualquer maneira. Tenho isso no meu site e sinto que funciona muito bem. Eu vou fazer é ir em frente e excluir esse e arrastar o PNG aperte “Salvar”, e atualizar o site. Lá você tem seu favicon ou ícone do navegador. Como é mostrado tão pequeno, você realmente não pode ver o que é, mas é melhor que seja um pouco de cor em vez de apenas uma caixa preta. 24. BÔNUS: página protegida por senha: Nesta lição, mostrarei como adicionar uma página protegida por senha. Você pode ter determinado conteúdo que você deseja proteger por senha. Para mim, esse é o meu catálogo com as minhas obras de arte, os meus padrões, que só mostro a potenciais clientes. Então eu tenho um catálogo com mais de 200 padrões que está no meu site, mas protegido com uma senha. Vamos apenas criar uma duplicata da página inicial, onde já temos uma galeria. Clique nas configurações mais recentes e duplique a página e vamos nomear este catálogo. Então, parece exatamente como a página inicial por enquanto. Eu coloquei sob as páginas não vinculadas e eu vou apenas editar esta página, excluir o Instagram e eu posso apenas adicionar mais algumas imagens para ter certeza de que nós manter essas páginas separadas. Se você está criando um catálogo com a senha como eu tenho, há realmente nenhum padrão, tanto quanto eu sei, como é suposto parecer. Minha sugestão e minhas dicas é mantê-lo o mais simples possível , porque o que você quer com este catálogo é vender sua obra de arte, então você só quer que um visitante ou o cliente potencial percorra sua página para poder visualizar seu obras de arte. No meu catálogo, não tenho imagens ou maquetes, então posso removê-las. Vamos adicionar mais alguns padrões. Vou apertar “Fechar” e podemos editar o tipo de galeria, tornando-o talvez uma grade simples com o mesmo tamanho das imagens. Então talvez algo assim. Se você estiver criando um catálogo, você também pode escolher talvez classificar seus padrões ou trabalhos artísticos em coleções ou em que tipo de padrões eles são ou em que você deseja classificar seu catálogo. Mas esta lição é sobre como criar uma página protegida por senha. Como você escolhe projetar a página do seu catálogo em potencial depende totalmente de você. Então aperte “Salvar” e agora temos nosso catálogo aqui. Podemos apenas ter certeza de que temos os slugs URL corretos, então clique no catálogo “Configurações” e URLs slug. Aqui podemos optar por ter uma senha em nossa página. Vamos usar o catálogo de senhas e clicar em “Salvar”. Quando você vê um pequeno símbolo de bloqueio, você sabe que essa página é protegida por senha. Para ver como ele fica quando você tenta acessar este site, você vai para a tela de design e bloqueio. Você pode ter senhas diferentes para páginas diferentes, mas só pode ter um layout na tela de bloqueio. Por exemplo, escolha algo assim, como um layout, depois volte para a tela de bloqueio e aqui você pode alterar a marca. Talvez você queira seu logotipo lá ou apenas seu nome e você pode escolher se deseja exibir um símbolo de bloqueio, então pressione “Salvar”, voltar e “Mídia”. Você pode clicar em “Nenhum”, se você não quiser uma imagem no plano de fundo e estilizar a cor do plano de fundo. Vamos pegar um rosa. Você pode alterar se quiser a borda da página. Que tipo de fechadura você quer. A cor do bloqueio, o estilo da senha. Isto é estilo? Qual fonte você deseja na caixa de senha? Vamos apenas escolher o mesmo que em nosso site e clique em “Salvar”. Então, você tem sua página protegida por senha. Esta é uma tela de bloqueio geral, então ela aparecerá em todas as páginas que você bloqueou com a senha. A diferença é que você pode usar uma senha diferente em todas as páginas. É assim que você cria uma página protegida por senha. 25. BÔNUS: crie novas páginas: Nesta lição, mostrarei como adicionar novas páginas ao seu modelo. Nesta classe estamos focados principalmente em usar o modelo que escolhemos. Porque eu sinto que se você é um iniciante Squarespace, é um bom começo para não complicar muito. Mas se quiser adicionar páginas, mostrarei como fazer isso. Como mencionei antes, você tem a navegação principal em Páginas não vinculadas. Se você adicionar uma página à navegação principal, ela aparecerá em sua navegação. Se você adicionar uma página a Não vinculada, não será possível encontrá-la na barra de navegação. Você pode encontrá-lo através de um link ou URL Slug. Você pode arrastar e soltar as páginas da navegação principal para Não vinculado. Realmente não importa onde você cria sua página. Vamos começar com como criar uma nova página. Se você é um iniciante no Squarespace, que eu estou supondo que você é se você estiver fazendo essa aula, eu acho que é mais fácil começar com um layout de página. Vamos clicar no layout da página. Aqui você tem todas as páginas que você pode usar como modelos. Temos as páginas gerais, compromissos sobre página, contato, serviços, galeria, equipe, comentários, menu, RSVP, FAQ, política de privacidade e termos de serviço. Vamos apenas para geral e ver que tipo de páginas temos que escolher a partir daqui. Vamos começar com este geral 2 e ver como isso parece. Quando você clica em um layout de página, você receberá o layout completo dessa página. Você pode, naturalmente, ajustá-lo como quiser. Se você quiser fazer isso, clique em Editar e, em seguida, vá para seções diferentes e ajuste-as. Você pode passar o mouse sobre, alterar a imagem, por exemplo, como fizemos nas lições anteriores. Você pode formatar esta seção com qualquer altura, é a altura da seção e a largura do conteúdo. Além disso, você pode alterar as cores se quiser um tema de seção diferente. Vamos apenas para o mínimo de luz para essa. Se você quiser adicionar uma seção ao seu layout, clique no sinal de adição e adicione uma seção. Vamos apenas adicionar esta lista. Você pode entrar e editar as seções como desejar. Altere a fonte, cabeçalho, um parágrafo para algo que você achar que parece bom. Vamos mudar essa imagem também e ver o que podemos fazer. Talvez a esta imagem. Como você pode ver, você tem um pouco de sobreposição nesta imagem, o que significa que ela não mostra suas cores verdadeiras. Tem uma sobreposição na imagem. Se você não quiser sobrepor, precisamos entrar no estilo de design, cores, temas de seção, e é por isso que é mínimo. Clique no seu bloco de imagem. Aqui, você pode alterar a sobreposição da imagem. Se você arrastar sua sobreposição de imagem para o lado transparente, você não obterá nenhuma sobreposição em suas imagens no bloco de imagem. Choque no tema de seção mínima branco. Aperte Salvar e voltar. Você também pode editar sua pintura adicionando blocos. Mostrei como adicionar seções clicando no sinal de adição. Se você clicar no pequeno símbolo de queda que aparece quando você passa o mouse sobre algo, poderá adicionar blocos. Clique no pequeno sinal de queda, e aqui você pode adicionar todos os blocos. Vamos apenas adicionar bloco de texto. Mude o alinhamento para centralizar e escreva algo aqui. Você pode mudar o estilo do parágrafo, talvez algo assim. Lá você adicionou um bloco em sua seção. Acertar feito, e salvar. Se você mover sua página para a seção não vinculada, ela não aparecerá no menu. Então vamos adicionar outra página. Você também pode começar com uma página em branco, é claro. Mas eu acho que um layout de página é bom se você é um iniciante. Vamos para uma página de revisão talvez e revisão 2, clique no modo de tela cheia para ver como isso parece. Talvez você queira adicionar alguma imagem ou algo aqui para torná-la um pouco mais interessante. Vamos apenas adicionar este. Vamos apenas adicionar uma imagem de Unsplash e aplicar. Talvez queira remover algo. Passe o mouse sobre o bloco e clique na lata de lixo. Aperte concluído e salve. Basicamente, você pode começar com o layout da página e adicionar blocos ao layout da página para personalizá-lo como desejar. Vamos arrastar isso para baixo também. E se você tiver uma loja fora de sua página web, como uma loja Etsy ou Society6 loja ou algo assim. Bem, então você pode adicionar um link. Você clica no pequeno sinal de mais e adiciona link. Digamos que é loja. Podemos adicionar nossa loja virtual favorita da empresa de design. Arraste isso para baixo para que o tenhamos no final da navegação. Então eu vou apenas clicar em Início tela cheia e tentar clicar em loja e ver o que acontece. Isso me levará a um link externo fora do site. A última coisa que eu queria mostrar a você sobre como adicionar páginas é como adicionar mais páginas sob um título na navegação. Clique na pasta. Vamos dar um nome de notícia. Arraste para baixo até o final da navegação e, em seguida, arraste as páginas para a pasta. Vamos adicionar esse e aquele, ir para casa. Agora, como você pode ver, você tem uma navegação que aparece embaixo da sua pasta. Se você passar o mouse sobre as notícias, você pode clicar nas páginas que estão abaixo e encontrá-las no menu. Vamos arrastar a pasta de notícias porque queremos usar essa. Clique em casa. Lá, temos o nosso site. Você pode explorar mais sobre como adicionar novas páginas. Você pode adicionar lojas que eu não vou passar nesta classe porque você precisa ter um negócio ou um plano de comércio. Você pode adicionar eventos e portfólios que eu mostrei anteriormente na classe, páginas em branco, layout de página, pastas e links. 26. Publique seu site: Agora criamos todo o nosso site de portfólio e terminamos e tudo o que precisamos fazer é publicá-lo. Vou mostrar-lhe como publicá-lo, mas eu não vou publicar meu site porque então eu preciso pagar por uma assinatura e um domínio. Vou te mostrar como você pode publicar o seu. Clique em “Página inicial”, “Configurações”, “Disponibilidade do site” e clique em “Atualizado para publicação”. Aqui você selecionará seu plano e tudo, e então você pode publicar seu site quando você se inscrever para um plano. Vou apenas clicar em “Voltar” e mostrar-lhe onde você conectará seu domínio. Você terá um domínio embutido, que é um domínio estranho, crocodile-cello-yaak-squarespace.com. Você pode personalizá-lo se desejar, mas você ainda terá o squarespace.com no final. Vamos tentar renomeá-lo para majasquarespace.com. Você pode realmente usar esse domínio se quiser, ele nunca expira. Não custa nada. Você também pode usar um domínio que você possui. Você pode aprender mais sobre como conectar isso aqui. Eu já fiz isso antes, não é tão difícil, mas é preciso um pouco de paciência para passar por todos os passos. Você também pode obter um domínio através do Squarespace, o que é ótimo porque então você terá todas as faturas do seu site no Squarespace. Isto é o que eu fiz com meus sites. Comprei o domínio através do Squarespace. Você pode escolher seu domínio e clicar em “Adicionar”. Para obter mais informações sobre isso, você pode conferir a Central de Ajuda do Squarespace, sobre a qual mostrarei mais na próxima lição. Não é difícil conectar o domínio. Se você ainda não tem um domínio, sugiro que você o compre através do Squarespace porque torna tudo muito mais fácil. Não é tão difícil conectar o domínio se você já tiver um. 27. Suporte e perguntas: Eu só queria aproveitar esse tempo para passar pelo suporte do Squarespace e ajudar a central com você. Porque eu não sou um suporte do Squarespace. Eu construí alguns sites com o Squarespace e sei como contornar isso. Mas nesta aula, estou mostrando o básico sobre como criar um website de portfólio simples. Se você quiser conhecer técnicas mais avançadas e tiver perguntas específicas, você deve dar uma olhada na central de ajuda do Squarespace. Quando estiver conectado, você pode acessar a Central de Ajuda do Squarespace clicando em “Ajuda” no menu e depois em “Base de Conhecimento”. Aqui você tem um monte de guias ou você pode procurar algumas palavras-chave se você quiser ter ajuda com algo específico. Digamos que eu queira ajuda com blocos de imagem. Você pode clicar no artigo sobre blocos de imagem. Você pode ver se você rolar para baixo que ele diz que este vídeo se aplica ao Squarespace versão 7.0. Essa foi a versão anterior do Squarespace. Isso pode significar que este guia de ajuda é o mesmo para a versão antiga do Squarespace e para a nova versão do Squarespace. A nova versão é chamada 7.1. Você pode ver aqui se rolar para baixo que o layout embutido suporta um estilo de legenda definido por estilos de seção, versão 7.1 ou modelo versão 7.0. Descobri que o Squarespace acabou atualizar sua central de ajuda e adicionou a ajuda para 7.1, a nova versão do Squarespace. Você pode encontrar essas informações nas diferentes páginas. Vamos apenas clicar em uma página diferente, Blogging, por exemplo; Blogging com o Squarespace e ver como isso parece. Aqui eles têm a versão 7.1 e você também pode clicar na versão 7.0. Versão 7.1 é o que você deseja ler sobre, modelos e designs, trabalhando com modelos. Aqui diz, este guia é para a versão 7.0. Todos os slides da versão 7.1 compartilham o mesmo modelo. Para saber mais, visite o Squarespace 7.1. Você deve ter certeza de que leu sobre a versão que você está usando, que é o 7.1 que estamos usando nesta classe. Mas você tem tanta informação aqui que você pode acessar. Você também pode conferir a comunidade onde você pode obter ajuda com sua resposta. Você pode participar do nosso webinar e, se não encontrar o que está procurando, contato com um consultor, então clique em “Fale conosco”. Aqui você pode selecionar qual é a sua pergunta. Escolha um tópico. Digamos que Blocks e você terá esses artigos. Se você ainda não conseguir encontrar o que está procurando, envie um e-mail para o Squarespace ou você pode conversar ao vivo. Neste momento, o chat ao vivo está fechado. Mas para mim isso tem sido muito útil. Assim, o chat ao vivo é um serviço gratuito e também o e-mail. Mas com o chat ao vivo, você pode verificar com o suporte e eles podem ajudá-lo a encontrar as respostas para perguntas que você não pode encontrar nos artigos pré-fabricados. 28. Considerações finais: Isso é tudo por esta aula. Espero que você tenha achado esta classe útil e motivador na criação de seu próprio site portfólio. Como eu mencionei anteriormente na aula, não precisa levar meses para criar um site e você não precisa criar um site realmente personalizado e exclusivo como um criativo. Não há problema em criar o site a partir de um modelo. É a arte que você cria que você quer mostrar, não suas habilidades de web design. Dito isso, muito obrigado por assistir. Se você gosta desta classe, aperte o botão “Seguir” pelo meu nome aqui abaixo. Se você tiver alguma dúvida, por favor, pergunte-lhes na página da Comunidade aqui na aula. Sinta-se livre para deixar um comentário para me informar se você gostou desta aula, Eu adoraria ouvir seus pensamentos. Além disso, certifique-se de que compartilha seu projeto. Se você postar seu projeto no Instagram, sinta-se livre para me marcar @maja_faber. Obrigado novamente por assistir.